Figure & Figcaption Music Album Pr by @Hizaora - Codewith.it

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

Referenze

<address> Definisce una sezione contenente indirizzi, contatti e informazioni
hrefDefinisce l'URL della risorsa/pagina di destinazione.
formSpecifica a quale form appartiene un elemento.
forSpecifica a quale id è associato l'elemento in cui è dichiarato.
<ul>Usato per la creazione di liste non ordinate.
_blankApre i collegamenti ipertestuali in una nuova scheda del browser

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

round - social bar

Ruota delle Cucine

Autoscuola Roma EUR Torrino Patent

quello che si vede in alto nella c

JS Esercizio Concetti Gen es2

test-border-on-wrap

Heads Or Tails Random Tally

esercizio 1 esame

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>

<head>
  <title>Figure & Figcaption Music Album Practice</title>
</head>

<body>
  <div class="container">
    <h1 class="heading">
      Music
    </h1>
    <div class="albums-grid">
      <figure class="drakeimages">
        <div class="album-circle">
          <img
            src="https://www.theglobeandmail.com/resizer/v2/3YV2PTJAVFGCVJK5IC6RJYY6EA?auth=9a53ead4505ce67e63addf8bc4d133c4c3d7c7d584a921b98b689f7c426cd716&width=1500&quality=80"
            alt="Drake Album">
        </div>
        <figcaption>
          <a href="https://open.spotify.com/track/0GaBIpyHvytM1UBYmqXu08">Drake - Spotify Album</a>
        </figcaption>
      </figure>

      <figure class="teccaimages">
        <div class="album-circle">
          <img src="https://upload.wikimedia.org/wikipedia/en/thumb/8/8f/Lil_Tecca_-_Tec.png/250px-Lil_Tecca_-_Tec.png"
            alt="Lil Tecca Album">
        </div>
        <figcaption>
          <a href="https://open.spotify.com/album/4EURMuWFiLLRmQYoH5cgiE">Lil Tecca - Spotify Album</a>
        </figcaption>
      </figure>

      <figure class="weekndimages">
        <div class="album-circle">
          <img src="https://m.media-amazon.com/images/I/814htMhuuML._UF1000,1000_QL80_.jpg" alt="The Weeknd Album">
        </div>
        <figcaption>
          <a href="https://open.spotify.com/album/2ODvWsOgouMbaA5xf0RkJe">The Weeknd - Spotify Album</a>
        </figcaption>
      </figure>

      <figure class="kodakimages">
        <div class="album-circle">
          <img src="https://i.scdn.co/image/ab67616d0000b27325dc1c32dbdd14b8049a3b3f" alt="Kodak Black Album">
        </div>
        <figcaption>
          <a href="https://open.spotify.com/album/4J5QtgOhv6tPCsxxifVskj">Kodak Black - Spotify Album</a>
        </figcaption>
      </figure>

      <figure class="kanyeimages">
        <div class="album-circle">
          <img src="https://m.media-amazon.com/images/I/71pxGj4RoVS._UF894,1000_QL80_.jpg" alt="Kanye West Album">
        </div>
        <figcaption>
          <a href="https://open.spotify.com/album/4SZko61aMnmgvNhfhgTuD3">Kanye West - Spotify Album</a>
        </figcaption>
      </figure>

      <figure class="kendrickimages">
        <div class="album-circle">
          <img
            src="https://beatsperminute.com/wp-content/uploads/2024/11/kendrick-lamar-gnx-Credit-Dave-Free-768x768.jpg"
            alt="Kendrick Lamar Album">
        </div>
        <figcaption>
          <a href="https://open.spotify.com/album/0hvT3yIEysuuvkK73vgdcW">Kendrick Lamar - Spotify Album</a>
        </figcaption>
      </figure>

      <figure class="snoopimages">
        <div class="album-circle">
          <img src="https://snoopdogg.com/wp-content/uploads/2024/10/image8.png" alt="Snoop Dogg Album">
        </div>
        <figcaption>
          <a href="https://open.spotify.com/album/2QioUoh1jheynkUHP4XsCN">Snoop Dogg - Spotify Album</a>
        </figcaption>
      </figure>

      <figure class="uziimages">
        <div class="album-circle">
          <img
            src="https://media.pitchfork.com/photos/59a43857f1ba0c61e598ece9/1:1/w_1000,h_1000,c_limit/600x600bb-1.jpg"
            alt="Lil Uzi Vert Album">
        </div>
        <figcaption>
          <a href="https://open.spotify.com/album/733e1ZfktLSwj96X5rsMeE">Lil Uzi Vert - Spotify Album</a>
        </figcaption>
      </figure>

      <figure class="cartiimages">
        <div class="album-circle">
          <img
            src="https://images.squarespace-cdn.com/content/v1/5b7e9b37ec4eb7238e6d6003/a1cc060f-6f8d-4b7d-b3a0-297df8286840/die-lit-playboi-carti-hi-res-cover.jpg"
            alt="Playboi Carti Album">
        </div>
        <figcaption>
          <a href="https://open.spotify.com/album/7dAm8ShwJLFm9SaJ6Yc58O">Playboi Carti - Spotify Album</a>
        </figcaption>
      </figure>

      <figure class="nasimages">
        <div class="album-circle">
          <img src="https://upload.wikimedia.org/wikipedia/en/thumb/2/27/IllmaticNas.jpg/250px-IllmaticNas.jpg"
            alt="Nas Album">
        </div>
        <figcaption>
          <a href="https://open.spotify.com/album/3kEtdS2pH6hKcMU9Wioob1">Nas - Spotify Album</a>
        </figcaption>
      </figure>
    </div
      
<div class="AA">
<h2> Whos your favorite artist listed above? </h2>
<input list="artist" name="artist-name">
  <datalist id="artist">
    <option value="Drake"></option>
      <option value="Lil Tecca"></option>
        <option value="The Weekend"></option>
          <option value="Kodak Black"></option>
            <option value="Kanye West"></option>
              <option value="Kendrick Lamar"></option>
                <option value="Snoop Dogg"></option>
                  <option value="Lil Uzi Vert"></option>
                    <option value="Playboi Carti"></option>
                      <option value="Nas"></option>
</datalist>
</div>
    <footer>
      Temporary© Dylin AIDEN HARRY
    </footer>
  </div>

  <script src="script.js"></script>
</body>

</html>

html,
body {
  height: 100%;
  width: 100%;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: #1a1a1a;
  color: #ffffff;

}


/*Aiden idk if you'll see this message or not but ask pelzer for help on the text bubble under the playlist and we also need help making the image in the bubble smaller so it shows the whole thing. WHATEVER YOU DO DONT LET HARRY TOUCH THE CODE. We need animation and whatever else is in the requirments but we should have most of it htmml and css, goodluck gng*/

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;

}

.heading {
  text-align: center;
  font-weight: 600;
  margin-bottom: 50px;
  color: #ffffff;
}

.albums-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
  margin-bottom: 50px;
}

figure {
  background: #2a2a2a;
  border-radius: 15px;
  padding: 20px;
  text-align: center;
}

.album-circle {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto 15px;
  border: 3px solid #444;
  display: flex;
  align-items: center;
  justify-content: center;
}

.album-circle img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

figcaption {
  color: #ffffff;
  font-weight: 500;
  padding: 8px 16px;
  border-radius: 20px;
  background: #333;
  transition: transform 0.3s ease-in-out;
}

figcaption a {
  color: #ffffff;
}

figcaption:hover {
  background: #4ecdc4;
  color: #000;
  transform: scale(1.1);
}

footer {
  text-align: center;
  padding: 20px;
  background: #2a2a2a;
  border-radius: 10px;
  color: #ccc;
}

.albums-grid {
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}

h2 {
  color: white;
  margin: 25px 15px ;
  font-size: 24px;
  display: flex;
  justify-content: center;
}

input{
width: 100%;
  padding: 12px;
  margin: 8px ;
  border: 1px solid #ddd;
  font-size: 16px;
}

legend {
  color: #1a237e;
  padding:  10px;
  font-weight: 600;
  font-size: 18px;
}