코딩 모작
2020/06/01 샘표연두 모작 진행중
개발경범
2020. 6. 1. 22:47
<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>
<a href="#"><i class="fas fa-home"></i>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>
<div class="slider">
<img src="image/imges_62.jpg" alt=""></div>
</section>
<footer>
<div class="g_box">
<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>
<li><a href="#">이메일무단수집거부</a></li>
<li><a href="#">공사정보관리규정</a></li>
</ul>
</div>
<div class="w_box">
<div class="f_box">
<p><strong>고객지원실</strong> <br><br>
상담시간 평일: 08:30~17:30<br> TEL: 080-996-7777<br> FAX: 070-4275-5285<br> 1:1 온라인 문의: 고객의 소리 </p>
</div>
<div class="f_box"></div>
<div class="f_box">
<p><strong>샘표식품 주식회사</strong><br><br>
주소: (04557) 서울특별시 중구 충무로2 대표번호: 02-3393-5500 대표이사: 박진선 사업자 번호: 446-87-00473 통신판매업신고번호: 제 2016-서울중구-1160호 <br>개인정보 보호책임자: 박광배 사업자정보 확인
<br><br> <strong>㈜ 이니시스 구매안전서비스</strong><br><br>
고객님의 안전거래를 위해 현금 거래에 대해 이니페이 에스크로 서비스를 이용하실 수 있습니다. 서비스 가입사실 확인
</p>
</div>
<div class="f_box"></div>
<div class="f_box">
<select name="관련사이트" id="">
<option value="관련사이트">관련사이트</option>
<option value="연두">연두</option>
<option value="폰타나">폰타나</option>
<option value="샘표채용">샘표채용</option>
</select>
<select name="한국어" id=""></select>
</div>
<div class="under">
<!-- <p>(C) 1946-2018 SEMPIO</p>-->
</div>
</div>
</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;
}
::selection {
background: #b39977;
color: white;
}
/* 레이아웃 명령 */
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_top .h_right ul li a:hover {
color: #b61c21;
text-decoration: underline;
}
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;
}
header nav .gnb li a:hover {
color: #b61c21;
}
.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;
opacity: 0.5;
transition: 0.2s;
}
.u_box > ul > li a:hover {
opacity: 1;
}
.sub a > i {
transition: 0.2s;
}
.sub a:hover > i {
opacity: 1;
}
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;
}
.slider {
width: 95%;
height: auto;
float: left;
margin: 0 auto;
margin-top: 100px;
}
.slider img {
width: 100%;
}
footer .g_box {
width: 100%;
height: 74px;
float: left;
margin-top: 60px;
background: #79746e;
}
footer .g_box ul {
width: 979px;
height: auto;
/* outline: 1px solid black;*/
margin: 0 auto;
display: flex;
justify-content: space-between;
line-height: 74px;
color: #bbb8b6;
font-family: 'Noto Sans KR', sans-serif;
}
footer .g_box ul li {
display: inline-block;
}
footer .g_box ul li::after {
content: "";
border-right: 1px solid #8b8681;
margin-left: 15px;
}
footer .g_box ul li:nth-child(6)::after {
border-right: 0;
}
footer .g_box ul li:last-child::after {
border-right: 0;
}
footer .g_box ul li:nth-child(7) {
color: white;
}
footer .w_box {
width: 100%;
height: 300px;
float: left;
background: #fafafa;
}
footer .f_box p {
font-family: 'Noto Sans KR', sans-serif;
font-size: 15px;
}
footer .f_box:first-child {
width: 334px;
height: 241px;
float: left;
display: flex;
margin-left: 63px;
margin-top: 41px;
}
footer .f_box:nth-child(2){
border-left: 1px solid #ececec;
float: left;
width: 74px;
height: 169px;
margin-top: 41px;
}
footer .f_box:nth-child(3) {
width: 1063px;
height: 241px;
float: left;
margin-top: 41px;
/* outline: 1px solid black;*/
}
footer .f_box:nth-child(4){
border-right: 1px solid #ececec;
float: left;
width: 74px;
height: 169px;
margin-top: 41px;
}
/*
footer .f_box .under{
width: 1000px;
height: 20px;
margin: 0 auto;
float: left;
}*/