Album-Reccomendations by @aedwards25 - Codewith.it

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

References

minlengthDetermina il numero minimo di caratteri per un elemento input
langSpecifica la lingua del contenuto di un elemento
maxImposta il valore numerico o temporale massimo per un elemento input
<head>Tag primario di un documento HTML
maxlengthDetermina il numero massimo di caratteri consentiti in un elemento input
_blankApre i collegamenti ipertestuali in una nuova scheda del browser

Users

Log in to search for users

Explore

Find inspiration

formattazione_testo.html.

I miei progressi

spotify dashboard

JS Elementi del linguaggio es2

esercitazione simona

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