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

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

References

<hr>Inserisce una linea orizzontale
<aside>Definisce un contenuto separato dal testo perincipale
rowspanDefinisce il numero di righe su cui una cella di una tabella deve estendersi.
animation-delayDetermina il tempo prima dell'avvio di una animazione in secondi (es. 1s) o millisecondi (ms)
<h4>Titolo di intestazione di quarto livello
dirnameInvia informazioni sulla direzione di scrittura da un elemento input

Users

Log in to search for users

Explore

Find inspiration

Review of Functions I

Form per il torneo misto disfo

congettura di golbach a 3

Scheda Tecnica iPhone 15 Pro

Review of Functions I

riepilogativo 2

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>

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