پرش به محتوا

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

از فراغیب
→ تفاوت با ویرایش قدیمی‌تر
دیداریویکی‌متن
بدون خلاصۀ ویرایش
بدون خلاصۀ ویرایش
 
(۶ نسخهٔ میانیِ ایجادشده توسط همین کاربر نشان داده نشد)
خط ۱: خط ۱:
<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;
    }


<html>
    .mt-page__header {
<section class="products-section" dir="rtl">
      margin-bottom: 18px;
  <h2 class="products-section__title">محصولات گیاهان دارویی</h2>
    }


  <div class="products-grid">
     .mt-page__title {
     <article class="product-card">
       margin: 0;
       <div class="product-card__meta">
      font-size: 28px;
        <span class="product-card__stock">موجود</span>
       line-height: 1.6;
        <span class="product-card__brand">مرهم طب</span>
       font-weight: 700;
       </div>
       color: #1f2937;
      <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">
     .mt-cats {
       <div class="product-card__meta">
       display: grid;
        <span class="product-card__stock">موجود</span>
       grid-template-columns: repeat(4, 1fr);
        <span class="product-card__brand">مرهم طب</span>
       gap: 12px;
       </div>
      margin-bottom: 18px;
      <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">
     .mt-cat {
       <div class="product-card__meta">
       display: flex;
        <span class="product-card__stock">موجود</span>
      justify-content: space-between;
        <span class="product-card__brand">مرهم طب</span>
      align-items: center;
       </div>
       padding: 13px 14px;
       <h3 class="product-card__title">اسطوخودوس</h3>
       border: 1px solid #e5e7eb;
       <div class="product-card__price">390,000 تومان</div>
       border-radius: 12px;
       <div class="product-card__actions">
       background: #fff;
        <a href="#" class="product-card__btn product-card__btn--primary">اکنون بخرید</a>
      color: #111827;
        <a href="#" class="product-card__btn">لیست دلخواه</a>
      text-decoration: none;
       </div>
      transition: all 0.2s ease;
     </article>
       box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
     }


     <article class="product-card">
     .mt-cat:hover {
       <div class="product-card__meta">
       border-color: #2e7d32;
        <span class="product-card__stock">موجود</span>
       box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
        <span class="product-card__brand">مرهم طب</span>
       transform: translateY(-2px);
      </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">
     .mt-cat__name {
       <div class="product-card__meta">
       font-size: 15px;
        <span class="product-card__stock">موجود</span>
       font-weight: 700;
        <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">
     .mt-cat__count {
       <div class="product-card__meta">
       min-width: 32px;
        <span class="product-card__stock">موجود</span>
      text-align: center;
        <span class="product-card__brand">مرهم طب</span>
       padding: 4px 9px;
       </div>
       border-radius: 999px;
       <h3 class="product-card__title">بادرنجبویه (ملیس)</h3>
       background: #f3f4f6;
       <div class="product-card__price">190,000 تومان</div>
       color: #374151;
       <div class="product-card__actions">
      font-size: 12px;
        <a href="#" class="product-card__btn product-card__btn--primary">اکنون بخرید</a>
       font-weight: 700;
        <a href="#" class="product-card__btn">لیست دلخواه</a>
     }
       </div>
     </article>


     <article class="product-card">
     .mt-toolbar {
       <div class="product-card__meta">
       display: flex;
        <span class="product-card__stock">موجود</span>
      flex-wrap: wrap;
        <span class="product-card__brand">مرهم طب</span>
      gap: 10px 16px;
       </div>
       align-items: center;
       <h3 class="product-card__title">بادیان ستاره ای</h3>
       justify-content: space-between;
       <div class="product-card__price">قیمت نامشخص</div>
       margin-bottom: 18px;
       <div class="product-card__actions">
       padding: 12px 14px;
        <a href="#" class="product-card__btn product-card__btn--primary">اکنون بخرید</a>
      background: #fafafa;
        <a href="#" class="product-card__btn">لیست دلخواه</a>
      border: 1px solid #ececec;
       </div>
      border-radius: 12px;
     </article>
      color: #4b5563;
       font-size: 14px;
     }


     <article class="product-card">
     .mt-toolbar__item strong {
       <div class="product-card__meta">
       color: #111827;
        <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">
     .mt-grid {
       <div class="product-card__meta">
       display: grid;
        <span class="product-card__stock">موجود</span>
       grid-template-columns: repeat(3, 1fr);
        <span class="product-card__brand">مرهم طب</span>
       gap: 16px;
      </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">
     .mt-card {
       <div class="product-card__meta">
       display: flex;
        <span class="product-card__stock">موجود</span>
      flex-direction: column;
        <span class="product-card__brand">مرهم طب</span>
      background: #fff;
       </div>
       border: 1px solid #e5e7eb;
       <h3 class="product-card__title">برگ نعناع فلفلی</h3>
       border-radius: 16px;
       <div class="product-card__price">290,000 تومان</div>
       overflow: hidden;
       <div class="product-card__actions">
       box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        <a href="#" class="product-card__btn product-card__btn--primary">اکنون بخرید</a>
       transition: all 0.2s ease;
        <a href="#" class="product-card__btn">لیست دلخواه</a>
     }
       </div>
     </article>


     <article class="product-card">
     .mt-card:hover {
       <div class="product-card__meta">
       transform: translateY(-4px);
        <span class="product-card__stock">موجود</span>
       box-shadow: 0 10px 24px rgba(0, 0, 0, 0.1);
        <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">
     .mt-card__imgwrap {
       <div class="product-card__meta">
       width: 100%;
        <span class="product-card__stock">موجود</span>
       aspect-ratio: 1 / 1;
        <span class="product-card__brand">مرهم طب</span>
       background: #f9fafb;
      </div>
       overflow: hidden;
      <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>
    .mt-card__imgwrap img {
  .products-section {
      width: 100%;
    max-width: 1200px;
      height: 100%;
    margin: 0 auto;
      object-fit: cover;
    padding: 24px 16px;
      display: block;
    font-family: Tahoma, sans-serif;
    }
  }


  .products-section__title {
    .mt-card__meta {
    margin: 0 0 16px;
      display: flex;
    font-size: 28px;
      justify-content: space-between;
    color: #222;
      gap: 8px;
  }
      padding: 12px 14px 0;
      font-size: 13px;
      color: #6b7280;
    }


  .products-grid {
    .mt-card__stock {
    display: grid;
      color: #15803d;
    grid-template-columns: repeat(4, minmax(0, 1fr));
      font-weight: 700;
     gap: 16px;
     }
  }


  .product-card {
    .mt-card__brand {
    background: #fff;
      color: #6b7280;
    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 {
    .mt-card__title {
    transform: translateY(-4px);
      margin: 10px 14px 8px;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.08);
      font-size: 17px;
  }
      line-height: 1.8;
      font-weight: 700;
      color: #111827;
      min-height: 62px;
    }


  .product-card__meta {
    .mt-card__price {
    display: flex;
      margin: 0 14px 16px;
    justify-content: space-between;
      font-size: 17px;
    gap: 8px;
      font-weight: 700;
     margin-bottom: 12px;
      color: #c62828;
    font-size: 13px;
     }
     color: #666;
 
  }
    .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;
    }


  .product-card__stock {
    .mt-desc p:last-child {
    color: #1b8f3a;
      margin-bottom: 0;
     font-weight: 700;
     }
  }


  .product-card__brand {
    .mt-desc__note {
    background: #f5f6f8;
      font-weight: 700;
    padding: 4px 8px;
      color: #1f2937;
     border-radius: 999px;
     }
  }


  .product-card__title {
    @media (max-width: 1100px) {
    margin: 0 0 12px;
      .mt-cats {
    font-size: 18px;
        grid-template-columns: repeat(2, 1fr);
    line-height: 1.8;
      }
    color: #111;
    min-height: 64px;
  }


  .product-card__price {
      .mt-grid {
    margin-bottom: 14px;
        grid-template-columns: repeat(2, 1fr);
    font-size: 18px;
      }
    font-weight: 700;
     }
     color: #c62828;
  }


  .product-card__actions {
    @media (max-width: 640px) {
    display: grid;
      .mt-cats,
    grid-template-columns: 1fr 1fr;
      .mt-grid {
    gap: 10px;
        grid-template-columns: repeat(2, 1fr);
  }
        gap: 10px;
      }


  .product-card__btn {
      .mt-toolbar {
    display: inline-block;
        flex-direction: column;
    text-align: center;
        align-items: flex-start;
    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 {
      .mt-card__meta {
    background: #f8fafc;
        flex-direction: column;
  }
        align-items: flex-start;
      }


  .product-card__btn--primary {
      .mt-card__title {
    background: #2e7d32;
        font-size: 15px;
    border-color: #2e7d32;
        min-height: auto;
    color: #fff;
      }
  }


  .product-card__btn--primary:hover {
      .mt-card__price {
    background: #256b2a;
        font-size: 15px;
  }
      }


  @media (max-width: 992px) {
      .mt-page__title {
    .products-grid {
        font-size: 24px;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      }
     }
     }
   }
   </style>
</head>
<body>
  <section class="mt-page">
    <div class="mt-page__header">
      <h1 class="mt-page__title"></h1>
    </div>


  @media (max-width: 576px) {
    <div class="mt-cats">
     .products-grid {
      <a class="mt-cat" href="#">
       grid-template-columns: 1fr;
        <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>


    .product-card__actions {
      <article class="mt-card">
      grid-template-columns: 1fr;
        <div class="mt-card__imgwrap">
    }
          <img src="https://dl.faraghaib.ir/101.webp" alt="اورگانو" />
  }
        </div>
</style>
        <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>
</html>

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

گل ها 25 برگ ها 18 دانه ها 43 پودر ها 24 میوه ها 20 ریشه ها 6 صمغ ها 9 سایر موارد 5
تعداد محصولات: 6
مرتب کردن براساس: جدیدترین
نمایش: 6 محصول
آویشن شیرازی
موجود عطاری حافظ

آویشن شیرازی

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

اسطوخودوس

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

اسفند

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

اورگانو

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

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

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

برگ بو

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

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

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

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

برگرفته از «https://fa.faraghaib.ir/w/index.php?title=عطاری_حافظ/گیاهان_دارویی&oldid=3995»