پرش به محتوا

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

از فراغیب
→ تفاوت با ویرایش قدیمی‌ترتفاوت با ویرایش جدیدتر ←
دیداریویکی‌متن
بدون خلاصۀ ویرایش
بدون خلاصۀ ویرایش
خط ۱: خط ۱:
<!DOCTYPE html>
<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="mt-page" dir="rtl">
      margin-bottom: 18px;
  <div class="mt-page__header">
     }
     <h1 class="mt-page__title">گیاهان دارویی</h1>
  </div>


  <div class="mt-cats">
     .mt-page__title {
    <a class="mt-cat" href="#">
       margin: 0;
      <span class="mt-cat__name">گل ها</span>
       font-size: 28px;
      <span class="mt-cat__count">25</span>
       line-height: 1.6;
    </a>
       font-weight: 700;
    <a class="mt-cat" href="#">
       color: #1f2937;
      <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">
    .mt-cats {
    <div class="mt-toolbar__item">مقایسه کالا <strong>0</strong></div>
      display: grid;
    <div class="mt-toolbar__item">مرتب کردن براساس:</div>
      grid-template-columns: repeat(4, 1fr);
    <div class="mt-toolbar__item">نمایش:</div>
      gap: 12px;
  </div>
      margin-bottom: 18px;
    }


  <div class="mt-grid">
     .mt-cat {
     <article class="mt-card">
       display: flex;
       <div class="mt-card__imgwrap">
       justify-content: space-between;
        <img src="https://via.placeholder.com/400x400?text=+%D9%81%D9%84%D9%81%D9%84+%D8%AF%D8%A7%D9%86%D9%87+%D8%B1%D9%86%DA%AF%DB%8C" alt="فلفل دانه رنگی">
       align-items: center;
       </div>
      padding: 13px 14px;
       <div class="mt-card__meta">
       border: 1px solid #e5e7eb;
        <span class="mt-card__stock">موجود: موجود</span>
       border-radius: 12px;
        <span class="mt-card__brand">برند: مرهم طب</span>
       background: #fff;
       </div>
       color: #111827;
       <h3 class="mt-card__title">فلفل دانه رنگی</h3>
      text-decoration: none;
       <div class="mt-card__price">890,000 تومان</div>
       transition: all 0.2s ease;
       <div class="mt-card__actions">
       box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
        <a href="#" class="mt-btn mt-btn--ghost">افزودن به لیست دلخواه</a>
     }
        <a href="#" class="mt-btn mt-btn--ghost">مقایسه این کالا</a>
       </div>
       <a href="#" class="mt-btn mt-btn--primary mt-card__buy">اکنون بخرید</a>
     </article>


     <article class="mt-card">
     .mt-cat:hover {
       <div class="mt-card__imgwrap">
       border-color: #2e7d32;
        <img src="https://via.placeholder.com/400x400?text=%D8%A2%D9%88%DB%8C%D8%B4%D9%86+%D8%B4%DB%8C%D8%B1%D8%A7%D8%B2%DB%8C" alt="آویشن شیرازی">
       box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
      </div>
       transform: translateY(-2px);
       <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>
       <div class="mt-card__actions">
        <a href="#" class="mt-btn mt-btn--ghost">افزودن به لیست دلخواه</a>
        <a href="#" class="mt-btn mt-btn--ghost">مقایسه این کالا</a>
      </div>
      <a href="#" class="mt-btn mt-btn--primary mt-card__buy">اکنون بخرید</a>
     </article>


     <article class="mt-card">
     .mt-cat__name {
       <div class="mt-card__imgwrap">
       font-size: 15px;
        <img src="https://via.placeholder.com/400x400?text=%D8%A7%D8%B3%D8%B7%D9%88%D8%AE%D9%88%D8%AF%D9%88%D8%B3" alt="اسطوخودوس">
       font-weight: 700;
      </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>
      <div class="mt-card__actions">
        <a href="#" class="mt-btn mt-btn--ghost">افزودن به لیست دلخواه</a>
        <a href="#" class="mt-btn mt-btn--ghost">مقایسه این کالا</a>
      </div>
      <a href="#" class="mt-btn mt-btn--primary mt-card__buy">اکنون بخرید</a>
     </article>


     <article class="mt-card">
     .mt-cat__count {
       <div class="mt-card__imgwrap">
       min-width: 32px;
        <img src="https://via.placeholder.com/400x400?text=%D8%A7%D8%B3%D9%81%D9%86%D8%AF" alt="اسفند">
       text-align: center;
       </div>
       padding: 4px 9px;
      <div class="mt-card__meta">
       border-radius: 999px;
        <span class="mt-card__stock">موجود</span>
       background: #f3f4f6;
        <span class="mt-card__brand">مرهم طب</span>
       color: #374151;
       </div>
      font-size: 12px;
       <h3 class="mt-card__title">اسفند</h3>
       font-weight: 700;
       <div class="mt-card__price">190,000 تومان</div>
     }
       <div class="mt-card__actions">
        <a href="#" class="mt-btn mt-btn--ghost">افزودن به لیست دلخواه</a>
        <a href="#" class="mt-btn mt-btn--ghost">مقایسه این کالا</a>
      </div>
       <a href="#" class="mt-btn mt-btn--primary mt-card__buy">اکنون بخرید</a>
     </article>


     <article class="mt-card">
     .mt-toolbar {
       <div class="mt-card__imgwrap">
      display: flex;
        <img src="https://via.placeholder.com/400x400?text=%D8%A7%D9%88%D8%B1%DA%AF%D8%A7%D9%86%D9%88" alt="اورگانو">
       flex-wrap: wrap;
       </div>
       gap: 10px 16px;
       <div class="mt-card__meta">
       align-items: center;
        <span class="mt-card__stock">موجود</span>
      justify-content: space-between;
        <span class="mt-card__brand">مرهم طب</span>
       margin-bottom: 18px;
       </div>
       padding: 12px 14px;
       <h3 class="mt-card__title">اورگانو</h3>
       background: #fafafa;
       <div class="mt-card__price">490,000 تومان</div>
       border: 1px solid #ececec;
       <div class="mt-card__actions">
      border-radius: 12px;
        <a href="#" class="mt-btn mt-btn--ghost">افزودن به لیست دلخواه</a>
       color: #4b5563;
        <a href="#" class="mt-btn mt-btn--ghost">مقایسه این کالا</a>
       font-size: 14px;
       </div>
     }
       <a href="#" class="mt-btn mt-btn--primary mt-card__buy">اکنون بخرید</a>
     </article>


     <article class="mt-card">
     .mt-toolbar__item strong {
       <div class="mt-card__imgwrap">
       color: #111827;
        <img src="https://via.placeholder.com/400x400?text=%D8%A8%D8%A7%D8%AF%D8%B1%D9%86%D8%AC%D8%A8%D9%88%DB%8C%D9%87" 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>
      <div class="mt-card__actions">
        <a href="#" class="mt-btn mt-btn--ghost">افزودن به لیست دلخواه</a>
        <a href="#" class="mt-btn mt-btn--ghost">مقایسه این کالا</a>
      </div>
      <a href="#" class="mt-btn mt-btn--primary mt-card__buy">اکنون بخرید</a>
     </article>


     <article class="mt-card">
     .mt-grid {
       <div class="mt-card__imgwrap">
       display: grid;
        <img src="https://via.placeholder.com/400x400?text=%D8%A8%D8%A7%D8%AF%DB%8C%D8%A7%D9%86+%D8%B3%D8%AA%D8%A7%D8%B1%D9%87+%D8%A7%DB%8C" alt="بادیان ستاره ای">
       grid-template-columns: repeat(3, 1fr);
      </div>
       gap: 16px;
       <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">قیمت نامشخص</div>
      <div class="mt-card__actions">
        <a href="#" class="mt-btn mt-btn--ghost">افزودن به لیست دلخواه</a>
        <a href="#" class="mt-btn mt-btn--ghost">مقایسه این کالا</a>
      </div>
      <a href="#" class="mt-btn mt-btn--primary mt-card__buy">اکنون بخرید</a>
     </article>


     <article class="mt-card">
     .mt-card {
       <div class="mt-card__imgwrap">
       display: flex;
        <img src="https://via.placeholder.com/400x400?text=%D8%A8%D8%A7%D8%B1%D9%87%D9%86%DA%AF" alt="بارهنگ">
       flex-direction: column;
       </div>
       background: #fff;
       <div class="mt-card__meta">
       border: 1px solid #e5e7eb;
        <span class="mt-card__stock">موجود</span>
       border-radius: 16px;
        <span class="mt-card__brand">مرهم طب</span>
       overflow: hidden;
       </div>
       box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
       <h3 class="mt-card__title">بارهنگ</h3>
       transition: all 0.2s ease;
       <div class="mt-card__price">قیمت نامشخص</div>
     }
       <div class="mt-card__actions">
        <a href="#" class="mt-btn mt-btn--ghost">افزودن به لیست دلخواه</a>
        <a href="#" class="mt-btn mt-btn--ghost">مقایسه این کالا</a>
       </div>
      <a href="#" class="mt-btn mt-btn--primary mt-card__buy">اکنون بخرید</a>
     </article>


     <article class="mt-card">
     .mt-card:hover {
       <div class="mt-card__imgwrap">
       transform: translateY(-4px);
        <img src="https://via.placeholder.com/400x400?text=%D8%A8%D8%B1%DA%AF+%D8%A8%D9%88" alt="برگ بو">
       box-shadow: 0 10px 24px rgba(0, 0, 0, 0.1);
      </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>
      <div class="mt-card__actions">
        <a href="#" class="mt-btn mt-btn--ghost">افزودن به لیست دلخواه</a>
        <a href="#" class="mt-btn mt-btn--ghost">مقایسه این کالا</a>
      </div>
      <a href="#" class="mt-btn mt-btn--primary mt-card__buy">اکنون بخرید</a>
     </article>


     <article class="mt-card">
     .mt-card__imgwrap {
       <div class="mt-card__imgwrap">
       width: 100%;
        <img src="https://via.placeholder.com/400x400?text=%D8%A8%D8%B1%DA%AF+%D9%86%D8%B9%D9%86%D8%A7%D8%B9+%D9%81%D9%84%D9%81%D9%84%DB%8C" alt="برگ نعناع فلفلی">
       aspect-ratio: 1 / 1;
      </div>
       background: #f9fafb;
       <div class="mt-card__meta">
       overflow: hidden;
        <span class="mt-card__stock">موجود</span>
     }
        <span class="mt-card__brand">مرهم طب</span>
       </div>
      <h3 class="mt-card__title">برگ نعناع فلفلی</h3>
      <div class="mt-card__price">290,000 تومان</div>
      <div class="mt-card__actions">
        <a href="#" class="mt-btn mt-btn--ghost">افزودن به لیست دلخواه</a>
        <a href="#" class="mt-btn mt-btn--ghost">مقایسه این کالا</a>
       </div>
      <a href="#" class="mt-btn mt-btn--primary mt-card__buy">اکنون بخرید</a>
     </article>


     <article class="mt-card">
     .mt-card__imgwrap img {
       <div class="mt-card__imgwrap">
       width: 100%;
        <img src="https://via.placeholder.com/400x400?text=%D8%A8%D9%87+%D8%AF%D8%A7%D9%86%D9%87" alt="به دانه">
       height: 100%;
       </div>
       object-fit: cover;
       <div class="mt-card__meta">
       display: block;
        <span class="mt-card__stock">موجود</span>
     }
        <span class="mt-card__brand">مرهم طب</span>
       </div>
      <h3 class="mt-card__title">به دانه</h3>
      <div class="mt-card__price">240,000 تومان</div>
      <div class="mt-card__actions">
        <a href="#" class="mt-btn mt-btn--ghost">افزودن به لیست دلخواه</a>
        <a href="#" class="mt-btn mt-btn--ghost">مقایسه این کالا</a>
      </div>
      <a href="#" class="mt-btn mt-btn--primary mt-card__buy">اکنون بخرید</a>
     </article>


     <article class="mt-card">
     .mt-card__meta {
       <div class="mt-card__imgwrap">
       display: flex;
        <img src="https://via.placeholder.com/400x400?text=%D8%A8%D9%87+%D9%84%DB%8C%D9%85%D9%88" alt="به لیمو (ورون)">
       justify-content: space-between;
      </div>
       gap: 8px;
       <div class="mt-card__meta">
       padding: 12px 14px 0;
        <span class="mt-card__stock">موجود</span>
       font-size: 13px;
        <span class="mt-card__brand">مرهم طب</span>
       color: #6b7280;
       </div>
     }
       <h3 class="mt-card__title">به لیمو (ورون)</h3>
       <div class="mt-card__price">340,000 تومان</div>
       <div class="mt-card__actions">
        <a href="#" class="mt-btn mt-btn--ghost">افزودن به لیست دلخواه</a>
        <a href="#" class="mt-btn mt-btn--ghost">مقایسه این کالا</a>
      </div>
      <a href="#" class="mt-btn mt-btn--primary mt-card__buy">اکنون بخرید</a>
     </article>
  </div>


  <div class="mt-pagination">
    .mt-card__stock {
     <span>نمایش 1 تا 12 از 151 (13 صفحه)</span>
      color: #15803d;
  </div>
      font-weight: 700;
     }


  <div class="mt-desc">
     .mt-card__brand {
     <p>
       color: #6b7280;
      گیاهان دارویی موجود در فروشگاه اینترنتی مرهم طب بصورت های مختلف از جمله:
     }
      گل ها، برگ ها، دانه ها، میوه های خشک، ریشه ها، پودر ها، صمغ ها و سایر اشکال گیاهان دارویی عرضه میشوند.
    </p>
    <p>
      این گیاهان دارویی برای بهبود و درمان انواع مشکلات و بیماری ها از جمله:
      لاغری و کاهش وزن، چربی سوزی، پاکسازی کبد، دفع اخلاط ثلاثه (صفرا-بلغم-سودا)، درمان اگزما و خارش و کهیر،
      ضد استرس و اضطراب، درمان افسردگی و بیخوابی، ملین و مسهل، تقویت قوای جنسی، ضد ورم و نفخ معده و روده،
      ضد عفونت و التهاب، درمان سرفه و آسم و برونشیت، تنظیم قند خون، کاهش فشار و چربی خون،
      تقویت سیستم ایمنی بدن، دفع سموم از بدن، ضد تهوع، تنظیم هورمون های زنانه معرفی می شوند.
    </p>
    <p class="mt-desc__note">
       برای مشاهده طبع انواع گیاهان دارویی، فواید و نحوه مصرف بر روی محصول مورد نظر کلیک کنید.
     </p>
  </div>
</section>


<style>
    .mt-card__title {
  .mt-page {
      margin: 10px 14px 8px;
    max-width: 1280px;
      font-size: 17px;
    margin: 0 auto;
      line-height: 1.8;
    padding: 20px 14px 30px;
      font-weight: 700;
    font-family: Tahoma, Arial, sans-serif;
      color: #111827;
    color: #222;
      min-height: 62px;
    background: #fff;
    }
  }


  .mt-page__header {
    .mt-card__price {
    margin-bottom: 18px;
      margin: 0 14px 16px;
  }
      font-size: 17px;
      font-weight: 700;
      color: #c62828;
    }


  .mt-page__title {
    .mt-pagination {
    margin: 0;
      margin-top: 20px;
    font-size: 28px;
      padding: 14px;
    line-height: 1.6;
      background: #f8fafc;
    font-weight: 700;
      border: 1px solid #e5e7eb;
    color: #1f2937;
      border-radius: 12px;
  }
      color: #374151;
      font-size: 14px;
    }


  .mt-cats {
    .mt-desc {
    display: grid;
      margin-top: 18px;
    grid-template-columns: repeat(4, 1fr);
      padding: 16px;
    gap: 12px;
      border: 1px solid #e5e7eb;
    margin-bottom: 18px;
      border-radius: 14px;
  }
      background: #fcfcfc;
      color: #374151;
      line-height: 2.05;
      font-size: 15px;
    }


  .mt-cat {
    .mt-desc p {
    display: flex;
      margin: 0 0 12px;
    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 .2s ease;
    box-shadow: 0 2px 10px rgba(0,0,0,.03);
  }


  .mt-cat:hover {
    .mt-desc p:last-child {
    border-color: #2e7d32;
      margin-bottom: 0;
    box-shadow: 0 8px 18px rgba(0,0,0,.08);
     }
     transform: translateY(-2px);
  }


  .mt-cat__name {
    .mt-desc__note {
    font-size: 15px;
      font-weight: 700;
    font-weight: 700;
      color: #1f2937;
  }
    }


  .mt-cat__count {
     @media (max-width: 1100px) {
     min-width: 32px;
      .mt-cats {
    text-align: center;
        grid-template-columns: repeat(2, 1fr);
    padding: 4px 9px;
      }
    border-radius: 999px;
    background: #f3f4f6;
    color: #374151;
    font-size: 12px;
    font-weight: 700;
  }


  .mt-toolbar {
      .mt-grid {
    display: flex;
        grid-template-columns: repeat(2, 1fr);
    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 {
    @media (max-width: 640px) {
    color: #111827;
      .mt-cats,
  }
      .mt-grid {
        grid-template-columns: 1fr;
      }


  .mt-grid {
      .mt-toolbar {
    display: grid;
        flex-direction: column;
    grid-template-columns: repeat(4, 1fr);
        align-items: flex-start;
    gap: 16px;
      }
  }


  .mt-card {
      .mt-card__meta {
    display: flex;
        flex-direction: column;
    flex-direction: column;
        align-items: flex-start;
    background: #fff;
      }
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,.05);
    transition: all .2s ease;
  }


  .mt-card:hover {
      .mt-page__title {
    transform: translateY(-4px);
        font-size: 24px;
    box-shadow: 0 10px 24px rgba(0,0,0,.1);
      }
  }
     }
 
   </style>
  .mt-card__imgwrap {
</head>
    width: 100%;
<body>
    aspect-ratio: 1 / 1;
   <section class="mt-page">
    background: #f9fafb;
     <div class="mt-page__header">
    overflow: hidden;
      <h1 class="mt-page__title">گیاهان دارویی</h1>
  }
     </div>
 
  .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 14px;
    font-size: 17px;
    font-weight: 700;
    color: #c62828;
  }
 
   .mt-card__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
     gap: 8px;
    padding: 0 14px 10px;
  }
 
  .mt-btn {
    display: inline-block;
    text-align: center;
    text-decoration: none;
    font: inherit;
    border-radius: 10px;
    padding: 10px 12px;
    transition: all .2s ease;
    white-space: nowrap;
  }
 
  .mt-btn--ghost {
     border: 1px solid #d1d5db;
    color: #374151;
    background: #fff;
    font-size: 13px;
    font-weight: 700;
  }
 
  .mt-btn--ghost:hover {
    background: #f9fafb;
    border-color: #bfc7d1;
  }
 
  .mt-btn--primary {
    background: #2e7d32;
    color: #fff;
    border: 1px solid #2e7d32;
    font-size: 14px;
    font-weight: 700;
  }
 
  .mt-btn--primary:hover {
    background: #256b2a;
    border-color: #256b2a;
  }


  .mt-card__buy {
    <div class="mt-cats">
     margin: 0 14px 14px;
      <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>


  .mt-pagination {
    <div class="mt-toolbar">
    margin-top: 20px;
      <div class="mt-toolbar__item">تعداد محصولات: <strong>6</strong></div>
    padding: 14px;
      <div class="mt-toolbar__item">مرتب کردن براساس: جدیدترین</div>
    background: #f8fafc;
      <div class="mt-toolbar__item">نمایش: 6 محصول</div>
    border: 1px solid #e5e7eb;
     </div>
    border-radius: 12px;
    color: #374151;
     font-size: 14px;
  }


  .mt-desc {
    <div class="mt-grid">
    margin-top: 18px;
      <article class="mt-card">
    padding: 16px;
        <div class="mt-card__imgwrap">
    border: 1px solid #e5e7eb;
          <img src="https://dl.faraghaib.ir/101.webp" alt="آویشن شیرازی" />
    border-radius: 14px;
        </div>
    background: #fcfcfc;
        <div class="mt-card__meta">
    color: #374151;
          <span class="mt-card__stock">موجود</span>
    line-height: 2.05;
          <span class="mt-card__brand">مرهم طب</span>
    font-size: 15px;
        </div>
  }
        <h3 class="mt-card__title">آویشن شیرازی</h3>
        <div class="mt-card__price">390,000 تومان</div>
      </article>


  .mt-desc p {
      <article class="mt-card">
    margin: 0 0 12px;
        <div class="mt-card__imgwrap">
  }
          <img src="https://dl.faraghaib.ir/101.webp" alt="اسطوخودوس" />
 
        </div>
  .mt-desc p:last-child {
        <div class="mt-card__meta">
    margin-bottom: 0;
          <span class="mt-card__stock">موجود</span>
  }
          <span class="mt-card__brand">مرهم طب</span>
 
        </div>
  .mt-desc__note {
        <h3 class="mt-card__title">اسطوخودوس</h3>
    font-weight: 700;
        <div class="mt-card__price">390,000 تومان</div>
    color: #1f2937;
       </article>
  }
 
  @media (max-width: 1100px) {
    .mt-cats,
    .mt-grid {
       grid-template-columns: repeat(2, 1fr);
    }
  }


  @media (max-width: 640px) {
      <article class="mt-card">
    .mt-cats,
        <div class="mt-card__imgwrap">
    .mt-grid {
          <img src="https://dl.faraghaib.ir/101.webp" alt="اسفند" />
      grid-template-columns: 1fr;
        </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>


    .mt-toolbar {
      <article class="mt-card">
      flex-direction: column;
        <div class="mt-card__imgwrap">
      align-items: flex-start;
          <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>


    .mt-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">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>

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

<!DOCTYPE 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=3880»