From 4b259f741e99831e6c8bfe7319d651cf179867c5 Mon Sep 17 00:00:00 2001 From: Phang Chiew Date: Tue, 5 Jun 2018 06:41:25 +0800 Subject: [PATCH 1/2] Bryan, how do you do the gradient of the login button and when I key log in, it appears as a block instead of inline. --- css/style.css | 87 +++++++++++++++++++++++++++++++++++++++++++++++++++ index.html | 61 ++++++++++++++++++++++-------------- 2 files changed, 125 insertions(+), 23 deletions(-) diff --git a/css/style.css b/css/style.css index 412f6d4..a7b8540 100644 --- a/css/style.css +++ b/css/style.css @@ -9,3 +9,90 @@ body { font-size: 16px; margin: 0; } +.background{ + background-color:#1c5380; + width:100%; + height:350px; +} +.container{ + position:relative; +} +.container #iphone{ + position:absolute; + margin-top: -14%; + margin-left: 20%; + +} +#info{ + width: 31%; + margin-left: 48%; + position:absolute; + margin-top: -5%; + padding:2%; + border: 1px; + border-radius: 5px; +} +h3{ + font-size:160%; + color:#1c5380; + margin-top: -46%; + z-index: 1; +} +#frame{ + position: relative; + margin-top: -5%; + margin-left: 47%; +} +#logo{ + position:absolute; + margin-top: -12%; + margin-left: 47%; + font-size: 300%; + font-family: 'Billabong'; +} +span#box{ + border-radius: 5px; + background-color: #007acc; + border:1px solid black ; + display:inline-block; + position:absolute; + margin-top: -22%; + margin-left: 122%; + font-size: 14px; + padding: 3% 6% 3% 16%; + color:white; +} +img#home{ + position:absolute; + margin: -19% 126%; +} +@font-face{ + font-family: 'Billabong'; + font-style: normal; + font-weight: normal; + src: local('Billabong'), url('Billabong.woff') format('woff'); +} +ul li{ + display: inline-block; + padding-left: 20px; +} +ul a{ + text-decoration:none; + color:#1c5380; + font-size:70%; +} +#footer{ + font-size:70%; +} +ul{ + text-align:center; + padding-top: 5%; +} +div#playStore.container{ + display: inline-block; + margin-top: 3%; + margin-left: 48%; +} +img#apple{ + margin:0px 30px; +} \ No newline at end of file diff --git a/index.html b/index.html index f038e97..ce97774 100644 --- a/index.html +++ b/index.html @@ -3,31 +3,46 @@ + 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?

+
+
+ + +
+ + + From f4030a90cbef4f5532a085ce746a8648dc7091bc Mon Sep 17 00:00:00 2001 From: Phang Chiew Date: Tue, 5 Jun 2018 20:57:45 +0800 Subject: [PATCH 2/2] update button --- css/style.css | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/css/style.css b/css/style.css index a7b8540..f9af45d 100644 --- a/css/style.css +++ b/css/style.css @@ -51,16 +51,17 @@ h3{ font-family: 'Billabong'; } span#box{ - border-radius: 5px; - background-color: #007acc; - border:1px solid black ; display:inline-block; position:absolute; margin-top: -22%; margin-left: 122%; - font-size: 14px; - padding: 3% 6% 3% 16%; - color:white; + background: #2f9ce0; + border-radius: 6px; + font-family: Arial; + color: #ffffff; + font-size: 20px; + padding: 10px 20px 10px 47px; + text-decoration: none; } img#home{ position:absolute;