http://greenweb.dothome.co.kr/nots/
Document
NOTS CREATE BALUE We focus on skin style.Nature functional cosmetics,NOTS
greenweb.dothome.co.kr
1) nots.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">
<link rel="stylesheet" href="./nots.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>2) nots.css
* { margin: 0; padding: 0; box-sizing: border-box;}
a { text-decoration: none; color: inherit;}
li { list-style: none;}
body {
font-family: '나눔고딕', sans-serif;
font-size: 14px;
color: #2d2d2d;
line-height: 1.6;
}
select, input {
outline: none;
}
#wrap {
width:100%;
margin: 0 auto;
padding: 20px;
}
.mobile {
display: none;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 50px;
padding-bottom: 10px;
}
header > ul {
display: flex;
width: 10%;
padding-top: 60px;
}
header > ul li {
padding-right: 10px;
}
header > div:nth-child(3) {
text-align: center;
width: 30%;
}
header > div > ul {
display: flex;
}
header > div > ul li {
padding: 20px;
font-size: 16px;
width: 100%;
}
header > div:nth-child(4) {
padding-top: 60px;
}
header > div:nth-child(4) #search {
padding-top: 30px;
border: none;
border-bottom: 1px solid #ccc;
}
img {
vertical-align: top;
}
#visual img {
width: 100%;
}
#visual {
position: relative;
margin-bottom: 20px;
}
#visual > div {
position: absolute;
bottom: 30px;
left: 30px;
color: #fff;
}
#visual > div h3 {
font-size: 60px;
line-height: 60px;
}
#visual > div p {
font-size: 25px;
}
#product ul {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
#product ul li {
width: 49.5%;
position: relative;
}
#product ul li:nth-child(1),#product ul li:nth-child(3) {
padding-bottom: 15px;
}
#product ul li img {
width: 100%;
}
#product ul li div {
width: 100%;
height: 180px;
position: absolute;
bottom: -170px;
transition: 0.5s;
color: #fff;
text-align: center;
padding-top: 30px;
opacity: 0;
}
#product ul li div h3 {
font-size: 40px;
}
#product ul li:hover div {
background: rgba(0, 0, 0, 0.5);
bottom: 15px;
opacity: 1;
}
#new_best {
display: flex;
width: 100%;
padding: 30px 0;
}
#new_best h3 {
text-align: center;
font-size: 40px;
}
#new_best > div {
width: 50%;
}
.new ul {
display: flex;
}
.new ul li {
width: 33.333%;
text-align: center;
}
.best ul {
display: flex;
}
.best ul li {
width: 33.333%;
text-align: center;
}
footer ul {
display: flex;
justify-content: center;
margin-bottom: 20px;
margin-top: 30px;
}
footer ul li {
padding: 10px;
margin: 20px 0;
}
footer div:nth-child(2) {
display: flex;
justify-content: center;
padding-top: 10px;
border-top: 1px solid #333;
padding-bottom: 10px;
border-bottom: 1px solid #ccc;
}
#more {
padding: 4px 0;
width: 200px;
font-size: 15px;
}
footer h1 {
text-align: center;
}
footer address {
text-align: center;
font-style: normal;
}
@media screen and (max-width: 768px) {
.mobile {
display: flex;
width: 60px;
height: 60px;
flex-direction: column;
justify-content: center;
align-items: center;
}
.mobile span {
width: 80%;
height: 5px;
background: #ccc;
}
.mobile span:not(:last-child) {
margin-bottom: 10px;
}
header .web {
display: none;
}
header > div input {
display: none;
}
header > div:last-child {
line-height: 100px;
}
header {
justify-content: space-between;
align-items: center;
padding-bottom: 30px;
}
#product ul li {
width: 100%;
}
.new ul {
flex-direction: column;
}
.new ul li {
width: 100%;
}
.best ul {
flex-direction: column;
}
.best ul li {
width: 100%;
}
#movie img {
width: 100%;
}
#movie div {
display: none;
}
footer {
padding-top: 0;
}
#product ul li:nth-child(2) {
padding-bottom: 15px;
}
#product ul li:nth-child(4):hover div {
bottom: 0;
}
}3) nots_teach.css
/* CSS초기화 */
* {
margin:0;
padding:0;
border:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
body {
font-family:NanumGothic,"나눔고딕","맑은 고딕",HelveticaNeue,Sans-serif;
line-height:1;
}
article,aside,section,footer,header,nav,menu {
display:block;
}
a { text-decoration:none; }
li {
list-style:none;
list-style-position:inside;
}
img {
vertical-align:top;
border:0;
}
table {
border-collapse:collapse;
border-spacing:0;
}
input {
margin:0;
padding:0;
vertical-align:top;
border:1px solid #e65d5d;
color:#e65d5d;
border-radius:0;
}
address {
font-style:normal;
}
* { box-sizing: border-box; }
body {
font-family: "Work Sans","Noto Sans KR", sans-serif;
font-size: 16px;
line-height: 1.5;
color: #4d4d4d;
}
#wrap {
padding:30px;
width: 100%;
}
header {
height: 160px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: flex-end;
padding-bottom:30px;
}
header ul {
display: flex;
}
header > ul li {
padding-right:10px;
}
header h1 {
padding-bottom:30px;
}
header > div ul li {
padding:0 20px;
font-size: 18px;
}
header > div {
text-align: center;
}
header input {
vertical-align: bottom;
border:0;
border-bottom: 1px solid #ddd;
}
#visual {
position: relative;
}
#visual div {
position: absolute;
bottom:0;
left:0;
color: #fff;
padding:30px;
}
#visual div h3 {
font-size: 62px;
line-height: 1;
font-weight: normal;
}
#visual div p {
font-size: 24px;
}
#visual img {
width: 100%;
}
#product {
padding-top: 30px;
}
#product ul {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
#product ul li {
width:49%;
position: relative;
margin-bottom: 30px;
overflow: hidden;
}
#product ul li:hover div{
top:50%;
}
#product ul li div {
position: absolute;
top:100%;
left:0;
width:100%;
height: 50%;
background: rgba(0,0,0,0.5);
color: #fff;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
transition: 0.5s;
}
#product ul li div h3 {
font-size:42px;
font-weight: normal;
}
#product ul li img{
width: 100%;
}
#new_best {
display: flex;
padding-bottom: 30px;
}
#new_best > div {
width:50%;
text-align: center;
}
#new_best > div h3 {
font-size:42px;
font-weight: normal;
}
#new_best > div ul {
display: flex;
}
footer {text-align: center; }
footer > ul:nth-child(1) {
padding:40px;
display: flex;
justify-content: center;
}
footer > ul:nth-child(1) li {
padding: 10px;
}
footer > div:nth-child(2) {
height: 60px;
text-align: center;
border-top:1px solid #555;
border-bottom: 1px solid #ccc;
padding-top: 15px;
}
footer > div:nth-child(2) select {
border:1px solid #ccc;
width:200px;
height: 30px
}
.mobile {
display: none;
}
@media all and (max-width:768px){
.web { display: none; }
header {
align-items: center;
}
.mobile { display: block;
width:80px;
height: 80px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.mobile span {
background: #666;
width: 70%;
height: 5px;
display: block;
margin-bottom: 10px;
}
header input {
display: none;
}
#product ul {
flex-direction: column;
}
#product ul li {
width:100%;
}
#new_best > div ul {
display: flex;
flex-direction: column;
}
#movie > img {
width: 100%;
}
}'노력이 좋아서' 카테고리의 다른 글
| <step22>'scss_이자녹스 홈페이지 따라하기' (0) | 2022.04.19 |
|---|---|
| <step21>'scss_기초' (0) | 2022.04.18 |
| <step21>'css_갤럭시 홈페이지 따라하기' (0) | 2022.04.18 |
| <step20>'css_반응형_media' (0) | 2022.04.15 |
| <step19>'css_flex실습' (0) | 2022.04.15 |