فراغیب

الگو:لایه شفاف روی عکس/کافه محمد: تفاوت میان نسخه‌ها

→ تفاوت با ویرایش قدیمی‌تر
دیداریویکی‌متن
بدون خلاصۀ ویرایش
برچسب: واگردانی دستی
بدون خلاصۀ ویرایش
 
(۳ نسخهٔ میانیِ ایجادشده توسط همین کاربر نشان داده نشد)
خط ۱: خط ۱:
<html>
<html>


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


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


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


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


      <h1 style="color:#D7CCC8;">
        <div class="hero-content">
          کافه پاتوق محمد
        </h1>


        <span style="color:#D7CCC8;font-size: 2rem;">
            <h1>
             <strog> محیطی دنج و دلپذیر برای ساخت لحظات بهتر</strong><br>
              کافه پاتوق محمد
        </span>
             </h1>


        <a href="#" class="hero-btn">
            <p>
             رزرو و سفارش آنلاین
                محیطی دنج و دلپذیر
         </a>
            </p>
 
              
 
         </div>


     </div>
     </div>


</div>
</section>


<style>
<style>
/* =========================
/*------------------------
  Hero Background
  تنظیمات قابل تغییر
========================= */
-------------------------*/


.hero-bg {
:root{
     position: absolute;
 
     inset: 0;
    /* تصویر */
     width: 100%;
    --hero-image:url("https://dl.faraghaib.ir/m/260012/260012-01-18.jpg");
     height: 100%;
 
    /* رنگ لایه */
    --overlay-color: rgba(121 , 85 , 72,.72);
 
    /* ارتفاع */
    --hero-height:520px;
 
    /* رنگ متن */
     --text-color:#fff;
 
    /* دکمه */
     --btn-bg:#161a88;
     --btn-hover:#0d1267;
 
    /* گردی گوشه‌ها */
     --border-radius: 25px;
}


    background-image: url("https://dl.faraghaib.ir/m/260012/26001207.jpg");
/*------------------------*/
    background-size: cover;
    background-position: center;


     z-index: 1;
*{
     margin:0;
    padding:0;
    box-sizing:border-box;
}
}


body{
    font-family:tahoma;
    direction:rtl;
}


/* =========================
.container{
  لایه شفاف منحنی
========================= */


.hero-overlay {
     width:min(1200px,92%);
     position: absolute;
     margin:auto;
     top: 0;
     height:100%;
     right: 0;
}


    width: 58%;
.hero-banner{
    height: 100%;


     /*
     position:relative;
      لایه شفاف از سمت راست شروع می‌شود
     height:var(--hero-height);
      و سمت چپ آن به صورت منحنی وارد تصویر می‌شود
    */
     background: rgba(121 , 85 , 72,.72);


     z-index: 2;
     overflow:hidden;
   
    /* اضافه شده برای گرد کردن گوشه‌ها */
    border-radius: var(--border-radius);


     /*
     display:flex;
      ایجاد منحنی در لبه سمت چپ
     align-items:center;
    */
     clip-path: ellipse(100% 85% at 100% 50%);
}
}


.hero-bg{


/* =========================
    position:absolute;
  Container
    inset:0;
========================= */


.container {
     background-image:var(--hero-image);
     position: relative;
    z-index: 3;


     width: 100%;
     background-size:cover;
     max-width: 1200px;
     background-position:center;
    background-repeat:no-repeat;


     height: 100%;
     z-index:1;
    margin: 0 auto;
}


     display: flex;
.hero-overlay{
     align-items: center;
 
    position:absolute;
    inset:0;
 
     background:var(--overlay-color);
 
     z-index:2;
}
}


.hero-content{
    position:relative;
    z-index:3;


/* =========================
    max-width:620px;
  محتوای Hero
========================= */


.hero-content {
     margin-right:auto;
    width: 50%;
     margin-right: auto;


     text-align: right;
     color:var(--text-color);
    padding: 40px;
    box-sizing: border-box;


     color: #BCAAA4;
     text-align:right;
}
}


.hero-content h1{
    font-size:48px;


/* عنوان */
    line-height:1.6;


.hero-content h1 {
     margin-bottom:15px;
     margin: 0 0 15px;


    font-size: 42px;
     font-weight:700;
    line-height: 1.4;
     font-weight: 800;
}
}


.hero-content p{


/* توضیحات */
    font-size:26px;


.hero-content p {
    line-height:1.9;
    margin: 0 0 25px;


     font-size: 20px;
     margin-bottom:35px;
    line-height: 1.8;
}
}


.hero-btn{
    display:inline-flex;
    align-items:center;


/* =========================
    justify-content:center;
  دکمه
========================= */


.hero-btn {
    min-width:190px;
    display: inline-block;


     padding: 13px 28px;
     height:58px;


     border-radius: 50px;
     padding:0 30px;


     background: #ffffff;
     background:var(--btn-bg);
    color: #222;


     text-decoration: none;
     color:#fff;


     font-size: 16px;
     border-radius:12px;
    font-weight: 700;


     transition: all 0.3s ease;
    text-decoration:none;
 
     transition:.3s;
}
}


.hero-btn:hover {
.hero-btn:hover{
     transform: translateY(-2px);
 
    opacity: 0.9;
     background:var(--btn-hover);
 
}
}


/* تبلت */


/* =========================
@media(max-width:992px){
  Responsive
========================= */


@media (max-width: 768px) {
    .hero-banner{


    .hero-overlay {
         height:520px;
         width: 75%;
    }


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


    .container {
         max-width:100%;
         justify-content: center;
     }
     }


     .hero-content {
     .hero-content h1{
        width: 70%;
        padding: 25px;


         text-align: center;
         font-size:36px;
     }
     }


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


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


/* موبایل */


@media (max-width: 480px) {
@media(max-width:768px){


     .hero-overlay {
     .hero-banner{
        width: 100%;


         /*
         height:430px;
          در موبایل لایه تقریباً کل تصویر را می‌گیرد
          ولی همچنان لبه منحنی حفظ می‌شود
        */
        clip-path: ellipse(
            110% 85%
            at 100% 50%
        );
     }
     }


     .hero-content {
     .hero-content{
         width: 90%;
 
         padding: 20px;
         text-align:center;
 
         margin:auto;
     }
     }


     .hero-content h1 {
     .hero-content h1{
         font-size: 26px;
 
         font-size:28px;
 
        line-height:1.8;
     }
     }


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


     .hero-btn {
     .hero-btn{
         padding: 11px 22px;
 
         font-size: 15px;
         width:100%;
         max-width:260px;
     }
     }
}
}
</style>
</style>
</html>
</html>
برگرفته از «https://fa.faraghaib.ir/wiki/الگو:لایه_شفاف_روی_عکس/کافه_محمد»