disney plus project by @Azan_K - Codewith.it

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

Referenze

<div>Crea contenitori generici o sezioni in una pagina
<html>Tag primario di un documento HTML
<address> Definisce una sezione contenente indirizzi, contatti e informazioni
<li>Inserisce voci all'interno di una lista
disabledImpedisce la modifica di un input
animation-directionProprietà CSS per definire la direzione di esecuzione di un'animazione

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

ESERCITAZIONE ORSI

Review of Functions I

La prima pagina

Album-Reccomendations

il museo di leonardo

questa sarà una pagina web dedic

Calcolo Codice Fiscale

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