Dashboard v1 by @Curi288 - Codewith.it

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

Referenze

selectedPre-seleziona un elemento di input
preloadL'attributo preload indica se precaricare un contenuto audio e video con il documento HTML
hrefDefinisce l'URL della risorsa/pagina di destinazione.
<audio>Il tag <audio> HTML permette di inserire contenuti musicali e suoni nel documento
getDefinisce un metodo di invio di dati al server
_topApre collegamenti ipertestuali nell'elemento parent assoluto

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Media ponderata

Heads Or Tails Random Tally

Esercizio 1 Html

Lista delle Attività

form per il torneo misto disfor s

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 lang="en">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width" />
  <title>Spotify Verification Check Animation</title>
  <link href="style.css" rel="stylesheet" />
</head>

<body>


  <div class="container">
    <div class="sidebar">
      <ul class="sidebar__links">
        <img src="https://m.media-amazon.com/images/I/51rttY7a+9L._h1_.png" class="sidebar__logo" alt="Logo" />
        <li>
          <svg fill="lightgray" class="sidebar-icon" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
            <path d="M240-200h120v-240h240v240h120v-360L480-740 240-560v360Zm-80 80v-480l320-240 320 240v480H520v-240h-80v240H160Zm320-350Z" />
          </svg>
          <a href="#">home</a>
        </li>
        <li>
          <svg fill="lightgray" class="search-icon" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
            <path d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z" />
          </svg>
          <a href="#">search</a>
        </li>
      </ul>
    </div>

    <div class="main">
      <div class="header">
        <div class="artist-info">
          <img src="https://creative-commission.com/sites/default/files/styles/img_res_4/public/media/img/2022/03/img_45394_729983_07f04e80.jpeg?itok=IK2Kz0NM" alt="artist" width="220" />
          <h1>
            The Weekend
            <span class="verified" aria-label="Verified">
              <svg viewBox="0 0 24 24" class="checkmark" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                <circle cx="12" cy="12" r="10" fill="#1DB954" />
                <polyline points="7 13 10 16 17 9" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
              </svg>
            </span>
          </h1>
          <span>104,383,415 monthly listeners</span>
        </div>
      </div>

      <div class="body">
        <div class="row">
          <img src="https://alfred-spotify-mini-player.com/images/background.svg" alt="play icon" class="play-icon" />
          <button class="follow">follow</button>
          <svg class="dots" fill="black" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
            <path d="M240-400q-33 0-56.5-23.5T160-480q0-33 23.5-56.5T240-560q33 0 56.5 23.5T320-480q0 33-23.5 56.5T240-400Zm240 0q-33 0-56.5-23.5T400-480q0-33 23.5-56.5T480-560q33 0 56.5 23.5T560-480q0 33-23.5 56.5T480-400Zm240 0q-33 0-56.5-23.5T640-480q0-33 23.5-56.5T720-560q33 0 56.5 23.5T800-480q0 33-23.5 56.5T720-400Z" />
          </svg>
        </div>
      </div>

      <div class="pick">
        <div class="popular">
          <table width="100%">
            <h2>popular</h2>
            <tr>
              <td>1</td>
              <td><img src="https://i1.sndcdn.com/artworks-PXOQzhCpemgC-0-t500x500.jpg" alt="album cover" class="idol" /></td>
              <td class="song">One Of The Girls</td>
              <td class="view">200,000,00</td>
              <td>4:04</td>
            </tr>
            <tr>
              <td>2</td>
              <td><img src="https://i.scdn.co/image/ab67616d0000b2734718e2b124f79258be7bc452" alt="album cover" class="idol" /></td>
              <td>star boy</td>
              <td>288,000,000,000</td>
              <td>4:04</td>
            </tr>
            <tr>
              <td>3</td>
              <td><img src="https://i.scdn.co/image/ab67616d0000b273a048415db06a5b6fa7ec4e1a" alt="album cover" class="idol" /></td>
              <td>die for you</td>
              <td>190,000,000,000</td>
              <td>4:04</td>
            </tr>
            <tr>
              <td>4</td>
              <td><img src="https://lastfm.freetls.fastly.net/i/u/ar0/4583932b753c96d0d2f22fe9774e5ef3.jpg" alt="album cover" class="idol" /></td>
              <td>blinding lights</td>
              <td>380,000,000,000</td>
              <td>4:04</td>
            </tr>
            <tr>
              <td>5</td>
              <td><img src="https://i1.sndcdn.com/artworks-UdByZKOtQJrc-0-t500x500.jpg" alt="album cover" class="idol" /></td>
              <td>creeping</td>
              <td>180,000,000,000</td>
              <td>4:04</td>
            </tr>
          </table>
        </div>

        <div>
          artist pick
          <img src="https://www.dexerto.com/cdn-image/wp-content/uploads/2023/12/07/TheWeeknd-Fortnite-Outfit-Skin.jpg" alt="artist" width="500px" height="265px" />
          <footer class="footer"><p>&copy; 2025 Spotify Clone</p></footer>
<button onclick="document.getElementById('info').classList.toggle('hidden')">Toggle Info</button>
<div id="info" class="hidden">Some hidden info about the artist...</div>

        </div>
      </div>
    </div>
  </div>
  
</body>

</html>

@import "normalize.css";

.container {
  display: grid;
  grid-template-columns: 1fr 6fr;
  height: 100vh;
}

.sidebar {
  background: grey;
}

.main {
  background-color: lightgrey;
}

.sidebar__logo {
  width: 150px;
  margin-bottom: 20px;
}

.sidebar__links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar__links li {
  display: flex;
  align-items: center;
  margin: 10px 0;
}

.sidebar__links a {
  text-decoration: none;
  color: lightgray;
  margin-left: 15px;
}

.header {
  height: 400px;
  background-image: url("ab6761860000101606f7730314d8eff6663d6918.jpeg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  display: flex;
  color: white;
  align-items: center;
  padding-left: 20px;
}

.artist-info {
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: white;
}

.artist-info img {
  width: 220px;
  border-radius: 10px;
}

.artist-info h1 {
  display: flex;
  align-items: center;
  font-size: 2.5rem;
  gap: 10px;
  margin: 0;
}

.verified {
  display: inline-flex;
  align-items: center;
}

.checkmark {
  width: 24px;
  height: 24px;
  stroke-dasharray: 30;
  stroke-dashoffset: 0;
  animation: bounce 2s infinite ease-in-out;
}

@keyframes bounce {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-6px);
  }
}

.play-icon {
  width: 50px;
}

.follow:hover {
  transform: scale(1.05);
  box-shadow: 0 0 15px #FFD700;
}

.follow {
  width: 50px;
  border-radius: 5px;
  padding: 3px;
  margin-left: 10px;
}

.dots {
  margin-left: 10px;
}

.row {
  display: flex;
  align-items: center;
}

.idol {
  width: 50px;
  margin-right: 300px;
  margin-left: 15px;
}

.song {
  margin-right: 50px;
}

.view {
  margin-right: 50px;
  margin-left: 50px;
}

.pick {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.popular h2 {
  margin-left: 15px;
  text-transform: capitalize;
}
body {
  font-family: 'Arial', sans-serif;
}
.box {
  width: 100px;
  height: 100px;
  background-color: red;
  position: absolute;
  top: 50px;
  left: 50px;
}
.hidden {
  display: none;
}
.artist-info img {
  border: 3px solid white;
}