정리글 보기 | 강의 정리

<!DOCTYPE html>
<html lang="en">
<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;
}

ul,li{
list-style: none;
}

a{
text-decoration: none;
color: black;
}
body{
font-family: Arial, "맑은 고딕", sans-serif;
color: #333;
}

.main_visual{
width: 100%;
height: 100vh;
min-height: 950px;
background: url("main.jpg") no-repeat center center / cover;
position: relative;
}

header{
width: calc(100% - 120px);
height: 90px;
padding: 0 35px;
background-color: rgba(183, 160, 147, 0.55);
border-radius: 14px;
position: absolute;
top: 28px;
left: 60px;
z-index: 10;
}

.logo{
font-size: 26px;
font-weight: 900;
line-height: 80px;
background-color: aqua;
float: left;
}

.menu_wrap{
position: absolute;
top: 0;
left: 50%;
margin-left: -170px;

background-color: aquamarine;
float: left;
}

.menu_wrap li{
font-size: 18px;
font-weight: 900;
background-color: blue;
float: left;
line-height: 80px;
margin: 0 28px;

}

.menu_wrap li:hover{
text-decoration: underline;
color: rgb(10, 252, 70);
}

.menu_wrap a:hover{
color: rgb(25, 244, 9);
}

.util_menu{
float: right;
padding-top: 12px;
}

.cs_text{
text-align: right;
font-size: 13px;
margin-bottom: 8px;
}

.cs_text a{
color: #fff;
}

.util_icon{
float: right;
}

.util_icon li{
float: left;
margin-left: 24px;
position: relative;
line-height: 1;
}

.util_icon a{
color: #fff;
font-size: 15px;
}

.util_icon a:hover{
color: #f7e2d5;
}

.icon_login a,
.icon_user a,
.icon_cart a{
display: block;
font-size: 22px;
line-height: 22px;
font-weight: 400;
}

.cart_count{
width: 18px;
height: 18px;
border-radius: 50%;
background-color: #59d7de;
color: #fff;
font-size: 11px;
text-align: center;
line-height: 18px;
position: absolute;
top: -8px;
right: -10px;
}

/* header end */
.arrow_left,
.arrow_right{
position: absolute;
top: 52%;
transform: translateY(-50%);
z-index: 5;
color: #fff;
font-size: 90px;
font-weight: 200;
line-height: 1;
}

.arrow_left{
left: 42px;
}

.arrow_right{
right: 42px;
}
.text_box{
position: absolute;
left: 92px;
bottom: 115px;
color: #fff;
z-index: 5;
}

.text_box h2{
font-size: 64px;
font-weight: 700;
letter-spacing: -2px;
line-height: 1.2;
margin-bottom: 34px;
}

.text_box p{
font-size: 18px;
font-weight: 500;
line-height: 1.8;
}
.brand_section{
padding: 70px 0;
}

.brand_title h2{
font-size: 32px;
}

.inner{
width: 1400px;
margin: 0 auto;
}

.brand_card{
float: left;
width: 22.75%;
margin-right: 3%;
margin-bottom: 25px;
background-color: #fff;
border-radius: 14px;
overflow: hidden;
box-shadow: 0 8px 20px rgba(0,0,0,0.08);
transition: 0.3s;
}

.brand_card:last-child{
margin-right: 0;
}

.brand_card:hover{
transform: translateY(-8px);
box-shadow: 0 15px 30px rgba(0,0,0,0.12);
}

.card_img{
width: 100%;
height: 240px;
overflow: hidden;
}

.card_img img{
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}

.card_text{
padding: 25px;
}

.card_text h3{
font-size: 24px;
margin-bottom: 15px;
}

.card_text p{
line-height: 1.8;
color: #666;
}

</style>
</head>
<body>

<section class="main_visual">
<div class="wrap">
<header>
<div class="logo">
<a href="#">yorien</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="util_menu">
<div class="cs_text">
<a href="#">고객상담센터</a>
</div>

<ul class="util_icon">
<li class="icon_login">
<a href="#">↪</a>
</li>
<li class="icon_user">
<a href="#">○</a>
</li>
<li class="icon_cart">
<a href="#">□</a>
<span class="cart_count">0</span>
</li>
</ul>
</div>
</header>
</div>

<div class="arrow_left">❮</div>
<div class="arrow_right">❯</div>


<div class="text_box">
<h2>요리에 품격을 더하다.</h2>
<p>
건강한 요리를 만드는 새로운 습관<br>
프리미엄 자연여과 정수기, 요리엔
</p>
</div>

</section>


<section class="brand_section">
<div class="inner">
<div class="brand_title">
<h2>Brand Story</h2>
<p>깨끗한 물과 건강한 식문화를 위한 요리엔의 가치</p>
</div>

<div class="card_wrap">
<div class="brand_card">
<div class="card_img">
<img src="https://images.unsplash.com/photo-1498837167922-ddd27525d352?q=80&w=1200&auto=format&fit=crop" alt="깨끗한 물">
</div>
<div class="card_text">
<h3>Premium Water</h3>
<p>
건강한 요리의 시작은 좋은 물에서 시작됩니다.
요리엔은 프리미엄 자연여과 시스템으로 더 깨끗하고 맑은 물을 제안합니다.
</p>
</div>
</div>

<div class="brand_card">
<div class="card_img">
<img src="https://images.unsplash.com/photo-1515003197210-e0cd71810b5f?q=80&w=1200&auto=format&fit=crop" alt="건강한 요리">
</div>
<div class="card_text">
<h3>Healthy Cooking</h3>
<p>
매일의 식탁이 더 건강해질 수 있도록
깨끗한 물과 감각적인 주방 라이프를 함께 제안합니다.
</p>
</div>
</div>

<div class="brand_card">
<div class="card_img">
<img src="https://images.unsplash.com/photo-1504674900247-0877df9cc836?q=80&w=1200&auto=format&fit=crop" alt="감각적인 주방">
</div>
<div class="card_text">
<h3>Modern Kitchen</h3>
<p>
실용성과 디자인을 함께 담아낸 주방 솔루션으로
일상 속 요리 경험에 품격을 더합니다.
</p>
</div>
</div>

<div class="brand_card">
<div class="card_img">
<img src="https://images.unsplash.com/photo-1504674900247-0877df9cc836?q=80&w=1200&auto=format&fit=crop" alt="감각적인 주방">
</div>
<div class="card_text">
<h3>Modern Kitchen</h3>
<p>
실용성과 디자인을 함께 담아낸 주방 솔루션으로
일상 속 요리 경험에 품격을 더합니다.
</p>
</div>
</div>
</div>
</div>
</section>

</body>
</html>

#스타일시트 전체페이지 작업

CSS 스타일링

첨부 파일

댓글 / 답글