- Warm Up by @romniya - Codewith.it

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

Referenze

<select>Usato per creare un menu a tendina.
<audio>Il tag <audio> HTML permette di inserire contenuti musicali e suoni nel documento
minImposta il valore numerico o temporale minimo per un elemento input
_topApre collegamenti ipertestuali nell'elemento parent assoluto
targetDetermina il comportamento di un collegamento ipertestuale alla sua apertura
<meta>Definisce i meta dati di una pagina web.

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Estrazione Casuale Studenti

WOO (CHRONO)(Black, Yellow)

Calcolatrice Pitagora

Menu a tendina CSS

Esercitazione 1

gengotti home page

TravelEscape - Esplora il Mondo co

velocità scrittura

HTML

CSS

JS

terminal console

feedback

add_box Nuovo

cookie Informativa

Informativa privacy e cookies

Utilizziamo cookie o tecnologie per finalità tecniche e, con il tuo consenso, anche per altre finalità come specificato nella cookie policy. Il rifiuto del consenso può rendere non disponibili alcune funzioni. Leggi di più sull'informativa privacy

Clicca su “Accetta” per acconsentire.

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title> - Warm Up</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
  <link href="https://fonts.googleapis.com/css2?family=Silkscreen:wght@400;700&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Nerko+One&display=swap" rel="stylesheet">
</head>

<header>Top Songs Heard This Month</header>

<div class="albums">

<div class="dropdown_songs">
  <a href="https://www.youtube.com/watch?v=ZncbtRo7RXs">
  <img src="https://i1.sndcdn.com/artworks-IfXRWqVrpgGpFFJJ-CtLPHw-t500x500.jpg"></a>
    <div class="dropdown-content">
        <div class="desc">Album: Supernatural<br>Song: Right Now<br>Artist: NewJeans<br>✦</div>
         </div>
      </div>
      
      <div class="dropdown_songs">
      <a href="https://youtu.be/auHh6FHFzI0?si=ZNquMwFgVmMsvGvh">
      <img src="https://i.pinimg.com/736x/36/1b/bb/361bbb2fc0525893d30d0db6beae653a.jpg"></a>
      <div class="dropdown-content">
        <div class="desc">Album: Mikunopolis<br>Song: えれくとりっく・えんじぇぅ (Electric Angel) <br>Artist: Yasuno-P & Hastune Miku<br>✦</div>
        </div>
      </div>
  
         <div class="dropdown_songs">
        <a href="https://youtu.be/aTUfwLAVSHE?si=j6VqzM6AXI-oG-MF">
      <img src="https://e.snmc.io/i/600/s/4f1b48e226dd08c6731620e1477caac9/9059806/%E3%82%AA%E3%83%AF%E3%82%BFp-owata-p-%E3%83%98%E3%82%99%E3%83%B3%E3%82%BB%E3%82%99%E3%83%B3_o-cover-art.jpg"></a>
      <div class="dropdown-content">
        <div class="desc">Album: ベンゼン＼(^o^)／<br> Song: Paradichlorobenzene<br>Artist: Owata-P & Kagmine Len<br>✦</div>
        </div>
      </div>

         <div class="dropdown_songs">
          <a href="https://youtu.be/l2SPNI2Z654?si=9wSAoiROCa0Fe7aR">
      <img src="https://anywherestore.p-vine.jp/cdn/shop/files/plp7669.jpg?v=1706256568&width=300"></a>
      <div class="dropdown-content">
        <div class="desc"> Album: The Modern World<br>Song: Think it Through <br>Artist: Vansire ft India Shawn<br>✦</div>
        </div>
      </div>
      
         <div class="dropdown_songs">
          <a href="https://youtu.be/qPkoj77w6v4?si=yxs9koDe2Z7Ty925">
      <img src="https://f4.bcbits.com/img/a2670952530_65">
      <div class="dropdown-content"></a>
        <div class="desc">Album: Nisemono<br>Song: Everything's Alright <br>Artist: Ginger Root<br>✦</div>
       </div>
      </div>

</div>

   <div class="albums2">
         <div class="dropdown_songs">
          <a href="https://youtu.be/kMRExNchiRA?si=BplVhBFlaLcr86W2">
      <img src="https://f4.bcbits.com/img/a1306388424_10.jpg">
      <div class="dropdown-content"></a>
        <div class="desc">Album: ivy leauge<br>Song: have you heard<br>Artist: Potsu<br>✦</div>
        </div>
      </div>

         <div class="dropdown_songs">
          <a href="https://youtu.be/_6L6E7TLy10?si=4gkcepxojt430nkT">
      <img src="https://e.snmc.io/i/1200/s/587ff0215e5f068c6bc2f251f656babb/9733041"></a>
      <div class="dropdown-content">
        <div class="desc">Album: Touhou 08: Imperishable Night<br>Song: 恋色マスタースパーク (Love-Colored Master Spark)<br>Artist: Team Shanghai Alice<br>✦</div>
        </div>
      </div>

         <div class="dropdown_songs">
          <a href="https://youtu.be/0rXdQRiN4-4?si=Rnlch9mIJl5UT54N">
      <img src="https://f4.bcbits.com/img/a3644381725_65"></a>
      <div class="dropdown-content">
        <div class="desc">Album: Yumeno Garden<br>Song: Sense<br>Artist: Last Dinosaurs<br>✦</div>
        </div>
      </div>

         <div class="dropdown_songs">
      <a href="https://youtu.be/Q3K0TOvTOno?si=FjB5OcEZHQeHaPHp">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQfvVlkIK277T-_EpsVbKzPdIns8eIW2JeP8VozoF3hYQK5ooSr-L5jUBMI9qKWnotOsWM&usqp=CAU"></a>
      <div class="dropdown-content">
        <div class="desc">Song: How Sweet<br>Artist: NewJeans<br>✦</div>
        </div>
      </div>

         <div class="dropdown_songs">
          <a href="https://youtu.be/YXcbizW90w0?si=2YADxxDkelFd_gXQ">
      <img src="https://i.discogs.com/HFAXjT2OGtmjfjVrdkk8VHd7tyxzaMfmgoPe3Y4c38A/rs:fit/g:sm/q:90/h:600/w:600/czM6Ly9kaXNjb2dz/LWRhdGFiYXNlLWlt/YWdlcy9SLTE1ODE0/ODc5LTE1OTg0Njky/MDktMzg4MS5qcGVn.jpeg"></a>
      <div class="dropdown-content">
        <div class="desc">Song: 50/50<br>Artist: Vantage<br>✦</div>
        </div>
      </div>

</div>

<footer> Emeli C ✧ 2024</footer>
</html>

body{
  background-color: pink;
}

header{
 font-family: Silkscreen;
 text-align: center;
 font-size: 30px;
}

footer{
  font-family: Silkscreen;
  text-align: center;
  font-size: 15px;
}

img{
  width: 225px;
  height: 225px;
  margin: 5px;
  border: rgb(199, 84, 122) 5px solid;
}

.dropdown_songs{
  position: relative;
  display: inline-block;
  padding-left: 35px;
  padding-bottom: 70px;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #b52f6e;
  width: auto;
  height: auto;
  box-shadow: 0px 8px 16px 0px rgba(83, 4, 77, 0.2);
  padding: 10px 10px;
  z-index: 1;
  border: black 2px solid;
}

.dropdown_songs:hover .dropdown-content {
  display: block;
}

.desc{
  font-family: Nerko One;
  text-align: center;
  color: rgb(255, 255, 255);
}

.albums , .albums2{
  background-color: rgb(223, 145, 181);
  display: flex;
  align-items: auto;
}

.albums2{
  background-color: #dd81ac;
  padding-top: 50px;
}

.albums{
padding-top: 10px;
}

a{
 cursor:pointer;
}