index.html

<!DOCTYPE html>
<html lang="en-gb">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <link rel="stylesheet" href="./assets/css/style.css">
  <title>Weather Dashboard</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">

</head>

<body>
  <header class="container-fluid text-center border  text-black radiusbg-dark p-2 weather-header">
    <h1>Weather Dashboard</h1>
  </header>

  <!-- max-width for ultra wide resolutions -->
  <div class="container" style="max-width: 1400px">
    <div class="row">
      <aside class="col-lg-3 pb-3">
        <h4 id="form-heading" class="mt-1 h3 form-label" fw>Search for a City: </h4>
        <form id="search-form" class="form">
          <div class="form-inline form-group">
            <div class="input-group">
              <input class="form-input weather-search" type="text" id="search-input" placeholder="London"
                aria-labelledby="form-heading" aria-controls="today forecast" />
              <div class="input-group-append">
                <button type="submit" class="btn search-button btn-primary btn-lg  accordion-flush=" search-button
                  aria-label="submit search"> Search
                </button>
              </div>
            </div>
          </div>
        </form>
        <hr class="hr weather-hr" />
        <div class="list-group d-grid gap-lg-3" " id="history">
        </div>
      </aside>

      <div class="col-lg-9 pb-3">
        <section id="today" class="mt-3" role="region" aria-live="polite">
          <div class="currentWeather border  py-2 px-4 rounded-3 ">
            <div class="mt-3 d-flex justify-content-between">
              <div>
                <h3 class="fw-bold">_______  ______ </h3>
                <img src="" class="weatherIcon">
                <h6 class="my-3 mt-3">Temperature: __°C</h6>
                <h6 class="my-3">Wind: __ M/S</h6>
                <h6 class="my-3">Humidity: __%</h6>
              </div>
            </div>
          </div>
        </section>

        <section id="forecast" class="row mt-3" role="region" aria-live="polite">
          <h4 class="fw-bold my-4">5-Day Forecast</h4>
          <div class="forecastDays  row row-cols-1 row-cols-sm-2 row-cols-lg-4 row-cols-xl-5 justify-content-between">
            <div class="col mb-3 ">
              <div class="card border-1 ">
                <div class="card-body p-3 border ">
                  <h5 class="card-title fw-semibold">______</h5>
                  <img src="" class="weatherIcon">
                  <h6 class="card-text  my-3 mt-3">Temp: __°C</h6>
                  <h6 class="card-text t my-3">Wind: __ M/S</h6>
                  <h6 class="card-text my-3">Humidity: __%</h6>
                </div>
              </div>
            </div>
            <div class="col mb-3">
              <div class="card border-0 text-light">
                <div class="card-body p-3 border  text-light">
                  <h5 class="card-title fw-semibold"> ______ </h5>
                  <img src="" class="weatherIcon">
                  <h6 class="card-text my-3 mt-3">Temp: __°C</h6>
                  <h6 class="card-text my-3">Wind: __ M/S</h6>
                  <h6 class="card-text my-3">Humidity: __%</h6>
                </div>
              </div>
            </div>
            <div class="col mb-3">
              <div class="card border-0 text-light">
                <div class="card-body p-3 border  text-light">
                  <h5 class="card-title fw-semibold"> </h5>
                  <img src="" class="weatherIcon">
                  <h6 class="card-text my-3 mt-3">Temp: __°C</h6>
                  <h6 class="card-text my-3">Wind: __ M/S</h6>
                  <h6 class="card-text my-3">Humidity: __%</h6>
                </div>
              </div>
            </div>
            <div class="col mb-3">
              <div class="card border-0 text-light">
                <div class="card-body p-3 border  text-light">
                  <h5 class="card-title fw-semibold"> ______ </h5>
                  <img src="" class="weatherIcon">
                  <h6 class="card-text my-3 mt-3">Temp: __°C</h6>
                  <h6 class="card-text my-3">Wind: __ M/S</h6>
                  <h6 class="card-text my-3">Humidity: __%</h6>
                </div>
              </div>
            </div>
            <div class="col mb-3">
              <div class="card border-0 text-light">
                <div class="card-body p-3 border text-light">
                  <h5 class="card-title fw-semibold"> ______ </h5>
                  <img src="" class="weatherIcon">
                  <h6 class="card-text my-3 mt-3">Temp: __°C</h6>
                  <h6 class="card-text my-3">Wind: __ M/S</h6>
                  <h6 class="card-text my-3">Humidity: __%</h6>
                </div>
              </div>
            </div>
          </div>
        </section>
      </div>
    </div>

    <!-- Bootstrap -->
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"
      integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r"
      crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js"
      integrity="sha384-BBtl+eGJRgqQAUMxJ7pMwbEyER4l1g+O15P+16Ep7Q9Q+zqX6gSbd85u4mG4QzX+"
      crossorigin="anonymous"></script>
    <!-- Day.js -->
    <script src="https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js"></script>
    <!-- jQuery -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="./assets/js/script.js"></script>
</body>

</html>