diff --git a/css/style.css b/css/style.css index 412f6d4..c99ce8b 100644 --- a/css/style.css +++ b/css/style.css @@ -4,8 +4,109 @@ dark blue: #06365f light blue: #1c5380 */ -body { +body{ + box-sizing: border-box; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px; margin: 0; + background-image: url("../img/bgtile.png"); + background-repeat: repeat-x; +} + +.content{ + width: 73%; + height: 80vh; + margin: 100px auto 0 auto; + position: relative; +} + +.banner{ + position: absolute; +} + +.banner > img { + width: 90%; +} + +.card{ + position: absolute; + left: 320px; + height: 80vh; + width: 60%; +} + +.card-head { + height: 60px; + padding: 20px 0; +} + +.card-head > img { + width: 58%; + float: left; +} + +.log-in-btn{ + border: 1.5px solid rgb(32,91,137); + height: 40px; + width: 80px; + margin: 20px 0; + padding: 0 9px; + float: right; + background: linear-gradient(to top,rgba(56,113,158,1), rgba(112,153,181,1)); +} + +.log-in-btn p { + float: right; + margin: 11px 0; + color: white; +} +.log-in-btn img { + position: relative; + top: 7px; +} + +.card-info{ + padding: 20px 40px; + background: url('../img/frame.png') no-repeat; + background-size: contain; +} + +.card-info > h1 { + line-height: 30px; + margin-top: 20px; + font-size: 22px; + color: #06365f; +} + +.card-info p { + line-height: 24px; + font-size: 13px; +} + +.card-link { + margin-top: 28px; +} + +.card-link img { + margin-right: 15px; + height: 45px; +} + +.foot-links { + text-align: center; + margin: 9vh auto; +} + +.foot-links a { + text-decoration: none; + color: #1c5380; +} + +.foot-links span { + color: #A0A0A0; +} + +.foot-links * { + font-size: 13px; + margin-right: 10px; } diff --git a/index.html b/index.html index f038e97..35e7b9c 100644 --- a/index.html +++ b/index.html @@ -4,30 +4,52 @@ Instagram + - 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 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? +

+
+ + +
+
+
+
+