Crunchyroll Replica by @EthanS - Codewith.it

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

References

crossoriginGestisce richieste tra documenti provenienti da origini differenti.
heightDetermina l'altezza di un elemento HTML in pixel
_selfApre collegamenti ipertestuali nella stessa pagina del browser
<embed>Tag per l'incorporamento di contenuti multimediali
<body>Tag primario di un documento HTML
<td>Definisce una cella di una tabella HTML.

Users

Log in to search for users

Explore

Find inspiration

Esercitazione 1

Esercitazione n. 1

meraviglieItaliaFrame

Quiz ICF — 60 domande (Sotto-com

sanchez ximena html 3

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