diff --git a/index.html b/index.html index da7db46ff..4d0b293c0 100644 --- a/index.html +++ b/index.html @@ -5,12 +5,37 @@ 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 with Instagram App +
+
+ Instagram Logo + +
+
+

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..821d3bb04 100644 --- a/styles/style.css +++ b/styles/style.css @@ -7,4 +7,48 @@ light blue: #1c5380 body { font: 200 16px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif; margin: 0; + padding: 7em; + background: linear-gradient(to bottom, #1c5380 40%, white 40%); +} + +.container { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 2em; + max-width: 900px; +} + +.header { + display: flex; + justify-content: space-between; + align-items: center; + gap: 4em; + padding: 10px 0px; +} + +button { + width: 90px; + background-color: #1c5380; + color: white; + padding: 5px; + display: flex; + justify-content: center; + align-items: center; + gap: 10px; + border-radius: 5px; +} + +.description { + padding: 10px; + border-radius: 5px; + box-shadow: inset 1px 0px 1px 0px gray; + background-color: white; +} + +footer { + margin: 10px; + grid-column-start: auto; + text-align: center; + padding: 30px; + font-size: 14px; }