فراغیب

الگو:کاشی های نامنظم: تفاوت میان نسخه‌ها

دیداریویکی‌متن
صفحه‌ای تازه حاوی «<!DOCTYPE html> <html lang="fa" dir="rtl"> <head> <meta charset="UTF-8"> <style> .grid-container { display: grid; gap: 20px; padding: 20px; grid-template-columns: repeat(12, 1fr); grid-template-rows: auto auto; max-width: 1200px; margin: auto; } .card { border-radius: 12px; padding: 25px; color: white; position: relative...» ایجاد کرد
 
بدون خلاصۀ ویرایش
 
خط ۱: خط ۱:
<!DOCTYPE html>
 
<html lang="fa" dir="rtl">
<html lang="fa" dir="rtl">
<head>
<head>
     <meta charset="UTF-8">
     <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <style>
     <style>
         .grid-container {
        * { box-sizing: border-box; font-family: Tahoma, sans-serif; }
       
         .container {
             display: grid;
             display: grid;
            grid-template-columns: repeat(12, 1fr);
             gap: 20px;
             gap: 20px;
            padding: 20px;
            grid-template-columns: repeat(12, 1fr);
            grid-template-rows: auto auto;
             max-width: 1200px;
             max-width: 1200px;
             margin: auto;
             margin: 40px auto;
            padding: 0 20px;
         }
         }


         .card { border-radius: 12px; padding: 25px; color: white; position: relative; overflow: hidden; }
         .card {
            border-radius: 20px;
            padding: 30px;
            color: white;
            display: flex;
            flex-direction: column;
            justify-content: center;
            transition: transform 0.3s ease;
        }
          
          
         /* تعریف چیدمان اصلی */
        .card:hover { transform: translateY(-5px); }
         .gift-card { grid-column: span 8; background: #4a90e2; }
 
         .stationery-card { grid-column: span 4; grid-row: span 2; background: #50c8c1; }
         /* رنگ‌بندی شاد و مدرن */
         .paper-card { grid-column: span 4; background: #8e44ad; }
         .card-stationery { grid-column: span 6; grid-row: span 2; background: linear-gradient(135deg, #FF9A9E 0%, #Fec163 100%); min-height: 400px; }
         .machine-card { grid-column: span 4; background: #3498db; }
         .card-gift { grid-column: span 6; background: linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%); }
         .card-paper { grid-column: span 3; background: linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%); }
         .card-machine { grid-column: span 3; background: linear-gradient(135deg, #ff9a8b 0%, #ff6a88 100%); }
 
        h2 { margin: 0 0 15px 0; font-size: 1.8rem; }
        p { font-size: 1rem; opacity: 0.9; }


        /* استایل دکمه‌ها */
         .btn {
         .btn { background: rgba(255,255,255,0.2); padding: 10px 20px; border-radius: 5px; cursor: pointer; display: inline-block; border: none; color: white; margin-top: 15px; }
            background: white;
            color: #333;
            padding: 12px 25px;
            border-radius: 30px;
            text-decoration: none;
            width: fit-content;
            margin-top: 20px;
            font-weight: bold;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        }


         /* ریسپانسیو برای موبایل */
         /* ریسپانسیو */
         @media (max-width: 768px) {
         @media (max-width: 992px) {
             .grid-container { grid-template-columns: 1fr; }
             .card-stationery { grid-column: span 12; grid-row: auto; min-height: 250px; }
             .card { grid-column: span 1 !important; }
             .card-gift, .card-paper, .card-machine { grid-column: span 12; }
         }
         }
     </style>
     </style>
خط ۳۴: خط ۵۸:
<body>
<body>


<div class="grid-container">
<div class="container">
     <!-- بخش هدایای تبلیغاتی -->
     <!-- کارت بزرگ لوازم تحریر -->
     <div class="card gift-card">
     <div class="card card-stationery">
         <h2>انواع هدایای تبلیغاتی</h2>
         <h2>فروشگاه لوازم تحریر به وسعت ایران</h2>
         <button class="btn">مشاهده محصولات</button>
         <p>فروشگاه پرشین خورشید تهران با تنوعی بی‌نظیر در محصولات لوازم تحریر مدارس و اداری</p>
        <a href="#" class="btn">مشاهده محصولات</a>
     </div>
     </div>


     <!-- بخش لوازم تحریر (بزرگ سمت راست) -->
     <!-- سه کارت دیگر -->
     <div class="card stationery-card">
     <div class="card card-gift">
         <h2>فروشگاه لوازم تحریر به وسعت ایران</h2>
         <h2>هدایای تبلیغاتی</h2>
         <p>فروشگاه پرشین خورشید تهران با تنوعی بی‌نظیر در محصولات لوازم تحریر مدارس و اداری</p>
         <a href="#" class="btn">مشاهده محصولات</a>
        <button class="btn">مشاهده محصولات</button>
     </div>
     </div>


    <!-- بخش کاغذ و مقوا -->
     <div class="card card-paper">
     <div class="card paper-card">
         <h2>کاغذ و مقوا</h2>
         <h2>انواع کاغذ و مقوا</h2>
         <a href="#" class="btn">جزئیات</a>
         <p>سایز و رنگ متنوع</p>
        <button class="btn">اطلاعات بیشتر</button>
     </div>
     </div>


    <!-- بخش ماشین اداری -->
     <div class="card card-machine">
     <div class="card machine-card">
         <h2>ماشین‌های اداری</h2>
         <h2>انواع ماشین اداری</h2>
         <a href="#" class="btn">جزئیات</a>
         <p>ماشین اداری و لوازم مصرفی</p>
        <button class="btn">اطلاعات بیشتر</button>
     </div>
     </div>
</div>
</div>
برگرفته از «https://fa.faraghaib.ir/wiki/الگو:کاشی_های_نامنظم»