From fdcc588fb2d8e02322158f07c327c178567ac4b4 Mon Sep 17 00:00:00 2001 From: Haluk Joshua Gurel Date: Tue, 4 Feb 2025 11:57:21 +0100 Subject: [PATCH] done --- index.html | 44 +++++++++++++++++--- styles/style.css | 104 ++++++++++++++++++++++++++++++++++++++++++++--- 2 files changed, 136 insertions(+), 12 deletions(-) diff --git a/index.html b/index.html index da7db46ff..99aea7dc6 100644 --- a/index.html +++ b/index.html @@ -4,13 +4,45 @@ 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 +
+ +
+ + +
+ +
+
+ Phone Screen +
+
+

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 +
+
+
+ +
+ diff --git a/styles/style.css b/styles/style.css index c4865cc6d..a5057967d 100644 --- a/styles/style.css +++ b/styles/style.css @@ -1,10 +1,102 @@ -/* -Colors to use: -dark blue: #06365f -light blue: #1c5380 -*/ - body { font: 200 16px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif; margin: 0; + padding: 0; +} + +.container { + margin: 0 auto; + padding: 20px; + text-align: center; + background: linear-gradient(to bottom, #3897f0, #3897f0 50%, #f3f4f7 50%, #f3f4f7); +} + +.header { + display: flex; + justify-content: flex-end; + align-items: center; + padding: 10px 20px; +} + +.logo { + height: 40px; +} + +.login-button { + display: flex; + align-items: center; + background: linear-gradient(#82c0fa, #3897f07a); + color: white; + border: 5px, solid, #3897f03c; + border-radius: 5%; + cursor: pointer; + font-size: 14px; + margin-left: 20px; +} + +button > img { + padding-right: 10px; +} + +.content { + display: flex; + justify-content: center; + align-items: center; + padding: 20px; +} + +.phone-display { + display: flex; + position: relative; + margin-right: 30px; +} + +.phone { + height: 400px; +} + +.text-section { + max-width: 400px; + text-align: left; + background-color: white; + border-radius: 2%; + padding: 0 20px; +} + +.text-section h1 { + font-size: 24px; + color: #06365f; + margin-bottom: 16px; +} + +.text-section p { + color: black; + font-size: 14px; + margin-bottom: 12px; + line-height: 1.6; +} + +.download-buttons img { + height: 40px; + margin: 8px; + cursor: pointer; +} + +footer { + margin-top: 30px; + border-top: 1px solid #ddd; + padding-top: 20px; + font-size: 12px; + color: #999; +} + +footer nav a { + color: #1c5380; + margin: 0 10px; + text-decoration: none; + text-transform: uppercase; +} + +footer nav a:hover { + text-decoration: underline; }