disney plus project by @Azan_K - Codewith.it

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

Referenze

downloadConsente di scaricare file al click di collegamento ipertestuale.
<embed>Tag per l'incorporamento di contenuti multimediali
<h4>Titolo di intestazione di quarto livello
<blockquote>Inserisce citazioni in un documento HTML
requiredRende obbligatorio un campo di input
<i>Formatta il testo in corsivo/italico non enfatizzato

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Questa è una pagina dimostrativa

mental breackdown

tabella ennesima

QUESTA è LA HOMEPAGE V.1

attività della settimana

Costruzione di tabella con html5

Department Staff Updates

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> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet">
 <title>Disney+ Movies</title> </head> <body> <header class="header"> <div class="logo"> <img src="https://upload.wikimedia.org/wikipedia/commons/7/77/Disney_Plus_logo.svg"></div> <a href="#" class="nav-link">HOME</a> <a href="#" class="nav-link">SEARCH</a> <a href="#" class="nav-link">WAITLIST</a> <a href="#" class="nav-link">MOVIES</a> <a href="#" class="nav-link">SERIES</a> </nav> </header> <div class= "content"> <h1 class="title">M O V I E S</h1> <div class="grid"> <div class="grid-item"> <img src="https://cfm.yidio.com/images/movie/29862/backdrop-640x360.jpg" alt="Toy Story 3"> <div class="info"> <p>Toy Story 3</p> </div> </div> 
 
 <div class="grid-item"> <img src="https://pixarpost.com/wp-content/uploads/2023/01/Coco-Broadway.jpg" alt="COCO"> <div class="info"> <p>COCO</p> </div> </div> <div class="grid-item"> <img src="https://prod-ripcut-delivery.disney-plus.net/v1/variant/disney/DB176BD1488D7E4822256EF1778C124FC17388FC1E7F0F6D89B38AFF5FB001F6/scale?width=1200&aspectRatio=1.78&format=webp" alt="Avengers: Endgame"> <div class="info"> <p>Avengers: Endgame</p> </div> </div> <div class="grid-item"> <img src="https://prod-ripcut-delivery.disney-plus.net/v1/variant/disney/9D957EE9927C232A5B89AC33CEF3D70929D59AF323BB46DB7C5F492912FFF3D0/scale?width=1200&amp;aspectRatio=1.78&amp;format=webp" alt="Moana"> <div class="info"> <p>Moana</p> </div> </div> 


<div class="grid-item"> <img src="https://prod-ripcut-delivery.disney-plus.net/v1/variant/disney/6E3379DBFDA41CF305BFD7FE6D14FDB5F901F0CDC9B27C66D7E6FBEA2864B4F2/scale?width=1200&aspectRatio=1.78&format=webp" alt="The Lion King"> <div class="info"> <p>The Lion King</p> </div> 

</div> 

<div class="grid-item"> <img src="https://prod-ripcut-delivery.disney-plus.net/v1/variant/disney/F130FB9A0A124CA76D3A24DCCE879BF83D96F64BA422F8AF5731723F4FA2D0EF/scale?width=1200&amp;aspectRatio=1.78&amp;format=webp" alt="Cars 2"> <div class="info"> <p>Cars 2</p> </div> 

</div> <div class="grid-item"> <img src="https://prod-ripcut-delivery.disney-plus.net/v1/variant/disney/A457A9A75AFE7DE251B7C259B6115DE7374ACDB4FAC21933DEAE68DA49DEA318/scale?width=1200&aspectRatio=1.78&format=webp" alt="Inside Out"> <div class="info"> <p>Inside Out</p> </div> </div> <div class="grid-item"> <img src="https://prod-ripcut-delivery.disney-plus.net/v1/variant/disney/213EA03F2F1EBD7974EF259CF3398E7C018E6D84E4E6A524A7C7A374322139B7/scale?width=600&aspectRatio=1.78&format=webp" alt="Soul"> <div class="info"> <p>Soul</p> </div> </div> <div class="grid-item"> <img src="https://static.wixstatic.com/media/b5ed0a_fd4d74a186054b9b905f4648f882ffc1~mv2.jpeg/v1/fill/w_1000,h_563,al_c,q_85,usm_0.66_1.00_0.01/b5ed0a_fd4d74a186054b9b905f4648f882ffc1~mv2.jpeg" alt="The Incredibles"> <div class="info"> <p>The Incredibles</p> </div> </div> <div class="grid-item"> <img src="https://prod-ripcut-delivery.disney-plus.net/v1/variant/disney/3C00DB65DC100316897CD8B6D81577322C87A25435EB7B363884BAFCC67DB0AE/scale?width=1200&aspectRatio=1.78&format=webp" alt="Up"> <div class="info"> <p>Up</p> </div> </div> </div> </div> </div> </body> </html>

img{
height: 40px;
}

body {

 background-color: #0B1633;
  color: white;
  font-family: "Inter", sans-serif;
font-size: 20px;
}

.header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:10px;
}

.nav-links {
  display: flex;
}

.nav-link {
  margin-right: 20px;
  color: #ccc;
  text-decoration: none;
}

.nav-link:hover {
  color: white;
}

.content {
  margin-top: 20px;
  text-align: center;
}

.title {
  font-size: 40px;
  margin-bottom: 20px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.grid-item {
  border: 1px solid #333;
  position: relative;
  overflow: hidden;
}

.grid-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.grid-item:hover img {
  transform: scale(1.1);
}

.grid-item .info {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  padding: 10px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.grid-item:hover .info {
  opacity: 1;
}

img{
height: 40px;
}