diff --git a/README.md b/README.md index 6c1e574b..05ac67a6 100644 --- a/README.md +++ b/README.md @@ -19,3 +19,4 @@ For the player icons, you can use your own images or Font Awesome icons (https:/ * ☑ The top navigation list wraps as the page size is reduced. * ☑ On hovering over cover images, a play icon appears overlaid. * ☑ Only the main content area scrolls - it moves behind the upgrade bar and the player controls. The side menu also stays fixed as the main content scrolls. + diff --git a/assets/img/Burna.jpg b/assets/img/Burna.jpg new file mode 100644 index 00000000..e41bdfd0 Binary files /dev/null and b/assets/img/Burna.jpg differ diff --git a/assets/img/Davido.jfif b/assets/img/Davido.jfif new file mode 100644 index 00000000..2ccd06b9 Binary files /dev/null and b/assets/img/Davido.jfif differ diff --git a/assets/img/Olamide_Carpe.jpeg b/assets/img/Olamide_Carpe.jpeg new file mode 100644 index 00000000..dec0c871 Binary files /dev/null and b/assets/img/Olamide_Carpe.jpeg differ diff --git a/assets/img/arya.jpeg b/assets/img/arya.jpeg new file mode 100644 index 00000000..04534e2b Binary files /dev/null and b/assets/img/arya.jpeg differ diff --git a/assets/img/felaKuti.jpg b/assets/img/felaKuti.jpg new file mode 100644 index 00000000..6a269cbf Binary files /dev/null and b/assets/img/felaKuti.jpg differ diff --git a/assets/img/kiss-daniel.jfif b/assets/img/kiss-daniel.jfif new file mode 100644 index 00000000..b20fcb89 Binary files /dev/null and b/assets/img/kiss-daniel.jfif differ diff --git a/assets/img/wizkid.jfif b/assets/img/wizkid.jfif new file mode 100644 index 00000000..25d96bd6 Binary files /dev/null and b/assets/img/wizkid.jfif differ diff --git a/css/style.css b/css/style.css index e69de29b..e666f6fa 100644 --- a/css/style.css +++ b/css/style.css @@ -0,0 +1,439 @@ +*{ + padding: 0; + margin: 0; +} + +body { + background-color: #121212; + font-family: 'Montserrat', sans-serif; + color: #ffffff; +} + +.container { + margin-left: 200px; + margin-bottom: 100px; +} +/* Sidebar starts here */ + +aside.sidebar { + position: fixed; + left: 0; + top: 0; + bottom: 0; + width: 90px; + background-color: #000000; + padding: 24px; + +} + +.sidebar .logo img { + width: 70px; +} + +.sidebar .navigation ul { + list-style: none; + margin-top: 50px; +} + +.sidebar .navigation ul li { + display: flex; + align-items: center; + padding: 10px 15px; +} + +.sidebar .navigation ul li a { + color: #b3b3b3; + text-decoration: none; + font-weight: bold; + font-size: 13px ; + display: inline-flex; + align-items: center; + gap: 4px; + + +} + +.sidebar .navigation ul li a:hover, +.sidebar .navigation ul li a:active, +.sidebar .navigation ul li a:focus { + color: #ffffff; +} + +.sidebar .navigation ul li a:hover .img, +.sidebar .navigation ul li a:active .img, +.sidebar .navigation ul li a:focus .img { + color: #b3b3b3 ; +} + +/* This gave space to the text and icon, starts here. come back to this place later */ +.sidebar .navigation ul li img { + width: 20px; + height: 20px; + margin-right: 20px; +} + + +.sidebar .navigation ul li a:hover .img:hover, +.sidebar .navigation ul li a:active .img:active, +.sidebar .navigation ul li a:focus .img:focus { + color: #ffffff; +} + +.sidebar .profile { + position: absolute; + bottom: 100px; + margin-bottom: 10px; +} + +.sidebar .profile ul { + list-style: none; +} + +.sidebar .profile ul li { + padding-bottom: 5px; + margin-bottom: 10px; + } + +.sidebar .profile ul li a { + color: #b3b3b3; + font-weight: 500; + text-decoration: none; + font-size: 10px; +} + +.sidebar .profile ul li a:hover, +.sidebar .profile ul li a:active, +.sidebar .profile ul li a:focus{ +text-decoration: underline; + +} + +/* Sibe bar ends here */ + +.profile h3{ + color: white; +} + +.topbar { + display: flex; + justify-content: space-between; + background-color: #000000; + padding: 14px 30px; +} + +.topbar .prev-next-buttons button { + color: blue; + cursor: pointer; + width: 34px; + height: 34px; + border-radius: 100%; + font-size: 15px; + border: 0px; + background-color: #090909; + margin-right: 10px; +} + +.topbar .navbar { + display: flex; + align-items: center; +} + +.topbar .navbar ul{ + list-style: none; +} + +.topbar .navbar ul li { + display: inline-block; + margin: 0px 0px; + width: 70px; +} + +.topbar .navbar ul li a { + color: #b3b3b3; + text-decoration: none; + font-weight: bold; + font-size: 14px; + letter-spacing: 1px; +} + +.topbar .navbar ul li a:hover, +.topbar .navbar ul li a:active, +.topbar .navbar ul li a:focus { + color: #ffffff; + font-size: 15px; +} + +.topbar .navbar ul li.divider { + color: #ffffff; + font-size: 26px; + margin: 0px 20px; + width: auto; +} + +.topbar .navbar button { + background-color: #ffffff; + color: #000000; + font-size: 16px; + font-weight: bold; + padding: 14px 30px; + border: 0px; + border-radius: 40px; + cursor: pointer; + margin-left: 20px; +} + +.topbar .navbar button:hover, +.topbar .navbar button:active, +.topbar .navbar button:focus { + background-color: #f2f2f2; +} + + + + +/* Playlist */ + +.spotify-playlists { + padding: 20px 40px; +} +.spotify-playlists h2{ + color: #ffffff; + gap: 20px; + overflow: hidden; +} + +.spotify-playlists .list { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); + gap: 20px; + margin-bottom: 20px; + grid-auto-flow: none; + +} + +.spotify-playlists .list .item { + min-width: 140px; + width: 160px; + padding: 15px; + background-color: #181818; + border-radius: 6px; + cursor: pointer; + transition: all ease 0.4s; +} + +.spotify-playlists .list .item:hover { + background-color: #252525; +} + +.spotify-playlists .list .item img { + width: 100%; + border-radius: 6px; + margin-bottom: 10px; + +} + +.spotify-playlists .list .item .play { + position: relative; +} + +.spotify-playlists .list .item .play .fa { + position: absolute; + right: 10px; + top: -60px; + padding: 18px; + background-color: #1db954; + border-radius: 100%; + opacity: 0; + transition: all ease 0.4s; +} + +.spotify-playlists .list .item:hover .play .fa { + opacity: 1; + transform: translateY(-20px); +} + +.spotify-playlists .list .item h4 { + color: #ffffff; + font-size: 14px; + margin-bottom: 10px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.spotify-playlists .list .item p { + color: #989898; + font-size: 12px; + line-height: 20px; + font-weight: 600; +} + +/* Footer */ +footer { + + margin: 0; + padding: 0; + font-size: 14px; + background: linear-gradient(to right, #ae2896, #509bf5); +} + +.music-player { + --primary-color: #ddd; + --secondary-color: #999; + --green-color: 2d5; + --padding:0; + background-color: #111; + justify-content: center; + align-items: center; + height: 7rem; + color: var(--primary-color); +} + +.song-bar { + position: absolute; + left: 10px; + display: flex; + flex-direction: row; + align-items: center; + justify-content: flex-start; + gap: 1.5rem; + width: 25%; +} + +.song-infos { + display: flex; + align-items: center; + gap: 1em; +} + +.image-container { + --size: 4.5em; + flex-shrink: 0; + width: var(--size); + height: var(--size); +} + +.image-container img{ + width: 100%; + height: 100%; + object-fit: cover; +} + +.song-description p { + margin: 0.2em; +} + +.title, +.artist { + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 1; + 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.1); + 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: #ccc; +} + +.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: .7em; +} + +.volume-bar .progress-bar { + width: 6em; +} + +.volume-bar .progress:hover .progress::after { + --size: .8em; +} + +i { + color: var(--secondary-color); +} + +i:hover { + color: var(--primary-color); +} diff --git a/index.html b/index.html index 56efbdba..e59885b8 100644 --- a/index.html +++ b/index.html @@ -3,10 +3,308 @@ - - Document + + + + + + + + + Spotify Challenge + + + + + + +
+
+
+ + +
+ + +
+ + +
+ + + + + +
+ + +
+ +

Spotify Playlists

+
+
+ +
+ +
+

Cure by Benjamen

+

Great music, lovely and fun

+
+ +
+ +
+ +
+

Afro Nation

+

May the days of Fela Anikulapo be long

+
+ +
+ +
+ +
+

Pantera

+

Play me some yoyo and dodo

+
+ +
+ +
+ +
+

Daily Mix

+

Can you see me

+
+ +
+ +
+ +
+

Today's Top Hits

+

Rema and Selena Gomez are om the top of the...

+
+ +
+ +
+ +
+

Today's Top Hits

+

Rema and Selena Gomez are om the top of the...

+
+ +
+ +
+ +
+

Today's Top Hits

+

Rema and Selena Gomez are om the top of the...

+
+ +
+ + +

Afro Beats

+
+
+ +
+ +
+

Timeless Davido

+

The best of Naija Afrobeats and pop

+
+ +
+ +
+ +
+

Wizkid Made in Lagos

+

Award winning Afropop in Naija's history

+
+ +
+ +
+ +
+

Giant of Africa, Burna

+

Nigeria's Grammy Award winner

+
+ +
+ +
+ +
+

Oamide

+

Eyan Mayweather, The best always

+
+ +
+ +
+ +
+

Kiss Daniel

+

Twe Twe crooner

+
+ +
+ +
+ +
+

Afro pop's legend

+

Latest Fela songs

+
+ +
+ +
+ +
+

Female Naija's leading song

+

Rema and Selena Gomez are om the top of the...

+
+ + +
+ +
+
+ + + + + + + + + \ No newline at end of file diff --git a/login.css b/login.css new file mode 100644 index 00000000..8e712559 --- /dev/null +++ b/login.css @@ -0,0 +1,81 @@ +* { + padding: 0; + margin: ; +} + +body { + margin: 0; + padding: 0; + display: grid; + justify-content: center; + align-items: center; + height: 100vh; + background-color: #121212; +} + +.container { + width: 650px; + padding: 20px; + background-color: #fff; + border-radius: 10px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); + +} + +h1{ + text-align: center; + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; +} + +form { + display: grid; + gap: 5px; +} + +label { + font-weight: bold; +} + +input[type="text"], +select { + width: 100%; + padding: 10px; + border: 1px solid #ccc; + border-radius: 5px; + box-sizing: border-box; + font-size: 16px; +} + +textarea { + width: 100%; + padding: 60px; + padding-right: 0; + padding-left: 0; + resize: none; + +} + +select { + appearance: ; /* I dont know what value to add here, only none and butt are showing */ +} + +hr { + border: 1px solid #ccc; + border-top: 2px solid #ccc; + margin: 10px 0; +} + +input[type="submit"] { + width: 100%; + padding: 10px; + border: none; + border-radius: 5px; + background-color: #1a1a1a; + color: #fff; + font-size: 16px; + cursor: pointer; +} + +input[type="submit"]:hover { + background-color: #800080; +} \ No newline at end of file diff --git a/login.html b/login.html new file mode 100644 index 00000000..b366cdb3 --- /dev/null +++ b/login.html @@ -0,0 +1,47 @@ + + + + + + + Login + + + + + + + + + + + Stylish Form + + + +
+

Log in to Spotify

+
+ + + + + + + + + + + + Forgot password? + +
+
+ + + + + + \ No newline at end of file