پرش به محتوا

لایه شفاف روی عکس/کافه محمد - فراغیب

از فراغیب
→ تفاوت با ویرایش قدیمی‌ترتفاوت با ویرایش جدیدتر ←
دیداریویکی‌متن
بدون خلاصۀ ویرایش
بدون خلاصۀ ویرایش
خط ۱: خط ۱:
<html>
<html>


<!-- پس زمینه -->
<section class="hero-banner">
<div class="hero-bg"></div>


<!-- لایه رنگی -->
    <!-- پس زمینه -->
<div class="hero-overlay"></div>
    <div class="hero-bg"></div>


<!-- محتوا -->
    <!-- لایه رنگی -->
<div class="hero-wrapper">
    <div class="hero-overlay"></div>


    <!-- محتوا -->
    <div class="container">


    <div class="hero-content">
        <div class="hero-content">
 
            <h1>
              کافه پاتوق محمد
            </h1>


      <h1 style="color:#D7CCC8;">
            <p>
          کافه پاتوق محمد
                محیطی دنج و دلپذیر
        </h1>
            </p>


        <span style="color:#D7CCC8;font-size: 2rem;">
            <a href="#" class="hero-btn">
            <strog> محیطی دنج و دلپذیر برای ساخت لحظات بهتر</strong><br>
                رزرو و سفارش آنلاین
        </span>
            </a>


        <a href="#" class="hero-btn">
         </div>
            رزرو و سفارش آنلاین
         </a>


     </div>
     </div>


</div>
</section>


<style>
<style>
/* =========================
/*------------------------
  Hero Background
  تنظیمات قابل تغییر
========================= */
-------------------------*/
<section class="cafe-hero" dir="rtl">
 
:root{


     <!-- پس‌زمینه -->
     /* تصویر */
     <div class="cafe-hero-bg"></div>
     --hero-image:url("https://dl.faraghaib.ir/m/260012/26001207.jpg");


     <!-- لایه رنگی -->
     /* رنگ لایه */
     <div class="cafe-hero-overlay"></div>
     --overlay-color: rgba(121 , 85 , 72,.72);


     <!-- محتوا -->
     /* ارتفاع */
     <div class="cafe-hero-container">
     --hero-height:520px;


        <div class="cafe-hero-content">
    /* رنگ متن */
    --text-color:#fff;


            <h1>
    /* دکمه */
                کافه پاتوق محمد
    --btn-bg:#161a88;
            </h1>
    --btn-hover:#0d1267;
}
 
/*------------------------*/


            <span class="cafe-hero-subtitle">
*{
                محیطی دنج و دلپذیر برای ساخت لحظات بهتر
    margin:0;
            </span>
    padding:0;
    box-sizing:border-box;
}


            <a href="#" class="cafe-hero-btn">
body{
                رزرو و سفارش آنلاین
    font-family:tahoma;
            </a>
    direction:rtl;
}


        </div>
.container{


     </div>
     width:min(1200px,92%);
    margin:auto;
    height:100%;
}


</section>
.hero-banner{


    position:relative;
    height:var(--hero-height);


<style>
    overflow:hidden;
/* =========================
  محدوده اصلی Hero
========================= */


.hero-wrapper {
     display:flex;
     position: relative;
     align-items:center;
     width: 100%;
    height: 520px;
    overflow: hidden;
    direction: rtl;
}
}


.hero-bg {
.hero-bg{
     position: absolute;
 
     inset: 0;
     position:absolute;
    width: 100%;
     inset:0;
    height: 100%;
 
     background-image: url("https://dl.faraghaib.ir/m/260012/26001207.jpg");
     background-image:var(--hero-image);
     background-size: cover;
 
     background-position: center;
     background-size:cover;
     z-index: 1;
     background-position:center;
    background-repeat:no-repeat;
 
     z-index:1;
}
}


.hero-overlay {
.hero-overlay{
     position: absolute;
 
     top: 0;
     position:absolute;
    right: 0;
     inset:0;
    width: 58%;
 
    height: 100%;
     background:var(--overlay-color);
     background: rgba(121, 85, 72, 0.72);
 
     z-index: 2;
     z-index:2;
    clip-path: ellipse(100% 85% at 100% 50%);
}
}


.container {
.hero-content{
     position: relative;
 
     z-index: 3;
     position:relative;
    width: 100%;
     z-index:3;
     max-width: 1200px;
 
    height: 100%;
     max-width:620px;
     margin: 0 auto;
 
     display: flex;
     margin-right:auto;
     align-items: center;
 
     color:var(--text-color);
 
     text-align:right;
}
}


.hero-content {
.hero-content h1{
    width: 50%;
 
     margin-right: auto;
     font-size:48px;
     text-align: right;
 
    padding: 40px;
     line-height:1.6;
     box-sizing: border-box;
 
     color: #D7CCC8;
     margin-bottom:15px;
 
     font-weight:700;
}
}


.hero-content h1 {
.hero-content p{
    margin: 0 0 15px;
 
     font-size: 42px;
     font-size:26px;
     line-height: 1.4;
 
     font-weight: 800;
     line-height:1.9;
 
     margin-bottom:35px;
}
}


.hero-content p {
.hero-btn{
     margin: 0 0 25px;
 
     font-size: 20px;
    display:inline-flex;
     line-height: 1.8;
 
    align-items:center;
 
    justify-content:center;
 
    min-width:190px;
 
    height:58px;
 
     padding:0 30px;
 
    background:var(--btn-bg);
 
    color:#fff;
 
     border-radius:12px;
 
     text-decoration:none;
 
    transition:.3s;
}
}


.hero-btn {
.hero-btn:hover{
    display: inline-block;
 
    padding: 13px 28px;
     background:var(--btn-hover);
    border-radius: 50px;
 
     background: #ffffff;
    color: #222;
    text-decoration: none;
    font-size: 16px;
    font-weight: 700;
    transition: all 0.3s ease;
}
}


.hero-btn:hover {
/* تبلت */
    transform: translateY(-2px);
 
     opacity: 0.9;
@media(max-width:992px){
}
 
     .hero-banner{


@media (max-width: 768px) {
         height:520px;
    .hero-wrapper {
         height: 500px;
     }
     }


     .hero-overlay {
     .hero-content{
        width: 75%;
 
         clip-path: ellipse(100% 85% at 100% 50%);
         max-width:100%;
     }
     }


     .container {
     .hero-content h1{
         justify-content: center;
 
         font-size:36px;
     }
     }


     .hero-content {
     .hero-content p{
        width: 70%;
        padding: 25px;
        text-align: center;
    }


    .hero-content h1 {
         font-size:22px;
         font-size: 30px;
     }
     }


    .hero-content p {
        font-size: 17px;
    }
}
}


@media (max-width: 480px) {
/* موبایل */
     .hero-wrapper {
 
         height: 460px;
@media(max-width:768px){
 
     .hero-banner{
 
         height:430px;
     }
     }


     .hero-overlay {
     .hero-content{
         width: 100%;
 
         clip-path: ellipse(110% 85% at 100% 50%);
         text-align:center;
 
         margin:auto;
     }
     }


     .hero-content {
     .hero-content h1{
         width: 90%;
 
         padding: 20px;
         font-size:28px;
 
         line-height:1.8;
     }
     }


     .hero-content h1 {
     .hero-content p{
         font-size: 26px;
 
         font-size:18px;
 
        margin-bottom:25px;
     }
     }


     .hero-content p {
     .hero-btn{
         font-size: 16px;
 
        width:100%;
         max-width:260px;
     }
     }


    .hero-btn {
        padding: 11px 22px;
        font-size: 15px;
    }
}
}
</style>
</style>
</html>
</html>

نسخهٔ ‏۸ اوت ۲۰۲۶، ساعت ۰۸:۳۴

کافه پاتوق محمد

محیطی دنج و دلپذیر

رزرو و سفارش آنلاین

برگرفته از «https://fa.faraghaib.ir/w/index.php?title=الگو:لایه_شفاف_روی_عکس/کافه_محمد&oldid=5710»