From 8039929d9c7b847746f5c83259e4d92ccbebe39f Mon Sep 17 00:00:00 2001 From: Zahraa <113244988+ZahraaTayyar@users.noreply.github.com> Date: Fri, 28 Oct 2022 19:26:19 +0100 Subject: [PATCH 01/21] Created the beginning of the page Started off the page --- .github/pull_request_template.md | 10 +++--- css/style.css | 54 ++++++++++++++++++++++++++++++++ index.html | 46 +++++++++++++++++++++++++++ 3 files changed, 105 insertions(+), 5 deletions(-) diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md index 46c150e15..eb3262620 100644 --- a/.github/pull_request_template.md +++ b/.github/pull_request_template.md @@ -16,14 +16,14 @@ Please complete the details below this message # Your Details -- Your Name: -- Your City: -- Your Slack Name: +- Your Name: Zahraa +- Your City: London Turing +- Your Slack Name: Zahraa Tayyar # Homework Details -- Module: -- Week: +- Module: HTML/ CSS 1 +- Week: 2 # Notes diff --git a/css/style.css b/css/style.css index 5cb025cef..4347b2b10 100755 --- a/css/style.css +++ b/css/style.css @@ -15,5 +15,59 @@ body { * * - When using Flexbox, remember the items you want to move around need to be inside a parent container set to 'display: flex' */ + + /* Header */ + .header { + padding:1rem 2rem; + margin-bottom: 3rem; + padding-top: 1rem; + } + .header_logo { + max-height: 45px; + width: auto; + display:flex; + float: left; + padding-left: 7rem; + } + + /* Navigation */ + + .nav_list { + display:flex; + flex-direction: row; + justify-content:space-between; + align-items: center; + list-style: none; + gap: 1rem; + float:right; + padding-right: 100px; + } + + .nav_item { + padding: 0.5rem 0; + margin: 0 30px 0 30px; + } + + .nav_link { + color: var(--grey-dark); + text-decoration: none; + } + + /* Main */ + + /* Hero */ + + .hero { + background-image: url(/img/first-background.jpg); + background-size: cover; + background-position: center; + background-repeat: none; + } + + .introtext { + color: white; + text-align: center; + padding: 24rem; + } diff --git a/index.html b/index.html index 3e742ef04..ab8a18ef5 100755 --- a/index.html +++ b/index.html @@ -15,5 +15,51 @@ +
+ +
+ + + +
+ + + +
+ +
+
+
+

Introducing Karma

+

Bring WiFi with you, everywhere you go.

+
+
+
+ From 24abc754c1bf1b076ff587005d4e67e4024a1456 Mon Sep 17 00:00:00 2001 From: Zahraa <113244988+ZahraaTayyar@users.noreply.github.com> Date: Fri, 28 Oct 2022 20:12:43 +0100 Subject: [PATCH 02/21] Started second section second section of front page nearly finished --- css/style.css | 42 +++++++++++++++++++++++++++++++++++++++--- index.html | 51 ++++++++++++++++++++++++++++++++++++++++++++------- 2 files changed, 83 insertions(+), 10 deletions(-) diff --git a/css/style.css b/css/style.css index 4347b2b10..68b7e6a8e 100755 --- a/css/style.css +++ b/css/style.css @@ -16,6 +16,15 @@ body { * - When using Flexbox, remember the items you want to move around need to be inside a parent container set to 'display: flex' */ + + /* text */ + +/* .header, +.main, +.footer { + font-weight: 5px; +} */ + /* Header */ .header { @@ -42,12 +51,18 @@ body { list-style: none; gap: 1rem; float:right; - padding-right: 100px; + padding-right: 7rem; + color: grey; + } + + .nav_item:hover, + .nav_item:focus { + color: orangered; } .nav_item { - padding: 0.5rem 0; - margin: 0 30px 0 30px; + padding: 0.1rem 0; + margin: 0 20px 0 20px; } .nav_link { @@ -55,6 +70,10 @@ body { text-decoration: none; } + .navmeetkarma { + font-weight: bold; + } + /* Main */ /* Hero */ @@ -64,6 +83,7 @@ body { background-size: cover; background-position: center; background-repeat: none; + margin-bottom: 10rem; } .introtext { @@ -71,3 +91,19 @@ body { text-align: center; padding: 24rem; } + + /* article */ + + .title { + text-align: center; + } + + .main_article{ + display: flex; + flex-direction: row; + justify-content: center; + } + + .icons { + padding: 5rem; + } diff --git a/index.html b/index.html index ab8a18ef5..5c9dd7e8c 100755 --- a/index.html +++ b/index.html @@ -30,35 +30,72 @@ -
+
+

Introducing Karma

Bring WiFi with you, everywhere you go.

+ +

Everyone needs a little Karma

+ +
+ +
+ + icon of internet coming from devices + +

Internet for all devices

+
+ +
+ + icon of coffee + +

Boost your productivity

+
+ +
+ + icon of coffee + +

Pay as You Go

+
+
+
From 55858c997852122948518056ce1d49e7d7740d23 Mon Sep 17 00:00:00 2001 From: Zahraa <113244988+ZahraaTayyar@users.noreply.github.com> Date: Fri, 28 Oct 2022 21:40:32 +0100 Subject: [PATCH 03/21] Footer update inserted footer --- css/style.css | 31 +++++++++++++++++++++++++++++++ index.html | 45 ++++++++++++++++++++++++++++++++++++++++++--- 2 files changed, 73 insertions(+), 3 deletions(-) diff --git a/css/style.css b/css/style.css index 68b7e6a8e..2f32b524c 100755 --- a/css/style.css +++ b/css/style.css @@ -102,8 +102,39 @@ body { display: flex; flex-direction: row; justify-content: center; + padding-bottom: 5rem; } .icons { padding: 5rem; + height: 10rem; } + + .sep_line { + padding:0 12rem; + } + + /* Footer */ + + .footer_text { + text-align: center; + padding: 10px; + } + + .footer_icons { + display:flex; + flex-direction: row; + justify-content: center; + gap: 5px; + padding: 5px; + } + + .icon_img { + height: 10px; + width: 10px; + border: solid grey; + border-radius: 20px; + padding: 20px; + margin: 0 20px; + + } \ No newline at end of file diff --git a/index.html b/index.html index 5c9dd7e8c..b33dfd18d 100755 --- a/index.html +++ b/index.html @@ -72,7 +72,7 @@

Everyone needs a little Karma

alt="icon of internet coming from devices" class="icon_devices"> -

Internet for all devices

+

Internet for all devices

@@ -82,7 +82,7 @@

Internet for all devices

alt="icon of coffee" class="icon_coffee"> -

Boost your productivity

+

Boost your productivity

@@ -92,11 +92,50 @@

Boost your productivity

alt="icon of coffee" class="icon_payg"> -

Pay as You Go

+

Pay as You Go

+
+
+ +

Join us on

+ + + From c4b8df5f67e1fefba3cdbdfa5c5423e57629fc11 Mon Sep 17 00:00:00 2001 From: Zahraa <113244988+ZahraaTayyar@users.noreply.github.com> Date: Fri, 28 Oct 2022 21:56:34 +0100 Subject: [PATCH 04/21] updated general layout Made updates to the general layout of the page --- css/style.css | 5 +++-- index.html | 4 ++++ 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/css/style.css b/css/style.css index 2f32b524c..0a2757454 100755 --- a/css/style.css +++ b/css/style.css @@ -136,5 +136,6 @@ body { border-radius: 20px; padding: 20px; margin: 0 20px; - - } \ No newline at end of file + font-size: 20px; + } + \ No newline at end of file diff --git a/index.html b/index.html index b33dfd18d..228003198 100755 --- a/index.html +++ b/index.html @@ -135,6 +135,10 @@

Join us on

+
+

Karma Mobility, Inc.

+
+ From 2431df5156a53483c0063d6452a4427d4fda12d2 Mon Sep 17 00:00:00 2001 From: Zahraa <113244988+ZahraaTayyar@users.noreply.github.com> Date: Fri, 28 Oct 2022 22:14:21 +0100 Subject: [PATCH 05/21] Fixed icon size Fixed the issue with the sizes of the icons, and aligned the page properly --- css/style.css | 19 +++++++++++++++++++ index.html | 2 +- 2 files changed, 20 insertions(+), 1 deletion(-) diff --git a/css/style.css b/css/style.css index 0a2757454..862360516 100755 --- a/css/style.css +++ b/css/style.css @@ -108,6 +108,13 @@ body { .icons { padding: 5rem; height: 10rem; + margin: 5rem; + } + + .icon_payg, + .icon_coffee, + .icon_devices { + height: 15rem; } .sep_line { @@ -138,4 +145,16 @@ body { margin: 0 20px; font-size: 20px; } + + .instagram_icon, + .facebook_icon, + .twitter_icon { + height: 30px; + } + + .copyright { + padding: 10px; + text-align: center; + color: gray; + } \ No newline at end of file diff --git a/index.html b/index.html index 228003198..e36497168 100755 --- a/index.html +++ b/index.html @@ -135,7 +135,7 @@

Join us on

-
+

Karma Mobility, Inc.

From d3c539a4cde4b90047303a4c7a756c411c3bf262 Mon Sep 17 00:00:00 2001 From: Zahraa <113244988+ZahraaTayyar@users.noreply.github.com> Date: Sun, 30 Oct 2022 13:46:52 +0000 Subject: [PATCH 06/21] Added feature section Added the feature section --- css/style.css | 32 ++++++++++++++++++++++++++------ index.html | 18 +++++++++++++++--- 2 files changed, 41 insertions(+), 9 deletions(-) diff --git a/css/style.css b/css/style.css index 862360516..b618b2098 100755 --- a/css/style.css +++ b/css/style.css @@ -30,7 +30,9 @@ body { .header { padding:1rem 2rem; margin-bottom: 3rem; - padding-top: 1rem; + margin-top: 0; + align-items: center; + /* background-color: gainsboro; */ } .header_logo { @@ -49,7 +51,7 @@ body { justify-content:space-between; align-items: center; list-style: none; - gap: 1rem; + gap: 5rem; float:right; padding-right: 7rem; color: grey; @@ -62,7 +64,7 @@ body { .nav_item { padding: 0.1rem 0; - margin: 0 20px 0 20px; + margin: 0; } .nav_link { @@ -117,8 +119,27 @@ body { height: 15rem; } - .sep_line { - padding:0 12rem; + /* .sep_line { + margin:0 12rem; + opacity: 50%; + } */ + + /* Home Page Feature */ + + .home_feature { + display:flex; + background-color:#FFE8DE; + } + + .feature_text { + text-align: center; + justify-content: center; + padding: 12rem 20rem 10rem 0; + } + + .feature_image { + height: 35rem; + margin-right: 20rem; } /* Footer */ @@ -143,7 +164,6 @@ body { border-radius: 20px; padding: 20px; margin: 0 20px; - font-size: 20px; } .instagram_icon, diff --git a/index.html b/index.html index e36497168..068d85c2b 100755 --- a/index.html +++ b/index.html @@ -15,7 +15,7 @@ -
+
@@ -50,7 +50,7 @@ -
+
@@ -97,9 +97,21 @@

Pay as You Go

+
+ + + Woman smiling at camera + +

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

+ +
+
-
+

Join us on

From 4a7f6befcb3456b874d328ff10310784756ea18e Mon Sep 17 00:00:00 2001 From: Zahraa <113244988+ZahraaTayyar@users.noreply.github.com> Date: Sun, 30 Oct 2022 15:24:04 +0000 Subject: [PATCH 07/21] Started store page Started working on html of store page --- css/store.css | 0 css/style.css | 20 +++++--- store.html | 136 ++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 149 insertions(+), 7 deletions(-) create mode 100644 css/store.css create mode 100644 store.html diff --git a/css/store.css b/css/store.css new file mode 100644 index 000000000..e69de29bb diff --git a/css/style.css b/css/style.css index b618b2098..14a4c3a92 100755 --- a/css/style.css +++ b/css/style.css @@ -65,17 +65,23 @@ body { .nav_item { padding: 0.1rem 0; margin: 0; - } - - .nav_link { - color: var(--grey-dark); - text-decoration: none; + color: gray; } .navmeetkarma { font-weight: bold; + color: gray; } + .navhowitworks, + .navstore, + .navblog, + .navhelp, + .navkarma { + color:gray; + } + + /* Main */ /* Hero */ @@ -119,10 +125,10 @@ body { height: 15rem; } - /* .sep_line { + .sep_line { margin:0 12rem; opacity: 50%; - } */ + } /* Home Page Feature */ diff --git a/store.html b/store.html new file mode 100644 index 000000000..e7ae47f45 --- /dev/null +++ b/store.html @@ -0,0 +1,136 @@ + + + + + + Karma + + + + + + + + +
+ +
+ + + +
+ + + +
+ +
+ +
+

Order your Karma wifi device today!

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

Join us on

+ +
+ +
+ + + +
+ +
+ + + +
+ +
+ + instagram icon + +
+ +
+ +
+

Karma Mobility, Inc.

+
+ +
+ + + + \ No newline at end of file From ac8358f5b06b47751cd14c0238c329c8041bf165 Mon Sep 17 00:00:00 2001 From: Zahraa <113244988+ZahraaTayyar@users.noreply.github.com> Date: Sun, 30 Oct 2022 16:07:51 +0000 Subject: [PATCH 08/21] developed CSS developed css --- css/store.css | 34 ++++++++++++++++++++++++++++++++++ css/style.css | 2 +- store.html | 35 +++++++++++++++++++++++++++-------- 3 files changed, 62 insertions(+), 9 deletions(-) diff --git a/css/store.css b/css/store.css index e69de29bb..c12e5cc86 100644 --- a/css/store.css +++ b/css/store.css @@ -0,0 +1,34 @@ + +/* main */ + +.main { + display: flex; +} + +.store_title { + color: #E14E00; +} + +.order_form{ + display: flex; + flex-direction: column; + justify-content: center; + width: 40%; +} + +button { + background-color: #E14E00; + padding: 1rem; + margin: 2rem 30rem 2rem 0; + justify-content: left; + color: white; +} + + + +/* image */ + +.store_image1 { + float: right; + width: 100px; +} \ No newline at end of file diff --git a/css/style.css b/css/style.css index 14a4c3a92..07c1ac924 100755 --- a/css/style.css +++ b/css/style.css @@ -59,7 +59,7 @@ body { .nav_item:hover, .nav_item:focus { - color: orangered; + color: #E14E00; } .nav_item { diff --git a/store.html b/store.html index e7ae47f45..6571be4da 100644 --- a/store.html +++ b/store.html @@ -7,6 +7,7 @@ + @@ -51,17 +52,21 @@
-
-

Order your Karma wifi device today!

-
-
- - +
+

Order your Karma wifi device today!

+
+ +
+ + + + + + - - +
@@ -84,8 +89,22 @@

Order your Karma wifi device today!

+ + + + +
+
+ + woman working on her laptop sitting on a long desk + +
+
From f4405a8e164fef75983065ffc21c20d9b9b8bd4d Mon Sep 17 00:00:00 2001 From: Zahraa <113244988+ZahraaTayyar@users.noreply.github.com> Date: Mon, 31 Oct 2022 17:56:41 +0000 Subject: [PATCH 09/21] updated css and layout --- css/store.css | 32 ++++++++++++++++++++++++++++++-- store.html | 32 ++++++++++++++++++++------------ 2 files changed, 50 insertions(+), 14 deletions(-) diff --git a/css/store.css b/css/store.css index c12e5cc86..79581e645 100644 --- a/css/store.css +++ b/css/store.css @@ -1,8 +1,10 @@ /* main */ -.main { +main { display: flex; + flex-direction: row; + margin:0; } .store_title { @@ -14,6 +16,28 @@ flex-direction: column; justify-content: center; width: 40%; + margin: 7rem; +} + +.input { + border:solid 1.5px gray; + border-radius: 5px; + margin: 0 5px 2rem 0; + padding: 1rem; +} + +label { + margin-bottom: 1rem; +} + +input, +label { + display: block; +} + +fieldset { + border: none; + display:flex; } button { @@ -22,6 +46,8 @@ button { margin: 2rem 30rem 2rem 0; justify-content: left; color: white; + border-radius: 0.2rem;; + border: none; } @@ -29,6 +55,8 @@ button { /* image */ .store_image1 { + display: flex; + justify-content: right; float: right; - width: 100px; + width: 80%; } \ No newline at end of file diff --git a/store.html b/store.html index 6571be4da..f5983a3c4 100644 --- a/store.html +++ b/store.html @@ -58,7 +58,7 @@

Order your Karma wifi device today!

-
+
@@ -74,22 +74,30 @@

Order your Karma wifi device today!

- - +
+ + + + + + - - +
- - +
+ Select a colour - - + + + + + +
- + From 0873be2b13b9d16c2e659d09f54a0e00cdb58979 Mon Sep 17 00:00:00 2001 From: Zahraa <113244988+ZahraaTayyar@users.noreply.github.com> Date: Mon, 31 Oct 2022 18:27:52 +0000 Subject: [PATCH 10/21] Updated css to match updated CSS of the store page to allow it to match layout. Had trouble aligning form. linked navigation bar with their respective "home" and "store" pages. --- css/store.css | 14 ++++++++++---- index.html | 4 ++-- store.html | 24 ++++++++++++++++-------- 3 files changed, 28 insertions(+), 14 deletions(-) diff --git a/css/store.css b/css/store.css index 79581e645..492fd0023 100644 --- a/css/store.css +++ b/css/store.css @@ -9,13 +9,14 @@ main { .store_title { color: #E14E00; + margin-top:0; } .order_form{ display: flex; flex-direction: column; - justify-content: center; - width: 40%; + /* justify-content: center; */ + width: 50%; margin: 7rem; } @@ -32,12 +33,17 @@ label { input, label { - display: block; + /* display: block; */ } fieldset { border: none; display:flex; + gap: 2rem; +} + +.name_section { + margin-top: 4rem; } button { @@ -58,5 +64,5 @@ button { display: flex; justify-content: right; float: right; - width: 80%; + width: 90%; } \ No newline at end of file diff --git a/index.html b/index.html index 068d85c2b..b08f3e79d 100755 --- a/index.html +++ b/index.html @@ -30,13 +30,13 @@
- - +
+ + + - - + + + +
@@ -97,9 +101,13 @@

Order your Karma wifi device today!

- - +
+ + + +
+ From 9a2b0f4c0647a475e3e724aff7efbfd86e473b13 Mon Sep 17 00:00:00 2001 From: Zahraa <113244988+ZahraaTayyar@users.noreply.github.com> Date: Mon, 31 Oct 2022 18:40:08 +0000 Subject: [PATCH 11/21] form width: auto --- css/store.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/css/store.css b/css/store.css index 492fd0023..43057cb69 100644 --- a/css/store.css +++ b/css/store.css @@ -16,7 +16,7 @@ main { display: flex; flex-direction: column; /* justify-content: center; */ - width: 50%; + width: auto; margin: 7rem; } From acdb1c335b3776ecae876161ed287ffd8b653987 Mon Sep 17 00:00:00 2001 From: Zahraa <113244988+ZahraaTayyar@users.noreply.github.com> Date: Mon, 31 Oct 2022 21:10:13 +0000 Subject: [PATCH 12/21] update spacing between input sections --- css/store.css | 9 +++++++-- store.html | 2 +- 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/css/store.css b/css/store.css index 43057cb69..4d35fdabd 100644 --- a/css/store.css +++ b/css/store.css @@ -23,12 +23,12 @@ main { .input { border:solid 1.5px gray; border-radius: 5px; - margin: 0 5px 2rem 0; + margin: 0 5px 1rem 0; padding: 1rem; } label { - margin-bottom: 1rem; + /* margin-bottom: 1rem; */ } input, @@ -46,6 +46,11 @@ fieldset { margin-top: 4rem; } +.address_section { + display: flex; + flex-direction: column; +} + button { background-color: #E14E00; padding: 1rem; diff --git a/store.html b/store.html index f04d2aab4..440e13b7b 100644 --- a/store.html +++ b/store.html @@ -68,7 +68,7 @@

Order your Karma wifi device today!

-
+
From c652d72b00fa036e1fb59a68dfd3e30808006e3c Mon Sep 17 00:00:00 2001 From: Zahraa <113244988+ZahraaTayyar@users.noreply.github.com> Date: Mon, 31 Oct 2022 21:21:26 +0000 Subject: [PATCH 13/21] layout --- css/store.css | 26 ++++++++++++++------------ 1 file changed, 14 insertions(+), 12 deletions(-) diff --git a/css/store.css b/css/store.css index 4d35fdabd..707cb0432 100644 --- a/css/store.css +++ b/css/store.css @@ -36,6 +36,19 @@ label { /* display: block; */ } +button { + background-color: #E14E00; + padding: 1rem; + margin: 2rem 30rem 2rem 0; + justify-content: left; + color: white; + border-radius: 0.2rem;; + border: none; +} + + +/* fieldsets */ + fieldset { border: none; display:flex; @@ -49,20 +62,9 @@ fieldset { .address_section { display: flex; flex-direction: column; + margin-bottom: 2rem; } -button { - background-color: #E14E00; - padding: 1rem; - margin: 2rem 30rem 2rem 0; - justify-content: left; - color: white; - border-radius: 0.2rem;; - border: none; -} - - - /* image */ .store_image1 { From c0da6102180ca70c1088c73b743d87b2c76a896d Mon Sep 17 00:00:00 2001 From: Zahraa <113244988+ZahraaTayyar@users.noreply.github.com> Date: Mon, 31 Oct 2022 21:50:10 +0000 Subject: [PATCH 14/21] spacing fixed --- css/store.css | 9 +++++++++ store.html | 4 ++-- 2 files changed, 11 insertions(+), 2 deletions(-) diff --git a/css/store.css b/css/store.css index 707cb0432..c792c6315 100644 --- a/css/store.css +++ b/css/store.css @@ -5,6 +5,7 @@ main { display: flex; flex-direction: row; margin:0; + color:gray; } .store_title { @@ -65,6 +66,14 @@ fieldset { margin-bottom: 2rem; } +.colour_section { + margin: 2rem 0 2rem 0; +} + +.colour_title { + margin: 2rem 0 1rem 0; +} + /* image */ .store_image1 { diff --git a/store.html b/store.html index 440e13b7b..8932c141e 100644 --- a/store.html +++ b/store.html @@ -90,8 +90,8 @@

Order your Karma wifi device today!

-
- Select a colour +
+ Select a colour From cdcda236bcfa2253a03cc4f567c2bd920ca440ea Mon Sep 17 00:00:00 2001 From: Zahraa <113244988+ZahraaTayyar@users.noreply.github.com> Date: Mon, 31 Oct 2022 23:45:51 +0000 Subject: [PATCH 15/21] css --- css/store.css | 4 ++++ css/style.css | 6 +++--- index.html | 2 +- store.html | 2 +- 4 files changed, 9 insertions(+), 5 deletions(-) diff --git a/css/store.css b/css/store.css index c792c6315..b05d92ef0 100644 --- a/css/store.css +++ b/css/store.css @@ -13,6 +13,8 @@ main { margin-top:0; } +/* Form */ + .order_form{ display: flex; flex-direction: column; @@ -35,6 +37,7 @@ label { input, label { /* display: block; */ + width:auto; } button { @@ -54,6 +57,7 @@ fieldset { border: none; display:flex; gap: 2rem; + width:auto; } .name_section { diff --git a/css/style.css b/css/style.css index 07c1ac924..4d0158e64 100755 --- a/css/style.css +++ b/css/style.css @@ -60,24 +60,24 @@ body { .nav_item:hover, .nav_item:focus { color: #E14E00; + font-weight: bold; } .nav_item { padding: 0.1rem 0; margin: 0; - color: gray; } .navmeetkarma { font-weight: bold; - color: gray; } + .navmeetkarma, .navhowitworks, .navstore, .navblog, .navhelp, - .navkarma { + .navlogin { color:gray; } diff --git a/index.html b/index.html index b08f3e79d..399633868 100755 --- a/index.html +++ b/index.html @@ -45,7 +45,7 @@ Help
  • - Login + Login
    • diff --git a/store.html b/store.html index 8932c141e..2dcb76987 100644 --- a/store.html +++ b/store.html @@ -43,7 +43,7 @@ Help
  • - Login + Login
    • From 1468c45518a342a82d3b687ab8884b83603eee19 Mon Sep 17 00:00:00 2001 From: Zahraa <113244988+ZahraaTayyar@users.noreply.github.com> Date: Sat, 5 Nov 2022 13:19:04 +0000 Subject: [PATCH 16/21] form layout update --- css/store.css | 52 +++++++++++++++++++++------------- store.html | 77 ++++++++++++++++++++++++++++----------------------- 2 files changed, 74 insertions(+), 55 deletions(-) diff --git a/css/store.css b/css/store.css index b05d92ef0..b93277e6a 100644 --- a/css/store.css +++ b/css/store.css @@ -19,31 +19,22 @@ main { display: flex; flex-direction: column; /* justify-content: center; */ - width: auto; + width: 100%; margin: 7rem; } .input { border:solid 1.5px gray; border-radius: 5px; - margin: 0 5px 1rem 0; padding: 1rem; + width:100%; + margin-top: 1rem; } -label { - /* margin-bottom: 1rem; */ -} - -input, -label { - /* display: block; */ - width:auto; -} - -button { +.button { background-color: #E14E00; padding: 1rem; - margin: 2rem 30rem 2rem 0; + /* margin: 2rem 40rem 2rem 0; */ justify-content: left; color: white; border-radius: 0.2rem;; @@ -51,7 +42,7 @@ button { } -/* fieldsets */ +/* Form Divs*/ fieldset { border: none; @@ -61,28 +52,49 @@ fieldset { } .name_section { + display:flex; + flex-direction: row; margin-top: 4rem; + margin-bottom: 2rem;; + width: 100%; } .address_section { display: flex; flex-direction: column; margin-bottom: 2rem; + width:100%; +} + +#address { + margin-bottom:3rem; +} + +.location_section { + display: flex; + flex-direction: row; + width:100%; + margin-bottom: 2rem; } .colour_section { - margin: 2rem 0 2rem 0; + margin: 2rem 0 5rem 0; } .colour_title { margin: 2rem 0 1rem 0; } +.terms_cond { + display: flex; + margin:0; + width: 100%; +} + /* image */ .store_image1 { - display: flex; - justify-content: right; - float: right; - width: 90%; + width: 100%; + height: 100%; + object-fit: cover; } \ No newline at end of file diff --git a/store.html b/store.html index 2dcb76987..2f3290e36 100644 --- a/store.html +++ b/store.html @@ -58,37 +58,45 @@

    Order your Karma wifi device today!

    -
    - - - - - - - -
    - -
    - - - - - - - -
    +
    +
    + + +
    +
    + + +
    +
    -
    +
    +
    + + - - +
    +
    + + - - +
    +
    -
    +
    +
    + + +
    +
    + + +
    +
    Select a colour @@ -97,18 +105,17 @@

    Order your Karma wifi device today!

    - - +
    -
    - +
    - - -
    + + - + From c5eb8541654a40b776706e5d4e07bac8e9a4e068 Mon Sep 17 00:00:00 2001 From: Zahraa <113244988+ZahraaTayyar@users.noreply.github.com> Date: Sun, 6 Nov 2022 13:27:35 +0000 Subject: [PATCH 17/21] css and html styling --- css/store.css | 48 +++++++++++++++++++++++++++++++----------------- css/style.css | 9 --------- index.html | 22 +--------------------- store.html | 37 ++++--------------------------------- 4 files changed, 36 insertions(+), 80 deletions(-) diff --git a/css/store.css b/css/store.css index b93277e6a..f3edcfd0b 100644 --- a/css/store.css +++ b/css/store.css @@ -18,7 +18,6 @@ main { .order_form{ display: flex; flex-direction: column; - /* justify-content: center; */ width: 100%; margin: 7rem; } @@ -31,17 +30,6 @@ main { margin-top: 1rem; } -.button { - background-color: #E14E00; - padding: 1rem; - /* margin: 2rem 40rem 2rem 0; */ - justify-content: left; - color: white; - border-radius: 0.2rem;; - border: none; -} - - /* Form Divs*/ fieldset { @@ -52,8 +40,10 @@ fieldset { } .name_section { - display:flex; + display: flex; flex-direction: row; + justify-content: space-between; + gap: 5rem; margin-top: 4rem; margin-bottom: 2rem;; width: 100%; @@ -67,18 +57,21 @@ fieldset { } #address { - margin-bottom:3rem; + margin-bottom:2rem; } .location_section { display: flex; flex-direction: row; + justify-content: space-between; + gap: 2rem; width:100%; margin-bottom: 2rem; } + .colour_section { - margin: 2rem 0 5rem 0; + margin: 2rem 0 7rem 0; } .colour_title { @@ -87,14 +80,35 @@ fieldset { .terms_cond { display: flex; - margin:0; + flex-direction: row; + justify-content: left; + margin-bottom:3rem; width: 100%; } +.button { + background-color: #E14E00; + padding: 1rem; + justify-content: left; + color: white; + border-radius: 0.2rem;; + border: none; + margin-right: 50%; +} + +/* Radio Styling */ + +/* Checkbox Styling */ + +input [type="checkbox"]:before { + color: #E14E00; + transform: scale(0); +} + /* image */ .store_image1 { - width: 100%; + max-width: 100%; height: 100%; object-fit: cover; } \ No newline at end of file diff --git a/css/style.css b/css/style.css index 4d0158e64..41cfe18fc 100755 --- a/css/style.css +++ b/css/style.css @@ -17,13 +17,6 @@ body { */ - /* text */ - -/* .header, -.main, -.footer { - font-weight: 5px; -} */ /* Header */ @@ -32,7 +25,6 @@ body { margin-bottom: 3rem; margin-top: 0; align-items: center; - /* background-color: gainsboro; */ } .header_logo { @@ -81,7 +73,6 @@ body { color:gray; } - /* Main */ /* Hero */ diff --git a/index.html b/index.html index 399633868..58a150c4b 100755 --- a/index.html +++ b/index.html @@ -26,7 +26,6 @@ /> - -
    - -
    +

    Introducing Karma

    Bring WiFi with you, everywhere you go.

    -

    Everyone needs a little Karma

    - -
    - Pay as You Go class="feature_image">

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

    -
    -

    Join us on

    - - diff --git a/store.html b/store.html index 2f3290e36..bc0ddc752 100644 --- a/store.html +++ b/store.html @@ -14,7 +14,6 @@
    -
    - -
    -
    -

    Order your Karma wifi device today!

    -
    @@ -68,20 +62,16 @@

    Order your Karma wifi device today!

    -
    -
    -
    -
    @@ -97,28 +87,21 @@

    Order your Karma wifi device today!

    -
    Select a colour - - - - + +
    -
    -
    - - - + +
    -
    Order your Karma wifi device today! class="store_image1">
    -
    - - \ No newline at end of file From 09131f4fb4d4b011f0d567792bb9ad01a6fa0253 Mon Sep 17 00:00:00 2001 From: Zahraa <113244988+ZahraaTayyar@users.noreply.github.com> Date: Mon, 7 Nov 2022 23:38:43 +0000 Subject: [PATCH 18/21] fixed header issue fixed header issue. to fix: 1. logo disappeared from header. 2. radio buttons taking up too much space 3. checkmark box too big and right-aligned 4. main site image taking up too much space --- css/store.css | 3 +-- css/style.css | 21 +++++++++++---------- index.html | 7 +++---- store.html | 6 +++--- 4 files changed, 18 insertions(+), 19 deletions(-) diff --git a/css/store.css b/css/store.css index f3edcfd0b..5fc337541 100644 --- a/css/store.css +++ b/css/store.css @@ -1,7 +1,7 @@ /* main */ -main { +.main_store { display: flex; flex-direction: row; margin:0; @@ -69,7 +69,6 @@ fieldset { margin-bottom: 2rem; } - .colour_section { margin: 2rem 0 7rem 0; } diff --git a/css/style.css b/css/style.css index 41cfe18fc..c984ad55a 100755 --- a/css/style.css +++ b/css/style.css @@ -20,19 +20,20 @@ body { /* Header */ - .header { - padding:1rem 2rem; - margin-bottom: 3rem; - margin-top: 0; + header { + padding: 0; + margin: 0; align-items: center; + display: flex; + justify-content: space-between; + background-color: #F2F2F2; } - .header_logo { + .header_logo_container { max-height: 45px; width: auto; - display:flex; - float: left; - padding-left: 7rem; + margin-left: 7rem; + /* border: 4px solid blue; */ } /* Navigation */ @@ -40,11 +41,11 @@ body { .nav_list { display:flex; flex-direction: row; - justify-content:space-between; + /* justify-content:space-between; */ align-items: center; list-style: none; gap: 5rem; - float:right; + /* float:right; */ padding-right: 7rem; color: grey; } diff --git a/index.html b/index.html index 58a150c4b..c77bbffe7 100755 --- a/index.html +++ b/index.html @@ -16,8 +16,7 @@
    - -
    +
    -
    -
    + +
  • instagram icon + class="contact_icon"> -
    • - + +

    Karma Mobility, Inc.

    diff --git a/store.html b/store.html index bc951aa9b..44ecb8879 100644 --- a/store.html +++ b/store.html @@ -113,37 +113,35 @@

    Order your Karma wifi device today!

    - + \ No newline at end of file From 1b27604cbfa918f853bc08dff46293724ae98c9e Mon Sep 17 00:00:00 2001 From: Zahraa <113244988+ZahraaTayyar@users.noreply.github.com> Date: Sat, 12 Nov 2022 15:10:18 +0000 Subject: [PATCH 20/21] header hover amended --- css/style.css | 22 +++++++--------------- store.html | 28 ++++++++++++++-------------- 2 files changed, 21 insertions(+), 29 deletions(-) diff --git a/css/style.css b/css/style.css index 5403d9e48..3e234109c 100755 --- a/css/style.css +++ b/css/style.css @@ -38,7 +38,7 @@ body { /* Navigation */ - .nav_list { + .nav_list_container { display:flex; flex-direction: row; /* justify-content:space-between; */ @@ -50,28 +50,20 @@ body { color: grey; } - .nav_item:hover, - .nav_item:focus { - color: #E14E00; - font-weight: bold; - } - .nav_item { padding: 0.1rem 0; margin: 0; + color: gray; } - .navmeetkarma { + .nav_item:hover, + .nac_item:focus { + color: #E14E00; font-weight: bold; } - .navmeetkarma, - .navhowitworks, - .navstore, - .navblog, - .navhelp, - .navlogin { - color:gray; + #navmeetkarma { + font-weight: bold; } /* Main */ diff --git a/store.html b/store.html index 44ecb8879..16c4eeb9c 100644 --- a/store.html +++ b/store.html @@ -24,24 +24,24 @@ @@ -143,5 +143,5 @@

    Join us on

    Karma Mobility, Inc.

    - + \ No newline at end of file From c6268d93ab11fffd12c640fdde129cb40063d281 Mon Sep 17 00:00:00 2001 From: Zahraa <113244988+ZahraaTayyar@users.noreply.github.com> Date: Sat, 12 Nov 2022 15:11:28 +0000 Subject: [PATCH 21/21] header --- index.html | 30 +++++++++++++++--------------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/index.html b/index.html index 49e9f23e5..2aeefaa4d 100755 --- a/index.html +++ b/index.html @@ -17,7 +17,7 @@
    - + Logo for Karma
    -