فراغیب

الگو:کانتینر کله قندی/کاووسی: تفاوت میان نسخه‌ها

تفاوت با ویرایش جدیدتر ←
دیداریویکی‌متن
صفحه‌ای تازه حاوی «<html> <!-- استایل پیشنهادی --> <style> .ad-container { display: flex; flex-wrap: wrap; gap: 15px; justify-content: center; padding: 20px; } .ad-card { flex: 1 1 calc(20% - 20px); ←برای ۵ تا در دسکتاپ: min-width: 200px; text-align: center; background: #fff; padding-bottom: 20px; } .orange-box {...» ایجاد کرد
 
بدون خلاصۀ ویرایش
خط ۱: خط ۱:
<html>
<html>
<!-- استایل پیشنهادی -->
<style>
<style>
     .ad-container {
     .ad-container {
         display: flex;
         display: flex;
         flex-wrap: wrap;
         flex-wrap: wrap;
         gap: 15px;
         gap: 20px;
         justify-content: center;
         justify-content: center;
         padding: 20px;
         padding: 20px;
خط ۱۲: خط ۱۰:


     .ad-card {
     .ad-card {
         flex: 1 1 calc(20% - 20px); /* برای ۵ تا در دسکتاپ */
         flex: 1 1 180px; /* تنظیم برای ریسپانسیو شدن */
        min-width: 200px;
         text-align: center;
         text-align: center;
         background: #fff;
         max-width: 250px;
        padding-bottom: 20px;
     }
     }


     .orange-box {
     .orange-box {
         background-color: #ff8c00;
         background-color: #ff8c00;
         border-radius: 20px 20px 0 0;
         height: 280px;
         height: 250px;
        /* این خط جادوی اصلی برای ایجاد حالت کله‌قندی است */
        clip-path: polygon(0 0, 100% 0, 100% 85%, 50% 100%, 0 85%);
          
         display: flex;
         display: flex;
         flex-direction: column;
         flex-direction: column;
         align-items: center;
         align-items: center;
         justify-content: flex-end;
         justify-content: flex-start;
         padding-bottom: 20px;
         padding-top: 40px;
         position: relative;
         color: white;
     }
     }


     .orange-box img { width: 80%; height: auto; margin-bottom: 15px; }
     .orange-box img {
        width: 70%;
        height: auto;
        margin-bottom: 20px;
    }


     .ad-card h3 { font-size: 1.2rem; margin-top: 10px; }
     .card-title {
   
        margin-top: 15px;
    /* Mobile First */
        font-weight: bold;
    @media (max-width: 768px) {
         font-size: 1.2rem;
         .ad-card { flex: 1 1 calc(50% - 15px); } /* ۲ تا در هر ردیف موبایل */
     }
     }
</style>
</style>


<!-- ساختار HTML -->
<!-- ساختار HTML -->
<section class="ad-container">
<div class="ad-container">
     <!-- آیتم دوربین مداربسته -->
     <!-- آیتم ۱ -->
 
     <article class="ad-card">
     <article class="ad-card">
         <div class="orange-box">
         <div class="orange-box">
             <img src="cctv-camera.webp" alt="نصب و فروش دوربین مداربسته" title="دوربین مداربسته">
             <img src="cctv.png" alt="دوربین مداربسته">
             <p>نصب و فروش دوربین مداربسته</p>
             <p>نصب و فروش آسان</p>
             <strong>با آگهی آنلاین</strong>
             <span>با آگهی آنلاین</span>
         </div>
         </div>
         <h3>دوربین مداربسته</h3>
         <h3 class="card-title">دوربین مداربسته</h3>
     </article>
     </article>
   
    <!-- کافیست همین بلوک article را تکرار کنید (تا ۵ یا هر تعداد) -->
</div>
    
    


برگرفته از «https://fa.faraghaib.ir/wiki/الگو:کانتینر_کله_قندی/کاووسی»