الگو:بخش اطلاعات تماس/پوشاک بابازاده: تفاوت میان نسخهها
Esfandiari (بحث | مشارکتها) صفحهای تازه حاوی «<div style="width:100%; max-width:1000px; margin: 1px auto; padding: 5px; direction: rtl; text-align: right; background-color: #ffffff; border: 1px solid #89CFF0; border-radius: 12px; box-sizing: border-box;"> <div class="wiki-custom-card"> <div class="wiki-custom-body"> <div class="wiki-list-item"> <b style="display: block; margin-bottom: 10px;">جهت دریافت اطلاعات بیشتر و پشتیبانی، از راههای...» ایجاد کرد |
Esfandiari (بحث | مشارکتها) بدون خلاصۀ ویرایش |
||
| خط ۱: | خط ۱: | ||
< | <html> | ||
< | <style> | ||
.deniz-contact-card { | |||
width: 100%; | |||
max-width: 1100px; | |||
margin: 20px auto; | |||
padding: 30px 20px; | |||
/* رنگ پسزمینه مناسب پوشاک و شلوار فروشی */ | |||
background-color: #2d3436; | |||
border-radius: 12px; | |||
box-shadow: 0 8px 20px rgba(0,0,0,0.2); | |||
box-sizing: border-box; | |||
display: flex; | |||
justify-content: center; | |||
} | |||
.icons-row { | |||
display: flex; | |||
justify-content: space-around; | |||
align-items: center; | |||
flex-wrap: wrap; | |||
gap: 20px; | |||
width: 100%; | |||
} | |||
.icon-wrapper { | |||
display: flex; | |||
flex-direction: column; | |||
align-items: center; | |||
text-decoration: none; | |||
transition: transform 0.3s ease; | |||
} | |||
.icon-wrapper:hover { | |||
transform: scale(1.15); /* افکت حرکتی روی عکس */ | |||
} | |||
</ | .icon-wrapper img { | ||
</ | width: 50px; | ||
</ | height: 50px; | ||
</ | object-fit: contain; | ||
filter: brightness(0) invert(1); /* سفید کردن آیکونها برای خوانایی در پسزمینه تیره */ | |||
} | |||
@media (max-width: 600px) { | |||
.icon-wrapper img { | |||
width: 40px; | |||
height: 40px; | |||
} | |||
.icons-row { gap: 15px; } | |||
} | |||
</style> | |||
<section class="deniz-contact-card" aria-label="راههای ارتباطی"> | |||
<nav class="icons-row"> | |||
<!-- 1: تماس --> | |||
<a href="tel:09333009575" class="icon-wrapper" title="تماس تلفنی"> | |||
<img src="https://dl.faraghaib.ir/m/100/phone.png" alt="تماس" loading="lazy"> | |||
</a> | |||
<!-- 2: تلگرام --> | |||
<a href="https://t.me/attarihafez_ir" class="icon-wrapper" title="تلگرام" target="_blank"> | |||
<img src="https://dl.faraghaib.ir/m/100/telegram.png" alt="تلگرام" loading="lazy"> | |||
</a> | |||
<!-- 3: آدرس --> | |||
<a href="https://neshan.org/maps/places/19087e7434f593216155a7c6bde38efd#c26.681-61.665-22z-0p" class="icon-wrapper" title="آدرس روی نقشه" target="_blank"> | |||
<img src="https://dl.faraghaib.ir/m/100/loc.png" alt="آدرس" loading="lazy"> | |||
</a> | |||
<!-- 4: مشاوره --> | |||
<a href="tel:09188816696" class="icon-wrapper" title="مشاوره خرید" target="_blank"> | |||
<img src="https://dl.faraghaib.ir/m/100/chat.png" alt="مشاوره" loading="lazy"> | |||
</a> | |||
<!-- 5: اینستاگرام --> | |||
<a href="https://instagram.com/attarihafez" class="icon-wrapper" title="اینستاگرام" target="_blank"> | |||
<img src="https://dl.faraghaib.ir/m/100/insta.png" alt="اینستاگرام" loading="lazy"> | |||
</a> | |||
</nav> | |||
</section> | |||
</html> | |||