Crunchyroll Replica by @EthanS - Codewith.it

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

Referenze

<table>Tag primario per la creazione di tabelle
<option>Serve ad inserire una voce in un menu di selezione.
valueValore alfanumerico o booleano contenuto in un elemento
<ul>Usato per la creazione di liste non ordinate.
<label>Mostrare un testo di etichetta per un elemento di input.
<link>Collega il documento corrente con una risorsa esterna

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Our first web page!

Movimento libero JS

Compito di merda numero 1

Twitchpage3okok

esercizio form 1

La sicurezza in informati

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