artikel.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Healer | Artikel & Berita</title>
    <link rel="shortcut icon" href="img/logo healer.png" type="image/x-icon" />
    <link rel="stylesheet" href="style.css" />
    <script src="jquery.js"></script>
    <script src="aos.js"></script>
    <link rel="stylesheet" href="aos.css">
  </head>
  <body>
    <div class="nav nav-scroll">
      <img src="img/logo healer.png" alt="" data-aos="fade-down" data-aos-duration="800">
      <div class="area-nav">
        <div class="nav-link" data-aos="fade-down" data-aos-duration="800" data-aos-delay="100">
          <a class="link-nav" style="color: #000" href="index.html #beranda"
            >Beranda</a
          >
        </div>
        <div class="nav-link" data-aos="fade-down" data-aos-duration="800" data-aos-delay="100">
          <a class="link-nav" style="color: #000" href="index.html #laynan"
            >Layanan</a
          >
        </div>
        <div class="nav-link" data-aos="fade-down" data-aos-duration="800" data-aos-delay="150">
          <a class="link-nav" style="color: #000" href="lokasi.html">Lokasi</a>
        </div>
        <div class="nav-link" data-aos="fade-down" data-aos-duration="800" data-aos-delay="200">
          <a class="link-nav" style="color: #000" href="artikel.html"
            >Artikel</a
          >
        </div>
      </div>
      <img src="img/menu.png" alt="" id="open-nav" data-aos="fade-down" data-aos-duration="800">
      <a class="nav-login nav-login-scroll" href="login.html" data-aos="fade-down" data-aos-duration="800">LOGIN</a>
    </div>
    <div class="nav-menu">
      <div class="close-btn">
        <img src="img/close.png" alt="" id="close-nav" />
      </div>
      <a href="index.html #beranda" id="nav-link">Beranda</a>
      <a href="index.html #beranda" id="nav-link1">Layanan</a>
      <a href="lokasi.html" id="nav-link2">Lokasi</a>
      <a href="artikel.html" id="nav-link3">Artikel</a>
      <a href="login.html" id="login-nav-menu">LOGIN</a>
    </div>

    <div class="artikel-utama container column">
      <div class="area-subheader-artikel column">
        <h1 class="judul">ARTIKEL & BERITA</h1>
        <p>Baca Artikel & Berita Baru Setiap Hari</p>
      </div>
      <select name="" id="filter">
        <option value="*">Semua</option>
        <option value=".makanan">Makanan</option>
        <option value=".olahraga">Olahraga</option>
        <option value=".kesehatan">Kesehatan</option>
        <option value=".kesehatan-mental">Kesehatan Mental</option>
      </select>
      <div class="area-artikel-utama">
        <a href="detail-artikel.html" class="box-artikel makanan">
            <img src="img/artikel 1.jpg" alt="">
            <div class="area-kategori-artikel">
              <p>Makanan</p>
              <p>Artikel Kesehatan</p>
            </div>
            <h1>5 Makanan Diet Sehat Yang Harus Dicoba</h1>
            <p>Salah satu cara efektif diet sehat adalah mengubah pola makan. Caranya bisa...</p>
          </a>
          <a href="detail-artikel.html" class="box-artikel olahraga">
            <img src="img/artikel 2.jpg" alt="">
            <div class="area-kategori-artikel">
              <p>OlahRaga</p>
              <p>Artikel Kesehatan</p>
            </div>
            <h1>Ini Waktu Olahraga yang Baik untuk Kesehatan</h1>
            <p>Olahraga merupakan rutinitas yang harus dilakukan oleh setiap kalangan. Untuk...</p>
          </a>
          <a href="detail-artikel.html" class="box-artikel kesehatan">
            <img src="img/artikel 3.jpg" alt="">
            <div class="area-kategori-artikel">
              <p>Virus</p>
              <p>Berita Kesehatan</p>
            </div>
            <h1>Cacar Monyet, Sudah Ada Di Indonesia</h1>
            <p>Cacar monyet bisa menular lewat kontak dari kulit ke kulit. Itu sebabnya, batasi...</p>
          </a>
          <a href="detail-artikel.html" class="box-artikel kesehatan-mental">
            <img src="img/artikel 4.jpg" alt="">
            <div class="area-kategori-artikel">
              <p>Mental Health</p>
              <p>Artikel Kesehatan</p>
            </div>
            <h1>Gaya Hidup Tidak Sehat Bisa Picu Gangguan Mental?</h1>
            <p>Gaya hidup yang dimiliki ternyata berkaitan dengan risiko gangguan...</p>
          </a>
          <a href="detail-artikel.html" class="box-artikel makanan">
            <img src="img/artikel 1.jpg" alt="">
            <div class="area-kategori-artikel">
              <p>Makanan</p>
              <p>Artikel Kesehatan</p>
            </div>
            <h1>Rekomendasi Makanan Sehat Untuk Lansia</h1>
            <p>Usia lanjut usia memang butuh asupan nutrisi yang cukup,kami telah merangkum...</p>
          </a>
          <a href="detail-artikel.html" class="box-artikel kesehatan">
            <img src="img/artikel 3.jpg" alt="">
            <div class="area-kategori-artikel">
              <p>Virus</p>
              <p>Artikel Kesehatan</p>
            </div>
            <h1>Inilah Penyebab Cacar</h1>
            <p>Cacar adalah penyakit menyebar yang dapat menyebar ke siapa pun,tetapi...</p>
          </a>
          <a href="detail-artikel.html" class="box-artikel olahraga">
            <img src="img/artikel 2.jpg" alt="">
            <div class="area-kategori-artikel">
              <p>OlahRaga</p>
              <p>Artikel Kesehatan</p>
            </div>
            <h1>Ini Olahraga yang dianjurkan kepada lansia</h1>
            <p>Olahraga merupakan rutinitas yang harus dilakukan oleh setiap kalangan. Untuk...</p>
          </a>
          <a href="detail-artikel.html" class="box-artikel kesehatan-mental">
            <img src="img/artikel 4.jpg" alt="">
            <div class="area-kategori-artikel">
              <p>Mental Health</p>
              <p>Berita Kesehatan</p>
            </div>
            <h1>Di Masa Pandemi 9 ribu Orang Yang Bunuh Diri</h1>
            <p>Di Masa Pandemi Banyak Orang Yang Kesehatan Mentalnya Terganggu, Karena...</p>
          </a>
          <a href="detail-artikel.html" class="box-artikel olahraga">
            <img src="img/artikel 2.jpg" alt="">
            <div class="area-kategori-artikel">
              <p>OlahRaga</p>
              <p>Artikel Kesehatan</p>
            </div>
            <h1>5 Jenis Olahraga yang banyak membakar Lemak</h1>
            <p>Olahraga merupakan rutinitas yang harus dilakukan oleh setiap kalangan. Untuk...</p>
          </a>
          <a href="detail-artikel.html" class="box-artikel kesehatan-mental">
            <img src="img/artikel 4.jpg" alt="">
            <div class="area-kategori-artikel">
              <p>Mental Health</p>
              <p>Artikel Kesehatan</p>
            </div>
            <h1>Dampak perceraian terhadap kesehatan mental Anak</h1>
            <p>Perceraian kedua orang tua bisa menimbulkan dampak berupa masalah...</p>
          </a>
          <a href="detail-artikel.html" class="box-artikel makanan">
            <img src="img/artikel 1.jpg" alt="">
            <div class="area-kategori-artikel">
              <p>Makanan</p>
              <p>Artikel Kesehatan</p>
            </div>
            <h1>Rekomendasi Makanan Sehat Untuk Balita</h1>
            <p>Usia Balita memang butuh asupan nutrisi yang cukup,kami telah merangkum...</p>
          </a>
          <a href="detail-artikel.html" class="box-artikel kesehatan">
            <img src="img/artikel 3.jpg" alt="">
            <div class="area-kategori-artikel">
              <p>Virus</p>
              <p>Artikel Kesehatan</p>
            </div>
            <h1>Perbedaan Cacar Dengan Jerawat Punggung</h1>
            <p>Cacar adalah penyakit menyebar yang dapat menyebar ke siapa pun,tetapi...</p>
          </a>
      </div>
    </div>
    <div class="footer container">
      <div class="footer-1 column">
        <div class="logo-footer">
          <img src="img/logo healer.png" alt="" />
          <h1>Healer</h1>
        </div>
        <p>Mulai Hidup Sehat <br />Bersama Kami</p>
        <div class="sosial">
          <img src="img/facebook.png" alt="" />
          <img src="img/instagram.png" alt="" />
          <img src="img/twitter.png" alt="" />
        </div>
      </div>
      <div class="footer-2 column">
        <h1>Link</h1>
        <a href="index.html #beranda">Beranda</a>
        <a href="index.html #layanan">Layanan</a>
        <a href="lokasi.html">Lokasi</a>
        <a href="artikel.html">Artikel</a>
      </div>
      <div class="footer-3 column">
        <h1>Bantuan</h1>
        <a href="konsultasi.html">Konsultasi Dokter</a>
        <a href="lokasi.html">Cari Rumah Sakit</a>
        <a href="trainer.html">Konsultasi Olah Raga</a>
      </div>
      <div class="footer-4 column">
        <h1>Hubungi Kami</h1>
        <p>info@healerhospital.id</p>
        <p>+62 22 2222-2222</p>
      </div>
    </div>

    <script>
      AOS.init();
      $(".link-nav").mouseenter(function () {
        $(this).css("color", "#3ec70b");
      });
      $(".link-nav").mouseleave(function () {
        $(this).css("color", "#000000");
      });

      $("#open-nav").click(function () {
        $(".nav-menu").toggleClass("active");
      });
      $("#close-nav").click(function () {
        $(".nav-menu").removeClass("active");
      });
      $("#nav-link").click(function () {
        $(".nav-menu").removeClass("active");
      });
      $("#nav-link1").click(function () {
        $(".nav-menu").removeClass("active");
      });
      $("#nav-link2").click(function () {
        $(".nav-menu").removeClass("active");
      });
      $("#nav-link3").click(function () {
        $(".nav-menu").removeClass("active");
      });

      $("#filter").on("change", function () {
        const dataFilter = $(this).val();
        $(".box-artikel").addClass("nonactive");
        $(".box-artikel" + dataFilter).removeClass("nonactive");
      });
    </script>
  </body>
</html>