N.E.R.D by @jeromef11 - Codewith.it

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

Referenze

idIdentifica univocamente un elemento HTML
_blankApre i collegamenti ipertestuali in una nuova scheda del browser
<label>Mostrare un testo di etichetta per un elemento di input.
<hr>Inserisce una linea orizzontale
<br>Inserisce uno spazio vuoto tra due elementi HTML.
<h2>Titolo di intestazione di secondo livello

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Esercizio tabella e form

pag. 6 progetto inf

RadioTorchiarolo:NUOVO SITO - Home

sito mattia chiarabini

Esercizi 05/03/2024 es10

esercizio 3 esame

Leggere Lolita a Teheran Azar Nafi

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="https://seeklogo.com/images/N/n-e-r-d-logo-D781F7E87D-seeklogo.com.png">
      <h1> N⋆E⋆R⋆D/Neptunes Albums and projects</h1>
    </header>

    <div class="album-grid">
      <div class="album" onclick="toggleDetails(this)">
        <img src="https://upload.wikimedia.org/wikipedia/en/0/00/Insearchof.jpg" alt="In Search of...">
        <div class="album-info">
          <h2>In Search of...</h2>
          <div class="nested">
            <p>Release Date: 2001</p>
            <p><a href="https://open.spotify.com/album/5u8ri4s76Ew14IwGOJf5hI?si=ODhhWzX7STmNnbe1ummPTw">More Info</a>
            </p>
          </div>
        </div>
      </div>
<div class="album" onclick="toggleDetails(this)">
        <img src="https://images.theshfl.com/5741703686782976_v1_600.jpg" alt="Star Trak Entertainment">
        <div class="album-info">
          <h2>Star Trak Entertainment</h2>
          <div class="nested">
            <p>Release Date: 2002</p>
            <p><a href="https://en.wikipedia.org/wiki/Star_Trak_Entertainment">More Info</a></p>
          </div>
        </div>
      </div>
      <div class="album" onclick="toggleDetails(this)">
        <img src="https://d13qso5xfejx18.cloudfront.net/product-media/548Q/1000/1000/IMG1549.jpg" alt="Billionaire Boys Club">
        <div class="album-info">
          <h2>Billionaire Boys Club</h2>
          <div class="nested">
            <p>Release Date: 2003</p>
            <p><a href="https://www.bbcicecream.com">More Info</a></p>
          </div>
        </div>
      </div>
       <div class="album" onclick="toggleDetails(this)">
        <img src="https://upload.wikimedia.org/wikipedia/en/c/c7/The_Neptunes_Clones.PNG" alt="Clones">
        <div class="album-info">
          <h2>Neptunes Present... Clones</h2>
          <div class="nested">
            <p>Release Date: 2003</p>
            <p><a href="https://open.spotify.com/album/0AO5ibcO686oWXf96D83pM?si=rrBDdN2hTLCWaC6OTVbvvw">More Info</a>
            </p>
          </div>
        </div>
      </div>
      <div class="album" onclick="toggleDetails(this)">
        <img src="https://upload.wikimedia.org/wikipedia/en/4/4d/NERD_Fly_or_Die.jpg" alt="Fly or Die">
        <div class="album-info">
          <h2>Fly or Die</h2>
          <div class="nested">
            <p>Release Date: 2004</p>
            <p><a href="https://open.spotify.com/album/1DDsclE9PANAkXHyNjlDI4?si=Q5sAMuSlSD6EMXiP5rUYIw">More Info</a>
            </p>
          </div>
        </div>
      </div>
<div class="album" onclick="toggleDetails(this)">
        <img src="https://upload.wikimedia.org/wikipedia/en/6/63/Pharrell_-_In_My_Mind.png" alt="In My Mind">
        <div class="album-info">
          <h2>In My Mind</h2>
          <div class="nested">
            <p>Release Date: 2006</p>
            <p><a href="https://open.spotify.com/album/2AYyw0FbE1GXlNHnx2Gj4a?si=uLyx4Rg2TSW4tGuHx12-oQ">More Info</a>
            </p>
          </div>
        </div>
      </div>
      <div class="album" onclick="toggleDetails(this)">
        <img src="https://upload.wikimedia.org/wikipedia/en/2/2f/N.E.R.D_-_Seeing_Sounds.jpg" alt="Seeing Sounds">
        <div class="album-info">
          <h2>Seeing Sounds</h2>
          <div class="nested">
            <p>Release Date: 2008</p>
            <p><a href="https://open.spotify.com/album/20jWmZIMmIaclvShj8KSrB?si=MCSv9xpPQO2TZZCDlYxotg">More Info</a>
            </p>
          </div>
        </div>
      </div>

      <div class="album" onclick="toggleDetails(this)">
        <img src="https://upload.wikimedia.org/wikipedia/en/7/76/N.E.R.D_-_Nothing.jpg" alt="Nothing">
        <div class="album-info">
          <h2>Nothing</h2>
          <div class="nested">
            <p>Release Date: 2010</p>
            <p><a href="https://open.spotify.com/album/1yy1UWlWsmbOJzQmcHlMyx?si=42xd9bBxQxCZtwpqCkzKzA">More Info</a>
            </p>
          </div>
        </div>
      </div>

      <div class="album" onclick="toggleDetails(this)">
        <img src="https://upload.wikimedia.org/wikipedia/en/c/cd/No_one_ever_really_dies_album.jpeg" alt="No One Ever Really Dies">
        <div class="album-info">
          <h2>No One Ever Really Dies</h2>
          <div class="nested">
            <p>Release Date: 2017</p>
            <p><a href="https://open.spotify.com/album/54OXaFd0PtGtAgauTmARkD?si=0ib3mTSoT36mup5JecbUcg">More Info</a>
            </p>
          </div>
        </div>
      </div>

    

      <div class="album" onclick="toggleDetails(this)">
        <img src="https://upload.wikimedia.org/wikipedia/en/0/03/A_Bathing_Ape_%28logo%29.png" alt="Bape">
        <div class="Bape">
          <h2>Bape/Nigo</h2>
          <div class="nested">
            <p>Release Date: 1993</p>
            <p><a href="https://us.bape.com/?srsltid=AfmBOoo_qTgz09EZhRZi1llmCGylpF-1bkhkA0m9lJPC8jiK05cdSMof">More
                Info</a></p>
          </div>
        </div>
      </div>
    </div>

    <footer>
      <p>&copy; 2024 N.E.R.D Discography</p>
    </footer>
  </div>

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

</html>

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