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