Dashboard v1 by @Curi288 - Codewith.it

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

References

<select>Usato per creare un menu a tendina.
<tr>Definisce le righe di una tabella (rows)
heightDetermina l'altezza di un elemento HTML in pixel
srcIndica la provenienza di una risorsa esterna (tramite URL).
<input>Definisce un area di input per l'invio di dati e informazioni
langSpecifica la lingua del contenuto di un elemento

Users

Log in to search for users

Explore

Find inspiration

Istogramma a colonne

La sicurezza in informati

\"Il Razzismo - Un Tema Important

Review of Functions I

"esercitazione5.html”

Lola Harrel Project 3

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