Welcome by @KingStef - Codewith.it

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

Referenze

crossoriginGestisce richieste tra documenti provenienti da origini differenti.
autofocusAttiva un elemento al caricamento della pagina.
<cite>Inserisce citazioni e menzioni riguardo un'opera creativa.
titleIndica informazioni aggiuntive riguardo un elemento HTML
hreflangConsente di dichiarare la lingua del documento collegato.
<div>Crea contenitori generici o sezioni in una pagina

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

VerdeTech (v3) - Orto Botanico | P

Le avventure di Peter Pan

SEMI al FUTURO [Fotogallery]

classifica finita

Cubo 3D animato

Immagini con didascalia

Esercizi 05/03/2024 es1

Calcolatrice classica

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>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">Vai al login</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://www.bmw.com/content/dam/bmw/marketBMWCOM/bmw_com/categories/Design/vantablack/vb-01-stage-hd.jpg.asset.1566908706704.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;}