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

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

References

loopL'attributo loop è usato per la riproduzione continua dei contenuti video e audio
<th>Definisce una cella di intestazione di una tabella HTML.
sizeDetermina le dimensioni dell'elemento in base al valore contenuto
formSpecifica a quale form appartiene un elemento.
formmethodDefinisce il metodo di invio dei dati oltre a method
_selfApre collegamenti ipertestuali nella stessa pagina del browser

Users

Log in to search for users

Explore

Find inspiration

Layout Dark Elegante (sezione)

INSERIMENTO IMMAGINI IN UN TESTO

Grid of Colors(2)

JS Strutture dati e funzioni es3

esame noe e marti

Review of Functions I

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