1st project by @tywilliams7 - Codewith.it

#main, .loader-cont { display: none; } JavaScript disabilitato.
Non puoi usare Codewith.it senza JavaScript.

Referenze

<td>Definisce una cella di una tabella HTML.
<caption>Definisce didascalie all'interno di una tabella
<ol>Crea liste ordinate o numerate.
<option>Serve ad inserire una voce in un menu di selezione.
styleDefinisce regole e stili CSS all'interno di un tag HTML (inline CSS)
<ul>Usato per la creazione di liste non ordinate.

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

ciao io sono sara

Esame di informatica

Review of Functions I

progetto 3 morra cinese

HTML

CSS

JS

terminal console

feedback

add_box Nuovo

cookie Informativa

Informativa privacy e cookies

Utilizziamo cookie o tecnologie per finalità tecniche e, con il tuo consenso, anche per altre finalità come specificato nella cookie policy. Il rifiuto del consenso può rendere non disponibili alcune funzioni. Leggi di più sull'informativa privacy

Clicca su “Accetta” per acconsentire.

 <h1>The Weather App</h1>

    <form>
      <div class="overflow-container">

      <input list="locations" type="text"  placeholder="Enter City" class="locationInput">
        
      <datalist id="locations">
        <option value="Phoenix"></option>
        <option value="Miami"></option>
        <option value="Denver"></option>
        <option value="Los Angeles"></option>
        <option value="Baton Rouge"></option>
          <option value="Chicago"></option>
          <option value="Little Rock"></option>
          <option value="Oklahoma City"></option>
          <option value="Nashville"></option>
          <option value="Salt Lake"></option>
          <option value="Columbus"></option>
          <option value="Newport"></option>
          <option value="Brooklyn"></option>
          <option value="Boston"></option>
          <option value="Hartford"></option>
      </datalist>

  
      <button class="button2">Enter</button>
    </form>

    <div class="weatherOutput">
      <div class="weatherIcon">
      <div class="weatherResults"></div>

      <div class="weatherconditons"></div>
      <div class="weatherTemp"></div>
    </div>

body {
  background-image: url("https://www.freestepdodge.com/attachments/03fcd68e5673f08be96d2b6bb5be8261-gif.27647/");
  background-repeat: no-repeat;
  background-size: 100%;
  margin:0%;
  padding:50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.videoBg {
  height: 100%;
  width: 100%;
  position: absolute;
  z-index: 1;
  object-fit: cover;
}

.main {
  position: relative;
  z-index: 100;
}

body {
  background-size: cover;
}

.overflow-container {
  display: flex;
  justify-content: space-around;
}

.weather {
  overflow: auto;
  position: relative;
}

.heavy-rain {
  overflow: hidden;
  position: absolute;
  top: 50px;
  left: 20px;
}

.Sunny-Weather  {
    position: fixed;
    top: 10px;
    right: 10px;
    
}