فراغیب

تست۳: تفاوت میان نسخه‌ها

→ تفاوت با ویرایش قدیمی‌تر
دیداریویکی‌متن
بدون خلاصۀ ویرایش
بدون خلاصۀ ویرایش
 
خط ۶: خط ۶:
<meta charset="UTF-8">
<meta charset="UTF-8">


<meta name="viewport"
<meta name="viewport" content="width=device-width, initial-scale=1.0">
      content="width=device-width, initial-scale=1.0">


<title>کافه پاتوق محمد | قهوه خانه سنتی و پاتوق جوان‌ها</title>
<title>کافه پاتوق محمد | قهوه خانه سنتی و پاتوق جوان‌ها</title>
خط ۱۴: خط ۱۳:
content="کافه پاتوق محمد؛ قهوه خانه سنتی با چای، املت، عدسی، صبحانه و عصرانه. جایی برای دورهمی، گپ دوستانه، صبحانه و یک عصر خوب.">
content="کافه پاتوق محمد؛ قهوه خانه سنتی با چای، املت، عدسی، صبحانه و عصرانه. جایی برای دورهمی، گپ دوستانه، صبحانه و یک عصر خوب.">


<meta name="robots"
<meta name="robots" content="index, follow">
content="index, follow">


<link rel="preconnect"
<link rel="preconnect" href="https://fonts.googleapis.com">
      href="https://fonts.googleapis.com">


<link rel="preconnect"
<link rel="preconnect"
خط ۳۵: خط ۳۲:
/* =========================================================
/* =========================================================
   PATOGH MOHAMMAD
   PATOGH MOHAMMAD
   TRADITIONAL CAFE / TEA HOUSE
   TRADITIONAL CAFE
   MOBILE FIRST
   MOBILE FIRST
========================================================= */
========================================================= */
خط ۶۰: خط ۵۷:


     --text:#29231b;
     --text:#29231b;
     --muted:#827762;
     --muted:#716656;


     --border:rgba(216,173,69,.28);
     --border:rgba(216,173,69,.28);
خط ۱۰۲: خط ۹۹:


     overflow-x:hidden;
     overflow-x:hidden;
    font-size:16px;
}
}


خط ۱۱۸: خط ۱۱۷:


     color:inherit;
     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;
}
}


خط ۱۵۶: خط ۱۳۶:
.section{
.section{


     padding:55px 0;
     padding:60px 0;


     position:relative;
     position:relative;
خط ۱۶۵: خط ۱۴۵:
     text-align:center;
     text-align:center;


     margin-bottom:32px;
     margin-bottom:34px;


     position:relative;
     position:relative;
خط ۱۷۶: خط ۱۵۶:
     color:var(--gold);
     color:var(--gold);


     font-size:.78rem;
     font-size:.92rem;


     font-weight:800;
     font-weight:800;


    letter-spacing:.5px;
     margin-bottom:6px;
 
     margin-bottom:5px;
}
}


خط ۱۹۰: خط ۱۶۸:


     font-size:
     font-size:
         clamp(1.7rem,6vw,2.5rem);
         clamp(1.8rem,6vw,2.6rem);


     line-height:1.4;
     line-height:1.45;


     font-family:"Lalezar","Vazirmatn",sans-serif;
     font-family:
        "Lalezar",
        "Vazirmatn",
        sans-serif;


     font-weight:400;
     font-weight:400;
خط ۲۰۱: خط ۱۸۲:
.section-title p{
.section-title p{


     max-width:650px;
     max-width:700px;


     margin:8px auto 0;
     margin:10px auto 0;


     color:var(--muted);
     color:var(--muted);


     font-size:.88rem;
     font-size:1rem;
 
    line-height:2;
}
}


خط ۲۲۳: خط ۲۰۶:
     border-bottom:1px solid var(--border);
     border-bottom:1px solid var(--border);


     padding:7px 0;
     padding:8px 0;


     font-size:.7rem;
     font-size:.82rem;


     text-align:center;
     text-align:center;
    letter-spacing:.2px;
}
}


خط ۲۴۷: خط ۲۲۸:


     background:
     background:
         linear-gradient(
         linear-gradient(
             180deg,
             180deg,
خط ۲۷۰: خط ۲۵۰:
.header-inner{
.header-inner{


     min-height:72px;
     min-height:74px;


     display:flex;
     display:flex;
خط ۲۹۲: خط ۲۷۲:
.brand-icon{
.brand-icon{


     width:44px;
     width:46px;


     height:44px;
     height:46px;


     border-radius:50%;
     border-radius:50%;
خط ۳۰۶: خط ۲۸۶:
     place-items:center;
     place-items:center;


     font-size:1.1rem;
     font-size:1.15rem;
 
    box-shadow:
        inset 0 0 0 4px rgba(216,173,69,.08);
}
}


خط ۳۱۸: خط ۲۹۵:
     flex-direction:column;
     flex-direction:column;


     line-height:1.25;
     line-height:1.3;
}
}


.brand-name strong{
.brand-name strong{


     font-family:"Lalezar","Vazirmatn",sans-serif;
     font-family:
 
        "Lalezar",
        "Vazirmatn",
        sans-serif;
 
     color:var(--gold-light);
     color:var(--gold-light);


     font-size:1.25rem;
     font-size:1.35rem;


     font-weight:400;
     font-weight:400;
خط ۳۳۶: خط ۳۱۶:
     color:#aaa092;
     color:#aaa092;


     font-size:.62rem;
     font-size:.72rem;
}
}


خط ۳۵۱: خط ۳۳۱:


/* =========================================================
/* =========================================================
   HERO
   BANNER
========================================================= */
========================================================= */


.hero{
.top-banner{
 
    background:#080807;
 
    padding:10px;


     position:relative;
     border-bottom:1px solid var(--border);
}


    min-height:650px;
.banner-frame{


     color:#fff;
     width:100%;


     background:
     max-width:1500px;


        linear-gradient(
    margin:auto;
            90deg,
            rgba(0,0,0,.92),
            rgba(0,0,0,.63),
            rgba(0,0,0,.78)
        ),


        url("IMAGE-HERO.jpg");
    min-height:220px;


     background-size:cover;
     max-height:520px;


     background-position:center;
     border-radius:18px;


     overflow:hidden;
     overflow:hidden;
}


    background:#11100e;


/* Decorative golden lines */
    display:flex;


.hero::before{
    align-items:center;


     content:"";
     justify-content:center;


     position:absolute;
    box-shadow:
        0 8px 30px rgba(0,0,0,.25);
 
     position:relative;
}
 
.banner-frame img{


     width:180px;
     width:100%;


     height:180px;
     height:auto;


     border:1px solid rgba(216,173,69,.3);
     max-height:520px;


     border-radius:50%;
     object-fit:contain;


     left:-80px;
     object-position:center;


     top:-70px;
     display:block;
}
}


.hero::after{
.banner-overlay{
 
    content:"";


     position:absolute;
     position:absolute;


     width:250px;
     inset:0;


     height:250px;
     pointer-events:none;


     border:1px solid rgba(216,173,69,.12);
     border:1px solid rgba(216,173,69,.35);


     border-radius:50%;
     border-radius:18px;
}


    right:-110px;
.banner-caption{


     bottom:-100px;
     position:absolute;
}


.hero-inner{
    right:18px;


     min-height:650px;
     bottom:18px;


     display:grid;
     background:rgba(10,9,7,.82);


     grid-template-columns:1fr;
     color:var(--gold-light);
 
    border:1px solid var(--border);


     align-items:center;
     border-radius:10px;


     padding:55px 0;
     padding:7px 12px;


     position:relative;
     font-size:.78rem;


     z-index:2;
     font-weight:700;
}
}


.hero-content{


    max-width:720px;
/* =========================================================
}
  HERO
========================================================= */


.hero-stamp{
.hero{


     width:78px;
     position:relative;


     height:78px;
     min-height:650px;


     border:2px solid var(--gold);
     color:#fff;


     border-radius:50%;
     background:


    display:flex;
        linear-gradient(
            90deg,
            rgba(0,0,0,.92),
            rgba(0,0,0,.63),
            rgba(0,0,0,.78)
        ),


    align-items:center;
        url("IMAGE-HERO.jpg");


     justify-content:center;
     background-size:cover;


     text-align:center;
     background-position:center;


     color:var(--gold-light);
     overflow:hidden;
}


    font-size:.62rem;
.hero::before{


     font-weight:800;
     content:"";


     transform:rotate(-8deg);
     position:absolute;


     margin-bottom:18px;
     width:180px;
}


.hero h1{
    height:180px;


     font-family:
     border:1px solid rgba(216,173,69,.3);
        "Lalezar",
        "Vazirmatn",
        sans-serif;


     font-weight:400;
     border-radius:50%;


     font-size:
     left:-80px;
        clamp(2.5rem,11vw,5rem);


     line-height:1.15;
     top:-70px;
 
    color:#fff;
 
    margin-bottom:12px;
}
}


.hero h1 span{
.hero::after{


     color:var(--gold-light);
     content:"";
}


.hero-subtitle{
    position:absolute;


     font-size:
     width:250px;
        clamp(1rem,4vw,1.25rem);
 
    height:250px;
 
    border:1px solid rgba(216,173,69,.12);
 
    border-radius:50%;


     color:#ddd2bd;
     right:-110px;


     margin-bottom:20px;
     bottom:-100px;
}
}


.hero-description{
.hero-inner{
 
    min-height:650px;


     color:#bcb5a7;
     display:grid;


     font-size:.88rem;
     grid-template-columns:1fr;


     max-width:600px;
     align-items:center;


     margin-bottom:25px;
     padding:55px 0;
}


.hero-actions{
    position:relative;


     display:flex;
     z-index:2;
}


    flex-direction:column;
.hero-content{


     gap:10px;
     max-width:720px;
}
}


.btn{
.hero-stamp{


     min-height:50px;
     width:82px;


     padding:10px 20px;
     height:82px;


     border-radius:12px;
     border:2px solid var(--gold);


     display:inline-flex;
    border-radius:50%;
 
     display:flex;


     align-items:center;
     align-items:center;
خط ۵۴۰: خط ۵۳۱:
     justify-content:center;
     justify-content:center;


     gap:8px;
     text-align:center;
 
    color:var(--gold-light);


     font-size:.88rem;
     font-size:.72rem;


     font-weight:800;
     font-weight:800;


     transition:.25s ease;
     transform:rotate(-8deg);
 
    margin-bottom:20px;
}
}


.btn-gold{
.hero h1{


     background:var(--gold);
     font-family:
        "Lalezar",
        "Vazirmatn",
        sans-serif;


     color:var(--black);
     font-weight:400;


     box-shadow:
     font-size:
         0 8px 25px rgba(216,173,69,.22);
         clamp(2.6rem,11vw,5rem);
}


.btn-gold:hover{
    line-height:1.2;


     background:var(--gold-light);
     color:#fff;


     transform:translateY(-2px);
     margin-bottom:14px;
}
}


.btn-outline{
.hero h1 span{
 
    border:1px solid rgba(216,173,69,.5);


     color:var(--gold-light);
     color:var(--gold-light);
}


    background:rgba(0,0,0,.2);
.hero-subtitle{
}


    font-size:
        clamp(1.05rem,4vw,1.3rem);


/* =========================================================
    color:#ddd2bd;
  HERO SIDE NOTES
========================================================= */


.hero-notes{
    margin-bottom:20px;


     display:none;
     font-weight:600;
}
}


.hero-note{
.hero-description{


     position:absolute;
     color:#c5bdaf;


     background:rgba(18,16,12,.85);
     font-size:1rem;


     border:1px solid var(--border);
     max-width:620px;


     padding:10px 13px;
     margin-bottom:28px;


     border-radius:12px;
     line-height:2;
}


    color:var(--gold-light);
.hero-actions{


     font-size:.7rem;
     display:flex;
}


    flex-direction:column;


/* =========================================================
    gap:11px;
  MARQUEE-LIKE STATIC STRIP
}
========================================================= */


.ribbon{
.btn{


     background:var(--gold);
     min-height:52px;


     color:var(--black);
     padding:11px 21px;


     padding:9px 0;
     border-radius:12px;


     overflow:hidden;
     display:inline-flex;
 
    border-top:3px solid var(--black);
 
    border-bottom:3px solid var(--black);
}
 
.ribbon-inner{
 
    display:flex;


     align-items:center;
     align-items:center;
خط ۶۳۰: خط ۶۱۶:
     justify-content:center;
     justify-content:center;


     flex-wrap:wrap;
     gap:8px;


     gap:15px;
     font-size:.92rem;


     font-weight:800;
     font-weight:800;


     font-size:.72rem;
     transition:.25s ease;
}
}


.ribbon span::before{
.btn-gold{
 
    background:var(--gold);


     content:"✦";
     color:var(--black);


     margin-left:8px;
     box-shadow:
        0 8px 25px rgba(216,173,69,.22);
}
}


.btn-gold:hover{


/* =========================================================
    background:var(--gold-light);
  VIBE CARDS
========================================================= */


.vibe{
    transform:translateY(-2px);
}


    background:
.btn-outline{
        var(--black-2);


     color:#fff;
    border:1px solid rgba(216,173,69,.5);
 
     color:var(--gold-light);


     overflow:hidden;
     background:rgba(0,0,0,.2);
}
}


.vibe .section-title h2{


    color:#fff;
/* =========================================================
}
  HERO NOTES
========================================================= */


.vibe .section-title p{
.hero-notes{


     color:#aaa397;
     display:none;
}
}


.vibe-grid{
.hero-note{


     display:grid;
     position:absolute;


     grid-template-columns:
     background:rgba(18,16,12,.85);
        repeat(2,1fr);


     gap:10px;
     border:1px solid var(--border);
}


.vibe-card{
    padding:11px 14px;


     min-height:155px;
     border-radius:12px;


     border:1px solid var(--border);
     color:var(--gold-light);


     border-radius:16px;
     font-size:.76rem;
}


    padding:18px 13px;


    background:
/* =========================================================
        linear-gradient(
  RIBBON
            145deg,
========================================================= */
            #242018,
            #14130f
        );


    position:relative;
.ribbon{


     overflow:hidden;
     background:var(--gold);
}


.vibe-card::after{
    color:var(--black);


     content:"";
     padding:10px 0;


     position:absolute;
     border-top:3px solid var(--black);


     width:75px;
     border-bottom:3px solid var(--black);
}


    height:75px;
.ribbon-inner{


     border:1px solid rgba(216,173,69,.12);
     display:flex;


     border-radius:50%;
     align-items:center;


     left:-25px;
     justify-content:center;


     bottom:-25px;
     flex-wrap:wrap;
}


.vibe-icon{
    gap:15px;


    color:var(--gold);
     font-weight:800;
 
     font-size:1.5rem;


     margin-bottom:10px;
     font-size:.82rem;
}
}


.vibe-card h3{
.ribbon span::before{


     color:#fff;
     content:"✦";


    font-size:.92rem;
     margin-left:8px;
 
     margin-bottom:3px;
}
 
.vibe-card p{
 
    color:#918a7d;
 
    font-size:.7rem;
}
}




/* =========================================================
/* =========================================================
   MENU
   VIBE
========================================================= */
========================================================= */


.menu-section{
.vibe{


     background:
     background:var(--black-2);


        linear-gradient(
    color:#fff;
            rgba(244,234,212,.95),
            rgba(244,234,212,.95)
        ),


        url("IMAGE-TEXTURE.jpg");
     overflow:hidden;
 
     background-size:cover;
}
}


.menu-board{
.vibe .section-title h2{
 
    background:
        #171510;


     color:#fff;
     color:#fff;
}


    border:
.vibe .section-title p{
        5px solid #9a7039;


     outline:
     color:#aaa397;
        1px solid var(--gold);
}


    outline-offset:-10px;
.vibe-grid{


     border-radius:8px;
     display:grid;


     padding:35px 18px;
     grid-template-columns:
        repeat(2,1fr);


     box-shadow:
     gap:12px;
        0 15px 40px rgba(0,0,0,.25);
}
}


.menu-board-title{
.vibe-card{
 
    min-height:175px;


     text-align:center;
     border:1px solid var(--border);


     color:var(--gold-light);
     border-radius:16px;


     font-family:"Lalezar","Vazirmatn",sans-serif;
     padding:20px 15px;


     font-size:2rem;
     background:
        linear-gradient(
            145deg,
            #242018,
            #14130f
        );


     font-weight:400;
     position:relative;


     margin-bottom:25px;
     overflow:hidden;
}
}


.menu-grid{
.vibe-icon{


     display:grid;
     color:var(--gold);


     grid-template-columns:1fr;
     font-size:1.6rem;


     gap:12px;
     margin-bottom:11px;
}
}


.menu-item{
.vibe-card h3{


     display:grid;
     color:#fff;


     grid-template-columns:
     font-size:1rem;
        50px 1fr auto;


     gap:10px;
     margin-bottom:5px;
}


     align-items:center;
.vibe-card p{
 
     color:#aaa194;


     padding:12px 8px;
     font-size:.82rem;


     border-bottom:
     line-height:1.9;
        1px dashed rgba(216,173,69,.25);
}
}


.menu-item:last-child{


    border-bottom:0;
/* =========================================================
}
  MENU
========================================================= */


.menu-icon{
.menu-section{


     width:42px;
     background:var(--cream);
}


    height:42px;
.menu-board{
 
    border-radius:50%;


     border:1px solid var(--gold);
     background:#171510;


     display:grid;
     color:#fff;


     place-items:center;
     border:5px solid #9a7039;


     color:var(--gold-light);
     outline:1px solid var(--gold);
}


.menu-item h3{
    outline-offset:-10px;


     color:#fff;
     border-radius:8px;


     font-size:.92rem;
     padding:38px 18px;


     margin-bottom:2px;
     box-shadow:
        0 15px 40px rgba(0,0,0,.25);
}
}


.menu-item p{
.menu-board-title{


     color:#8f897d;
     text-align:center;


     font-size:.68rem;
     color:var(--gold-light);
}


.menu-price{
    font-family:
        "Lalezar",
        "Vazirmatn",
        sans-serif;


     color:var(--gold-light);
     font-size:2.2rem;


     font-size:.75rem;
     font-weight:400;
 
    white-space:nowrap;


     font-weight:800;
     margin-bottom:28px;
}
}


.menu-note{
.menu-grid{


     text-align:center;
     display:grid;


     color:#827b6e;
     grid-template-columns:1fr;


     font-size:.7rem;
     gap:12px;
 
    margin-top:20px;
}
}


.menu-item{


/* =========================================================
    display:grid;
  FEATURED BREAKFAST
========================================================= */


.breakfast{
    grid-template-columns:
        50px 1fr auto;


     background:var(--black);
     gap:11px;


     color:#fff;
     align-items:center;
}


.breakfast-grid{
    padding:14px 8px;


     display:grid;
     border-bottom:
        1px dashed rgba(216,173,69,.25);
}
 
.menu-icon{


     grid-template-columns:1fr;
     width:44px;


     gap:15px;
     height:44px;
}


.food-card{
    border-radius:50%;


     border-radius:18px;
     border:1px solid var(--gold);


     overflow:hidden;
     display:grid;


     border:1px solid var(--border);
     place-items:center;


     background:#1c1a15;
     color:var(--gold-light);


     box-shadow:var(--shadow);
     font-size:1rem;
}
}


.food-image{
.menu-item h3{


     height:220px;
     color:#fff;


     background:#2a261d;
     font-size:1rem;


     display:flex;
     margin-bottom:3px;
}


    align-items:center;
.menu-item p{


     justify-content:center;
     color:#aaa194;


     padding:12px;
     font-size:.78rem;


     overflow:hidden;
     line-height:1.8;
}
}


.food-image img{
.menu-price{


     width:100%;
     color:var(--gold-light);


     height:100%;
     font-size:.8rem;


     object-fit:contain;
     white-space:nowrap;


     object-position:center;
     font-weight:800;
}
}


.food-content{
.menu-note{


     padding:17px;
     text-align:center;
}
 
.food-content h3{


     color:var(--gold-light);
     color:#938a7b;


     font-size:1rem;
     font-size:.76rem;


     margin-bottom:5px;
     margin-top:22px;
}
 
.food-content p{
 
    color:#999184;
 
    font-size:.75rem;
}
}




/* =========================================================
/* =========================================================
   YOUNG PEOPLE SECTION
   BREAKFAST
========================================================= */
========================================================= */


.young{
.breakfast{


     background:
     background:var(--black);
        var(--cream);


     position:relative;
     color:#fff;
}
}


.young-grid{
.breakfast-grid{


     display:grid;
     display:grid;
خط ۹۹۲: خط ۹۵۴:
     grid-template-columns:1fr;
     grid-template-columns:1fr;


     gap:15px;
     gap:16px;
}
}


.young-card{
.food-card{
 
    background:#fff;
 
    border:1px solid rgba(104,75,46,.15);


     border-radius:18px;
     border-radius:18px;


     padding:22px 18px;
     overflow:hidden;


     position:relative;
     border:1px solid var(--border);


     box-shadow:
     background:#1c1a15;
        0 7px 25px rgba(75,53,32,.08);


     overflow:hidden;
     box-shadow:var(--shadow);
}
}


.young-card::before{
.food-image{


     content:"";
     height:240px;


     position:absolute;
     background:#2a261d;


     width:80px;
     display:flex;


     height:80px;
     align-items:center;


     border-radius:50%;
     justify-content:center;


     background:rgba(216,173,69,.10);
     padding:12px;


     left:-25px;
     overflow:hidden;
 
    top:-25px;
}
}


.young-card i{
.food-image img{


     font-size:1.45rem;
     width:100%;


     color:var(--brown);
     height:100%;


     margin-bottom:10px;
     object-fit:contain;
 
    object-position:center;
}
}


.young-card h3{
.food-content{
 
    padding:19px;
}
 
.food-content h3{


     color:var(--black);
     color:var(--gold-light);


     font-size:.98rem;
     font-size:1.05rem;


     margin-bottom:5px;
     margin-bottom:6px;
}
}


.young-card p{
.food-content p{
 
    color:#a59c8e;


     color:var(--muted);
     font-size:.82rem;


     font-size:.76rem;
     line-height:1.9;
}
}




/* =========================================================
/* =========================================================
   QUOTE
   YOUNG PEOPLE
========================================================= */
========================================================= */


.quote-section{
.young{


     background:
     background:var(--cream);
        linear-gradient(
            135deg,
            #171510,
            #2b2418
        );


     color:#fff;
     position:relative;
}


    text-align:center;
.young-grid{


     padding:65px 20px;
     display:grid;


     position:relative;
     grid-template-columns:1fr;


     overflow:hidden;
     gap:16px;
}
}


.quote-section::before{
.young-card{


     content:"«";
     background:#fff;


     position:absolute;
     border:1px solid rgba(104,75,46,.15);


     font-family:Georgia,serif;
     border-radius:18px;


     font-size:15rem;
     padding:25px 19px;


     color:rgba(216,173,69,.06);
     position:relative;


     top:-100px;
     box-shadow:
        0 7px 25px rgba(75,53,32,.08);


     right:5%;
     overflow:hidden;
}
}


.quote-section blockquote{
.young-card i{


     position:relative;
     font-size:1.55rem;


     max-width:800px;
     color:var(--brown);


     margin:auto;
     margin-bottom:11px;
}


    color:var(--gold-light);
.young-card h3{


     font-family:"Lalezar","Vazirmatn",sans-serif;
     color:var(--black);


     font-size:
     font-size:1.03rem;
        clamp(1.5rem,6vw,2.6rem);


     line-height:1.6;
     margin-bottom:6px;
}
}


.quote-author{
.young-card p{


     margin-top:10px;
     color:var(--muted);


     color:#958c7c;
     font-size:.82rem;


     font-size:.75rem;
     line-height:2;
}
}




/* =========================================================
/* =========================================================
   PHOTO WALL
   QUOTE
========================================================= */
========================================================= */


.gallery{
.quote-section{


     background:var(--black-2);
     background:
 
        linear-gradient(
     color:#fff;
            135deg,
}
            #171510,
            #2b2418
        );
 
     color:#fff;


.gallery-grid{
    text-align:center;


     display:grid;
     padding:70px 20px;


     grid-template-columns:
     position:relative;
        repeat(2,1fr);


     gap:8px;
     overflow:hidden;
}
}


.gallery-item{
.quote-section blockquote{
 
    position:relative;


     height:170px;
     max-width:800px;


     border-radius:12px;
     margin:auto;


     overflow:hidden;
     color:var(--gold-light);


     background:#29251e;
     font-family:
        "Lalezar",
        "Vazirmatn",
        sans-serif;


     border:1px solid var(--border);
     font-size:
        clamp(1.65rem,6vw,2.7rem);


     position:relative;
     line-height:1.65;
}
}


.gallery-item.large{
.quote-author{


     grid-column:span 2;
     margin-top:12px;


     height:210px;
     color:#a09685;
 
    font-size:.8rem;
}
}


.gallery-item img{


    width:100%;
/* =========================================================
  GALLERY
========================================================= */


    height:100%;
.gallery{


     object-fit:cover;
     background:var(--black-2);


     object-position:center;
     color:#fff;
}
}


.gallery-label{
.gallery .section-title h2{


     position:absolute;
     color:#fff;
}


    bottom:7px;
.gallery .section-title p{


     right:7px;
     color:#aaa194;
}


    background:rgba(0,0,0,.75);
.gallery-grid{


     color:var(--gold-light);
     display:grid;


     border:1px solid var(--border);
     grid-template-columns:
        repeat(2,1fr);


     padding:3px 8px;
     gap:9px;
}


    border-radius:7px;
.gallery-item{


     font-size:.6rem;
     height:180px;
}


    border-radius:12px;


/* =========================================================
    overflow:hidden;
  SOCIAL
========================================================= */


.social{
    background:#29251e;


     background:var(--cream);
     border:1px solid var(--border);


     text-align:center;
     position:relative;
}
}


.social-box{
.gallery-item.large{


     background:#fff;
     grid-column:span 2;


     border:1px solid rgba(104,75,46,.18);
     height:220px;
 
    border-radius:22px;
 
    padding:30px 18px;
 
    box-shadow:
        0 8px 30px rgba(0,0,0,.07);
}
}


.social-icons{
.gallery-item img{


     display:flex;
     width:100%;


     justify-content:center;
     height:100%;


     gap:10px;
     object-fit:cover;


     margin-top:18px;
     object-position:center;
}
}


.social-icons a{
.gallery-label{


     width:45px;
     position:absolute;
 
    height:45px;
 
    border-radius:50%;


     display:grid;
     bottom:8px;


     place-items:center;
     right:8px;


     background:var(--black);
     background:rgba(0,0,0,.78);


     color:var(--gold-light);
     color:var(--gold-light);
خط ۱٬۲۵۷: خط ۱٬۲۲۱:
     border:1px solid var(--border);
     border:1px solid var(--border);


     transition:.2s;
     padding:4px 9px;
}


.social-icons a:hover{
    border-radius:7px;


     background:var(--gold);
     font-size:.68rem;
 
    color:var(--black);
}
}




/* =========================================================
/* =========================================================
   CTA
   SOCIAL
========================================================= */
========================================================= */


.cta{
.social{


     background:
     background:var(--cream);


        linear-gradient(
    text-align:center;
            rgba(12,11,9,.93),
}
            rgba(12,11,9,.93)
        ),


        url("IMAGE-CAFE.jpg");
.social-box{


     background-size:cover;
     background:#fff;


     background-position:center;
     border:1px solid rgba(104,75,46,.18);


     color:#fff;
     border-radius:22px;


     text-align:center;
     padding:32px 18px;


     padding:70px 15px;
     box-shadow:
        0 8px 30px rgba(0,0,0,.07);
}
}


.cta h2{
.social-icons{


     font-family:"Lalezar","Vazirmatn",sans-serif;
     display:flex;


     color:var(--gold-light);
     justify-content:center;


     font-size:
     gap:11px;
        clamp(2rem,8vw,3rem);


    font-weight:400;
     margin-top:20px;
 
     margin-bottom:8px;
}
}


.cta p{
.social-icons a{


     color:#bcb4a6;
     width:47px;


     font-size:.85rem;
     height:47px;


     max-width:600px;
     border-radius:50%;


     margin:0 auto 20px;
     display:grid;
}


.cta-actions{
    place-items:center;


     display:flex;
     background:var(--black);


     flex-direction:column;
     color:var(--gold-light);


     gap:10px;
     border:1px solid var(--border);
 
    justify-content:center;
}
}




/* =========================================================
/* =========================================================
   FOOTER
   CTA
========================================================= */
========================================================= */


.footer{
.cta{


     background:#0b0a08;
     background:


    color:#fff;
        linear-gradient(
            rgba(12,11,9,.93),
            rgba(12,11,9,.93)
        ),


    padding:40px 0 85px;
        url("IMAGE-CAFE.jpg");


     border-top:1px solid var(--border);
     background-size:cover;
}


.footer-grid{
    background-position:center;


     display:grid;
     color:#fff;


     grid-template-columns:1fr;
     text-align:center;


     gap:25px;
     padding:75px 15px;
}
}


.footer h3{
.cta h2{
 
    font-family:
        "Lalezar",
        "Vazirmatn",
        sans-serif;


     color:var(--gold-light);
     color:var(--gold-light);


     font-family:"Lalezar","Vazirmatn",sans-serif;
     font-size:
 
        clamp(2.1rem,8vw,3.2rem);
    font-size:1.15rem;


     font-weight:400;
     font-weight:400;


     margin-bottom:8px;
     margin-bottom:10px;
}
}


.footer p,
.cta p{
.footer li{


     color:#817a6e;
     color:#c0b8aa;


     font-size:.72rem;
     font-size:.92rem;
}


.footer ul{
    max-width:650px;


     list-style:none;
     margin:0 auto 24px;


     display:grid;
     line-height:2;
 
    gap:5px;
}
}


.footer-bottom{
.cta-actions{


     border-top:1px solid rgba(216,173,69,.12);
     display:flex;


     margin-top:25px;
     flex-direction:column;


     padding-top:18px;
     gap:11px;


     text-align:center;
     justify-content:center;
 
    color:#625c51;
 
    font-size:.65rem;
}
}




/* =========================================================
/* =========================================================
   MOBILE NAV
   FOOTER
========================================================= */
========================================================= */


.mobile-nav{
.footer{


     position:fixed;
     background:#0b0a08;


     right:0;
     color:#fff;


     left:0;
     padding:45px 0 90px;


     bottom:0;
     border-top:1px solid var(--border);
}


    height:65px;
.footer-grid{


     display:grid;
     display:grid;


     grid-template-columns:
     grid-template-columns:1fr;
        repeat(5,1fr);


     background:#11100e;
     gap:28px;
}


    border-top:1px solid var(--border);
.footer h3{


     z-index:9999;
     color:var(--gold-light);


     box-shadow:
     font-family:
         0 -5px 25px rgba(0,0,0,.3);
         "Lalezar",
}
        "Vazirmatn",
        sans-serif;


.mobile-nav a{
    font-size:1.25rem;


     display:flex;
     font-weight:400;


     flex-direction:column;
     margin-bottom:10px;
}


    align-items:center;
.footer p,
.footer li{


     justify-content:center;
     color:#908779;


     gap:2px;
     font-size:.8rem;


     color:#827b6d;
     line-height:2;
 
    font-size:.59rem;
}
}


.mobile-nav i{
.footer ul{


     font-size:1rem;
     list-style:none;
}


.mobile-nav a.active{
    display:grid;


     color:var(--gold-light);
     gap:6px;
}
}


.footer-bottom{


/* =========================================================
    border-top:1px solid rgba(216,173,69,.12);
  TABLET
========================================================= */


@media (min-width:600px){
    margin-top:28px;


     .hero-actions{
     padding-top:20px;


        flex-direction:row;
    text-align:center;
    }


     .btn{
     color:#70685b;


        min-width:150px;
    font-size:.72rem;
    }
}


    .vibe-grid{


        grid-template-columns:
/* =========================================================
            repeat(4,1fr);
  MOBILE NAV
    }
========================================================= */


    .menu-grid{
.mobile-nav{


        grid-template-columns:
    position:fixed;
            repeat(2,1fr);


        column-gap:30px;
    right:0;
    }


     .breakfast-grid{
     left:0;


        grid-template-columns:
    bottom:0;
            repeat(2,1fr);
    }


     .young-grid{
     height:68px;


        grid-template-columns:
    display:grid;
            repeat(2,1fr);
    }


     .gallery-grid{
     grid-template-columns:
        repeat(5,1fr);


        grid-template-columns:
    background:#11100e;
            repeat(4,1fr);
    }


     .gallery-item.large{
     border-top:1px solid var(--border);


        grid-column:span 2;
    z-index:9999;
    }


     .cta-actions{
     box-shadow:
 
         0 -5px 25px rgba(0,0,0,.3);
         flex-direction:row;
    }
}
}


.mobile-nav a{


/* =========================================================
    display:flex;
  DESKTOP
========================================================= */


@media (min-width:900px){
    flex-direction:column;


     .section{
     align-items:center;


        padding:85px 0;
    justify-content:center;
    }


     .desktop-menu{
     gap:3px;


        display:flex;
    color:#91897a;


        align-items:center;
    font-size:.68rem;


        gap:22px;
    font-weight:600;
    }
}


    .desktop-menu a{
.mobile-nav i{


        color:#bcb4a6;
    font-size:1.05rem;
}


        font-size:.78rem;
.mobile-nav a.active{


        font-weight:600;
    color:var(--gold-light);
}


        transition:.2s;
    }


     .desktop-menu a:hover{
/* =========================================================
  TABLET
========================================================= */
 
@media (min-width:600px){
 
     .top-banner{


         color:var(--gold-light);
         padding:14px;
     }
     }


     .header-button{
     .banner-frame{


         display:inline-flex;
         min-height:260px;


         align-items:center;
         border-radius:20px;
    }


        gap:7px;
    .hero-actions{


         padding:8px 13px;
         flex-direction:row;
    }


        border:1px solid var(--border);
    .btn{


         border-radius:10px;
         min-width:155px;
    }


        color:var(--gold-light);
    .vibe-grid{


         font-size:.7rem;
         grid-template-columns:
 
            repeat(4,1fr);
        font-weight:700;
     }
     }


     .hero-inner{
     .menu-grid{


         min-height:720px;
         grid-template-columns:
            repeat(2,1fr);


         padding:70px 0;
         column-gap:30px;
     }
     }


     .hero-notes{
     .breakfast-grid{


         display:block;
         grid-template-columns:
            repeat(2,1fr);
    }


        position:absolute;
    .young-grid{


         inset:0;
         grid-template-columns:
 
            repeat(2,1fr);
        pointer-events:none;
     }
     }


     .hero-note.note-one{
     .gallery-grid{


         top:22%;
         grid-template-columns:
 
            repeat(4,1fr);
        left:5%;
     }
     }


     .hero-note.note-two{
     .gallery-item.large{


         bottom:20%;
         grid-column:span 2;
 
        left:15%;
     }
     }


     .hero-note.note-three{
     .cta-actions{


         top:30%;
         flex-direction:row;
 
        right:5%;
     }
     }
}


    .menu-board{


        padding:50px 55px;
/* =========================================================
    }
  DESKTOP
========================================================= */
 
@media (min-width:900px){


     .menu-grid{
     .section{


         column-gap:60px;
         padding:90px 0;
     }
     }


     .breakfast-grid{
     .banner-frame{
 
        min-height:320px;


         grid-template-columns:
         max-height:600px;
            repeat(3,1fr);
     }
     }


     .food-image{
     .desktop-menu{


         height:270px;
         display:flex;
    }


    .young-grid{
        align-items:center;


         grid-template-columns:
         gap:24px;
            repeat(4,1fr);
     }
     }


     .gallery-item{
     .desktop-menu a{
 
        color:#c0b7a8;


         height:220px;
         font-size:.84rem;
    }


    .gallery-item.large{
        font-weight:600;


         height:300px;
         transition:.2s;
     }
     }


     .footer-grid{
     .desktop-menu a:hover{


         grid-template-columns:
         color:var(--gold-light);
            1.5fr 1fr 1fr;
     }
     }


     .footer{
     .header-button{
 
        display:inline-flex;


         padding-bottom:40px;
         align-items:center;
    }


    .mobile-nav{
        gap:7px;


         display:none;
         padding:9px 14px;
    }
}


        border:1px solid var(--border);


/* =========================================================
        border-radius:10px;
  LARGE
========================================================= */


@media (min-width:1200px){
        color:var(--gold-light);


    .hero h1{
        font-size:.76rem;


         font-size:5rem;
         font-weight:700;
     }
     }
}


    .hero-inner{


/* =========================================================
        min-height:720px;
  ACCESSIBILITY
========================================================= */


@media (prefers-reduced-motion:reduce){
         padding:70px 0;
 
    html{
         scroll-behavior:auto;
     }
     }


     *,
     .hero-notes{
    *::before,
    *::after{


         transition:none !important;
         display:block;


         animation:none !important;
         position:absolute;
    }
}


</style>
        inset:0;


</head>
        pointer-events:none;
    }


    .hero-note.note-one{


<body>
        top:22%;


        left:5%;
    }


<!-- =====================================================
    .hero-note.note-two{
    TOP STRIP
===================================================== -->


<div class="top-strip">
        bottom:20%;


     <div class="container">
        left:15%;
     }


        <i class="fa-solid fa-mug-hot"></i>
    .hero-note.note-three{


         یه چای، یه گپ، یه پاتوق خوب...
         top:30%;


         <i class="fa-solid fa-mug-saucer"></i>
         right:5%;
    }


     </div>
     .menu-board{


</div>
        padding:50px 55px;
    }


    .menu-grid{


        column-gap:60px;
    }


<!-- =====================================================
    .breakfast-grid{
    HEADER
 
===================================================== -->
        grid-template-columns:
            repeat(3,1fr);
    }


<header class="header">
    .food-image{


     <div class="container header-inner">
        height:290px;
     }


    .young-grid{


         <a href="#home"
         grid-template-columns:
          class="brand">
            repeat(4,1fr);
    }


            <span class="brand-icon">
    .gallery-item{


                <i class="fa-solid fa-mug-hot"></i>
        height:230px;
    }


            </span>
    .gallery-item.large{


            <span class="brand-name">
        height:310px;
    }


                <strong>
    .footer-grid{
                    کافه پاتوق محمد
                </strong>


                <span>
        grid-template-columns:
                    قهوه خانه سنتی و پاتوق دوستانه
            1.5fr 1fr 1fr;
                </span>
    }


            </span>
    .footer{


         </a>
         padding-bottom:45px;
    }


    .mobile-nav{


         <nav class="desktop-menu"
         display:none;
            aria-label="منوی اصلی">
    }
}


            <a href="#menu">
                منو
            </a>


            <a href="#vibe">
/* =========================================================
                حال و هوا
  LARGE DESKTOP
            </a>
========================================================= */


            <a href="#breakfast">
@media (min-width:1200px){
                صبحانه
            </a>


            <a href="#gallery">
    .hero h1{
                فضای کافه
            </a>


            <a href="#contact">
        font-size:5rem;
                تماس
    }
            </a>
 
    .banner-frame{
 
        min-height:350px;
    }
}


        </nav>


/* =========================================================
  REDUCED MOTION
========================================================= */


        <a href="#menu"
@media (prefers-reduced-motion:reduce){
          class="header-button">


            <i class="fa-solid fa-utensils"></i>
    html{
        scroll-behavior:auto;
    }


            دیدن منو
    *,
    *::before,
    *::after{


         </a>
         transition:none !important;


     </div>
        animation:none !important;
     }
}


</header>
</style>


</head>




<main>
<body>




<!-- =====================================================
<!-- =====================================================
     HERO
     TOP STRIP
===================================================== -->
===================================================== -->


<section class="hero"
<div class="top-strip">
         id="home">
 
 
    <div class="container">
     <div class="container hero-inner">
 
 
        <i class="fa-solid fa-mug-hot"></i>
 
 
         <div class="hero-content">
        یه چای، یه گپ، یه پاتوق خوب...
 
 
             <div class="hero-stamp">
        <i class="fa-solid fa-mug-saucer"></i>
 
 
                 پاتوق
    </div>
                 <br>
 
                 محمد
</div>
                 <br>
 
                 ۱۴۰۵
 
 
<!-- =====================================================
             </div>
    HEADER
 
===================================================== -->
 
 
             <h1>
<header class="header">
 
 
                 اینجا فقط
    <div class="container header-inner">
                 <span>
 
                     چای نمی‌خوریم!
        <a href="#home" class="brand">
                 </span>
 
 
            <span class="brand-icon">
             </h1>
 
 
                <i class="fa-solid fa-mug-hot"></i>
 
 
             <div class="hero-subtitle">
            </span>
 
 
                 یه پاتوق برای چای، صبحانه،
            <span class="brand-name">
                 گپ و خاطره ساختیم.
 
 
                <strong>
             </div>
                    کافه پاتوق محمد
 
                </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 class="hero-description">
خط ۱٬۹۰۵: خط ۱٬۹۹۰:


</section>
</section>




خط ۱٬۹۱۶: خط ۲٬۰۰۰:
     <div class="container ribbon-inner">
     <div class="container ribbon-inner">


         <span>
         <span>صبحانه</span>
            صبحانه
        </span>


         <span>
         <span>چای</span>
            چای
        </span>


         <span>
         <span>املت</span>
            املت
        </span>


         <span>
         <span>عدسی</span>
            عدسی
        </span>


         <span>
         <span>عصرانه</span>
            عصرانه
        </span>


         <span>
         <span>دورهمی</span>
            دورهمی
        </span>


     </div>
     </div>


</div>
</div>




خط ۱٬۹۵۴: خط ۲٬۰۲۵:


     <div class="container">
     <div class="container">


         <div class="section-title">
         <div class="section-title">
خط ۲٬۰۵۰: خط ۲٬۱۲۰:


</section>
</section>




خط ۲٬۰۶۱: خط ۲٬۱۳۰:


     <div class="container">
     <div class="container">


         <div class="section-title">
         <div class="section-title">
خط ۲٬۰۷۴: خط ۲٬۱۴۲:


             <p>
             <p>
                 منوی اولیه بر اساس آیتم‌هایی که گفتی طراحی شده
                 منوی اولیه بر اساس آیتم‌های فعلی طراحی شده
                 و می‌توانی نام، توضیحات و قیمت‌ها را تغییر بدهی.
                 و می‌توانی نام، توضیحات و قیمت‌ها را تغییر بدهی.
             </p>
             </p>
خط ۲٬۰۸۲: خط ۲٬۱۵۰:


         <div class="menu-board">
         <div class="menu-board">


             <div class="menu-board-title">
             <div class="menu-board-title">
خط ۲٬۱۰۲: خط ۲٬۱۶۹:
                     <div>
                     <div>


                         <h3>
                         <h3>چای</h3>
                            چای
                        </h3>


                         <p>
                         <p>
خط ۲٬۱۲۷: خط ۲٬۱۹۲:
                     <div>
                     <div>


                         <h3>
                         <h3>املت</h3>
                            املت
                        </h3>


                         <p>
                         <p>
خط ۲٬۱۵۲: خط ۲٬۲۱۵:
                     <div>
                     <div>


                         <h3>
                         <h3>عدسی</h3>
                            عدسی
                        </h3>


                         <p>
                         <p>
خط ۲٬۱۷۷: خط ۲٬۲۳۸:
                     <div>
                     <div>


                         <h3>
                         <h3>صبحانه</h3>
                            صبحانه
                        </h3>


                         <p>
                         <p>
خط ۲٬۲۰۲: خط ۲٬۲۶۱:
                     <div>
                     <div>


                         <h3>
                         <h3>عصرانه</h3>
                            عصرانه
                        </h3>


                         <p>
                         <p>
خط ۲٬۲۲۷: خط ۲٬۲۸۴:
                     <div>
                     <div>


                         <h3>
                         <h3>دورهمی</h3>
                            دورهمی
                        </h3>


                         <p>
                         <p>
خط ۲٬۲۵۹: خط ۲٬۳۱۴:


</section>
</section>




خط ۲٬۲۷۰: خط ۲٬۳۲۴:


     <div class="container">
     <div class="container">


         <div class="section-title">
         <div class="section-title">
خط ۲٬۲۸۳: خط ۲٬۳۳۶:


             <p>
             <p>
                 صبحانه یکی از بخش‌های جذاب برای جذب مشتری‌های جوان،
                 صبحانه، املت و عدسی می‌توانند از جذاب‌ترین
                دانشجوها، کارمندها و دورهمی‌های صبحگاهی است.
                بخش‌های منوی پاتوق برای شروع روز باشند.
             </p>
             </p>


خط ۲٬۲۹۸: خط ۲٬۳۵۱:


                     <img
                     <img
                         src="IMAGE-OMELET.jpg"
                         src="https://dl.faraghaib.ir/m/260012-01/260012-01-04.jpg"
                         alt="املت کافه پاتوق محمد"
                         alt="املت کافه پاتوق محمد"
                         loading="lazy"
                         loading="lazy"
خط ۲٬۳۲۵: خط ۲٬۳۷۸:


                     <img
                     <img
                         src="IMAGE-ADASI.jpg"
                         src="https://dl.faraghaib.ir/m/260012-01/260012-01-04.jpg"
                         alt="عدسی صبحانه کافه پاتوق محمد"
                         alt="عدسی صبحانه کافه پاتوق محمد"
                         loading="lazy"
                         loading="lazy"
خط ۲٬۳۵۲: خط ۲٬۴۰۵:


                     <img
                     <img
                         src="IMAGE-BREAKFAST.jpg"
                         src="https://dl.faraghaib.ir/m/260012-01/260012-01-04.jpg"
                         alt="صبحانه سنتی کافه پاتوق محمد"
                         alt="صبحانه سنتی کافه پاتوق محمد"
                         loading="lazy"
                         loading="lazy"
خط ۲٬۳۷۹: خط ۲٬۴۳۲:


</section>
</section>




خط ۲٬۳۸۹: خط ۲٬۴۴۱:


     <div class="container">
     <div class="container">


         <div class="section-title">
         <div class="section-title">
خط ۲٬۴۸۲: خط ۲٬۵۳۳:


</section>
</section>




خط ۲٬۵۰۵: خط ۲٬۵۵۵:


</section>
</section>




<!-- =====================================================
<!-- =====================================================
     GALLERY
     GALLERY
===================================================== -->
===================================================== -->
 
 
<section class="section gallery"
<section class="section gallery"
         id="gallery">
         id="gallery">
 
 
     <div class="container">
     <div class="container">
 
 
 
         <div class="section-title">
         <div class="section-title">
 
 
             <span class="small-title">
             <span class="small-title">
                 قاب‌های پاتوق
                 قاب‌های پاتوق
             </span>
             </span>
 
 
             <h2>
             <h2 style="color:#fff;">
                 اینجا را باید دید!
                 اینجا را باید دید!
             </h2>
             </h2>
خط ۲٬۵۴۲: خط ۲٬۵۹۰:


                 <img
                 <img
                     src="IMAGE-CAFE-1.jpg"
                     src="https://dl.faraghaib.ir/m/260012-01/260012-01-04.jpg"
                     alt="فضای داخلی کافه پاتوق محمد"
                     alt="فضای داخلی کافه پاتوق محمد"
                     loading="lazy"
                     loading="lazy"
خط ۲٬۵۵۷: خط ۲٬۶۰۵:


                 <img
                 <img
                     src="IMAGE-CAFE-2.jpg"
                     src="https://dl.faraghaib.ir/m/260012-01/260012-01-04.jpg"
                     alt="فضای سنتی کافه پاتوق محمد"
                     alt="فضای سنتی کافه پاتوق محمد"
                     loading="lazy"
                     loading="lazy"
خط ۲٬۵۷۲: خط ۲٬۶۲۰:


                 <img
                 <img
                     src="IMAGE-TEA.jpg"
                     src="https://dl.faraghaib.ir/m/260012-01/260012-01-04.jpg"
                     alt="چای تازه دم کافه پاتوق محمد"
                     alt="چای تازه دم کافه پاتوق محمد"
                     loading="lazy"
                     loading="lazy"
خط ۲٬۵۸۷: خط ۲٬۶۳۵:


                 <img
                 <img
                     src="IMAGE-FRIENDS.jpg"
                     src="https://dl.faraghaib.ir/m/260012-01/260012-01-04.jpg"
                     alt="دورهمی دوستان در کافه پاتوق محمد"
                     alt="دورهمی دوستان در کافه پاتوق محمد"
                     loading="lazy"
                     loading="lazy"
خط ۲٬۶۰۲: خط ۲٬۶۵۰:


                 <img
                 <img
                     src="IMAGE-BREAKFAST-2.jpg"
                     src="https://dl.faraghaib.ir/m/260012-01/260012-01-04.jpg"
                     alt="صبحانه سنتی در کافه پاتوق محمد"
                     alt="صبحانه سنتی در کافه پاتوق محمد"
                     loading="lazy"
                     loading="lazy"
خط ۲٬۶۱۹: خط ۲٬۶۶۷:


</section>
</section>




خط ۲٬۶۲۹: خط ۲٬۶۷۶:


     <div class="container">
     <div class="container">


         <div class="social-box">
         <div class="social-box">
خط ۲٬۶۸۲: خط ۲٬۷۲۸:


</section>
</section>




خط ۲٬۷۳۴: خط ۲٬۷۷۹:


</main>
</main>




خط ۲٬۷۴۴: خط ۲٬۷۸۸:


     <div class="container">
     <div class="container">


         <div class="footer-grid">
         <div class="footer-grid">
خط ۲٬۷۷۲: خط ۲٬۸۱۵:
                 <ul>
                 <ul>


                     <li>
                     <li>چای</li>
                        چای
                    </li>


                     <li>
                     <li>املت</li>
                        املت
                    </li>


                     <li>
                     <li>عدسی</li>
                        عدسی
                    </li>


                     <li>
                     <li>صبحانه</li>
                        صبحانه
                    </li>


                     <li>
                     <li>عصرانه</li>
                        عصرانه
                    </li>


                 </ul>
                 </ul>
خط ۲٬۸۳۷: خط ۲٬۸۷۰:


</footer>
</footer>




خط ۲٬۸۴۶: خط ۲٬۸۷۸:
<nav class="mobile-nav"
<nav class="mobile-nav"
     aria-label="منوی موبایل">
     aria-label="منوی موبایل">


     <a href="#home"
     <a href="#home"
خط ۲٬۸۹۲: خط ۲٬۹۲۳:


     </a>
     </a>


</nav>
</nav>
برگرفته از «https://fa.faraghaib.ir/wiki/تست۳»