پرش به محتوا

هدر منحنی/سهند نوین سازه - فراغیب

از فراغیب
دیداریویکی‌متن
صفحه‌ای تازه حاوی «<html lang="fa" dir="rtl"> <!-- ========================================================= HERO | آقای پور ابراهیمی Responsive Image-Based Hero تصویر تعیین‌کننده ارتفاع کانتینر است ========================================================= --> <section class="industrial-hero" aria-labelledby="industrial-hero-title"> <!-- =======================================...» ایجاد کرد
 
بدون خلاصۀ ویرایش
 
خط ۱: خط ۱:
<html lang="fa" dir="rtl">
<html>
 
<!-- =========================================================
<!-- =========================================================
     HERO | آقای پور ابراهیمی
     HERO | آقای پور ابراهیمی
     Responsive Image-Based Hero
     Mobile-First + SEO + Responsive
    تصویر تعیین‌کننده ارتفاع کانتینر است
========================================================= -->
========================================================= -->


خط ۱۰: خط ۸:
         aria-labelledby="industrial-hero-title">
         aria-labelledby="industrial-hero-title">


     <!-- =====================================================
     <!-- تصویر اصلی -->
        IMAGE
        فقط src را برای تغییر تصویر عوض کنید
        نسبت تصویر کاملاً حفظ می‌شود
    ====================================================== -->
 
     <img
     <img
         class="industrial-hero__image"
         class="industrial-hero__image"
         src="https://dl.faraghaib.ir/m/260010-01/baner-01-01"
         src="https://dl.faraghaib.ir/m/260010-01/260010-01-02.jpg"
         alt="تراشکاری CNC و خدمات تخصصی ماشین‌کاری صنعتی"
         alt="تراش کاری CNC"
         loading="eager"
         loading="eager"
         fetchpriority="high"
         fetchpriority="high"
خط ۲۵: خط ۱۸:
     >
     >


    <!-- لایه تاریک روی تصویر -->
    <div class="industrial-hero__overlay" aria-hidden="true"></div>


     <!-- =====================================================
     <!-- محتوای اصلی -->
        DARK OVERLAY
    ====================================================== -->
 
    <div
        class="industrial-hero__overlay"
        aria-hidden="true">
    </div>
 
 
    <!-- =====================================================
        CONTENT
    ====================================================== -->
 
     <div class="industrial-hero__content">
     <div class="industrial-hero__content">


         <p class="industrial-hero__eyebrow">
         <p class="industrial-hero__eyebrow">
             تخصصی‌ترین خدمات تراشکاری CNC
             تخصصی‌ترین خدمات تراش کاری CNC
         </p>
         </p>


         <h1
         <h1 id="industrial-hero-title" class="industrial-hero__title">
            id="industrial-hero-title"
            class="industrial-hero__title">
 
             مدیریت آقای پور ابراهیمی
             مدیریت آقای پور ابراهیمی
         </h1>
         </h1>


خط ۵۷: خط ۳۵:
             href="#contact"
             href="#contact"
             class="industrial-hero__button"
             class="industrial-hero__button"
             aria-label="ثبت سفارش و دریافت مشاوره درباره تراشکاری CNC">
             aria-label="دریافت مشاوره رایگان درباره تراشکاری CNC"
 
        >
             ثبت سفارش فوری
             ثبت سفارش فوری
         </a>
         </a>


     </div>
     </div>


 
     <!-- منحنی پایین -->
     <!-- =====================================================
     <div class="industrial-hero__wave" aria-hidden="true">
        WAVE
        موج همیشه در پایین تصویر قرار می‌گیرد
    ====================================================== -->
 
     <div
        class="industrial-hero__wave"
        aria-hidden="true">


         <svg
         <svg
             viewBox="0 0 1440 130"
             viewBox="0 0 1440 130"
             preserveAspectRatio="none"
             preserveAspectRatio="none"
             xmlns="http://www.w3.org/2000/svg">
             xmlns="http://www.w3.org/2000/svg"  
 
        >  
             <path
             <path  
                 d="
                 d="  
                    M0 58
                M0 58  
                    C130 92 245 112 380 108
                C130 92 245 112 380 108  
                    C530 104 650 67 780 35
                C530 104 650 67 780 35  
                    C920 1 1035 2 1155 20
                C920 1 1035 2 1155 20  
                    C1270 37 1360 55 1440 60
                C1270 37 1360 55 1440 60  
                    L1440 130
                L1440 130  
                    L0 130
                L0 130  
                    Z
                Z  
                 "
                 "  
                 fill="#ffffff">
                 fill="#ffffff"  
             </path>
             />  
 
         </svg>  
         </svg>
 
     </div>  
     </div>
 
</section>  
</section>
 
 
<style>  
<style>
 
/* =========================================================  
/* =========================================================
   RESET  
   RESET
========================================================= */  
========================================================= */
 
.industrial-hero,  
.industrial-hero,
.industrial-hero *,  
.industrial-hero *,
.industrial-hero *::before,  
.industrial-hero *::before,
.industrial-hero *::after {  
.industrial-hero *::after {
     box-sizing: border-box;  
 
}  
     box-sizing: border-box;
 
}
/* =========================================================  
 
   HERO - MOBILE FIRST
 
========================================================= */  
/* =========================================================
   HERO
.industrial-hero {  
  ارتفاع توسط خود تصویر تعیین می‌شود
     position: relative;  
========================================================= */
    isolation: isolate;
 
.industrial-hero {
     width: 100%;  
 
     min-height: 380px;
     position: relative;
 
     overflow: hidden;
     width: 100%;
 
     display: flex;  
     /*
    align-items: center;
      بسیار مهم:
     justify-content: center;  
      دیگر min-height ثابت نداریم.
      ارتفاع Hero بر اساس تصویر تعیین می‌شود.
     background: #111;  
     */
}  
 
     overflow: hidden;
 
/* =========================================================  
     isolation: isolate;
   BACKGROUND IMAGE  
 
========================================================= */  
     background: #111;
 
.industrial-hero__image {  
}
    position: absolute;
 
     z-index: -3;  
 
/* =========================================================
     inset: 0;  
   IMAGE
  تصویر تعیین‌کننده ارتفاع کانتینر است
     width: 100%;  
========================================================= */
     height: 100%;  
 
.industrial-hero__image {
     object-fit: cover;
 
     /*
    /*
      تصویر در جریان عادی صفحه قرار دارد
       کمی به سمت بالا تنظیم شده تا
      و بنابراین ارتفاع Hero را خودش تعیین می‌کند.
       قسمت بیشتری از دستگاه دیده شود
    */
     */  
 
     object-position: center 38%;  
    position: relative;
 
     display: block;  
     z-index: 0;
 
     /*  
     display: block;
       تصویر کمی روشن‌تر و واضح‌تر
 
     */  
     width: 100%;
     filter:  
 
        brightness(0.88)
     /*
        contrast(1.05)  
       ارتفاع کاملاً خودکار
         saturate(0.95);  
       نسبت اصلی تصویر حفظ می‌شود.
     */
    transform: scale(1.01);
 
}  
     height: auto;
 
     max-width: 100%;
/* =========================================================  
 
   DARK OVERLAY  
     /*
========================================================= */  
       تصویر بریده نمی‌شود
     */
.industrial-hero__overlay {  
 
     position: absolute;  
     object-fit: contain;
     z-index: -2;  
 
    /*
     inset: 0;  
      تنظیم کیفیت و ظاهر
    */
     /*
 
      در تصویر اصلی تاریکی زیاد بود.
    filter:
      این مقدار باعث می‌شود عکس واضح‌تر دیده شود.
        brightness(0.88)
    */
        contrast(1.05)
     background:  
         saturate(0.95);
         linear-gradient(  
 
             180deg,  
}
             rgba(0, 0, 0, 0.34) 0%,  
 
             rgba(0, 0, 0, 0.28) 45%,  
 
             rgba(0, 0, 0, 0.40) 100%  
/* =========================================================
         );  
   DARK OVERLAY
}  
========================================================= */
 
.industrial-hero__overlay {
/* =========================================================  
 
   CONTENT  
     position: absolute;
========================================================= */  
 
     z-index: 1;
.industrial-hero__content {  
 
     position: relative;  
     inset: 0;
     z-index: 2;  
 
     pointer-events: none;
     width: min(92%, 1000px);  
 
     background:
     padding:  
 
        55px
         linear-gradient(
         15px
             180deg,
         115px;
             rgba(0, 0, 0, 0.34) 0%,
             rgba(0, 0, 0, 0.25) 45%,
    text-align: center;  
             rgba(0, 0, 0, 0.40) 100%
         );
     display: flex;  
 
     flex-direction: column;  
}
     align-items: center;  
 
     justify-content: center;  
 
}  
/* =========================================================
   CONTENT
========================================================= */
/* =========================================================  
 
   EYEBROW  
.industrial-hero__content {
========================================================= */  
 
     position: absolute;
.industrial-hero__eyebrow {  
 
     margin: 0 0 20px;  
     z-index: 2;
 
     color: #ffffff;  
    inset: 0;
 
     font-size: clamp(15px, 3.5vw, 21px);  
     width: 100%;
 
     font-weight: 600;  
     padding:
 
     line-height: 1.8;  
         45px
         20px
     text-shadow:  
        120px;
         0 2px 8px rgba(0, 0, 0, 0.7);  
 
}  
     display: flex;
 
     flex-direction: column;
/* =========================================================  
 
   H1  
     align-items: center;
========================================================= */  
 
     justify-content: center;
.industrial-hero__title {  
 
     margin: 0 0 32px;  
    text-align: center;
 
     color: #ffffff;  
}
 
     font-size: clamp(42px, 11vw, 78px);  
 
/* =========================================================
     font-weight: 800;  
   EYEBROW
========================================================= */
     line-height: 1.15;  
 
.industrial-hero__eyebrow {
     letter-spacing: -1px;  
 
     margin:
     text-shadow:  
 
         0 3px 12px rgba(0, 0, 0, 0.75);  
        0
}  
        0
        18px;
 
/* =========================================================  
     color: #ffffff;
   CTA BUTTON  
 
========================================================= */  
     font-size:
 
.industrial-hero__button {  
        clamp(
     display: inline-flex;  
            15px,
            3.5vw,
     align-items: center;  
            21px
     justify-content: center;  
        );
 
     min-width: 145px;  
     font-weight: 600;
     min-height: 50px;  
 
     line-height: 1.8;
     padding: 12px 25px;  
 
     text-shadow:
     background: #FF8A00;  
 
         0
     color: #ffffff;  
        2px
        8px
     text-decoration: none;  
        rgba(0, 0, 0, 0.75);
 
     font-size: 15px;  
}
     font-weight: 700;  
 
 
     border-radius: 10px;  
/* =========================================================
   H1
     box-shadow:  
========================================================= */
         0 6px 20px rgba(0, 0, 0, 0.25);  
 
.industrial-hero__title {
     transition:  
 
         transform 0.25s ease,  
     margin:
         box-shadow 0.25s ease,  
 
         background-color 0.25s ease;  
        0
}  
        0
        30px;
 
/* هاور فقط برای دستگاه‌هایی که موس دارند */
     color: #ffffff;
@media (hover: hover) and (pointer: fine) {
 
     font-size:
    .industrial-hero__button:hover {
 
        transform: translateY(-3px);
        clamp(
            34px,
        background: #f5b400;
            8vw,
            78px
        color: #ffffff;
        );
 
        box-shadow:
     font-weight: 800;
            0 10px 25px rgba(0, 0, 0, 0.30);
 
    }
     line-height: 1.2;
 
}
     letter-spacing: -1px;
 
     text-shadow:
/* =========================================================  
 
  WAVE
         0
========================================================= */
        3px
        12px
.industrial-hero__wave {
        rgba(0, 0, 0, 0.80);
    position: absolute;  
 
}
    z-index: 3;  
 
 
    left: 0;
/* =========================================================
    right: 0;
   CTA BUTTON
    bottom: -1px;
========================================================= */
 
    width: 100%;
.industrial-hero__button {
 
    height: 100px;  
     display: inline-flex;
 
     pointer-events: none;
     align-items: center;
 
    line-height: 0;
     justify-content: center;
}  
 
     min-width: 145px;
 
.industrial-hero__wave svg {
     min-height: 50px;
    display: block;
 
     padding:
    width: 100%;
 
    height: 100%;
        12px
}
        25px;
 
     background: #FF8A00;
/* =========================================================  
 
   TABLET
     color: #ffffff;
========================================================= */  
 
     text-decoration: none;
@media (min-width: 600px) {  
 
     font-size: 15px;
     .industrial-hero {
 
        min-height: 430px;  
     font-weight: 700;
     }
 
    line-height: 1.5;
     .industrial-hero__content {
 
        padding:  
     border-radius: 10px;
            65px
 
            20px
     box-shadow:
            125px;  
 
    }
         0
        6px
     .industrial-hero__eyebrow {
        20px
        margin-bottom: 18px;  
        rgba(0, 0, 0, 0.25);
    }
 
     transition:
     .industrial-hero__title {
 
        margin-bottom: 35px;  
         transform 0.25s ease,
     }
         box-shadow 0.25s ease,
         background-color 0.25s ease;
    .industrial-hero__wave {
 
        height: 110px;
}
    }
 
 
}
/* =========================================================
  HOVER
========================================================= */
/* =========================================================  
 
   DESKTOP
@media (hover: hover) and (pointer: fine) {
========================================================= */  
 
    .industrial-hero__button:hover {
@media (min-width: 992px) {  
 
        transform: translateY(-3px);
     .industrial-hero {  
 
         min-height: 470px;
        background: #f5b400;
    }
 
        color: #ffffff;
    .industrial-hero__image {
 
        box-shadow:
        /*
 
          نمایش بخش بیشتری از تصویر صنعتی
            0
         */  
            10px
         object-position: center 34%;
            25px
            rgba(0, 0, 0, 0.30);
        filter:
 
             brightness(0.92)
     }
             contrast(1.05)
 
            saturate(0.95);
}
     }  
 
 
     .industrial-hero__overlay {  
/* =========================================================
         background:  
   WAVE
            linear-gradient(
  موج متناسب با اندازه تصویر
                180deg,
========================================================= */
                rgba(0, 0, 0, 0.30) 0%,
 
                rgba(0, 0, 0, 0.22) 48%,
.industrial-hero__wave {
                rgba(0, 0, 0, 0.34) 100%
 
            );
     position: absolute;
    }
 
    z-index: 3;
    .industrial-hero__content {  
 
         width: min(90%, 1100px);  
     left: 0;
 
         padding:  
     right: 0;
             65px
 
             20px
     bottom: -1px;
             135px;
 
    }
     width: 100%;
 
    .industrial-hero__eyebrow {
     /*
         font-size: 20px;  
      ارتفاع موج نسبت به عرض صفحه تنظیم می‌شود.
     }  
      بنابراین در اندازه‌های مختلف ظاهر طبیعی دارد.
    */
     .industrial-hero__title {  
 
         font-size: clamp(58px, 6vw, 82px);  
    height: clamp(
    }
        55px,
        7vw,
    .industrial-hero__wave {
        135px
         height: 125px;  
    );
    }
 
    pointer-events: none;
}
 
    line-height: 0;
 
/* =========================================================  
}
  LARGE DESKTOP
 
========================================================= */
 
.industrial-hero__wave svg {
@media (min-width: 1400px) {  
 
    display: block;
     .industrial-hero {  
 
         min-height: 500px;
    width: 100%;
    }  
 
    height: 100%;
     .industrial-hero__content {  
 
         padding-bottom: 145px;  
}
     }  
 
 
     .industrial-hero__wave {  
/* =========================================================
         height: 135px;  
   MOBILE
     }  
========================================================= */
 
}  
@media (max-width: 599px) {
 
     .industrial-hero__content {
/* =========================================================  
 
   ACCESSIBILITY  
         /*
========================================================= */  
          چون تصویر در موبایل باریک‌تر می‌شود،
          فاصله‌های داخلی نیز کاهش پیدا می‌کنند.
.industrial-hero__button:focus-visible {  
         */
     outline: 3px solid #f5b400;  
 
         padding:
     outline-offset: 4px;  
 
}  
            30px
             15px
             75px;
/* =========================================================  
 
   REDUCED MOTION  
     }
========================================================= */  
 
 
@media (prefers-reduced-motion: reduce) {  
     .industrial-hero__eyebrow {
 
     .industrial-hero__button {  
         margin-bottom: 10px;
         transition: none;  
 
     }  
        font-size: 14px;
 
}  
        line-height: 1.7;
 
</style>  
    }
 
 
    .industrial-hero__title {
 
         margin-bottom: 20px;
 
         font-size: clamp(
             27px,
             8vw,
             42px
        );
 
         line-height: 1.25;
 
     }
 
 
     .industrial-hero__button {
 
         min-width: 135px;
 
         min-height: 46px;
 
        padding:
 
            10px
            20px;
 
        font-size: 14px;
 
        border-radius: 9px;
 
    }
 
 
    .industrial-hero__wave {
 
        height: 55px;
 
    }
 
}
 
 
/* =========================================================
  TABLET
========================================================= */
 
@media (min-width: 600px) and (max-width: 991px) {
 
     .industrial-hero__content {
 
         padding:
 
            50px
            25px
            100px;
 
    }
 
 
    .industrial-hero__title {
 
        font-size:
 
            clamp(
                45px,
                8vw,
                65px
            );
 
    }
 
 
    .industrial-hero__wave {
 
        height: 85px;
 
    }
 
}
 
 
/* =========================================================
  DESKTOP
========================================================= */
 
@media (min-width: 992px) {
 
    .industrial-hero__image {
 
        filter:
 
            brightness(0.92)
            contrast(1.05)
            saturate(0.95);
 
    }
 
 
    .industrial-hero__overlay {
 
        background:
 
            linear-gradient(
                180deg,
                rgba(0, 0, 0, 0.30) 0%,
                rgba(0, 0, 0, 0.22) 48%,
                rgba(0, 0, 0, 0.34) 100%
            );
 
    }
 
 
    .industrial-hero__content {
 
        padding:
 
            65px
            30px
            130px;
 
    }
 
 
    .industrial-hero__eyebrow {
 
        font-size: 20px;
 
    }
 
 
    .industrial-hero__title {
 
        font-size:
 
            clamp(
                58px,
                6vw,
                82px
            );
 
    }
 
 
    .industrial-hero__wave {
 
        height: 115px;
 
    }
 
}
 
 
/* =========================================================
  LARGE DESKTOP
========================================================= */
 
@media (min-width: 1400px) {
 
     .industrial-hero__content {
 
         padding-bottom: 145px;
 
     }
 
 
     .industrial-hero__wave {
 
         height: 135px;
 
     }
 
}
 
 
/* =========================================================
   ACCESSIBILITY
========================================================= */
 
.industrial-hero__button:focus-visible {
 
     outline:
 
        3px solid
        #f5b400;
 
     outline-offset: 4px;
 
}
 
 
/* =========================================================
   REDUCED MOTION
========================================================= */
 
@media (prefers-reduced-motion: reduce) {
 
     .industrial-hero__button {
 
         transition: none;
 
     }
 
}
 
</style>
 
</html>
</html>

نسخهٔ کنونی تا ‏۲۷ اوت ۲۰۲۶، ساعت ۰۸:۰۷

تراش کاری CNC

تخصصی‌ترین خدمات تراش کاری CNC

مدیریت آقای پور ابراهیمی

ثبت سفارش فوری

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