diff --git a/index.html b/index.html index da7db46ff..4ff965742 100644 --- a/index.html +++ b/index.html @@ -4,13 +4,62 @@ 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 +
+
+
+
+
+ +
+
+
+ brand + +
+
+

+ 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 picturte 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?

+
+ +
+ + appstore + + + playstore + +
+
+
+ diff --git a/styles/style.css b/styles/style.css index c4865cc6d..684000fa8 100644 --- a/styles/style.css +++ b/styles/style.css @@ -8,3 +8,79 @@ body { font: 200 16px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif; margin: 0; } + +.hero-bg { + background: linear-gradient(to top, #06365f, #1c5380); + height: 300px; + width: 100%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +.container { + width: auto; + padding: 128px; + display: flex; + gap: 64px; + justify-content: space-between; +} + +.hero-content { + flex-grow: 1; +} + +.hero-content-header { + display: flex; + gap: 30px; + align-items: center; + margin-bottom: 20px; +} + +.hero-content-header-login { + cursor: pointer; + display: flex; + gap: 10px; + align-items: center; + color: white; + padding: 6px 10px; + border: 1px solid #06365f; + background: linear-gradient(to top, #1c5380, rgb(39, 116, 179)); +} +.hero-content-body { + background-image: url("../images/frame.png"); + background-size: cover; + background-repeat: no-repeat; + padding: 30px; +} + +.hero-content-body-1 { + font-size: 32px; + color: #06365f; + margin: 0; + font-weight: bold; +} + +.hero-content-footer { + display: flex; + gap: 30px; + padding-left: 30px; + padding-right: 30px; +} + +.footer-links { + display: flex; + gap: 20px; + justify-content: center; +} +.footer-links > * { + font-weight: bold; + color: #1c5380; + text-decoration: none; +} + +.copyright { + color: gray; + font-weight: normal; +}