From 181630b2486bf74657aef8bce583999fc4f8d270 Mon Sep 17 00:00:00 2001 From: KevinJG994 Date: Wed, 15 Jan 2025 15:40:59 +0000 Subject: [PATCH] Done --- index.html | 76 ++++++++++++++++++++++++++++++------- styles/style.css | 99 +++++++++++++++++++++++++++++++++++++++++++++--- 2 files changed, 156 insertions(+), 19 deletions(-) diff --git a/index.html b/index.html index da7db46ff..540043508 100644 --- a/index.html +++ b/index.html @@ -1,16 +1,64 @@ - - - - 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 Clone + + + + +
+
+ phone +
+ +
+
+ Logo 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?

+
+ +
+ badge-iphone + + badge-android +
+
+
+ + + + + \ No newline at end of file diff --git a/styles/style.css b/styles/style.css index c4865cc6d..cfe29545d 100644 --- a/styles/style.css +++ b/styles/style.css @@ -1,10 +1,99 @@ -/* -Colors to use: -dark blue: #06365f -light blue: #1c5380 -*/ +html { + background: url('../images/bgtile.png'); + background-size: 100% 50vh; + background-repeat: no-repeat; + +} body { font: 200 16px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif; margin: 0; } + +.container { + display: flex; + justify-content: space-between; + align-items: center; +} + +header { + padding: 100px; +} + +main { + display: flex; + flex-direction: column; + padding: 100px 100px 100px 0; +} + +.logo-container { + display: flex; + justify-content: space-between; + align-items: center; + width: 100%; +} + +.logo-instagram { + width: 300px; +} + +.logo-container button { + padding: 5px; + width: 90px; + display: flex; + align-items: center; + justify-content: space-around; + color: #fff; + background-color: #1c5380; + border-radius: 3px; + border: 1px solid #fff; +} + +.content-container { + background-image: url('../images/frame.png'); + background-size: cover; + background-repeat: no-repeat; + width: 100%; + padding: 40px; +} + +.content-container h1 { + color: #06365f; + font-size: 1.8rem; +} + +.content-container p span { + font-weight: bold; +} + +.button-container { + width: 100%; + display: flex; + justify-content: center; +} + +.button-container img { + margin: 0 30px; +} + +footer { + display: flex; + flex-direction: row; + justify-content: center; + padding: 40px; +} + +.references-links { + display: flex; + list-style: none; + width: 100%; + justify-content: space-evenly; +} + +.references-links li a { + text-decoration: none; + justify-content: space-between; + color: #1c5380; + font-size: 1.1rem; + font-weight: bold; +} \ No newline at end of file