1st project by @tywilliams7 - Codewith.it

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

Referenze

text/plainDefinisce un metodo di non codifica dei valori di un form
selectedPre-seleziona un elemento di input
<i>Formatta il testo in corsivo/italico non enfatizzato
application-x-www-form-urlencodedCodifica dei caratteri di un form
idIdentifica univocamente un elemento HTML
placeholderDefinisce un testo segnaposto per un elemento input o textarea

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

26/01/2024 pagina html

Template Bootstrap(2)

Heads Or Tails Random Tally

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;
    
}