فراغیب

عطاری حافظ/گیاهان دارویی: تفاوت میان نسخه‌ها

تفاوت با ویرایش جدیدتر ←
دیداریویکی‌متن
ایجاد صفحه خالی
 
بدون خلاصۀ ویرایش
خط ۱: خط ۱:


<html>
<section class="products-section" dir="rtl">
  <h2 class="products-section__title">محصولات گیاهان دارویی</h2>
  <div class="products-grid">
    <article class="product-card">
      <div class="product-card__meta">
        <span class="product-card__stock">موجود</span>
        <span class="product-card__brand">مرهم طب</span>
      </div>
      <h3 class="product-card__title">فلفل دانه رنگی</h3>
      <div class="product-card__price">890,000 تومان</div>
      <div class="product-card__actions">
        <a href="#" class="product-card__btn product-card__btn--primary">اکنون بخرید</a>
        <a href="#" class="product-card__btn">لیست دلخواه</a>
      </div>
    </article>
    <article class="product-card">
      <div class="product-card__meta">
        <span class="product-card__stock">موجود</span>
        <span class="product-card__brand">مرهم طب</span>
      </div>
      <h3 class="product-card__title">آویشن شیرازی</h3>
      <div class="product-card__price">390,000 تومان</div>
      <div class="product-card__actions">
        <a href="#" class="product-card__btn product-card__btn--primary">اکنون بخرید</a>
        <a href="#" class="product-card__btn">لیست دلخواه</a>
      </div>
    </article>
    <article class="product-card">
      <div class="product-card__meta">
        <span class="product-card__stock">موجود</span>
        <span class="product-card__brand">مرهم طب</span>
      </div>
      <h3 class="product-card__title">اسطوخودوس</h3>
      <div class="product-card__price">390,000 تومان</div>
      <div class="product-card__actions">
        <a href="#" class="product-card__btn product-card__btn--primary">اکنون بخرید</a>
        <a href="#" class="product-card__btn">لیست دلخواه</a>
      </div>
    </article>
    <article class="product-card">
      <div class="product-card__meta">
        <span class="product-card__stock">موجود</span>
        <span class="product-card__brand">مرهم طب</span>
      </div>
      <h3 class="product-card__title">اسفند</h3>
      <div class="product-card__price">190,000 تومان</div>
      <div class="product-card__actions">
        <a href="#" class="product-card__btn product-card__btn--primary">اکنون بخرید</a>
        <a href="#" class="product-card__btn">لیست دلخواه</a>
      </div>
    </article>
    <article class="product-card">
      <div class="product-card__meta">
        <span class="product-card__stock">موجود</span>
        <span class="product-card__brand">مرهم طب</span>
      </div>
      <h3 class="product-card__title">اورگانو</h3>
      <div class="product-card__price">490,000 تومان</div>
      <div class="product-card__actions">
        <a href="#" class="product-card__btn product-card__btn--primary">اکنون بخرید</a>
        <a href="#" class="product-card__btn">لیست دلخواه</a>
      </div>
    </article>
    <article class="product-card">
      <div class="product-card__meta">
        <span class="product-card__stock">موجود</span>
        <span class="product-card__brand">مرهم طب</span>
      </div>
      <h3 class="product-card__title">بادرنجبویه (ملیس)</h3>
      <div class="product-card__price">190,000 تومان</div>
      <div class="product-card__actions">
        <a href="#" class="product-card__btn product-card__btn--primary">اکنون بخرید</a>
        <a href="#" class="product-card__btn">لیست دلخواه</a>
      </div>
    </article>
    <article class="product-card">
      <div class="product-card__meta">
        <span class="product-card__stock">موجود</span>
        <span class="product-card__brand">مرهم طب</span>
      </div>
      <h3 class="product-card__title">بادیان ستاره ای</h3>
      <div class="product-card__price">قیمت نامشخص</div>
      <div class="product-card__actions">
        <a href="#" class="product-card__btn product-card__btn--primary">اکنون بخرید</a>
        <a href="#" class="product-card__btn">لیست دلخواه</a>
      </div>
    </article>
    <article class="product-card">
      <div class="product-card__meta">
        <span class="product-card__stock">موجود</span>
        <span class="product-card__brand">مرهم طب</span>
      </div>
      <h3 class="product-card__title">بارهنگ</h3>
      <div class="product-card__price">قیمت نامشخص</div>
      <div class="product-card__actions">
        <a href="#" class="product-card__btn product-card__btn--primary">اکنون بخرید</a>
        <a href="#" class="product-card__btn">لیست دلخواه</a>
      </div>
    </article>
    <article class="product-card">
      <div class="product-card__meta">
        <span class="product-card__stock">موجود</span>
        <span class="product-card__brand">مرهم طب</span>
      </div>
      <h3 class="product-card__title">برگ بو</h3>
      <div class="product-card__price">140,000 تومان</div>
      <div class="product-card__actions">
        <a href="#" class="product-card__btn product-card__btn--primary">اکنون بخرید</a>
        <a href="#" class="product-card__btn">لیست دلخواه</a>
      </div>
    </article>
    <article class="product-card">
      <div class="product-card__meta">
        <span class="product-card__stock">موجود</span>
        <span class="product-card__brand">مرهم طب</span>
      </div>
      <h3 class="product-card__title">برگ نعناع فلفلی</h3>
      <div class="product-card__price">290,000 تومان</div>
      <div class="product-card__actions">
        <a href="#" class="product-card__btn product-card__btn--primary">اکنون بخرید</a>
        <a href="#" class="product-card__btn">لیست دلخواه</a>
      </div>
    </article>
    <article class="product-card">
      <div class="product-card__meta">
        <span class="product-card__stock">موجود</span>
        <span class="product-card__brand">مرهم طب</span>
      </div>
      <h3 class="product-card__title">به دانه</h3>
      <div class="product-card__price">240,000 تومان</div>
      <div class="product-card__actions">
        <a href="#" class="product-card__btn product-card__btn--primary">اکنون بخرید</a>
        <a href="#" class="product-card__btn">لیست دلخواه</a>
      </div>
    </article>
    <article class="product-card">
      <div class="product-card__meta">
        <span class="product-card__stock">موجود</span>
        <span class="product-card__brand">مرهم طب</span>
      </div>
      <h3 class="product-card__title">به لیمو (ورون)</h3>
      <div class="product-card__price">340,000 تومان</div>
      <div class="product-card__actions">
        <a href="#" class="product-card__btn product-card__btn--primary">اکنون بخرید</a>
        <a href="#" class="product-card__btn">لیست دلخواه</a>
      </div>
    </article>
  </div>
</section>
<style>
  .products-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px 16px;
    font-family: Tahoma, sans-serif;
  }
  .products-section__title {
    margin: 0 0 16px;
    font-size: 28px;
    color: #222;
  }
  .products-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
  }
  .product-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transition: 0.2s ease;
  }
  .product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.08);
  }
  .product-card__meta {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 13px;
    color: #666;
  }
  .product-card__stock {
    color: #1b8f3a;
    font-weight: 700;
  }
  .product-card__brand {
    background: #f5f6f8;
    padding: 4px 8px;
    border-radius: 999px;
  }
  .product-card__title {
    margin: 0 0 12px;
    font-size: 18px;
    line-height: 1.8;
    color: #111;
    min-height: 64px;
  }
  .product-card__price {
    margin-bottom: 14px;
    font-size: 18px;
    font-weight: 700;
    color: #c62828;
  }
  .product-card__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .product-card__btn {
    display: inline-block;
    text-align: center;
    padding: 10px 12px;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    text-decoration: none;
    color: #333;
    background: #fff;
    transition: 0.2s ease;
    font-size: 14px;
    font-weight: 700;
  }
  .product-card__btn:hover {
    background: #f8fafc;
  }
  .product-card__btn--primary {
    background: #2e7d32;
    border-color: #2e7d32;
    color: #fff;
  }
  .product-card__btn--primary:hover {
    background: #256b2a;
  }
  @media (max-width: 992px) {
    .products-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  @media (max-width: 576px) {
    .products-grid {
      grid-template-columns: 1fr;
    }
    .product-card__actions {
      grid-template-columns: 1fr;
    }
  }
</style>
</html>
برگرفته از «https://fa.faraghaib.ir/wiki/عطاری_حافظ/گیاهان_دارویی»