From 4d646dbe21c5addf824358eb160ea360e95c9100 Mon Sep 17 00:00:00 2001 From: Estela Date: Wed, 25 Sep 2024 09:18:41 +0100 Subject: [PATCH 1/3] primera iteracion --- index.html | 38 +++++++++--- styles/style.css | 155 +++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 185 insertions(+), 8 deletions(-) diff --git a/index.html b/index.html index da7db46f..b9ebf044 100644 --- a/index.html +++ b/index.html @@ -4,13 +4,35 @@ Instagram Clone - + - Instagram Capture and Share the World's Moments Instagram is a fast, beautiful and fun way to share your life with - friends and family. Take a picture or video, choose a filter to transform its look and feel, then post to Instagram - — it's that easy. You can even share to Facebook, Twitter, Tumblr and more. It's a new way to see the world. - Oh yeah, did we mention it's free? Download on the App Store Get it on Google Play About Us Support Blog Press API - Jobs Privacy Terms © 2014 Instagram - - +
+ +
+ + +
+
+ +
+ +
+ iPhone displaying Instagram +
+ + +
+

Capture and Share the World's Moments

+

+ Instagram is a fast, beautiful, and fun way to share your life with friends and + family. Take a picture or video, choose a filter to transform its look and feel, then post to Instagram + — it's that easy. You can even share to Facebook, Twitter, Tumblr, and more. It's a new way to see the + world. +

+ Oh yeah, did we mention it's free? +

+
+ App Store Button + Google Play Button Date: Wed, 25 Sep 2024 09:32:29 +0100 Subject: [PATCH 2/3] segunda iteracion --- index.html | 35 +++++++++++++++++---- styles/style.css | 80 +++++++++++++++++++++++++++++++++++++----------- 2 files changed, 91 insertions(+), 24 deletions(-) diff --git a/index.html b/index.html index b9ebf044..b2b12e3b 100644 --- a/index.html +++ b/index.html @@ -11,17 +11,20 @@
- + +
- +
- iPhone displaying Instagram + Phones displaying Instagram
- +

Capture and Share the World's Moments

@@ -32,7 +35,27 @@

Capture and Share the World's Moments



Oh yeah, did we mention it's free?

+ +
- App Store Button - Google Play Button + Get it on Google Play +
+
+
+ + + diff --git a/styles/style.css b/styles/style.css index b0eca35d..d9660bac 100644 --- a/styles/style.css +++ b/styles/style.css @@ -13,23 +13,22 @@ body { /* Header styling */ header { - background: linear-gradient(to bottom, #06365f, #1c5380); /* Gradient from top to bottom */ - height: 350px; /* Larger header height */ + background: linear-gradient(to bottom, #3a94e2, #06365f); /* Adjust gradient colors for better contrast */ + height: 400px; /* Increased header height for better spacing */ width: 100%; /* Full width */ - text-align: center; - position: relative; /* Position relative for logo/button */ + position: relative; } .header-content { position: absolute; - top: 50%; + top: 50%; /* Center vertically within the header */ left: 50%; - transform: translate(-50%, -50%); /* Center the logo and button */ + transform: translate(-50%, -50%); /* Center horizontally */ text-align: center; } .header-logo { - height: 80px; /* Larger logo */ + height: 80px; /* Logo size */ } .login-btn { @@ -40,7 +39,10 @@ header { border-radius: 5px; font-size: 14px; cursor: pointer; - margin-top: 20px; + margin-top: 15px; + display: inline-flex; + align-items: center; + justify-content: center; } .login-btn:hover { @@ -52,12 +54,13 @@ header { display: flex; justify-content: center; align-items: flex-start; - margin-top: -150px; /* Pull the content up to overlap the header */ + margin-top: -120px; /* Reduced overlap for a cleaner look */ position: relative; - z-index: 2; /* Ensure content floats above the header */ + z-index: 2; /* Ensures content floats above header */ + padding: 20px; } -/* Left Section */ +/* Left Section (Phone Image) */ .left-section { flex: 1; display: flex; @@ -70,7 +73,7 @@ header { margin-right: 40px; } -/* Right Section */ +/* Right Section (Text Box) */ .right-section { flex: 1; max-width: 400px; @@ -78,13 +81,13 @@ header { padding: 30px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); - text-align: left; + margin-left: 40px; } h1 { font-size: 24px; color: #333; - margin-bottom: 10px; + margin-bottom: 15px; } p { @@ -96,7 +99,7 @@ p { .app-buttons { margin-top: 20px; display: flex; - justify-content: start; + justify-content: flex-start; } .appstore-btn, @@ -105,7 +108,11 @@ p { margin-right: 10px; } -/* Footer styling */ +.googleplay-btn { + margin-right: 0; +} + +/* Footer Styling */ footer { text-align: center; padding: 20px; @@ -137,6 +144,7 @@ footer p { .main-container { flex-direction: column; align-items: center; + margin-top: -80px; /* Less overlap on smaller screens */ } .left-section { @@ -145,16 +153,51 @@ footer p { } .iphone-image { + max-width: 100%; /* Ensure image scales down on smaller screens */ margin-right: 0; } .right-section { max-width: 100%; - margin-top: -60px; /* Less overlap on smaller screens */ + margin-left: 0; } - .header-content { + .app-buttons { + justify-content: center; flex-direction: column; + align-items: center; + } + + .appstore-btn, + .googleplay-btn { + width: 100%; + margin-bottom: 10px; + } + + .googleplay-btn { + margin-bottom: 0; + } +} + +@media (max-width: 480px) { + header { + height: 300px; /* Smaller header height for mobile */ + } + + .header-logo { + height: 60px; /* Slightly smaller logo */ + } + + .main-container { + margin-top: -60px; /* Reduced overlap for mobile */ + } + + h1 { + font-size: 20px; + } + + p { + font-size: 14px; } } @@ -163,3 +206,4 @@ footer p { + From 1dc43d6dd9a1ca92f0dd359e034ac3619acb87ff Mon Sep 17 00:00:00 2001 From: Estela Date: Thu, 26 Sep 2024 14:17:53 +0100 Subject: [PATCH 3/3] iteracion --- styles/style.css | 22 ++++++++++++++-------- 1 file changed, 14 insertions(+), 8 deletions(-) diff --git a/styles/style.css b/styles/style.css index d9660bac..aae362f7 100644 --- a/styles/style.css +++ b/styles/style.css @@ -21,8 +21,8 @@ header { .header-content { position: absolute; - top: 50%; /* Center vertically within the header */ - left: 50%; + top: 68%; /* Center vertically within the header */ + left: 60%; transform: translate(-50%, -50%); /* Center horizontally */ text-align: center; } @@ -32,7 +32,7 @@ header { } .login-btn { - background-color: #3897f0; + background: linear-gradient(to bottom, #3a94e2, #06365f); /* Adjust gradient colors for better contrast */ color: white; padding: 10px 20px; border: none; @@ -42,7 +42,12 @@ header { margin-top: 15px; display: inline-flex; align-items: center; - justify-content: center; + justify-content: space-between; + position: absolute; + top: 30%; /* Center vertically within the header */ + left: 130%; + transform: translate(-50%, -50%); /* Center horizontally */ + text-align: center; } .login-btn:hover { @@ -54,7 +59,7 @@ header { display: flex; justify-content: center; align-items: flex-start; - margin-top: -120px; /* Reduced overlap for a cleaner look */ + margin-top: -200px; /* Reduced overlap for a cleaner look */ position: relative; z-index: 2; /* Ensures content floats above header */ padding: 20px; @@ -64,7 +69,7 @@ header { .left-section { flex: 1; display: flex; - justify-content: flex-end; + justify-content: space-around; } .iphone-image { @@ -79,9 +84,10 @@ header { max-width: 400px; background-color: white; padding: 30px; - border-radius: 8px; + border-radius: 5px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); - margin-left: 40px; + margin-left: 200px; + margin-top: 120px; } h1 {