From 463e1f4baf343279f325926e9dcba4d107f7bd39 Mon Sep 17 00:00:00 2001 From: mandy-cheung <109825538+m4ndycheung@users.noreply.github.com> Date: Fri, 27 Jan 2023 19:38:41 +0000 Subject: [PATCH 01/23] Updated index.html Added mark up for basic content --- index.html | 45 +++++++++++++++++++++++++++++++++++++++++---- 1 file changed, 41 insertions(+), 4 deletions(-) diff --git a/index.html b/index.html index 3e742ef04..ff8459963 100755 --- a/index.html +++ b/index.html @@ -10,10 +10,47 @@ - - - - +
+ Karma logo + +
+
+

Introducing Karma

+

Bring WiFi with you, everywhere you go.

+ +
+
+

Everyone needs a little Karma.

+
+ Electronic devices +

+
+
+ Hot coffee cup +

+
+
+ Plugged in device +

+
+
+
+ From 38e0d8f8bdd9a9d0e3a7e6ae37ff8a505c091138 Mon Sep 17 00:00:00 2001 From: mandy-cheung <109825538+m4ndycheung@users.noreply.github.com> Date: Fri, 27 Jan 2023 19:45:37 +0000 Subject: [PATCH 02/23] Added root colours --- css/style.css | 28 +++++++++++++++++++--------- 1 file changed, 19 insertions(+), 9 deletions(-) diff --git a/css/style.css b/css/style.css index 5cb025cef..c8223c29d 100755 --- a/css/style.css +++ b/css/style.css @@ -1,19 +1,29 @@ /* We are using the 'Roboto' font from Google. This has already been added to your HTML header */ +:root { + --orange: #E0633A; + --light__grey: #848993; + --dark__grey: #4D5057; +} + body { font-family: 'Roboto', sans-serif; -webkit-font-smoothing: antialiased; } -/** - * 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' - */ +/* General */ + + +/* Navigation */ + + +/* Hero */ + + +/* Main Content */ + + +/* Footer */ From 08cc0019ba936d0717c019dd9456810bb80ac981 Mon Sep 17 00:00:00 2001 From: mandy-cheung <109825538+m4ndycheung@users.noreply.github.com> Date: Fri, 27 Jan 2023 20:33:17 +0000 Subject: [PATCH 03/23] Added CSS Grid layout --- css/style.css | 40 +++++++++++++++++++----- index.html | 84 ++++++++++++++++++++++++++------------------------- 2 files changed, 76 insertions(+), 48 deletions(-) diff --git a/css/style.css b/css/style.css index c8223c29d..5ac8d54c8 100755 --- a/css/style.css +++ b/css/style.css @@ -1,29 +1,55 @@ - /* We are using the 'Roboto' font from Google. This has already been added to your HTML header */ - +/* General */ :root { --orange: #E0633A; --light__grey: #848993; --dark__grey: #4D5057; } +html, body { + margin: 0; + padding: 0; +} + body { font-family: 'Roboto', sans-serif; -webkit-font-smoothing: antialiased; } -/* General */ +img { + max-width: 100%; +} +/* Grid */ +.container { + display: grid; + gap: 1.5rem; + grid-template-columns: 150px auto 150px; +} -/* Navigation */ +.container > * { + grid-column: 2; + min-width: 0; +} +/* Navigation */ +header { + grid-column: 2 / 3; +} /* Hero */ - +.hero { + grid-column: 2 / 3; + background-image: url(../img/first-background.jpg); +} /* Main Content */ - +main { + grid-column: 2 / 3; +} /* Footer */ - +footer { + grid-column: 2 / 3; +} diff --git a/index.html b/index.html index ff8459963..a80cd12f4 100755 --- a/index.html +++ b/index.html @@ -10,47 +10,49 @@ -
- Karma logo - -
-
-

Introducing Karma

-

Bring WiFi with you, everywhere you go.

- -
-
-

Everyone needs a little Karma.

-
- Electronic devices -

-
-
- Hot coffee cup -

-
-
- Plugged in device -

-
-
-
- +
+
+ Karma logo + +
+
+

Introducing Karma

+

Bring WiFi with you, everywhere you go.

+ +
+
+

Everyone needs a little Karma.

+
+ Electronic devices +

+
+
+ Hot coffee cup +

+
+
+ Plugged in device +

+
+
+
+ +
From d6d6618939fb5df93aaea1bfa132317ac85b44a2 Mon Sep 17 00:00:00 2001 From: mandy-cheung <109825538+m4ndycheung@users.noreply.github.com> Date: Fri, 27 Jan 2023 20:45:00 +0000 Subject: [PATCH 04/23] Edited nav bar and added Karma logo --- 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 5ac8d54c8..09bdc0c76 100755 --- a/css/style.css +++ b/css/style.css @@ -33,8 +33,27 @@ img { } /* Navigation */ +header img { + max-width: 1.5rem; +} + header { grid-column: 2 / 3; + display: flex; + flex-direction: row; + justify-content: space-between; + +} + +nav ul { + display: flex; + flex-direction: row; + align-items: center; +} + +nav li { + margin: 0 2rem; + list-style: none; } /* Hero */ diff --git a/index.html b/index.html index a80cd12f4..81adb533e 100755 --- a/index.html +++ b/index.html @@ -12,7 +12,7 @@
- Karma logo + Karma logo
-

Introducing Karma

-

Bring WiFi with you, everywhere you go.

- +
+

Introducing Karma

+

Bring WiFi with you, everywhere you go.

+ +

Everyone needs a little Karma.

From 1972b2fe83cec789366eee395b8f4907e2a2ba65 Mon Sep 17 00:00:00 2001 From: mandy-cheung <109825538+m4ndycheung@users.noreply.github.com> Date: Fri, 27 Jan 2023 22:02:21 +0000 Subject: [PATCH 08/23] Updated main section and added a section break removed max-width: 100% and changed to width: 100% - this was messing with my images. --- css/style.css | 41 +++++++++++++++++++++++++++++++++++++---- index.html | 43 +++++++++++++++++++++++++++++-------------- 2 files changed, 66 insertions(+), 18 deletions(-) diff --git a/css/style.css b/css/style.css index 933524ae5..67293cb94 100755 --- a/css/style.css +++ b/css/style.css @@ -18,7 +18,7 @@ body { } img { - max-width: 100%; + width: 100%; } /* Grid */ @@ -26,6 +26,7 @@ img { display: grid; gap: 1rem; grid-template-columns: 100px auto 100px; + justify-content: center; } .container > * { @@ -61,7 +62,7 @@ nav li { background-image: url(../img/first-background.jpg); } -.hero__container { +.center__container { text-align: center; padding: 13rem; } @@ -97,8 +98,37 @@ button:hover { } /* Main Content */ -main { - grid-column: 2 / 3; +main .center__container { + text-align: center; + padding: 3rem; +} + +main h2 { + text-align: center; + font-weight: 300; + font-size: 2rem; + letter-spacing: 0.1rem; +} + +main p { + font-size: 1.2rem; +} + +.wrapper { + display: flex; + gap: 2rem; +} + +main img { + max-width: 50%; +} + +/* Break Line */ +.section__break { + height: 1px; + width: 95%; + background-color: #F1F2F3; + justify-self: center; } /* Footer */ @@ -106,3 +136,6 @@ footer { grid-column: 2 / 3; } + + + diff --git a/index.html b/index.html index 3d5f830c8..b06009fed 100755 --- a/index.html +++ b/index.html @@ -11,6 +11,7 @@
+
Karma logo
+
-
+

Introducing Karma

Bring WiFi with you, everywhere you go.

+
-

Everyone needs a little Karma.

-
- Electronic devices -

-
-
- Hot coffee cup -

-
-
- Plugged in device -

-
+ +
+

Everyone needs a little Karma.

+ +
+
+ Electronic devices +

Internet for all devices

+
+ +
+ Hot coffee cup +

Boost your productivity

+
+ +
+ Plugged in device +

Pay as You Go

+
+
+
+
+
+

Join us on

Twitter @@ -54,6 +68,7 @@

Everyone needs a little Karma.

Instagram

© Karma Mobility, Inc.

+
From f2ebb1831f8f6e4f2d5c670dd84b8fe8bf7b87f9 Mon Sep 17 00:00:00 2001 From: mandy-cheung <109825538+m4ndycheung@users.noreply.github.com> Date: Fri, 27 Jan 2023 22:15:09 +0000 Subject: [PATCH 09/23] Updated footer centered items, put a border around social icons, changed colours --- css/style.css | 31 ++++++++++++++++++++++++++++--- index.html | 10 ++++++---- 2 files changed, 34 insertions(+), 7 deletions(-) diff --git a/css/style.css b/css/style.css index 67293cb94..24c53b755 100755 --- a/css/style.css +++ b/css/style.css @@ -3,6 +3,7 @@ :root { --orange: #E0633A; --light__grey: #848993; + --lighter__grey: #F1F2F3; --dark__grey: #4D5057; --white: #FFF; } @@ -21,6 +22,10 @@ img { width: 100%; } +a:hover { + color: var(--orange); +} + /* Grid */ .container { display: grid; @@ -64,6 +69,9 @@ nav li { .center__container { text-align: center; +} + +.hero .center__container { padding: 13rem; } @@ -98,8 +106,8 @@ button:hover { } /* Main Content */ -main .center__container { - text-align: center; + +main { padding: 3rem; } @@ -127,13 +135,30 @@ main img { .section__break { height: 1px; width: 95%; - background-color: #F1F2F3; + background-color: var(--lighter__grey); justify-self: center; } /* Footer */ footer { grid-column: 2 / 3; + margin-bottom: 3rem; +} + +footer p { + text-align: center; + font-size: 0.8rem; +} + +.copyright__text { + color: var(--light__grey); +} +footer img { + max-width: 2%; + padding: 0.5rem; + margin: 0 0.5rem; + border: 0.1rem solid var(--lighter__grey); + border-radius: 2rem; } diff --git a/index.html b/index.html index b06009fed..2ae12acea 100755 --- a/index.html +++ b/index.html @@ -63,10 +63,12 @@

Everyone needs a little Karma.

From fc3a673fe1b7834500b1929a2349d7f5d37ca15b Mon Sep 17 00:00:00 2001 From: mandy-cheung <109825538+m4ndycheung@users.noreply.github.com> Date: Fri, 27 Jan 2023 22:18:41 +0000 Subject: [PATCH 10/23] Added links to nav bar removed text decoration and changed link colour on hover to orange --- css/style.css | 5 +++++ index.html | 12 ++++++------ 2 files changed, 11 insertions(+), 6 deletions(-) diff --git a/css/style.css b/css/style.css index 24c53b755..6a1ead808 100755 --- a/css/style.css +++ b/css/style.css @@ -22,6 +22,11 @@ img { width: 100%; } +a { + text-decoration: none; + color: var(--dark__grey); +} + a:hover { color: var(--orange); } diff --git a/index.html b/index.html index 2ae12acea..9f8e3cd12 100755 --- a/index.html +++ b/index.html @@ -16,12 +16,12 @@ Karma logo From 3cf9a0b4b690c7f9fc3fbb08bafd00be560f7e90 Mon Sep 17 00:00:00 2001 From: mandy-cheung <109825538+m4ndycheung@users.noreply.github.com> Date: Fri, 27 Jan 2023 22:20:59 +0000 Subject: [PATCH 11/23] Made first link bold --- css/style.css | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/css/style.css b/css/style.css index 6a1ead808..dff7c522d 100755 --- a/css/style.css +++ b/css/style.css @@ -62,10 +62,14 @@ nav ul { } nav li { - margin: 0 2rem; + margin: 0 1rem; list-style: none; } +nav ul a:first-child { + font-weight: 500; +} + /* Hero */ .hero { grid-column: 1 / -1; From 4885699626a4f5855c48cbf7c0a206213da1e7fe Mon Sep 17 00:00:00 2001 From: mandy-cheung <109825538+m4ndycheung@users.noreply.github.com> Date: Sat, 28 Jan 2023 13:06:35 +0000 Subject: [PATCH 12/23] Update style.css --- css/style.css | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/css/style.css b/css/style.css index dff7c522d..dfea626de 100755 --- a/css/style.css +++ b/css/style.css @@ -31,6 +31,10 @@ a:hover { color: var(--orange); } +.center__container { + text-align: center; +} + /* Grid */ .container { display: grid; @@ -76,10 +80,6 @@ nav ul a:first-child { background-image: url(../img/first-background.jpg); } -.center__container { - text-align: center; -} - .hero .center__container { padding: 13rem; } From f588a1477430f1e685558b7cbd3998ea52305097 Mon Sep 17 00:00:00 2001 From: mandy-cheung <109825538+m4ndycheung@users.noreply.github.com> Date: Sat, 28 Jan 2023 13:31:39 +0000 Subject: [PATCH 13/23] Added justify-content: center to wrapper container --- css/style.css | 1 + 1 file changed, 1 insertion(+) diff --git a/css/style.css b/css/style.css index dfea626de..2089343a5 100755 --- a/css/style.css +++ b/css/style.css @@ -134,6 +134,7 @@ main p { .wrapper { display: flex; gap: 2rem; + justify-content: center; } main img { From 057b9fa9246c5cb0bf4f90cfc57f7b720d3cc3cc Mon Sep 17 00:00:00 2001 From: mandy-cheung <109825538+m4ndycheung@users.noreply.github.com> Date: Sun, 29 Jan 2023 17:41:51 +0000 Subject: [PATCH 14/23] Added Extended Section and Updated social icons Added image, text. and button. Updated the social icons by allowing the images not to be cropped by the border radius. --- css/style.css | 60 +++++++++++++++++++++++++++++++++++++++++---------- index.html | 47 ++++++++++++++++++++++++---------------- 2 files changed, 77 insertions(+), 30 deletions(-) diff --git a/css/style.css b/css/style.css index 2089343a5..b907795d5 100755 --- a/css/style.css +++ b/css/style.css @@ -6,11 +6,17 @@ --lighter__grey: #F1F2F3; --dark__grey: #4D5057; --white: #FFF; + --light-orange: rgba(224, 99, 58, 0.1); +} + +* { + box-sizing: border-box; } html, body { margin: 0; padding: 0; + display: inline-block; } body { @@ -31,15 +37,21 @@ a:hover { color: var(--orange); } -.center__container { +.center__text { text-align: center; } +.wrapper { + display: flex; + gap: 2rem; + justify-content: center; +} + /* Grid */ .container { display: grid; gap: 1rem; - grid-template-columns: 100px auto 100px; + grid-template-columns: 10rem auto 10rem; justify-content: center; } @@ -78,9 +90,11 @@ nav ul a:first-child { .hero { grid-column: 1 / -1; background-image: url(../img/first-background.jpg); + background-size: cover; + background-repeat: no-repeat; } -.hero .center__container { +.hero .center__text { padding: 13rem; } @@ -98,6 +112,8 @@ h1 { color: var(--white); } +/* Button */ + button { color: var(--white); font-size: 0.875rem; @@ -106,12 +122,14 @@ button { background-color: var(--orange); padding: 0.8rem 1.5rem; border-radius: 0.3rem; + border-color: var(--orange); margin-top: 1.5rem; } button:hover { color: var(--orange); background-color: var(--white); + border-color: var(--white); } /* Main Content */ @@ -131,14 +149,31 @@ main p { font-size: 1.2rem; } -.wrapper { +main img { + max-width: 50%; +} + +/* Extended Section */ + +.extended__section { + grid-column: 1 / -1; + display: grid; + grid-template-columns: 40% 60%; +} + +.center__contents { + border: 3px dotted pink; + background-color: var(--light-orange); + text-align: center; display: flex; - gap: 2rem; + align-items: center; justify-content: center; + padding: 2rem 3rem; } -main img { - max-width: 50%; +.extended__quote { + font-size: 1.5rem; + font-style: italic; } /* Break Line */ @@ -157,18 +192,21 @@ footer { footer p { text-align: center; - font-size: 0.8rem; + font-size: 1rem; } .copyright__text { color: var(--light__grey); } + footer img { - max-width: 2%; - padding: 0.5rem; + max-width: 3%; + height: auto; margin: 0 0.5rem; border: 0.1rem solid var(--lighter__grey); - border-radius: 2rem; + border-radius: 50%; + padding: 0.2rem; + overflow: visible; } diff --git a/index.html b/index.html index 9f8e3cd12..ffcc0eee5 100755 --- a/index.html +++ b/index.html @@ -27,43 +27,52 @@
-
+

Introducing Karma

Bring WiFi with you, everywhere you go.

-
+
-
-

Everyone needs a little Karma.

+

Everyone needs a little Karma.

-
-
- Electronic devices -

Internet for all devices

-
- -
- Hot coffee cup -

Boost your productivity

-
+
+
+ Electronic devices +

Internet for all devices

+
-
- Plugged in device -

Pay as You Go

-
+
+ Hot coffee cup +

Boost your productivity

+ +
+ Plugged in device +

Pay as You Go

+
+ +
+
woman laughing
+
+
+

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

+ +
+
+
+
From c95d9467f8c90afba861df137d2a100b5bd5b341 Mon Sep 17 00:00:00 2001 From: mandy-cheung <109825538+m4ndycheung@users.noreply.github.com> Date: Tue, 31 Jan 2023 17:46:35 +0000 Subject: [PATCH 21/23] Adding styling to form Added margins between fields so the fields are easier to read. Increased height of the input fields so the form is easier to use. Changed the radio button to orange. --- css/store.css | 42 ++++++++++++++++++++++++++++++++++---- store.html | 56 +++++++++++++++++++++++++++++++-------------------- 2 files changed, 72 insertions(+), 26 deletions(-) diff --git a/css/store.css b/css/store.css index 1da0a1c91..09aa5aaa2 100644 --- a/css/store.css +++ b/css/store.css @@ -14,10 +14,12 @@ font-weight: 500; } +/* Grid */ + .store__main { display: grid; grid-template-columns: 50% 50%; - grid-gap: 2rem; + grid-gap: 1rem; } .store__main > * { @@ -28,6 +30,8 @@ .left__container { grid-column: 1 / 2; + display: flex; + flex-direction: column; } form { @@ -35,10 +39,40 @@ form { color: rgba(102, 102, 102, 1); } -input, select { +#first-name, +#last-name, +#address-1, +#address-2, +#address-city, +#address-postcode { height: 2rem; - border-radius: 0.3rem; + border-radius: 0.2rem; + margin-right: 1rem; +} + +#address-1, #address-2 { + max-width: 320px;; +} + +#address-city { + width: 180px; +} + +#address-postcode { + width: 125px; +} + +.radio__buttons { margin-right: 1rem; + margin-bottom: 2rem; +} + +.label-and-input { + margin-bottom: 1.5rem; +} + +.terms-label-and-input { + margin-bottom: 1rem; } #terms__link { @@ -60,7 +94,7 @@ fieldset { border: none; } -#terms-and-conditions, #space-grey, #karma-orange { +#space-grey, #karma-orange { accent-color: var(--orange); } diff --git a/store.html b/store.html index 30493a86f..cceebd734 100644 --- a/store.html +++ b/store.html @@ -31,31 +31,33 @@

Order your Karma wifi device today!

-
-
- - -
- -
- - + +
+
+
+ + +
+
+ + +
-
-
-
+ +
-
+
-
+
-
+
-
- - - - - + +
+ Select a colour +
+
+ + +
+ +
+ + +
+
-
+
@@ -91,6 +101,8 @@

Order your Karma wifi device today!

+
+

Join us on

From 34f231d2eb983747edaaee53a8dd269ff702be74 Mon Sep 17 00:00:00 2001 From: mandy-cheung <109825538+m4ndycheung@users.noreply.github.com> Date: Tue, 31 Jan 2023 17:55:53 +0000 Subject: [PATCH 22/23] Centered form --- css/store.css | 5 +++ store.html | 118 +++++++++++++++++++++++++------------------------- 2 files changed, 65 insertions(+), 58 deletions(-) diff --git a/css/store.css b/css/store.css index 09aa5aaa2..64c22e52a 100644 --- a/css/store.css +++ b/css/store.css @@ -26,6 +26,11 @@ grid-column: 1; } +.heading_and_form { + display: inline-block; + margin: 2rem auto; +} + /* Form */ .left__container { diff --git a/store.html b/store.html index cceebd734..f90c4e603 100644 --- a/store.html +++ b/store.html @@ -29,75 +29,77 @@
-

Order your Karma wifi device today!

- - -
-
-
- - -
-
- - +
+

Order your Karma wifi device today!

+ +
+
+
+ + +
+
+ + +
-
-
- - -
-
- - -
- -
- - + +
-
- - + +
-
- -
- -
- Select a colour -
-
- - + +
+
+ + +
+ +
+ + +
-
- - +
+
+ Select a colour +
+
+ + +
+ +
+ + +
-
- -
-
- - - -
- - + +
+
+ + + +
+ + +
-
+
+ +
From 1ae8a9393f7d7a2fcccc3db36b7ef62676dc074a Mon Sep 17 00:00:00 2001 From: mandy-cheung <109825538+m4ndycheung@users.noreply.github.com> Date: Tue, 31 Jan 2023 17:59:13 +0000 Subject: [PATCH 23/23] Linked the homepage to store page --- index.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index cc1262905..3a568440e 100755 --- a/index.html +++ b/index.html @@ -18,7 +18,7 @@