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

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

References

<title>Definisce il titolo della pagina web.
<h4>Titolo di intestazione di quarto livello
application-x-www-form-urlencodedCodifica dei caratteri di un form
autoplayAttributo HTML autoplay per l'avvio automatico degli elementi audio e video
<h3>Titolo di intestazione di terzo livello
<tfoot>Definisce il footer o sezione inferiore di una tabella.

Users

Log in to search for users

Explore

Find inspiration

Inserimento immagini in un testo

Prima Coccola ebay(2)(2)(2)

countdown passaporto 2

5/10/24 es.1 - palindromi

Esercizio fatto benissimo

Tabella primo appello

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