<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
a{
text-decoration: none;
color: black;
}
ul,li{
list-style: none;
}
img{
width: 100%;
display: block;
}
/* reset end */
header{
width: 1800px;
position: absolute;
top: 40px;
left: 50%;
margin-left: -900px;
background-color: rgba(255, 255, 255, 0.7);
border-radius: 20px;
padding: 30px;
z-index: 10;
}
header a{
color: white;
}
.logo{
width: 100px;
float: left;
}
.menu_wrap{
width: 280px;
height: 20px;
position: absolute;
top: 48%;
left: 50%;
margin-left: -140px;
margin-top: -10px;
}
.menu_wrap li{
font-size: 18px;
float: left;
margin-right: 60px;
}
.menu_wrap li:last-child{
margin-right: 0;
}
.side_menu{
float: right;
margin-top: 5px;
}
/* header end */
.section_1{
height: 980px;
/* background-image: url(https://yorien.com/data/file/promotion/thumb-9df7d8f6a8ed83e94730c787371ce6aa_vgJZK9MP_2051ed40ba45776dd2645aed7d8cd6b37273936e_1000x500.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center; */
/* *background 축약
=>background: 색상 경로 반복 위치 / 크기; */
background: url(https://yorien.com/data/file/promotion/thumb-9df7d8f6a8ed83e94730c787371ce6aa_vgJZK9MP_2051ed40ba45776dd2645aed7d8cd6b37273936e_1000x500.jpg) no-repeat center / cover;
position: relative;
}
.section_1 h1{
position: absolute;
bottom: 140px;
left: 180px;
font-size: 50px;
color: white;
}
/* section_1 end */
.section_2{
height: 980px;
background: url(https://yorien.com/img/main_step_bg.jpg) no-repeat center / cover;
padding: 150px 100px;
}
.title_wrap_2{
margin: 0 auto;
color: white;
text-align: center;
}
.title_wrap_2 h3{
font-size: 40px;
}
.title_wrap_2 p{
opacity: 0.7;
margin-top: 10px;
}
.con_wrap_2{
width: 1705px;
}
.con_2{
width: 411.25px;
background-color: rgba(255, 255, 255, 0.7);
border: 1px solid white;
border-radius: 15px;
padding: 22px;
float: left;
margin-right: 20px;
}
.con_2:last-child{
margin-right: 0;
}
.con_2:hover{
background-color: #fff;
}
.sub_title_2 {
margin-bottom: 30px;
height: 30px;
}
.sub_title_2 h3{
float: left;
font-size: 18px;
color: #555;
}
.more_btn{
float: right;
width: 35px;
height: 35px;
background-color: #fff;
border-radius: 50%;
}
.img_wrap_2{
border-radius: 15px;
overflow: hidden;
}
.con_title_2{
margin: 25px 0;
}
</style>
</head>
<body>
<div class="wrap">
<header>
<div class="logo">
<a href="#">
<img src="https://yorien.com/img/logo.svg" alt="logo">
</a>
</div>
<ul class="menu_wrap">
<li><a href="#">About</a></li>
<li><a href="#">Chablis</a></li>
<li><a href="#">Shop</a></li>
</ul>
<div class="side_menu">
<a href="#">고객상담센터</a>
</div>
</header>
<!-- header end -->
<section class="section_1">
<h1>
봄을 여는 설렘,<br>
blossom pink
</h1>
</section>
<!-- section_1 end -->
<section class="section_2">
<div class="title_wrap_2">
<h3>
간편한 정수의 시작, <br>
요리엔
</h3>
<p>
요리엔은 누구나 손쉽게 깨끗한 물을 사용할 수 있도록, <br>
물을 넣고 따르는 모든 순간을 디자인하였습니다.
</p>
</div>
<div class="con_wrap_2">
<div class="con_2">
<a href="#">
<div class="sub_title_2">
<h3>STEP 01 - Design</h3>
<div class="more_btn"> → </div>
</div>
<div class="img_wrap_2">
<img src="https://yorien.com/img/main_step01.jpg" alt="content 1">
</div>
<h3 class="con_title_2">
자연을 담은 예술의 경지
</h3>
<p>
수백 개의 시안에서 탄생한 요리엔의 독창적인 곡선과 형태는 자연의 맑고 투명한 모습을 그대로 담고있으며, 레드닷 디자인 어워드 수상으로 그 가치를 인정받았습니다.
</p>
</a>
</div>
<div class="con_2">
<a href="#">
<div class="sub_title_2">
<h3>STEP 01 - Design</h3>
<div class="more_btn"> → </div>
</div>
<div class="img_wrap_2">
<img src="https://yorien.com/img/main_step01.jpg" alt="content 1">
</div>
<h3 class="con_title_2">
자연을 담은 예술의 경지
</h3>
<p>
수백 개의 시안에서 탄생한 요리엔의 독창적인 곡선과 형태는 자연의 맑고 투명한 모습을 그대로 담고있으며, 레드닷 디자인 어워드 수상으로 그 가치를 인정받았습니다.
</p>
</a>
</div>
<div class="con_2">
<a href="#">
<div class="sub_title_2">
<h3>STEP 01 - Design</h3>
<div class="more_btn"> → </div>
</div>
<div class="img_wrap_2">
<img src="https://yorien.com/img/main_step01.jpg" alt="content 1">
</div>
<h3 class="con_title_2">
자연을 담은 예술의 경지
</h3>
<p>
수백 개의 시안에서 탄생한 요리엔의 독창적인 곡선과 형태는 자연의 맑고 투명한 모습을 그대로 담고있으며, 레드닷 디자인 어워드 수상으로 그 가치를 인정받았습니다.
</p>
</a>
</div>
<div class="con_2">
<a href="#">
<div class="sub_title_2">
<h3>STEP 01 - Design</h3>
<div class="more_btn"> → </div>
</div>
<div class="img_wrap_2">
<img src="https://yorien.com/img/main_step01.jpg" alt="content 1">
</div>
<h3 class="con_title_2">
자연을 담은 예술의 경지
</h3>
<p>
수백 개의 시안에서 탄생한 요리엔의 독창적인 곡선과 형태는 자연의 맑고 투명한 모습을 그대로 담고있으며, 레드닷 디자인 어워드 수상으로 그 가치를 인정받았습니다.
</p>
</a>
</div>
</div>
</section>
</div>
</body>
</html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
a{
text-decoration: none;
color: black;
}
ul,li{
list-style: none;
}
img{
width: 100%;
display: block;
}
/* reset end */
header{
width: 1800px;
position: absolute;
top: 40px;
left: 50%;
margin-left: -900px;
background-color: rgba(255, 255, 255, 0.7);
border-radius: 20px;
padding: 30px;
z-index: 10;
}
header a{
color: white;
}
.logo{
width: 100px;
float: left;
}
.menu_wrap{
width: 280px;
height: 20px;
position: absolute;
top: 48%;
left: 50%;
margin-left: -140px;
margin-top: -10px;
}
.menu_wrap li{
font-size: 18px;
float: left;
margin-right: 60px;
}
.menu_wrap li:last-child{
margin-right: 0;
}
.side_menu{
float: right;
margin-top: 5px;
}
/* header end */
.section_1{
height: 980px;
/* background-image: url(https://yorien.com/data/file/promotion/thumb-9df7d8f6a8ed83e94730c787371ce6aa_vgJZK9MP_2051ed40ba45776dd2645aed7d8cd6b37273936e_1000x500.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center; */
/* *background 축약
=>background: 색상 경로 반복 위치 / 크기; */
background: url(https://yorien.com/data/file/promotion/thumb-9df7d8f6a8ed83e94730c787371ce6aa_vgJZK9MP_2051ed40ba45776dd2645aed7d8cd6b37273936e_1000x500.jpg) no-repeat center / cover;
position: relative;
}
.section_1 h1{
position: absolute;
bottom: 140px;
left: 180px;
font-size: 50px;
color: white;
}
/* section_1 end */
.section_2{
height: 980px;
background: url(https://yorien.com/img/main_step_bg.jpg) no-repeat center / cover;
padding: 150px 100px;
}
.title_wrap_2{
margin: 0 auto;
color: white;
text-align: center;
}
.title_wrap_2 h3{
font-size: 40px;
}
.title_wrap_2 p{
opacity: 0.7;
margin-top: 10px;
}
.con_wrap_2{
width: 1705px;
}
.con_2{
width: 411.25px;
background-color: rgba(255, 255, 255, 0.7);
border: 1px solid white;
border-radius: 15px;
padding: 22px;
float: left;
margin-right: 20px;
}
.con_2:last-child{
margin-right: 0;
}
.con_2:hover{
background-color: #fff;
}
.sub_title_2 {
margin-bottom: 30px;
height: 30px;
}
.sub_title_2 h3{
float: left;
font-size: 18px;
color: #555;
}
.more_btn{
float: right;
width: 35px;
height: 35px;
background-color: #fff;
border-radius: 50%;
}
.img_wrap_2{
border-radius: 15px;
overflow: hidden;
}
.con_title_2{
margin: 25px 0;
}
</style>
</head>
<body>
<div class="wrap">
<header>
<div class="logo">
<a href="#">
<img src="https://yorien.com/img/logo.svg" alt="logo">
</a>
</div>
<ul class="menu_wrap">
<li><a href="#">About</a></li>
<li><a href="#">Chablis</a></li>
<li><a href="#">Shop</a></li>
</ul>
<div class="side_menu">
<a href="#">고객상담센터</a>
</div>
</header>
<!-- header end -->
<section class="section_1">
<h1>
봄을 여는 설렘,<br>
blossom pink
</h1>
</section>
<!-- section_1 end -->
<section class="section_2">
<div class="title_wrap_2">
<h3>
간편한 정수의 시작, <br>
요리엔
</h3>
<p>
요리엔은 누구나 손쉽게 깨끗한 물을 사용할 수 있도록, <br>
물을 넣고 따르는 모든 순간을 디자인하였습니다.
</p>
</div>
<div class="con_wrap_2">
<div class="con_2">
<a href="#">
<div class="sub_title_2">
<h3>STEP 01 - Design</h3>
<div class="more_btn"> → </div>
</div>
<div class="img_wrap_2">
<img src="https://yorien.com/img/main_step01.jpg" alt="content 1">
</div>
<h3 class="con_title_2">
자연을 담은 예술의 경지
</h3>
<p>
수백 개의 시안에서 탄생한 요리엔의 독창적인 곡선과 형태는 자연의 맑고 투명한 모습을 그대로 담고있으며, 레드닷 디자인 어워드 수상으로 그 가치를 인정받았습니다.
</p>
</a>
</div>
<div class="con_2">
<a href="#">
<div class="sub_title_2">
<h3>STEP 01 - Design</h3>
<div class="more_btn"> → </div>
</div>
<div class="img_wrap_2">
<img src="https://yorien.com/img/main_step01.jpg" alt="content 1">
</div>
<h3 class="con_title_2">
자연을 담은 예술의 경지
</h3>
<p>
수백 개의 시안에서 탄생한 요리엔의 독창적인 곡선과 형태는 자연의 맑고 투명한 모습을 그대로 담고있으며, 레드닷 디자인 어워드 수상으로 그 가치를 인정받았습니다.
</p>
</a>
</div>
<div class="con_2">
<a href="#">
<div class="sub_title_2">
<h3>STEP 01 - Design</h3>
<div class="more_btn"> → </div>
</div>
<div class="img_wrap_2">
<img src="https://yorien.com/img/main_step01.jpg" alt="content 1">
</div>
<h3 class="con_title_2">
자연을 담은 예술의 경지
</h3>
<p>
수백 개의 시안에서 탄생한 요리엔의 독창적인 곡선과 형태는 자연의 맑고 투명한 모습을 그대로 담고있으며, 레드닷 디자인 어워드 수상으로 그 가치를 인정받았습니다.
</p>
</a>
</div>
<div class="con_2">
<a href="#">
<div class="sub_title_2">
<h3>STEP 01 - Design</h3>
<div class="more_btn"> → </div>
</div>
<div class="img_wrap_2">
<img src="https://yorien.com/img/main_step01.jpg" alt="content 1">
</div>
<h3 class="con_title_2">
자연을 담은 예술의 경지
</h3>
<p>
수백 개의 시안에서 탄생한 요리엔의 독창적인 곡선과 형태는 자연의 맑고 투명한 모습을 그대로 담고있으며, 레드닷 디자인 어워드 수상으로 그 가치를 인정받았습니다.
</p>
</a>
</div>
</div>
</section>
</div>
</body>
</html>
#스타일시트 요리엔 세션2(선생님) 완료