Step 8

Open style.css file:

body {
  background: url(/background.svg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

This minimal styling loads the background image (public/background.svg). I downloaded the Gradient Topography image available at https://coolbackgrounds.io/ and renamed the downloaded file to background.svg.

Open the index.html file and notice the app loads Bootsrtap CSS budle. The following layout is styled with Bootstrap:

<div class="fixed-top mt-5">
  <div class="container">
    <h1>Weather App</h1>
    <form id="search">
      <input
        id="city"
        name="city"
        class="form-control form-control-lg"
        type="text"
        placeholder="Enter a location to get weather forecast"
      />
    </form>
  </div>
</div>
<div class="fixed-bottom mb-5">
  <div class="container">
    <div class="row">
      <div id="name" class="col-sm h3 my-2 align-self-start text-start">
        City Name
      </div>
      <div id="condition" class="col-sm h3 my-2 align-self-center text-center">
        Weather Condition
      </div>
      <div id="temperature" class="col-sm h3 my-2 align-self-end text-end">
        Temperature
      </div>
    </div>
  </div>
</div>