The weeknd by @brookex0 - Codewith.it

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

Referenze

getDefinisce un metodo di invio di dati al server
hrefDefinisce l'URL della risorsa/pagina di destinazione.
autoplayAttributo HTML autoplay per l'avvio automatico degli elementi audio e video
<meta>Definisce i meta dati di una pagina web.
colspanDefinisce il numero di colonne di una cella all'interno di una tabella.
formSpecifica a quale form appartiene un elemento.

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Il Mago e Frondavale.html

block zoom test

Primo esercizio

JEANSON ANCHETA

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 lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>N⋆E⋆R⋆D</title>
  <style>
    body {
      font-family: 'Arial', sans-serif;
      background-color: #121212;
      color: #e0e0e0;
      margin: 0;
      padding: 0;
    }

    .container {
      max-width: 1200px;
      margin: auto;
      padding: 20px;
    }

    header {
      text-align: center;
      background: #1f1f1f;
      padding: 20px 0;
      border-bottom: 2px solid #e0e0e0;
    }

    header h1 {
      font-size: 2.5em;
      color: #ffcc00;
    }

    .album-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
      gap: 20px;
      margin-top: 20px;

    }

    .album {
      background: #2a2a2a;
      border-radius: 10px;
      overflow: hidden;
      transition: transform 0.3s;
      cursor: pointer;
      position: relative;
    }

    .album:hover {
      transform: scale(1.05);
    }

    .album img {
      max-width: 100%;
      height: auto;
      display: block;
    }

    .album-info {
      padding: 15px;
      text-align: center;
      position: relative;
    }

    .nested {
      display: none;
      background: #333;
      padding: 10px;
      border-radius: 5px;
      margin-top: 10px;
    }

    .show {
      display: block;
    }

    a {
      color: #ffcc00;
      text-decoration: none;
    }

    a:hover {
      text-decoration: underline;
    }

    footer {
      text-align: center;
      padding: 20px 0;
      background: #1f1f1f;
      border-top: 2px solid #e0e0e0;
      position: relative;
    }

    .seperator {
      
    }
  </style>
</head>

<body>
  <div class="container">
    <header>
      <img src="">
      <h1> </h1>
    </header>

    <div class="album-grid">
      <div class="album" onclick="toggleDetails(this)">
        <img src="https://upload.wikimedia.org/wikipedia/commons/9/97/XO_Records.png" alt="">
        <div class="album-info">
          <h2></h2>
          <div class="nested">
            <p>Release Date: 2001</p>
            <p><a href="https://open.spotify.com/artist/1Xyo4u8uXC1ZmMpatF05PJ#login">More Info</a>
            </p>
          </div>
        </div>
     
      </div>
<div class="album" onclick="toggleDetails(this)">
        <img src="https://upload.wikimedia.org/wikipedia/en/3/39/The_Weeknd_-_Starboy.png" alt="Star Trak Entertainment">
        <div class="album-info">
          <h2>Starboy</h2>
          <div class="nested">
            <p>Release Date: 2016</p>
            <p><a href="https://open.spotify.com/album/2ODvWsOgouMbaA5xf0RkJe">More Info</a></p>
          </div>
        </div>
      </div>
     
      <div class="album" onclick="toggleDetails(this)">
        <img src="https://cdn.prod.website-files.com/62fd6bee5ed6f414bbd8dfed/633086f7fa208d28548d3672_The%20Weeknd%20House%20of%20Balloons.jpg" alt="House of balloons">
        <div class="album-info">
          <h2>House of balloons</h2>
          <div class="nested">
            <p>Release Date: 2011</p>
            <p><a href="https://open.spotify.com/album/7zCODUHkfuRxsUjtuzNqbd">More Info</a></p>
          </div>
        </div>
      </div>
       <div class="album" onclick="toggleDetails(this)">
        <img src="https://preview.redd.it/x0mdqmv0pqd91.jpg?width=640&crop=smart&auto=webp&s=e87be44cfede14c19fa275d502aa294f8a20111a" alt="Kiss Land">
        <div class="album-info">
          <h2>Kiss Land</h2>
          <div class="nested">
            <p>Release Date: 2013</p>
            <p><a href="https://open.spotify.com/album/2FgMWuwMeTgJArP2RF3upF">More Info</a>
            </p>
          </div>
        </div>
      </div>
     
      <div class="album" onclick="toggleDetails(this)">
        <img src="https://shop.republicrecords.com/cdn/shop/files/1000x1000_1b991579-cf84-4675-9fc1-47b37dfeb662.png?v=1706540656" alt="Fly or Die">
        <div class="album-info">
          <h2>Beauty Behind the Madness</h2>
          <div class="Beauty Behind the Madness">
            <p>Release Date: 2015</p>
            <p><a href="https://open.spotify.com/album/0P3oVJBFOv3TDXlYRhGL7s">More Info</a>
            </p>
          </div>
        </div>
      </div>
  
  <div class="album" onclick="toggleDetails(this)">
        <img src="https://www.euphoriazine.com/wp-content/uploads/2020/03/TheWeekndHeartlessVideo.jpg" alt="After Hours">
        <div class="album-info">
          <h2>After Hours</h2>
          <div class="nested">
            <p>Release Date: 2020</p>
            <p><a href="https://open.spotify.com/album/4yP0hdKOZPNshxUOjY0cZj">More Info</a>
            </p>
          </div>
        </div>
      </div>
      <div class="album" onclick="toggleDetails(this)">
        <img src="https://preview.redd.it/the-weeknds-ep-my-dear-melancholy-cover-in-pixel-art-v0-rvjap2tjgcwa1.png?auto=webp&s=2e2afafe2246e7b271ba452861c066c0009a1b1f" alt="The Weeknd My Dear Melancholy,">
        <div class="album-info">
          <h2>The Weeknd My Dear Melancholy,</h2>
          <div class="nested">
            <p>Release Date: 2018</p>
            <p><a href="https://open.spotify.com/album/4qZBW3f2Q8y0k1A84d4iAO">More Info</a>
            </p>
          </div>
        </div>
      </div>

      <div class="album" onclick="toggleDetails(this)">
        <img src="https://i.scdn.co/image/ab67616d0000b273b298538481c52f7e217ed000" alt="Trilogy">
        <div class="album-info">
          <h2>Trilogy</h2>
          <div class="Trilogy">
            <p>Release Date: 2012</p>
            <p><a href="https://open.spotify.com/album/5EbpxRwbbpCJUepbqVTZ1U">More Info</a>
            </p>
          </div>
        </div>
      </div>

      <div class="album" onclick="toggleDetails(this)">
        <img src="https://i.scdn.co/image/ab67616d0000b273308f9319a3d6f6737f43b3fc" alt=" Live at SoFi Stadium">
        <div class="album-info">
          <h2> Live at SoFi Stadium</h2>
          <div class="nested">
            <p>Release Date: 2023</p>
            <p><a href="https://open.spotify.com/album/1OARrXe5sB0gyy3MhQ8h92">More Info</a>
            </p>
          </div>
        </div>
      </div>

    

      <div class="album" onclick="toggleDetails(this)">
        <img src="https://i.scdn.co/image/ab67616d0000b2732756fcc016298cf16ccf6020" alt="Bape">
        <div class="Dawn Fm">
          <h2>Dawn Fm</h2>
          <div class="nested">
            <p>Release Date: 2016</p>
            <p><a href="https://open.spotify.com/album/2nLOHgzXzwFEpl62zAgCEC">More
                Info</a></p>
          </div>
        </div>
      </div>
    </div>

    <footer>
      <p>The weeknd</p>
    </footer>
  </div>

  <script>
    function toggleDetails(album) {
            const details = album.querySelector('.nested');
            details.classList.toggle('show');
        }
  </script>
</body>

</html>

font-family: 'Arial', sans-serif;
  background-color: #121212;
  color: #e0e0e0;
  margin: 0;
  padding: 0;
}

.container {
  max-width: 1200px;
  margin: auto;
  padding: 20px;
}

header {
  text-align: center;
  background: #1f1f1f;
  padding: 20px 0;
  border-bottom: 2px solid #e0e0e0;
}

header h1 {
  font-size: 2.5em;
  color: #ffcc00;
}

.album-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
  margin-top: 20px;
  justify-items: center;
}

.album {
  background: #2a2a2a;
  border-radius: 10px;
  overflow: hidden;
  transition: transform 0.3s;
  cursor: pointer;
  position: relative;
  text-align: center;
}

.album:hover {
  transform: scale(1.05);
}

.album img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.album-info {
  padding: 15px;
  position: relative;
}

.nested {
  display: none;
  background: #333;
  padding: 10px;
  border-radius: 5px;
  margin-top: 10px;
}

.show {
  display: block;
}

a {
  color: #ffcc00;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

footer {
  text-align: center;
  padding: 20px 0;
  background: #1f1f1f;
  border-top: 2px solid #e0e0e0;
  position: relative;
}