From bcfcf4cb39aaa086e7efc0eab3c6fe3859b67e7a Mon Sep 17 00:00:00 2001 From: FabioMiranda-123 Date: Thu, 23 Jan 2025 18:55:31 +0000 Subject: [PATCH] Done Extra --- index.html | 51 ++++++++++++++++++++--- styles/style.css | 103 +++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 149 insertions(+), 5 deletions(-) diff --git a/index.html b/index.html index da7db46ff..f18e6fafd 100644 --- a/index.html +++ b/index.html @@ -5,12 +5,53 @@ 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 +
+
+ Instagram Logo + +
+
+ +
+ Phones with 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?

+
+ + +
+
+
+
+ + diff --git a/styles/style.css b/styles/style.css index c4865cc6d..9a94385fd 100644 --- a/styles/style.css +++ b/styles/style.css @@ -8,3 +8,106 @@ body { font: 200 16px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif; margin: 0; } + +header { + display: flex; + padding: 60px 25px; + justify-content: space-between; + width: 100%; + height: 150px; + background: linear-gradient(to bottom, #5c7e9b, #26425b); +} + +.top { + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + width: 100%; + padding-top: 60px; + margin-left: 370px; + gap: 60px; +} + +header>div>button { + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + border: 1px solid #346289; + box-shadow: #346289; + border-radius: 5px; + color: #f9fcfd; + font-size: 20px; + margin-right: 0px; + background: linear-gradient(to bottom, #668eb1, #355c7d); + margin-right: 10px; +} + +.middleImages { + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + margin-top: -40px; +} + +.middleImages>img{ + margin-top: -120px; + height: 600px; +} + +.info { + background-color: white; + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + padding: 0px 40px 40px 40px ; + margin-left: 55px; + width:430px; + height: 470px; +} + +h2 { + font-size: 30px; + color: #1c5380; +} + +.buttons { + display: flex; + flex-direction: row; + align-items:flex-start; + justify-content: start; + margin-top: 45px; +} + +.buttons>button { + background: none; + border: none; + margin-right: 25px; +} + +footer>ul { + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + list-style: none; + margin: 50px 50px; + padding: 10px 20px; +} + +footer>ul>li { + text-transform: uppercase; + font-size: 14px; + text-align: center; + font-weight: bold; + color: grey; + padding: 10px;; +} + +footer>ul>li>a { + color: #1c5380; + text-decoration: none; +} \ No newline at end of file