From 8ab903537101c96a1e0e4c657cf8ae121fdaa819 Mon Sep 17 00:00:00 2001 From: Ekrem Date: Tue, 26 Jul 2022 18:05:13 +0100 Subject: [PATCH 01/23] Added menu --- css/style.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/css/style.css b/css/style.css index 5cb025cef..06de3cdb9 100755 --- a/css/style.css +++ b/css/style.css @@ -4,6 +4,10 @@ body { font-family: 'Roboto', sans-serif; -webkit-font-smoothing: antialiased; + background-color: aliceblue; +} +.navmenu { + text-align: right; } /** From 542c3a7f6559b2bdcdb9b9fbff0bcdae57823c3a Mon Sep 17 00:00:00 2001 From: Ekrem Date: Tue, 26 Jul 2022 18:06:34 +0100 Subject: [PATCH 02/23] added menu --- index.html | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/index.html b/index.html index 3e742ef04..6f2a82a55 100755 --- a/index.html +++ b/index.html @@ -10,6 +10,15 @@ + From c61b4b6b05e525c5e9c59e9aaba77195270915ff Mon Sep 17 00:00:00 2001 From: Ekrem Date: Tue, 26 Jul 2022 19:59:46 +0100 Subject: [PATCH 03/23] Added logo --- css/style.css | 30 +++++++++++++++++++++++++++++- index.html | 7 ++++++- 2 files changed, 35 insertions(+), 2 deletions(-) diff --git a/css/style.css b/css/style.css index 06de3cdb9..0d31a9190 100755 --- a/css/style.css +++ b/css/style.css @@ -6,9 +6,37 @@ body { -webkit-font-smoothing: antialiased; background-color: aliceblue; } + +#logo { + position:absolute; + left: 2%; + height: 30px; + width: 30px; + margin-top: 10px; + margin-left: 25px; +} .navmenu { - text-align: right; + position:absolute; + right: 0%; + display:flex; + justify-content:space-between; + +} +.karma { + color: black; + margin-right: 5%; + width: 100%; + } +.stnd { + color: darkolivegreen; + margin-right: 5%; +} +.store { +color: #F15B2A; +margin-right: 5%; +} + /** * Add your custom styles below diff --git a/index.html b/index.html index 6f2a82a55..8aa27342f 100755 --- a/index.html +++ b/index.html @@ -10,6 +10,11 @@ +
+ +
From 60e82461e56bfd07050209da48c5d5a4a3151910 Mon Sep 17 00:00:00 2001 From: Ekrem Date: Tue, 26 Jul 2022 20:04:44 +0100 Subject: [PATCH 04/23] menu css wasarranged --- css/style.css | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/css/style.css b/css/style.css index 0d31a9190..98e873edc 100755 --- a/css/style.css +++ b/css/style.css @@ -16,25 +16,27 @@ body { margin-left: 25px; } .navmenu { - position:absolute; - right: 0%; + float: right; display:flex; justify-content:space-between; + margin-right: 10%; } .karma { color: black; margin-right: 5%; - width: 100%; + white-space: nowrap; } .stnd { color: darkolivegreen; margin-right: 5%; + white-space: nowrap; } .store { color: #F15B2A; margin-right: 5%; +white-space: nowrap; } From 561905cb88d27896ce2e886cefc093374722b70e Mon Sep 17 00:00:00 2001 From: Ekrem Date: Tue, 26 Jul 2022 21:17:37 +0100 Subject: [PATCH 05/23] background pic and some content on it --- css/style.css | 22 +++++++++++++++++++++- index.html | 10 ++++++++++ 2 files changed, 31 insertions(+), 1 deletion(-) diff --git a/css/style.css b/css/style.css index 98e873edc..63ebb9641 100755 --- a/css/style.css +++ b/css/style.css @@ -4,7 +4,7 @@ body { font-family: 'Roboto', sans-serif; -webkit-font-smoothing: antialiased; - background-color: aliceblue; + background-color: white; } #logo { @@ -38,6 +38,26 @@ color: #F15B2A; margin-right: 5%; white-space: nowrap; } +#background-img { + width: 100%; +} +.background { +position: relative; +} +.on-background { + position: absolute; + left: 40%; + top: 30%; + color: white; + font-family: 'Roboto', sans-serif; + -webkit-font-smoothing: antialiased; +} +.h { + font-size: 40px; +} +.p1 { + font-size: 30px; +} /** diff --git a/index.html b/index.html index 8aa27342f..d1a07a62a 100755 --- a/index.html +++ b/index.html @@ -25,6 +25,16 @@ +
+
+ background +
+

Introducing Karma

+

Bring WiFi with you, everywhere you go.

+ +
+
+
From 44a76d2403832f3013ca193d2eed932fa8cdd674 Mon Sep 17 00:00:00 2001 From: Ekrem Date: Tue, 26 Jul 2022 22:10:13 +0100 Subject: [PATCH 06/23] Added 'learn more' button --- index.html | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/index.html b/index.html index d1a07a62a..4b4f2dec4 100755 --- a/index.html +++ b/index.html @@ -31,9 +31,14 @@

Introducing Karma

Bring WiFi with you, everywhere you go.

+
+
+
+
+ From da6d52550b715a98ca22e6f15ab35e19bc7925c2 Mon Sep 17 00:00:00 2001 From: Ekrem Date: Tue, 26 Jul 2022 22:10:19 +0100 Subject: [PATCH 07/23] Added 'learn more' button --- css/style.css | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/css/style.css b/css/style.css index 63ebb9641..1f10c39af 100755 --- a/css/style.css +++ b/css/style.css @@ -46,19 +46,27 @@ position: relative; } .on-background { position: absolute; - left: 40%; + left: 30%; top: 30%; color: white; font-family: 'Roboto', sans-serif; -webkit-font-smoothing: antialiased; } .h { + text-align: center; font-size: 40px; } .p1 { font-size: 30px; + text-align: center; +} +.p2 { +background-color: #F15B2A; +padding: 3% 5% 3% 5%; +white-space: nowrap; +display: block; +margin: auto; } - /** * Add your custom styles below From 767a698f79aea0b3951bc38754cb107898b9568f Mon Sep 17 00:00:00 2001 From: Ekrem Date: Wed, 27 Jul 2022 12:41:48 +0100 Subject: [PATCH 08/23] Arranged all img and over img content --- css/style.css | 31 ++++++++++++++++--------------- index.html | 21 +++++++++++++-------- 2 files changed, 29 insertions(+), 23 deletions(-) diff --git a/css/style.css b/css/style.css index 1f10c39af..c11ddd78e 100755 --- a/css/style.css +++ b/css/style.css @@ -40,32 +40,33 @@ white-space: nowrap; } #background-img { width: 100%; + left: 0%; + top: 20px; } -.background { +.container { position: relative; +text-align: center; +color: white; } -.on-background { +.over { position: absolute; - left: 30%; - top: 30%; - color: white; - font-family: 'Roboto', sans-serif; - -webkit-font-smoothing: antialiased; + top: 45%; + left: 50%; + transform: translate(-50%, -50%); + white-space: nowrap; + } -.h { - text-align: center; +.over1 { font-size: 40px; + } -.p1 { +.over2 { font-size: 30px; - text-align: center; } -.p2 { +.over3 { background-color: #F15B2A; padding: 3% 5% 3% 5%; -white-space: nowrap; -display: block; -margin: auto; +border-radius: 5px; } /** diff --git a/index.html b/index.html index 4b4f2dec4..b2b6c48dc 100755 --- a/index.html +++ b/index.html @@ -23,22 +23,27 @@

Help

Login

- +
+
-
+
+
background -
-

Introducing Karma

-

Bring WiFi with you, everywhere you go.

- - -
+
+
Introducing Karma
+
+
Bring WiFi with you, everywhere you go.
+
+
+
+



+
From f0aeb681edafeb33425d6aacc945de89e7c6af65 Mon Sep 17 00:00:00 2001 From: Ekrem Date: Wed, 27 Jul 2022 12:54:18 +0100 Subject: [PATCH 09/23] opened a section tag --- css/style.css | 7 +++++++ index.html | 4 ++++ 2 files changed, 11 insertions(+) diff --git a/css/style.css b/css/style.css index c11ddd78e..6002a1656 100755 --- a/css/style.css +++ b/css/style.css @@ -68,6 +68,13 @@ background-color: #F15B2A; padding: 3% 5% 3% 5%; border-radius: 5px; } +.container2{ +color: black; +text-align: center; +} +.s1{ + font-size: 40px; +} /** * Add your custom styles below diff --git a/index.html b/index.html index b2b6c48dc..e82bb0b2e 100755 --- a/index.html +++ b/index.html @@ -42,6 +42,10 @@


+
+

Everyone needs a little Karma.

+ +
From 5890ecf052575aac55aba6b98ce9d07820a6e05c Mon Sep 17 00:00:00 2001 From: Ekrem Date: Wed, 27 Jul 2022 13:40:54 +0100 Subject: [PATCH 10/23] added and arranged icons --- css/style.css | 17 ++++++++--- index.html | 81 ++++++++++++++++++++++++++++++--------------------- 2 files changed, 61 insertions(+), 37 deletions(-) diff --git a/css/style.css b/css/style.css index 6002a1656..3adf595cc 100755 --- a/css/style.css +++ b/css/style.css @@ -5,6 +5,7 @@ body { font-family: 'Roboto', sans-serif; -webkit-font-smoothing: antialiased; background-color: white; + white-space: nowrap; } #logo { @@ -25,18 +26,15 @@ body { .karma { color: black; margin-right: 5%; - white-space: nowrap; } .stnd { color: darkolivegreen; margin-right: 5%; - white-space: nowrap; } .store { color: #F15B2A; margin-right: 5%; -white-space: nowrap; } #background-img { width: 100%; @@ -70,10 +68,21 @@ border-radius: 5px; } .container2{ color: black; -text-align: center; } .s1{ font-size: 40px; + text-align: center; +} +.icons { + display: flex; + text-align: center; + justify-content:space-between; + margin: 0% 20% 0% 20%; +} +.icon { + width: 20%; + + } /** diff --git a/index.html b/index.html index e82bb0b2e..d5aa98df1 100755 --- a/index.html +++ b/index.html @@ -1,5 +1,6 @@ + @@ -7,51 +8,65 @@ - + +
- -
-
-
-
-
-
- background -
-
Introducing Karma
+ + +
+
-
Bring WiFi with you, everywhere you go.
-
-
- -
-
-
-
-
-
-

Everyone needs a little Karma.

+
+
+
+ background +
+
Introducing Karma
+
+
Bring WiFi with you, everywhere you go.
+
+
+ +
+
+
+
+
+
+

Everyone needs a little Karma.

+
+
+
+ devices +
+
+ coffee +
+
+ refill +
+
-
+
-
+ - + + \ No newline at end of file From 80665553f0caa2ef0143422a43f02b080e8bee8f Mon Sep 17 00:00:00 2001 From: Ekrem Date: Wed, 27 Jul 2022 14:22:30 +0100 Subject: [PATCH 11/23] added icons' descriptions --- css/style.css | 14 ++++++++++++-- index.html | 6 ++++++ 2 files changed, 18 insertions(+), 2 deletions(-) diff --git a/css/style.css b/css/style.css index 3adf595cc..2c9bd7fc2 100755 --- a/css/style.css +++ b/css/style.css @@ -80,10 +80,20 @@ color: black; margin: 0% 20% 0% 20%; } .icon { - width: 20%; + width: 15%; - } +.underIcon { + font-size: 24px; +} +.underIcons { + text-align: center; + display: flex; + justify-content:space-between; + margin: 0% 20% 0% 17%; +} + + /** * Add your custom styles below diff --git a/index.html b/index.html index d5aa98df1..fbfecb0df 100755 --- a/index.html +++ b/index.html @@ -58,6 +58,12 @@ refill +
+
+
Internet for all devices
+
Boost your productivity
+
Pay as You Go
+
From a929fd24989ed9728031d5e9a4c2b92ce010f29a Mon Sep 17 00:00:00 2001 From: Ekrem Date: Wed, 27 Jul 2022 14:31:17 +0100 Subject: [PATCH 12/23] added join us on (in footer) --- index.html | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index fbfecb0df..a61539fe3 100755 --- a/index.html +++ b/index.html @@ -64,8 +64,15 @@
Boost your productivity
Pay as You Go
- +
+
+
+
+

Join us on

+
+ +
From 416cfe6527e7d23eda44d173765af89b8d99c9a4 Mon Sep 17 00:00:00 2001 From: Ekrem Date: Wed, 27 Jul 2022 14:31:26 +0100 Subject: [PATCH 13/23] added join us on (in footer) --- css/style.css | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/css/style.css b/css/style.css index 2c9bd7fc2..8b5be745a 100755 --- a/css/style.css +++ b/css/style.css @@ -84,7 +84,7 @@ color: black; } .underIcon { - font-size: 24px; + font-size: 20px; } .underIcons { text-align: center; @@ -92,6 +92,13 @@ color: black; justify-content:space-between; margin: 0% 20% 0% 17%; } +footer { + text-align: center; + font-size: small; +} +.join { + color: black; +} From c4f8044909334ef8d0b66a4591a9768374a4428f Mon Sep 17 00:00:00 2001 From: Ekrem Date: Wed, 27 Jul 2022 15:11:25 +0100 Subject: [PATCH 14/23] completed --- css/style.css | 13 +++++++++++++ img/facebook-icon.svg | 2 +- img/instagram-icon.svg | 2 +- img/twitter-icon.svg | 2 +- index.html | 14 +++++++++++++- 5 files changed, 29 insertions(+), 4 deletions(-) diff --git a/css/style.css b/css/style.css index 8b5be745a..886dab0b5 100755 --- a/css/style.css +++ b/css/style.css @@ -99,6 +99,19 @@ footer { .join { color: black; } +.socials { + display: flex; + text-align: center; + justify-content:space-between; + margin: 0% 45% 0% 45%; +} +.social { + width: 10px; +} +.end { + font-size: medium; + color: darkgray; +} diff --git a/img/facebook-icon.svg b/img/facebook-icon.svg index b3e551475..25f334f04 100644 --- a/img/facebook-icon.svg +++ b/img/facebook-icon.svg @@ -1,4 +1,4 @@ - + diff --git a/img/instagram-icon.svg b/img/instagram-icon.svg index 56e207086..14154aee3 100644 --- a/img/instagram-icon.svg +++ b/img/instagram-icon.svg @@ -1,4 +1,4 @@ - + diff --git a/img/twitter-icon.svg b/img/twitter-icon.svg index a480cdbec..dc3ae4e63 100644 --- a/img/twitter-icon.svg +++ b/img/twitter-icon.svg @@ -1,4 +1,4 @@ - + \ No newline at end of file diff --git a/index.html b/index.html index a61539fe3..9a8415499 100755 --- a/index.html +++ b/index.html @@ -71,7 +71,19 @@

Join us on


- +
+ + + +
+
+

© Karma Mobility, Inc.

From 2b495fea544d7ec7911b179f5afc2c594cd68a07 Mon Sep 17 00:00:00 2001 From: Ekrem Date: Sat, 6 Aug 2022 10:57:16 +0100 Subject: [PATCH 15/23] Level 2 preperation --- css/style.css | 241 +++++++++++++++++++++++++++++--------------------- index.html | 139 ++++++++++++----------------- store.html | 96 ++++++++++++++++++++ 3 files changed, 291 insertions(+), 185 deletions(-) create mode 100644 store.html diff --git a/css/style.css b/css/style.css index 886dab0b5..4918741e6 100755 --- a/css/style.css +++ b/css/style.css @@ -1,128 +1,165 @@ - - /* 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; - background-color: white; - white-space: nowrap; + display: flex; + flex-direction: column; + align-items: center; + padding-top: 50px; +} +ul { + list-style: none; + display: flex; +} +li { + margin-right: 20px; +} +article { + margin: 50px; +} +#head { + display:flex; + justify-content: space-between; + width: 90%; +} +h1, +h3 { + color: rgb(248, 248, 248); + font-weight: 200; + text-align: center; +} +h6 { + text-align: center; } - -#logo { - position:absolute; - left: 2%; +#main_page { + background-image: url(../img/first-background.jpg); + background-repeat: no-repeat; + height:600px; + width: 100%; + background-size: 100%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + margin-top: 50px; +} +#karma_logo { + width: 50px; +} +.buttons { + background-color: rgb(255, 115, 0); + color:white; + border: none; height: 30px; - width: 30px; - margin-top: 10px; - margin-left: 25px; + width: 120px; + border-radius: 5px; + padding: 2px; + font-family:'Roboto'; +} +#features_part { + margin-top: 50px; } -.navmenu { - float: right; +#features { display:flex; - justify-content:space-between; - margin-right: 10%; - } -.karma { - color: black; - margin-right: 5%; - +#title_features { + color:rgb(87, 87, 87) ; } -.stnd { - color: darkolivegreen; - margin-right: 5%; +#devices { + width: 100px; } -.store { -color: #F15B2A; -margin-right: 5%; +#coffee { + width:100px; } -#background-img { - width: 100%; - left: 0%; - top: 20px; -} -.container { -position: relative; -text-align: center; -color: white; -} -.over { - position: absolute; - top: 45%; - left: 50%; - transform: translate(-50%, -50%); - white-space: nowrap; - -} -.over1 { - font-size: 40px; - +#refill { + width:100px; } -.over2 { - font-size: 30px; +#facebook_icon { + width:20px; } -.over3 { -background-color: #F15B2A; -padding: 3% 5% 3% 5%; -border-radius: 5px; +#instagram_icon { + width: 20px; } -.container2{ -color: black; +#twitter_icon { + width: 20px; } -.s1{ - font-size: 40px; - text-align: center; +.box { + margin-right: 50px; + display: flex; + flex-direction: column; + align-items: center; +} +#footer_icons { + display: flex; + justify-content: center; } .icons { + margin-right: 10px; +} +.mark { + color: orange; +} +#features_1 { +margin-top: 90px; +margin-bottom: 90px; +display: flex; +width: 100%; +} +.features_boxes { + background-color: rgb(255, 243, 221); display: flex; - text-align: center; - justify-content:space-between; - margin: 0% 20% 0% 20%; + flex-direction: column; + justify-content: center; + align-items: center; } -.icon { - width: 15%; - +.get_karma { + width: 175px; } -.underIcon { - font-size: 20px; +.quote { + padding: 70px; + width: 100%; } -.underIcons { - text-align: center; +.wherever { + color: gray; + font-weight: 100; + font-style: italic; +} +#store { + text-decoration: none; + color: black; +} +.orange_type { + color: rgb(255, 115, 0); + text-align: left; + +} +.que { display: flex; - justify-content:space-between; - margin: 0% 20% 0% 17%; } -footer { - text-align: center; - font-size: small; +.section_1 { + padding: 0 20px; + margin-right: 100px; +} +.margin_box { + margin-bottom: 30px; } -.join { - color: black; +.titles { + font-weight: bold; } -.socials { +.left_margin { + margin-left: 30px; +} +.main_design { display: flex; - text-align: center; - justify-content:space-between; - margin: 0% 45% 0% 45%; -} -.social { - width: 10px; -} -.end { - font-size: medium; - color: darkgray; -} - - - -/** - * Add your custom styles below - * - * Remember: - * - Be organised, use comments and separate your styles into meaningful chunks - * for example: General styles, Navigation styles, Hero styles, Footer etc. - * - * - When using Flexbox, remember the items you want to move around need to be inside a parent container set to 'display: flex' - */ - - + width: 100%; + justify-content: center; + margin-bottom: 50px; +} +.button_align { + display: flex; + justify-content: center; +} +#default_value { + font-style: italic; + +} \ No newline at end of file diff --git a/index.html b/index.html index 9a8415499..2749a259a 100755 --- a/index.html +++ b/index.html @@ -1,6 +1,5 @@ - @@ -8,90 +7,64 @@ - + - -
- - -
-
-
-
-
-
- background -
-
Introducing Karma
-
-
Bring WiFi with you, everywhere you go.
-
-
- -
+ +
+
+

Introducing Karma

+

Bring Wi-fi with you, everywhere you go

+
+ +
+
+

Everyone needs a little Karma

+
+
+ +

Internet for all devices

-
-
-
-
-

Everyone needs a little Karma.

-
-
-
- devices -
-
- coffee -
-
- refill -
-
-
-
-
Internet for all devices
-
Boost your productivity
-
Pay as You Go
-
-
-
-
-
-
-

Join us on

-
-
- - - -
-
-

© Karma Mobility, Inc.

-
- - -
- - - - +
+ +

Boost your productivity

+
+
+ +

Pay as you go

+
+ + + +
+
+ +
+
+

" Wherever I am, I just don't worry about my connection anymore "



+ +
+
+
+
Join us on
+ +
@ Karma mobility inc.
+
- \ No newline at end of file diff --git a/store.html b/store.html new file mode 100644 index 000000000..cf44d2c79 --- /dev/null +++ b/store.html @@ -0,0 +1,96 @@ + + + + + + + Store + + + + + + + + +
+
+

Order your Karma wifi device today

+
+
+
+
+ +
+
+
+ +
+
+
+
+ +
+
+
+ +
+
+
+
+ +
+
+
+ +
+
+
+

Select a colour

+ + + + +
+
+ +

By placing your order you agree to Karma's Terms and Conditions. *

+
+
+ +
+ +
+
+
+ +
+
+
+
Join us on
+ +
@ Karma mobility inc.
+
+ + \ No newline at end of file From e780ef7052b1b5705f8e238b2dc594f96a507283 Mon Sep 17 00:00:00 2001 From: Ekrem Date: Sat, 6 Aug 2022 11:48:13 +0100 Subject: [PATCH 16/23] I will arrange the background colour --- css/style.css | 1 - 1 file changed, 1 deletion(-) diff --git a/css/style.css b/css/style.css index 4918741e6..202189df1 100755 --- a/css/style.css +++ b/css/style.css @@ -161,5 +161,4 @@ width: 100%; } #default_value { font-style: italic; - } \ No newline at end of file From 97f24e4f1517138c80180e9d901d77c65088f707 Mon Sep 17 00:00:00 2001 From: Ekrem Date: Tue, 9 Aug 2022 16:47:40 +0100 Subject: [PATCH 17/23] last changes --- css/style.css | 4 ++++ store.html | 3 ++- 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/css/style.css b/css/style.css index 202189df1..ba9369efd 100755 --- a/css/style.css +++ b/css/style.css @@ -161,4 +161,8 @@ width: 100%; } #default_value { font-style: italic; +} +#checkbox { +background-color: orangered; +color: orange; } \ No newline at end of file diff --git a/store.html b/store.html index cf44d2c79..916585e4e 100644 --- a/store.html +++ b/store.html @@ -68,7 +68,8 @@

Order your Karma wifi device today

- + +

By placing your order you agree to Karma's Terms and Conditions. *

From 0ba2eba6f07709851e02981e30ad8b5062b00d6a Mon Sep 17 00:00:00 2001 From: Ekrem Date: Wed, 10 Aug 2022 01:03:01 +0100 Subject: [PATCH 18/23] index html was arranged --- css/style.css | 287 ++++++++++++++++++++++++++------------------------ index.html | 152 ++++++++++++++++---------- 2 files changed, 247 insertions(+), 192 deletions(-) diff --git a/css/style.css b/css/style.css index ba9369efd..261cd3cf6 100755 --- a/css/style.css +++ b/css/style.css @@ -1,168 +1,183 @@ -/* We are using the 'Roboto' font from Google. This has already been added to your HTML header */ -body { + + /* 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; - display: flex; - flex-direction: column; - align-items: center; - padding-top: 50px; -} -ul { - list-style: none; - display: flex; -} -li { - margin-right: 20px; -} -article { - margin: 50px; -} -#head { - display:flex; - justify-content: space-between; - width: 90%; -} -h1, -h3 { - color: rgb(248, 248, 248); - font-weight: 200; - text-align: center; -} -h6 { - text-align: center; -} -#main_page { - background-image: url(../img/first-background.jpg); - background-repeat: no-repeat; - height:600px; - width: 100%; - background-size: 100%; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - margin-top: 50px; -} -#karma_logo { - width: 50px; + background-color: white; + } -.buttons { - background-color: rgb(255, 115, 0); - color:white; - border: none; + +#logo { + position:absolute; + left: 2%; height: 30px; - width: 120px; - border-radius: 5px; - padding: 2px; - font-family:'Roboto'; -} -#features_part { - margin-top: 50px; + width: 30px; + margin-top: 10px; + margin-left: 25px; } -#features { +.navmenu { + float: right; display:flex; + justify-content:space-between; + margin-right: 10%; + white-space: nowrap; } -#title_features { - color:rgb(87, 87, 87) ; +.karma { + color: black; + margin-right: 5%; + } -#devices { - width: 100px; +.stnd { + color: darkolivegreen; + margin-right: 5%; } -#coffee { - width:100px; +.store { +text-decoration: none; +color: #F15B2A; +margin-right: 7px; } -#refill { - width:100px; +#background-img { + width: 100%; + left: 0%; + top: 20px; +} +.container { +position: relative; +text-align: center; +color: white; +white-space: nowrap; +} +.over { + position: absolute; + top: 45%; + left: 50%; + transform: translate(-50%, -50%); + white-space: nowrap; + +} +.over1 { + font-size: 40px; + white-space: nowrap; +} +.over2 { + font-size: 30px; + white-space: nowrap; +} +.over3 { +background-color: #F15B2A; +padding: 3% 5% 3% 5%; +border-radius: 5px; +white-space: nowrap; +} +.container2{ +color: black; +white-space: nowrap; +} +.s1{ + font-size: 40px; + text-align: center; + white-space: nowrap; } -#facebook_icon { - width:20px; +.icons { + display: flex; + text-align: center; + justify-content:space-between; + margin: 0% 20% 0% 20%; } -#instagram_icon { - width: 20px; +.icon { + width: 15%; + } -#twitter_icon { - width: 20px; +.underIcon { + font-size: 20px; } -.box { - margin-right: 50px; +.underIcons { + text-align: center; display: flex; - flex-direction: column; + justify-content:space-between; + margin: 0% 20% 0% 17%; + white-space: nowrap; +} +footer { align-items: center; + text-align: center; + font-size: small; + white-space: nowrap; + border-top-style:groove; + margin-left: 10%; + margin-right: 10%; +} +.join { + color: black; + white-space: nowrap; } -#footer_icons { +.socials { display: flex; - justify-content: center; + text-align: center; + justify-content:space-between; + margin: 0% 45% 0% 45%; + white-space: nowrap; } -.icons { - margin-right: 10px; +.social { + width: 10px; + } -.mark { - color: orange; +.end { + font-size: medium; + color: darkgray; + white-space: nowrap; } -#features_1 { -margin-top: 90px; -margin-bottom: 90px; -display: flex; -width: 100%; + +.features_1{ + margin-top: 10%; + display: grid; + grid-template-areas: "features_img features_boxes features_boxes"; + } .features_boxes { background-color: rgb(255, 243, 221); - display: flex; flex-direction: column; - justify-content: center; - align-items: center; + display: flex; +align-items: center; +flex-wrap: wrap; +width: 100%; +justify-content: center; + } -.get_karma { - width: 175px; +.features_img{ +min-width: 100%; } -.quote { - padding: 70px; - width: 100%; +.mark { + color: orange; } + .wherever { color: gray; - font-weight: 100; - font-style: italic; -} -#store { - text-decoration: none; - color: black; -} -.orange_type { - color: rgb(255, 115, 0); - text-align: left; - -} -.que { - display: flex; -} -.section_1 { - padding: 0 20px; - margin-right: 100px; -} -.margin_box { - margin-bottom: 30px; -} -.titles { - font-weight: bold; -} -.left_margin { - margin-left: 30px; -} -.main_design { - display: flex; - width: 100%; - justify-content: center; - margin-bottom: 50px; -} -.button_align { - display: flex; - justify-content: center; -} -#default_value { + font-weight:100; font-style: italic; + margin-left: 25%; + align-items: center; + margin-right: 25%; + text-align: center; } -#checkbox { -background-color: orangered; -color: orange; -} \ No newline at end of file +.over4 { + background-color: #F15B2A; +padding: 3% 5% 3% 5%; +border-radius: 5px; +border: 0cm; +color: white; +} + + +/** + * Add your custom styles below + * + * Remember: + * - Be organised, use comments and separate your styles into meaningful chunks + * for example: General styles, Navigation styles, Hero styles, Footer etc. + * + * - When using Flexbox, remember the items you want to move around need to be inside a parent container set to 'display: flex' + */ + + diff --git a/index.html b/index.html index 2749a259a..307ccd90f 100755 --- a/index.html +++ b/index.html @@ -1,5 +1,6 @@ + @@ -7,64 +8,103 @@ - + + - -
-
-

Introducing Karma

-

Bring Wi-fi with you, everywhere you go

-
- -
-
-

Everyone needs a little Karma

-
-
- -

Internet for all devices

+
+ + +
+
+
+
+
+
+ background +
+
Introducing Karma
+
+
Bring WiFi with you, everywhere you go.
+
+
+ +
-
- -

Boost your productivity

-
-
- -

Pay as you go

-
- -
-
-
-
- -
-
-

" Wherever I am, I just don't worry about my connection anymore "



- -
-
-
-
Join us on
- -
@ Karma mobility inc.
-
+
+
+
+
+

Everyone needs a little Karma.

+
+
+
+ devices +
+
+ coffee +
+
+ refill +
+
+
+
+
Internet for all devices
+
Boost your productivity
+
Pay as You Go
+
+
+
+
+ +
+
+

" Wherever I am, I just don't worry about my connection + anymore "



+ +
+
+
+
+
+
+
+
+
+

Join us on

+
+
+ + + +
+
+

© Karma Mobility, Inc.

+
+ + + + + + + + \ No newline at end of file From ed2163b5a33e5f0a1492f1679bd102de91dc016a Mon Sep 17 00:00:00 2001 From: Ekrem Date: Wed, 10 Aug 2022 01:40:52 +0100 Subject: [PATCH 19/23] store.html page was a little bit arranged --- css/style.css | 43 +++++++++++++++++++++++++++++++++++++++ store.html | 56 +++++++++++++++++++++++++++++---------------------- 2 files changed, 75 insertions(+), 24 deletions(-) diff --git a/css/style.css b/css/style.css index 261cd3cf6..a07e182be 100755 --- a/css/style.css +++ b/css/style.css @@ -169,6 +169,49 @@ border: 0cm; color: white; } +#header_store{ +background-color: darkgray; +height: fit-content; +} +.section_1 { + padding: 0 20px; + margin-right: 100px; +} +.main_design { + display: flex; + width: 100%; + justify-content: center; + margin-bottom: 50px; +} +.orange_type { + color: rgb(255, 115, 0); + text-align: left; + +} +.que { + display: flex; +} +.margin_box { + margin-bottom: 30px; +} +.titles { + font-weight: bold; +} +.left_margin { + margin-left: 30px; +} +#default_value { + font-style: italic; + +} + +.button_align { + display: flex; + justify-content: center; +} + + + /** * Add your custom styles below diff --git a/store.html b/store.html index 916585e4e..f257766e4 100644 --- a/store.html +++ b/store.html @@ -1,36 +1,43 @@ + - - - Store - + + Karma - + + -

Select a colour

@@ -71,17 +78,17 @@

Order your Karma wifi device today

By placing your order you agree to Karma's Terms and Conditions. *

-
+
+
- +
- +
@@ -94,4 +101,5 @@
Join us on
@ Karma mobility inc.
+ \ No newline at end of file From 6f2e9d175b0107e5174acb1182745349d5690229 Mon Sep 17 00:00:00 2001 From: Ekrem Date: Wed, 10 Aug 2022 01:54:46 +0100 Subject: [PATCH 20/23] completed --- css/style.css | 6 +++++- store.html | 34 ++++++++++++++++++++++------------ 2 files changed, 27 insertions(+), 13 deletions(-) diff --git a/css/style.css b/css/style.css index a07e182be..1a8370398 100755 --- a/css/style.css +++ b/css/style.css @@ -182,6 +182,7 @@ height: fit-content; width: 100%; justify-content: center; margin-bottom: 50px; + color: black; } .orange_type { color: rgb(255, 115, 0); @@ -209,7 +210,10 @@ height: fit-content; display: flex; justify-content: center; } - +.terms{ + color: rgb(255, 115, 0); + text-decoration: underline; +} diff --git a/store.html b/store.html index f257766e4..6cb431494 100644 --- a/store.html +++ b/store.html @@ -59,7 +59,7 @@

Order your Karma wifi device today


@@ -77,10 +77,10 @@

Order your Karma wifi device today

-

By placing your order you agree to Karma's Terms and Conditions. *

+

By placing your order you agree to Karma's Terms and Conditions. *

-
@@ -91,15 +91,25 @@

Order your Karma wifi device today

-
-
Join us on
- -
@ Karma mobility inc.
-
+
+
+ +

Join us on

+
+
+ + + +
+
+

© Karma Mobility, Inc.

+
\ No newline at end of file From 57a5ebdc5d4a03d3823f43a98854369a47cb974a Mon Sep 17 00:00:00 2001 From: Ekrem Date: Wed, 10 Aug 2022 02:13:18 +0100 Subject: [PATCH 21/23] Store page left side is arranged --- css/style.css | 13 +++++++------ store.html | 10 ++++------ 2 files changed, 11 insertions(+), 12 deletions(-) diff --git a/css/style.css b/css/style.css index 1a8370398..a71f4915e 100755 --- a/css/style.css +++ b/css/style.css @@ -173,16 +173,17 @@ color: white; background-color: darkgray; height: fit-content; } -.section_1 { - padding: 0 20px; - margin-right: 100px; +.img_str { +width: 100%; +height: 100%; } .main_design { - display: flex; - width: 100%; + display: grid; + align-items: center; + align-content: center; justify-content: center; - margin-bottom: 50px; color: black; + grid-template-areas: "section_1 section_2"; } .orange_type { color: rgb(255, 115, 0); diff --git a/store.html b/store.html index 6cb431494..de8ff3d5a 100644 --- a/store.html +++ b/store.html @@ -13,13 +13,10 @@
-
-
-
-


@@ -87,8 +83,10 @@

Order your Karma wifi device today

-
- +
+
+ +
From 76b0040c72501b63db28f8cc17ed4a2a2929a7fa Mon Sep 17 00:00:00 2001 From: Ekrem Date: Wed, 10 Aug 2022 13:03:16 +0100 Subject: [PATCH 22/23] I completed to arrange store.html --- css/style.css | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/css/style.css b/css/style.css index a71f4915e..afa8d3942 100755 --- a/css/style.css +++ b/css/style.css @@ -104,7 +104,7 @@ footer { text-align: center; font-size: small; white-space: nowrap; - border-top-style:groove; + border-top: rgb(195, 195, 195) solid ; margin-left: 10%; margin-right: 10%; } @@ -170,20 +170,28 @@ color: white; } #header_store{ -background-color: darkgray; +display: grid; +background-color:rgb(245, 245, 245); height: fit-content; +border-bottom: rgb(195, 195, 195) solid ; + } .img_str { width: 100%; height: 100%; } +.grid2{ + padding-left: 5%; + padding-right: 5%; +} .main_design { display: grid; + width: 100%; + grid-template-columns: 50% 50%; align-items: center; align-content: center; justify-content: center; color: black; - grid-template-areas: "section_1 section_2"; } .orange_type { color: rgb(255, 115, 0); From ecde3d3721982abbf9bcccdac72c2cc43645d2f0 Mon Sep 17 00:00:00 2001 From: Ekrem Date: Wed, 10 Aug 2022 13:03:56 +0100 Subject: [PATCH 23/23] I finished my project --- store.html | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/store.html b/store.html index de8ff3d5a..977dd0ce7 100644 --- a/store.html +++ b/store.html @@ -13,10 +13,13 @@
+
+
+
+


+

Order your Karma wifi device today

@@ -82,12 +87,15 @@

Order your Karma wifi device today

+
+
+