diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 00000000..6b665aaa --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} diff --git a/assets/img/arrow-clockwise.svg b/assets/img/arrow-clockwise.svg new file mode 100644 index 00000000..b072eb09 --- /dev/null +++ b/assets/img/arrow-clockwise.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/assets/img/display.svg b/assets/img/display.svg new file mode 100644 index 00000000..700d7805 --- /dev/null +++ b/assets/img/display.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/assets/img/folder.svg b/assets/img/folder.svg new file mode 100644 index 00000000..fd4dc5aa --- /dev/null +++ b/assets/img/folder.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/assets/img/heart.svg b/assets/img/heart.svg new file mode 100644 index 00000000..c761ef4b --- /dev/null +++ b/assets/img/heart.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/assets/img/list-ul.svg b/assets/img/list-ul.svg new file mode 100644 index 00000000..217d1539 --- /dev/null +++ b/assets/img/list-ul.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/assets/img/play.svg b/assets/img/play.svg new file mode 100644 index 00000000..c93144ab --- /dev/null +++ b/assets/img/play.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/assets/img/shuffle.svg b/assets/img/shuffle.svg new file mode 100644 index 00000000..83bf20ca --- /dev/null +++ b/assets/img/shuffle.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/assets/img/skip-end.svg b/assets/img/skip-end.svg new file mode 100644 index 00000000..fa90d3fc --- /dev/null +++ b/assets/img/skip-end.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/assets/img/skip-start.svg b/assets/img/skip-start.svg new file mode 100644 index 00000000..c4295fc1 --- /dev/null +++ b/assets/img/skip-start.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/assets/img/volume-up-fill.svg b/assets/img/volume-up-fill.svg new file mode 100644 index 00000000..495ee981 --- /dev/null +++ b/assets/img/volume-up-fill.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/css/style.css b/css/style.css index e69de29b..e0c77c9b 100644 --- a/css/style.css +++ b/css/style.css @@ -0,0 +1,315 @@ +*{ + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: sans-serif; +} + +body{ + overflow: hidden; +} + +.footer { + background-color: #282828; + position: fixed; + bottom: 0px; + left: 0px; + right: 0px; + height: 60px; + margin-bottom: 0px; +} + +.footer_left { + display: grid; + grid-template-columns: 1fr 0.5fr 3fr 1fr; +} + +.currently_playing > img { + height: 55px; + margin: auto; + padding-top: 3px; + } +.currently_playing { + display: grid; + grid-template-columns: repeat(2, 1fr) +} + +.footer_left > div > div > h6 { + color: white; + margin-top: 5px; + display: grid; + align-items: end; +} + +.footer_left > div > div > span { + color: #6d6d6d; + padding-left: 0; + font-size: 10px; + padding-top: 7px; +} + +.sidebar_box { + display: grid; + grid-template-rows: 60px auto +} + +.sidebar_box > nav, .libraries_container { + background-color: #141922; +} + +.sinister { + display: grid; + +} + +.like_button { + filter: invert(70%); + margin: auto; + } + + .like_button > img { + margin: 5px; + } + + .footer_middle { + margin: auto; + filter: invert(100%); + display: grid; + } + + .play_options { + margin: auto; + } + + .play_options > img { + margin: 0 5px; + } + + .volume_control { + filter: invert(70%); + display: flex; + padding: 20px; + } + + .volume_control > img { + height: 15px; + margin: 0 5px; + } + + .footer_right { + display: flex; + } + + .song-progress { + margin: 5px; + } + + .main_container { + height: 100vh; + width: 100vw; + display: grid; + grid-template-rows: 1fr 60px; + } + + .main_sidebar { + display: grid; + grid-template-columns: 190px 5fr; + grid-template-rows: 93vh; + } + + p, + span { + font-size: 12px; + } + + span { + padding-left: 15px; + } + + .libraries_container { + display: grid; + height: 100vh; + width: 100%; + overflow-x: hidden; + overflow-y: scroll; + padding-left: 20px; + } + + .already_played, + .for_Ras_Nono, + .favourites { + display: grid; + grid-template-columns: repeat(6, 1fr); + gap: 1rem; + } + + aside.sidebar_box > div { + display: grid; + grid-template-columns: 20px auto; + padding-left: 15px; + } + + .header_right_box { + color: white; + background-color: #080b12; + text-align: end; + padding: 20px; + } + + .header_right_box > p { + border: 1px solid white; + display: inline; + padding: 5px 35px; + border-radius: 50px; + } + + aside.sidebar_box { + background-color: black; + color:#6d6d6d; + } + + .favourites > div > img { + border-radius: 20rem; + + } + + section > div > img { + height: 170px; + } + + .already_played > div, + .for_Ras_Nono > div, + .favourites > div { + + text-align: center; + display: grid; + height: auto; + width: min-content; + + } + + .libraries_container strong, h3 { + color: white; + } + + .libraries_container p, li { + color:#6d6d6d; + } + + ul { + list-style: none; + margin: auto; + } + +.plus { + background-color: white; + padding: 5px; + height: 30px; + font-size: large; + } + + .create_playlist > p { + padding: 10px; + } + .create_playlist { + display: grid; + grid-template-columns: 1fr 1fr; + } + + .logo { + padding: 10px 0 0 0; + } + .first_logo p { + padding: 3px; + margin-left: 10px; + } + .second_logo > p { + color: white; + } + + [alt|="id"] { + border-radius: 50px; + background-color: grey; + } + + .app_install { + margin-bottom: 5px; + margin-top: 180px; + } + + .h3 { + margin-bottom: 20px; + } + .h3 > p { + margin-top: 10px; + } + .h3 > h3 { + margin-top: 30px; + } + + div.main_sidebar > nav { + display: flex; + height: 60px; + width: 100%; + } + li { + margin: 0 5px; + float: left; + } + + div.first_logo:nth-child(2) { + border-left: 2px solid #ce23f0; + transition: 1s; + + } + + div.app_install:after { + content: ''; + display: block; + margin: auto; + width: 550%; + padding-top: 5px; + border-bottom: 2px solid grey; + } + li:nth-child(1):after { + content: ''; + display: block; + margin: auto; + width: 50%; + padding-top: 5px; + border-bottom: 2px solid #ce23f0; + } + + @media screen and (min-width: 500px) { + [alt|="small-logo"] { + display: none; + } + + } + + @media screen and (max-width: 500px) { + aside.sidebar_box p, + span { + display: none; + } + .create_playlist > strong { + display: none; + } + [alt|="library"] { + display: grid; + margin-bottom: auto; + } + .app_install { + margin-top: 400px; + } + [alt|="logo"] { + display: none; + } + .main_sidebar { + display: grid; + grid-template-columns: 60px 5fr; + } + + } + + \ No newline at end of file diff --git a/index.html b/index.html index 56efbdba..5cb2d14e 100644 --- a/index.html +++ b/index.html @@ -4,9 +4,197 @@ - Document + + + + + + Spotify Clone + +
+
+ + +
+
+

Upgrade

+
+ +
+

Recently Played

+
+
+ heavy metal + Heavy Metal +

Subtitle

+
+ +
+ stranger things + Stranger Things, Vol1 (a Netflix Original Series Soundtrack) + +

Subtitle

+
+ +
+ heavy metal + A quiet place +

Subtitle

+
+ +
+ + Split + +

Subtitle

+
+ +
+ + A cure for wellness + +

Subtitle

+
+ +
+ + Sinister + +

Subtitle

+
+ +
+ +
+

Created for Ras Nono

+

Your favourite tracks in one place

+
+ +
+
+ release radar + Release Radar +
+ +
+ your daily mix + Daily Mix 1 +
+
+ +
+

Popular Artists

+

Your popular artists

+
+ +
+
+ artist youg + Youg +

Subtitle

+
+ +
+ artist Einaudi + Einaudi +

Subtitle

+
+
+
+
+
+ + +
\ No newline at end of file