From 2618692a294fffdd40c9aacc4c7cd2e6c3e662cf Mon Sep 17 00:00:00 2001 From: Santiago Villa Date: Sat, 18 Jan 2025 16:36:08 +0100 Subject: [PATCH 1/2] spotify lab completed --- .DS_Store | Bin 0 -> 6148 bytes index.html | 108 +++++++++++++++++++++++++++++-- styles/style.css | 163 +++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 264 insertions(+), 7 deletions(-) create mode 100644 .DS_Store diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..50c27e7d42157bcfb77412dd29282b4ae01178b3 GIT binary patch literal 6148 zcmeHKI|>3p3{6x-u(7n9D|mxJ^aNhOFCr)wV!xH=@@T$%5M;FxY~%%!Hh}rb_T?ZaS;_tj{`*^* zr2If Wye2k*PDkG9K>iGvE;K6eYXu%tHx-5e literal 0 HcmV?d00001 diff --git a/index.html b/index.html index 0697f92fe..2f623ef6d 100644 --- a/index.html +++ b/index.html @@ -5,14 +5,108 @@ 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?

+
+
+ +

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

+
+
+ +
+
+ +
+
+
+ + + + + + + + + + + + + diff --git a/styles/style.css b/styles/style.css index 55efb32c6..7a103950d 100644 --- a/styles/style.css +++ b/styles/style.css @@ -6,3 +6,166 @@ Green: #00B172 White: #FFF */ + +body{ + margin: 0; + font-family: Arial, Helvetica, sans-serif; +} + +nav { + width: 100%; + position: fixed; + top: 0; + left: 0; + background-color: rgb(255, 255, 255); + padding: 15px; + display: flex; + justify-content: space-between; + align-items: center; + +} + +h1{ + font-size: 72px; + margin-top: 0px; +} + +nav img { + width: 150px; + height: auto; +} + +ul { + list-style: none; + display: flex; + + gap: 15px; + +} + + + +.intro-text { + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + flex-wrap: wrap; + color: white; + text-align: center; + margin-top: 81px; + background-image: url(/images/landing.jpg); + height: 600px; + background-position: center; + background-repeat: no-repeat; + background-size: cover; +} + +.intro-text h1 p{ + padding: 0; + font-size: 32px; +} + +h2 { + font-size: 30px; + text-decoration: underline; +} + +h3 { + font-size: 24px; +} + +h4 { + font-size: 18px; + text-decoration: underline; +} + +.feature { + + /* background-color: aqua;*/ +} + +.features-container { + text-align: center; +} + + +.feature img { + width: 150px; + height: auto; +} + +.flex-features { + display: flex; + justify-content: space-evenly; +} + + +/* .outer-flex, .inner-flex { + display: flex; +} */ + +.outer-flex { + margin: 0px 30px; +} + + +.inner-flex { + color: white; + padding: 4rem; + background-color: #00B172; + display: flex; + justify-content: space-around; + align-items: center; +} + +.inner-flex p { + max-width: 350px; +} + + +.flex-image { + width: 250px; +} + +.icon { + width: 100px; + height: 100px; +} + + + +/* .promotional { + color: white; + margin-top: 50px; + background-color: rgb(4, 180, 104); + display: flex; + justify-content: center; + align-items: center; + padding: 2rem; + + +} + +.promotional-item{ + width: 50%; + padding: 20px; + background-color: chocolate; + +} + +.promotional-item p { + width: 50%; + max-width: 350px; + +} + +.promotional-image { + background-color: indianred; + height: 550px; + border-radius: 12px; +} + +.app { + width: 50%; +} */ \ No newline at end of file From 4bea394b1027c6beee409e61779d94b6c43006c0 Mon Sep 17 00:00:00 2001 From: Santiago Villa Date: Mon, 20 Jan 2025 18:03:31 +0100 Subject: [PATCH 2/2] changes --- .DS_Store | Bin 6148 -> 6148 bytes index.html | 141 +++++++++++++++-------------------- styles/style.css | 187 ++++++++++++++++++++--------------------------- 3 files changed, 137 insertions(+), 191 deletions(-) diff --git a/.DS_Store b/.DS_Store index 50c27e7d42157bcfb77412dd29282b4ae01178b3..6483e60e7a7ec7f483cc1a8121a56a41805a4183 100644 GIT binary patch delta 334 zcmZoMXfc=|#>B)qu~2NHo}wr-0|Nsi1A_nqLn=dYQh9MfQcix-#*NDv>p?PX44DkM z42cZs$g)839Z3Z_nZ+dr2G;i=7gSqCvcn{QR6G z7&|d3EHkw{UO>b-Kd&S)GcUCWtRXWc6{sX8JTosPzuYOmG%uwXs5cB~6hwxDlY=u} zK%%U}m*0&Cd&(6us%kKg@4hR^5UIGJNC=H{! zC-%rlqWG#TxF|0tKQA4qf^p-CJzu~2NHo}wrt0|NsP3otOGG8Cs2C+8&P=jTi;RA*$I{D4Vjvnul= rmdystwM?7YIruq%+BPdPe`lV|FQUr{(s=-g87ABCNN - - Spotify Clone - + Spotify - Music for everyone + + -
+
-
-

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

+ + + +
+

What's on Spotify

+
+
+ music icon +

Millions of songs

There are millions of songs on Spotify

-
- +
+ music icon

HD Music

Listen to music as if you were listening live

-
- -

Stream Everywhere

+
+ music icon +

Stream everywhere

Stream music on your smartphone, tablet or computer

-
+
- - -
- -
- -
-

It’s as yeezy as Kanye West.

+
+
+

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 + + diff --git a/styles/style.css b/styles/style.css index 7a103950d..d165a454f 100644 --- a/styles/style.css +++ b/styles/style.css @@ -7,165 +7,138 @@ White: #FFF */ -body{ +body { + box-sizing: border-box; + font-family: "Poppins", sans-serif; + /* background-color: rgb(37, 151, 151); */ margin: 0; - font-family: Arial, Helvetica, sans-serif; + padding: 0; } nav { - width: 100%; + background-color: white; position: fixed; - top: 0; - left: 0; - background-color: rgb(255, 255, 255); - padding: 15px; display: flex; + flex-wrap: wrap; justify-content: space-between; align-items: center; - + top: 0; + width: 100%; + padding: 20px; + z-index: 99999; } -h1{ - font-size: 72px; - margin-top: 0px; -} -nav img { - width: 150px; - height: auto; -} -ul { - list-style: none; - display: flex; - - gap: 15px; +.links { + display: flex; + justify-content: flex-end; + list-style: none; } +.links li { + margin-right: 20px; +} +nav img { + width: 150px; + height: auto; +} -.intro-text { - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - flex-wrap: wrap; - color: white; - text-align: center; - margin-top: 81px; +#banner-image { + height: 700px; + margin: 96px auto; background-image: url(/images/landing.jpg); - height: 600px; + background-size: cover; background-position: center; background-repeat: no-repeat; - background-size: cover; + color: white; + text-align: center; } -.intro-text h1 p{ - padding: 0; - font-size: 32px; +.intro-content { + position: relative; + top:30vh; + margin: 0 auto; + max-width: 700px; } -h2 { - font-size: 30px; - text-decoration: underline; +.intro-content h1 { + margin: 20px; + font-size: 60px; } -h3 { +.intro-content p { font-size: 24px; + font-weight: 200; } -h4 { - font-size: 18px; - text-decoration: underline; -} - -.feature { - - /* background-color: aqua;*/ -} - -.features-container { +.features { text-align: center; } - -.feature img { - width: 150px; - height: auto; -} - -.flex-features { +.features-container { display: flex; - justify-content: space-evenly; + /* height: 300px; */ + justify-content: space-around; + align-items: stretch; + flex-wrap: wrap; } - -/* .outer-flex, .inner-flex { - display: flex; -} */ - -.outer-flex { - margin: 0px 30px; +.features h2 { + margin-bottom: 80px; + font-size: 36px; + text-decoration: underline; + text-decoration-color: #00B172; + text-decoration-thickness: 5px; + text-underline-offset: 5px } - -.inner-flex { - color: white; - padding: 4rem; - background-color: #00B172; +.single-feature { + padding: 30px; + border-radius: 20px; + border: 1px solid gray; + background-color: rgb(255, 255, 255); display: flex; - justify-content: space-around; + flex-direction: column; + justify-content: center; align-items: center; -} - -.inner-flex p { - max-width: 350px; -} - - -.flex-image { + text-align: center; width: 250px; + box-shadow: 10px 10px 1px #00B172; } -.icon { +.icons { width: 100px; - height: 100px; } - - -/* .promotional { - color: white; - margin-top: 50px; - background-color: rgb(4, 180, 104); +footer { + background-color: #00B172; + position: relative; display: flex; - justify-content: center; + justify-content: space-between; align-items: center; - padding: 2rem; - - + margin-top: 50px; + padding: 85px; } -.promotional-item{ - width: 50%; - padding: 20px; - background-color: chocolate; - +footer article { + max-width: 400px; } -.promotional-item p { - width: 50%; - max-width: 350px; - +.spotify-logo { + height: 100px; + width: 100px; + position: absolute; + top:47%; + left: 47%; } -.promotional-image { - background-color: indianred; - height: 550px; - border-radius: 12px; +.spotify-image { + height: 415px; } -.app { - width: 50%; -} */ \ No newline at end of file +.article-wrapper { + color: white; +}