v5: дәрілер фотосы мен аттары

index.html

@@ -19,6 +19,7 @@
       <a href="#timer">Жаттығу</a>
       <a href="#tips">Кеңестер</a>
       <a href="#meds">Дәрі</a>
+      <a href="#drugs">Дәрілер</a>
       <a href="#chat">Шағым</a>
     </nav>
   </div>
@@ -182,6 +183,51 @@
   </div>
 </section>
 
+<section class="section gray" id="drugs">
+  <div class="container">
+    <h2>Дәрі-дәрмек түрлері: аты мен көрінісі</h2>
+    <p class="lead">Төменде емдеуде жиі қолданылатын дәрі топтары және олардың белсенді затының аты. Фото — иллюстрация. Нақты дәріні және дозаны тек дәрігер тағайындайды.</p>
+
+    <div class="grid3">
+      <div class="card drug-card reveal">
+        <div class="drug-photo"><img src="https://loremflickr.com/600/400/syringe,injection" alt="Укол" loading="lazy"></div>
+        <h3>💉 Уколдар</h3>
+        <ul class="med-list">
+          <li><b>Диклофенак</b> — қабынуға қарсы, бұлшықетке укол</li>
+          <li><b>Мелоксикам</b> — қабынуға қарсы, бұлшықетке укол</li>
+          <li><b>Бетаметазон</b> — буын ішіне, қатты қабынуда</li>
+          <li><b>Метилпреднизолон</b> — буын ішіне, дәрігер тағайындауымен</li>
+          <li><b>Биологиялық терапия</b> — тері астына, Бехтерев ауруында, тек ревматолог</li>
+        </ul>
+      </div>
+      <div class="card drug-card reveal">
+        <div class="drug-photo"><img src="https://loremflickr.com/600/400/medicine,tablets,pills" alt="Дәрі" loading="lazy"></div>
+        <h3>💊 Дәрілер (ішу)</h3>
+        <ul class="med-list">
+          <li><b>Диклофенак</b> — қабынуға қарсы таблетка</li>
+          <li><b>Ибупрофен</b> — қабынуға қарсы және ауырсыну басатын</li>
+          <li><b>Мелоксикам</b> — ұзақ қабылдауға қолайлырақ</li>
+          <li><b>Нимесулид</b> — қабынуға қарсы, жедел кезеңде</li>
+          <li><b>Толперизон</b> — бұлшықет босаңсытқыш</li>
+        </ul>
+      </div>
+      <div class="card drug-card reveal">
+        <div class="drug-photo"><img src="https://loremflickr.com/600/400/cream,ointment,tube" alt="Мазь" loading="lazy"></div>
+        <h3>🧴 Мазьдар мен гельдер</h3>
+        <ul class="med-list">
+          <li><b>Диклофенак гель</b> — буын үстіне, қабынуға қарсы</li>
+          <li><b>Кетопрофен гель</b> — ауырсынуды басатын, сыртқа жағу</li>
+          <li><b>Жылытатын мазьдар</b> — қаттылықта, қабынусыз кезеңде</li>
+          <li><b>Салқындататын гельдер</b> — өткір ауырсынуда</li>
+          <li><b>Хондропротекторлы кремдер</b> — көмекші құрал ретінде</li>
+        </ul>
+      </div>
+    </div>
+
+    <div class="warn reveal">⚠️ <b>Ескерту:</b> бұл бөлімдегі атаулар — белсенді заттардың жалпы атаулары, олардың бірнеше түрлі фирмалық атаулары болуы мүмкін. Өз бетіңмен ешқандай дәрі сатып алма және қабылдама. Тек дәрігер сенің диагнозыңа қарап дәріні, түрін және дозасын тағайындайды.</div>
+  </div>
+</section>
+
 <footer class="footer">
   <div class="container">
     <p>🦴 Буын денсаулығы — күнделікті көмекші</p>

style.css

@@ -41,6 +41,10 @@ h1,h2,h3{font-family:"Unbounded",sans-serif;line-height:1.15}
 .med-list li{color:var(--gray-500);font-size:15px;margin-bottom:12px;padding-left:22px;position:relative;line-height:1.55}
 .med-list li::before{content:"•";position:absolute;left:4px;color:var(--cyan);font-weight:800}
 .med-list b{color:var(--ink)}
+.drug-card{padding:0;overflow:hidden}
+.drug-photo img{width:100%;height:180px;object-fit:cover;display:block}
+.drug-card h3{padding:20px 24px 0}
+.drug-card .med-list{padding:10px 24px 26px}
 .section.dark .card p{color:#9aa3b2}
 .note{color:var(--gray-500);font-size:14px;margin-top:8px}