index.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>Vaccination</title>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
    <link rel="stylesheet" href="./css/style.css" />
  </head>
  <body>
    <div class="container">
      <header>
        <nav>
          <ul class="menu">
            <li class="vaccination"><a href="index.html">Vaccination</a></li>
            <li class="item"><a href="#">Database</a></li>
            <li class="item"><a href="#">Education</a></li>
            <li class="item"><a href="#">News</a></li>
            <li class="item"><a href="#">Regulation</a></li>
            <li class="item"><a class="hoax" href="#">Hoax Buster</a></li>
          </ul>
        </nav>
        <div class="triangulo"></div>
      </header>
      <article class="wrapper">
        <div class="wrapper-child">
          <h1>Fight Virus width Vacciones</h1>
          <p>
            Le's stop this pandemic by killing the virus width a vaccine, dont't
            let yourself and your family get infected
          </p>
          <div class="list-items">
            <ul>
              <li><a href="#">Best protection</a></li>
              <li class="star"><a href="#">Select Vacciones</a></li>
            </ul>
          </div>
          <div class="horario">
            <ul>
              <li><a href="#">Schule your vaccinations </a></li>
            </ul>
          </div>
          <div class="triangulo-dos"></div>
        </div>
        <div class="wrapper-child">
          <img
            class="nurse-child"
            src="./assets/img/nurse.jpg"
            alt="Enfermera"
          />
        </div>
      </article>

      <div class="opcion-section">
        <section class="box">
          <p>Location</p>
          <p class="blue">Jakarta Utara</p>
        </section>
        <section class="box">
          <p>Date</p>
          <p class="blue">08 July 2021</p>
        </section>
        <section class="box">
          <p>Vaccine Type</p>
          <p class="blue">Moderna</p>
        </section>
        <section class="box">
          <input type="button" value="Submit" />
        </section>
      </div>
      <section class="logos-vacunas">
        <div>
          <img src="./assets/img/astrazeneca.jpg" alt="logo-astrazeneca" />
        </div>
        <div><img src="./assets/img/sinovac.jpg" alt="logo-sinovax" /></div>
        <div><img src="./assets/img/pfizer.jpg" alt="logo-pfizer" /></div>
        <div><img src="./assets/img/moderna.png" alt="logo-moderna" /></div>
      </section>
      <section class="get-vaccinated">
        <h2>Why should I vaccine?</h2>
        <p>
          In order to avoid any doubts about getting the COVID-19 vaccine,
          identify the following 4 benefits of COVID-19 vaccination:
        </p>
      </section>

      <div class="care-benefits">
        <section class="care-benefits-child">
          <div class="care-item1"></div>
          <h2>Minimize the spread of viruses</h2>
          <p>
            Vacci has been proven affective to prevent someone from getting
            infect with Coronavirus
          </p>
        </section>
        <section class="care-benefits-child">
          <div class="care-item2"></div>
          <h2>Forming antibodies</h2>
          <p>
            COVID-19 vaccine proven to help shape antibody response for immune
            system
          </p>
        </section>
        <section class="care-benefits-child">
          <div class="care-item3"></div>
          <h2>Protectig people nearby</h2>
          <p>
            The benefits of COVID-19 vaccination are the vaccine that we get can
            also help protect people around us
          </p>
        </section>
        <section class="care-benefits-child">
          <div class="care-item4"></div>
          <h2>Creating group immunity</h2>
          <p>
            COVID-19 vaccinationis also benficial for creating group immunity or
            herd immnity
          </p>
        </section>
      </div>
      <div class="section-four">
        <div class="nurse-preparations">
          <img src="./assets/img/nurse-preparations.jpg" alt="Enfemera" />
        </div>
        <div class="nurse-preparations">
          <h2>Preparations Before Vaccine</h2>
          <p>
            the success of vaccines is strongly influenced by the strength of
            the body's immunes system Therefore, there are several things that
            can be tried to make the COVID-19 vaccine Work:
          </p>
          <div class="accordion" id="accordionPanelsStayOpenExample">
            <div class="accordion-item">
              <h2 class="accordion-header" id="panelsStayOpen-headingOne">
                <button
                  class="accordion-button"
                  type="button"
                  data-bs-toggle="collapse"
                  data-bs-target="#panelsStayOpen-collapseOne"
                  aria-expanded="true"
                  aria-controls="panelsStayOpen-collapseOne"
                >
                  Avoid alcoholic berages
                </button>
              </h2>
            </div>
            <div class="accordion-item">
              <h2 class="accordion-header" id="panelsStayOpen-headingTwo">
                <button
                  class="accordion-button collapsed"
                  type="button"
                  data-bs-toggle="collapse"
                  data-bs-target="#panelsStayOpen-collapseTwo"
                  aria-expanded="false"
                  aria-controls="panelsStayOpen-collapseTwo"
                >
                  Avoid stress
                </button>
              </h2>
            </div>
            <div class="accordion-item">
              <h2 class="accordion-header" id="panelsStayOpen-headingThree">
                <button
                  class="accordion-button collapsed"
                  type="button"
                  data-bs-toggle="collapse"
                  data-bs-target="#panelsStayOpen-collapseThree"
                  aria-expanded="false"
                  aria-controls="panelsStayOpen-collapseThree"
                >
                  eat healthy food
                </button>
              </h2>
            </div>
            <div class="accordion-item">
              <h2 class="accordion-header" id="panelsStayOpen-headingTwo">
                <button
                  class="accordion-button collapsed"
                  type="button"
                  data-bs-toggle="collapse"
                  data-bs-target="#panelsStayOpen-collapseTwo"
                  aria-expanded="false"
                  aria-controls="panelsStayOpen-collapseTwo"
                >
                  Get enough sleep
                </button>
              </h2>
            </div>
            <div class="accordion-item">
              <h2 class="accordion-header" id="panelsStayOpen-headingTwo">
                <button
                  class="accordion-button collapsed"
                  type="button"
                  data-bs-toggle="collapse"
                  data-bs-target="#panelsStayOpen-collapseTwo"
                  aria-expanded="false"
                  aria-controls="panelsStayOpen-collapseTwo"
                >
                  Exercise or physical activity
                </button>
              </h2>
            </div>
          </div>
        </div>
      </div>
      <section class="emergency-contact">
        <h2>Emergency Contact</h2>
        <p>
          Contact one of the contacts beloow if yiu family feel unwel and have
          similar symptoms such as Covid-19, make sure you also take care of
          yourself before reporting to us:
        </p>
      </section>
      <div class="section-cards">
        <div class="card-child">
          <div class="card text-center" style="width: 15rem">
            <div class="card-body">
              <h3 class="card-title">Call</h3>
              <span class="one-card"></span>
              <p class="card-text">021.123.145.14</p>
              <a href="#" class="btn btn-primary">Call Now</a>
            </div>
          </div>
          <div class="card text-center" style="width: 15rem">
            <div class="card-body">
              <h3 class="card-title">Chat</h3>
              <span class="two-card"></span>
              <p class="card-text">021.123.145.14</p>
              <a href="#" class="btn btn-primary">Chat Now</a>
            </div>
          </div>
          <div class="card text-center" style="width: 15rem">
            <div class="card-body">
              <h3 class="card-title card-video">Video Call</h3>
              <span class="three-card"></span>
              <p class="card-text">021.123.145.14</p>
              <a href="#" class="btn btn-primary"> Video Call Now</a>
            </div>
          </div>
          <div class="card text-center" style="width: 15rem">
            <div class="card-body">
              <h3 class="card-title card-msj">Message</h3>
              <span class="four-card"></span>
              <p class="card-text">021.123.145.14</p>
              <a href="#" class="btn btn-primary">Message Now</a>
            </div>
          </div>
        </div>
        <div class="section-child">
          <img src="./assets/img/nurse-man.jpg" alt="Enfermero" />
        </div>
      </div>
      <footer>
        <section class="footer-vaccination">
          <h2>Vaccination</h2>
          <p>Our goal is to help the world free from the ongoing pandemic</p>
          <div class="derechos">
            <p>@2022 Vaccination. All rights reserved</p>
          </div>
        </section>
        <section class="footer">
          <h3>About</h3>
          <div class="footer-nav">
            <a href="#">About Us</a>
            <a href="#">Features</a>
            <a href="#">News & Blog</a>
          </div>
        </section>
        <section class="footer">
          <h3>Company</h3>
          <div class="footer-nav">
            <a href="#">How We Work</a>
            <a href="#">Capital</a>
            <a href="#">Security</a>
          </div>
        </section>
        <section class="footer">
          <h3>Support</h3>
          <div class="footer-nav">
            <a href="#">FAQs</a>
            <a href="#">Support Center</a>
            <a href="#">Contact Us</a>
          </div>
        </section>
      </footer>
    </div>
  </body>
</html>