From 0aefe496cce1e697fb596515a02656080f57bab0 Mon Sep 17 00:00:00 2001 From: Khadar Dagal Date: Sun, 24 Jul 2022 20:26:31 +0100 Subject: [PATCH 01/16] create-header-and-navLinks --- index.html | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) diff --git a/index.html b/index.html index 3e742ef04..1ee2d661a 100755 --- a/index.html +++ b/index.html @@ -10,10 +10,16 @@ - - - - - +
+ logo-image + + Meet Karma + How it Works + Store + Blog + Help + Logic + +
From 81f51decff2e3bf032d4dc471aa11f8e251df120 Mon Sep 17 00:00:00 2001 From: Khadar Dagal Date: Sun, 24 Jul 2022 20:49:19 +0100 Subject: [PATCH 02/16] Add main-and-sections --- index.html | 19 +++++++++++++++++-- 1 file changed, 17 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 1ee2d661a..e9f2838f4 100755 --- a/index.html +++ b/index.html @@ -12,14 +12,29 @@
logo-image - +
+ +
+
+ +
+ +
+ +
+
+ +
+ +
+ From c57d78bfd2b458bb6a47956012ed3abd62ab8e18 Mon Sep 17 00:00:00 2001 From: Khadar Dagal Date: Mon, 25 Jul 2022 23:21:27 +0100 Subject: [PATCH 03/16] Add separation comment --- css/style.css | 81 ++++++++++++++++++++++++++++++++++-- index.html | 112 +++++++++++++++++++++++++++++++++++++++----------- 2 files changed, 164 insertions(+), 29 deletions(-) diff --git a/css/style.css b/css/style.css index 5cb025cef..378b8a9e4 100755 --- a/css/style.css +++ b/css/style.css @@ -1,9 +1,8 @@ - - /* 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; - -webkit-font-smoothing: antialiased; + font-family: "Roboto", sans-serif; + -webkit-font-smoothing: antialiased; } /** @@ -15,5 +14,79 @@ body { * * - When using Flexbox, remember the items you want to move around need to be inside a parent container set to 'display: flex' */ +/* --------below this line is the header section-------------------------------------------------- */ +header { + display: flex; + justify-content: space-between; + } +.navigation { + margin-right: 9%; + padding: 10px; + +} +#logo-image-id { + align-self: flex-start; + width: 2%; + margin-top: 1%; + margin-left: 3%; +} +/* --------above this line is the header section-------------------------------------------------- */ + +/* --------below this line is the main section--------------------------------------------------- */ +/* The main section has two sub-sections 1. background image, h1 title, paragraph and button. +2. second sub-section is h2 title, services images */ +.main-section { + width: 100%; + height: fit-content; +} + +.backgroundImage-and-title { + color: white; + text-align: center; + color: white; + text-align: center; +} +.intro-section { + margin-top: -15%; + margin-bottom: 7%; +} +button { + padding: 10px; +} +.background-image { + height: 300px; + width: 98%; +} + +.learn-more-btn { + background-color: rgb(232, 178, 78); + border: none; +} +/* ---------------above this line is first sub-section of the main section--------------- */ + +/* ---------------below this line is second sub-section of the main section--------------- */ +.product-section { + text-align: center; +} +.sub-product-container { + display: flex; + justify-content: center; +} +.product-image { + width: 30%; +} +/* ---------------above this line is second sub-section of the main section--------------- */ +/* ---------------below this line is the footer------------------------------------------- */ +footer { + display: block; + text-align: center; +} +.footer-socialMedia-image { + display: flex; + justify-content: center; +} +.socialMedia-image { + width: 2%; +} diff --git a/index.html b/index.html index e9f2838f4..09217db4c 100755 --- a/index.html +++ b/index.html @@ -1,40 +1,102 @@ - - - + + + Karma - - - - - - + + + + + +
- logo-image - + logo-image +
-
+
+ +
+

Introducing Karma

+

Bring WiFi with you, everywhere you go

+ +
+
-
+
+

Everyone needs a little Karma

+
+
+ devices-image +

Internet for all devices

+
-
+
+ Caffee-image +

Boost your productivity

+
-
+
+ fuel-image +

Pay as You Go

+
+
+
- +

Join us on

+
+ + + +
+

©️Karma Mobility.Inc

- - + From 6f8820ecf940864f71792ab3c2e115d18906bc0f Mon Sep 17 00:00:00 2001 From: Khadar Dagal Date: Tue, 26 Jul 2022 00:09:46 +0100 Subject: [PATCH 04/16] Add button background --- css/style.css | 6 +++--- index.html | 32 ++++++++------------------------ 2 files changed, 11 insertions(+), 27 deletions(-) diff --git a/css/style.css b/css/style.css index 378b8a9e4..435d27f72 100755 --- a/css/style.css +++ b/css/style.css @@ -41,21 +41,21 @@ header { } .backgroundImage-and-title { - color: white; text-align: center; color: white; - text-align: center; } .intro-section { margin-top: -15%; margin-bottom: 7%; } -button { +.learn-more-btn { padding: 10px; + background-color: green !important; } .background-image { height: 300px; width: 98%; + aspect-ratio: 1/1; } .learn-more-btn { diff --git a/index.html b/index.html index 09217db4c..d39f8002c 100755 --- a/index.html +++ b/index.html @@ -22,7 +22,7 @@ src="/img/karma-logo.svg" id="logo-image-id" class="logo-image" - alt="logo-image" + alt="image_of_logo" />