لایه شفاف روی عکس/کافه محمد - فراغیب
بدون خلاصۀ ویرایش برچسب: برگرداندهشده |
بدون خلاصۀ ویرایش |
||
| (۵ نسخهٔ میانیِ ایجادشده توسط همین کاربر نشان داده نشد) | |||
| خط ۱: | خط ۱: | ||
<html> | <html> | ||
< | <section class="hero-banner"> | ||
<!-- | <!-- پس زمینه --> | ||
<div class="hero- | <div class="hero-bg"></div> | ||
<!-- | <!-- لایه رنگی --> | ||
<div class=" | <div class="hero-overlay"></div> | ||
<div class=" | <!-- محتوا --> | ||
<div class="container"> | |||
<div class="hero-content"> | |||
<h1> | |||
کافه پاتوق محمد | |||
</h1> | |||
<p> | |||
محیطی دنج و دلپذیر | |||
</ | </p> | ||
</div> | |||
</div> | </div> | ||
</ | </section> | ||
<style> | <style> | ||
/* | /*------------------------ | ||
تنظیمات قابل تغییر | |||
-------------------------*/ | |||
.hero- | :root{ | ||
/* تصویر */ | |||
--hero-image:url("https://dl.faraghaib.ir/m/260012/260012-01-18.jpg"); | |||
/* رنگ لایه */ | |||
--overlay-color: rgba(121 , 85 , 72,.72); | |||
/* ارتفاع */ | |||
--hero-height:520px; | |||
/* رنگ متن */ | |||
--text-color:#fff; | |||
/* دکمه */ | |||
--btn-bg:#161a88; | |||
--btn-hover:#0d1267; | |||
/* گردی گوشهها */ | |||
--border-radius: 25px; | |||
} | |||
/*------------------------*/ | |||
*{ | |||
margin:0; | |||
padding:0; | |||
box-sizing:border-box; | |||
} | } | ||
body{ | |||
font-family:tahoma; | |||
direction:rtl; | |||
} | |||
.container{ | |||
width:min(1200px,92%); | |||
margin:auto; | |||
height:100%; | |||
} | |||
.hero-banner{ | |||
position:relative; | |||
height:var(--hero-height); | |||
overflow:hidden; | |||
/* اضافه شده برای گرد کردن گوشهها */ | |||
border-radius: var(--border-radius); | |||
display:flex; | |||
align-items:center; | |||
} | } | ||
.hero-bg{ | |||
position:absolute; | |||
inset:0; | |||
background-image:var(--hero-image); | |||
background-size:cover; | |||
background-position:center; | |||
background-repeat:no-repeat; | |||
z-index:1; | |||
} | |||
.hero-overlay{ | |||
position:absolute; | |||
inset:0; | |||
background:var(--overlay-color); | |||
z-index:2; | |||
} | } | ||
.hero-content{ | |||
position:relative; | |||
z-index:3; | |||
max-width:620px; | |||
margin-right:auto; | |||
margin-right: auto; | |||
color:var(--text-color); | |||
text-align:right; | |||
} | } | ||
.hero-content h1{ | |||
font-size:48px; | |||
line-height:1.6; | |||
margin-bottom:15px; | |||
margin: | |||
font-weight:700; | |||
font-weight: | |||
} | } | ||
.hero-content p{ | |||
font-size:26px; | |||
line-height:1.9; | |||
margin-bottom:35px; | |||
} | } | ||
.hero-btn{ | |||
display:inline-flex; | |||
align-items:center; | |||
justify-content:center; | |||
min-width:190px; | |||
height:58px; | |||
padding:0 30px; | |||
background: | background:var(--btn-bg); | ||
color:#fff; | |||
border-radius:12px; | |||
transition: | text-decoration:none; | ||
transition:.3s; | |||
} | } | ||
.hero-btn:hover { | .hero-btn:hover{ | ||
background:var(--btn-hover); | |||
} | } | ||
/* تبلت */ | |||
@media(max-width:992px){ | |||
.hero-banner{ | |||
height:520px; | |||
} | |||
.hero-content{ | |||
max-width:100%; | |||
} | } | ||
.hero-content { | .hero-content h1{ | ||
font-size:36px; | |||
} | } | ||
.hero-content | .hero-content p{ | ||
font-size: | |||
font-size:22px; | |||
} | } | ||
} | } | ||
/* موبایل */ | |||
@media (max-width: | @media(max-width:768px){ | ||
.hero- | .hero-banner{ | ||
height:430px; | |||
} | } | ||
.hero-content { | .hero-content{ | ||
text-align:center; | |||
margin:auto; | |||
} | } | ||
.hero-content h1 { | .hero-content h1{ | ||
font-size: | |||
font-size:28px; | |||
line-height:1.8; | |||
} | } | ||
.hero-content p { | .hero-content p{ | ||
font-size: | |||
font-size:18px; | |||
margin-bottom:25px; | |||
} | } | ||
.hero-btn { | .hero-btn{ | ||
width:100%; | |||
max-width:260px; | |||
} | } | ||
} | } | ||
</style> | </style> | ||
</html> | </html> | ||
نسخهٔ کنونی تا ۱۶ اوت ۲۰۲۶، ساعت ۱۲:۲۳