카테고리 없음
2020/05/31 샘표 모작 진행중
개발경범
2020. 5. 31. 18:40
<Html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css" />
<link rel="stylesheet" href="css/main.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300&display=swap');
@import url(//fonts.googleapis.com/earlyaccess/nanummyeongjo.css);
</style>
</head>
<body>
<header>
<div class="r_box"></div>
<div class="h_box">
<div class="h_top">
<div class="h_left">
<ul>
<li><a href="#">제품</a></li>
<li><a href="#">고객센터</a></li>
<li><a href="#">이벤트</a></li>
</ul>
</div>
<div class="h_right">
<ul>
<li><a href="#">로그인</a></li>
<li><a href="#">회원가입</a></li>
<li><a href="#">장바구니</a></li>
</ul>
</div>
</div>
<h1 class="logo"><img src="image/imges_12.png" alt=""></h1>
<nav>
<ul class="gnb">
<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>
</div>
</header>
<div class="visual"><img src="image/imges_19.jpg" alt="">
<div class="vi_box">
<p>쉽게 맛있게 건강하게 이렇게 쉬운 연두 요리법</p>
<h1>요리에센스 연두</h1>
<div class="line"></div>
<div class="wlogo"><img src="image/unnamed.png" alt=""></div>
</div>
<div class="u_box">
<ul class="sub">
<li><i class="fas fa-home"></i>
<a href="#">BRAND SITE</a></li>
<li><a href="#"><i class="fab fa-facebook"></i></a></li>
<li><a href=""><i class="fab fa-youtube"></i></a></li>
<li><a href=""><i class="fas fa-blog"></i></a></li>
<li><a href="#"><i></i></a></li>
<li><a href="#"><i></i></a></li>
</ul>
</div>
</div>
<section>
<div class="s1_box">
<article>
<h1>재료의 참맛이<br>
살아나야<br>
진짜 맛있는 요리</h1>
<p>과다한 양념과 조미료에 길들여져 진짜<br> 맛있는 맛의 의미를 잊고 있었다면, <br>요리에센스 연두로 재료의 진정한<br> 참맛을 느껴보세요.</p>
</article>
<article>
<h1>순식물성<br>
콩발효 에센스</h1>
<p>우리 맛의 근본인 장(醬), 그 맛의<br> 핵심은 바로 콩 발효입니다. 70년<br> 발효연구 노하우의 집약체, 연두는<br> 콩을 100% 자연 발효한 콩 발효 액과<br> 국산 야채 우린 물로 만들었습니다.</p>
</article>
<article>
<h1>요리를 요리답게</h1>
<p>에센스가 피부 본연의 아름다움을<br> 살려주듯 요리에센스 연두는 재료의<br> 참맛을 살려 요리 본연의 맛을<br> 찾아줍니다.</p>
</article>
</div>
<div class="con">
<div class="s2_box"><img src="image/imges_32.jpg" alt=""></div>
<div class="s3_box"><img src="image/imges_34.jpg" alt="">
<img src="image/imges_39.jpg" alt="">
</div>
<div class="banner">
<img src="image/imges_50.jpg" alt="">
<img src="image/imges_52.jpg" alt="">
<img src="image/imges_54.jpg" alt="">
</div>
</div>
</section>
<footer></footer>
</body>
</html>
<Css>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
a {
color: inherit;
text-decoration: none;
}
ul,
li {
list-style: none;
}
img {
border: 0;
}
/* 레이아웃 명령 */
header {
width: 100%;
height: auto;
margin: 0 auto;
}
header .r_box {
width: 100%;
height: 5px;
background: #b61c21;
position: fixed;
z-index: 999;
}
header .h_top {
width: 100%;
height: 124px;
margin: 0 auto;
position: fixed;
background-color: white;
z-index: 10;
/* margin-top: 30px;*/
/* outline: 1px solid black;*/
}
header .h_top ul li {
font-size: 12px;
}
header nav .gnb li {
font-size: 18px;
}
header .h_top .h_left ul {
width: 500px;
height: auto;
float: left;
margin-top: 24px;
margin-left: 50px;
/* outline: 1px solid black;*/
}
header .h_top .h_left ul a {
color: #c03b3f;
font-weight: 600;
}
header .h_top .h_left a:hover {
text-decoration: underline;
}
header .h_top .h_right ul {
width: 500px;
height: auto;
float: right;
margin-top: 24px;
position: absolute;
top: 0;
right: 68px;
/* outline: 1px solid black;*/
}
header .h_top .h_right ul a {
color: #666;
font-weight: 600;
}
header .h_top .h_left > ul li {
display: inline-block;
margin-right: 10px;
}
header .h_top .h_right > ul li {
display: inline-block;
float: right;
margin-left: 10px;
}
header .h_box {
position: relative;
width: 100%;
height: auto;
margin: 0 auto;
}
header .logo {
position: fixed;
left: 50%;
top: 30px;
transform: translate(-50%);
z-index: 11;
}
header .logo img {
width: 100px;
}
/*
header nav{
width: 100%;
height: 50px;
outline: 1px solid black;
background: white;
}
*/
header nav .gnb {
width: 510px;
height: 40px;
/* outline: 1px solid magenta;*/
float: left;
position: fixed;
left: 50%;
top: 85px;
transform: translate(-50%);
display: flex;
justify-content: space-between;
z-index: 13;
background: white;
}
header nav .gnb li {
/* display: inline-block;*/
margin-right: 35px;
}
header nav .gnb li a {
font-size: 17px;
font-family: 'Noto Sans KR', sans-serif;
font-weight: 600;
}
.visual {
width: 95%;
height: 906px;
margin: 0 auto;
position: relative;
overflow: hidden;
}
.visual img {
width: 100%;
/* margin-top: 30px;*/
position: absolute;
top: 15px;
}
.visual .vi_box {
width: 100%;
height: 258px;
background: black;
position: absolute;
opacity: 0.7;
bottom: 0;
left: 0;
}
.visual .vi_box p {
color: #c8ab87;
margin-left: 510px;
margin-top: 70px;
font-size: 18px;
font-family: 'Noto Sans KR', sans-serif;
}
.visual .vi_box h1 {
color: white;
margin-left: 510px;
margin-top: 22px;
font-size: 31px;
font-family: 'Nanum Myeongjo', serif;
font-weight: 400;
}
.line {
width: 778px;
height: 1px;
background: white;
margin: 0 auto;
margin-top: 50px;
opacity: 0.5;
}
.wlogo {
width: 107px;
height: 84px;
position: absolute;
right: 510px;
top: 45px;
}
.wlogo img {
width: 100%;
}
.u_box {
width: 500px;
height: auto;
margin-left: 500px;
position: absolute;
bottom: 16px;
}
.fab {
color: white;
opacity: 0.5;
margin-left: 22px;
font-size: 18px;
}
.fas {
color: white;
opacity: 0.5;
float: left;
font-size: 18px;
margin-left: 22px;
margin-right: 10px;
}
.u_box > ul > li a {
font-size: 12px;
line-height: 16px;
color: white;
font-family: 'Noto Sans KR', sans-serif;
/* margin-left: 10px;*/
float: left;
}
section {
width: 1455px;
height: 800px;
margin: 0 auto;
}
section > .s1_box {
width: 873px;
height: auto;
margin: 0 auto;
/* outline: 1px solid magenta;*/
display: flex;
justify-content: space-between;
margin-top: 105px;
}
section article {
width: 270px;
height: auto;
float: left;
/* outline: 1px solid;*/
/* margin-top: 131px;*/
}
section article:first-child {
/* margin-left: 285px;*/
/* margin-right: 92px;*/
}
section article:nth-child(2) {
/* margin-right: 108px;*/
}
section article h1 {
font-size: 22px;
font-family: 'Nanum Myeongjo', serif;
line-height: 30px;
color: #333;
}
section article p {
font-size: 15px;
font-family: 'Noto Sans KR', sans-serif;
margin-top: 25px;
color: #666;
letter-spacing: 0.1px;
}
section .con {
width: 866px;
height: auto;
margin: 0 auto;
margin-top: 104px;
/*
display: flex;
justify-content: space-between;
*/
/* outline: 1px solid magenta;*/
}
section .s2_box {
width: 423px;
height: auto;
float: left;
/* outline: 1px solid black;*/
}
section .s2_box img {
width: 100%;
}
section .s3_box {
width: 423px;
height: auto;
float: right;
/* outline: 1px solid black;*/
/* display: flex;*/
}
section .s3_box img {
width: 100%;
}
section .s3_box img:last-child {
margin-top: 20px;
}
.banner {
width: 713px;
height: auto;
margin: 0 auto;
display: flex;
justify-content: space-between;
}
.banner img {
width: 224px;
height: 224px;
float: left;
margin-top: 120px;
}