Disney + by @keanee - Codewith.it

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

Referenze

<iframe>Crea un frame all'interno di una pagina HTML.
<pre>Indica una parte di testo preformattato
<strong>Definisce una parte del testo importante con formattazione in grassetto.
minlengthDetermina il numero minimo di caratteri per un elemento input
hreflangConsente di dichiarare la lingua del documento collegato.
heightDetermina l'altezza di un elemento HTML in pixel

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Ruota delle Cucine

Resiliant Material

AoIT Dashboard 2024 v1

CodeMirror preview

Proposta di Matrimonio Assurda

Laus Informatica srl - Negozio eBay

Amazing Strange Rope Police

esercizio_tabella.htm

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.

<!DOCTYPE html>
<html>
  <head>
    <title> Disney +</title>
  </head>
  <body>
    <header>
    <div class="website-name-container">
      <button id="hideButton">Hide Newly Added</button>
      <button id="showButton">Show Newly Added</button>
      <h1 class="website-name">Disney <div class="rotating-plus">+</div></h1>
         

    </logo>
    </header>
<nav>
<p class="nav-text">Home</p>
<a href="https://www.youtube.com/">Search</a>
<p class="nav-text">Downloads</p>
<p class="nav-text">User</p>
  </nav>
<main>
  <div class="streaming-services-container">

    <div class="steaming-service">
  <h1>Disney</h1>
    </div>

      <div class="steaming-service">
     <h1> Pixar</h1>
    </div>

      <div class="steaming-service">
<h1>Marvel</h1>
    </div>

      <div class="steaming-service">
        <h1>Star Wars</h1>
    </div>

      <div class="steaming-service">
        <h1>National Geographic</h1>
    </div>

      <div class="steaming-service">
       <h1> Hulu</h1>
    </div>

  </div>

  <div class="marvel-container">
    <p class="section-text">Marvel</p>
    <div class="marvel-gallery">
      <img src="https://m.media-amazon.com/images/I/91EmWoPK3+L._AC_UF894,1000_QL80_.jpg" width="200px" alt="avengers-endgame">
      <img src="https://akns-images.eonline.com/eol_images/Entire_Site/2018112/rs_634x939-181202195654-634.captain-marvel.12418.jpg?fit=around%7C634:939&output-quality=90&crop=634:939;center,top" width="200px" alt="captain-marvel">
      <img src="https://lumiere-a.akamaihd.net/v1/images/p_disneyplusoriginals_themarvels_poster_rebrand_8c17eea5.jpeg" width="200px" alt="the-marvels">
      <img src="https://static0.colliderimages.com/wordpress/wp-content/uploads/2015/05/ant-man-poster-1.jpg" width="200px" alt="ant-man">
      <img src="https://upload.wikimedia.org/wikipedia/en/e/e9/Black_Widow_%282021_film%29_poster.jpg" width="200px" alt="black-widow">
      <img src="https://imageio.forbes.com/specials-images/imageserve/5e67c7697d6f2600068f21a8/Captain-America-The-Winter-Soldier-poster/960x0.jpg?height=1053&width=711&fit=bounds" width="200px" alt="winter-soilder">
    </div>
    </div>

<div id="contentDiv">
    <div class="newly-added-container">
      <p class="section-text">Newly Added<p>
        <div class="newly-added-gallery">
            <img src="https://m.media-amazon.com/images/M/MV5BNTBhYWVjZTYtNTkzMS00ZTM0LWI4NjItOTU5YzMxYWI2YWQ5XkEyXkFqcGdeQXVyNzMwOTY2NTI@._V1_FMjpg_UX1000_.jpg" width="200px" alt="mickey-mouse">
            <img src="https://m.media-amazon.com/images/I/71aBLaC4TzL._AC_UF894,1000_QL80_.jpg" width="200px" alt="toy-story">
            <img src="https://image.tmdb.org/t/p/original/b9mY0X5T20ZM073hoa5n0dgmbfN.jpg" width="200px" alt="bluey">
            <img src="https://static.displate.com/857x1200/displate/2023-01-31/16a1a6111705ac5d830ef3cdb0426fe1_1c622fa03a510f1d18758e2dea77608c.jpg" width="219px" alt="mandalorian">
            <img src="https://m.media-amazon.com/images/M/MV5BMjA1OTUzNTQ5Ml5BMl5BanBnXkFtZTgwODQ4NDkxNjE@._V1_.jpg"width="200px" alt="goosebumps">
            <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSDJTsnjv3W5dKGwYomSG4O2IeTcg2XZkSuSg&s" width="210px" alt="she-hulk">
          </div>
</main>
 <footer>
    <p class="footer-text"> &copy; 2024 Disney +<p>
    </footer>
  </body>
</html>

nav{
  display:flex;
  justify-content: space-around;
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  margin-bottom:50px;
}

body{
  background-color:rgb(45, 45, 90);
}

.nav-text{
  color:white;
}

.steaming-service{
  background-color:white;
  width:350px;
  height:190px;
  border-radius: 10px;
  border-color: rgb(95, 43, 43);
  text-align: center;
}

.streaming-services-container{
  display:flex;
  justify-content: space-around;
}

.website-name{
  color:white;
  text-align:center;
}

.streaming-service-text{
  color:Blue;
  text-align:center;
}

.footer-text{
  color:white;
}

footer{
  display:flex;
    position:fixed;
  bottom:0;
  left:0;
  right:0;
  padding:18px;
}

.section-text{
  color:white;
}

.marvel-gallery{
  display:flex;
  justify-content: space-around;
}

.newly-added-gallery{
 display:flex;
 justify-content:space-around;
}

.hidden{
  display:none;
}

.website-name{
  padding:10px;
}

.website-name:hover{
  color: black;
}

  .rotating-plus {
            font-size: 50px; 
            display: inline-block; 
            animation: rotate 2s linear infinite; 

        @keyframes rotate {
            from {
                transform: rotate(0deg); 
            }
            to {
                transform: rotate(360deg); ]
            }
        }

 const hideButton = document.getElementById('hideButton');
        const showButton = document.getElementById('showButton');
        const contentDiv = document.getElementById('contentDiv');

        hideButton.addEventListener('click', function() {
            contentDiv.classList.add('hidden');
        });

        showButton.addEventListener('click', function() {
            contentDiv.classList.remove('hidden');
        });