تست۳: تفاوت میان نسخهها
صفحه را خالی کرد برچسب: خالی کردن |
بدون خلاصۀ ویرایش |
||
| (۲ نسخهٔ میانیِ ایجادشده توسط همین کاربر نشان داده نشد) | |||
| خط ۱: | خط ۱: | ||
<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> | |||
/* ========================================================= | |||
PATOGH MOHAMMAD | |||
TRADITIONAL CAFE | |||
MOBILE FIRST | |||
========================================================= */ | |||
: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:#716656; | |||
--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; | |||
font-size:16px; | |||
} | |||
img{ | |||
display:block; | |||
max-width:100%; | |||
height:auto; | |||
} | |||
a{ | |||
text-decoration:none; | |||
color:inherit; | |||
} | |||
/* ========================================================= | |||
CONTAINER | |||
========================================================= */ | |||
.container{ | |||
width:min( | |||
calc(100% - 28px), | |||
var(--container) | |||
); | |||
margin-inline:auto; | |||
} | |||
.section{ | |||
padding:60px 0; | |||
position:relative; | |||
} | |||
.section-title{ | |||
text-align:center; | |||
margin-bottom:34px; | |||
position:relative; | |||
} | |||
.section-title .small-title{ | |||
display:block; | |||
color:var(--gold); | |||
font-size:.92rem; | |||
font-weight:800; | |||
margin-bottom:6px; | |||
} | |||
.section-title h2{ | |||
color:var(--black); | |||
font-size: | |||
clamp(1.8rem,6vw,2.6rem); | |||
line-height:1.45; | |||
font-family: | |||
"Lalezar", | |||
"Vazirmatn", | |||
sans-serif; | |||
font-weight:400; | |||
} | |||
.section-title p{ | |||
max-width:700px; | |||
margin:10px auto 0; | |||
color:var(--muted); | |||
font-size:1rem; | |||
line-height:2; | |||
} | |||
/* ========================================================= | |||
TOP STRIP | |||
========================================================= */ | |||
.top-strip{ | |||
background:var(--black); | |||
color:var(--gold-light); | |||
border-bottom:1px solid var(--border); | |||
padding:8px 0; | |||
font-size:.82rem; | |||
text-align:center; | |||
} | |||
.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:74px; | |||
display:flex; | |||
align-items:center; | |||
justify-content:space-between; | |||
gap:12px; | |||
} | |||
.brand{ | |||
display:flex; | |||
align-items:center; | |||
gap:10px; | |||
} | |||
.brand-icon{ | |||
width:46px; | |||
height:46px; | |||
border-radius:50%; | |||
border:2px solid var(--gold); | |||
color:var(--gold-light); | |||
display:grid; | |||
place-items:center; | |||
font-size:1.15rem; | |||
} | |||
.brand-name{ | |||
display:flex; | |||
flex-direction:column; | |||
line-height:1.3; | |||
} | |||
.brand-name strong{ | |||
font-family: | |||
"Lalezar", | |||
"Vazirmatn", | |||
sans-serif; | |||
color:var(--gold-light); | |||
font-size:1.35rem; | |||
font-weight:400; | |||
} | |||
.brand-name span{ | |||
color:#aaa092; | |||
font-size:.72rem; | |||
} | |||
.desktop-menu{ | |||
display:none; | |||
} | |||
.header-button{ | |||
display:none; | |||
} | |||
/* ========================================================= | |||
BANNER | |||
========================================================= */ | |||
.top-banner{ | |||
background:#080807; | |||
padding:10px; | |||
border-bottom:1px solid var(--border); | |||
} | |||
.banner-frame{ | |||
width:100%; | |||
max-width:1500px; | |||
margin:auto; | |||
min-height:220px; | |||
max-height:520px; | |||
border-radius:18px; | |||
overflow:hidden; | |||
background:#11100e; | |||
display:flex; | |||
align-items:center; | |||
justify-content:center; | |||
box-shadow: | |||
0 8px 30px rgba(0,0,0,.25); | |||
position:relative; | |||
} | |||
.banner-frame img{ | |||
width:100%; | |||
height:auto; | |||
max-height:520px; | |||
object-fit:contain; | |||
object-position:center; | |||
display:block; | |||
} | |||
.banner-overlay{ | |||
position:absolute; | |||
inset:0; | |||
pointer-events:none; | |||
border:1px solid rgba(216,173,69,.35); | |||
border-radius:18px; | |||
} | |||
.banner-caption{ | |||
position:absolute; | |||
right:18px; | |||
bottom:18px; | |||
background:rgba(10,9,7,.82); | |||
color:var(--gold-light); | |||
border:1px solid var(--border); | |||
border-radius:10px; | |||
padding:7px 12px; | |||
font-size:.78rem; | |||
font-weight:700; | |||
} | |||
/* ========================================================= | |||
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; | |||
} | |||
.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:82px; | |||
height:82px; | |||
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:.72rem; | |||
font-weight:800; | |||
transform:rotate(-8deg); | |||
margin-bottom:20px; | |||
} | |||
.hero h1{ | |||
font-family: | |||
"Lalezar", | |||
"Vazirmatn", | |||
sans-serif; | |||
font-weight:400; | |||
font-size: | |||
clamp(2.6rem,11vw,5rem); | |||
line-height:1.2; | |||
color:#fff; | |||
margin-bottom:14px; | |||
} | |||
.hero h1 span{ | |||
color:var(--gold-light); | |||
} | |||
.hero-subtitle{ | |||
font-size: | |||
clamp(1.05rem,4vw,1.3rem); | |||
color:#ddd2bd; | |||
margin-bottom:20px; | |||
font-weight:600; | |||
} | |||
.hero-description{ | |||
color:#c5bdaf; | |||
font-size:1rem; | |||
max-width:620px; | |||
margin-bottom:28px; | |||
line-height:2; | |||
} | |||
.hero-actions{ | |||
display:flex; | |||
flex-direction:column; | |||
gap:11px; | |||
} | |||
.btn{ | |||
min-height:52px; | |||
padding:11px 21px; | |||
border-radius:12px; | |||
display:inline-flex; | |||
align-items:center; | |||
justify-content:center; | |||
gap:8px; | |||
font-size:.92rem; | |||
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 NOTES | |||
========================================================= */ | |||
.hero-notes{ | |||
display:none; | |||
} | |||
.hero-note{ | |||
position:absolute; | |||
background:rgba(18,16,12,.85); | |||
border:1px solid var(--border); | |||
padding:11px 14px; | |||
border-radius:12px; | |||
color:var(--gold-light); | |||
font-size:.76rem; | |||
} | |||
/* ========================================================= | |||
RIBBON | |||
========================================================= */ | |||
.ribbon{ | |||
background:var(--gold); | |||
color:var(--black); | |||
padding:10px 0; | |||
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:.82rem; | |||
} | |||
.ribbon span::before{ | |||
content:"✦"; | |||
margin-left:8px; | |||
} | |||
/* ========================================================= | |||
VIBE | |||
========================================================= */ | |||
.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:12px; | |||
} | |||
.vibe-card{ | |||
min-height:175px; | |||
border:1px solid var(--border); | |||
border-radius:16px; | |||
padding:20px 15px; | |||
background: | |||
linear-gradient( | |||
145deg, | |||
#242018, | |||
#14130f | |||
); | |||
position:relative; | |||
overflow:hidden; | |||
} | |||
.vibe-icon{ | |||
color:var(--gold); | |||
font-size:1.6rem; | |||
margin-bottom:11px; | |||
} | |||
.vibe-card h3{ | |||
color:#fff; | |||
font-size:1rem; | |||
margin-bottom:5px; | |||
} | |||
.vibe-card p{ | |||
color:#aaa194; | |||
font-size:.82rem; | |||
line-height:1.9; | |||
} | |||
/* ========================================================= | |||
MENU | |||
========================================================= */ | |||
.menu-section{ | |||
background:var(--cream); | |||
} | |||
.menu-board{ | |||
background:#171510; | |||
color:#fff; | |||
border:5px solid #9a7039; | |||
outline:1px solid var(--gold); | |||
outline-offset:-10px; | |||
border-radius:8px; | |||
padding:38px 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:2.2rem; | |||
font-weight:400; | |||
margin-bottom:28px; | |||
} | |||
.menu-grid{ | |||
display:grid; | |||
grid-template-columns:1fr; | |||
gap:12px; | |||
} | |||
.menu-item{ | |||
display:grid; | |||
grid-template-columns: | |||
50px 1fr auto; | |||
gap:11px; | |||
align-items:center; | |||
padding:14px 8px; | |||
border-bottom: | |||
1px dashed rgba(216,173,69,.25); | |||
} | |||
.menu-icon{ | |||
width:44px; | |||
height:44px; | |||
border-radius:50%; | |||
border:1px solid var(--gold); | |||
display:grid; | |||
place-items:center; | |||
color:var(--gold-light); | |||
font-size:1rem; | |||
} | |||
.menu-item h3{ | |||
color:#fff; | |||
font-size:1rem; | |||
margin-bottom:3px; | |||
} | |||
.menu-item p{ | |||
color:#aaa194; | |||
font-size:.78rem; | |||
line-height:1.8; | |||
} | |||
.menu-price{ | |||
color:var(--gold-light); | |||
font-size:.8rem; | |||
white-space:nowrap; | |||
font-weight:800; | |||
} | |||
.menu-note{ | |||
text-align:center; | |||
color:#938a7b; | |||
font-size:.76rem; | |||
margin-top:22px; | |||
} | |||
/* ========================================================= | |||
BREAKFAST | |||
========================================================= */ | |||
.breakfast{ | |||
background:var(--black); | |||
color:#fff; | |||
} | |||
.breakfast-grid{ | |||
display:grid; | |||
grid-template-columns:1fr; | |||
gap:16px; | |||
} | |||
.food-card{ | |||
border-radius:18px; | |||
overflow:hidden; | |||
border:1px solid var(--border); | |||
background:#1c1a15; | |||
box-shadow:var(--shadow); | |||
} | |||
.food-image{ | |||
height:240px; | |||
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:19px; | |||
} | |||
.food-content h3{ | |||
color:var(--gold-light); | |||
font-size:1.05rem; | |||
margin-bottom:6px; | |||
} | |||
.food-content p{ | |||
color:#a59c8e; | |||
font-size:.82rem; | |||
line-height:1.9; | |||
} | |||
/* ========================================================= | |||
YOUNG PEOPLE | |||
========================================================= */ | |||
.young{ | |||
background:var(--cream); | |||
position:relative; | |||
} | |||
.young-grid{ | |||
display:grid; | |||
grid-template-columns:1fr; | |||
gap:16px; | |||
} | |||
.young-card{ | |||
background:#fff; | |||
border:1px solid rgba(104,75,46,.15); | |||
border-radius:18px; | |||
padding:25px 19px; | |||
position:relative; | |||
box-shadow: | |||
0 7px 25px rgba(75,53,32,.08); | |||
overflow:hidden; | |||
} | |||
.young-card i{ | |||
font-size:1.55rem; | |||
color:var(--brown); | |||
margin-bottom:11px; | |||
} | |||
.young-card h3{ | |||
color:var(--black); | |||
font-size:1.03rem; | |||
margin-bottom:6px; | |||
} | |||
.young-card p{ | |||
color:var(--muted); | |||
font-size:.82rem; | |||
line-height:2; | |||
} | |||
/* ========================================================= | |||
QUOTE | |||
========================================================= */ | |||
.quote-section{ | |||
background: | |||
linear-gradient( | |||
135deg, | |||
#171510, | |||
#2b2418 | |||
); | |||
color:#fff; | |||
text-align:center; | |||
padding:70px 20px; | |||
position:relative; | |||
overflow:hidden; | |||
} | |||
.quote-section blockquote{ | |||
position:relative; | |||
max-width:800px; | |||
margin:auto; | |||
color:var(--gold-light); | |||
font-family: | |||
"Lalezar", | |||
"Vazirmatn", | |||
sans-serif; | |||
font-size: | |||
clamp(1.65rem,6vw,2.7rem); | |||
line-height:1.65; | |||
} | |||
.quote-author{ | |||
margin-top:12px; | |||
color:#a09685; | |||
font-size:.8rem; | |||
} | |||
/* ========================================================= | |||
GALLERY | |||
========================================================= */ | |||
.gallery{ | |||
background:var(--black-2); | |||
color:#fff; | |||
} | |||
.gallery .section-title h2{ | |||
color:#fff; | |||
} | |||
.gallery .section-title p{ | |||
color:#aaa194; | |||
} | |||
.gallery-grid{ | |||
display:grid; | |||
grid-template-columns: | |||
repeat(2,1fr); | |||
gap:9px; | |||
} | |||
.gallery-item{ | |||
height:180px; | |||
border-radius:12px; | |||
overflow:hidden; | |||
background:#29251e; | |||
border:1px solid var(--border); | |||
position:relative; | |||
} | |||
.gallery-item.large{ | |||
grid-column:span 2; | |||
height:220px; | |||
} | |||
.gallery-item img{ | |||
width:100%; | |||
height:100%; | |||
object-fit:cover; | |||
object-position:center; | |||
} | |||
.gallery-label{ | |||
position:absolute; | |||
bottom:8px; | |||
right:8px; | |||
background:rgba(0,0,0,.78); | |||
color:var(--gold-light); | |||
border:1px solid var(--border); | |||
padding:4px 9px; | |||
border-radius:7px; | |||
font-size:.68rem; | |||
} | |||
/* ========================================================= | |||
SOCIAL | |||
========================================================= */ | |||
.social{ | |||
background:var(--cream); | |||
text-align:center; | |||
} | |||
.social-box{ | |||
background:#fff; | |||
border:1px solid rgba(104,75,46,.18); | |||
border-radius:22px; | |||
padding:32px 18px; | |||
box-shadow: | |||
0 8px 30px rgba(0,0,0,.07); | |||
} | |||
.social-icons{ | |||
display:flex; | |||
justify-content:center; | |||
gap:11px; | |||
margin-top:20px; | |||
} | |||
.social-icons a{ | |||
width:47px; | |||
height:47px; | |||
border-radius:50%; | |||
display:grid; | |||
place-items:center; | |||
background:var(--black); | |||
color:var(--gold-light); | |||
border:1px solid var(--border); | |||
} | |||
/* ========================================================= | |||
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:75px 15px; | |||
} | |||
.cta h2{ | |||
font-family: | |||
"Lalezar", | |||
"Vazirmatn", | |||
sans-serif; | |||
color:var(--gold-light); | |||
font-size: | |||
clamp(2.1rem,8vw,3.2rem); | |||
font-weight:400; | |||
margin-bottom:10px; | |||
} | |||
.cta p{ | |||
color:#c0b8aa; | |||
font-size:.92rem; | |||
max-width:650px; | |||
margin:0 auto 24px; | |||
line-height:2; | |||
} | |||
.cta-actions{ | |||
display:flex; | |||
flex-direction:column; | |||
gap:11px; | |||
justify-content:center; | |||
} | |||
/* ========================================================= | |||
FOOTER | |||
========================================================= */ | |||
.footer{ | |||
background:#0b0a08; | |||
color:#fff; | |||
padding:45px 0 90px; | |||
border-top:1px solid var(--border); | |||
} | |||
.footer-grid{ | |||
display:grid; | |||
grid-template-columns:1fr; | |||
gap:28px; | |||
} | |||
.footer h3{ | |||
color:var(--gold-light); | |||
font-family: | |||
"Lalezar", | |||
"Vazirmatn", | |||
sans-serif; | |||
font-size:1.25rem; | |||
font-weight:400; | |||
margin-bottom:10px; | |||
} | |||
.footer p, | |||
.footer li{ | |||
color:#908779; | |||
font-size:.8rem; | |||
line-height:2; | |||
} | |||
.footer ul{ | |||
list-style:none; | |||
display:grid; | |||
gap:6px; | |||
} | |||
.footer-bottom{ | |||
border-top:1px solid rgba(216,173,69,.12); | |||
margin-top:28px; | |||
padding-top:20px; | |||
text-align:center; | |||
color:#70685b; | |||
font-size:.72rem; | |||
} | |||
/* ========================================================= | |||
MOBILE NAV | |||
========================================================= */ | |||
.mobile-nav{ | |||
position:fixed; | |||
right:0; | |||
left:0; | |||
bottom:0; | |||
height:68px; | |||
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:3px; | |||
color:#91897a; | |||
font-size:.68rem; | |||
font-weight:600; | |||
} | |||
.mobile-nav i{ | |||
font-size:1.05rem; | |||
} | |||
.mobile-nav a.active{ | |||
color:var(--gold-light); | |||
} | |||
/* ========================================================= | |||
TABLET | |||
========================================================= */ | |||
@media (min-width:600px){ | |||
.top-banner{ | |||
padding:14px; | |||
} | |||
.banner-frame{ | |||
min-height:260px; | |||
border-radius:20px; | |||
} | |||
.hero-actions{ | |||
flex-direction:row; | |||
} | |||
.btn{ | |||
min-width:155px; | |||
} | |||
.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:90px 0; | |||
} | |||
.banner-frame{ | |||
min-height:320px; | |||
max-height:600px; | |||
} | |||
.desktop-menu{ | |||
display:flex; | |||
align-items:center; | |||
gap:24px; | |||
} | |||
.desktop-menu a{ | |||
color:#c0b7a8; | |||
font-size:.84rem; | |||
font-weight:600; | |||
transition:.2s; | |||
} | |||
.desktop-menu a:hover{ | |||
color:var(--gold-light); | |||
} | |||
.header-button{ | |||
display:inline-flex; | |||
align-items:center; | |||
gap:7px; | |||
padding:9px 14px; | |||
border:1px solid var(--border); | |||
border-radius:10px; | |||
color:var(--gold-light); | |||
font-size:.76rem; | |||
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:290px; | |||
} | |||
.young-grid{ | |||
grid-template-columns: | |||
repeat(4,1fr); | |||
} | |||
.gallery-item{ | |||
height:230px; | |||
} | |||
.gallery-item.large{ | |||
height:310px; | |||
} | |||
.footer-grid{ | |||
grid-template-columns: | |||
1.5fr 1fr 1fr; | |||
} | |||
.footer{ | |||
padding-bottom:45px; | |||
} | |||
.mobile-nav{ | |||
display:none; | |||
} | |||
} | |||
/* ========================================================= | |||
LARGE DESKTOP | |||
========================================================= */ | |||
@media (min-width:1200px){ | |||
.hero h1{ | |||
font-size:5rem; | |||
} | |||
.banner-frame{ | |||
min-height:350px; | |||
} | |||
} | |||
/* ========================================================= | |||
REDUCED MOTION | |||
========================================================= */ | |||
@media (prefers-reduced-motion:reduce){ | |||
html{ | |||
scroll-behavior:auto; | |||
} | |||
*, | |||
*::before, | |||
*::after{ | |||
transition:none !important; | |||
animation:none !important; | |||
} | |||
} | |||
</style> | |||
</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> | |||
<!-- ===================================================== | |||
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> | |||
<!-- ===================================================== | |||
NEW TOP BANNER | |||
===================================================== --> | |||
<section class="top-banner" | |||
aria-label="بنر کافه پاتوق محمد"> | |||
<div class="container"> | |||
<div class="banner-frame"> | |||
<!-- تصویر بنر را اینجا قرار بده --> | |||
<img | |||
src="https://dl.faraghaib.ir/m/260012-01/baner-01.png" | |||
alt="بنر کافه پاتوق محمد" | |||
loading="eager" | |||
> | |||
<div class="banner-overlay"></div> | |||
<div class="banner-caption"> | |||
<i class="fa-solid fa-mug-hot"></i> | |||
کافه پاتوق محمد | |||
</div> | |||
</div> | |||
</div> | |||
</section> | |||
<!-- ===================================================== | |||
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="https://dl.faraghaib.ir/m/260012-01/260012-01-04.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="https://dl.faraghaib.ir/m/260012-01/260012-01-04.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="https://dl.faraghaib.ir/m/260012-01/260012-01-04.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> | |||
اینجا را باید دید! | |||
</h2> | |||
<p> | |||
تصاویر واقعی فضای کافه، غذاها و دورهمیها را | |||
در این قسمت قرار بده تا صفحه شخصیت بیشتری پیدا کند. | |||
</p> | |||
</div> | |||
<div class="gallery-grid"> | |||
<div class="gallery-item large"> | |||
<img | |||
src="https://dl.faraghaib.ir/m/260012-01/260012-01-04.jpg" | |||
alt="فضای داخلی کافه پاتوق محمد" | |||
loading="lazy" | |||
> | |||
<span class="gallery-label"> | |||
فضای پاتوق | |||
</span> | |||
</div> | |||
<div class="gallery-item"> | |||
<img | |||
src="https://dl.faraghaib.ir/m/260012-01/260012-01-04.jpg" | |||
alt="فضای سنتی کافه پاتوق محمد" | |||
loading="lazy" | |||
> | |||
<span class="gallery-label"> | |||
حال خوب | |||
</span> | |||
</div> | |||
<div class="gallery-item"> | |||
<img | |||
src="https://dl.faraghaib.ir/m/260012-01/260012-01-04.jpg" | |||
alt="چای تازه دم کافه پاتوق محمد" | |||
loading="lazy" | |||
> | |||
<span class="gallery-label"> | |||
چای تازهدم | |||
</span> | |||
</div> | |||
<div class="gallery-item"> | |||
<img | |||
src="https://dl.faraghaib.ir/m/260012-01/260012-01-04.jpg" | |||
alt="دورهمی دوستان در کافه پاتوق محمد" | |||
loading="lazy" | |||
> | |||
<span class="gallery-label"> | |||
دورهمی | |||
</span> | |||
</div> | |||
<div class="gallery-item"> | |||
<img | |||
src="https://dl.faraghaib.ir/m/260012-01/260012-01-04.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> | |||