From 41fe64fe24f0749dbca93e0b77df6b52a5818ef8 Mon Sep 17 00:00:00 2001 From: Cesar Date: Tue, 6 Jul 2021 18:57:02 -0500 Subject: [PATCH 1/2] feature group | Navbar and basic HTML structure added --- index.html | 82 ++++++++++++++++++++++++++++++++++++++++++++---- styles/style.css | 64 ++++++++++++++++++++++++++++++++++++- 2 files changed, 139 insertions(+), 7 deletions(-) diff --git a/index.html b/index.html index 4a81684..5a253d4 100644 --- a/index.html +++ b/index.html @@ -5,14 +5,84 @@ Spotify Clone + - Premium Discover Help Download Music for everyone. Spotify is now free on mobile, tablet and computer. Listen to the - right music, wherever you are. What’s on Spotify? Millions of Songs There are millions of songs on Spotify HD Music - Listen to music as if you were listening live Stream Everywhere Stream music on your smartphone, tablet or computer - It’s as yeezy as Kanye West. Search Know what you want to listen to? Just search and hit play. Browse Check out the - latest charts, brand new releases and great playlists for right now. Discover Enjoy new music every Monday with your - own personal playlist. Or sit back and enjoy Radio. +
+ + +
    +
  • Premium
    • +
  • Discover
    • +
  • Help
    • +
  • Download
    • +
+ +
+
+

+ Music for everyone. +

+
+ Spotify is now free on mobile, tablet and computer. Listen to the + right music, wherever you are. +
+
+
+

+ What’s on Spotify? +

+
+
+
    +
  • +

    + Millions of Songs +

    + There are millions of songs on Spotify +
    • +
  • +

    + HD Music +

    + Listen to music as if you were listening live +
    • +
  • +

    + Stream Everywhere +

    + Stream music on your smartphone, tablet or computer +
    • +
+
+
+
+
+

+ It’s as yeezy as Kanye West. +

+

+ Search +

+

+ Know what you want to listen to? Just search and hit play. +

+

+ Browse +

+

+ Check out the + latest charts, brand new releases and great playlists for right now. +

+

+ Discover +

+

+ Enjoy new music every Monday with your + own personal playlist. Or sit back and enjoy Radio. +

+
+ \ No newline at end of file diff --git a/styles/style.css b/styles/style.css index 68b1e59..c6f425c 100644 --- a/styles/style.css +++ b/styles/style.css @@ -3,4 +3,66 @@ Colors: Text: 1A1A1A Green: #00B172 White: #FFF -*/ \ No newline at end of file +*/ +body, html, main { + margin: 0; + padding: 0; +} + +#navbar { + position: fixed; + padding: 10px; + background-color: gray; + width: 100%; + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; +} + +#spotify_logo { + max-width: 10em; +} + +.list { + list-style: none; +} + +.nav-link { + display: inline-block; + padding: 0px 20px; +} + +#welcome { + background-image: url(/images/landing.jpg); + height: 100vh; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +#welcome>h1, h5 { + color: white; +} + +#description { + padding-top: 100px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.desc-link { + border-style: solid; + border-radius: 2em; + max-width: 12em; + display: inline-block; + padding: 0px 20px 20px; + text-align: center; +} + +#features { + padding-top: 100px; +} \ No newline at end of file From 78f80de233af050fae3e10b12e601069e0d0bd7a Mon Sep 17 00:00:00 2001 From: Cesar Date: Tue, 6 Jul 2021 20:37:56 -0500 Subject: [PATCH 2/2] finalized project --- index.html | 56 ++++++++++++++++++++++++++++-------------------- styles/style.css | 38 ++++++++++++++++++++++++++++++-- 2 files changed, 69 insertions(+), 25 deletions(-) diff --git a/index.html b/index.html index 5a253d4..dc2ac56 100644 --- a/index.html +++ b/index.html @@ -59,29 +59,39 @@

-

- It’s as yeezy as Kanye West. -

-

- Search -

-

- Know what you want to listen to? Just search and hit play. -

-

- Browse -

-

- Check out the - latest charts, brand new releases and great playlists for right now. -

-

- Discover -

-

- Enjoy new music every Monday with your - own personal playlist. Or sit back and enjoy Radio. -

+
+
+

+ It’s as yeezy as Kanye West. +

+
+

+ Search +

+

+ Know what you want to listen to? Just search and hit play. +

+
+

+ Browse +

+

+ Check out the + latest charts, brand new releases and great playlists for right now. +

+
+

+ Discover +

+

+ Enjoy new music every Monday with your + own personal playlist. Or sit back and enjoy Radio. +

+
+
+ +
+
diff --git a/styles/style.css b/styles/style.css index c6f425c..8c73d51 100644 --- a/styles/style.css +++ b/styles/style.css @@ -10,14 +10,16 @@ body, html, main { } #navbar { + color: white; position: fixed; padding: 10px; - background-color: gray; + background-color: black; width: 100%; display: flex; flex-direction: row; justify-content: space-between; align-items: center; + font-family: Gotham Medium; } #spotify_logo { @@ -35,11 +37,17 @@ body, html, main { #welcome { background-image: url(/images/landing.jpg); + background-repeat: no-repeat; + background-position: center; + background-size: contain; + background-color: black; height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; + font-family: Gotham Medium; + font-size: 1.5em; } #welcome>h1, h5 { @@ -47,11 +55,15 @@ body, html, main { } #description { + color: white; + background-color: black; padding-top: 100px; + padding-bottom: 100px; display: flex; flex-direction: column; justify-content: center; align-items: center; + font-family: Gotham Medium; } .desc-link { @@ -64,5 +76,27 @@ body, html, main { } #features { - padding-top: 100px; + padding: 100px; + background-color: #1D8954; + background-image: url(/images/spotify-icon-white.png); + background-repeat: no-repeat; + background-position-x: center; + background-position-y: center; + background-size: 4em; + color: white; + font-family: Gotham Medium; +} + +#features_container { + display: flex; + flex-direction: row; + justify-content: space-around; +} + +#features_img_container>img { + max-height: 550px; +} + +#features_text_container { + width: 400px; } \ No newline at end of file