Disney + by @keanee - Codewith.it

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

Referenze

colspanDefinisce il numero di colonne di una cella all'interno di una tabella.
Inserisce un commento nel codice
<i>Formatta il testo in corsivo/italico non enfatizzato
forSpecifica a quale id è associato l'elemento in cui è dichiarato.
<li>Inserisce voci all'interno di una lista
widthImposta la larghezza di un elemento HTML

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Reti Informatiche

Gesù nostro signore(2)

semicerchio canvas

sito mattia chiarabini

Il tuo link per il download è pro

block zoom test

verifica 1parte

Harrel Lola DIV CSS

Design & Comunicazione Digitale ??

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