<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HOME PAGE</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrap">
<div class="nav">
<div class="nav-home"><h1>HOME PAGE</h1></div>
<ul class="nav-menu">
<li><a href="#"><h5>홈페이지</h5></a>
<ul class="menu-bar">
<li><a href="#"><h5>회사소개</h5></a></li>
<li><a href="#"><h5>회사역사</h5></a></li>
<li><a href="#"><h5>혁신기업</h5></a></li>
</ul>
</li>
<li><a href="#"><h5>가구</h5></a>
<ul class="menu-bar">
<li><a href="#"><h5>의자</h5></a></li>
<li><a href="#"><h5>책상</h5></a></li>
<li><a href="#"><h5>소파</h5></a></li>
<li><a href="#"><h5>책장</h5></a></li>
<li><a href="#"><h5>침대</h5></a></li>
</ul>
</li>
<li><a href="#"><h5>게시판</h5></a>
<ul class="menu-bar">
<li><a href="#"><h5>공지사항</h5></a></li>
<li><a href="#"><h5>자유게시</h5></a></li>
<li><a href="#"><h5>일반게시</h5></a></li>
</ul>
</li>
<li><a href="#"><h5>기타</h5></a>
<ul class="menu-bar">
<li><a href="#"><h5>고장문의</h5></a></li>
<li><a href="#"><h5>고객지원</h5></a></li>
<li><a href="#"><h5>매장안내</h5></a></li>
</ul>
</li>
</ul>
</div>
<div class="contents0">
<img src="img/h1.jpg" alt="">
</div>
<div class="contents1">
<h2>BEST PRODUCT</h2>
<div class="best">
<div class="item">
<div class="img"><img src="img/a1.jpg" alt=""></div>
<h3>베를린 기본 장식</h3>
<h4>교육의 자주성·전문성·정치적 중립성 및 대학의 자율성은 법률이 정하는 바에 의하여 보장된다.</h4>
</div>
<div class="item">
<div class="img"><img src="img/a2.jpg" alt=""></div>
<h3>베를린 기본 장식</h3>
<h4>교육의 자주성·전문성·정치적 중립성 및 대학의 자율성은 법률이 정하는 바에 의하여 보장된다.</h4>
</div>
<div class="item">
<div class="img"><img src="img/a3.jpg" alt=""></div>
<h3>베를린 기본 장식</h3>
<h4>교육의 자주성·전문성·정치적 중립성 및 대학의 자율성은 법률이 정하는 바에 의하여 보장된다.</h4>
</div>
<div class="item">
<div class="img"><img src="img/a4.jpg" alt=""></div>
<h3>베를린 기본 장식</h3>
<h4>교육의 자주성·전문성·정치적 중립성 및 대학의 자율성은 법률이 정하는 바에 의하여 보장된다.</h4>
</div>
</div>
<div class="best">
<div class="item">
<div class="img"><img src="img/a1.jpg" alt=""></div>
<h3>베를린 기본 장식</h3>
<h4>교육의 자주성·전문성·정치적 중립성 및 대학의 자율성은 법률이 정하는 바에 의하여 보장된다.</h4>
</div>
<div class="item">
<div class="img"><img src="img/a2.jpg" alt=""></div>
<h3>베를린 기본 장식</h3>
<h4>교육의 자주성·전문성·정치적 중립성 및 대학의 자율성은 법률이 정하는 바에 의하여 보장된다.</h4>
</div>
<div class="item">
<div class="img"><img src="img/a3.jpg" alt=""></div>
<h3>베를린 기본 장식</h3>
<h4>교육의 자주성·전문성·정치적 중립성 및 대학의 자율성은 법률이 정하는 바에 의하여 보장된다.</h4>
</div>
<div class="item">
<div class="img"><img src="img/a4.jpg" alt=""></div>
<h3>베를린 기본 장식</h3>
<h4>교육의 자주성·전문성·정치적 중립성 및 대학의 자율성은 법률이 정하는 바에 의하여 보장된다.</h4>
</div>
</div>
<hr>
</div>
<div class="contents2">
<h2>INTERIOR ROOM</h2>
<div class="item">
<div class="img"><img src="img/b1.jpg" alt=""></div>
<div class="key">
<img src="img/L.gif" alt="">
<img src="img/R.gif" alt="">
</div>
</div>
<div class="item">
<div class="img"><img src="img/b2.jpg" alt=""></div>
<div class="key">
<img src="img/L.gif" alt="">
<img src="img/R.gif" alt="">
</div>
</div>
</div>
</div>
</body>
</html>
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
body{
font-family: "Noto Sans KR";
font-size: 1.4rem;
}
a{
text-decoration: none;
color: inherit;
}
ul{
list-style: none;
padding: 0;
}
h2{
margin-bottom: 3rem;
}
h3{
font-size: 1rem;
margin: 0.2rem 0;
padding-left: 0.5rem;
}
h4{
font-size: 0.7rem;
margin: 0.1rem 0;
padding-left: 0.5rem;
}
.wrap{
width: 1280px;
margin: 0 auto;
}
.nav{
margin-bottom: 3rem;
}
.nav-home{
text-align: center;
}
.nav-menu{
position: relative;
margin: 0 auto;
width: calc(100%/2);
display: flex;
justify-content: space-between;
}
.nav-menu h5{
margin: 0;
}
.nav-menu .menu-bar{
position: absolute;
width: calc(1280px/2);
height: 4rem;
left: 0; top: 100%;
display: none;
justify-content: space-between;
}
.nav-menu li:hover .menu-bar{
padding-top: 10px;
display: flex;
}
.contents1, .contents2{
text-align: center;
}
.contents1{
margin: 5rem 0;
}
.contents1 > .best{
display: flex;
justify-content: space-between;
padding: 0px 5rem;
margin-bottom: 3rem;
}
.contents1 > .best > .item{
text-align: justify;
width: 250px;
}
.contents1 > .best > .item img{
width: 100%;
border-radius: 0.5rem;
}
.contents2 > .item{
position: relative;
}
.contents2 .img img{
width: 100%;
display: block;
}
.contents2 > .item > .key{
position: absolute;
width: 95%;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
display: flex;
justify-content: space-between;
}
.contents2 > .item > .key >img{
width: 50px;
opacity: 50%;
}