210615 UIUX WebDesign CSS 연습_34

ITisIT210·2021년 6월 20일
0

CSS

목록 보기
34/93
post-thumbnail
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>청담러닝</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: "맑은 고딕";
            font-size: 16px;
            line-height: 1.5;
        }
        table {
            border-collapse: collapse;
        }
        ol, ul {
            list-style: none;
        }
        #wrap {
            margin: 50px auto;
            width: 1180px;
        }
        #wrap h1 {
            padding-bottom: 15px;
            font-size: 20px;
            font-weight: 500;
            border-bottom: 1px solid #eee;
        }
        #wrap h2 {
            margin: 30px 0px;
            font-size: 30px;
        }
        .chungDahm {
            margin-right: 20px;
            padding: 35px 30px 0px 30px;
            width: 380px;
            color: #fff;
            background-color: #fe6962;
            float: left;
            border-radius: 30px;
        }
        .april {
            margin-right: 20px;
            padding: 35px 30px 0px 30px;
            width: 380px;
            color: #fff;
            background-color: #89c049;
            float: left;
            border-radius: 30px;
        }
        .iGarten {
            padding: 35px 30px 0px 30px;
            width: 380px;
            color: #fff;
            background-color: #2f6fb7;
            float: left;
            border-radius: 30px;
        }
        .imgAcademy {
            padding: 70px 30px 0px 70px;
        }
    </style>
</head>
<body>
    <div id="wrap">
        <div class="chungDahm">
            <h1>청담어학원</h1>
            <h2>창의융합형 <br> 21세기 인재양성</h2>
            <p>
                풍부한 배경지식과 영어 사고력, 표현력, 상상력을 키워 자신만의 비전을
                형성하는 ESL 창의사고 교육의 완성
            </p>
            <div class="imgAcademy">
                <img src="./images/brand_1.png" alt="ChungDahm image">
            </div>
        </div>

        <div class="april">
            <h1>April어학원</h1>
            <h2>언어, 사고, 예술의 <br> 창의사고력 개발</h2>
            <p>
                언어, 사고, 예술의 유기적인 결합으로 창의 사고력 쑥쑥! 
                Creative Learning의 NO.1 에이프릴어학원
            </p>

            <div class="imgAcademy">
                <img src="./images/brand_2.png" alt="April image">
            </div>
        </div>

        <div class="iGarten">
            <h1>아이가르텐</h1>
            <h2>상상력과 창의력을 <br> 키우는 유아전문 교육</h2>
            <p>
                우리아이가 마음껏 상상의 나래를 펴고 자신을 표현하는 청담러닝의 
                유아전문 ESL 교육기관 아이가르텐
            </p>

            <div class="imgAcademy">
                <img src="./images/brand_3.png" alt="iGarten image">
            </div>
        </div>
    </div>
</body>
</html>
profile
Engineering is the closest thing to magic that exists in the world.

0개의 댓글