From 812cbcbed79605c629b93bd0ab809af65f3ad723 Mon Sep 17 00:00:00 2001 From: Alejandra Rodriguez Date: Tue, 8 Jul 2025 17:06:27 +0200 Subject: [PATCH 1/4] done --- index.html | 82 ++++++++++++++-- styles/style.css | 240 +++++++++++++++++++++++++++++++++++++++++++++-- 2 files changed, 309 insertions(+), 13 deletions(-) diff --git a/index.html b/index.html index 0697f92fe..1e312653e 100644 --- a/index.html +++ b/index.html @@ -4,15 +4,83 @@ + + + + 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. + +
+ + +
+

Music for everyone.

+

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

+
+
+ +
+

What’s on Spotify?

+
+
+
+ speaker icon +

Millions of Songs

+

There are millions of songs on Spotify

+
+
+ hd icon +

HD Music

+

Listen to music as if you were listening live

+
+
+ devices icon +

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 app + Spotify app +
+ diff --git a/styles/style.css b/styles/style.css index 55efb32c6..ce7106700 100644 --- a/styles/style.css +++ b/styles/style.css @@ -1,8 +1,236 @@ -/* -Colors: +@import url('https://fonts.googleapis.com/css?family=Montserrat:700|Montserrat:100,300,700'); -Text: 1A1A1A -Green: #00B172 -White: #FFF +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} -*/ +html, body { + font-family: Montserrat, sans-serif; + color: #FFF; +} + +h1, h2, h3, h4, h5, h6 { + font-family: Montserrat, sans-serif; +} + +h2{ + font-size: 40px; + font-weight: 650; +} + +h3{ + font-size: 40px; + font-weight: 650; +} + +h4{ + font-size: 35px; +} + +hr{ + padding: 2px; + margin: 20px auto 30px; + box-shadow: none; + border: none; +} + +.navbar{ + position:fixed; + width: 100%; + height: 115px; + display: flex; + background-color: #FFF; + justify-content: space-between; + align-items: center; + padding: 10px 0; + z-index: 1000; + /* border: 5px solid yellow; */ +} + +.navbar img { + height: 5em; + /* border: 1px solid black; */ + margin-left: 50px; + +} + +.nav-links { + display: flex; + justify-content: space-evenly; + align-items: center; + width: 40%; + height: auto; + /* border: 1px solid black; */ + color: black; +} + +.nav-links li { + font-size: 24px; + list-style-type: none; + text-align: center; +} + +.hero{ + /* border: 5px solid aquamarine; */ + background-image: url("../images/landing.jpg"); + height: 1200px; + /* height: 100vh; */ + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + text-align: center; + background-size: cover; + background-position: center; +} + +header h1 { + font-size: 90px; + font-weight: 600; + margin-top: 20px; + /* border: 1px solid #FFF; */ +} + +header p { + font-size: 35px; + font-weight: 300; + line-height: 1.6; + margin-top: 20px; + transform: scaleY(1.1); +} + +#spotify-content { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + flex-wrap: wrap; + margin-top: 30px; +} + +#spotify-content h3{ + color:black; + text-align: center; + transform: scaleY(1.1); +} + +#spotify-content hr{ + background-color:#00B172; + width: 25%; +} + +#spotify-content div{ + color: black; + width: 100%; + display: flex; + flex-direction: row; + place-content: center space-evenly; + align-items: center; + height: 400px; + margin-top: 30px; + /* border: 5px solid orange; */ +} + +#spotify-content div article{ + display: flex; + flex-direction: column; + align-items: center; + height: 100%; + width:100%; + /* border: 5px solid blueviolet; */ +} + +#spotify-content div article img{ + height: 130px; + width: 150px; + margin-top: 20px; + /* border: 2px solid purple; */ +} + +#spotify-content div article h4{ + text-align: center; + color:#00B172; + margin-top: 15px; +} + +.text{ + font-size: 25px; + font-weight: 300; +} + +#spotify-content > div > article > p{ + /* border: 2px solid brown; */ + text-align: center; + /* text-wrap: balance; */ + max-width: 300px; + margin-top: 30px; + /* margin-bottom:10px ; */ +} + +#spotify-functions{ + position:relative; + margin: 0 50px 60px ; + padding: 80px 120px; + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + background-color: #00B172; +} + +.left-block{ + display: flex; + flex-flow: column wrap; + /* justify-content: left; */ + /* align-items: flex-start; */ + align-content: flex-start; + /* border:1px solid yellow; */ +} + +.header-underlined{ + display: flex; + flex-direction: column; + margin-bottom: 25px; + /* border:1px solid black; */ +} + +#spotify-functions hr{ + background-color: #FFF; + width: 100%; +} +#spotify-functions div article { + /* border:1px solid violet; */ + margin-bottom: 20px; +} + +#spotify-functions div article h4{ + margin: 25px 0; +} + +#spotify-functions div article p{ + color: #FFF; + display: flex; + flex-direction: row; + background-color: #00B172; + width: 410px; + line-height: 1.5; +} + +.image-spotify-app { + /* position:absolute; + top: 15%; + left: 30%; */ + margin-top: 60px; + width: 450px; + height: 750px; +} + +.image-spotify-white-icon{ + position:absolute; + top: 43%; + left: 42%; + width: 170px; + height: 170px; +} \ No newline at end of file From 4489422e30762a977603b05bdba7448dd98c003f Mon Sep 17 00:00:00 2001 From: Alejandra Rodriguez Date: Tue, 8 Jul 2025 17:13:43 +0200 Subject: [PATCH 2/4] deleted unnecesary links to google fonts in html --- index.html | 3 --- 1 file changed, 3 deletions(-) diff --git a/index.html b/index.html index 1e312653e..3456a1c5a 100644 --- a/index.html +++ b/index.html @@ -5,9 +5,6 @@ - - - Spotify Clone From d0640c3a5f4b0d2acc85fd13658e795f55b32fff Mon Sep 17 00:00:00 2001 From: Alejandra Rodriguez Date: Tue, 8 Jul 2025 17:15:25 +0200 Subject: [PATCH 3/4] Changed text color from black to #1a1a1a --- styles/style.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/styles/style.css b/styles/style.css index ce7106700..585ff4860 100644 --- a/styles/style.css +++ b/styles/style.css @@ -63,7 +63,7 @@ hr{ width: 40%; height: auto; /* border: 1px solid black; */ - color: black; + color: #1a1a1a; } .nav-links li { @@ -111,7 +111,7 @@ header p { } #spotify-content h3{ - color:black; + color:#1a1a1a; text-align: center; transform: scaleY(1.1); } @@ -122,7 +122,7 @@ header p { } #spotify-content div{ - color: black; + color: #1a1a1a; width: 100%; display: flex; flex-direction: row; From aacd2ab48714f7e1a73b4126830b1b92593c214c Mon Sep 17 00:00:00 2001 From: Alejandra Rodriguez Date: Tue, 8 Jul 2025 17:25:44 +0200 Subject: [PATCH 4/4] Adding gitiignore file --- .gitignore | 1 + 1 file changed, 1 insertion(+) create mode 100644 .gitignore diff --git a/.gitignore b/.gitignore new file mode 100644 index 000000000..94fb85b5b --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +spotify-prototype.pdf