Pippo by @PippoBest321 - Codewith.it

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

Referenze

<h1>Titolo di intestazione di primo livello
styleDefinisce regole e stili CSS all'interno di un tag HTML (inline CSS)
srcIndica la provenienza di una risorsa esterna (tramite URL).
hrefDefinisce l'URL della risorsa/pagina di destinazione.
<h5>Titolo di intestazione di quinto livello
mediaSpecifica a quale dispositivo/display/documento è ottimizzata una risorsa.

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Review of Functions I

Crunchyroll Replica

Indovina il Numero - Gioco

questa sarà una pagina web dedic

esercizio riepilogativo 2

spotify dashboard

SEMI al FUTURO [Fotogallery]

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.

<!DOCTYPE html>
<html lang="it"t>
  <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
      href="https://fonts.googleapis.com/css?family=Dosis:300,400,700"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="benvenuto.css" />
    <title>AutoHUB Welcome</title>
  </head>
  <body>
    <div class="container">
      <div class="banner">
        <h1><span>Benvenuto</span></h1>     
        <button type="button" class="btn-left"><a href="http://gianlucapetito.altervista.org/autosalone2/index.html">Continua</a></button>       
      </div>
    </div>
  </body>
</html>

*{ }* {
  margin: 0;
  padding: 0;
  font-family: "Dosis", sans-serif;
}

.container {
  width: 100%;
  height: 100vh;
  background: linear-gradient(rgba(2,2,2,0.5), rgba(0,0,0,0.6)),
    url(https://siviaggia.it/wp-content/uploads/sites/2/2020/02/castiglione-del-lago.jpg) center no-repeat;
  background-size: cover;
  overflow: hidden;
  position: relative;
}

.banner {
  width: 100%;
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.banner h1 {
  font-size: 80px;
  color: #ddd;
  font-weight: 300;
  margin-bottom: 30px;
  animation: moveToLeft 2s;
}

.banner span {
  text-transform: uppercase;
  font-weight: 700;
  color: #fff;
}

.banner p {
  font-size: 50px;
  font-weight: 300;
  color: #eee;
  margin-bottom: 20px;
  animation: moveToRight 2s;
}

.banner button {
  width: 180px;
  padding: 12px;
  margin: 20px;
  border: 2px solid #eee;
  border-radius: 50px;
  font-size: 18px;
  outline: none;
  letter-spacing: 1px;
  cursor: pointer;
}

.btn-left {
  background-color: #eee;
  color: #444;
  animation-name: animateBtn;
  animation-duration: 1s;
  animation-delay: 1.5s;
  animation-fill-mode: backwards;
}

.btn-right {
  background-color: transparent;
  color: #eee;
  animation-name: animateBtn;
  animation-duration: 1s;
  animation-delay: 2.3s;
  animation-fill-mode: backwards;
}

@keyframes moveToLeft {
  0% {
    transform: translateX(120px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes moveToRight {
  0% {
    transform: translateX(-120px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes animateBtn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
a {text-decoration: none;}