<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>카페 브랜드 사이트 샘플</title>
<style>
*{
margin:0;
padding:0;
box-sizing:border-box;
}
body{
font-family:Arial, sans-serif;
color:#2b211b;
background:#fffaf3;
}
a{
text-decoration:none;
color:inherit;
}
.wrap{
max-width:1200px;
width:100%;
margin:0 auto;
padding:0 20px;
}
/* Header */
.header{
height:80px;
background:#fffaf3;
border-bottom:1px solid #eadccc;
}
.header .wrap{
height:80px;
display:flex;
justify-content:space-between;
align-items:center;
}
.logo{
font-size:26px;
font-weight:800;
color:#7a4a25;
}
.menu{
display:flex;
gap:40px;
}
.menu a{
font-size:16px;
font-weight:700;
}
/* Hero */
.hero{
padding:100px 0;
background:#f4e5d3;
}
.hero .wrap{
display:flex;
justify-content:space-between;
align-items:center;
gap:50px;
}
.hero_text{
width:50%;
}
.hero_text span{
display:inline-block;
margin-bottom:20px;
color:#9b5b2e;
font-weight:800;
}
.hero_text h1{
font-size:54px;
line-height:1.2;
margin-bottom:25px;
}
.hero_text p{
font-size:18px;
line-height:1.8;
color:#6d5a4a;
margin-bottom:35px;
}
.btn{
display:inline-block;
padding:16px 34px;
background:#7a4a25;
color:white;
border-radius:8px;
font-weight:800;
}
.hero_img{
width:50%;
height:420px;
background:
url("https://images.unsplash.com/photo-1495474472287-4d71bcdd2085")
no-repeat center / cover;
border-radius:35px;
}
/* Section */
.section{
padding:90px 0;
}
.section_title{
text-align:center;
margin-bottom:50px;
}
.section_title h2{
font-size:38px;
margin-bottom:15px;
}
.section_title p{
color:#7a6a5b;
font-size:17px;
}
/* Menu Card */
.menu_wrap{
display:flex;
gap:30px;
}
.menu_card{
width:calc(100% / 3);
background:white;
border-radius:24px;
overflow:hidden;
box-shadow:0 12px 30px rgba(80,45,20,.1);
transition:.3s;
}
.menu_card:hover{
transform:translateY(-10px);
}
.menu_img{
height:260px;
}
.menu_img img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}
.menu_text{
padding:30px;
}
.menu_text h3{
font-size:24px;
margin-bottom:12px;
color:#7a4a25;
}
.menu_text p{
font-size:15px;
line-height:1.7;
color:#6d5a4a;
margin-bottom:20px;
}
.price{
font-size:22px;
font-weight:800;
color:#9b5b2e;
}
/* Gallery */
.gallery{
background:#2b211b;
padding:90px 0;
color:white;
}
.gallery .section_title p{
color:#d7c4b2;
}
.gallery_wrap{
display:grid;
grid-template-columns:2fr 1fr 1fr;
gap:20px;
}
.gallery_item{
height:260px;
border-radius:22px;
overflow:hidden;
}
.gallery_item.big{
height:540px;
grid-row:span 2;
}
.gallery_item img{
width:100%;
height:100%;
object-fit:cover;
display:block;
transition:.4s;
}
.gallery_item:hover img{
transform:scale(1.08);
}
/* Footer */
.footer{
height:100px;
background:#fffaf3;
color:#7a6a5b;
display:flex;
justify-content:center;
align-items:center;
}
/* Mobile */
@media(max-width:768px){
.header{
height:auto;
padding:20px 0;
}
.header .wrap{
height:auto;
flex-direction:column;
gap:20px;
}
.menu{
gap:20px;
flex-wrap:wrap;
justify-content:center;
}
.hero{
padding:70px 0;
}
.hero .wrap{
flex-direction:column;
}
.hero_text,
.hero_img{
width:100%;
}
.hero_text h1{
font-size:36px;
}
.hero_img{
height:300px;
}
.menu_wrap{
flex-direction:column;
}
.menu_card{
width:100%;
}
.gallery_wrap{
display:flex;
flex-direction:column;
}
.gallery_item,
.gallery_item.big{
height:260px;
}
}
</style>
</head>
<body>
<header class="header">
<div class="wrap">
<div class="logo">MOOD CAFE</div>
<nav class="menu">
<a href="#">Brand</a>
<a href="#">Menu</a>
<a href="#">Gallery</a>
<a href="#">Store</a>
</nav>
</div>
</header>
<section class="hero">
<div class="wrap">
<div class="hero_text">
<span>SPECIALTY COFFEE BRAND</span>
<h1>
하루를 채우는<br>
따뜻한 커피 한 잔
</h1>
<p>
깊은 향과 부드러운 맛으로
편안한 시간을 선물하는 감성 카페 브랜드입니다.
</p>
<a href="#" class="btn">메뉴 보기</a>
</div>
<div class="hero_img"></div>
</div>
</section>
<section class="section">
<div class="wrap">
<div class="section_title">
<h2>Signature Menu</h2>
<p>무드카페에서 가장 사랑받는 대표 메뉴입니다.</p>
</div>
<div class="menu_wrap">
<div class="menu_card">
<div class="menu_img">
<img src="https://images.unsplash.com/photo-1509042239860-f550ce710b93" alt="아메리카노">
</div>
<div class="menu_text">
<h3>Deep Americano</h3>
<p>
진한 원두 향과 깔끔한 끝맛이 매력적인
무드카페의 대표 커피입니다.
</p>
<div class="price">₩4,500</div>
</div>
</div>
<div class="menu_card">
<div class="menu_img">
<img src="https://images.unsplash.com/photo-1461023058943-07fcbe16d735" alt="라떼">
</div>
<div class="menu_text">
<h3>Soft Latte</h3>
<p>
부드러운 우유와 에스프레소가 어우러진
따뜻한 감성 라떼입니다.
</p>
<div class="price">₩5,000</div>
</div>
</div>
<div class="menu_card">
<div class="menu_img">
<img src="https://images.unsplash.com/photo-1551024506-0bccd828d307" alt="디저트">
</div>
<div class="menu_text">
<h3>Sweet Dessert</h3>
<p>
커피와 잘 어울리는 달콤한 디저트로
특별한 시간을 완성합니다.
</p>
<div class="price">₩6,500</div>
</div>
</div>
</div>
</div>
</section>
<section class="gallery">
<div class="wrap">
<div class="section_title">
<h2>Cafe Gallery</h2>
<p>따뜻한 공간과 감성적인 분위기를 만나보세요.</p>
</div>
<div class="gallery_wrap">
<div class="gallery_item big">
<img src="https://images.unsplash.com/photo-1554118811-1e0d58224f24" alt="카페 공간">
</div>
<div class="gallery_item">
<img src="https://images.unsplash.com/photo-1501339847302-ac426a4a7cbb" alt="카페 인테리어">
</div>
<div class="gallery_item">
<img src="https://images.unsplash.com/photo-1498804103079-a6351b050096" alt="커피">
</div>
<div class="gallery_item">
<img src="https://images.unsplash.com/photo-1511920170033-f8396924c3483" alt="카페 테이블">
</div>
<div class="gallery_item">
<img src="https://images.unsplash.com/photo-1495474472287-4d71bcdd2085" alt="커피 제조">
</div>
</div>
</div>
</section>
<footer class="footer">
COPYRIGHT 2026. MOOD CAFE. 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>카페 브랜드 사이트 샘플</title>
<style>
*{
margin:0;
padding:0;
box-sizing:border-box;
}
body{
font-family:Arial, sans-serif;
color:#2b211b;
background:#fffaf3;
}
a{
text-decoration:none;
color:inherit;
}
.wrap{
max-width:1200px;
width:100%;
margin:0 auto;
padding:0 20px;
}
/* Header */
.header{
height:80px;
background:#fffaf3;
border-bottom:1px solid #eadccc;
}
.header .wrap{
height:80px;
display:flex;
justify-content:space-between;
align-items:center;
}
.logo{
font-size:26px;
font-weight:800;
color:#7a4a25;
}
.menu{
display:flex;
gap:40px;
}
.menu a{
font-size:16px;
font-weight:700;
}
/* Hero */
.hero{
padding:100px 0;
background:#f4e5d3;
}
.hero .wrap{
display:flex;
justify-content:space-between;
align-items:center;
gap:50px;
}
.hero_text{
width:50%;
}
.hero_text span{
display:inline-block;
margin-bottom:20px;
color:#9b5b2e;
font-weight:800;
}
.hero_text h1{
font-size:54px;
line-height:1.2;
margin-bottom:25px;
}
.hero_text p{
font-size:18px;
line-height:1.8;
color:#6d5a4a;
margin-bottom:35px;
}
.btn{
display:inline-block;
padding:16px 34px;
background:#7a4a25;
color:white;
border-radius:8px;
font-weight:800;
}
.hero_img{
width:50%;
height:420px;
background:
url("https://images.unsplash.com/photo-1495474472287-4d71bcdd2085")
no-repeat center / cover;
border-radius:35px;
}
/* Section */
.section{
padding:90px 0;
}
.section_title{
text-align:center;
margin-bottom:50px;
}
.section_title h2{
font-size:38px;
margin-bottom:15px;
}
.section_title p{
color:#7a6a5b;
font-size:17px;
}
/* Menu Card */
.menu_wrap{
display:flex;
gap:30px;
}
.menu_card{
width:calc(100% / 3);
background:white;
border-radius:24px;
overflow:hidden;
box-shadow:0 12px 30px rgba(80,45,20,.1);
transition:.3s;
}
.menu_card:hover{
transform:translateY(-10px);
}
.menu_img{
height:260px;
}
.menu_img img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}
.menu_text{
padding:30px;
}
.menu_text h3{
font-size:24px;
margin-bottom:12px;
color:#7a4a25;
}
.menu_text p{
font-size:15px;
line-height:1.7;
color:#6d5a4a;
margin-bottom:20px;
}
.price{
font-size:22px;
font-weight:800;
color:#9b5b2e;
}
/* Gallery */
.gallery{
background:#2b211b;
padding:90px 0;
color:white;
}
.gallery .section_title p{
color:#d7c4b2;
}
.gallery_wrap{
display:grid;
grid-template-columns:2fr 1fr 1fr;
gap:20px;
}
.gallery_item{
height:260px;
border-radius:22px;
overflow:hidden;
}
.gallery_item.big{
height:540px;
grid-row:span 2;
}
.gallery_item img{
width:100%;
height:100%;
object-fit:cover;
display:block;
transition:.4s;
}
.gallery_item:hover img{
transform:scale(1.08);
}
/* Footer */
.footer{
height:100px;
background:#fffaf3;
color:#7a6a5b;
display:flex;
justify-content:center;
align-items:center;
}
/* Mobile */
@media(max-width:768px){
.header{
height:auto;
padding:20px 0;
}
.header .wrap{
height:auto;
flex-direction:column;
gap:20px;
}
.menu{
gap:20px;
flex-wrap:wrap;
justify-content:center;
}
.hero{
padding:70px 0;
}
.hero .wrap{
flex-direction:column;
}
.hero_text,
.hero_img{
width:100%;
}
.hero_text h1{
font-size:36px;
}
.hero_img{
height:300px;
}
.menu_wrap{
flex-direction:column;
}
.menu_card{
width:100%;
}
.gallery_wrap{
display:flex;
flex-direction:column;
}
.gallery_item,
.gallery_item.big{
height:260px;
}
}
</style>
</head>
<body>
<header class="header">
<div class="wrap">
<div class="logo">MOOD CAFE</div>
<nav class="menu">
<a href="#">Brand</a>
<a href="#">Menu</a>
<a href="#">Gallery</a>
<a href="#">Store</a>
</nav>
</div>
</header>
<section class="hero">
<div class="wrap">
<div class="hero_text">
<span>SPECIALTY COFFEE BRAND</span>
<h1>
하루를 채우는<br>
따뜻한 커피 한 잔
</h1>
<p>
깊은 향과 부드러운 맛으로
편안한 시간을 선물하는 감성 카페 브랜드입니다.
</p>
<a href="#" class="btn">메뉴 보기</a>
</div>
<div class="hero_img"></div>
</div>
</section>
<section class="section">
<div class="wrap">
<div class="section_title">
<h2>Signature Menu</h2>
<p>무드카페에서 가장 사랑받는 대표 메뉴입니다.</p>
</div>
<div class="menu_wrap">
<div class="menu_card">
<div class="menu_img">
<img src="https://images.unsplash.com/photo-1509042239860-f550ce710b93" alt="아메리카노">
</div>
<div class="menu_text">
<h3>Deep Americano</h3>
<p>
진한 원두 향과 깔끔한 끝맛이 매력적인
무드카페의 대표 커피입니다.
</p>
<div class="price">₩4,500</div>
</div>
</div>
<div class="menu_card">
<div class="menu_img">
<img src="https://images.unsplash.com/photo-1461023058943-07fcbe16d735" alt="라떼">
</div>
<div class="menu_text">
<h3>Soft Latte</h3>
<p>
부드러운 우유와 에스프레소가 어우러진
따뜻한 감성 라떼입니다.
</p>
<div class="price">₩5,000</div>
</div>
</div>
<div class="menu_card">
<div class="menu_img">
<img src="https://images.unsplash.com/photo-1551024506-0bccd828d307" alt="디저트">
</div>
<div class="menu_text">
<h3>Sweet Dessert</h3>
<p>
커피와 잘 어울리는 달콤한 디저트로
특별한 시간을 완성합니다.
</p>
<div class="price">₩6,500</div>
</div>
</div>
</div>
</div>
</section>
<section class="gallery">
<div class="wrap">
<div class="section_title">
<h2>Cafe Gallery</h2>
<p>따뜻한 공간과 감성적인 분위기를 만나보세요.</p>
</div>
<div class="gallery_wrap">
<div class="gallery_item big">
<img src="https://images.unsplash.com/photo-1554118811-1e0d58224f24" alt="카페 공간">
</div>
<div class="gallery_item">
<img src="https://images.unsplash.com/photo-1501339847302-ac426a4a7cbb" alt="카페 인테리어">
</div>
<div class="gallery_item">
<img src="https://images.unsplash.com/photo-1498804103079-a6351b050096" alt="커피">
</div>
<div class="gallery_item">
<img src="https://images.unsplash.com/photo-1511920170033-f8396924c3483" alt="카페 테이블">
</div>
<div class="gallery_item">
<img src="https://images.unsplash.com/photo-1495474472287-4d71bcdd2085" alt="커피 제조">
</div>
</div>
</div>
</section>
<footer class="footer">
COPYRIGHT 2026. MOOD CAFE. ALL RIGHTS RESERVED.
</footer>
</body>
</html>
#샘플5 = 카페 / 브랜드 사이트형