Spotify Profile by @EliecerDisla - Codewith.it

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

Referenze

<cite>Inserisce citazioni e menzioni riguardo un'opera creativa.
<a>Inserisce link e collegamenti ipertestuali
formactionPermette di definire l'URL di una pagina web a cui inviare i dati di un form
nameDetermina il nome degli elementi HTML o fornisce dati su un attributo associato.
text/plainDefinisce un metodo di non codifica dei valori di un form
formenctypeDefinisce il tipo di codifica dei dati di un elemento input

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Heads Or Tails Random Tally

Il Riflesso di Adrian Vale

esercizio esame \"if else\" in html

Generatore di Musica

pagina prova sara

Review of Functions I

specialità scout2

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