diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 000000000..6b665aaa0 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} diff --git a/index.html b/index.html index 0697f92fe..245aa66b9 100644 --- a/index.html +++ b/index.html @@ -6,13 +6,96 @@ 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?

+
+
+
+
+ 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 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. +

+
+
+ spotify-icon-white +
+
+ +
+

Discover

+

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

+
+
+
+ spotify app +
+
diff --git a/styles/style.css b/styles/style.css index 55efb32c6..7d6d53fcb 100644 --- a/styles/style.css +++ b/styles/style.css @@ -6,3 +6,211 @@ Green: #00B172 White: #FFF */ + +* { + padding: 0; + margin: 5px; + box-sizing: border-box; + font-family: "Gotham Rounded", sans-serif; +} + +/* SPOTIFY NAVIGATION AND SPOTIFY LOOG --START */ +.header { + height: 100px; + display: flex; + justify-content: space-between; + align-items: center; + background-color: white; +} + +.nav > a { + color: #1a1a1a; + text-decoration: none; + font-style: normal; + margin: 10px; + padding-right: 30px; + font-weight: 210; + font-size: 25px; +} + +.logo { + width: 200px; + height: 70px; + overflow: hidden; + margin: 20px; +} + +.logo img { + max-width: 100%; + height: auto; + /* display: block; */ +} + +/* SPOTIFY NAVIGATION AND SPOTIFY LOOG -- END */ + +/* BACKGROUND BANNER IMAGE (HERO) AND HERO TEXT --- START*/ +.hero { + /* display: flex; */ + height: 500px; + background-image: url("../images/landing.jpg"); + background-repeat: no-repeat; + background-position: center; + background-size: cover; + justify-content: center; + align-items: center; +} +.hero-header { + text-align: center; + padding-top: 180px; + /* font-family: "Calibri"; */ + font-weight: 150; + font-size: 100px; + color: white; +} + +.hero-paragraph { + width: 800px; + text-align: center; + color: white; + font-weight: 100; + font-size: 30px; + margin: 0 auto; +} + +/* BACKGROUND BANNER IMAGE (HERO) AND HERO TEXT --- END*/ + +/* FEATURES ON SPOTIFY -- START */ +.on-spotify { + /* border: 1px solid red; */ + text-align: center; + padding: 20px; + margin-top: 40px; +} +.on-spotify > p { + font-size: 30px; + /* font-weight: 200; */ +} + +.on-spotify-hr { + width: 280px; + margin: 20px auto; + height: 5px; + background: #00b172; +} + +.features-container { + display: flex; +} +.feature { + /* border: 2px solid red; */ + height: 350px; + width: 500px; + text-align: center; + padding-top: 50px; +} + +.feature > img { + max-width: 800px; + height: 100px; + margin: 5px auto; + display: block; +} + +.feature > h4 { + color: #00b172; + font-size: 30px; + font-weight: 400; +} + +.feature > p { + width: 240px; + margin: 0 auto; + padding: 20px; + font-size: 17px; + font-weight: 200; +} + +/* FEATURES ON SPOTIFY -- END */ + +/* GREEN CONTAINER -- START */ +.green-container { + display: flex; + background-color: #00b172; + /* height: 1000px; */ + /* width: 100%px; */ +} + +.kanye-div { + /* border: 2px solid red; */ + /* flex-grow: 1; */ +} +.app-div { + /* border: 2px solid red; */ + /* flex-grow: 1; */ +} + +.app-div > img { + max-width: 800px; + height: 800px; + display: block; + margin: 100px auto; +} + +.kanye-div { + padding-left: 90px; + padding-top: 70px; +} + +.kanye-text { + color: white; + font-size: 30px; + /* margin-bottom: 30px; */ +} + +.kanye-hr { + height: 5px; + background: white; + width: 420px; + margin-bottom: 40px; +} + +.content-h4 { + color: white; + font-size: 40px; + font-weight: 300; + margin-bottom: 25px; +} + +.content { + height: 200px; + /* width: 500px; */ + /* border: 1px solid blue; */ +} + +.browse { + display: flex; + height: 200px; + width: 700px; + /* border: 1px solid blue; */ + /* align-items: center; */ + justify-content: space-between; +} + +.browse > p { + width: 300px; + /* border: 1px solid red; */ + padding-top: 50px; +} +.browse-image-container > img { + max-width: 100%; + height: 100px; + display: block; +} + +.content-p { + color: white; + font-weight: 200; + font-size: 20px; +} + +/* GREEN CONTAINER -- END */