<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MOOD CAFE</title>
<style>
*{
margin:0;
padding:0;
box-sizing:border-box;
}
body{
font-family:'Pretendard', sans-serif;
background:#f7f3ee;
color:#2b2b2b;
overflow-x:hidden;
}
a{
text-decoration:none;
color:inherit;
}
img{
display:block;
}
/* 헤더 */
.header{
width:100%;
height:82px;
position:fixed;
top:0;
left:0;
z-index:100;
background:rgba(247,243,238,0.8);
backdrop-filter:blur(14px);
border-bottom:1px solid rgba(0,0,0,0.05);
}
.header_wrap{
width:1400px;
height:82px;
margin:0 auto;
display:flex;
justify-content:space-between;
align-items:center;
}
.logo{
font-size:28px;
font-weight:900;
letter-spacing:-1px;
color:#7b5e45;
}
.menu{
display:flex;
gap:42px;
}
.menu a{
font-size:14px;
font-weight:600;
color:#555;
transition:0.3s;
}
.menu a:hover{
color:#7b5e45;
}
/* 공통 */
.section_tag{
display:inline-block;
padding:10px 18px;
border-radius:100px;
background:#efe4d8;
color:#7b5e45;
font-size:13px;
font-weight:700;
margin-bottom:24px;
}
/* 애니메이션 */
.fade_up{
opacity:0;
transform:translateY(50px);
animation:fadeUp 1s forwards;
}
.delay1{
animation-delay:0.2s;
}
.delay2{
animation-delay:0.4s;
}
.delay3{
animation-delay:0.6s;
}
@keyframes fadeUp{
100%{
opacity:1;
transform:translateY(0);
}
}
/* 히어로 */
.hero{
width:1400px;
margin:0 auto;
min-height:100vh;
padding-top:120px;
display:grid;
grid-template-columns:1fr 1fr;
gap:60px;
align-items:center;
}
.hero_text h2{
font-size:88px;
line-height:1.02;
letter-spacing:-5px;
margin-bottom:30px;
}
.hero_text h2 span{
color:#9b7758;
}
.hero_text p{
font-size:18px;
line-height:1.9;
color:#666;
margin-bottom:38px;
}
.btn_area{
display:flex;
gap:16px;
}
.btn{
display:inline-block;
padding:16px 28px;
border-radius:100px;
font-size:14px;
font-weight:700;
transition:0.3s;
}
.btn.dark{
background:#2b2b2b;
color:#fff;
}
.btn.light{
background:#fff;
color:#7b5e45;
box-shadow:0 8px 20px rgba(0,0,0,0.08);
}
.hero_img{
height:760px;
border-radius:40px;
overflow:hidden;
box-shadow:0 30px 80px rgba(0,0,0,0.15);
}
.hero_img img{
width:100%;
height:100%;
object-fit:cover;
transition:0.8s;
}
.hero_img:hover img{
transform:scale(1.05);
}
/* 메뉴 섹션 */
.menu_section{
width:1400px;
margin:0 auto;
padding:120px 0;
}
.title_area{
text-align:center;
margin-bottom:70px;
}
.title_area h2{
font-size:56px;
letter-spacing:-2px;
margin-bottom:18px;
}
.title_area p{
font-size:17px;
color:#666;
line-height:1.8;
}
.menu_grid{
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:28px;
}
.menu_card{
background:#fff;
border-radius:34px;
overflow:hidden;
box-shadow:0 15px 40px rgba(0,0,0,0.08);
transition:0.4s;
}
.menu_card:hover{
transform:translateY(-12px);
}
.menu_img{
height:320px;
overflow:hidden;
}
.menu_img img{
width:100%;
height:100%;
object-fit:cover;
transition:0.8s;
}
.menu_card:hover img{
transform:scale(1.08);
}
.menu_text{
padding:30px;
}
.menu_text h3{
font-size:28px;
margin-bottom:12px;
}
.menu_text p{
font-size:15px;
line-height:1.8;
color:#666;
margin-bottom:20px;
}
.price{
font-size:18px;
font-weight:bold;
color:#7b5e45;
}
/* 감성 소개 */
.story_section{
padding:140px 20px;
background:#fff;
}
.story_wrap{
width:1400px;
margin:0 auto;
display:grid;
grid-template-columns:1fr 1fr;
gap:70px;
align-items:center;
}
.story_img{
height:620px;
border-radius:40px;
overflow:hidden;
}
.story_img img{
width:100%;
height:100%;
object-fit:cover;
}
.story_text h2{
font-size:64px;
line-height:1.1;
letter-spacing:-3px;
margin-bottom:28px;
}
.story_text p{
font-size:18px;
line-height:1.9;
color:#666;
}
/* 공간 섹션 */
.space_section{
width:1400px;
margin:0 auto;
padding:130px 0;
}
.space_grid{
display:grid;
grid-template-columns:1.2fr 1fr;
gap:30px;
}
.space_big{
height:620px;
border-radius:38px;
overflow:hidden;
}
.space_small_wrap{
display:grid;
gap:30px;
}
.space_small{
height:295px;
border-radius:38px;
overflow:hidden;
}
.space_big img,
.space_small img{
width:100%;
height:100%;
object-fit:cover;
transition:0.8s;
}
.space_big:hover img,
.space_small:hover img{
transform:scale(1.06);
}
/* 리뷰 */
.review_section{
background:#2d241f;
color:#fff;
padding:140px 20px;
}
.review_wrap{
width:1400px;
margin:0 auto;
}
.review_title{
text-align:center;
margin-bottom:70px;
}
.review_title h2{
font-size:58px;
letter-spacing:-2px;
margin-bottom:18px;
}
.review_cards{
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:28px;
}
.review_card{
background:rgba(255,255,255,0.08);
border:1px solid rgba(255,255,255,0.08);
border-radius:34px;
padding:38px;
backdrop-filter:blur(10px);
}
.review_card p{
font-size:16px;
line-height:1.9;
color:#ddd;
margin-bottom:28px;
}
.review_user{
display:flex;
align-items:center;
gap:14px;
}
.review_user img{
width:54px;
height:54px;
border-radius:50%;
object-fit:cover;
}
.review_user span{
font-size:15px;
font-weight:600;
}
/* CTA */
.cta_section{
padding:140px 20px;
}
.cta_wrap{
width:1400px;
margin:0 auto;
background:#e8d9ca;
border-radius:42px;
padding:90px;
text-align:center;
}
.cta_wrap h2{
font-size:64px;
line-height:1.15;
letter-spacing:-3px;
margin-bottom:24px;
}
.cta_wrap p{
font-size:18px;
color:#5f5146;
line-height:1.8;
margin-bottom:36px;
}
.cta_btn{
display:inline-block;
padding:18px 34px;
background:#2b2b2b;
color:#fff;
border-radius:100px;
font-weight:bold;
}
/* 푸터 */
.footer{
background:#1f1a17;
color:#9f948b;
text-align:center;
padding:60px 20px;
font-size:14px;
line-height:1.9;
}
/* 반응형 */
@media screen and (max-width:1400px){
.header_wrap,
.hero,
.menu_section,
.story_wrap,
.space_section,
.review_wrap,
.cta_wrap{
width:92%;
}
}
@media screen and (max-width:1100px){
.hero,
.story_wrap,
.space_grid{
grid-template-columns:1fr;
}
.menu_grid,
.review_cards{
grid-template-columns:repeat(2,1fr);
}
}
@media screen and (max-width:768px){
.hero{
padding-top:140px;
}
.hero_text h2,
.story_text h2,
.review_title h2,
.cta_wrap h2{
font-size:44px;
letter-spacing:-2px;
}
.menu_grid,
.review_cards{
grid-template-columns:1fr;
}
.hero_img{
height:480px;
}
.story_img{
height:420px;
}
.space_big{
height:420px;
}
.space_small{
height:240px;
}
.cta_wrap{
padding:60px 30px;
}
.menu{
display:none;
}
}
</style>
</head>
<body>
<header class="header">
<div class="header_wrap">
<h1 class="logo">
MOOD CAFE
</h1>
<nav class="menu">
<a href="#">HOME</a>
<a href="#">MENU</a>
<a href="#">STORY</a>
<a href="#">SPACE</a>
<a href="#">CONTACT</a>
</nav>
</div>
</header>
<!-- 히어로 -->
<section class="hero">
<div class="hero_text fade_up">
<span class="section_tag">
Emotional Coffee Space
</span>
<h2>
따뜻한 향과<br>
조용한 분위기의<br>
<span>감성 카페</span>
</h2>
<p>
부드러운 커피 향과 따뜻한 공간 속에서
하루의 여유를 느껴보세요.<br>
잔잔한 음악과 감성적인 분위기가
특별한 시간을 만들어줍니다.
</p>
<div class="btn_area">
<a href="#" class="btn dark">MENU VIEW</a>
<a href="#" class="btn light">RESERVATION</a>
</div>
</div>
<div class="hero_img fade_up delay1">
<img src="https://images.unsplash.com/photo-1495474472287-4d71bcdd2085?auto=format&fit=crop&w=1400&q=80" alt="카페">
</div>
</section>
<!-- 메뉴 -->
<section class="menu_section fade_up delay1">
<div class="title_area">
<span class="section_tag">
Signature Menu
</span>
<h2>
오늘의 감성을 채우는 메뉴
</h2>
<p>
직접 로스팅한 원두와 디저트가 어우러진<br>
특별한 커피 시간을 경험해보세요.
</p>
</div>
<div class="menu_grid">
<article class="menu_card">
<div class="menu_img">
<img src="https://images.unsplash.com/photo-1517701604599-bb29b565090c?auto=format&fit=crop&w=1200&q=80" alt="">
</div>
<div class="menu_text">
<h3>Latte</h3>
<p>
부드러운 우유와 깊은 에스프레소가
조화롭게 어우러진 시그니처 라떼.
</p>
<div class="price">6.5</div>
</div>
</article>
<article class="menu_card">
<div class="menu_img">
<img src="https://images.unsplash.com/photo-1509042239860-f550ce710b93?auto=format&fit=crop&w=1200&q=80" alt="">
</div>
<div class="menu_text">
<h3>Espresso</h3>
<p>
진한 풍미와 깊은 향이 느껴지는
프리미엄 에스프레소 커피.
</p>
<div class="price">5.0</div>
</div>
</article>
<article class="menu_card">
<div class="menu_img">
<img src="https://images.unsplash.com/photo-1511920170033-f8396924c348?auto=format&fit=crop&w=1200&q=80" alt="">
</div>
<div class="menu_text">
<h3>Dessert</h3>
<p>
매일 직접 준비하는 디저트와 함께
달콤한 휴식을 즐겨보세요.
</p>
<div class="price">7.5</div>
</div>
</article>
</div>
</section>
<!-- 소개 -->
<section class="story_section fade_up delay2">
<div class="story_wrap">
<div class="story_img">
<img src="https://images.unsplash.com/photo-1521017432531-fbd92d768814?auto=format&fit=crop&w=1400&q=80" alt="">
</div>
<div class="story_text">
<span class="section_tag">
Cafe Story
</span>
<h2>
느리게 흐르는<br>
하루의 분위기
</h2>
<p>
자연스러운 우드톤과 따뜻한 조명,
그리고 조용히 흐르는 음악이
공간의 분위기를 완성합니다.<br><br>
단순한 카페가 아니라
머물고 싶은 공간을 만들고 있습니다.
</p>
</div>
</div>
</section>
<!-- 공간 -->
<section class="space_section fade_up delay2">
<div class="title_area">
<span class="section_tag">
Cafe Space
</span>
<h2>
감성을 담은 공간 디자인
</h2>
</div>
<div class="space_grid">
<div class="space_big">
<img src="https://images.unsplash.com/photo-1554118811-1e0d58224f24?auto=format&fit=crop&w=1400&q=80" alt="">
</div>
<div class="space_small_wrap">
<div class="space_small">
<img src="https://images.unsplash.com/photo-1521017432531-fbd92d768814?auto=format&fit=crop&w=1200&q=80" alt="">
</div>
<div class="space_small">
<img src="https://images.unsplash.com/photo-1514933651103-005eec06c04b?auto=format&fit=crop&w=1200&q=80" alt="">
</div>
</div>
</div>
</section>
<!-- 리뷰 -->
<section class="review_section fade_up delay3">
<div class="review_wrap">
<div class="review_title">
<span class="section_tag">
Visitor Review
</span>
<h2>
사람들이 기억하는 분위기
</h2>
</div>
<div class="review_cards">
<div class="review_card">
<p>
커피 향과 음악, 조명이 정말 조화로운 공간이었어요.
오래 머물고 싶은 분위기였습니다.
</p>
<div class="review_user">
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="">
<span>김서연</span>
</div>
</div>
<div class="review_card">
<p>
인테리어가 정말 감성적이고
디저트와 커피 맛도 훌륭했습니다.
</p>
<div class="review_user">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="">
<span>이준호</span>
</div>
</div>
<div class="review_card">
<p>
조용하게 작업하거나 쉬기 좋은 공간이라
자주 방문하고 싶은 카페입니다.
</p>
<div class="review_user">
<img src="https://randomuser.me/api/portraits/women/68.jpg" alt="">
<span>박지윤</span>
</div>
</div>
</div>
</div>
</section>
<!-- CTA -->
<section class="cta_section fade_up delay3">
<div class="cta_wrap">
<h2>
오늘 하루의 분위기를<br>
이곳에서 느껴보세요
</h2>
<p>
따뜻한 커피와 감성적인 공간이
특별한 시간을 만들어드립니다.
</p>
<a href="#" class="cta_btn">
VISIT CAFE
</a>
</div>
</section>
<footer class="footer">
COPYRIGHT 2026. MOOD CAFE.<br>
ALL RIGHTS RESERVED.
</footer>
</body>
</html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MOOD CAFE</title>
<style>
*{
margin:0;
padding:0;
box-sizing:border-box;
}
body{
font-family:'Pretendard', sans-serif;
background:#f7f3ee;
color:#2b2b2b;
overflow-x:hidden;
}
a{
text-decoration:none;
color:inherit;
}
img{
display:block;
}
/* 헤더 */
.header{
width:100%;
height:82px;
position:fixed;
top:0;
left:0;
z-index:100;
background:rgba(247,243,238,0.8);
backdrop-filter:blur(14px);
border-bottom:1px solid rgba(0,0,0,0.05);
}
.header_wrap{
width:1400px;
height:82px;
margin:0 auto;
display:flex;
justify-content:space-between;
align-items:center;
}
.logo{
font-size:28px;
font-weight:900;
letter-spacing:-1px;
color:#7b5e45;
}
.menu{
display:flex;
gap:42px;
}
.menu a{
font-size:14px;
font-weight:600;
color:#555;
transition:0.3s;
}
.menu a:hover{
color:#7b5e45;
}
/* 공통 */
.section_tag{
display:inline-block;
padding:10px 18px;
border-radius:100px;
background:#efe4d8;
color:#7b5e45;
font-size:13px;
font-weight:700;
margin-bottom:24px;
}
/* 애니메이션 */
.fade_up{
opacity:0;
transform:translateY(50px);
animation:fadeUp 1s forwards;
}
.delay1{
animation-delay:0.2s;
}
.delay2{
animation-delay:0.4s;
}
.delay3{
animation-delay:0.6s;
}
@keyframes fadeUp{
100%{
opacity:1;
transform:translateY(0);
}
}
/* 히어로 */
.hero{
width:1400px;
margin:0 auto;
min-height:100vh;
padding-top:120px;
display:grid;
grid-template-columns:1fr 1fr;
gap:60px;
align-items:center;
}
.hero_text h2{
font-size:88px;
line-height:1.02;
letter-spacing:-5px;
margin-bottom:30px;
}
.hero_text h2 span{
color:#9b7758;
}
.hero_text p{
font-size:18px;
line-height:1.9;
color:#666;
margin-bottom:38px;
}
.btn_area{
display:flex;
gap:16px;
}
.btn{
display:inline-block;
padding:16px 28px;
border-radius:100px;
font-size:14px;
font-weight:700;
transition:0.3s;
}
.btn.dark{
background:#2b2b2b;
color:#fff;
}
.btn.light{
background:#fff;
color:#7b5e45;
box-shadow:0 8px 20px rgba(0,0,0,0.08);
}
.hero_img{
height:760px;
border-radius:40px;
overflow:hidden;
box-shadow:0 30px 80px rgba(0,0,0,0.15);
}
.hero_img img{
width:100%;
height:100%;
object-fit:cover;
transition:0.8s;
}
.hero_img:hover img{
transform:scale(1.05);
}
/* 메뉴 섹션 */
.menu_section{
width:1400px;
margin:0 auto;
padding:120px 0;
}
.title_area{
text-align:center;
margin-bottom:70px;
}
.title_area h2{
font-size:56px;
letter-spacing:-2px;
margin-bottom:18px;
}
.title_area p{
font-size:17px;
color:#666;
line-height:1.8;
}
.menu_grid{
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:28px;
}
.menu_card{
background:#fff;
border-radius:34px;
overflow:hidden;
box-shadow:0 15px 40px rgba(0,0,0,0.08);
transition:0.4s;
}
.menu_card:hover{
transform:translateY(-12px);
}
.menu_img{
height:320px;
overflow:hidden;
}
.menu_img img{
width:100%;
height:100%;
object-fit:cover;
transition:0.8s;
}
.menu_card:hover img{
transform:scale(1.08);
}
.menu_text{
padding:30px;
}
.menu_text h3{
font-size:28px;
margin-bottom:12px;
}
.menu_text p{
font-size:15px;
line-height:1.8;
color:#666;
margin-bottom:20px;
}
.price{
font-size:18px;
font-weight:bold;
color:#7b5e45;
}
/* 감성 소개 */
.story_section{
padding:140px 20px;
background:#fff;
}
.story_wrap{
width:1400px;
margin:0 auto;
display:grid;
grid-template-columns:1fr 1fr;
gap:70px;
align-items:center;
}
.story_img{
height:620px;
border-radius:40px;
overflow:hidden;
}
.story_img img{
width:100%;
height:100%;
object-fit:cover;
}
.story_text h2{
font-size:64px;
line-height:1.1;
letter-spacing:-3px;
margin-bottom:28px;
}
.story_text p{
font-size:18px;
line-height:1.9;
color:#666;
}
/* 공간 섹션 */
.space_section{
width:1400px;
margin:0 auto;
padding:130px 0;
}
.space_grid{
display:grid;
grid-template-columns:1.2fr 1fr;
gap:30px;
}
.space_big{
height:620px;
border-radius:38px;
overflow:hidden;
}
.space_small_wrap{
display:grid;
gap:30px;
}
.space_small{
height:295px;
border-radius:38px;
overflow:hidden;
}
.space_big img,
.space_small img{
width:100%;
height:100%;
object-fit:cover;
transition:0.8s;
}
.space_big:hover img,
.space_small:hover img{
transform:scale(1.06);
}
/* 리뷰 */
.review_section{
background:#2d241f;
color:#fff;
padding:140px 20px;
}
.review_wrap{
width:1400px;
margin:0 auto;
}
.review_title{
text-align:center;
margin-bottom:70px;
}
.review_title h2{
font-size:58px;
letter-spacing:-2px;
margin-bottom:18px;
}
.review_cards{
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:28px;
}
.review_card{
background:rgba(255,255,255,0.08);
border:1px solid rgba(255,255,255,0.08);
border-radius:34px;
padding:38px;
backdrop-filter:blur(10px);
}
.review_card p{
font-size:16px;
line-height:1.9;
color:#ddd;
margin-bottom:28px;
}
.review_user{
display:flex;
align-items:center;
gap:14px;
}
.review_user img{
width:54px;
height:54px;
border-radius:50%;
object-fit:cover;
}
.review_user span{
font-size:15px;
font-weight:600;
}
/* CTA */
.cta_section{
padding:140px 20px;
}
.cta_wrap{
width:1400px;
margin:0 auto;
background:#e8d9ca;
border-radius:42px;
padding:90px;
text-align:center;
}
.cta_wrap h2{
font-size:64px;
line-height:1.15;
letter-spacing:-3px;
margin-bottom:24px;
}
.cta_wrap p{
font-size:18px;
color:#5f5146;
line-height:1.8;
margin-bottom:36px;
}
.cta_btn{
display:inline-block;
padding:18px 34px;
background:#2b2b2b;
color:#fff;
border-radius:100px;
font-weight:bold;
}
/* 푸터 */
.footer{
background:#1f1a17;
color:#9f948b;
text-align:center;
padding:60px 20px;
font-size:14px;
line-height:1.9;
}
/* 반응형 */
@media screen and (max-width:1400px){
.header_wrap,
.hero,
.menu_section,
.story_wrap,
.space_section,
.review_wrap,
.cta_wrap{
width:92%;
}
}
@media screen and (max-width:1100px){
.hero,
.story_wrap,
.space_grid{
grid-template-columns:1fr;
}
.menu_grid,
.review_cards{
grid-template-columns:repeat(2,1fr);
}
}
@media screen and (max-width:768px){
.hero{
padding-top:140px;
}
.hero_text h2,
.story_text h2,
.review_title h2,
.cta_wrap h2{
font-size:44px;
letter-spacing:-2px;
}
.menu_grid,
.review_cards{
grid-template-columns:1fr;
}
.hero_img{
height:480px;
}
.story_img{
height:420px;
}
.space_big{
height:420px;
}
.space_small{
height:240px;
}
.cta_wrap{
padding:60px 30px;
}
.menu{
display:none;
}
}
</style>
</head>
<body>
<header class="header">
<div class="header_wrap">
<h1 class="logo">
MOOD CAFE
</h1>
<nav class="menu">
<a href="#">HOME</a>
<a href="#">MENU</a>
<a href="#">STORY</a>
<a href="#">SPACE</a>
<a href="#">CONTACT</a>
</nav>
</div>
</header>
<!-- 히어로 -->
<section class="hero">
<div class="hero_text fade_up">
<span class="section_tag">
Emotional Coffee Space
</span>
<h2>
따뜻한 향과<br>
조용한 분위기의<br>
<span>감성 카페</span>
</h2>
<p>
부드러운 커피 향과 따뜻한 공간 속에서
하루의 여유를 느껴보세요.<br>
잔잔한 음악과 감성적인 분위기가
특별한 시간을 만들어줍니다.
</p>
<div class="btn_area">
<a href="#" class="btn dark">MENU VIEW</a>
<a href="#" class="btn light">RESERVATION</a>
</div>
</div>
<div class="hero_img fade_up delay1">
<img src="https://images.unsplash.com/photo-1495474472287-4d71bcdd2085?auto=format&fit=crop&w=1400&q=80" alt="카페">
</div>
</section>
<!-- 메뉴 -->
<section class="menu_section fade_up delay1">
<div class="title_area">
<span class="section_tag">
Signature Menu
</span>
<h2>
오늘의 감성을 채우는 메뉴
</h2>
<p>
직접 로스팅한 원두와 디저트가 어우러진<br>
특별한 커피 시간을 경험해보세요.
</p>
</div>
<div class="menu_grid">
<article class="menu_card">
<div class="menu_img">
<img src="https://images.unsplash.com/photo-1517701604599-bb29b565090c?auto=format&fit=crop&w=1200&q=80" alt="">
</div>
<div class="menu_text">
<h3>Latte</h3>
<p>
부드러운 우유와 깊은 에스프레소가
조화롭게 어우러진 시그니처 라떼.
</p>
<div class="price">6.5</div>
</div>
</article>
<article class="menu_card">
<div class="menu_img">
<img src="https://images.unsplash.com/photo-1509042239860-f550ce710b93?auto=format&fit=crop&w=1200&q=80" alt="">
</div>
<div class="menu_text">
<h3>Espresso</h3>
<p>
진한 풍미와 깊은 향이 느껴지는
프리미엄 에스프레소 커피.
</p>
<div class="price">5.0</div>
</div>
</article>
<article class="menu_card">
<div class="menu_img">
<img src="https://images.unsplash.com/photo-1511920170033-f8396924c348?auto=format&fit=crop&w=1200&q=80" alt="">
</div>
<div class="menu_text">
<h3>Dessert</h3>
<p>
매일 직접 준비하는 디저트와 함께
달콤한 휴식을 즐겨보세요.
</p>
<div class="price">7.5</div>
</div>
</article>
</div>
</section>
<!-- 소개 -->
<section class="story_section fade_up delay2">
<div class="story_wrap">
<div class="story_img">
<img src="https://images.unsplash.com/photo-1521017432531-fbd92d768814?auto=format&fit=crop&w=1400&q=80" alt="">
</div>
<div class="story_text">
<span class="section_tag">
Cafe Story
</span>
<h2>
느리게 흐르는<br>
하루의 분위기
</h2>
<p>
자연스러운 우드톤과 따뜻한 조명,
그리고 조용히 흐르는 음악이
공간의 분위기를 완성합니다.<br><br>
단순한 카페가 아니라
머물고 싶은 공간을 만들고 있습니다.
</p>
</div>
</div>
</section>
<!-- 공간 -->
<section class="space_section fade_up delay2">
<div class="title_area">
<span class="section_tag">
Cafe Space
</span>
<h2>
감성을 담은 공간 디자인
</h2>
</div>
<div class="space_grid">
<div class="space_big">
<img src="https://images.unsplash.com/photo-1554118811-1e0d58224f24?auto=format&fit=crop&w=1400&q=80" alt="">
</div>
<div class="space_small_wrap">
<div class="space_small">
<img src="https://images.unsplash.com/photo-1521017432531-fbd92d768814?auto=format&fit=crop&w=1200&q=80" alt="">
</div>
<div class="space_small">
<img src="https://images.unsplash.com/photo-1514933651103-005eec06c04b?auto=format&fit=crop&w=1200&q=80" alt="">
</div>
</div>
</div>
</section>
<!-- 리뷰 -->
<section class="review_section fade_up delay3">
<div class="review_wrap">
<div class="review_title">
<span class="section_tag">
Visitor Review
</span>
<h2>
사람들이 기억하는 분위기
</h2>
</div>
<div class="review_cards">
<div class="review_card">
<p>
커피 향과 음악, 조명이 정말 조화로운 공간이었어요.
오래 머물고 싶은 분위기였습니다.
</p>
<div class="review_user">
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="">
<span>김서연</span>
</div>
</div>
<div class="review_card">
<p>
인테리어가 정말 감성적이고
디저트와 커피 맛도 훌륭했습니다.
</p>
<div class="review_user">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="">
<span>이준호</span>
</div>
</div>
<div class="review_card">
<p>
조용하게 작업하거나 쉬기 좋은 공간이라
자주 방문하고 싶은 카페입니다.
</p>
<div class="review_user">
<img src="https://randomuser.me/api/portraits/women/68.jpg" alt="">
<span>박지윤</span>
</div>
</div>
</div>
</div>
</section>
<!-- CTA -->
<section class="cta_section fade_up delay3">
<div class="cta_wrap">
<h2>
오늘 하루의 분위기를<br>
이곳에서 느껴보세요
</h2>
<p>
따뜻한 커피와 감성적인 공간이
특별한 시간을 만들어드립니다.
</p>
<a href="#" class="cta_btn">
VISIT CAFE
</a>
</div>
</section>
<footer class="footer">
COPYRIGHT 2026. MOOD CAFE.<br>
ALL RIGHTS RESERVED.
</footer>
</body>
</html>
#반응형 스타일시트 연습4(카페)