210615 UIUX WebDesign CSS 연습_36

ITisIT210·2021년 6월 20일
0

CSS

목록 보기
36/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: 0px auto;
            width: 1200px;
            text-align: center;
        }
        #wrap h1 {
            margin: 60px;
            font-size: 45px;
        }
        #wrap h2 {
            margin: 10px 0px;
            font-size: 18px;
        }

        .success {
            margin-bottom: 30px;
            width: 1200px;
            float: left;
        }
        .brand {
            margin-right: 30px;
            padding: 160px 35px 30px;
            width: 378px;
            height: 298px;
            float: left;
            border: 1px solid #ccc;
            background: url("./images/point_img01.gif") no-repeat center 60px;
        }
        .sales {
            margin-right: 30px;
            padding: 160px 35px 30px;
            width: 378px;
            height: 298px;
            float: left;
            border: 1px solid #ccc;
            background: url("./images/point_img02.gif") no-repeat center 60px;
        }
        .manage {
            margin-right: 0px;
            padding: 160px 25px 30px;
            width: 378px;
            height: 298px;
            float: left;
            border: 1px solid #ccc;
            background: url("./images/point_img03.gif") no-repeat center 60px;
        }

        .point {
            width: 1200px;
            float: left;
        }
        .proSys {
            margin-right: 30px;
            padding: 160px 35px 30px;
            width: 378px;
            height: 298px;
            float: left;
            border: 1px solid #ccc;
            background: url("./images/point_img04.gif") no-repeat center 60px;
        }
        .ca {
            margin-right: 30px;
            padding: 160px 45px 30px;
            width: 378px;
            height: 298px;
            float: left;
            border: 1px solid #ccc;
            background: url("./images/point_img05.gif") no-repeat center 60px;
        }
        .concept {
            margin-right: 0px;
            padding: 160px 45px 30px;
            width: 378px;
            height: 298px;
            float: left;
            border: 1px solid #ccc;
            background: url("./images/point_img06.gif") no-repeat center 60px;
        }
    </style>
</head>
<body>
    <div id="wrap">
        <h1>본우리반상의 성공포인트</h1>
        <div class="success">
            <div class="brand">
                <h2>NO.1 한식반상 브랜드</h2>
                <p>
                    한식 반상 시장, 업계 1위로 반상 형태의 
                    외식문화를 리드하는 브랜드
                </p>
            </div>
    
            <div class="sales">
                <h2>고매출로 이어지는 높은 객단가</h2>
                <p>
                    프리미엄 한식에 맞는 높은 메뉴 객단가로
                    안정적인 수익 구조 형성
                </p>
            </div>

            <div class="manage">
                <h2>가맹 운영지원 제도</h2>
                <p>
                    성공적인 외식 경영을 위한 가맹점 위탁 운영
                    제도 및 가맹점 공동 투자 제도 운영
                </p>
            </div>
        </div>

        <div class="point">
            <div class="proSys">
                <h2>외식 경영 프로세스 최적화</h2>
                <p>
                    주문후 10분이내 식사 제공이 가능한 
                    3S(Safe, Speed, Simple) System
                </p>
            </div>

            <div class="ca">
                <h2>A급 핵심상권 중심 입점</h2>
                <p>
                    일반 로드 상권 및 백화점, 대형 역사 등 
                    유동인구가 많은 특수 상권 입점 가능
                </p>
            </div>
    
            <div class="concept">
                <h2>프리미엄 브랜드 컨셉</h2>
                <p>
                    프라이빗 공간, 미니화로, 도자기찬 등 
                    고급 기물을 통한 프리미엄화 구현
                </p>
            </div>
        </div>

    </div>
</body>
</html>
profile
Engineering is the closest thing to magic that exists in the world.

0개의 댓글