<!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>Document</title>
<link rel="stylesheet" type="text/css" href="./css/reset.css">
<link rel="stylesheet" type="text/css" href="./css/main.css">
</head>
<body>
<div id="wrap">
<!-- 상단영역 -->
<header id="header">
<h1 class="logo">나의여행</h1>
<nav class="nav">
<ul>
<li><a href="#">일본패키지</a></li>
<li><a href="#">일본자유</a></li>
<li><a href="#">동남아여행</a></li>
<li><a href="#">제주/국내</a></li>
<li><a href="#">현지버스투어</a></li>
<li><a href="#">호텔/로칸</a></li>
<li><a href="#">패스</a></li>
</ul>
</nav>
</header>
<!-- 메인이미지 -->
<section id="main_img"></section>
<!-- 콘텐츠 -->
<section id="contents">
<article id="best">
<header id="best_h">
<h3>인기상품</h3>
</header>
<section id="best_b">
<figure class="b_img">
<img src="./images/img1.jpg" alt="독도" />
<figcaption>
<h4>1</h4>
<div class="group">
<h5>울릉도 패키지</5>
<p>199000원~</p>
</div>
<a href="#">구매하기</a>
</figcaption>
</figure>
<ul class="list">
<li>
<h4>2</h4>
<img />
<div class="group">
<h5>울릉도 패키지</5>
<p>199000원~</p>
</div>
<a href="#">구매하기</a>
</li>
<li>
<h4>3</h4>
<img />
<div class="group">
<h5>울릉도 패키지</5>
<p>199000원~</p>
</div>
<a href="#">구매하기</a>
</li>
<li>
<h4>4</h4>
<img />
<div class="group">
<h5>울릉도 패키지</5>
<p>199000원~</p>
</div>
<a href="#">구매하기</a>
</li>
<li>
<h4>5</h4>
<img />
<div class="group">
<h5>울릉도 패키지</5>
<p>199000원~</p>
</div>
<a href="#">구매하기</a>
</li>
</ul>
</section>
</article>
<article id="banner"></article>
<article id="event"></article>
</section>
<!-- 하단 -->
<footer id="footer"></footer>
</div>
</body>
</html>
#wrap {
width: 100%;
}
#header {
width: 100%;
height: 140px;
}
#header .logo {
padding: 40px 0;
text-align: center;
font-size: 34px;
font-family: '바탕체';
font-weight: 900;
}
#header .nav {
margin: 0 auto;
width: 780px;
height: 78px;
}
#header .nav ul {
display: flex;
justify-content: space-between;
}
#header .nav a {
font-size: 18px;
}
#main_img {
width: 100%;
height: 810px;
background: url(../images/visual.jpg) no-repeat 0 0;
background-size: 100% 100%;
}
#contents {
width: 100%;
height: 1600px;
background-color: rgb(101, 81, 101);
}
#best {
margin: 0 auto;
width: 1200px;
height: 715px;
background-color: rgb(157, 140, 157);
}
#best_h {
width: 100%;
height: 70px;
padding: 30px 0 0 5px;
box-sizing: border-box;
}
#best_h h3 {
font-size: 18px;
color: #000;
}
#best_b {
width: 100%;
}
#best_b .b_img {
float: left;
width: 600px;
height: 620px;
background-color: violet;
}
#best_b .list {
float: right;
width: 550px;
height: 620px;
background-color: violet;
}
#banner {
margin: 0 auto;
width: 1200px;
height: 135px;
background-color: rgb(169, 128, 169);
}
#event {
margin: 0 auto;
width: 1200px;
height: 760px;
background-color: rgb(238, 199, 238);
}
#footer {
width: 100%;
height: 320px;
background-color: tomato;
}