Album-Reccomendations by @aedwards25 - Codewith.it

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

References

autoplayAttributo HTML autoplay per l'avvio automatico degli elementi audio e video
<object>Incorpora risorse varie nella pagina web.
acceptDefinisce e filtra il formato dei file per il tag <input type=file>
<map>Inserisce immagini mappa cliccabili in un documento
placeholderDefinisce un testo segnaposto per un elemento input o textarea
<h4>Titolo di intestazione di quarto livello

Users

Log in to search for users

Explore

Find inspiration

Tabella primo appello

Our first web page!

informatica 21/10 ii

WOO (CHRONO)(Black, Yellow)

curricculum Nicola Pochiero

UI/UX Dashboard

Indovina il numero 1 a 10

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