Stack/CSS
[CSS] nots (페이지 따라만들기 5)
7ingout
2022. 4. 18. 11:45
index2.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Keywords" content="">
<title>Document</title>
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+KR|Work+Sans:400,600,700" rel="stylesheet">
<link rel="stylesheet" href="css/reset.css" type="text/css">
<link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
<div id="wrap">
<!-- 상단시작 -->
<header>
<div class="mobile">
<span></span>
<span></span>
<span></span>
</div>
<ul class="web">
<li>
<img src="img/Sns_faceBook.png" alt="페이스북">
</li>
<li>
<img src="img/Sns_insta.png" alt="인스타">
</li>
</ul>
<div>
<h1><img src="img/Logo.png" alt="Nots"></h1>
<ul class="web">
<li>BEST SELLER</li>
<li>SKINCARE</li>
<li>MAKEUP</li>
<li>THE STORY</li>
<li>EXPERIENCE</li>
</ul>
</div>
<div>
<form action="search.php" method="get">
<input type="text" id="search" name="search"/>
<img src="img/search.png" alt=""/>
</form>
</div>
</header>
<!-- 상단끝 -->
<!-- 메인컨텐츠시작 -->
<section id="visual">
<img src="img/main_visual_1.png" alt="여자옆모습">
<div>
<h3>WHERE<br/>PREMIUM DWELLS</h3>
<p>
it is the clean healthy looking skin that bootsts your confidence.<br/>
NOTs always aim for the premium.
</p>
</div>
</section>
<section id="product">
<ul>
<li>
<img src="img/B_remedy.png" alt="상품1">
<div>
<h3>Remember the 28 Days</h3>
<h4>28 Remedy</h4>
<p>The regeneration cycle of nomal skin</p>
</div>
</li>
<li>
<img src="img/B_white.png" alt="상품2">
<div>
<h3>Skin Lighting Whitening Program</h3>
<h4>White luminaire</h4>
<p>which completes beautiful by bringtening the lost light within skin</p>
</div>
</li>
<li>
<img src="img/B_begin.png" alt="상품3">
<div>
<h3>Blue Organic</h3>
<h4>Begin28</h4>
<p>Forming moisture protection films in the skin</p>
</div>
</li>
<li>
<img src="img/B_nots.png" alt="상품4">
<div>
<h3>NOTS CREATE BALUE</h3>
<p>We focus on skin style.Nature functional cosmetics,NOTS</p>
</div>
</li>
</ul>
</section>
<section id="new_best">
<!-- 신제품 시작 -->
<div class="new">
<h3>New Arrival</h3>
<ul>
<li>
<img src="img/new1.png" alt="new제품1">
<br/>
28 Remedy Eye Repair
Concentrate Irritation release of eye skin
</li>
<li>
<img src="img/new2.png" alt="new제품2">
<br/>
28 Remedy Eye Repair
Concentrate Irritation release of eye skin
</li>
<li>
<img src="img/new3.png" alt="new제품3">
<br/>
28 Remedy Eye Repair
Concentrate Irritation release of eye skin
</li>
</ul>
</div>
<!-- 신제품 끝 -->
<!-- 베스트셀러 시작 -->
<div class="best">
<h3>Best Sellers</h3>
<ul>
<li>
<img src="img/new4.png" alt="new제품4">
<br/>
28 Remedy Eye Repair
Concentrate Irritation release of eye skin
</li>
<li>
<img src="img/new5.png" alt="new제품5">
<br/>
28 Remedy Eye Repair
Concentrate Irritation release of eye skin
</li>
<li>
<img src="img/new6.png" alt="new제품6">
<br/>
28 Remedy Eye Repair
Concentrate Irritation release of eye skin
</li>
</ul>
</div>
<!-- 베스트셀러 끝 -->
</section>
<section id="movie">
<img src="img/footerMVimg.png" alt="동영상이미지">
<div class="dot"><img src="img/plus.png" alt="시작버튼"></div>
</section>
<!-- 메인컨텐츠끝 -->
<!-- 하단시작 -->
<footer>
<ul>
<li>
<img src="img/btn-sns01.png" alt="페이스북">
</li>
<li>
<img src="img/btn-sns02.png" alt="인스타">
</li>
</ul>
<div>
<select name="more" id="more">
<option value="more">MORE</option>
<option value="Safety">Safety</option>
<option value="Rule">Rule</option>
<option value="Skin">Skin</option>
</select>
</div>
<div>
<h1><img src="img/footer_logo.png" alt="Nots"></h1>
<address>Miso B/D, 638-9 Sinsa-dong, Gangnam-gu, Seoul, Korea (135-896) Tel. +82-1544-3039 | Fax. +82-70-8677-6188 | E-mail. nots@nots.co.kr Copyright(c) NoTS co., Ltd. All rights Reserved.
</address>
</div>
</footer>
<!-- 하단끝 -->
</div>
</body>
</html>
style.css
* { margin: 0; padding: 0; box-sizing: border-box; }
li { list-style: none; }
a { text-decoration: none; color: inherit; }
address { font-style: normal; }
#wrap {
width: 100%;
max-width: 1850px;
margin: 0 auto;
}
.mobile {
display: none;
}
header {
display: flex;
text-align: center;
justify-content: space-between;
}
header h1 {
padding: 25px;
}
header .web {
display: flex;
align-items: center;
}
header .web li {
padding: 15px;
}
header .web li img {
margin-top: 100px;
}
header div:nth-of-type(3) {
margin-top: 100px;
}
#visual img {
position: relative;
width: 100%;
}
#visual div {
position: absolute;
left: 3%;
top: 75%;
color: #fff;
}
#visual div h3 {
font-size: 46px;
}
#visual div p {
font-size: 24px;
}
#product ul {
padding-top: 20px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
#product li {
position: relative;
height: 630px;
overflow: hidden;
padding-top: 30px;
}
#product li img {
width: 100%;
}
#product li div {
position: absolute;
color: #fff;
background-color: rgba(0, 0, 0, 0.5);
text-align: center;
padding: 100px 0;
top: 100%;
width: 100%;
transition: 0.5s;
}
#product li div h3 {
font-size: 42px;
font-weight: normal;
padding-bottom: 15px;
}
#product li:hover div{
top: 54%;
}
#new_best {
display: flex;
text-align: center;
padding: 40px 0;
flex-wrap: nowrap;
}
#new_best ul {
display: flex;
text-align: center;
}
#new_best h3 {
font-size: 36px;
}
#movie {
text-align: center;
}
footer {
display: flex;
flex-direction: column;
text-align: center;
justify-content: center;
padding-bottom: 50px;
}
footer ul {
display: flex;
justify-content: center;
border-bottom: 2px solid #797979;
}
footer li {
padding: 10px;
padding-bottom: 40px;
}
#more {
margin: 15px 0;
padding: 5px 80px;
}
footer h1 {
border-top: 1px solid #ccc;
}
header form {
outline: none;
}
@media screen and (max-width: 768px) {
* { margin: 5px; }
.mobile {
display: block;
margin-top: 60px;
}
.mobile span {
margin: 10px;
display: block;
width: 50%;
height: 5px;
background-color: #797979;
}
header .web {
display: none;
}
#visual div {
margin-top: -520px;
}
#visual div h3{
font-size: 32px;
}
#visual div p{
font-size: 22px;
}
#product li {
height: 350px;
overflow: hidden;
padding-top: 50px;
}
#product li div {
text-align: center;
top: 100%;
width: 100%;
transition: 0.5s;
padding: 40px;
}
#product div h3{
font-size: 24px;
}
#product div p{
font-size: 18px;
}
#product li:hover div{
top: 45%;
}
#new_best {
display: flex;
width: 100%;
justify-content: center;
align-items: center;
text-align: center;
}
#new_best .new {
width: 50%;
}
#new_best .best {
width: 50%;
}
#new_best .new ul {
display: flex;
flex-direction: column;
}
#new_best .best ul{
display: flex;
flex-direction: column;
}
#movie {
width: 100%;
}
#movie img {
width: 100%;
position: relative;
}
.dot {
position: absolute;
}
header form #search{
display: none;
}
header div {
width: 100%;
}
header form img {
margin-top: -60px;
}
}