diff --git a/index.html b/index.html index da7db46ff..5c0088dff 100644 --- a/index.html +++ b/index.html @@ -5,12 +5,75 @@ 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 app en dos iPhones +
+ + +
+
+ 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 +
+
+
+
+ + - + \ No newline at end of file diff --git a/styles/style.css b/styles/style.css index c4865cc6d..e03d05d2e 100644 --- a/styles/style.css +++ b/styles/style.css @@ -7,4 +7,103 @@ light blue: #1c5380 body { font: 200 16px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif; margin: 0; + background: linear-gradient(#1c5380 0 320px, #f2f2f2 320px); + background-repeat: no-repeat; + min-height: 100vh; } + +.hero { + max-width: 960px; + margin: 32px auto; + padding: 0 16px; + display: flex; + align-items: flex-start; + gap: 16px; +} + +.col-left, .col-right { + flex: 1; +} + +.phones { + max-width: 100%; + height: auto; + display: block; +} + +.brand-row { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 16px; +} +.wordmark { + height: 48px; display:block; +} + +.btn-login { + display: inline-flex; + align-items: center; + gap: 8px; + padding: 6px 12px; + background: #fff; + color: #1c5380; + border: 1px solid #1c5380; + border-radius: 4px; + cursor: pointer; +} +.btn-login .icon{ width:16px; height:16px; display:block; } + +.card { + background: #fff; + border-radius: 6px; + padding: 16px 20px; +} + +h1 { +color: #06365f; +} + +.badges { + display: flex; + gap: 12px; + margin-top: 12px; +} + +.badges img { + height: 40px; display:block; + } + +.site-footer{ + max-width: 960px; + margin: 24px auto 40px; + padding: 0 16px; + color: #1c5380; +} + +.footer-links{ + list-style: none; + display: flex; + gap: 16px; + justify-content: center; + padding: 0; + margin: 0 0 8px; +} + +.footer-links a{ + text-decoration: none; + color: inherit; + font-size: 14px; +} + +.footer-links a:hover{ + text-decoration: underline; +} + +.site-footer small{ + display: block; + text-align: center; + color: #666; + font-size: 12px; +} +