0510

<!DOCTYPE html>
<html>
<head>
<meta0 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>디저트 전문점</title>
</head>
<body>
<div class="wrap">
	<header class="header">
    	<h3 class="logo"><a href="#"><img src="img/logo.png" alt="logo" /></a></h3>
        <ul>
            <li><a href="#">브랜드 스토리</a></li>
            <li><a href="#">메뉴</a>                	
                <ul>
                    <li><a href="#">케이크</a></li>
                    <li><a href="#">타르트</a></li>
                    <li><a href="#">음료</a></li>
                </ul>
            </li>
            <li><a href="#">고객센터</a>
                <ul>
                    <li><a href="#">공지사항</a></li>
                    <li><a href="#">문의</a></li>
                    <li><a href="#">이벤트</a></li>
                </ul>
            </li>
        </ul>
    </header>
    <div class="slide">
    	<ul>
        	<li></li>
        	<li></li>
        	<li></li>
        </ul>
        <div class="slogan">
        	<img src="img/emblem.png" alt="emblem">
            <p>매일 다른 디저트 케이크를 즐기는 공간, 엔젤케이크</p>
        </div>
    </div>
    <section class="content">
    	<div class="content-top">
        	<ul>
            	<li>
                	<span class="icon"></span>
                    <h3>Brand Story</h3>
                    <strong>일상의 즐거움</strong>
                    <p>엔젤케이크의 한 조각 케이크가 작은 즐거움이 되도록 노력합니다.</p>
                </li>
            	<li>
                	<span class="icon"></span>
                    <h3>Store</h3>
                    <strong>함께 만들어가요!</strong>
                    <p>엔젤케이크의 한 조각 케이크가 작은 즐거움이 되도록 노력합니다.</p>
                </li>
            </ul>
        </div>
        <div class="content-btm">
        	<div class="notice">
            	<ul>
                	<li>
                    	<p class="subject">- 엔젤 케이크 홍대점 오픈 안내</p>
                        <span class="date">17.01.23</span>
                    </li>
                	<li>
                    	<p class="subject">- 신제품 ‘하트앤엔젤’  출시</p>
                        <span class="date">17.01.23</span>
                    </li>
                	<li>
                    	<p class="subject">- 발렌타인 음료 증정 이벤트</p>
                        <span class="date">17.01.23</span>
                    </li>
                </ul>
            </div>
            <div class="photo">
            	<label for="layer">
                	<img src="img/cake.jpg" alt="cake" width="200" />
                </label>
            	<strong>생크림 딸기 케이크</strong>
				<p>부드러운 시트와 생크링의 심플한 조화 엔젤케이크 베스트셀러</p>
            </div>
            <input type="checkbox" id="layer" />
            <div class="layer">
            	<div>
                	<label for="layer">X</label>
                	<img src="img/cake.jpg" alt="cake" />
                </div>
            </div>
        </div>
    </section>
    <footer class="footer">
    	<p>브랜드스토리 | 사이트맵 | 이메일무단수집거부 | 개인정보처리방침</p>
		<p>사업자번호 : 000-00-00000     ADD 서울시 강남구 역삼동 733 엔젤케이크    TEL 010-000-0000    E-mail master@angelcake.co.kr</p>
		<p>COPYRIGHT 2017 © ANGELCAKE. ALL RIGHTS RESERVED.</p>
    </footer>
</div>
</body>
</html>






 

@charset "utf-8";
/* CSS Document */

/* 기본 태그 */
body{color:#666666}
* {margin:0; padding:0;}
ul, li{ list-style:none;}
a{ text-decoration:none; color:#666666; }

/* layout */
.wrap{margin:0 auto;width:1000px; border:1px solid #000;}
.header{height:100px; border-bottom:1px solid #000; display:flex; justify-content:space-between;
		align-items:center; padding:0 40px;}
.gnb{display:flex;}
.gnb a{ display:block; transition:0.3s;}
.gnb>li{ position:relative;}
.gnb>li>a{padding:0 40px; line-height:60px;}
.gnb>li>ul{ position:absolute; left:0; right:0; overflow:hidden; height:0; transition:0.5s;
			text-align:center; line-height:40px;}
.gnb>li:hover>ul{height:200px;}
.gnb>li:hover>a{ background:#c03e58; color:#fff;}
.gnb>li>ul a{ background:#eee; color:#666;}
.gnb>li>ul a:hover{ background:#2a2a2a; color:#fff;}

.slide {} /* slide width = 1000px */
.slide ul{width:3000px; display:flex;} /* width:300%; */
.slide li{width:1000px; height:400px;} /* width:33.333%; */
.slide li:nth-child(1){ background:url(../img/slide1.jpg) no-repeat center / cover;} /* 첫번째 li */
.slide li:nth-child(2){ background:url(../img/slide2.jpg) no-repeat center / cover;} /* 두번째 li */
.slide li:nth-child(3){ background:url(../img/slide3.jpg) no-repeat center / cover;} /* 세번째 li */