From 6465b2fff598b335df213c5bb80a6450a2cd3347 Mon Sep 17 00:00:00 2001 From: carlos Date: Tue, 6 Jul 2021 20:51:23 -0500 Subject: [PATCH 1/4] I1 | Finished iteration 1 --- index.html | 38 ++++++++++++++++++++++++++------------ styles/style.css | 19 ++++++++++++++++++- 2 files changed, 44 insertions(+), 13 deletions(-) diff --git a/index.html b/index.html index 4a81684..088fbc3 100644 --- a/index.html +++ b/index.html @@ -1,18 +1,32 @@ - - - - - Spotify Clone - - - - Premium Discover Help Download Music for everyone. Spotify is now free on mobile, tablet and computer. Listen to the + + + Spotify | Clone + + + + +
+ +
+ +
+ +
+ + + + \ No newline at end of file diff --git a/styles/style.css b/styles/style.css index 68b1e59..f59dcf7 100644 --- a/styles/style.css +++ b/styles/style.css @@ -3,4 +3,21 @@ Colors: Text: 1A1A1A Green: #00B172 White: #FFF -*/ \ No newline at end of file +*/ +.blue{ + position: fixed; + background: url(../images/spotify-logo.png) ; + background-size: contain; + background-position: left; + background-repeat: no-repeat; + width: 98vw; +} +.green{ + display: flex; + justify-content: flex-end; +} +a{ + margin-left: 10px; + text-decoration: none; + color:black; +} \ No newline at end of file From 923c493a64341705a8a2ae496874ffb49e494369 Mon Sep 17 00:00:00 2001 From: carlos Date: Tue, 6 Jul 2021 23:22:19 -0500 Subject: [PATCH 2/4] fix,I2 | Fixed some errors whit navegation. Added image --- index.html | 27 ++++++++++++++++++++++++--- styles/style.css | 36 ++++++++++++++++++++++++++++++++---- 2 files changed, 56 insertions(+), 7 deletions(-) diff --git a/index.html b/index.html index 088fbc3..6ac9d9b 100644 --- a/index.html +++ b/index.html @@ -8,8 +8,10 @@
+ +
-
+
+
+ +
+ +
Music for everyone. +

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

+

Texto de prueba para probar el position:fix haciendo scroll :)

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius reprehenderit blanditiis pariatur dolores dicta vero, qui necessitatibus mollitia. Rerum, blanditiis fuga. Sunt impedit provident, placeat laborum ut corrupti? Quidem, laborum.

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius reprehenderit blanditiis pariatur dolores dicta vero, qui necessitatibus mollitia. Rerum, blanditiis fuga. Sunt impedit provident, placeat laborum ut corrupti? Quidem, laborum.

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius reprehenderit blanditiis pariatur dolores dicta vero, qui necessitatibus mollitia. Rerum, blanditiis fuga. Sunt impedit provident, placeat laborum ut corrupti? Quidem, laborum.

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius reprehenderit blanditiis pariatur dolores dicta vero, qui necessitatibus mollitia. Rerum, blanditiis fuga. Sunt impedit provident, placeat laborum ut corrupti? Quidem, laborum.

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius reprehenderit blanditiis pariatur dolores dicta vero, qui necessitatibus mollitia. Rerum, blanditiis fuga. Sunt impedit provident, placeat laborum ut corrupti? Quidem, laborum.

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius reprehenderit blanditiis pariatur dolores dicta vero, qui necessitatibus mollitia. Rerum, blanditiis fuga. Sunt impedit provident, placeat laborum ut corrupti? Quidem, laborum.

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius reprehenderit blanditiis pariatur dolores dicta vero, qui necessitatibus mollitia. Rerum, blanditiis fuga. Sunt impedit provident, placeat laborum ut corrupti? Quidem, laborum.

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius reprehenderit blanditiis pariatur dolores dicta vero, qui necessitatibus mollitia. Rerum, blanditiis fuga. Sunt impedit provident, placeat laborum ut corrupti? Quidem, laborum.

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius reprehenderit blanditiis pariatur dolores dicta vero, qui necessitatibus mollitia. Rerum, blanditiis fuga. Sunt impedit provident, placeat laborum ut corrupti? Quidem, laborum.

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius reprehenderit blanditiis pariatur dolores dicta vero, qui necessitatibus mollitia. Rerum, blanditiis fuga. Sunt impedit provident, placeat laborum ut corrupti? Quidem, laborum.

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius reprehenderit blanditiis pariatur dolores dicta vero, qui necessitatibus mollitia. Rerum, blanditiis fuga. Sunt impedit provident, placeat laborum ut corrupti? Quidem, laborum.

- \ No newline at end of file diff --git a/styles/style.css b/styles/style.css index 904e3ae..5fcf983 100644 --- a/styles/style.css +++ b/styles/style.css @@ -49,3 +49,82 @@ a{ justify-content: center; text-align: center; } +.orange{ + display: flex; + flex-direction: row; + margin: 50px 0px; + justify-content: space-evenly; + +} +.red{ + font-size: 3vw; + text-align: center; + margin-top: 50px; +} +.songs{ + background: url(../images/music-icon.png); + background-repeat: no-repeat; + background-position: center; + height: 60px; + width: 200px; + background-size: contain; + margin-bottom: 20px; +} +.first_con{ + color: #00B172; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} +.first_con p{ + font-size: 1.5vw; + color: black; + width: 250px; +} +.hd{ + background: url(../images/high-quality-icon.png); + background-repeat: no-repeat; + background-position: center; + height: 60px; + width: 200px; + background-size: contain; + margin-bottom: 20px; + +} +.second_con{ + color: #00B172; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} +.second_con p{ + font-size: 1.5vw; + text-align: center; + color: black; + width: 250px; +} +.stream{ + background: url(../images/devices-icon.png); + background-repeat: no-repeat; + background-position: center; + height: 60px; + width: 200px; + background-size: contain; + margin-bottom: 20px; +} +.third_con{ + color: #00B172; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} +.third_con p{ + font-size: 1.5vw; + text-align: center; + color: black; + width: 250px; +} + From 5afe23944f63ae8511728eebbdba233adcb1c30d Mon Sep 17 00:00:00 2001 From: carlos Date: Wed, 7 Jul 2021 20:53:57 -0500 Subject: [PATCH 4/4] I4 | Page almost done --- index.html | 34 ++++++++++++------------- styles/style.css | 65 +++++++++++++++++++++++++++++++++++++++++++++--- 2 files changed, 78 insertions(+), 21 deletions(-) diff --git a/index.html b/index.html index 4bbb222..4b84c09 100644 --- a/index.html +++ b/index.html @@ -57,22 +57,22 @@
-

Texto de prueba para probar el position:fix haciendo scroll :)

-

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius reprehenderit blanditiis pariatur dolores dicta vero, qui necessitatibus mollitia. Rerum, blanditiis fuga. Sunt impedit provident, placeat laborum ut corrupti? Quidem, laborum.

-

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius reprehenderit blanditiis pariatur dolores dicta vero, qui necessitatibus mollitia. Rerum, blanditiis fuga. Sunt impedit provident, placeat laborum ut corrupti? Quidem, laborum.

-

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius reprehenderit blanditiis pariatur dolores dicta vero, qui necessitatibus mollitia. Rerum, blanditiis fuga. Sunt impedit provident, placeat laborum ut corrupti? Quidem, laborum.

-

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius reprehenderit blanditiis pariatur dolores dicta vero, qui necessitatibus mollitia. Rerum, blanditiis fuga. Sunt impedit provident, placeat laborum ut corrupti? Quidem, laborum.

-

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius reprehenderit blanditiis pariatur dolores dicta vero, qui necessitatibus mollitia. Rerum, blanditiis fuga. Sunt impedit provident, placeat laborum ut corrupti? Quidem, laborum.

-

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius reprehenderit blanditiis pariatur dolores dicta vero, qui necessitatibus mollitia. Rerum, blanditiis fuga. Sunt impedit provident, placeat laborum ut corrupti? Quidem, laborum.

-

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius reprehenderit blanditiis pariatur dolores dicta vero, qui necessitatibus mollitia. Rerum, blanditiis fuga. Sunt impedit provident, placeat laborum ut corrupti? Quidem, laborum.

-

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius reprehenderit blanditiis pariatur dolores dicta vero, qui necessitatibus mollitia. Rerum, blanditiis fuga. Sunt impedit provident, placeat laborum ut corrupti? Quidem, laborum.

-

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius reprehenderit blanditiis pariatur dolores dicta vero, qui necessitatibus mollitia. Rerum, blanditiis fuga. Sunt impedit provident, placeat laborum ut corrupti? Quidem, laborum.

-

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius reprehenderit blanditiis pariatur dolores dicta vero, qui necessitatibus mollitia. Rerum, blanditiis fuga. Sunt impedit provident, placeat laborum ut corrupti? Quidem, laborum.

-

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius reprehenderit blanditiis pariatur dolores dicta vero, qui necessitatibus mollitia. Rerum, blanditiis fuga. Sunt impedit provident, placeat laborum ut corrupti? Quidem, laborum.

+
+
+
+
+


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 + \ No newline at end of file diff --git a/styles/style.css b/styles/style.css index 5fcf983..708ca79 100644 --- a/styles/style.css +++ b/styles/style.css @@ -4,9 +4,6 @@ Text: 1A1A1A Green: #00B172 White: #FFF */ -body{ - margin: 0 0; -} section.bg_w{ position: fixed; top: 0px; @@ -41,6 +38,7 @@ a{ justify-content: center; align-items: center; font-size: 5vw; + background-repeat: no-repeat; } .everywhere{ font-size: 2vw; @@ -127,4 +125,63 @@ a{ color: black; width: 250px; } - +.marine{ + width: 90vw; + height: 700px; + margin: 0 auto; +} +div.bg_green{ + background: #00B172; + width: 100%; + height: 100%; +} +div.app{ + background-image: url(../images/spotify-app.jpg); + height: 100%; + width: 90%; + background-size: 30%; + background-repeat: no-repeat; + background-position-x: right; + background-position-y: center; + margin: -25px auto; +} +.text_bg{ + color: white; + width: 450px; + height: 90%; +} +.kanye{ + color: white; + font-weight: 800; + font-size: 35px; + margin-top: 0px; + margin-bottom: 50px; +} +.search{ + font-weight: 800; + font-size: 35px; +} +.search_p{ + font-size: 20px; + font-weight: 200; +} +.browse{ + font-weight: 800; + font-size: 35px; +} +.browse_p{ + font-size: 20px; + font-weight: 200; +} +.discover{ + font-weight: 800; + font-size: 35px; +} +.discover_p{ + font-size: 20px; + font-weight: 200; +} +.logo_w{ + background: url(../images/spotify-icon-white.png); + background-size: contain; +} \ No newline at end of file