diff --git a/index.html b/index.html index da7db46ff..9521de162 100644 --- a/index.html +++ b/index.html @@ -5,12 +5,52 @@ 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 +
+
+ Mobil phone preview +
+
+ + +
+

+ 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 +
+
+
+
+ diff --git a/styles/style.css b/styles/style.css index c4865cc6d..fec3677a4 100644 --- a/styles/style.css +++ b/styles/style.css @@ -3,8 +3,93 @@ Colors to use: dark blue: #06365f light blue: #1c5380 */ +*{ + box-sizing: border-box; +} body { font: 200 16px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif; margin: 0; + background-image: url(./../images/bgtile.png); + background-repeat: repeat-x; +} + +main{ + display: table; + margin: auto; + height: 90vh; +} + +.mobile_container{ + display: inline-block; + margin-top: 150px; + margin-right: 50px; +} + +.logo{ + display: inline-block; +} + +.log_in{ + display: inline-block; + position: relative; + bottom: 30px; + left: 100px; +} + +.log_in>button{ + height: 3em; + width: 7em; + background-image: url(./../images/frame.png); + background-size: cover; + background-color: rgb(6, 54, 95, 0.8); + background-blend-mode: overlay; + border: none; + box-shadow: -1px -1px 10px #1c5380; + color: #FFFFFF; +} + +.info_container{ + display: inline-block; + position: relative; + bottom: 75px; + padding: 2%; + max-width: 700px; +} + +.info_text{ + background-color: #FFFFFF; + color: #000000; + border-radius: 5px; + padding: 50px; + box-shadow: -1px -2px 15px -15px black; +} + +h1{ + color: #06365F; + margin-top: 0px; +} + +footer{ + display: table; + margin: auto; + height: 10vh; + margin: auto; +} + +li{ + list-style-type: none; + float: left; + margin-right: 15px; } + +li>a{ + text-transform: uppercase; + text-decoration: none; + font-weight: 700; + color: #1c5380; +} + +li:nth-last-of-type(1)>a{ + color: rgb(185, 185, 185); +} \ No newline at end of file