Album-Reccomendations by @aedwards25 - Codewith.it

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

References

formSpecifica a quale form appartiene un elemento.
mutedL'attributo muted viene utilizzato impostare risorse HTML audio e video con volume muto
<pre>Indica una parte di testo preformattato
sizeDetermina le dimensioni dell'elemento in base al valore contenuto
forSpecifica a quale id è associato l'elemento in cui è dichiarato.
<h5>Titolo di intestazione di quinto livello

Users

Log in to search for users

Explore

Find inspiration

Elenchi numerati con HTML

Formattazione_testo.html.

pagina America(2)

effect6 bouncing

Promo Weber 2025

WebDeveloper 2025 - Portfolio Wave

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.

 <html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Bree+Serif&display=swap" rel="stylesheet">
  <title>Album-Reccomendations</title>
</head>

<body>
  <div class="container">
    <header>
      <img class="collage" src="https://preview.redd.it/collage-of-every-pink-floyd-studio-album-cover-v0-s1mhkd6ddgo81.jpg?width=640&crop=smart&auto=webp&s=4aa0c3c237779a2be8e74d0615c0f35b257edc7a" alt="pink floyd album cover collage" class="collage" style="width:100%;">
      <div class="centered"> Albums you should be listening to (because I am and they're amazing) </div>
    </header>
    <br>
    <hr size="1">
    <br>
    <section class="albums">

      <div class="album-1">
        <h2> </h2>
        <img class="a1" src="https://upload.wikimedia.org/wikipedia/en/e/ea/Chinese_Fountain_The_Growlers.jpg">
        <p> </p>
      </div>


      <div class="album-2">
        <h2> </h2>
        <img class="a2" src="https://upload.wikimedia.org/wikipedia/en/3/34/Chappell_Roan_-_The_Rise_and_Fall_of_a_Midwest_Princess.png">
      </div>

      <div class="album-3">
        <h2> </h2>
        <img
         class="a3" src="https://upload.wikimedia.org/wikipedia/en/4/4f/Lana_Del_Rey_-_Did_You_Know_That_There%27s_a_Tunnel_Under_Ocean_Blvd.png">
      </div>

      <div class="album-4">
        <h2> </h2>
        <img
         class="a4" src="https://upload.wikimedia.org/wikipedia/en/thumb/f/fd/Short_n%27_Sweet_-_Sabrina_Carpenter.png/220px-Short_n%27_Sweet_-_Sabrina_Carpenter.png">
      </div>

      <div class="album-5">
        <h2> </h2>
        <img
         class="a5" src="https://upload.wikimedia.org/wikipedia/en/d/dc/Clairo_-_Charm.png">
      </div>

      <div class="album-6">
        <h2> </h2>
        <img
         class="a6" src="https://upload.wikimedia.org/wikipedia/en/2/2f/N.E.R.D_-_Seeing_Sounds.jpg">
      </div>

      <div class="album-7">
        <h2> </h2>
        <img class="a7" src="https://upload.wikimedia.org/wikipedia/en/5/5d/Blood_Orange_Cupid_Deluxe_album_cover.jpg">
      </div>

      <div class="album-8">
        <h2> </h2>
        <img class="a8" src="https://f4.bcbits.com/img/a1880961717_10.jpg">
      </div>

      <div class="album-9">
        <h2> </h2>
        <img
         class="a9" src="https://upload.wikimedia.org/wikipedia/en/c/c5/Hole_-_Live_Through_This.png">
      </div>

    </section>
  </div>
</body>

</html>

.container {
  position: relative;
  text-align: center;

}

.header {
  padding: 30px;
  text-align: center;
  font-size: 35px;
  color: white;
}

.collage {}

.centered {
  font-family: "Bree Serif", serif;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: lightblue;
}

.albums {
  display: flex;
  justify-content: center;
}

.a1,
.a2,
.a3,
.a4,
.a5,
.a6,
.a7,
.a6,
.a9 {

  height:40%;
}