From d4324079aefc3978a7e1b2d62c3b0f9a5d357f3f Mon Sep 17 00:00:00 2001 From: Samuel Martinez Date: Tue, 13 Jul 2021 19:08:51 -0500 Subject: [PATCH 1/4] Iteration 1: navigation bar, done! --- index.html | 43 +++++++++++++++++++++++------------- styles/style.css | 57 ++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 85 insertions(+), 15 deletions(-) diff --git a/index.html b/index.html index 4a81684..ccda2b2 100644 --- a/index.html +++ b/index.html @@ -1,18 +1,31 @@ - - - - - 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. - + + + + + Spotify Clone + + + + +
+ spotify-logo +
+ +
+
+ + 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..357badf 100644 --- a/styles/style.css +++ b/styles/style.css @@ -1,3 +1,60 @@ +/* This is the default configuration for all web page */ +* { + margin: 0; + padding: 0; + font-family: Arial, Helvetica, sans-serif; +} + +p { + margin-bottom: 20px; +} + +/* Header styles */ +.header { + position: fixed; + width: 100%; + height: 10vh; + z-index: 100; + background-color: #FFF; + display: flex; +} + +.header > img { + margin: 10px 10px 10px 40px; +} + +/* Navigation bar styles */ +.nav { + margin: 10px 20px 10px 0px; + width: 100%; + display: flex; + align-items: center; + justify-content: flex-end; +} + +.nav > ul { + list-style-type: none; + text-align: center; + padding: 5px; +} + +.nav li{ + display: inline; + text-align: center; + margin: 0 10px 0 0; +} + +.nav li a { + padding: 2px 7px 2px 7px; + color: #666; + text-decoration: none; +} + +.nav li a:hover{ + background-color: #9E9E9E; + color: #1A1A1A; + border-radius: 5px; +} /* Colors: Text: 1A1A1A From 2b9b0f3f68b53a1705f96dda52d2098bc409aba2 Mon Sep 17 00:00:00 2001 From: Samuel Martinez Date: Tue, 13 Jul 2021 20:40:25 -0500 Subject: [PATCH 2/4] Iteration 2: background image with text, done! --- index.html | 5 +++++ styles/style.css | 26 ++++++++++++++++++++++++++ 2 files changed, 31 insertions(+) diff --git a/index.html b/index.html index ccda2b2..24ec402 100644 --- a/index.html +++ b/index.html @@ -21,6 +21,11 @@ +
+

Music for everyone.

+

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

+
+ 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 diff --git a/styles/style.css b/styles/style.css index 357badf..a2680ae 100644 --- a/styles/style.css +++ b/styles/style.css @@ -55,6 +55,32 @@ p { color: #1A1A1A; border-radius: 5px; } + +/* Main content styles */ +.main { + width: 100%; + height: 100vh; + background-repeat: no-repeat; + background-image: url("/images/landing.jpg"); + background-size: 100% 100%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} + +.main > h1 { + color: #FFF; + margin-bottom: 25px; + font-size: 60px; +} + +.main > p { + width: 35%; + color: #FFF; + font-size: 20px; + text-align: center; +} /* Colors: Text: 1A1A1A From ec7f412e7fd9857854b197867eda92291ae62c0e Mon Sep 17 00:00:00 2001 From: Samuel Martinez Date: Tue, 13 Jul 2021 22:44:00 -0500 Subject: [PATCH 3/4] Iteration 3: What's on Spotify section, done! --- index.html | 27 +++++++++++++++++++++++-- styles/style.css | 51 ++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 76 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 24ec402..f5d6797 100644 --- a/index.html +++ b/index.html @@ -26,11 +26,34 @@

Music for everyone.

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

- Music for everyone. Spotify is now free on mobile, tablet and computer. Listen to the +
+

What’s on Spotify?

+ +
+
+ music-icon +

Millions of Songs

+

There are millions of songs on Spotify

+
+ +
+ high-quality-icon +

HD Music

+

Listen to music as if you were listening live

+
+ +
+ devices-icon +

Stream Everywhere

+

Stream music on your smartphone, tablet or computer

+
+
+
+ \ No newline at end of file diff --git a/styles/style.css b/styles/style.css index a2680ae..0fc8349 100644 --- a/styles/style.css +++ b/styles/style.css @@ -81,6 +81,57 @@ p { font-size: 20px; text-align: center; } + +/* About content styles */ +.about { + width: 100%; + height: 65vh; + display: flex; + flex-direction: column; + align-items: center; +} + +.about > h2 { + margin-top: 20px; + border-bottom: solid 3px #00B172; +} + +.container { + margin: 20px; + padding: 20px; + border: solid 4px orange; + display: flex; + flex-direction: row; + justify-content: center; +} + +.square { + margin: 30px; + padding: 20px 35px; + border: solid 4px yellow; + display: flex; + flex-direction: column; + align-items: center; +} + +.square > img { + width: 35%; + height: 11vh; +} + +.square > h3 { + margin: 5px 0px; + color: #00B172; + font-size:x-large; +} + +.square > p { + margin-top: 20px; + color: #1A1A1A; + font-size: large; + text-align: center; + margin: 0px 30px; +} /* Colors: Text: 1A1A1A From 33e7ab8cf324dbfca8ec55d720e912e12fdf3517 Mon Sep 17 00:00:00 2001 From: Samuel Martinez Date: Tue, 13 Jul 2021 22:49:47 -0500 Subject: [PATCH 4/4] Iteration 4: The green section, done! --- index.html | 25 ++++++++++++++++------ styles/style.css | 55 ++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 74 insertions(+), 6 deletions(-) diff --git a/index.html b/index.html index f5d6797..8f58199 100644 --- a/index.html +++ b/index.html @@ -49,11 +49,24 @@

Stream Everywhere

- + +
+
+

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.

+
+ +
+ spotify-app +
+
\ No newline at end of file diff --git a/styles/style.css b/styles/style.css index 0fc8349..15200b3 100644 --- a/styles/style.css +++ b/styles/style.css @@ -132,6 +132,61 @@ p { text-align: center; margin: 0px 30px; } + +/* Description content styles */ +.description { + margin: 0px 20px; + width: 97%; + height: 90vh; + background-color: #00B172; + background-image: url("/images/spotify-icon-white.png"); + background-repeat: no-repeat; + background-position: center; + background-size: 20vh 20vh; + display: flex; +} + +.col { + margin: 80px; + display: flex; + flex-direction: column; + +} + +.left { + color: #FFF; + display: flex; + align-items: flex-start; + justify-content: center; +} + +.right +{ + display: flex; + align-items: center; + justify-content: center; +} + +.col > img { + width: 75%; + height: 90vh; +} + +.col > h2 { + font-size: 6vh; + margin-bottom: 30px; + border-bottom: solid 3px #FFF; +} + +.col > h3 { + font-size: 4vh; + margin: 20px 0px; +} + +.col > p { + margin-right: 56vh; + font-size: 2.5vh; +} /* Colors: Text: 1A1A1A