The weeknd by @brookex0 - Codewith.it

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

Referenze

<h5>Titolo di intestazione di quinto livello
<select>Usato per creare un menu a tendina.
<label>Mostrare un testo di etichetta per un elemento di input.
application-x-www-form-urlencodedCodifica dei caratteri di un form
getDefinisce un metodo di invio di dati al server
<aside>Definisce un contenuto separato dal testo perincipale

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Costruzione di tabella con html5

Esercizio tabella spese

textarea select and replace

Nexa Digital - Web Design, AI Gene

esercizio 01 pagina semplice

Cappuccetto Rosso - La Storia

esercitazione 1

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