From b6fefe430958578178b3321320aadd8b38a890b1 Mon Sep 17 00:00:00 2001 From: Leroy Douglas Date: Sat, 23 May 2020 19:33:13 +0100 Subject: [PATCH 1/2] JiT update.... --- week2/2-website/css/style.css | 234 ++++++++++++++++++++++++++++++++++ week2/2-website/index.html | 61 ++++++++- 2 files changed, 293 insertions(+), 2 deletions(-) diff --git a/week2/2-website/css/style.css b/week2/2-website/css/style.css index 5cb025ce..14d87a63 100644 --- a/week2/2-website/css/style.css +++ b/week2/2-website/css/style.css @@ -1,9 +1,17 @@ +* { + margin: 0; + padding: 0; +} +html{ + font-size: 62.5%; +} /* We are using the 'Roboto' font from Google. This has already been added to your HTML header */ body { font-family: 'Roboto', sans-serif; -webkit-font-smoothing: antialiased; + font-size: 1rem; } /** @@ -16,4 +24,230 @@ body { * - When using Flexbox, remember the items you want to move around need to be inside a parent container set to 'display: flex' */ +/***************************************** H E A D E R S E C T I O N ****************************************** +* The header inclueds the log and navigation bar that is laid out using the flexbox layout +* +****************************************************************************************************************/ + +/* + * Let's pin our header to the top of the page +*/ + +header{ + position: fixed; + /* stop: 0px; */ + width: 100%; + background-color: #fff; + border-bottom: 1px solid #ddd; + /* soverflow: hidden; */ +} + +.content-container{ + padding: 0 1.5008rem; + margin: 0 auto; + min-width: 60rem; +} + +/* + * The layout container for the logo and navigation + */ + + .header-layout{ + display: flex; + justify-content: space-between; + align-items: center; + height: 7rem; + } + + /* + * The header Content + */ + + img.logo { + height: 7rem; + width: 2.6rem;; +} + +nav.menu { + /* float: right; */ + color: #838994; + font-size: 1.664rem; + /* + margin-top: 1.7rem; + margin-top: 2.752rem; + */ +} + +nav.menu li { + display: inline-block; + margin-left: 2.5008rem; +} + +nav.menu .selected{ + color: #4c5058; + font-weight: 500; +} + + +/* + * Container for background photo, title and tagline + */ + +.tag-container{ + background-image: url('../img/first-background.jpg'); + background-position: center bottom; + background-repeat: no-repeat; + background-size: cover; + height: 73.5008rem; +} + +/* +* Lets layout out content using ye ole trust flexbox..... +*/ +.tag-content{ + padding:0; + display: flex; + flex-direction: column; + align-items: center; +} + + + +.tag-content h1{ + margin: 0; + margin-top: 28rem; + font-size: 5rem; +} + +.tag-content h3{ + font-size: 2.5008rem; + margin-top: 2rem; +} + +.tag-content h1, .tag-content h3 { + color: #fff; + font-weight: 300; +} + +.tag-content button{ + margin-top: 2.5008rem; + width: 15.5008rem; + background-color: #f15a29; + border-color: #f15a29; + text-shadow: none; + border-style: none; + border-radius: 0.4rem; + padding: 1.6rem 0.9rem; + color: white; + font-size: 1.8rem; + box-sizing: border-box; +} + +.benefits-container{ + display: flex; + justify-content: space-around; + text-align: center; + padding-bottom: 8rem; +} + +.benefit img{ + width: 12.7rem; + height: 12.7rem; +} + +#benefits{ + margin-top: 12.6rem; + +} +#benefits h2{ + margin-top: 12.6rem; + font-size: 4.4rem; + font-weight: 300; + margin: 2.6rem 0 5rem; + text-align: center; +} +.benefit h3{ + font-size: 2.5008rem; + font-weight: 400; + margin: 4rem 0 3rem; +} +section.benefit{ + width: 33.3333333%; +} + +footer{ + padding-bottom: 15rem; +} + +footer hr{ + margin: 2.1008rem; + border-top: 1px solid #eaebec; +} + +#social-media-container h5{ + margin: 2.1008; +} +#social-media-container h5{ + font-size: 1.6rem; + font-weight: 400; + text-align: center; +} +.social-media-layout{ + display: flex; + justify-content: center; +} + +.social-media{ + border-radius: 2rem; + width: 4rem; + height: 4rem; + margin: 2rem 5px; + border: 1px solid #eaebec; + padding: 1rem 0; + text-align: center; + box-sizing: border-box; +} + +#social-media-container .twitter { + color: #55acee; +} +#social-media-container .facebook { + color: #4c66a4; +} +#social-media-container .instagram { + color: #3f729b; +} + +.fa{ + font-family: FontAwesome; + font-size: 1.4rem; +} + +#social-media-container .content-container .copyright{ + text-align: center; + font-size: 1.44rem; + font-weight: 300; +} + + + +@media (min-width: 76.8em) { + .content-container { + width: 73.6em; + sbackground-color: red; + } +} + +@media (min-width: 99.2em) { + .content-container { + width: 96rem; + sbackground-color: blue; + } +} +@media (min-width: 120rem) { + .content-container { + width: 60%; + sbackground-color: green; + } +} \ No newline at end of file diff --git a/week2/2-website/index.html b/week2/2-website/index.html index 876b59d6..625390b0 100644 --- a/week2/2-website/index.html +++ b/week2/2-website/index.html @@ -16,6 +16,63 @@ - +
+
+
+ + +
+
+
+
+
+
+

Introducing Karma

+

Bring WiFi with you, everywhere you go.

+ +
+
+
+

Everyone needs a little Karma

+
+
+ Karma supports Internet for all devices +

Internet for all devices

+
+
+ Karma Boosts your productivity +

Boost your productivity

+
+
+ Karma supports Pay as You Go +

Pay as You Go

+
+
+
+
+

+
+
+
+
Join us on
+ +
© Karma Mobility, Inc. +
+
+
+
- + \ No newline at end of file From 1a106b7f013aa65cceeb86f77983a7c5ea606577 Mon Sep 17 00:00:00 2001 From: Leroy Douglas Date: Fri, 5 Jun 2020 10:04:13 +0100 Subject: [PATCH 2/2] Tidied up html & css Removed unecessary code and comments. Also used the proper class to size the social media icons. --- week2/2-website/css/style.css | 14 -------------- week2/2-website/index.html | 9 ++++----- 2 files changed, 4 insertions(+), 19 deletions(-) diff --git a/week2/2-website/css/style.css b/week2/2-website/css/style.css index 14d87a63..e029b397 100644 --- a/week2/2-website/css/style.css +++ b/week2/2-website/css/style.css @@ -35,11 +35,9 @@ body { header{ position: fixed; - /* stop: 0px; */ width: 100%; background-color: #fff; border-bottom: 1px solid #ddd; - /* soverflow: hidden; */ } .content-container{ @@ -69,13 +67,8 @@ header{ } nav.menu { - /* float: right; */ color: #838994; font-size: 1.664rem; - /* - margin-top: 1.7rem; - margin-top: 2.752rem; - */ } nav.menu li { @@ -218,10 +211,6 @@ footer hr{ color: #3f729b; } -.fa{ - font-family: FontAwesome; - font-size: 1.4rem; -} #social-media-container .content-container .copyright{ text-align: center; @@ -234,20 +223,17 @@ footer hr{ @media (min-width: 76.8em) { .content-container { width: 73.6em; - sbackground-color: red; } } @media (min-width: 99.2em) { .content-container { width: 96rem; - sbackground-color: blue; } } @media (min-width: 120rem) { .content-container { width: 60%; - sbackground-color: green; } } \ No newline at end of file diff --git a/week2/2-website/index.html b/week2/2-website/index.html index 625390b0..4a4b933b 100644 --- a/week2/2-website/index.html +++ b/week2/2-website/index.html @@ -41,7 +41,7 @@

Bring WiFi with you, everywhere you go.

-
+

Everyone needs a little Karma

@@ -59,15 +59,14 @@

Pay as You Go