From 107b30943c99e71b805866204cd785fd1d972ed6 Mon Sep 17 00:00:00 2001 From: Dewayne Sewell Date: Sat, 25 Jun 2022 21:57:44 +0100 Subject: [PATCH 01/14] Update index.html --- index.html | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 3e742ef04..2451ee3db 100755 --- a/index.html +++ b/index.html @@ -10,8 +10,17 @@ - + + + From a904d865d008f1297b58d61813a40d1d86864fb5 Mon Sep 17 00:00:00 2001 From: Dewayne Sewell Date: Sun, 26 Jun 2022 14:30:05 +0100 Subject: [PATCH 02/14] progress 26.6 --- css/style.css | 105 ++++++++++++++++++++++++++++++++++- index.html | 150 +++++++++++++++++++++++++++++++++++++++++++++++--- 2 files changed, 244 insertions(+), 11 deletions(-) diff --git a/css/style.css b/css/style.css index 5cb025cef..b3413dca7 100755 --- a/css/style.css +++ b/css/style.css @@ -1,5 +1,4 @@ - - /* We are using the 'Roboto' font from Google. This has already been added to your HTML header */ +/* We are using the 'Roboto' font from Google. This has already been added to your HTML header */ body { font-family: 'Roboto', sans-serif; @@ -8,6 +7,7 @@ body { /** * Add your custom styles below + * * Remember: * - Be organised, use comments and separate your styles into meaningful chunks @@ -16,4 +16,105 @@ body { * - When using Flexbox, remember the items you want to move around need to be inside a parent container set to 'display: flex' */ +.header, +.content, +.footer { + padding: 0 1.5rem; + max-width: 1200px; + margin: 0 auto; +} + +/* Header */ + +.header { + display: flex; + align-items: center; + justify-content: space-between; + height: 5rem; + margin-bottom: 1rem; + padding-top: 1rem; +} + +.header__logo { + max-height: 90px; + width: auto; +} + +/* Navigation */ + +.navigation__list { + display: flex; + list-style: none; +} + +.navigation__item { + padding: 0.5rem; +} + +.navigation__item:hover { + padding: 0.5rem; + color: darkorange; +} + +.navigation__link { + color: var(--grey-dark); + font-weight: 600; + text-transform: uppercase; + text-decoration: none; + +} + + +.introducing_karma_text { + position: absolute; + font: 'roboto'; + font-size: 45px; + top: 45%; + left: 50%; + color: white; + transform: translate(-50%, -50%); +} + +.icons { + padding: 2rem; + font: 'roboto'; + color: black; +} + +.everyone_text { + position: relative; + font: 'roboto'; + font-size: 45px; + top: 80%; + left: 70%; + padding: 100px; + color: black; + transform: translate(-50%, -50%); +} + +.wifi_text { + position: absolute; + font: 'roboto'; + font-size: 30px; + top: 55%; + left: 50%; + color: white; + transform: translate(-50%, -50%); +} + +.learn_more { + position: absolute; + top: 75%; + left: 50%; + background-color: darkorange; + color: white; + padding: 2rem; + border-radius: 10px; + transform: translate(-50%, -50%); +} +.footer { + bottom: 100%; + left: 50%; + padding: 10px; +} \ No newline at end of file diff --git a/index.html b/index.html index 2451ee3db..cddc8e0be 100755 --- a/index.html +++ b/index.html @@ -11,15 +11,147 @@ - - +
+ + + + + + + + + +
+ +
+ + first-background + + +

+ Introducing Karma +

+ +

+ Bring WiFi with you, everywhere you go. +

+ + + + +
+

+ Everyone needs a little Karma +

+ +
+ + icon-devices Internet for all devices + + + + icon-devices Boost your productivity + + + + icon-devices Pay as you go + +
+ + +
+ + +
+

+ Join us on +

+ +
+ + twitter + + + + facebook + + + + instagram + + +
+ +

+ © Karma Mobility, Inc. +

+ +
+ +
From 6b424f5794171aea37cbdf065bbc598de301ec4e Mon Sep 17 00:00:00 2001 From: Dewayne Sewell Date: Tue, 28 Jun 2022 19:55:01 +0100 Subject: [PATCH 03/14] 4 --- css/style.css | 6 +++--- index.html | 28 ++++++++++++++-------------- 2 files changed, 17 insertions(+), 17 deletions(-) diff --git a/css/style.css b/css/style.css index b3413dca7..1917343ae 100755 --- a/css/style.css +++ b/css/style.css @@ -35,9 +35,9 @@ body { padding-top: 1rem; } -.header__logo { - max-height: 90px; - width: auto; +#logo { + display: flex; + max-width: 1.5rem; } /* Navigation */ diff --git a/index.html b/index.html index cddc8e0be..2cd8da7be 100755 --- a/index.html +++ b/index.html @@ -13,13 +13,12 @@
- - - +