چای و گپ
چای تازهدم و حرفهایی که قرار نیست زود تمام شوند.
تست۳ - فراغیب
بدون خلاصۀ ویرایش |
بدون خلاصۀ ویرایش |
||
| خط ۱: | خط ۱: | ||
<html> | |||
<html lang="fa" dir="rtl"> | |||
<head> | |||
<meta charset="UTF-8"> | |||
<meta name="viewport" | |||
content="width=device-width, initial-scale=1.0"> | |||
<title>کافه پاتوق محمد | قهوه خانه سنتی و پاتوق جوانها</title> | |||
<meta name="description" | |||
content="کافه پاتوق محمد؛ قهوه خانه سنتی با چای، املت، عدسی، صبحانه و عصرانه. جایی برای دورهمی، گپ دوستانه، صبحانه و یک عصر خوب."> | |||
<meta name="robots" | |||
content="index, follow"> | |||
<link rel="preconnect" | |||
href="https://fonts.googleapis.com"> | |||
<link rel="preconnect" | |||
href="https://fonts.gstatic.com" | |||
crossorigin> | |||
<link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;600;700;800;900&family=Lalezar&display=swap" | |||
rel="stylesheet"> | |||
<link rel="stylesheet" | |||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"> | |||
<style> | <style> | ||
/* | |||
#content { | /* ========================================================= | ||
width: | PATOGH MOHAMMAD | ||
max-width: 100% | TRADITIONAL CAFE / TEA HOUSE | ||
margin-left: auto | MOBILE FIRST | ||
margin-right: auto | ========================================================= */ | ||
:root{ | |||
--black:#11100e; | |||
--black-2:#191713; | |||
--black-3:#242019; | |||
--gold:#d8ad45; | |||
--gold-light:#f1d98b; | |||
--yellow:#e8c968; | |||
--cream:#f4ead4; | |||
--paper:#ead9b8; | |||
--brown:#684b2e; | |||
--brown-light:#9a7043; | |||
--red:#7c2f24; | |||
--white:#fffaf0; | |||
--text:#29231b; | |||
--muted:#827762; | |||
--border:rgba(216,173,69,.28); | |||
--shadow: | |||
0 12px 35px rgba(0,0,0,.25); | |||
--container:1200px; | |||
--radius:20px; | |||
} | |||
/* ========================================================= | |||
RESET | |||
========================================================= */ | |||
*{ | |||
box-sizing:border-box; | |||
margin:0; | |||
padding:0; | |||
} | |||
html{ | |||
scroll-behavior:smooth; | |||
} | |||
body{ | |||
font-family: | |||
"Vazirmatn", | |||
Tahoma, | |||
Arial, | |||
sans-serif; | |||
background:var(--cream); | |||
color:var(--text); | |||
line-height:1.9; | |||
overflow-x:hidden; | |||
} | |||
img{ | |||
display:block; | |||
max-width:100%; | |||
height:auto; | |||
} | |||
a{ | |||
text-decoration:none; | |||
color:inherit; | |||
} | |||
/* ========================================================= | |||
TEXTURE | |||
========================================================= */ | |||
.paper-texture{ | |||
background-color:var(--cream); | |||
background-image: | |||
radial-gradient( | |||
rgba(104,75,46,.08) 1px, | |||
transparent 1px | |||
); | |||
background-size:14px 14px; | |||
} | |||
/* ========================================================= | |||
CONTAINER | |||
========================================================= */ | |||
.container{ | |||
width:min( | |||
calc(100% - 28px), | |||
var(--container) | |||
); | |||
margin-inline:auto; | |||
} | |||
.section{ | |||
padding:55px 0; | |||
position:relative; | |||
} | |||
.section-title{ | |||
text-align:center; | |||
margin-bottom:32px; | |||
position:relative; | |||
} | |||
.section-title .small-title{ | |||
display:block; | |||
color:var(--gold); | |||
font-size:.78rem; | |||
font-weight:800; | |||
letter-spacing:.5px; | |||
margin-bottom:5px; | |||
} | |||
.section-title h2{ | |||
color:var(--black); | |||
font-size: | |||
clamp(1.7rem,6vw,2.5rem); | |||
line-height:1.4; | |||
font-family:"Lalezar","Vazirmatn",sans-serif; | |||
font-weight:400; | |||
} | |||
.section-title p{ | |||
max-width:650px; | |||
margin:8px auto 0; | |||
color:var(--muted); | |||
font-size:.88rem; | |||
} | |||
/* ========================================================= | |||
TOP STRIP | |||
========================================================= */ | |||
.top-strip{ | |||
background:var(--black); | |||
color:var(--gold-light); | |||
border-bottom:1px solid var(--border); | |||
padding:7px 0; | |||
font-size:.7rem; | |||
text-align:center; | |||
letter-spacing:.2px; | |||
} | |||
.top-strip i{ | |||
color:var(--yellow); | |||
margin-left:5px; | |||
} | |||
/* ========================================================= | |||
HEADER | |||
========================================================= */ | |||
.header{ | |||
background: | |||
linear-gradient( | |||
180deg, | |||
#12110e, | |||
#0d0c0a | |||
); | |||
color:#fff; | |||
position:sticky; | |||
top:0; | |||
z-index:1000; | |||
border-bottom:1px solid var(--border); | |||
box-shadow: | |||
0 5px 25px rgba(0,0,0,.25); | |||
} | |||
.header-inner{ | |||
min-height:72px; | |||
display:flex; | |||
align-items:center; | |||
justify-content:space-between; | |||
gap:12px; | |||
} | |||
.brand{ | |||
display:flex; | |||
align-items:center; | |||
gap:10px; | |||
} | |||
.brand-icon{ | |||
width:44px; | |||
height:44px; | |||
border-radius:50%; | |||
border:2px solid var(--gold); | |||
color:var(--gold-light); | |||
display:grid; | |||
place-items:center; | |||
font-size:1.1rem; | |||
box-shadow: | |||
inset 0 0 0 4px rgba(216,173,69,.08); | |||
} | |||
.brand-name{ | |||
display:flex; | |||
flex-direction:column; | |||
line-height:1.25; | |||
} | |||
.brand-name strong{ | |||
font-family:"Lalezar","Vazirmatn",sans-serif; | |||
color:var(--gold-light); | |||
font-size:1.25rem; | |||
font-weight:400; | |||
} | |||
.brand-name span{ | |||
color:#aaa092; | |||
font-size:.62rem; | |||
} | |||
.desktop-menu{ | |||
display:none; | |||
} | |||
.header-button{ | |||
display:none; | |||
} | |||
/* ========================================================= | |||
HERO | |||
========================================================= */ | |||
.hero{ | |||
position:relative; | |||
min-height:650px; | |||
color:#fff; | |||
background: | |||
linear-gradient( | |||
90deg, | |||
rgba(0,0,0,.92), | |||
rgba(0,0,0,.63), | |||
rgba(0,0,0,.78) | |||
), | |||
url("IMAGE-HERO.jpg"); | |||
background-size:cover; | |||
background-position:center; | |||
overflow:hidden; | |||
} | |||
/* Decorative golden lines */ | |||
.hero::before{ | |||
content:""; | |||
position:absolute; | |||
width:180px; | |||
height:180px; | |||
border:1px solid rgba(216,173,69,.3); | |||
border-radius:50%; | |||
left:-80px; | |||
top:-70px; | |||
} | |||
.hero::after{ | |||
content:""; | |||
position:absolute; | |||
width:250px; | |||
height:250px; | |||
border:1px solid rgba(216,173,69,.12); | |||
border-radius:50%; | |||
right:-110px; | |||
bottom:-100px; | |||
} | |||
.hero-inner{ | |||
min-height:650px; | |||
display:grid; | |||
grid-template-columns:1fr; | |||
align-items:center; | |||
padding:55px 0; | |||
position:relative; | |||
z-index:2; | |||
} | |||
.hero-content{ | |||
max-width:720px; | |||
} | |||
.hero-stamp{ | |||
width:78px; | |||
height:78px; | |||
border:2px solid var(--gold); | |||
border-radius:50%; | |||
display:flex; | |||
align-items:center; | |||
justify-content:center; | |||
text-align:center; | |||
color:var(--gold-light); | |||
font-size:.62rem; | |||
font-weight:800; | |||
transform:rotate(-8deg); | |||
margin-bottom:18px; | |||
} | |||
.hero h1{ | |||
font-family: | |||
"Lalezar", | |||
"Vazirmatn", | |||
sans-serif; | |||
font-weight:400; | |||
font-size: | |||
clamp(2.5rem,11vw,5rem); | |||
line-height:1.15; | |||
color:#fff; | |||
margin-bottom:12px; | |||
} | |||
.hero h1 span{ | |||
color:var(--gold-light); | |||
} | |||
.hero-subtitle{ | |||
font-size: | |||
clamp(1rem,4vw,1.25rem); | |||
color:#ddd2bd; | |||
margin-bottom:20px; | |||
} | |||
.hero-description{ | |||
color:#bcb5a7; | |||
font-size:.88rem; | |||
max-width:600px; | |||
margin-bottom:25px; | |||
} | |||
.hero-actions{ | |||
display:flex; | |||
flex-direction:column; | |||
gap:10px; | |||
} | |||
.btn{ | |||
min-height:50px; | |||
padding:10px 20px; | |||
border-radius:12px; | |||
display:inline-flex; | |||
align-items:center; | |||
justify-content:center; | |||
gap:8px; | |||
font-size:.88rem; | |||
font-weight:800; | |||
transition:.25s ease; | |||
} | |||
.btn-gold{ | |||
background:var(--gold); | |||
color:var(--black); | |||
box-shadow: | |||
0 8px 25px rgba(216,173,69,.22); | |||
} | |||
.btn-gold:hover{ | |||
background:var(--gold-light); | |||
transform:translateY(-2px); | |||
} | |||
.btn-outline{ | |||
border:1px solid rgba(216,173,69,.5); | |||
color:var(--gold-light); | |||
background:rgba(0,0,0,.2); | |||
} | |||
/* ========================================================= | |||
HERO SIDE NOTES | |||
========================================================= */ | |||
.hero-notes{ | |||
display:none; | |||
} | |||
.hero-note{ | |||
position:absolute; | |||
background:rgba(18,16,12,.85); | |||
border:1px solid var(--border); | |||
padding:10px 13px; | |||
border-radius:12px; | |||
color:var(--gold-light); | |||
font-size:.7rem; | |||
} | |||
/* ========================================================= | |||
MARQUEE-LIKE STATIC STRIP | |||
========================================================= */ | |||
.ribbon{ | |||
background:var(--gold); | |||
color:var(--black); | |||
padding:9px 0; | |||
overflow:hidden; | |||
border-top:3px solid var(--black); | |||
border-bottom:3px solid var(--black); | |||
} | |||
.ribbon-inner{ | |||
display:flex; | |||
align-items:center; | |||
justify-content:center; | |||
flex-wrap:wrap; | |||
gap:15px; | |||
font-weight:800; | |||
font-size:.72rem; | |||
} | |||
.ribbon span::before{ | |||
content:"✦"; | |||
margin-left:8px; | |||
} | |||
/* ========================================================= | |||
VIBE CARDS | |||
========================================================= */ | |||
.vibe{ | |||
background: | |||
var(--black-2); | |||
color:#fff; | |||
overflow:hidden; | |||
} | |||
.vibe .section-title h2{ | |||
color:#fff; | |||
} | |||
.vibe .section-title p{ | |||
color:#aaa397; | |||
} | |||
.vibe-grid{ | |||
display:grid; | |||
grid-template-columns: | |||
repeat(2,1fr); | |||
gap:10px; | |||
} | |||
.vibe-card{ | |||
min-height:155px; | |||
border:1px solid var(--border); | |||
border-radius:16px; | |||
padding:18px 13px; | |||
background: | |||
linear-gradient( | |||
145deg, | |||
#242018, | |||
#14130f | |||
); | |||
position:relative; | |||
overflow:hidden; | |||
} | |||
.vibe-card::after{ | |||
content:""; | |||
position:absolute; | |||
width:75px; | |||
height:75px; | |||
border:1px solid rgba(216,173,69,.12); | |||
border-radius:50%; | |||
left:-25px; | |||
bottom:-25px; | |||
} | |||
.vibe-icon{ | |||
color:var(--gold); | |||
font-size:1.5rem; | |||
margin-bottom:10px; | |||
} | |||
.vibe-card h3{ | |||
color:#fff; | |||
font-size:.92rem; | |||
margin-bottom:3px; | |||
} | |||
.vibe-card p{ | |||
color:#918a7d; | |||
font-size:.7rem; | |||
} | |||
/* ========================================================= | |||
MENU | |||
========================================================= */ | |||
.menu-section{ | |||
background: | |||
linear-gradient( | |||
rgba(244,234,212,.95), | |||
rgba(244,234,212,.95) | |||
), | |||
url("IMAGE-TEXTURE.jpg"); | |||
background-size:cover; | |||
} | |||
.menu-board{ | |||
background: | |||
#171510; | |||
color:#fff; | |||
border: | |||
5px solid #9a7039; | |||
outline: | |||
1px solid var(--gold); | |||
outline-offset:-10px; | |||
border-radius:8px; | |||
padding:35px 18px; | |||
box-shadow: | |||
0 15px 40px rgba(0,0,0,.25); | |||
} | |||
.menu-board-title{ | |||
text-align:center; | |||
color:var(--gold-light); | |||
font-family:"Lalezar","Vazirmatn",sans-serif; | |||
font-size:2rem; | |||
font-weight:400; | |||
margin-bottom:25px; | |||
} | |||
.menu-grid{ | |||
display:grid; | |||
grid-template-columns:1fr; | |||
gap:12px; | |||
} | |||
.menu-item{ | |||
display:grid; | |||
grid-template-columns: | |||
50px 1fr auto; | |||
gap:10px; | |||
align-items:center; | |||
padding:12px 8px; | |||
border-bottom: | |||
1px dashed rgba(216,173,69,.25); | |||
} | |||
.menu-item:last-child{ | |||
border-bottom:0; | |||
} | |||
.menu-icon{ | |||
width:42px; | |||
height:42px; | |||
border-radius:50%; | |||
border:1px solid var(--gold); | |||
display:grid; | |||
place-items:center; | |||
color:var(--gold-light); | |||
} | |||
.menu-item h3{ | |||
color:#fff; | |||
font-size:.92rem; | |||
margin-bottom:2px; | |||
} | |||
.menu-item p{ | |||
color:#8f897d; | |||
font-size:.68rem; | |||
} | |||
.menu-price{ | |||
color:var(--gold-light); | |||
font-size:.75rem; | |||
white-space:nowrap; | |||
font-weight:800; | |||
} | |||
.menu-note{ | |||
text-align:center; | |||
color:#827b6e; | |||
font-size:.7rem; | |||
margin-top:20px; | |||
} | |||
/* ========================================================= | |||
FEATURED BREAKFAST | |||
========================================================= */ | |||
.breakfast{ | |||
background:var(--black); | |||
color:#fff; | |||
} | |||
.breakfast-grid{ | |||
display:grid; | |||
grid-template-columns:1fr; | |||
gap:15px; | |||
} | |||
.food-card{ | |||
border-radius:18px; | |||
overflow:hidden; | |||
border:1px solid var(--border); | |||
background:#1c1a15; | |||
box-shadow:var(--shadow); | |||
} | |||
.food-image{ | |||
height:220px; | |||
background:#2a261d; | |||
display:flex; | |||
align-items:center; | |||
justify-content:center; | |||
padding:12px; | |||
overflow:hidden; | |||
} | |||
.food-image img{ | |||
width:100%; | |||
height:100%; | |||
object-fit:contain; | |||
object-position:center; | |||
} | |||
.food-content{ | |||
padding:17px; | |||
} | |||
.food-content h3{ | |||
color:var(--gold-light); | |||
font-size:1rem; | |||
margin-bottom:5px; | |||
} | |||
.food-content p{ | |||
color:#999184; | |||
font-size:.75rem; | |||
} | |||
/* ========================================================= | |||
YOUNG PEOPLE SECTION | |||
========================================================= */ | |||
.young{ | |||
background: | |||
var(--cream); | |||
position:relative; | |||
} | |||
.young-grid{ | |||
display:grid; | |||
grid-template-columns:1fr; | |||
gap:15px; | |||
} | |||
.young-card{ | |||
background:#fff; | |||
border:1px solid rgba(104,75,46,.15); | |||
border-radius:18px; | |||
padding:22px 18px; | |||
position:relative; | |||
box-shadow: | |||
0 7px 25px rgba(75,53,32,.08); | |||
overflow:hidden; | |||
} | |||
.young-card::before{ | |||
content:""; | |||
position:absolute; | |||
width:80px; | |||
height:80px; | |||
border-radius:50%; | |||
background:rgba(216,173,69,.10); | |||
left:-25px; | |||
top:-25px; | |||
} | |||
.young-card i{ | |||
font-size:1.45rem; | |||
color:var(--brown); | |||
margin-bottom:10px; | |||
} | |||
.young-card h3{ | |||
color:var(--black); | |||
font-size:.98rem; | |||
margin-bottom:5px; | |||
} | |||
.young-card p{ | |||
color:var(--muted); | |||
font-size:.76rem; | |||
} | |||
/* ========================================================= | |||
QUOTE | |||
========================================================= */ | |||
.quote-section{ | |||
background: | |||
linear-gradient( | |||
135deg, | |||
#171510, | |||
#2b2418 | |||
); | |||
color:#fff; | |||
text-align:center; | |||
padding:65px 20px; | |||
position:relative; | |||
overflow:hidden; | |||
} | |||
.quote-section::before{ | |||
content:"«"; | |||
position:absolute; | |||
font-family:Georgia,serif; | |||
font-size:15rem; | |||
color:rgba(216,173,69,.06); | |||
top:-100px; | |||
right:5%; | |||
} | |||
.quote-section blockquote{ | |||
position:relative; | |||
max-width:800px; | |||
margin:auto; | |||
color:var(--gold-light); | |||
font-family:"Lalezar","Vazirmatn",sans-serif; | |||
font-size: | |||
clamp(1.5rem,6vw,2.6rem); | |||
line-height:1.6; | |||
} | |||
.quote-author{ | |||
margin-top:10px; | |||
color:#958c7c; | |||
font-size:.75rem; | |||
} | |||
/* ========================================================= | |||
PHOTO WALL | |||
========================================================= */ | |||
.gallery{ | |||
background:var(--black-2); | |||
color:#fff; | |||
} | |||
.gallery-grid{ | |||
display:grid; | |||
grid-template-columns: | |||
repeat(2,1fr); | |||
gap:8px; | |||
} | |||
.gallery-item{ | |||
height:170px; | |||
border-radius:12px; | |||
overflow:hidden; | |||
background:#29251e; | |||
border:1px solid var(--border); | |||
position:relative; | |||
} | |||
.gallery-item.large{ | |||
grid-column:span 2; | |||
height:210px; | |||
} | |||
.gallery-item img{ | |||
width:100%; | |||
height:100%; | |||
object-fit:cover; | |||
object-position:center; | |||
} | |||
.gallery-label{ | |||
position:absolute; | |||
bottom:7px; | |||
right:7px; | |||
background:rgba(0,0,0,.75); | |||
color:var(--gold-light); | |||
border:1px solid var(--border); | |||
padding:3px 8px; | |||
border-radius:7px; | |||
font-size:.6rem; | |||
} | |||
/* ========================================================= | |||
SOCIAL | |||
========================================================= */ | |||
.social{ | |||
background:var(--cream); | |||
text-align:center; | |||
} | |||
.social-box{ | |||
background:#fff; | |||
border:1px solid rgba(104,75,46,.18); | |||
border-radius:22px; | |||
padding:30px 18px; | |||
box-shadow: | |||
0 8px 30px rgba(0,0,0,.07); | |||
} | |||
.social-icons{ | |||
display:flex; | |||
justify-content:center; | |||
gap:10px; | |||
margin-top:18px; | |||
} | |||
.social-icons a{ | |||
width:45px; | |||
height:45px; | |||
border-radius:50%; | |||
display:grid; | |||
place-items:center; | |||
background:var(--black); | |||
color:var(--gold-light); | |||
border:1px solid var(--border); | |||
transition:.2s; | |||
} | |||
.social-icons a:hover{ | |||
background:var(--gold); | |||
color:var(--black); | |||
} | |||
/* ========================================================= | |||
CTA | |||
========================================================= */ | |||
.cta{ | |||
background: | |||
linear-gradient( | |||
rgba(12,11,9,.93), | |||
rgba(12,11,9,.93) | |||
), | |||
url("IMAGE-CAFE.jpg"); | |||
background-size:cover; | |||
background-position:center; | |||
color:#fff; | |||
text-align:center; | |||
padding:70px 15px; | |||
} | |||
.cta h2{ | |||
font-family:"Lalezar","Vazirmatn",sans-serif; | |||
color:var(--gold-light); | |||
font-size: | |||
clamp(2rem,8vw,3rem); | |||
font-weight:400; | |||
margin-bottom:8px; | |||
} | |||
.cta p{ | |||
color:#bcb4a6; | |||
font-size:.85rem; | |||
max-width:600px; | |||
margin:0 auto 20px; | |||
} | |||
.cta-actions{ | |||
display:flex; | |||
flex-direction:column; | |||
gap:10px; | |||
justify-content:center; | |||
} | |||
/* ========================================================= | |||
FOOTER | |||
========================================================= */ | |||
.footer{ | |||
background:#0b0a08; | |||
color:#fff; | |||
padding:40px 0 85px; | |||
border-top:1px solid var(--border); | |||
} | |||
.footer-grid{ | |||
display:grid; | |||
grid-template-columns:1fr; | |||
gap:25px; | |||
} | |||
.footer h3{ | |||
color:var(--gold-light); | |||
font-family:"Lalezar","Vazirmatn",sans-serif; | |||
font-size:1.15rem; | |||
font-weight:400; | |||
margin-bottom:8px; | |||
} | } | ||
.footer p, | |||
.footer li{ | |||
color:#817a6e; | |||
font-size:.72rem; | |||
} | } | ||
/* | .footer ul{ | ||
list-style:none; | |||
display:grid; | |||
gap:5px; | |||
} | |||
.footer-bottom{ | |||
border-top:1px solid rgba(216,173,69,.12); | |||
margin-top:25px; | |||
padding-top:18px; | |||
text-align:center; | |||
color:#625c51; | |||
font-size:.65rem; | |||
} | |||
/* ========================================================= | |||
MOBILE NAV | |||
========================================================= */ | |||
.mobile-nav{ | |||
position:fixed; | |||
right:0; | |||
left:0; | |||
bottom:0; | |||
height:65px; | |||
display:grid; | |||
grid-template-columns: | |||
repeat(5,1fr); | |||
background:#11100e; | |||
border-top:1px solid var(--border); | |||
z-index:9999; | |||
box-shadow: | |||
0 -5px 25px rgba(0,0,0,.3); | |||
} | |||
.mobile-nav a{ | |||
display:flex; | |||
flex-direction:column; | |||
align-items:center; | |||
justify-content:center; | |||
gap:2px; | |||
color:#827b6d; | |||
font-size:.59rem; | |||
} | |||
.mobile-nav i{ | |||
font-size:1rem; | |||
} | |||
.mobile-nav a.active{ | |||
color:var(--gold-light); | |||
} | |||
/* ========================================================= | |||
TABLET | |||
========================================================= */ | |||
@media (min-width:600px){ | |||
.hero-actions{ | |||
flex-direction:row; | |||
} | |||
.btn{ | |||
min-width:150px; | |||
} | |||
.vibe-grid{ | |||
grid-template-columns: | |||
repeat(4,1fr); | |||
} | |||
.menu-grid{ | |||
grid-template-columns: | |||
repeat(2,1fr); | |||
column-gap:30px; | |||
} | |||
.breakfast-grid{ | |||
grid-template-columns: | |||
repeat(2,1fr); | |||
} | |||
.young-grid{ | |||
grid-template-columns: | |||
repeat(2,1fr); | |||
} | |||
.gallery-grid{ | |||
grid-template-columns: | |||
repeat(4,1fr); | |||
} | |||
.gallery-item.large{ | |||
grid-column:span 2; | |||
} | |||
.cta-actions{ | |||
flex-direction:row; | |||
} | |||
} | |||
/* ========================================================= | |||
DESKTOP | |||
========================================================= */ | |||
@media (min-width:900px){ | |||
.section{ | |||
padding:85px 0; | |||
} | |||
.desktop-menu{ | |||
display:flex; | |||
align-items:center; | |||
gap:22px; | |||
} | |||
.desktop-menu a{ | |||
color:#bcb4a6; | |||
font-size:.78rem; | |||
font-weight:600; | |||
transition:.2s; | |||
} | |||
.desktop-menu a:hover{ | |||
color:var(--gold-light); | |||
} | |||
.header-button{ | |||
display:inline-flex; | |||
align-items:center; | |||
gap:7px; | |||
padding:8px 13px; | |||
border:1px solid var(--border); | |||
border-radius:10px; | |||
color:var(--gold-light); | |||
font-size:.7rem; | |||
font-weight:700; | |||
} | |||
.hero-inner{ | |||
min-height:720px; | |||
padding:70px 0; | |||
} | |||
.hero-notes{ | |||
display:block; | |||
position:absolute; | |||
inset:0; | |||
pointer-events:none; | |||
} | |||
.hero-note.note-one{ | |||
top:22%; | |||
left:5%; | |||
} | |||
.hero-note.note-two{ | |||
bottom:20%; | |||
left:15%; | |||
} | |||
.hero-note.note-three{ | |||
top:30%; | |||
right:5%; | |||
} | |||
.menu-board{ | |||
padding:50px 55px; | |||
} | |||
.menu-grid{ | |||
column-gap:60px; | |||
} | |||
.breakfast-grid{ | |||
grid-template-columns: | |||
repeat(3,1fr); | |||
} | |||
.food-image{ | |||
height:270px; | |||
} | |||
.young-grid{ | |||
grid-template-columns: | |||
repeat(4,1fr); | |||
} | |||
.gallery-item{ | |||
height:220px; | |||
} | |||
.gallery-item.large{ | |||
height:300px; | |||
} | |||
.footer-grid{ | |||
grid-template-columns: | |||
1.5fr 1fr 1fr; | |||
} | |||
.footer{ | |||
padding-bottom:40px; | |||
} | |||
.mobile-nav{ | |||
display:none; | |||
} | |||
} | |||
/* ========================================================= | |||
LARGE | |||
========================================================= */ | |||
@media (min-width:1200px){ | |||
.hero h1{ | |||
font-size:5rem; | |||
} | |||
} | |||
/* ========================================================= | |||
ACCESSIBILITY | |||
========================================================= */ | |||
@media (prefers-reduced-motion:reduce){ | |||
html{ | |||
scroll-behavior:auto; | |||
} | |||
*, | |||
*::before, | |||
*::after{ | |||
transition:none !important; | |||
animation:none !important; | |||
} | |||
} | } | ||
</style> | </style> | ||
<div | </head> | ||
< | |||
<body> | |||
<!-- ===================================================== | |||
TOP STRIP | |||
===================================================== --> | |||
<div class="top-strip"> | |||
<div class="container"> | |||
<i class="fa-solid fa-mug-hot"></i> | |||
یه چای، یه گپ، یه پاتوق خوب... | |||
<i class="fa-solid fa-mug-saucer"></i> | |||
</div> | |||
</div> | </div> | ||
<!-- ===================================================== | |||
HEADER | |||
===================================================== --> | |||
<header class="header"> | |||
<div class="container header-inner"> | |||
<a href="#home" | |||
class="brand"> | |||
<span class="brand-icon"> | |||
<i class="fa-solid fa-mug-hot"></i> | |||
</span> | |||
<span class="brand-name"> | |||
<strong> | |||
کافه پاتوق محمد | |||
</strong> | |||
<span> | |||
قهوه خانه سنتی و پاتوق دوستانه | |||
</span> | |||
</span> | |||
</a> | |||
<nav class="desktop-menu" | |||
aria-label="منوی اصلی"> | |||
<a href="#menu"> | |||
منو | |||
</a> | |||
<a href="#vibe"> | |||
حال و هوا | |||
</a> | |||
<a href="#breakfast"> | |||
صبحانه | |||
</a> | |||
<a href="#gallery"> | |||
فضای کافه | |||
</a> | |||
<a href="#contact"> | |||
تماس | |||
</a> | |||
</nav> | |||
<a href="#menu" | |||
class="header-button"> | |||
<i class="fa-solid fa-utensils"></i> | |||
دیدن منو | |||
</a> | |||
</div> | |||
</header> | |||
<main> | |||
<!-- ===================================================== | |||
HERO | |||
===================================================== --> | |||
<section class="hero" | |||
id="home"> | |||
<div class="container hero-inner"> | |||
<div class="hero-content"> | |||
<div class="hero-stamp"> | |||
پاتوق | |||
<br> | |||
محمد | |||
<br> | |||
۱۴۰۵ | |||
</div> | |||
<h1> | |||
اینجا فقط | |||
<span> | |||
چای نمیخوریم! | |||
</span> | |||
</h1> | |||
<div class="hero-subtitle"> | |||
یه پاتوق برای چای، صبحانه، | |||
گپ و خاطره ساختیم. | |||
</div> | |||
<p class="hero-description"> | |||
کافه پاتوق محمد؛ حالوهوای قهوهخانههای | |||
قدیمی با سلیقه امروز. | |||
جایی برای صبحانه، املت، عدسی، چای و عصرانه؛ | |||
برای وقتی که دلت یک جای خودمانی میخواهد. | |||
</p> | |||
<div class="hero-actions"> | |||
<a href="#menu" | |||
class="btn btn-gold"> | |||
<i class="fa-solid fa-utensils"></i> | |||
منوی پاتوق | |||
</a> | |||
<a href="#vibe" | |||
class="btn btn-outline"> | |||
<i class="fa-solid fa-heart"></i> | |||
چرا پاتوق؟ | |||
</a> | |||
</div> | |||
</div> | |||
<div class="hero-notes"> | |||
<div class="hero-note note-one"> | |||
☕ چای تازهدم | |||
</div> | |||
<div class="hero-note note-two"> | |||
🍳 املت مخصوص | |||
</div> | |||
<div class="hero-note note-three"> | |||
✦ جای رفیقبازی | |||
</div> | |||
</div> | |||
</div> | |||
</section> | |||
<!-- ===================================================== | |||
RIBBON | |||
===================================================== --> | |||
<div class="ribbon"> | |||
<div class="container ribbon-inner"> | |||
<span> | |||
صبحانه | |||
</span> | |||
<span> | |||
چای | |||
</span> | |||
<span> | |||
املت | |||
</span> | |||
<span> | |||
عدسی | |||
</span> | |||
<span> | |||
عصرانه | |||
</span> | |||
<span> | |||
دورهمی | |||
</span> | |||
</div> | |||
</div> | |||
<!-- ===================================================== | |||
VIBE | |||
===================================================== --> | |||
<section class="section vibe" | |||
id="vibe"> | |||
<div class="container"> | |||
<div class="section-title"> | |||
<span class="small-title"> | |||
حالوهوای پاتوق | |||
</span> | |||
<h2> | |||
اینجا قراره بهت خوش بگذره | |||
</h2> | |||
<p> | |||
پاتوق محمد برای کسانی است که یک جای | |||
ساده، صمیمی و متفاوت برای وقت گذراندن میخواهند. | |||
</p> | |||
</div> | |||
<div class="vibe-grid"> | |||
<article class="vibe-card"> | |||
<div class="vibe-icon"> | |||
<i class="fa-solid fa-mug-hot"></i> | |||
</div> | |||
<h3> | |||
چای و گپ | |||
</h3> | |||
<p> | |||
چای تازهدم و حرفهایی که قرار نیست زود تمام شوند. | |||
</p> | |||
</article> | |||
<article class="vibe-card"> | |||
<div class="vibe-icon"> | |||
<i class="fa-solid fa-users"></i> | |||
</div> | |||
<h3> | |||
دورهمی رفیقانه | |||
</h3> | |||
<p> | |||
یک میز، چند رفیق و کلی حرف نگفته. | |||
</p> | |||
</article> | |||
<article class="vibe-card"> | |||
<div class="vibe-icon"> | |||
<i class="fa-solid fa-camera"></i> | |||
</div> | |||
<h3> | |||
جای عکس گرفتن | |||
</h3> | |||
<p> | |||
فضای سنتی و متفاوت برای ثبت لحظههای خوب. | |||
</p> | |||
</article> | |||
<article class="vibe-card"> | |||
<div class="vibe-icon"> | |||
<i class="fa-solid fa-music"></i> | |||
</div> | |||
<h3> | |||
حال خوب | |||
</h3> | |||
<p> | |||
جایی برای فاصله گرفتن از شلوغی روزمره. | |||
</p> | |||
</article> | |||
</div> | |||
</div> | |||
</section> | |||
<!-- ===================================================== | |||
MENU | |||
===================================================== --> | |||
<section class="section menu-section" | |||
id="menu"> | |||
<div class="container"> | |||
<div class="section-title"> | |||
<span class="small-title"> | |||
منوی پاتوق | |||
</span> | |||
<h2> | |||
ساده، خوشمزه، خودمونی | |||
</h2> | |||
<p> | |||
منوی اولیه بر اساس آیتمهایی که گفتی طراحی شده | |||
و میتوانی نام، توضیحات و قیمتها را تغییر بدهی. | |||
</p> | |||
</div> | |||
<div class="menu-board"> | |||
<div class="menu-board-title"> | |||
منوی کافه پاتوق محمد | |||
</div> | |||
<div class="menu-grid"> | |||
<article class="menu-item"> | |||
<div class="menu-icon"> | |||
<i class="fa-solid fa-mug-hot"></i> | |||
</div> | |||
<div> | |||
<h3> | |||
چای | |||
</h3> | |||
<p> | |||
چای تازهدم برای یک گپ درستوحسابی | |||
</p> | |||
</div> | |||
<div class="menu-price"> | |||
قیمت | |||
</div> | |||
</article> | |||
<article class="menu-item"> | |||
<div class="menu-icon"> | |||
<i class="fa-solid fa-egg"></i> | |||
</div> | |||
<div> | |||
<h3> | |||
املت | |||
</h3> | |||
<p> | |||
ساده، داغ و مناسب شروع یک روز خوب | |||
</p> | |||
</div> | |||
<div class="menu-price"> | |||
قیمت | |||
</div> | |||
</article> | |||
<article class="menu-item"> | |||
<div class="menu-icon"> | |||
<i class="fa-solid fa-bowl-food"></i> | |||
</div> | |||
<div> | |||
<h3> | |||
عدسی | |||
</h3> | |||
<p> | |||
یک انتخاب گرم و دلچسب برای صبح | |||
</p> | |||
</div> | |||
<div class="menu-price"> | |||
قیمت | |||
</div> | |||
</article> | |||
<article class="menu-item"> | |||
<div class="menu-icon"> | |||
<i class="fa-solid fa-sun"></i> | |||
</div> | |||
<div> | |||
<h3> | |||
صبحانه | |||
</h3> | |||
<p> | |||
برای شروع روز با انرژی و حال خوب | |||
</p> | |||
</div> | |||
<div class="menu-price"> | |||
قیمت | |||
</div> | |||
</article> | |||
<article class="menu-item"> | |||
<div class="menu-icon"> | |||
<i class="fa-solid fa-cookie-bite"></i> | |||
</div> | |||
<div> | |||
<h3> | |||
عصرانه | |||
</h3> | |||
<p> | |||
یک انتخاب خوشمزه برای عصرهای دوستانه | |||
</p> | |||
</div> | |||
<div class="menu-price"> | |||
قیمت | |||
</div> | |||
</article> | |||
<article class="menu-item"> | |||
<div class="menu-icon"> | |||
<i class="fa-solid fa-people-group"></i> | |||
</div> | |||
<div> | |||
<h3> | |||
دورهمی | |||
</h3> | |||
<p> | |||
میزت را با رفیقهایت شریک شو | |||
</p> | |||
</div> | |||
<div class="menu-price"> | |||
ویژه | |||
</div> | |||
</article> | |||
</div> | |||
<div class="menu-note"> | |||
قیمتها و آیتمهای نهایی منو را میتوانید | |||
مطابق منوی واقعی کافه جایگزین کنید. | |||
</div> | |||
</div> | |||
</div> | |||
</section> | |||
<!-- ===================================================== | |||
BREAKFAST | |||
===================================================== --> | |||
<section class="section breakfast" | |||
id="breakfast"> | |||
<div class="container"> | |||
<div class="section-title"> | |||
<span class="small-title"> | |||
صبحهای پاتوق | |||
</span> | |||
<h2 style="color:#fff;"> | |||
صبحانهای که ارزش بیدار شدن دارد! | |||
</h2> | |||
<p> | |||
صبحانه یکی از بخشهای جذاب برای جذب مشتریهای جوان، | |||
دانشجوها، کارمندها و دورهمیهای صبحگاهی است. | |||
</p> | |||
</div> | |||
<div class="breakfast-grid"> | |||
<article class="food-card"> | |||
<div class="food-image"> | |||
<img | |||
src="IMAGE-OMELET.jpg" | |||
alt="املت کافه پاتوق محمد" | |||
loading="lazy" | |||
> | |||
</div> | |||
<div class="food-content"> | |||
<h3> | |||
املت پاتوق | |||
</h3> | |||
<p> | |||
یک انتخاب ساده، گرم و محبوب برای صبحانه. | |||
</p> | |||
</div> | |||
</article> | |||
<article class="food-card"> | |||
<div class="food-image"> | |||
<img | |||
src="IMAGE-ADASI.jpg" | |||
alt="عدسی صبحانه کافه پاتوق محمد" | |||
loading="lazy" | |||
> | |||
</div> | |||
<div class="food-content"> | |||
<h3> | |||
عدسی | |||
</h3> | |||
<p> | |||
گرم، دلچسب و مناسب یک صبح آرام. | |||
</p> | |||
</div> | |||
</article> | |||
<article class="food-card"> | |||
<div class="food-image"> | |||
<img | |||
src="IMAGE-BREAKFAST.jpg" | |||
alt="صبحانه سنتی کافه پاتوق محمد" | |||
loading="lazy" | |||
> | |||
</div> | |||
<div class="food-content"> | |||
<h3> | |||
صبحانه سنتی | |||
</h3> | |||
<p> | |||
شروع روز با طعم و حالوهوای ایرانی. | |||
</p> | |||
</div> | |||
</article> | |||
</div> | |||
</div> | |||
</section> | |||
<!-- ===================================================== | |||
YOUNG PEOPLE | |||
===================================================== --> | |||
<section class="section young"> | |||
<div class="container"> | |||
<div class="section-title"> | |||
<span class="small-title"> | |||
پاتوق نسل جدید | |||
</span> | |||
<h2> | |||
چرا جوانها باید پاتوق محمد را امتحان کنند؟ | |||
</h2> | |||
<p> | |||
چون یک کافه خوب فقط غذا و نوشیدنی نیست؛ | |||
جایی است که دوست داری دوباره به آن برگردی. | |||
</p> | |||
</div> | |||
<div class="young-grid"> | |||
<article class="young-card"> | |||
<i class="fa-solid fa-camera-retro"></i> | |||
<h3> | |||
فضای اینستاگرامی | |||
</h3> | |||
<p> | |||
ترکیب فضای سنتی، رنگهای گرم و المانهای | |||
قدیمی میتواند برای عکس و تولید محتوا جذاب باشد. | |||
</p> | |||
</article> | |||
<article class="young-card"> | |||
<i class="fa-solid fa-gamepad"></i> | |||
<h3> | |||
وقتگذرانی با رفیقها | |||
</h3> | |||
<p> | |||
یک جای خودمانی برای حرف زدن، خندیدن و | |||
دورهم بودن بدون تشریفات. | |||
</p> | |||
</article> | |||
<article class="young-card"> | |||
<i class="fa-solid fa-laptop"></i> | |||
<h3> | |||
یک گوشه برای خودت | |||
</h3> | |||
<p> | |||
اگر دنبال فضایی متفاوت برای مطالعه، | |||
کار یا کمی خلوت کردن هستی، پاتوق میتواند | |||
انتخاب متفاوتی باشد. | |||
</p> | |||
</article> | |||
<article class="young-card"> | |||
<i class="fa-solid fa-heart"></i> | |||
<h3> | |||
حس نوستالژی | |||
</h3> | |||
<p> | |||
حالوهوای قهوهخانههای قدیمی با زبان | |||
طراحی امروزی و مناسب نسل جوان. | |||
</p> | |||
</article> | |||
</div> | |||
</div> | |||
</section> | |||
<!-- ===================================================== | |||
QUOTE | |||
===================================================== --> | |||
<section class="quote-section"> | |||
<blockquote> | |||
«بعضی قرارها را نمیشود در خانه گذاشت... | |||
باید آمد پاتوق.» | |||
</blockquote> | |||
<div class="quote-author"> | |||
کافه پاتوق محمد | |||
</div> | |||
</section> | |||
<!-- ===================================================== | |||
GALLERY | |||
===================================================== --> | |||
<section class="section gallery" | |||
id="gallery"> | |||
<div class="container"> | |||
<div class="section-title"> | |||
<span class="small-title"> | |||
قابهای پاتوق | |||
</span> | |||
<h2 style="color:#fff;"> | |||
اینجا را باید دید! | |||
</h2> | |||
<p> | |||
تصاویر واقعی فضای کافه، غذاها و دورهمیها را | |||
در این قسمت قرار بده تا صفحه شخصیت بیشتری پیدا کند. | |||
</p> | |||
</div> | |||
<div class="gallery-grid"> | |||
<div class="gallery-item large"> | |||
<img | |||
src="IMAGE-CAFE-1.jpg" | |||
alt="فضای داخلی کافه پاتوق محمد" | |||
loading="lazy" | |||
> | |||
<span class="gallery-label"> | |||
فضای پاتوق | |||
</span> | |||
</div> | |||
<div class="gallery-item"> | |||
<img | |||
src="IMAGE-CAFE-2.jpg" | |||
alt="فضای سنتی کافه پاتوق محمد" | |||
loading="lazy" | |||
> | |||
<span class="gallery-label"> | |||
حال خوب | |||
</span> | |||
</div> | |||
<div class="gallery-item"> | |||
<img | |||
src="IMAGE-TEA.jpg" | |||
alt="چای تازه دم کافه پاتوق محمد" | |||
loading="lazy" | |||
> | |||
<span class="gallery-label"> | |||
چای تازهدم | |||
</span> | |||
</div> | |||
<div class="gallery-item"> | |||
<img | |||
src="IMAGE-FRIENDS.jpg" | |||
alt="دورهمی دوستان در کافه پاتوق محمد" | |||
loading="lazy" | |||
> | |||
<span class="gallery-label"> | |||
دورهمی | |||
</span> | |||
</div> | |||
<div class="gallery-item"> | |||
<img | |||
src="IMAGE-BREAKFAST-2.jpg" | |||
alt="صبحانه سنتی در کافه پاتوق محمد" | |||
loading="lazy" | |||
> | |||
<span class="gallery-label"> | |||
صبحانه | |||
</span> | |||
</div> | |||
</div> | |||
</div> | |||
</section> | |||
<!-- ===================================================== | |||
SOCIAL | |||
===================================================== --> | |||
<section class="section social"> | |||
<div class="container"> | |||
<div class="social-box"> | |||
<div class="section-title" | |||
style="margin-bottom:0;"> | |||
<span class="small-title"> | |||
پاتوق مجازی | |||
</span> | |||
<h2> | |||
عکسهات رو با ما شریک شو | |||
</h2> | |||
<p> | |||
اگر از پاتوق عکس گرفتی، ما را در شبکههای اجتماعی | |||
تگ کن تا قاب تو هم بخشی از داستان پاتوق شود. | |||
</p> | |||
</div> | |||
<div class="social-icons"> | |||
<a href="#" | |||
aria-label="اینستاگرام"> | |||
<i class="fa-brands fa-instagram"></i> | |||
</a> | |||
<a href="#" | |||
aria-label="تلگرام"> | |||
<i class="fa-brands fa-telegram"></i> | |||
</a> | |||
<a href="#" | |||
aria-label="واتساپ"> | |||
<i class="fa-brands fa-whatsapp"></i> | |||
</a> | |||
</div> | |||
</div> | |||
</div> | |||
</section> | |||
<!-- ===================================================== | |||
CTA | |||
===================================================== --> | |||
<section class="cta" | |||
id="contact"> | |||
<div class="container"> | |||
<h2> | |||
قرار بعدی کجاست؟ | |||
</h2> | |||
<p> | |||
اگر دنبال یک جای صمیمی برای چای، صبحانه، | |||
عصرانه یا دورهمی هستی، شاید پاتوق محمد | |||
همان جایی باشد که دنبالش میگشتی. | |||
</p> | |||
<div class="cta-actions"> | |||
<a href="tel:02100000000" | |||
class="btn btn-gold"> | |||
<i class="fa-solid fa-phone"></i> | |||
تماس با پاتوق | |||
</a> | |||
<a href="#menu" | |||
class="btn btn-outline"> | |||
<i class="fa-solid fa-mug-hot"></i> | |||
دیدن منو | |||
</a> | |||
</div> | |||
</div> | |||
</section> | |||
</main> | |||
<!-- ===================================================== | |||
FOOTER | |||
===================================================== --> | |||
<footer class="footer"> | |||
<div class="container"> | |||
<div class="footer-grid"> | |||
<div> | |||
<h3> | |||
کافه پاتوق محمد | |||
</h3> | |||
<p> | |||
قهوهخانه سنتی با حالوهوای امروزی؛ | |||
جایی برای چای، صبحانه، عصرانه، | |||
گپ دوستانه و دورهمی. | |||
</p> | |||
</div> | |||
<div> | |||
<h3> | |||
منوی پاتوق | |||
</h3> | |||
<ul> | |||
<li> | |||
چای | |||
</li> | |||
<li> | |||
املت | |||
</li> | |||
<li> | |||
عدسی | |||
</li> | |||
<li> | |||
صبحانه | |||
</li> | |||
<li> | |||
عصرانه | |||
</li> | |||
</ul> | |||
</div> | |||
<div> | |||
<h3> | |||
اطلاعات تماس | |||
</h3> | |||
<ul> | |||
<li> | |||
<i class="fa-solid fa-phone"></i> | |||
021-00000000 | |||
</li> | |||
<li> | |||
<i class="fa-solid fa-location-dot"></i> | |||
آدرس کافه | |||
</li> | |||
<li> | |||
<i class="fa-solid fa-clock"></i> | |||
ساعات کاری | |||
</li> | |||
</ul> | |||
</div> | |||
</div> | |||
<div class="footer-bottom"> | |||
© تمامی حقوق برای کافه پاتوق محمد محفوظ است. | |||
</div> | |||
</div> | |||
</footer> | |||
<!-- ===================================================== | |||
MOBILE NAV | |||
===================================================== --> | |||
<nav class="mobile-nav" | |||
aria-label="منوی موبایل"> | |||
<a href="#home" | |||
class="active"> | |||
<i class="fa-solid fa-house"></i> | |||
خانه | |||
</a> | |||
<a href="#menu"> | |||
<i class="fa-solid fa-utensils"></i> | |||
منو | |||
</a> | |||
<a href="#breakfast"> | |||
<i class="fa-solid fa-egg"></i> | |||
صبحانه | |||
</a> | |||
<a href="#gallery"> | |||
<i class="fa-solid fa-camera"></i> | |||
عکسها | |||
</a> | |||
<a href="#contact"> | |||
<i class="fa-solid fa-phone"></i> | |||
تماس | |||
</a> | |||
</nav> | |||
</body> | |||
</html> | </html> | ||
نسخهٔ ۲۶ اوت ۲۰۲۶، ساعت ۰۹:۱۷
یه چای، یه گپ، یه پاتوق خوب...
پاتوق
محمد
۱۴۰۵
محمد
۱۴۰۵
اینجا فقط چای نمیخوریم!
یه پاتوق برای چای، صبحانه،
گپ و خاطره ساختیم.
کافه پاتوق محمد؛ حالوهوای قهوهخانههای قدیمی با سلیقه امروز. جایی برای صبحانه، املت، عدسی، چای و عصرانه؛ برای وقتی که دلت یک جای خودمانی میخواهد.
☕ چای تازهدم
🍳 املت مخصوص
✦ جای رفیقبازی
صبحانه
چای
املت
عدسی
عصرانه
دورهمی
حالوهوای پاتوق
اینجا قراره بهت خوش بگذره
پاتوق محمد برای کسانی است که یک جای ساده، صمیمی و متفاوت برای وقت گذراندن میخواهند.
دورهمی رفیقانه
یک میز، چند رفیق و کلی حرف نگفته.
جای عکس گرفتن
فضای سنتی و متفاوت برای ثبت لحظههای خوب.
حال خوب
جایی برای فاصله گرفتن از شلوغی روزمره.
صبحهای پاتوق
صبحانهای که ارزش بیدار شدن دارد!
صبحانه یکی از بخشهای جذاب برای جذب مشتریهای جوان، دانشجوها، کارمندها و دورهمیهای صبحگاهی است.
املت پاتوق
یک انتخاب ساده، گرم و محبوب برای صبحانه.
عدسی
گرم، دلچسب و مناسب یک صبح آرام.
صبحانه سنتی
شروع روز با طعم و حالوهوای ایرانی.
پاتوق نسل جدید
چرا جوانها باید پاتوق محمد را امتحان کنند؟
چون یک کافه خوب فقط غذا و نوشیدنی نیست؛ جایی است که دوست داری دوباره به آن برگردی.
فضای اینستاگرامی
ترکیب فضای سنتی، رنگهای گرم و المانهای قدیمی میتواند برای عکس و تولید محتوا جذاب باشد.
وقتگذرانی با رفیقها
یک جای خودمانی برای حرف زدن، خندیدن و دورهم بودن بدون تشریفات.
یک گوشه برای خودت
اگر دنبال فضایی متفاوت برای مطالعه، کار یا کمی خلوت کردن هستی، پاتوق میتواند انتخاب متفاوتی باشد.
حس نوستالژی
حالوهوای قهوهخانههای قدیمی با زبان طراحی امروزی و مناسب نسل جوان.
«بعضی قرارها را نمیشود در خانه گذاشت... باید آمد پاتوق.»
قابهای پاتوق
اینجا را باید دید!
تصاویر واقعی فضای کافه، غذاها و دورهمیها را در این قسمت قرار بده تا صفحه شخصیت بیشتری پیدا کند.
فضای پاتوق
حال خوب
چای تازهدم
دورهمی
صبحانه
قرار بعدی کجاست؟
اگر دنبال یک جای صمیمی برای چای، صبحانه، عصرانه یا دورهمی هستی، شاید پاتوق محمد همان جایی باشد که دنبالش میگشتی.