فراغیب

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

→ تفاوت با ویرایش قدیمی‌ترتفاوت با ویرایش جدیدتر ←
دیداریویکی‌متن
بدون خلاصۀ ویرایش
بدون خلاصۀ ویرایش
خط ۷۶: خط ۷۶:


<style>
<style>
/* ==================================================
  Base Reset
================================================== */
.sajad-hero,
.sajad-hero *,
.sajad-hero *::before,
.sajad-hero *::after {
    box-sizing: border-box;
}
/* ==================================================
/* ==================================================
   Hero - Mobile First
   Mobile First
================================================== */
================================================== */


.sajad-hero {
.sajad-hero {
     width: 100%;
     width: 100%;
     max-width: 100%;
     max-width: 100%;
     background: var(--hero-bg);
     background: var(--hero-bg);
     padding: 35px 15px;
     padding: 35px 15px;
     direction: rtl;
     direction: rtl;
     overflow: hidden;
     overflow: hidden;
     font-family: iransans, Tahoma, Arial, sans-serif;
     font-family: iransans, Tahoma, Arial, sans-serif;
}
}
/* ==================================================
  Container
================================================== */


.sajad-hero__container {
.sajad-hero__container {
     width: 100%;
     width: 100%;
     max-width: 1100px;
     max-width: 1100px;
     margin: 0 auto;
     margin: 0 auto;


     display: grid;
     display: grid;
    grid-template-columns: 1fr;


     grid-template-columns: 1fr;
    /* متن و عکس در دو ردیف کاملاً جدا */
     grid-template-areas:
        "content"
        "media";


     gap: 30px;
     gap: 30px;
     align-items: center;
     align-items: center;
}
}




/* ==================================================
/* =========================
   Content
   متن
================================================== */
========================= */


.sajad-hero__content {
.sajad-hero__content {
     width: 100%;
     width: 100%;
     min-width: 0;
     min-width: 0;


     text-align: center;
     /* متن همیشه ردیف اول */
}
    grid-area: content;


    order: 1;


/* ==================================================
     text-align: center;
  Intro Text
================================================== */
 
.sajad-hero__intro {
 
    margin: 0 0 22px;
 
     color: var(--hero-text);
 
    font-size: clamp(1rem, 3.8vw, 1.35rem);
 
    line-height: 2;
 
    font-weight: 600;
}
}


.sajad-hero__intro a {


    color: var(--hero-title);
/* =========================
 
   عکس
    font-weight: 700;
========================= */
 
    text-decoration: none;
}
 
.sajad-hero__intro a:hover {
 
    text-decoration: underline;
}
 
 
/* ==================================================
  Badge
================================================== */
 
.sajad-hero__badge {
 
    display: inline-block;
 
    max-width: 100%;
 
    background: var(--hero-badge-bg);
 
    padding: 8px 16px;
 
    border-radius: 8px;
 
    margin-bottom: 18px;
 
    font-size: clamp(.9rem, 3.5vw, 1rem);
 
    line-height: 1.8;
 
    white-space: normal;
}
 
 
/* ==================================================
  Title
================================================== */
 
.sajad-hero__title {
 
    color: var(--hero-title);
 
    font-size: clamp(1.7rem, 7vw, 3rem);
 
    line-height: 1.5;
 
    margin: 0 0 18px;
 
    font-weight: 700;
}
 
 
/* ==================================================
   Description / List
================================================== */
 
.sajad-hero__description {


.sajad-hero__media {
     width: 100%;
     width: 100%;
    min-width: 0;


     margin: 0;
     /* عکس همیشه ردیف دوم */
    grid-area: media;


     padding: 0 20px 0 0;
     order: 2;
 
    color: var(--hero-text);
 
    font-size: clamp(.95rem, 3.8vw, 1.1rem);
 
    line-height: 2;
 
    text-align: right;
}
 
.sajad-hero__description li {
 
    margin-bottom: 12px;
 
    padding-right: 5px;
}
 
.sajad-hero__description li:last-child {
 
    margin-bottom: 0;
}
 
.sajad-hero__description strong {
 
    color: var(--hero-title);
 
    font-weight: 700;
}
 
 
/* ==================================================
  Media
================================================== */
 
.sajad-hero__media {
 
    width: 100%;
 
    min-width: 0;


     display: flex;
     display: flex;
     justify-content: center;
     justify-content: center;
     align-items: center;
     align-items: center;


     overflow: visible;
     position: relative;


     margin: 0 auto;
     margin: 0 auto;


     order: 2;
     overflow: visible;
}
}




/* ==================================================
/* =========================
   Image Wrapper
   تصویر
================================================== */
========================= */


.sajad-hero__img {
.sajad-hero__img {
     width: 100%;
     width: 100%;
    max-width: 320px;


     max-width: 320px;
     position: relative;


     display: flex;
     display: flex;
     justify-content: center;
     justify-content: center;
    align-items: center;


     align-items: center;
     margin: 0 auto;


     overflow: visible;
     overflow: visible;
    margin: 0 auto;
}
}
/* ==================================================
  Image
================================================== */


.sajad-hero__img img {
.sajad-hero__img img {
     display: block;
     display: block;


     width: 100%;
     width: 100%;
     max-width: 100%;
     max-width: 100%;


خط ۳۳۵: خط ۱۹۰:


     .sajad-hero {
     .sajad-hero {
         padding: 50px 25px;
         padding: 50px 25px;
     }
     }


     .sajad-hero__container {
     .sajad-hero__container {
         gap: 40px;
         gap: 40px;
     }
     }


     .sajad-hero__img {
     .sajad-hero__img {
         max-width: 380px;
         max-width: 380px;
     }
     }
    .sajad-hero__description {
        padding-right: 25px;
    }
}
}


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


     .sajad-hero {
     .sajad-hero {
         padding: 70px 30px;
         padding: 70px 30px;
     }
     }
خط ۳۷۰: خط ۲۱۵:
     .sajad-hero__container {
     .sajad-hero__container {


         grid-template-columns: minmax(0, 1fr) minmax(300px, 1fr);
         grid-template-columns:
            minmax(0, 1fr)
            minmax(300px, 1fr);
 
        /*
        * در دسکتاپ دوباره دو ستون می‌شود
        */
        grid-template-areas:
            "content media";


         gap: 50px;
         gap: 50px;
خط ۳۷۸: خط ۲۳۱:


     .sajad-hero__content {
     .sajad-hero__content {
 
        grid-area: content;
        order: 1;
         text-align: right;
         text-align: right;
        order: 1;
     }
     }


     .sajad-hero__media {
     .sajad-hero__media {
 
        grid-area: media;
         order: 2;
         order: 2;
        height: auto;


         min-height: 500px;
         min-height: 500px;
        position: relative;


         display: flex;
         display: flex;
         justify-content: center;
         justify-content: center;
        align-items: center;


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


     .sajad-hero__img {
     .sajad-hero__img {
         width: 350px;
         width: 350px;
        max-width: 100%;
        height: auto;
        position: relative;
        left: auto;
        top: auto;
    }
    .sajad-hero__img img {
        width: 100%;
         max-width: 100%;
         max-width: 100%;
        height: auto;
     }
     }
}
}


خط ۴۳۵: خط ۲۶۳:


     .sajad-hero {
     .sajad-hero {
         padding: 80px 30px;
         padding: 80px 30px;
     }
     }


     .sajad-hero__container {
     .sajad-hero__container {
         gap: 70px;
         gap: 70px;
     }
     }


     .sajad-hero__img {
     .sajad-hero__img {
         width: 400px;
         width: 400px;
     }
     }
}
}




/* ==================================================
/* ==================================================
   Very Small Mobile
   Mobile کوچک
================================================== */
================================================== */


خط ۴۵۹: خط ۲۸۳:


     .sajad-hero {
     .sajad-hero {
         padding: 28px 12px;
         padding: 28px 12px;
     }
     }


     .sajad-hero__container {
     .sajad-hero__container {
         gap: 25px;
         gap: 25px;
     }
     }


     .sajad-hero__intro {
     .sajad-hero__img {
 
         max-width: 280px;
        line-height: 1.9;
    }
 
    .sajad-hero__description {
 
        padding-right: 18px;
 
        font-size: .9rem;
 
         line-height: 1.9;
    }
 
    .sajad-hero__badge {
 
        padding: 7px 12px;
     }
     }
}
}
/* ==================================================
  Prevent horizontal overflow
================================================== */
.sajad-hero img {
    max-width: 100%;
}
.sajad-hero a {
    overflow-wrap: anywhere;
}
</style>
</style>


</html>
</html>
برگرفته از «https://fa.faraghaib.ir/wiki/الگو:کانتینر_متن_و_عکس/بخشنده»