Crunchyroll Replica by @EthanS - Codewith.it

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

Referenze

<label>Mostrare un testo di etichetta per un elemento di input.
<thead>Definisce un gruppo di intestazione all'interno di una tabella.
text/plainDefinisce un metodo di non codifica dei valori di un form
enctypeDetermina il tipo di codifica dei dati di un form per l'invio al server
<form>Crea un modulo/form HTML per consentire all'utente di inviare dati al server
<h4>Titolo di intestazione di quarto livello

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Heads Or Tails Random Tally

pagina di prova

semicerchio canvas

Keter Signature

pagina America(2)

Personal Portfolio

tabella html(2)

pokemaniac05.html

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.

<html>
<head>
    <title>
Crunchyroll Replica 
    </title>
    <link rel="stylesheet" href="style.css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

</head>

<body style="margin:0;">

<header>
    <nav>
<div class="leftNav">
        <button class="navButton">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d6/Crunchyroll.svg/2560px-Crunchyroll.svg.png" width="130" height="25" alt="Crunchyroll logo">
</button>

<div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle navButton" type="button" data-bs-toggle="dropdown" aria-expanded="false">
      Browse
    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Popular</a></li>
      <li><a class="dropdown-item" href="#">New</a></li>
      <li><a class="dropdown-item" href="#">Alphabetical</a></li>
    </ul>
  </div>

  <button class="navButton">Games</button>

  <button class="navButton">Store</button>

  <div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle navButton" type="button" data-bs-toggle="dropdown" aria-expanded="false">
News
    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
    </ul>
  </div>
</div>

<div class="rightNav">
<button class="navButton"></button>
<button class="navButton"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z"/></svg></button>
<button class="navButton"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M200-120v-640q0-33 23.5-56.5T280-840h400q33 0 56.5 23.5T760-760v640L480-240 200-120Zm80-122 200-86 200 86v-518H280v518Zm0-518h400-400Z"/></svg></button>
<button class="navButton"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M480-480q-66 0-113-47t-47-113q0-66 47-113t113-47q66 0 113 47t47 113q0 66-47 113t-113 47ZM160-160v-112q0-34 17.5-62.5T224-378q62-31 126-46.5T480-440q66 0 130 15.5T736-378q29 15 46.5 43.5T800-272v112H160Zm80-80h480v-32q0-11-5.5-20T700-306q-54-27-109-40.5T480-360q-56 0-111 13.5T260-306q-9 5-14.5 14t-5.5 20v32Zm240-320q33 0 56.5-23.5T560-640q0-33-23.5-56.5T480-720q-33 0-56.5 23.5T400-640q0 33 23.5 56.5T480-560Zm0-80Zm0 400Z"/></svg></button>
</div>

    </nav>
    <main>
    <div class="Content"></div>
    <section class="background" >
  
    </section>
    </main>
</header>

<footer></footer>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</body>
</html>

html{
    height:100%;
}
.main{
  display:flex;
  flex-direction:row;
}
.Content{
  width:20%;
  height:900px;
}
.background{
    height:900px;
    background-image:url('https://static1.cbrimages.com/wordpress/wp-content/uploads/2022/12/tokyo-ghoul.jpg');
    background-repeat:no-repeat;
    background-size:80%;
}
nav{
    width:100%;
    height:5%;
    background-color:#23252b;
    padding-inline:6em;
    display:flex;
    align-items:center;
    justify-content:space-between;
}
.leftNav{
    display:flex;
}
.navButton{
    color:white;
    padding-inline:1em;
    background-color: transparent!important;
    border:none!important;
}