Album-Reccomendations by @aedwards25 - Codewith.it

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

References

autofocusAttiva un elemento al caricamento della pagina.
<textarea>Area di testo libero espandibile per form HTML
styleDefinisce regole e stili CSS all'interno di un tag HTML (inline CSS)
_topApre collegamenti ipertestuali nell'elemento parent assoluto
<td>Definisce una cella di una tabella HTML.
crossoriginGestisce richieste tra documenti provenienti da origini differenti.

Users

Log in to search for users

Explore

Find inspiration

STATI HTML TEST TABELLA

test js coinmarketcap

Review of Functions I

esercizio 1.1-1.6

Prova altro form

locandiera murgia

Landing page di un prodotto

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