From ba866058cac4d470db4ca43134b5d658de7a43ff Mon Sep 17 00:00:00 2001 From: Chuks200 Date: Tue, 28 May 2024 18:08:37 +0100 Subject: [PATCH 1/2] sportify --- ...l-media-logo-by-alfredocreates-300x300.png | Bin 0 -> 11410 bytes css/style.css | 184 ++++++++++++++++++ index.html | 92 ++++++++- 3 files changed, 272 insertions(+), 4 deletions(-) create mode 100644 assets/img/Spotify-social-media-logo-by-alfredocreates-300x300.png diff --git a/assets/img/Spotify-social-media-logo-by-alfredocreates-300x300.png b/assets/img/Spotify-social-media-logo-by-alfredocreates-300x300.png new file mode 100644 index 0000000000000000000000000000000000000000..1add03a1fbd5030c1c133ac09ffeffa8ec9c6406 GIT binary patch literal 11410 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 literal 0 HcmV?d00001 diff --git a/css/style.css b/css/style.css index e69de29b..c0a6b73f 100644 --- a/css/style.css +++ b/css/style.css @@ -0,0 +1,184 @@ + +* { + margin: 0; + padding: 0; + box-sizing:border-box; + } + + body { + font-family: Arial, sans-serif; + } + + .main-layout { + display: grid; + grid-template-areas: + "sidebar header" + "sidebar main" + "player player"; + grid-template-columns: 250px 1fr; + grid-template-rows: auto 1fr auto; + height: 100vh; + } + + .sidebar-layout { + grid-area:sidebar; + background-color: #121212; + color: white; + display: flex; + flex-direction: column; + justify-content: space-between; + } + + .sidebar-contents { + padding: 20px; + } + + .spotify-content { + display: flex; + align-items: center; + margin-bottom: 20px; + } + + .spotify-logo { + width: 20px; + height: 20px; + margin-right: 10px; + } + + .logo { + font-size: 24px; + } + + .menu, + .playlists { + list-style: none; + margin-bottom: 20px; + } + + .menu li, + .playlists li { + margin: 10px 0; + } + + .create-playlist { + background-color: #1DB954; + color: white; + padding: 10px; + border: none; + cursor: pointer; + width: 100%; + text-align: left; + } + + .content-main-layout { + grid-area: main; + display: flex; + flex-direction: column; + overflow: auto; + } + + .content-header { + grid-area: header; + display: flex; + justify-content: space-between; + align-items: center; + padding: 20px; + background-color: #282828; + color: white; + } + + .nav { + display: flex; + justify-content: space-between; + align-items: center; + width: 100%; + } + + .nav-list { + display: flex; + list-style: none; + } + + .nav-list li { + margin: 0 10px; + } + + .upgrade-button { + background-color: #1DB954; + color: white; + border: none; + padding: 10px 20px; + cursor: pointer; + } + + .content { + padding: 20px; + overflow-y: auto; + background-color: #181818; + color: white; + } + + .recently-played, + .created-for-you, + .popular-artists { + margin-bottom: 20px; + } + + .album-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); + gap: 20px; + } + + .player-controls { + grid-area: player; + background-color: #282828; + padding: 20px; + display: flex; + justify-content: space-between; + align-items: center; + color: white; + } + + .player-left, + .player-center, + .player-right { + display: flex; + align-items: center; + } + + .player-center { + flex-direction: column; + } + + .player-center button { + background: none; + border: none; + color: white; + font-size: 20px; + margin: 0 5px; + cursor: pointer; + } + + .progress-bar { + display: flex; + align-items: center; + width: 100%; + } + + .progress { + flex: 1; + height: 5px; + background: #404040; + margin: 0 10px; + position: relative; + } + + .progress-filled { + height: 100%; + width: 25%; + background: #1DB954; + } + + + \ No newline at end of file diff --git a/index.html b/index.html index 56efbdba..4e34d9fe 100644 --- a/index.html +++ b/index.html @@ -4,9 +4,93 @@ - Document + + + Sportify - - - + + +
+
+
+
    +
  • In Evidenza
    • +
  • Podcast
    • +
  • Classifiche
    • +
  • Generi e Mood
    • +
  • Nuove Uscite
    • +
  • Scopri
    • +
+ +
+
+
+
+

Recently played

+
+
+
+
+

Creato per John Doe

+
+
+
+
+

Artisti più popolari

+
+
+
+
+
+
+
+ Album Cover +
+

Name of TRack

+

Name of artists

+
+
+
+ + + +
+ 0:25 +
+
+
+ 4:35 +
+
+
+ + + +
+
+ \ No newline at end of file From 5b3407017698f6919b4b4f6d8f6ae3e053025f86 Mon Sep 17 00:00:00 2001 From: Chuks200 Date: Thu, 30 May 2024 09:58:28 +0100 Subject: [PATCH 2/2] sportify --- css/style.css | 87 +++++++++++++++++++++++++++++++++++++++++++++------ index.html | 80 ++++++++++++++++++++++++++++++++++++++-------- 2 files changed, 144 insertions(+), 23 deletions(-) diff --git a/css/style.css b/css/style.css index c0a6b73f..7e650388 100644 --- a/css/style.css +++ b/css/style.css @@ -1,3 +1,4 @@ +/* styles.css */ * { margin: 0; @@ -34,16 +35,22 @@ } .spotify-content { - display: flex; + display:flex; align-items: center; - margin-bottom: 20px; } - + + .spotify-logo { - width: 20px; - height: 20px; + width: 40px; + height: 40px; margin-right: 10px; - } + } + + .spotify-logo img { + width: 40px; + height: 40px; + margin-right: 10px; + } .logo { font-size: 24px; @@ -124,6 +131,37 @@ margin-bottom: 20px; } + .sidebar-footer { + padding-left: 20px; + font-weight: bold; + } + .recently-played img { + width: 50%; + height: 50%; + + } + .playlists { + display: flex; + justify-content:flex-start; + margin: 20px 5px; + } + + .playlists img { + margin: 20px 10px; + } + + .popular-artists { + display: flex; + justify-content:flex-start; + margin: 20px 5px; + } + + .popular-artists img { + margin: 20px 10px; + border-radius: 50%; + } + + .album-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); @@ -141,15 +179,26 @@ } .player-left, - .player-center, .player-right { display: flex; - align-items: center; + align-items:center; + } + + .player-center { + display: table-row-group; } + .player-controls img{ + width: 10%; + height: 10%; + + } + .player-center { - flex-direction: column; + flex-direction: row; } + + .player-center button { background: none; @@ -180,5 +229,23 @@ background: #1DB954; } - + @media (max-width: 768px) { + .main-layout { + grid-template-areas: + "header header" + "main main" + "player player"; + grid-template-columns: 1fr; + } + + .sidebar-layout { + display: none; + } + } + + @media (max-width: 480px) { + .nav-list { + flex-wrap: wrap; + } + } \ No newline at end of file diff --git a/index.html b/index.html index 4e34d9fe..fb5d9d74 100644 --- a/index.html +++ b/index.html @@ -6,16 +6,17 @@ - Sportify + + Document
@@ -52,32 +58,78 @@

Recently played

+
+ Spotify logo +

Heavy Metal

+
Subtitle
+
+
+ Spotify logo +

Stranger Things, Vol.1 (a Netflix Original Series Soundtrack)

+
Kyle Dixon & Micheal Stein
+
+
+ Spotify logo +

A quiet place

+
Subtitle
+
+
+ Spotify logo +

Split

+
Subtitle
+
+
+ Spotify logo +

A cure for wellness

+
Subtitle
+
+
+ Spotify logo +

Sinister

+
Subtitle
+

Creato per John Doe

+
+ Spotify logo +

Release Radar

+
+
+ Spotify logo +

Daily Mix 1

+
-

Artisti più popolari

+

Artisti più popolari

+ Spotify logo + Spotify logo +
+
+
+