Crunchyroll Replica by @EthanS - Codewith.it

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

References

<h1>Titolo di intestazione di primo livello
Inserisce un commento nel codice
<a>Inserisce link e collegamenti ipertestuali
srcsetL'attributo srcset definisce la risorsa grafica tramite URL all'interno del tag <source> contenuto in <picture>
<u> Utilizzato definire una parte del contenuto come annotazione non testuale, con una sottolineatura.
checkedPre-imposta su 'true' il valore di un elemento input checkbox o radio

Users

Log in to search for users

Explore

Find inspiration

Calcolatrice Top

Map System using Leaflet

Gesù nostro signore

Inizio gioco progetto di informati

pagina prova sara

BasicStructure.html

La sicurezza in informati

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