لایه شفاف روی عکس/کافه محمد - فراغیب
بدون خلاصۀ ویرایش برچسبها: واگردانی دستی برگرداندهشده |
بدون خلاصۀ ویرایش برچسب: واگردانی دستی |
||
| خط ۱: | خط ۱: | ||
<html> | <html> | ||
< | <!-- پس زمینه --> | ||
<div class="hero-bg"></div> | |||
<!-- لایه رنگی --> | |||
<div class="hero-overlay"></div> | |||
<!-- محتوا --> | |||
<div class="container"> | |||
<div class="hero-content"> | |||
<div class=" | |||
<h1 style="color:#D7CCC8;"> | |||
کافه پاتوق محمد | |||
</h1> | |||
< | <span style="color:#D7CCC8;font-size: 2rem;"> | ||
<strog> محیطی دنج و دلپذیر برای ساخت لحظات بهتر</strong><br> | |||
</span> | |||
<a href="#" class="hero-btn"> | |||
رزرو و سفارش آنلاین | |||
</a> | |||
</div> | </div> | ||
</ | </div> | ||
<style> | <style> | ||
/* | /* ========================= | ||
Hero Background | |||
========================= */ | |||
.hero-bg { | |||
position: absolute; | |||
inset: 0; | |||
width: 100%; | |||
height: 100%; | |||
/ | background-image: url("https://dl.faraghaib.ir/m/260012/26001207.jpg"); | ||
-- | background-size: cover; | ||
background-position: center; | |||
z-index: 1; | |||
} | } | ||
* | /* ========================= | ||
لایه شفاف منحنی | |||
========================= */ | |||
.hero-overlay { | |||
position: absolute; | |||
top: 0; | |||
right: 0; | |||
width: 58%; | |||
height: 100%; | |||
/* | |||
لایه شفاف از سمت راست شروع میشود | |||
و سمت چپ آن به صورت منحنی وارد تصویر میشود | |||
*/ | |||
background: rgba(121 , 85 , 72,.72); | |||
z-index: 2; | |||
/* | |||
ایجاد منحنی در لبه سمت چپ | |||
*/ | |||
clip-path: ellipse(100% 85% at 100% 50%); | |||
} | } | ||
/* ========================= | |||
Container | |||
========================= */ | |||
.container { | |||
position: relative; | |||
z-index: 3; | |||
width: 100%; | |||
max-width: 1200px; | |||
height: 100%; | |||
margin: 0 auto; | |||
display: flex; | |||
align-items: center; | |||
} | } | ||
/* ========================= | |||
محتوای Hero | |||
========================= */ | |||
.hero-content { | |||
width: 50%; | |||
margin-right: auto; | |||
text-align: right; | |||
padding: 40px; | |||
box-sizing: border-box; | |||
color: | color: #BCAAA4; | ||
} | } | ||
/* عنوان */ | |||
.hero-content h1 { | |||
margin: 0 0 15px; | |||
font-size: 42px; | |||
line-height: 1.4; | |||
font-weight: | font-weight: 800; | ||
} | } | ||
/* توضیحات */ | |||
.hero-content p { | |||
margin: 0 0 25px; | |||
font-size: 20px; | |||
line-height: 1.8; | |||
} | } | ||
/* ========================= | |||
دکمه | |||
========================= */ | |||
.hero-btn { | |||
display: inline-block; | |||
padding: 13px 28px; | |||
border-radius: 50px; | |||
background: #ffffff; | |||
color: #222; | |||
text-decoration: none; | |||
font-size: 16px; | |||
font-weight: 700; | |||
transition: all 0.3s ease; | |||
} | |||
.hero-btn:hover { | |||
transform: translateY(-2px); | |||
opacity: 0.9; | |||
} | } | ||
/* ========================= | |||
Responsive | |||
========================= */ | |||
@media (max-width: 768px) { | |||
.hero-overlay { | |||
width: 75%; | |||
clip-path: ellipse( | |||
100% 85% | |||
at 100% 50% | |||
); | |||
} | |||
. | .container { | ||
justify-content: center; | |||
} | } | ||
.hero-content{ | .hero-content { | ||
width: 70%; | |||
padding: 25px; | |||
text-align: center; | |||
} | } | ||
.hero-content h1{ | .hero-content h1 { | ||
font-size: 30px; | |||
font-size: | |||
} | } | ||
.hero-content p{ | .hero-content p { | ||
font-size: 17px; | |||
font-size: | |||
} | } | ||
} | } | ||
@media(max-width: | @media (max-width: 480px) { | ||
.hero- | .hero-overlay { | ||
width: 100%; | |||
/* | |||
در موبایل لایه تقریباً کل تصویر را میگیرد | |||
ولی همچنان لبه منحنی حفظ میشود | |||
*/ | |||
clip-path: ellipse( | |||
110% 85% | |||
at 100% 50% | |||
); | |||
} | } | ||
.hero-content{ | .hero-content { | ||
width: 90%; | |||
padding: 20px; | |||
} | } | ||
.hero-content h1{ | .hero-content h1 { | ||
font-size: 26px; | |||
font-size: | |||
} | } | ||
.hero-content p{ | .hero-content p { | ||
font-size: 16px; | |||
font-size: | |||
} | } | ||
.hero-btn{ | .hero-btn { | ||
padding: 11px 22px; | |||
font-size: 15px; | |||
} | } | ||
} | } | ||
</style> | |||
</html> | </html> | ||
نسخهٔ ۸ اوت ۲۰۲۶، ساعت ۰۸:۲۷