From d2924416ba78894efc8a681cbf99194c7ba07463 Mon Sep 17 00:00:00 2001 From: jodich Date: Mon, 4 Jun 2018 23:55:43 +0800 Subject: [PATCH 1/2] added css --- css/style.css | 111 ++++++++++++++++++++++++++++++++++++++++++++++++-- index.html | 54 ++++++++++++++++-------- 2 files changed, 146 insertions(+), 19 deletions(-) diff --git a/css/style.css b/css/style.css index 412f6d4..df8492a 100644 --- a/css/style.css +++ b/css/style.css @@ -4,8 +4,113 @@ dark blue: #06365f light blue: #1c5380 */ +* { + box-sizing: border-box; +} + body { - font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; - font-size: 16px; - margin: 0; + background-image: url(../img/bgtile.png); + background-repeat: repeat-x; + background-color: #eeeeee; + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + font-size: 16px; + margin: 0; +} + +main { + width: 870px; + height: 500px; + margin: 70px auto; + position: relative; +} + +.logo { + position: absolute; + width: 500px; + right: 0px; + padding-top: 20px; +} + +#login { + display: inline-block; + background-color: #1c5380; + padding: 7px; + position: absolute; + right: 0px; + bottom: 25px; + border: 1px solid #06365f; + border-radius: 3px; +} + +#login span { + padding: 5px; + font-size: 14px; + text-transform: bold; + position: relative; + top: -4px; + color: #EEE; +} + +.content { + background-color: #ffffff; + background: linear-gradient(#ffffff, #eeeeee); + padding: 30px 40px; + position: absolute; + width: 500px; + right: 0px; + top: 120px; + bottom: 0px; + border-radius: 6px; + +} + +#badge { + margin-right: 20px; + bottom: 0px; + position: relative; + bottom: -3px; +} + +.phone { + position: absolute; + left: 0px; + +} + +h1 { + margin-top: 0px; + font-size: 26px; + letter-spacing: 0.05em; + color: #06365f; +} + +p { + font-size: 14px; + line-height: 20px; + letter-spacing: 0.03em; +} + +footer { + font-size: 11px; + text-transform: uppercase; + position: relative; + text-align: center; +} + +footer a { + text-decoration: none; + text-transform: bold; + color: #1c5380; + display: inline-block; + margin: 0 8px; } + +#copyright { + margin-left: 10px; +} + + + + + + diff --git a/index.html b/index.html index f038e97..431323d 100644 --- a/index.html +++ b/index.html @@ -3,31 +3,53 @@ + 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. +

Capture and Share
the World's Moments

- Oh yeah, did we mention it's free? +

+ Instagram is a fast, beautiful and fun way to share your life with friends and family.

- Download on the App Store - Get it on Google Play + 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.

- About Us - Support - Blog - Press - API - Jobs - Privacy - Terms + Oh yeah, did we mention it's free?

+

+ +
+
+ + - © 2014 Instagram + From 04c51dd3a98674c6f1d504742bef4b80028b3dda Mon Sep 17 00:00:00 2001 From: jodich Date: Tue, 5 Jun 2018 00:36:31 +0800 Subject: [PATCH 2/2] added gradient and refine --- css/style.css | 27 ++++++++++++++++++++------- index.html | 6 +++++- 2 files changed, 25 insertions(+), 8 deletions(-) diff --git a/css/style.css b/css/style.css index df8492a..82b2f98 100644 --- a/css/style.css +++ b/css/style.css @@ -9,14 +9,23 @@ light blue: #1c5380 } body { - background-image: url(../img/bgtile.png); - background-repeat: repeat-x; + /*background-image: url(../img/bgtile.png); + background-repeat: repeat-x;*/ background-color: #eeeeee; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px; margin: 0; } +.blue { + background-color: #386283; + background: linear-gradient(#567e9d, #386283); + width: 100%; + height: 280px; + position: absolute; + top: 0px; +} + main { width: 870px; height: 500px; @@ -34,21 +43,24 @@ main { #login { display: inline-block; background-color: #1c5380; + background: linear-gradient(#6d93ae, #427092); + box-shadow: 0px 0.03em 0.03em 0.03em rgba(0, 0, 0, .4); padding: 7px; position: absolute; right: 0px; bottom: 25px; - border: 1px solid #06365f; + border: 1px solid #427092; border-radius: 3px; } #login span { padding: 5px; - font-size: 14px; - text-transform: bold; position: relative; top: -4px; - color: #EEE; + color: #eeeeee; + font-weight: 400; + font-size: 14px; + text-transform: bold; } .content { @@ -99,7 +111,7 @@ footer { footer a { text-decoration: none; - text-transform: bold; + font-weight: 500; color: #1c5380; display: inline-block; margin: 0 8px; @@ -107,6 +119,7 @@ footer a { #copyright { margin-left: 10px; + color: #a9a9a9; } diff --git a/index.html b/index.html index 431323d..5b88591 100644 --- a/index.html +++ b/index.html @@ -8,6 +8,10 @@ +
+ +
+