تست برای چاپ: تفاوت میان نسخهها
بدون خلاصۀ ویرایش |
بدون خلاصۀ ویرایش |
||
| خط ۴۱۰: | خط ۴۱۰: | ||
.about{ | .about{ | ||
color: #FFF8C9; | |||
text-align:center; | |||
padding:45px 0; | |||
} | |||
.my-div { | |||
position: relative; | |||
width: 100%; | |||
min-height: 220px; | |||
background: | |||
url("https://dl.faraghaib.ir/m/260023-01/260023-01-13.png") | |||
center / cover | |||
no-repeat; | |||
} | |||
. | /* لایه خاکستری شفاف */ | ||
.my-div::before { | |||
content: ""; | |||
position: absolute; | |||
inset: 0; | |||
background: rgba(80, 80, 80, 0.5); | |||
} | |||
/* محتوای روی تصویر */ | |||
.my-div > * { | |||
position: relative; | |||
z-index: 1; | |||
} | |||
/* تبلت */ | |||
@media (min-width: 768px) { | |||
.my-div { | |||
min-height: 300px; | |||
} | |||
} | |||
/* دسکتاپ */ | |||
@media (min-width: 1024px) { | |||
.my-div { | |||
min-height: 400px; | |||
} | |||
} | } | ||
| خط ۵۰۵: | خط ۵۳۴: | ||
</header> | </header> | ||
<section class="services"> | <section class="services"> | ||
| خط ۶۳۷: | خط ۶۴۹: | ||
<section class="about"> | <section class="my-div about"> | ||
| خط ۶۹۷: | خط ۷۰۹: | ||
</h2> | </h2> | ||
</div> | </div> | ||