diff --git a/index.html b/index.html index da7db46ff..963efa8b0 100644 --- a/index.html +++ b/index.html @@ -4,13 +4,59 @@ 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 - +
+
+
+ # +
+ +
+ +
+
+

Capture and Share
the World's Moments

+

Instagram is 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 through 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..e9ffc6ffc 100644 --- a/styles/style.css +++ b/styles/style.css @@ -4,7 +4,107 @@ dark blue: #06365f light blue: #1c5380 */ + body { font: 200 16px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif; margin: 0; + height: 1400px; + background: linear-gradient(to bottom, #1c5380 25%, white 15%); + border: 5px solid purple; + +} +.content { + border: 10px solid brown; + width: 1250px; + display: flex; + justify-content: space-around; + +} +/*--------------------------------------- MAIN BOX ------------------------*/ +.main { + border: 50px solid; + width: 1300px; + height: 1500px; + display: flex; + flex-direction: column; + justify-content: space-between; +} + +/* ------------------------------------IPHONE IMAGE---------------------- */ +.phone-image{ + padding: 150px 0 0 20px ; +} + +/* ------------------------------------Insta Body------------------------- */ +.insta-body{ + border: 2px solid yellow; + width: 600px; + margin-top: 160px; + height: 500px; + +} + +.login{ + display: flex; + justify-content: space-between; + align-items: center; + border: 2px solid green; + width: 600px; } + +article{ + border: 2px solid red; + display: flex; + justify-content: center; + align-items: center; + padding: 15px; + margin: 0px; +} + +.login-button{ + background-color: #1c5380; + color: white; + padding: 15px; + width: 140px; + font-size: larger; + display: flex; + justify-content: space-between +} + +.info { + border: 2px solid orange; + height: 340px; + background-image: url("/images/frame.png"); + background-repeat: no-repeat; + background-size: contain; + display: flex; + justify-content: center; +} +.frame { + width: 600px; +} + +.text { + border: 1px solid aqua; + width: 580px; + padding: 20px 30px 0 40px; + margin-top: 10px; +} + +h2 { + color: #06365f; +} + +.icons { + margin-left: 40px; +} + +.android { + margin-left: 20px; +} + +ul { + border: 1px solid pink; + list-style: none; + display: flex; +} \ No newline at end of file