From 35b6550294e1032c83d4707257e85cc5131cb948 Mon Sep 17 00:00:00 2001 From: Julian Poh Date: Tue, 5 Jun 2018 00:49:50 +0800 Subject: [PATCH 1/4] completed assignment --- css/style.css | 80 +++++++++++++++++++++++++++++++++++++++++++++++++++ index.html | 53 ++++++++++++++++++++++++---------- 2 files changed, 118 insertions(+), 15 deletions(-) diff --git a/css/style.css b/css/style.css index 412f6d4..683d430 100644 --- a/css/style.css +++ b/css/style.css @@ -4,8 +4,88 @@ dark blue: #06365f light blue: #1c5380 */ +header { +margin:10; +height: 10px; +} + body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px; margin: 0; + background-image: linear-gradient(#1c5380, #06365f); + background-repeat: no-repeat; + background-size: 100% 40%; +} + +.phone { + width: 400px; + height: 600px; + padding: 20px; + margin: 10px; + text-align: center; + float: left; + display: inline-block; +} + +.brand { + width: 450px; + height: 80px; + padding: 20px; + margin: 10px; + float: left; + display: inline-block; +} + +.login{ + padding: 10px; + margin: 10px; +} + +.main { + background-image: url("../img/frame.png"); + background-image: height: 250px; + background-repeat: no-repeat; + background-position: relative; + width: 450px; + height: 400px; + padding: 20px; + margin: 10px; + float: left; + display: inline-block; +} + + +h1 { + font-family: "Helvetica Neue", Helvetica, Aerial, sans-serif; + font-size: 30px; + color: #06365f; +} + + + +a { + text-decoration: none; + color: #1c5380; +} + +.clearfix:after{ + visibility: hidden; + display: block; + font-size: 0; + content: " "; + clear: both; + height: 0; +} + +nav { + padding: 20px 40px; + margin:10px 40px 10px 40px; + display: inline-block; + text-align: left; } + +#copyright { + color: grey; +} + diff --git a/index.html b/index.html index f038e97..6d60918 100644 --- a/index.html +++ b/index.html @@ -4,30 +4,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. +
+ + +
+ iPhones +
- 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

+ + + 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? +
+
+ Apple App Store Logo + Google Play Store Logo +
- Download on the App Store - Get it on Google Play - About Us - Support - Blog - Press - API - Jobs - Privacy - Terms + - © 2014 Instagram From bbb1ccba9faa781ca00082a0f3bc3dcf8a3cf242 Mon Sep 17 00:00:00 2001 From: Julian Poh Date: Tue, 5 Jun 2018 09:08:57 +0800 Subject: [PATCH 2/4] Added button --- css/style.css | 8 ++++++-- index.html | 3 ++- 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/css/style.css b/css/style.css index 683d430..a8fd395 100644 --- a/css/style.css +++ b/css/style.css @@ -30,7 +30,7 @@ body { .brand { width: 450px; - height: 80px; + height: 60px; padding: 20px; margin: 10px; float: left; @@ -40,6 +40,10 @@ body { .login{ padding: 10px; margin: 10px; + border: 1px; + border-style: solid; + box-shadow: 1px 1px #888888; + position: absolute; } .main { @@ -49,7 +53,7 @@ body { background-position: relative; width: 450px; height: 400px; - padding: 20px; + padding: 20px 20px; margin: 10px; float: left; display: inline-block; diff --git a/index.html b/index.html index 6d60918..ab0dbcb 100644 --- a/index.html +++ b/index.html @@ -20,7 +20,8 @@
-
+