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

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

References

minImposta il valore numerico o temporale minimo per un elemento input
headersDetermina la relazione tra celle e celle di intestazione di una tabella.
<h3>Titolo di intestazione di terzo livello
<strong>Definisce una parte del testo importante con formattazione in grassetto.
relServe a definire la relazione tra il documento e una risorsa.
<thead>Definisce un gruppo di intestazione all'interno di una tabella.

Users

Log in to search for users

Explore

Find inspiration

FORMA - Interactive Surfaces. Rede

Modern Space Invaders

Anita Angiolini

Pagina di Esempio

GEMELLAGGIO IN DEUTSCHLAND

quello che si vede in alto nella c

Calcolatrice classica

Esercizi 01/03/2024 es3

Scuola G.Galilei.html

Template prodotti generici

HTML

CSS

JS

terminal console

feedback

add_box New

cookie Policy

Privacy information and cookies

We use cookies or technologies for technical purposes and, with your consent, also for other purposes as specified in the cookie policy. Refusal of consent may make some functions unavailable. Read more about the privacy policy

Click on “Agree” to confirm.

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