الگو:هدر منحنی/علیرضایی - تاریخچهٔ نسخه‌ها

Javid: صفحه‌ای تازه حاوی «

2026-08-19T05:48:36Z

صفحه‌ای تازه حاوی «<html>  <section class="industrial-hero" aria-labelledby="industrial-hero-title">  <img class="industrial-heroimage" src="https://dl.faraghaib.ir/m/260023-01/260023-01-11.jpg"...» ایجاد کرد

صفحهٔ تازه
<html>


<section class="industrial-hero"
aria-labelledby="industrial-hero-title">


<img
class="industrial-heroimage"
src="https://dl.faraghaib.ir/m/260023-01/260023-01-11.jpg"
alt="طراحی و ساخت تجهیزات صنعتی"
loading="eager"
fetchpriority="high"
decoding="async"
>


<div class="industrial-herooverlay" aria-hidden="true"></div>


<div class="industrial-herocontent">

<p class="industrial-heroeyebrow">
تخصصی‌ترین خدمات طراحی و ساخت تجهیزات صنعتی
</p>

<h1 id="industrial-hero-title" class="industrial-herotitle">
مدیریت آقای علیرضایی
</h1>

<a
href="#contact"
class="industrial-herobutton"
aria-label="دریافت مشاوره رایگان درباره طراحی و ساخت آقای علیرضایی"
>
ثبت سفارش فوری
</a>

</div>


<div class="industrial-herowave" aria-hidden="true">

<svg
viewBox="0 0 1440 130"
preserveAspectRatio="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="
M0 58
C130 92 245 112 380 108
C530 104 650 67 780 35
C920 1 1035 2 1155 20
C1270 37 1360 55 1440 60
L1440 130
L0 130
Z
"
fill="#ffffff"
/>
</svg>

</div>

</section>

<style>

/* =========================================================
RESET
========================================================= /

.industrial-hero,
.industrial-hero ,
.industrial-hero ::before,
.industrial-hero ::after {
box-sizing: border-box;
}

/* =========================================================
HERO - MOBILE FIRST
========================================================= /

.industrial-hero {
position: relative;
isolation: isolate;

width: 100%;
min-height: 380px;

overflow: hidden;

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

background: #111;
}

/ =========================================================
BACKGROUND IMAGE
========================================================= /

.industrial-heroimage {
position: absolute;
z-index: -3;

inset: 0;

width: 100%;
height: 100%;

object-fit: cover;

/
کمی به سمت بالا تنظیم شده تا
قسمت بیشتری از دستگاه دیده شود
/
object-position: center 38%;

display: block;

/
تصویر کمی روشن‌تر و واضح‌تر
/
filter:
brightness(0.88)
contrast(1.05)
saturate(0.95);

transform: scale(1.01);
}

/ =========================================================
DARK OVERLAY
========================================================= /

.industrial-herooverlay {
position: absolute;
z-index: -2;

inset: 0;

/
در تصویر اصلی تاریکی زیاد بود.
این مقدار باعث می‌شود عکس واضح‌تر دیده شود.
/
background:
linear-gradient(
180deg,
rgba(0, 0, 0, 0.34) 0%,
rgba(0, 0, 0, 0.28) 45%,
rgba(0, 0, 0, 0.40) 100%
);
}

/ =========================================================
CONTENT
========================================================= /

.industrial-herocontent {
position: relative;
z-index: 2;

width: min(92%, 1000px);

padding:
55px
15px
115px;

text-align: center;

display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

/ =========================================================
EYEBROW
========================================================= /

.industrial-heroeyebrow {
margin: 0 0 20px;

color: #ffffff;

font-size: clamp(15px, 3.5vw, 21px);

font-weight: 600;

line-height: 1.8;

text-shadow:
0 2px 8px rgba(0, 0, 0, 0.7);
}

/ =========================================================
H1
========================================================= /

.industrial-herotitle {
margin: 0 0 32px;

color: #ffffff;

font-size: clamp(42px, 11vw, 78px);

font-weight: 800;

line-height: 1.15;

letter-spacing: -1px;

text-shadow:
0 3px 12px rgba(0, 0, 0, 0.75);
}

/ =========================================================
CTA BUTTON
========================================================= /

.industrial-herobutton {
display: inline-flex;

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

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

padding: 12px 25px;

background: #ffffff;

color: #222222;

text-decoration: none;

font-size: 15px;
font-weight: 700;

border-radius: 5px;

box-shadow:
0 6px 20px rgba(0, 0, 0, 0.25);

transition:
transform 0.25s ease,
box-shadow 0.25s ease,
background-color 0.25s ease;
}

/ هاور فقط برای دستگاه‌هایی که موس دارند /
@media (hover: hover) and (pointer: fine) {

.industrial-herobutton:hover {
transform: translateY(-3px);

background: #f5b400;

color: #ffffff;

box-shadow:
0 10px 25px rgba(0, 0, 0, 0.30);
}

}

/ =========================================================
WAVE
========================================================= /

.industrial-herowave {
position: absolute;

z-index: 3;

left: 0;
right: 0;
bottom: -1px;

width: 100%;

height: 100px;

pointer-events: none;

line-height: 0;
}

.industrial-herowave svg {
display: block;

width: 100%;
height: 100%;
}

/ =========================================================
TABLET
========================================================= /

@media (min-width: 600px) {

.industrial-hero {
min-height: 430px;
}

.industrial-herocontent {
padding:
65px
20px
125px;
}

.industrial-heroeyebrow {
margin-bottom: 18px;
}

.industrial-herotitle {
margin-bottom: 35px;
}

.industrial-herowave {
height: 110px;
}

}

/ =========================================================
DESKTOP
========================================================= /

@media (min-width: 992px) {

.industrial-hero {
min-height: 470px;
}

.industrial-heroimage {

/
نمایش بخش بیشتری از تصویر صنعتی
/
object-position: center 34%;

filter:
brightness(0.92)
contrast(1.05)
saturate(0.95);
}

.industrial-herooverlay {
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-herocontent {
width: min(90%, 1100px);

padding:
65px
20px
135px;
}

.industrial-heroeyebrow {
font-size: 20px;
}

.industrial-herotitle {
font-size: clamp(58px, 6vw, 82px);
}

.industrial-herowave {
height: 125px;
}

}

/ =========================================================
LARGE DESKTOP
========================================================= /

@media (min-width: 1400px) {

.industrial-hero {
min-height: 500px;
}

.industrial-herocontent {
padding-bottom: 145px;
}

.industrial-herowave {
height: 135px;
}

}

/ =========================================================
ACCESSIBILITY
========================================================= /

.industrial-herobutton:focus-visible {
outline: 3px solid #f5b400;

outline-offset: 4px;
}

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

@media (prefers-reduced-motion: reduce) {

.industrial-hero__button {
transition: none;
}

}

</style>
</html>