Disney + by @keanee - Codewith.it

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

References

headersDetermina la relazione tra celle e celle di intestazione di una tabella.
formactionPermette di definire l'URL di una pagina web a cui inviare i dati di un form
downloadConsente di scaricare file al click di collegamento ipertestuale.
formnovalidateImpedisce la convalida di un singolo elemento input
<iframe>Crea un frame all'interno di una pagina HTML.
<h2>Titolo di intestazione di secondo livello

Users

Log in to search for users

Explore

Find inspiration

Image Comparison Slider

Keter Signature

Éclat Couture - Alta Moda Artigia

Review of Functions I

Real Word Counter JS

Analisi Drive Synology: RS814RP+ &

Test Gaming HTML MEME

MANUALE WIKIPEDIA

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.

<!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');
        });