diff --git a/assets/img/aquietplace.jpeg b/aquietplace.jpeg similarity index 100% rename from assets/img/aquietplace.jpeg rename to aquietplace.jpeg diff --git a/css/style.css b/css/style.css deleted file mode 100644 index e69de29b..00000000 diff --git a/assets/img/cure.jpeg b/cure.jpeg similarity index 100% rename from assets/img/cure.jpeg rename to cure.jpeg diff --git a/assets/img/download.svg b/download.svg similarity index 100% rename from assets/img/download.svg rename to download.svg diff --git a/assets/img/einaudi.jpeg b/einaudi.jpeg similarity index 100% rename from assets/img/einaudi.jpeg rename to einaudi.jpeg diff --git a/assets/img/favicon.ico b/favicon.ico similarity index 100% rename from assets/img/favicon.ico rename to favicon.ico diff --git a/file-svgrepo-com.svg b/file-svgrepo-com.svg new file mode 100644 index 00000000..3df8b4d8 --- /dev/null +++ b/file-svgrepo-com.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/heart-svgrepo-com.svg b/heart-svgrepo-com.svg new file mode 100644 index 00000000..daf6bc41 --- /dev/null +++ b/heart-svgrepo-com.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/assets/img/home.svg b/home.svg similarity index 100% rename from assets/img/home.svg rename to home.svg diff --git a/index.html b/index.html index 56efbdba..16220d63 100644 --- a/index.html +++ b/index.html @@ -1,12 +1,139 @@ - - - - - Document - - - - - \ No newline at end of file + + + + + + + Spotify Challenge + + +
+
EFFETTUA L'UPGRADE
+
  • IN EVIDENZA
  • PODCAST
  • CLASSIFICHE
  • GENERI MOOD
  • NUOVE USCITE
  • SCOPRI
    • +

    Recently played

    +
    + + + + + + +
    +
    +

    Creato per John Doe

    + + +
    +
    +

    Artisti piu popolari

    + + +
    +     + error! +

    + + Home +

    +     +

    + + Cerca +

    +     +

    + error! + La tua libreria +

    +     +

    PLAYLIST

    +

    + + Crea Playlist +

    +

    Nome Playlist

    +

    Nome Playlist

    +

    Nome Playlist

    +

    Nome Playlist

    +

    Nome Playlist

    +

    Nome Playlist

    +

    Nome Playlist

    +     +

    + + + Installa app +

    +     + +

    + + John Doe +

    +     + +
    + + diff --git a/assets/img/libreria.svg b/libreria.svg similarity index 100% rename from assets/img/libreria.svg rename to libreria.svg diff --git a/assets/img/logo-small.svg b/logo-small.svg similarity index 100% rename from assets/img/logo-small.svg rename to logo-small.svg diff --git a/assets/img/logo.svg b/logo.svg similarity index 100% rename from assets/img/logo.svg rename to logo.svg diff --git a/assets/img/metal_lifting.jpg b/metal_lifting.jpg similarity index 100% rename from assets/img/metal_lifting.jpg rename to metal_lifting.jpg diff --git a/assets/img/mixdaily.jpeg b/mixdaily.jpeg similarity index 100% rename from assets/img/mixdaily.jpeg rename to mixdaily.jpeg diff --git a/assets/img/player_left.jpg b/player_left.jpg similarity index 100% rename from assets/img/player_left.jpg rename to player_left.jpg diff --git a/assets/img/profile.svg b/profile.svg similarity index 100% rename from assets/img/profile.svg rename to profile.svg diff --git a/assets/img/radar.jpeg b/radar.jpeg similarity index 100% rename from assets/img/radar.jpeg rename to radar.jpeg diff --git a/assets/img/search.svg b/search.svg similarity index 100% rename from assets/img/search.svg rename to search.svg diff --git a/assets/img/sinister.jpeg b/sinister.jpeg similarity index 100% rename from assets/img/sinister.jpeg rename to sinister.jpeg diff --git a/assets/img/split.jpeg b/split.jpeg similarity index 100% rename from assets/img/split.jpeg rename to split.jpeg diff --git a/assets/img/stranger.jpeg b/stranger.jpeg similarity index 100% rename from assets/img/stranger.jpeg rename to stranger.jpeg diff --git a/style.css b/style.css new file mode 100644 index 00000000..5ba74b9d --- /dev/null +++ b/style.css @@ -0,0 +1,248 @@ +main { + grid-template-columns: repeat(1fr, 7); + grid-template-rows: repeat(1fr, 5); + display: grid; + height: 100vh; + background-color: orange; +} + +header { + grid-column: 1 / 7; + grid-row: 1 / span 1; + background-color: rgb(21, 28, 36); + color: white; + font-size: 13px; + display: grid; + justify-content: end; +} + +header b { + align-content: center; + padding: 5px 10px 5px 10px; + border: solid white; + font-weight: lighter; + margin: 10px 10px 10px 35px; + border-radius: 50px; +} + +content { + grid-column: 2 / span 5; + grid-row: 2 / span 4; + border: thin black; + background-color: rgb(36, 48, 61); + overflow: scroll; +} + +li { + color: white; + display: inline; + text-align: right; + margin-left: 30px; +} + +content p b { + color: white; + font-size: x-large; +} + +.maincover::after { + content: ""; + transition: 0.5s; +} + +.maincover:hover::after { +} + +sidebar { + grid-column: 1 / span 1; + grid-row: 1 / span 4; + color: white; + padding: 0px; + border: thin black; + background-color: black; + overflow: scroll; +} + +spotifylogo { + margin: 1px 0px 0px 60px; +} + +p { + margin-left: 10px; +} + +downloadlogo p { + border-bottom: solid white; + padding-top: 0px; + margin-top: 180px; +} + +profilelogo { + padding-bottom: 0px; + margin-bottom: 0px; +} + +footer { + grid-column: 1 / 7; + grid-row: 5 / span 1; + background-color: rgb(36, 48, 61); + font-size: 14px; +} + +footer .music-player { + --primary-color: #ddd; + --secondary-color: #999; + --green-color: #2d5; + --padding: 1px; + background-color: #111; + display: left; + justify-content: center; + align-items: left; + position: relative; + height: 7rem; + padding: var(--padding); + color: var(--primary-color); +} + +i { + color: var(--secondary-color); +} + +i:hover { + color: var(--primary-color); +} + +.song-bar { + position: center; + left: var(--padding); + display: flex; + flex-direction: row; + align-items: center; + justify-content: flex-start; + gap: 25px; + width: 95%; +} + +.song-infos { + display: flex; + align-items: center; + gap: 10px; +} + +.image-container img { + padding-left: 15px; + --size: 70px; + flex-shrink: 0; + width: var(--size); + height: var(--size); +} + +.song-description p { + margin: 0px 0px 0px 2px; +} + +.title, +.artist { + display: inline-block; + -webkit-box-orient: horizontal; + overflow: hidden; +} + +.artist { + color: var(--secondary-color); +} + +.icons { + display: flex; + gap: 1em; +} + +.progress-controller { + width: 100%; + display: flex; + justify-content: center; + flex-direction: column; + align-items: center; + gap: 1.5em; + color: var(--secondary-color); +} + +.control-buttons { + display: flex; + align-items: center; + gap: 2em; +} + +.play-pause { + display: inline-block; + padding: 1em; + background-color: var(--primary-color); + color: #111; + border-radius: 50%; +} + +.play-pause:hover { + transform: scale(1.2); + color: #111; +} + +.progress-container { + width: 100%; + display: flex; + align-items: center; + justify-content: center; + gap: 1em; +} + +.progress-bar { + height: 4px; + border-radius: 10px; + width: 30%; + background-color: #ccc4; +} + +.progress { + position: relative; + height: 100%; + width: 30%; + border-radius: 10px; + background-color: var(--secondary-color); +} + +.progress-bar:hover .progress { + background-color: var(--green-color); +} + +.progress-bar:hover .progress::after { + content: ""; + position: absolute; + --size: 1em; + width: var(--size); + height: var(--size); + right: 0; + border-radius: 50%; + background-color: var(--primary-color); + transform: translate(50%, calc(2px - 50%)); +} + +.other-features { + position: absolute; + right: var(--padding); + display: flex; + flex-direction: row; + gap: 1em; +} + +.volume-bar { + display: flex; + align-items: center; + gap: 0.7em; +} + +.volume-bar .progress-bar { + width: 6em; +} + +.volume-bar .progress-bar:hover .progress::after { + --size: 0.8em; +} diff --git a/assets/img/youg.jpeg b/youg.jpeg similarity index 100% rename from assets/img/youg.jpeg rename to youg.jpeg