diff --git a/README.md b/README.md index 6c1e574b..8134524e 100644 --- a/README.md +++ b/README.md @@ -11,6 +11,7 @@ For the player icons, you can use your own images or Font Awesome icons (https:/ * ☑ Fonts, colors and spacings used are similar (they don't need to be identical) to the reference images * ☑ CSS avoids repetition. * ☑ CSS class names are descriptive. +* ☑ CSS makes use of grid the main structure. * ☑ HTML is semantic and well structured. ### Extension Criteria @@ -18,4 +19,5 @@ For the player icons, you can use your own images or Font Awesome icons (https:/ * ☑ The list of albums expands and collapses to fill the available page space (see `spotify-md.png` and `spotify-s.png`) * ☑ The top navigation list wraps as the page size is reduced. * ☑ On hovering over cover images, a play icon appears overlaid. +* ☑ CSS makes use of grid for all subelements structures. * ☑ 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/Tinas-Boy-Front-768x768.png b/assets/img/Tinas-Boy-Front-768x768.png new file mode 100644 index 00000000..dd600805 Binary files /dev/null and b/assets/img/Tinas-Boy-Front-768x768.png differ diff --git a/assets/img/bobmarley.jpeg b/assets/img/bobmarley.jpeg new file mode 100644 index 00000000..258e008b Binary files /dev/null and b/assets/img/bobmarley.jpeg differ diff --git a/assets/img/concious.jpeg b/assets/img/concious.jpeg new file mode 100644 index 00000000..99f3c622 Binary files /dev/null and b/assets/img/concious.jpeg differ diff --git a/assets/img/cropcircle.jpeg b/assets/img/cropcircle.jpeg new file mode 100644 index 00000000..4be29229 Binary files /dev/null and b/assets/img/cropcircle.jpeg differ diff --git a/assets/img/dj-ai.webp b/assets/img/dj-ai.webp new file mode 100644 index 00000000..4a5793ec Binary files /dev/null and b/assets/img/dj-ai.webp differ diff --git a/assets/img/doggy-style.jpeg b/assets/img/doggy-style.jpeg new file mode 100644 index 00000000..26a9c468 Binary files /dev/null and b/assets/img/doggy-style.jpeg differ diff --git a/assets/img/elv1s.jpeg b/assets/img/elv1s.jpeg new file mode 100644 index 00000000..d0960159 Binary files /dev/null and b/assets/img/elv1s.jpeg differ diff --git a/assets/img/giggs.jpeg b/assets/img/giggs.jpeg new file mode 100644 index 00000000..1a8f2ed4 Binary files /dev/null and b/assets/img/giggs.jpeg differ diff --git a/assets/img/kodak-black.jpeg b/assets/img/kodak-black.jpeg new file mode 100644 index 00000000..71be2866 Binary files /dev/null and b/assets/img/kodak-black.jpeg differ diff --git a/assets/img/like-play.jpeg b/assets/img/like-play.jpeg new file mode 100644 index 00000000..55cd6da9 Binary files /dev/null and b/assets/img/like-play.jpeg differ diff --git a/assets/img/lil durk.jpeg b/assets/img/lil durk.jpeg new file mode 100644 index 00000000..df4c8159 Binary files /dev/null and b/assets/img/lil durk.jpeg differ diff --git a/assets/img/maktub.jpeg b/assets/img/maktub.jpeg new file mode 100644 index 00000000..f5423797 Binary files /dev/null and b/assets/img/maktub.jpeg differ diff --git a/assets/img/muse.jpeg b/assets/img/muse.jpeg new file mode 100644 index 00000000..27c798e4 Binary files /dev/null and b/assets/img/muse.jpeg differ diff --git a/assets/img/nines.jpeg b/assets/img/nines.jpeg new file mode 100644 index 00000000..e1768f8b Binary files /dev/null and b/assets/img/nines.jpeg differ diff --git a/assets/img/onefootout.jpeg b/assets/img/onefootout.jpeg new file mode 100644 index 00000000..9b3a8b72 Binary files /dev/null and b/assets/img/onefootout.jpeg differ diff --git a/assets/img/ppayper-radio.jpeg b/assets/img/ppayper-radio.jpeg new file mode 100644 index 00000000..7230686f Binary files /dev/null and b/assets/img/ppayper-radio.jpeg differ diff --git a/assets/img/prince.jpeg b/assets/img/prince.jpeg new file mode 100644 index 00000000..223230c0 Binary files /dev/null and b/assets/img/prince.jpeg differ diff --git a/assets/img/realbackinstyle.jpeg b/assets/img/realbackinstyle.jpeg new file mode 100644 index 00000000..c0ebcbd8 Binary files /dev/null and b/assets/img/realbackinstyle.jpeg differ diff --git a/assets/img/snoop.jpeg b/assets/img/snoop.jpeg new file mode 100644 index 00000000..e6fa146b Binary files /dev/null and b/assets/img/snoop.jpeg differ diff --git a/assets/img/spotify-announcment.jpeg b/assets/img/spotify-announcment.jpeg new file mode 100644 index 00000000..c2dadcdf Binary files /dev/null and b/assets/img/spotify-announcment.jpeg differ diff --git a/assets/img/thanksforwaiting.jpeg b/assets/img/thanksforwaiting.jpeg new file mode 100644 index 00000000..c5781bd8 Binary files /dev/null and b/assets/img/thanksforwaiting.jpeg differ diff --git a/assets/img/thechronoc.jpeg b/assets/img/thechronoc.jpeg new file mode 100644 index 00000000..5f99745f Binary files /dev/null and b/assets/img/thechronoc.jpeg differ diff --git a/assets/img/trainingday.jpeg b/assets/img/trainingday.jpeg new file mode 100644 index 00000000..0fe91dc0 Binary files /dev/null and b/assets/img/trainingday.jpeg differ diff --git a/assets/img/trainingdaythree.jpeg b/assets/img/trainingdaythree.jpeg new file mode 100644 index 00000000..d940b3f4 Binary files /dev/null and b/assets/img/trainingdaythree.jpeg differ diff --git a/assets/img/trainingdaytwo.jpeg b/assets/img/trainingdaytwo.jpeg new file mode 100644 index 00000000..c4f43607 Binary files /dev/null and b/assets/img/trainingdaytwo.jpeg differ diff --git a/css/style.css b/css/style.css index e69de29b..f77c193f 100644 --- a/css/style.css +++ b/css/style.css @@ -0,0 +1,422 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: "Archivo", sans-serif; + font-optical-sizing: auto; + font-style: normal; + font-weight: 800; +} + +body { + background-color: #000000; +} + +.grid-container { + height: 100vh; + width: 100vw; + display: grid; + grid-template-columns: 150px 1fr; + grid-template-areas: + "left-bar main-content" + "play-bar play-bar"; + grid-template-rows: 1fr 150px; + gap: 20px; + padding: 20px; +} + +.left-bar { + grid-area: left-bar; + display: flex; + flex-direction: column; + overflow-y: scroll; +} + +.left-section1, .left-section2 { + background-color: #121212; + border-radius: 20px; + width: 100%; + margin-bottom: 20px; + display: flex; + flex-direction: column; + justify-items: center; + padding: 20px 20px; +} + +.left-section2 { + flex: 1; +} + +.left-btns { + display: inline-block; + margin: 20px auto 20px auto; + width: 80px; + height: 80px; + border: none; + background: none; + cursor: pointer; + border-radius: 8px; + overflow: hidden; +} +.left-btns1 { + display: inline-block; + margin: 20px auto 20px auto; + width: 80px; + height: 80px; + border: none; + background: none; + cursor: pointer; + border-radius: 8px; + overflow: hidden; +} +.left-btns1 img { + width: 80px; + height: 80px; + object-fit: cover; +} +.left-btns:hover { + transform: scale(1.1); +} +.left-btns1:hover { + transform: scale(1.5); + transition: all 0.3s ease; +} + +.left-btns:hover path { + fill: #1CD760; +} + +.left-bar svg { + width: 50px; + height: 50px; +} + +main { + grid-area: main-content; + height: 100%; + background-image: linear-gradient(to bottom left, #54585A, #121212); + border-radius: 20px; + overflow-y: scroll; +} + +.main-box { + position: relative; + box-sizing: border-box; + border: none; + width: 100%; + height: 50%; + padding: 20px; + max-height: 100%; + background-image: linear-gradient(to bottom left, #54585A, black); + overflow: hidden; +} + +.main-box img { + width: 100%; + height: 100%; + border-radius: 8px; + object-fit: cover; +} + + +.fixed-header { + box-sizing: border-box; + width: 100%; + display: flex; + justify-content: space-between; + padding: 10px 10px; + position: sticky; + top: 0px; +} + +.recent-content { + display: grid; + grid-template-columns: 1fr 1fr; + grid-auto-rows: 100px; + width: 100%; + padding: 20px; + gap: 10px; +} + +.recent-content-item { + display: flex; + align-items: center; + width: 100%; + background-color: #54585A; + background-color: rgba(70, 70, 70, 0.2); + border-radius: 8px; + overflow: hidden; +} + +.recent-content-item img { + background-color: aliceblue; + width: 100px; + height: 100px; +} + +.recent-content-item span { + font-size: 22px; + padding-left: 20px; + color: white; + flex: 1; +} + +.recent-content-item button { + display: none; + justify-content: center; + align-items: center; + width: 80px; + height: 80px; + padding: 10px; + border-radius: 100%; + background-color: #1CD760; + border: none; + margin-right: 20px; + cursor: pointer; +} + +.recent-content-item svg { + width: 50px; + height: 50px; + margin-left: 9px; +} +.recent-content-item:hover button { + display: flex; + box-shadow: 0 0 10px rgba(0, 0, 0, 9); + +} +.recent-content-item:hover { + background-color: rgba(50, 50, 50, 0.6); +} + +.header-btns, +.right-header-btn { + width: 90px; + height: 90px; + border-radius: 100%; + cursor: pointer; + transition: all 0.3s ease; +} + +.right-nav button { + margin-left: 10px; +} + +.header-btns { + background-color: #0F0F0F; + border: none; +} + +.header-btns:hover { + transform: scale(1.1); + background-color: #0f0f0f7a; +} + +.right-header-btn { + background-color: #B49CC8; + border: 15px solid #0F0F0F; +} + +.right-header-btn:hover { + transform: scale(1.1); + background-color: #b49cc86f; +} + +.svg-btns { + height: 30px; +} + +.tag-nav { + position: sticky; + width: 100%; + top: 100px; + padding: 20px; +} +.tag-nav button { + border-radius: 66px; + font-size: 26px; + color: white; + padding: 20px 30px; + border: none; + background-color: rgba(50, 50, 50, 0.5); + cursor: pointer; +} +.tag-nav button:hover { + background-color: white; + color: #000000; + transition: all 0.8s ease; +} + +.bottom-bar { + grid-area: play-bar; + width: 100%; + display: flex; + justify-content: space-between; +} + +.now-playing { + display: flex; + flex: 1; + align-items: center; + height: 100%; + min-width: 100px; + background-color: black; + padding: 10px; +} +.now-playing img { + height: 150px; + width: 150px; +} +.now-playing .title { + display: block; + color: white; + +} +.now-playing .description { + display: block; + color: white; +} +.now-playing > div { + margin-left: 20px; +} + + +.center-controls { + height: 100%; + min-width: 450px; + background-color: black; + flex: 1; +} + +.center-controls .top-controls { + display: flex; + justify-content: center; + width: 100%; + max-width: 110%; + align-items: center; +} +.center-controls .top-controls button { + height: 70px; + width: 70px; + border-radius: 100%; + background: none; + border: none; + margin: 10px 10px; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; +} +.center-controls .top-controls .play { + background-color: white; + height: 90px; + width: 90px; + +} +.center-controls .bottom-controls { + display: flex; + align-items: center; + padding: 10px; + width: 100%; + color: white; +} +.bottom-controls > div { + flex: 1; + height: 5px; + background-color: #54585A; + border-radius: 5px; + margin: 0 10px; +} +.bottom-controls .progress { + height: 5px; + border-radius: 5px; + background-color: white; + width: 70%; +} + +.right-controls { + display: flex; + align-items: center; + justify-content: flex-end; + height: 100%; + min-width: 400px; + background-color: #000000; + flex: 1; +} +.right-controls button { + height: 60px; + width: 60px; + border-radius: 100%; + border: none; + margin: 10px 10px; + display: flex; + align-items: center; + justify-content: center; +} + +.spotify-btn { + background-color: #1CD760; + cursor: pointer; +} +.spotify-btn:hover { + transition: all 0.3s ease; + transform: scale(1.1); +} + +.bottom-play-svg { + height: 50px; + width: 50px; + margin-left: 10px; +} + +.bottom-svg { + height: 50px; + width: 50px; +} +.bottom-svg-1 { + height: 30px; + width: 30px; +} + +.top-controls button:hover { + transform: scale(1.1); + background: none; +} + +.spotify-svg { + height: 50px; + width: 50px; +} + +.right-btm-svg { + height: 40px; + width: 40px; +} + +.right-btm-btn { + height: 50px; + width: 50px; + background: none; + cursor: pointer; +} +.right-btm-btn:hover { + transform: scale(1.1); + transition: all 0.3s ease; +} + +::-webkit-scrollbar { + width: 10px; +} + +::-webkit-scrollbar-track { + background: #000000; +} + +::-webkit-scrollbar-thumb { + background: #0F0F0F; + border-radius: 10px; +} + +::-webkit-scrollbar-thumb:hover { + background: #1CD760; +} diff --git a/index.html b/index.html index 56efbdba..9ec92973 100644 --- a/index.html +++ b/index.html @@ -4,9 +4,343 @@ - Document + Spotify + + + + + + + + +
+ + + +
+ + + + + + + +
+ + + + +
+ +
+
+ Conscious Rap + +
+
+ This Is Giggs + +
+
+ This Is Muse + +
+
+ Maktub + +
+
+ Liked Songs + +
+
+ Potter Payper Radio + +
+
+ Project Baby Two + +
+
+ 7220 (Deluxe) + +
+
+ Split Soundtrack + +
+
+ Real Back In Style + +
+
+ Training Day + +
+
+ Training Day, Two + +
+
+ Training Day, Three + +
+
+ Thanks For Waiting + +
+
+ Tina's Boy + +
+
+ Legend, the best of Bob Marley and the Wailers + +
+
+ ELV1S + +
+
+ This Is Nines + +
+
+ One Foot Out + +
+
+ Crop Circle + +
+
+ This Is Snoop Dogg + +
+
+ Doggy-Style + +
+
+ DJ + +
+
+ The Chronic + +
+
+ +
+ +
+
+ +
+ + Purple Rain + + + Prince and the Revolution + +
+
+
+
+ + + + + +
+ +
+ 2:48 +
+
+ +
+
+ 4:05 +
+
+ +
+ + + + + +
+ +
+
+ + \ No newline at end of file diff --git a/reference/comparison.png b/reference/comparison.png new file mode 100644 index 00000000..6a98a012 Binary files /dev/null and b/reference/comparison.png differ diff --git a/reference/spotify-layout.png b/reference/spotify-layout.png new file mode 100644 index 00000000..ca5a375c Binary files /dev/null and b/reference/spotify-layout.png differ