Spotify Profile by @EliecerDisla - Codewith.it

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

References

<!doctype>Dichiara la versione del linguaggio di sviluppo della pagina
selectedPre-seleziona un elemento di input
<em>Formatta il testo in corsivo/italico enfatizzato
minImposta il valore numerico o temporale minimo per un elemento input
<form>Crea un modulo/form HTML per consentire all'utente di inviare dati al server
autocompleteIndica l'opzione di auto completamento delle aree di input e/o di un form

Users

Log in to search for users

Explore

Find inspiration

Weather Forecast

Corrispondenza tra stringhe

il museo di leonardo

Gesù nostro signore(2)

Countdown Passaporto 1

WebDeveloper 2025 - Portfolio Wave

Selezione Telefoni

DEMO: For Loop 2

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 http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="style.css" rel="stylesheet" type="text/css">
  <title>Spotify Profile</title>
</head>

<body>
  <div class="box">
    

    <div class="sidebar">
      <img src="https://storage.googleapis.com/pr-newsroom-wp/1/2023/05/Spotify_Primary_Logo_RGB_White.png" class="sidebar-logo" alt="spotify">
      <p>Home</p>
      <p>Search</p>
      <p>Your library</p>
      <br>
      <p>Create Playlist</p>
      <p>Liked Songs</p>
      <hr size="1">
      <p>My Playlist #1</p>
    </div>

    <div class="main-layout">
      

      <div class="header">
        <div class="artist-info">
          <p class="verified"><img src="https://www.genzhiphop.com/wp-content/uploads/2021/09/Legitly-Verified-Blue-Badge-top-page-600x454.png">verified artist</p>
          <h1>The Weeknd</h1>
          <p>105,860,222 monthly listeners</p>
        </div>
      </div>

      <div class="popular-stuff">
        <div class="popular-music">
          <h2>Popular</h2>
          <div class="album">
            <table>
              
              <tr>
                <td>1</td>
                <td><img src="https://image-cdn-ak.spotifycdn.com/image/ab67706c0000da84e6387cd01441b1b632bcac21"></td>
                <td>One Of Those Girls(with JENNIE, Lilly Rose Depp)</td>
                <td>1,213,338,041</td>
                <td><img src="https://alfred-spotify-mini-player.com/images/background.svg" alt="heart" class="heart"></td>
                <td>4:04</td>
              </tr>

              
              <tr>
                <td>2</td>
                <td><img src="https://i.scdn.co/image/ab67616d0000b2738863bc11d2aa12b54f5aeb36"></td>
                <td>Blinding Lights</td>
                <td>3,307,351,085</td>
                <td><img src="https://alfred-spotify-mini-player.com/images/background.svg" alt="heart" class="heart"></td>
                <td>3:20</td>
              </tr>

              
              <tr>
                <td>3</td>
                <td><img src="https://i.scdn.co/image/ab67616d0000b2734718e2b124f79258be7bc452"></td>
                <td>Starboy</td>
                <td>3,465,036,304</td>
                <td><img src="https://alfred-spotify-mini-player.com/images/background.svg" alt="heart" class="heart"></td>
                <td>3:50</td>
              </tr>

              
              <tr>
                <td>4</td>
                <td><img src="https://i.scdn.co/image/ab67616d0000b2734718e2b124f79258be7bc452"></td>
                <td>Die For You</td>
                <td>2,409,844,643</td>
                <td><img src="https://alfred-spotify-mini-player.com/images/background.svg" alt="heart" class="heart"></td>
                <td>4:20</td>
              </tr>

              
              <tr>
                <td>5</td>
                <td><img src="https://i.scdn.co/image/ab67616d0000b2738863bc11d2aa12b54f5aeb36"></td>
                <td>Save Your Tears</td>
                <td>2,097,050,052</td>
                <td><img src="https://alfred-spotify-mini-player.com/images/background.svg" alt="heart" class="heart"></td>
                <td>3:35</td>
              </tr>
            </table>
          </div>
        </div>

        <div class="artist-pick">
          <h2>Artist Pick</h2>
          <table>
            <tr>
              <p>Posted By The Weeknd</p>
              <td><img
                  src="https://www.billboard.com/wp-content/uploads/2022/06/the-weeknd-press-credit-brian-ziff-2022-billboard-1548.jpg?w=942&h=623&crop=1">
              </td>
              <td>The Weeknd - Essential Playlist</td>
              <p>Playlist</p>
            </tr>
          </table>
        </div>

        <div class="popular releases">
          <h2>Popular Releases</h2>

          <div class="discography">

            <div class="disc-box">
              <img class="disco-imgs" src="https://i.scdn.co/image/ab67616d00001e02fad79f4bab30cd048821e186">
              <p>Dancing In The Flames</p>
              <p>Latest Release - Single</p>
            </div>

            <div class="disc-box">
              <img class="disco-imgs" src="https://i.scdn.co/image/ab67616d00001e028863bc11d2aa12b54f5aeb36">
              <p>After Hours</p>
              <p>2020 - Album</p>
            </div>

            <div class="disc-box"> <img class="disco-imgs"
              src="https://i.scdn.co/image/ab67616d0000b2734718e2b124f79258be7bc452">
              <p>Starboy</p>
              <p>2016 - Album</p>
            </div>

            <div class="disc-box">
              <img class="disco-imgs" src="https://i.scdn.co/image/ab67616d00001e021f6a2a40bb692936879db730">
              <p>My Dear Melancho...</p>
              <p>2018 - Album</p>
            </div>
          </div>
        </div>
      </div>
      
</body>

</html>

@import "fonts.css";

body {
  margin: 0px;
  color: #ffffff;
  text-transform: none;
  font-family: "Gotham"; 
  font-weight: normal;
}

.box {
  display: grid;
  grid-template-columns: 235px 6fr;
}

.sidebar {
  background: black;
}

.main-layout {
  background: linear-gradient(to top, #000000, #434343);
  color: white;
  height: 100vh;
  overflow-y: scroll;
}

.sidebar-logo { 
  width: 100px;
  margin-top: 20px;
  margin-left: 12px;
}

.header { 
  height: 400px;
  background-image: url("https://preview.redd.it/what-does-the-mask-signify-v0-5fw0tsm4y1dc1.jpeg?width=1080&crop=smart&auto=webp&s=968371a013e2fc9340108096cb1b423d0d55b119"); 
  background-size: cover;
  background-position: center center;
  display: flex;
}

.header__artist-info {
  align-self: flex-end;
  margin-left: 20px;
  margin-bottom: 20px;
}

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

.artist-info {
  align-self: flex-end;
  margin-left: 20px;
  margin-bottom: 20px;
}

img {
  width: 50px;
  margin: left;
}

.heart {
  width: 20px;
}

td { 
 padding: 10px;
}

.popular-stuff {
  display: flex;
  justify-content: space-evenly;
}

tr:hover {
  background: #2e2e2e;
}