پرش به محتوا

عطاری حافظ/گیاهان دارویی - فراغیب

از فراغیب
ایجاد صفحه خالی
 
بدون خلاصۀ ویرایش
 
(۷ نسخهٔ میانیِ ایجادشده توسط همین کاربر نشان داده نشد)
خط ۱: خط ۱:
<html lang="fa" dir="rtl">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title></title>
  <style>
    * {
      box-sizing: border-box;
    }


    body {
      margin: 0;
      font-family: Tahoma, Arial, sans-serif;
      background: #f5f7f8;
      color: #222;
    }
    .mt-page {
      max-width: 1280px;
      margin: 0 auto;
      padding: 24px 14px 32px;
    }
    .mt-page__header {
      margin-bottom: 18px;
    }
    .mt-page__title {
      margin: 0;
      font-size: 28px;
      line-height: 1.6;
      font-weight: 700;
      color: #1f2937;
    }
    .mt-cats {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 12px;
      margin-bottom: 18px;
    }
    .mt-cat {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 13px 14px;
      border: 1px solid #e5e7eb;
      border-radius: 12px;
      background: #fff;
      color: #111827;
      text-decoration: none;
      transition: all 0.2s ease;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
    }
    .mt-cat:hover {
      border-color: #2e7d32;
      box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
      transform: translateY(-2px);
    }
    .mt-cat__name {
      font-size: 15px;
      font-weight: 700;
    }
    .mt-cat__count {
      min-width: 32px;
      text-align: center;
      padding: 4px 9px;
      border-radius: 999px;
      background: #f3f4f6;
      color: #374151;
      font-size: 12px;
      font-weight: 700;
    }
    .mt-toolbar {
      display: flex;
      flex-wrap: wrap;
      gap: 10px 16px;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 18px;
      padding: 12px 14px;
      background: #fafafa;
      border: 1px solid #ececec;
      border-radius: 12px;
      color: #4b5563;
      font-size: 14px;
    }
    .mt-toolbar__item strong {
      color: #111827;
    }
    .mt-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
    }
    .mt-card {
      display: flex;
      flex-direction: column;
      background: #fff;
      border: 1px solid #e5e7eb;
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
      transition: all 0.2s ease;
    }
    .mt-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 10px 24px rgba(0, 0, 0, 0.1);
    }
    .mt-card__imgwrap {
      width: 100%;
      aspect-ratio: 1 / 1;
      background: #f9fafb;
      overflow: hidden;
    }
    .mt-card__imgwrap img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .mt-card__meta {
      display: flex;
      justify-content: space-between;
      gap: 8px;
      padding: 12px 14px 0;
      font-size: 13px;
      color: #6b7280;
    }
    .mt-card__stock {
      color: #15803d;
      font-weight: 700;
    }
    .mt-card__brand {
      color: #6b7280;
    }
    .mt-card__title {
      margin: 10px 14px 8px;
      font-size: 17px;
      line-height: 1.8;
      font-weight: 700;
      color: #111827;
      min-height: 62px;
    }
    .mt-card__price {
      margin: 0 14px 16px;
      font-size: 17px;
      font-weight: 700;
      color: #c62828;
    }
    .mt-pagination {
      margin-top: 20px;
      padding: 14px;
      background: #f8fafc;
      border: 1px solid #e5e7eb;
      border-radius: 12px;
      color: #374151;
      font-size: 14px;
    }
    .mt-desc {
      margin-top: 18px;
      padding: 16px;
      border: 1px solid #e5e7eb;
      border-radius: 14px;
      background: #fcfcfc;
      color: #374151;
      line-height: 2.05;
      font-size: 15px;
    }
    .mt-desc p {
      margin: 0 0 12px;
    }
    .mt-desc p:last-child {
      margin-bottom: 0;
    }
    .mt-desc__note {
      font-weight: 700;
      color: #1f2937;
    }
    @media (max-width: 1100px) {
      .mt-cats {
        grid-template-columns: repeat(2, 1fr);
      }
      .mt-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }
    @media (max-width: 640px) {
      .mt-cats,
      .mt-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
      }
      .mt-toolbar {
        flex-direction: column;
        align-items: flex-start;
      }
      .mt-card__meta {
        flex-direction: column;
        align-items: flex-start;
      }
      .mt-card__title {
        font-size: 15px;
        min-height: auto;
      }
      .mt-card__price {
        font-size: 15px;
      }
      .mt-page__title {
        font-size: 24px;
      }
    }
  </style>
</head>
<body>
  <section class="mt-page">
    <div class="mt-page__header">
      <h1 class="mt-page__title"></h1>
    </div>
    <div class="mt-cats">
      <a class="mt-cat" href="#">
        <span class="mt-cat__name">گل ها</span>
        <span class="mt-cat__count">25</span>
      </a>
      <a class="mt-cat" href="#">
        <span class="mt-cat__name">برگ ها</span>
        <span class="mt-cat__count">18</span>
      </a>
      <a class="mt-cat" href="#">
        <span class="mt-cat__name">دانه ها</span>
        <span class="mt-cat__count">43</span>
      </a>
      <a class="mt-cat" href="#">
        <span class="mt-cat__name">پودر ها</span>
        <span class="mt-cat__count">24</span>
      </a>
      <a class="mt-cat" href="#">
        <span class="mt-cat__name">میوه ها</span>
        <span class="mt-cat__count">20</span>
      </a>
      <a class="mt-cat" href="#">
        <span class="mt-cat__name">ریشه ها</span>
        <span class="mt-cat__count">6</span>
      </a>
      <a class="mt-cat" href="#">
        <span class="mt-cat__name">صمغ ها</span>
        <span class="mt-cat__count">9</span>
      </a>
      <a class="mt-cat" href="#">
        <span class="mt-cat__name">سایر موارد</span>
        <span class="mt-cat__count">5</span>
      </a>
    </div>
    <div class="mt-toolbar">
      <div class="mt-toolbar__item">تعداد محصولات: <strong>6</strong></div>
      <div class="mt-toolbar__item">مرتب کردن براساس: جدیدترین</div>
      <div class="mt-toolbar__item">نمایش: 6 محصول</div>
    </div>
    <div class="mt-grid">
      <article class="mt-card">
        <div class="mt-card__imgwrap">
          <img src="https://dl.faraghaib.ir/101.webp" alt="آویشن شیرازی" />
        </div>
        <div class="mt-card__meta">
          <span class="mt-card__stock">موجود</span>
          <span class="mt-card__brand">عطاری حافظ</span>
        </div>
        <h3 class="mt-card__title">آویشن شیرازی</h3>
        <div class="mt-card__price">390,000 تومان</div>
      </article>
      <article class="mt-card">
        <div class="mt-card__imgwrap">
          <img src="https://dl.faraghaib.ir/101.webp" alt="اسطوخودوس" />
        </div>
        <div class="mt-card__meta">
          <span class="mt-card__stock">موجود</span>
          <span class="mt-card__brand">عطاری حافظ</span>
        </div>
        <h3 class="mt-card__title">اسطوخودوس</h3>
        <div class="mt-card__price">390,000 تومان</div>
      </article>
      <article class="mt-card">
        <div class="mt-card__imgwrap">
          <img src="https://dl.faraghaib.ir/101.webp" alt="اسپند" />
        </div>
        <div class="mt-card__meta">
          <span class="mt-card__stock">موجود</span>
          <span class="mt-card__brand">عطاری حافظ</span>
        </div>
        <h3 class="mt-card__title">اسفند</h3>
        <div class="mt-card__price">190,000 تومان</div>
      </article>
      <article class="mt-card">
        <div class="mt-card__imgwrap">
          <img src="https://dl.faraghaib.ir/101.webp" alt="اورگانو" />
        </div>
        <div class="mt-card__meta">
          <span class="mt-card__stock">موجود</span>
          <span class="mt-card__brand">عطاری حافظ</span>
        </div>
        <h3 class="mt-card__title">اورگانو</h3>
        <div class="mt-card__price">490,000 تومان</div>
      </article>
      <article class="mt-card">
        <div class="mt-card__imgwrap">
          <img src="https://dl.faraghaib.ir/101.webp" alt="بادرنجبویه (ملیس)" />
        </div>
        <div class="mt-card__meta">
          <span class="mt-card__stock">موجود</span>
          <span class="mt-card__brand">عطاری حافظ</span>
        </div>
        <h3 class="mt-card__title">بادرنجبویه (ملیس)</h3>
        <div class="mt-card__price">190,000 تومان</div>
      </article>
      <article class="mt-card">
        <div class="mt-card__imgwrap">
          <img src="https://dl.faraghaib.ir/101.webp" alt="برگ بو" />
        </div>
        <div class="mt-card__meta">
          <span class="mt-card__stock">موجود</span>
          <span class="mt-card__brand">عطاری حافظ</span>
        </div>
        <h3 class="mt-card__title">برگ بو</h3>
        <div class="mt-card__price">140,000 تومان</div>
      </article>
    </div>
    <div class="mt-pagination">
      نمایش 1 تا 6 از 6 محصول
    </div>
    <div class="mt-desc">
      <p>
        گیاهان دارویی موجود در فروشگاه اینترنتی عطاری حافظ به صورت گل ها، برگ ها، دانه ها،
        میوه های خشک، ریشه ها، پودر ها، صمغ ها و سایر اشکال گیاهان دارویی عرضه می شوند.
      </p>
      <p>
        این محصولات برای کاربردهای مختلفی مانند آرامش اعصاب، بهبود خواب، کمک به هضم،
        کاهش نفخ، تقویت سیستم ایمنی، پاکسازی بدن و استفاده در دمنوش ها و مصارف سنتی انتخاب می شوند.
      </p>
      <p class="mt-desc__note">
        برای مشاهده اطلاعات کامل هر محصول، روی کارت محصول مورد نظر کلیک کنید.
      </p>
    </div>
  </section>
</body>
</html>

نسخهٔ کنونی تا ‏۲۲ ژوئیهٔ ۲۰۲۶، ساعت ۱۳:۱۳

تعداد محصولات: 6
مرتب کردن براساس: جدیدترین
نمایش: 6 محصول
آویشن شیرازی
موجود عطاری حافظ

آویشن شیرازی

390,000 تومان
اسطوخودوس
موجود عطاری حافظ

اسطوخودوس

390,000 تومان
اسپند
موجود عطاری حافظ

اسفند

190,000 تومان
اورگانو
موجود عطاری حافظ

اورگانو

490,000 تومان
بادرنجبویه (ملیس)
موجود عطاری حافظ

بادرنجبویه (ملیس)

190,000 تومان
برگ بو
موجود عطاری حافظ

برگ بو

140,000 تومان
نمایش 1 تا 6 از 6 محصول

گیاهان دارویی موجود در فروشگاه اینترنتی عطاری حافظ به صورت گل ها، برگ ها، دانه ها، میوه های خشک، ریشه ها، پودر ها، صمغ ها و سایر اشکال گیاهان دارویی عرضه می شوند.

این محصولات برای کاربردهای مختلفی مانند آرامش اعصاب، بهبود خواب، کمک به هضم، کاهش نفخ، تقویت سیستم ایمنی، پاکسازی بدن و استفاده در دمنوش ها و مصارف سنتی انتخاب می شوند.

برای مشاهده اطلاعات کامل هر محصول، روی کارت محصول مورد نظر کلیک کنید.