CSS 스타일링

https://yorien.com/
요리엔

4/13 ~ 15일 까지

*전체적으로 hover이벤트 적용된거 만들어볼것
*글자나 컨텐츠 크기는 없으니 임의대로 만들되,
실제 사이트 크기 가져오지 말 것 (직접 값을 입력하여 크기의 대한 감을 잡아봄)
*이미지는 실제 사이트거 가져올것 (이미지 없으면 다른 이미지로 대체 가능)

header: 우측 아이콘 제외
section1: 화살표, 영상 제외
section2: 화살표 가능하면 처리 안되면 > 꺽쇠 기호로 대체
section3: 좌측 타이틀 모양만 만들기, 영상대신 이미지 및 파란 배경으로 대체
section4: 장바구니 아이콘 가능하면 만들고 안되면 원형으로 처리

구조내용 :
<div class="wrap">

<!-- main visual -->
<section class="main_visual">

<!-- header -->
<header class="clearfix">
<div class="logo">
<a href="#">yorien</a>
</div>

<ul class="gnb clearfix">
<li><a href="#">About</a></li>
<li><a href="#">Chablis</a></li>
<li><a href="#">Shop</a></li>
</ul>

<div class="util_menu clearfix">
<div class="cs_text">
<a href="#">고객상담센터</a>
</div>

<ul class="util_icon clearfix">
<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>

<!-- arrows -->
<div class="arrow_left">&#10094;</div>
<div class="arrow_right">&#10095;</div>

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

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

<div class="card_wrap clearfix">
<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>
</div>
</section>

</div>