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

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

Referenze

<source>Il tag HTML <source> si usa per indicare una o più risorse multimediali per elementi media
autocompleteIndica l'opzione di auto completamento delle aree di input e/o di un form
multipart/form-dataCodifica dei caratteri di un form
maxlengthDetermina il numero massimo di caratteri consentiti in un elemento input
<li>Inserisce voci all'interno di una lista
selectedPre-seleziona un elemento di input

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Documentazione Tecnica

"esercitazione5.html”

passi avanti regioni italiane

mappa del malandrino

esercizio perfetto

Il mio primo sito(2)

Generador de Internos

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