20190620

<!DOCTYPE htm>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Vallery Festival</title>
<link href="./style.css" rel="stylesheet" />
</head>
<body>
    <div class="wrap">
        <div class="header">
            <h3 class="logo">
                <a href="#">Vallery Festival</a>
            </h3>
            <ul class="gnb">
                <li><a href="#">축제소개</a>
                    <ul>
                        <li><a href="#">Festival소개</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>
                <li><a href="#">아티스트</a>
                    <ul>
                        <li><a href="#">고릴라즈</a></li>
                        <li><a href="#">메이저 레이저</a></li>
                        <li><a href="#">아우스게인</a></li>
                        <li><a href="#">타임로드</a></li>
                    </ul>
                </li>
                <li><a href="#">커뮤니티</a></li>
            </ul>
        </div>
        <div class="content-wrap">
            <div class="slide">
                <ul>
                    <li>
                        <p>삼겹살 먹고 싶어요</p>
                    </li>
                    <li>
                        <p>초밥 먹고 싶어요</p>
                    </li>
                    <li>
                        <p>스테이크 먹고 싶어요</p>
                    </li>
                </ul>
            </div>
            <div class="content"></div>
            <div class="footer"></div>
        </div>
    </div>
</body>
</html>
* { margin: 0; padding: 0;}
ul, li { list-style: none; }
a { text-decoration: none; color: inherit;}

.wrap { display: flex; width: 1000px; margin:0 auto; height: 650px;}
.header { width: 200px; }
.logo a {
    display: block;
    padding: 30px 0;
    font-size: 25px;
    font-weight: bold;
    color: #09F;
}
.gnb a { display: block; transition: 0.3s;}
.gnb>li{ position: relative}
.gnb>li>ul{ display:none; position: absolute; left: 100%; top: 0; width: 200px; }
.gnb>li:hover>ul { display: block; animation:open 1s;}

@keyframes open {
    from { opacity: 0;}
    to { opacity: 1;}
}

.gnb>li>a{ font-size:19px; color:#666;
           border-bottom: 1px solid #ddd;
           padding: 10px;}
.gnb>li:hover>a{ color:#fff; background: #09F;}
.gnb>li>ul a {
    background: #09F;
    color: #fff;
    padding: 5px; border-bottom: 1px solid #fff;
}
.gnb>li>ul a:hover { background: #fff; color: #09F;}
.content-wrap { width: 800px; }
.slide{}
.slide ul{width:calc(100% * 3); display:flex;}
.slide li{width:calc(100% / 3); height:350px;}
.slide li:nth-child(1){ background:url(https://pds.joins.com/news/component/htmlphoto_mmdata/201702/27/117f5b49-1d09-4550-8ab7-87c0d82614de.jpg) no-repeat center / cover;
}
.slide li:nth-child(2){     background:url(https://www.portopia.co.jp/src/uploads/restaurantImage/1-1000/215.jpg) no-repeat center / cover;
}
.slide li:nth-child(3){     background:url(http://recipe1.ezmember.co.kr/cache/recipe/2017/07/09/6741acc7f6bf0f7d04245851fb365c311.jpg) no-repeat center / cover;
}