Crunchyroll Replica by @EthanS - Codewith.it

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

References

autoplayAttributo HTML autoplay per l'avvio automatico degli elementi audio e video
formSpecifica a quale form appartiene un elemento.
formnovalidateImpedisce la convalida di un singolo elemento input
<input>Definisce un area di input per l'invio di dati e informazioni
animation-directionProprietà CSS per definire la direzione di esecuzione di un'animazione
novalidateImpedisce la convalida dei campi con valori tipizzati di elemento input

Users

Log in to search for users

Explore

Find inspiration

Prova altro form

JS Oggetti ed eventi es1

Quiz ristrutturazione

FORMA - Interactive Surfaces. Rede

esercitazione 1

hate this project

HTML

CSS

JS

terminal console

feedback

add_box New

cookie Policy

Privacy information and cookies

We use cookies or technologies for technical purposes and, with your consent, also for other purposes as specified in the cookie policy. Refusal of consent may make some functions unavailable. Read more about the privacy policy

Click on “Agree” to confirm.

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