Weebflix by @matmat - Codewith.it

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

Referenze

application-x-www-form-urlencodedCodifica dei caratteri di un form
formenctypeDefinisce il tipo di codifica dei dati di un elemento input
<address> Definisce una sezione contenente indirizzi, contatti e informazioni
nameDetermina il nome degli elementi HTML o fornisce dati su un attributo associato.
<base>Specifica l'URL di base per tutti gli URL relativi all'interno della pagina.
<em>Formatta il testo in corsivo/italico enfatizzato

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Tabella base (lezione 10)

Esercitazione n.1

DEMO: Hi-Lo Game

questa sarà una pagina web dedic

Lista con ricerca

Mundane Mondays or Fantastic Frida

REVIEW: For Loops

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="en">
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
    <title>Weebflix</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nerko+One&display=swap" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>

        
        main{
          display: flex;
          align-items: center;
          flex-direction: column;
        }
        
        nav{
          background-color: silver;
          border: solid 5px black;
          border-radius: 5px;
          margin-top: 50px;
        }
        header{
          width: 90%;
          height: 75px;
        }
        h1{
          padding-left: 20px;
          font-family: "Nerko One", cursive;
          font-weight: 400;
          font-size: 30px;
          font-style: normal;
          font-color: navy;
        }
        .head{
          display: flex;
          background-color: silver;
          height: 100px;
          justify-content: center;
          align-items: center;
          font-family: "Nerko One", cursive;
          font-weight: 400;
        }
        .weebflix{
          font-style: normal;
          font-size: 70px;
          font-color: navy;
        }
        div{
          border: solid 5px navy;
          border-radius: 5px;
          margin: 10px;
          background-color: silver;
        }
        body{
          display: flex;
          flex-direction: column;
          background-color: orange;
          align-items: center;
        }
        .Row1, .Row2{
          display: flex;
          flex-direction: row;
        }
        img{
          width:20%;
        }
        img:hover{
        transform: scale(1.1, 1.1);
        }
        footer{
          display: flex;
          font-family: "Nerko One", cursive;
          font-weight: 400;
          font-size: 30px;
          font-style: normal;
          font-color: navy;
        }
        .footerdiv{
          margin:10px;
        }

       
        .Row1:hover{
        border: solid 10px orange;
        
        }
        .Row2:hover{
        border: solid 10px orange;
        }
        .aaa:hover{
        font-color: orange;
        }
      </style>
    </head>
    <body>
      <main>
      <header>
        <div class="head">
          <p class="weebflix">
            Weebflix
          </p>
          </div>
      </header>
<nav>


  <h1>Summer 2024</h1>
  <div class="Row1">
      <img src="https://m.media-amazon.com/images/M/MV5BZmM1M2E1ZDEtYTZiNy00NzFjLTk2NDUtODExMWM3OWQ2NGU3XkEyXkFqcGdeQXVyNjAwNDUxODI@._V1_.jpg" alt="Oshi No Ko" class="oshi">
      <img src="https://www.nautiljon.com/images/anime/00/56/giji_harem_11865.webp" alt="Pseudo Harem" class="pseudo">
      <img src="https://m.media-amazon.com/images/M/MV5BNjg0YTVjNTItZTI1ZC00MDZlLTllYjQtMDY0ODMxNDdlYjY3XkEyXkFqcGc@._V1_FMjpg_UX1000_.jpg" alt="Alya" class="alya">
      <img src="https://imgsrv.crunchyroll.com/cdn-cgi/image/fit=contain,format=auto,quality=85,width=480,height=720/catalog/crunchyroll/6533e54a54f7a69c806920607bc8238e.jpg" alt="Nokotan" class="nokotan">
      <img src="https://m.media-amazon.com/images/M/MV5BNWU1OTgxYTMtZTViMy00MmU0LTg2ZGMtZDVkYTNlYzI4NWRjXkEyXkFqcGc@._V1_.jpg" alt="Wistoria" class="wistoria">
  </div>
  <h1>Recommendations</h1>
  <div class="Row2">
      <img src="https://m.media-amazon.com/images/M/MV5BN2NlM2Y5Y2MtYjU5Mi00ZjZiLWFjNjMtZDNiYzJlMjhkOWZiXkEyXkFqcGdeQXVyNjc2NjA5MTU@._V1_FMjpg_UX1000_.jpg" alt="Re:Zero" class="zero">
      <img src="https://m.media-amazon.com/images/M/MV5BMjUxMzE4ZDctODNjMS00MzIwLThjNDktODkwYjc5YWU0MDc0XkEyXkFqcGdeQXVyNjc3OTE4Nzk@._V1_FMjpg_UX1000_.jpg" alt="Steins;Gate" class="steins">
      <img src="https://images-na.ssl-images-amazon.com/images/I/81M3xEBt13L.jpg" alt="Elaina" class="elaina">
      <img src="https://m.media-amazon.com/images/M/MV5BNGY0NGM5N2UtNzU5MS00MDAwLWFmMWEtZjE4N2Q0Y2M4YjNjXkEyXkFqcGc@._V1_.jpg" alt="Bocchi" class="bocchi">
      <img src="https://m.media-amazon.com/images/M/MV5BZjM4ODA5YTktNjliMC00NzI5LTk3ZTctZWYyYWEyNTJhMmQzXkEyXkFqcGc@._V1_FMjpg_UX1000_.jpg" alt="Made In Abyss" class="abyss">
  </div>
</nav>
<footer>
  <div class="f">
  <h1></h1>
  <p class="footerdiv"><a href="https://myanimelist.net/" target="_blank" class="aaa">Track Your Anime</a></p>
  </div>
</footer>
</main>
      </body>
</html>