- Warm Up by @romniya - Codewith.it

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

References

langSpecifica la lingua del contenuto di un elemento
<abbr>Inserisce abbreviazioni e acronimi
maxlengthDetermina il numero massimo di caratteri consentiti in un elemento input
<option>Serve ad inserire una voce in un menu di selezione.
multipleConverte in lista a selezione multipla
<embed>Tag per l'incorporamento di contenuti multimediali

Users

Log in to search for users

Explore

Find inspiration

prova elenco puntato

console elements(2)

test1 pagina principale

APEX Flux - Enhance your Atmospere

Form Raccolta Segnalazioni Immobil

Progetti scolastici.html

Primo esercizio

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.

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