From 2005ea78659e52d4af272008de424a9001764165 Mon Sep 17 00:00:00 2001 From: Appolin Semegni Fotso <108607571+AppolinFotso@users.noreply.github.com> Date: Wed, 25 Jan 2023 11:58:14 +0000 Subject: [PATCH 01/15] Added icon-devices --- index.html | 60 ++++++++++++++++++++++++++++++++++++++++++++---------- 1 file changed, 49 insertions(+), 11 deletions(-) diff --git a/index.html b/index.html index 3e742ef04..abe548351 100755 --- a/index.html +++ b/index.html @@ -1,19 +1,57 @@ - - - + + + Karma - - - - - - + + + + + + + +

Introducing Karma

Bring WiFi with you, everywhere you go.

+ +

Everyone needs a little Karma

+ +

+ + Internet for all devices + + + +

+ - - + From 8892c957a3656cba101366910046b9619598206f Mon Sep 17 00:00:00 2001 From: Appolin Semegni Fotso <108607571+AppolinFotso@users.noreply.github.com> Date: Wed, 25 Jan 2023 12:51:27 +0000 Subject: [PATCH 02/15] Added flex-box I added flex-box to the header and navigator elements. --- css/style.css | 51 +++++++++++++++++++++++++++++++++++++++++++++------ index.html | 21 ++++++++++++++++++++- 2 files changed, 65 insertions(+), 7 deletions(-) diff --git a/css/style.css b/css/style.css index 5cb025cef..d155316f1 100755 --- a/css/style.css +++ b/css/style.css @@ -1,11 +1,52 @@ - - /* 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; + display: grid; + grid-template-columns: auto; + grid-template-rows: 10vh auto 20vh; +} + +.header { + grid-row: 1 / 2; + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-around; +} + +.main { + grid-row: 2 / 3; +} + +.footer { + grid-row: 3 / -1; +} + +.header img { + width: 10%; + height: 80%; } +.header nav { + display: flex; + flex-direction: row; + gap: 1rem; +} + +.header a { + text-decoration: none; + color: grey; +} + +.header a:hover { + color: orangered; +} + +.section-1 { + background-image: url("img/first-background.jpg"); +} /** * Add your custom styles below * @@ -15,5 +56,3 @@ body { * * - 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 abe548351..be7484150 100755 --- a/index.html +++ b/index.html @@ -28,12 +28,14 @@ Login +

Introducing Karma

Bring WiFi with you, everywhere you go.

Everyone needs a little Karma

@@ -45,9 +47,26 @@

Everyone needs a little Karma

+ +

+ + Boost your productivity + + + + +

+ + Pay as You Go + + +

+ From b70da12b99a59910ad974e83412d64ddb7aa4e52 Mon Sep 17 00:00:00 2001 From: Appolin Semegni Fotso <108607571+AppolinFotso@users.noreply.github.com> Date: Wed, 25 Jan 2023 13:50:36 +0000 Subject: [PATCH 03/15] Added first-background --- css/style.css | 36 ++++++++++++++++++++++++++++++++---- index.html | 16 +++++----------- 2 files changed, 37 insertions(+), 15 deletions(-) diff --git a/css/style.css b/css/style.css index d155316f1..2db7e74de 100755 --- a/css/style.css +++ b/css/style.css @@ -3,9 +3,10 @@ body { font-family: "Roboto", sans-serif; -webkit-font-smoothing: antialiased; + display: grid; grid-template-columns: auto; - grid-template-rows: 10vh auto 20vh; + grid-template-rows: 10vh 70vh 20vh; } .header { @@ -18,6 +19,8 @@ body { .main { grid-row: 2 / 3; + display: flex; + flex-direction: column; } .footer { @@ -44,9 +47,34 @@ body { color: orangered; } -.section-1 { - background-image: url("img/first-background.jpg"); +#section1 { + height: 100%; + background-image: url("../img/first-background.jpg"); + background-size: contain; + margin: 0px 20px; +} + +#section2 { + display: flex; + flex-direction: column; + justify-content: center; +} +#section2 > h1, +div { + width: 80%; +} + +#section2 div { + display: flex; + flex-direction: row; + align-items: center; } + +#section2 figure img { + width: auto; + height: 10vh; +} + /** * Add your custom styles below * @@ -55,4 +83,4 @@ body { * 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 be7484150..f9248deab 100755 --- a/index.html +++ b/index.html @@ -30,37 +30,31 @@

Introducing Karma

Bring WiFi with you, everywhere you go.

Everyone needs a little Karma

- - Internet for all devices - +

Internet for all devices

- - Boost your productivity - +

Boost your productivity

- - Pay as You Go - +

Pay as You Go

From 9cde1c3f5bd53f8daefcbfe6310e021597d48811 Mon Sep 17 00:00:00 2001 From: Appolin Semegni Fotso <108607571+AppolinFotso@users.noreply.github.com> Date: Wed, 25 Jan 2023 13:58:17 +0000 Subject: [PATCH 04/15] Added background colour Added background colour to the button element. --- css/style.css | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/css/style.css b/css/style.css index 2db7e74de..1ad9a9847 100755 --- a/css/style.css +++ b/css/style.css @@ -51,9 +51,16 @@ body { height: 100%; background-image: url("../img/first-background.jpg"); background-size: contain; - margin: 0px 20px; + margin: 0px 2rem; + color: white; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} +#section1 button { + background-color: orangered; } - #section2 { display: flex; flex-direction: column; From bcc2368b9ad24d81039948b39c8b98eb3e5c5138 Mon Sep 17 00:00:00 2001 From: Appolin Semegni Fotso <108607571+AppolinFotso@users.noreply.github.com> Date: Wed, 25 Jan 2023 16:13:30 +0000 Subject: [PATCH 05/15] Added social icons --- css/style.css | 46 ++++++++++++++++++++++++++++++++++------------ index.html | 18 ++++++++++++++++-- 2 files changed, 50 insertions(+), 14 deletions(-) diff --git a/css/style.css b/css/style.css index 1ad9a9847..f63b95927 100755 --- a/css/style.css +++ b/css/style.css @@ -6,7 +6,7 @@ body { display: grid; grid-template-columns: auto; - grid-template-rows: 10vh 70vh 20vh; + grid-template-rows: 10vh auto auto; } .header { @@ -25,6 +25,8 @@ body { .footer { grid-row: 3 / -1; + text-align: center; + margin-bottom: 2rem; } .header img { @@ -48,9 +50,9 @@ body { } #section1 { - height: 100%; background-image: url("../img/first-background.jpg"); - background-size: contain; + background-size: cover; + background-repeat: no-repeat; margin: 0px 2rem; color: white; display: flex; @@ -60,21 +62,26 @@ body { } #section1 button { background-color: orangered; + border: none; + font-size: 0.75rem; + margin: 1rem 1rem; + padding: 0.75rem 1.5rem; + border-radius: 5%; } #section2 { - display: flex; - flex-direction: column; - justify-content: center; + text-align: center; + margin: 5rem 5rem 0px; + border-bottom: 1px solid gray; } -#section2 > h1, -div { - width: 80%; -} - #section2 div { display: flex; flex-direction: row; - align-items: center; + justify-content: center; +} + +#section2 div a { + text-decoration: none; + color: black; } #section2 figure img { @@ -82,6 +89,21 @@ div { height: 10vh; } +#section2 figure figcaption { + margin-top: 1rem; + margin-bottom: 5rem; +} + +.footer div img { + height: 3%; + width: 3%; +} + +.footer div a { + text-decoration: none; + margin: 0 0.5rem; +} + /** * Add your custom styles below * diff --git a/index.html b/index.html index f9248deab..d88e98bbd 100755 --- a/index.html +++ b/index.html @@ -37,7 +37,7 @@

Introducing Karma

Everyone needs a little Karma

Everyone needs a little Karma.

@@ -61,7 +61,21 @@

Everyone needs a little Karma

- + From e8e9387001c5b0965079ad8db613094c1d4d8d4d Mon Sep 17 00:00:00 2001 From: Appolin Semegni Fotso <108607571+AppolinFotso@users.noreply.github.com> Date: Wed, 25 Jan 2023 16:34:38 +0000 Subject: [PATCH 06/15] Modified background image Te background image of the first section in the main element was modified. --- css/style.css | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/css/style.css b/css/style.css index f63b95927..d6196d82d 100755 --- a/css/style.css +++ b/css/style.css @@ -53,12 +53,14 @@ body { background-image: url("../img/first-background.jpg"); background-size: cover; background-repeat: no-repeat; + background-clip: padding-box; margin: 0px 2rem; color: white; display: flex; flex-direction: column; justify-content: center; align-items: center; + height: 80vh; } #section1 button { background-color: orangered; @@ -95,8 +97,8 @@ body { } .footer div img { - height: 3%; - width: 3%; + height: 2%; + width: 2%; } .footer div a { From 14d087698324d52f173ec70dbf386a3bc47d6971 Mon Sep 17 00:00:00 2001 From: Appolin Semegni Fotso <108607571+AppolinFotso@users.noreply.github.com> Date: Wed, 25 Jan 2023 16:38:48 +0000 Subject: [PATCH 07/15] Added values to Alt attributes --- index.html | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/index.html b/index.html index d88e98bbd..c93c9b5f2 100755 --- a/index.html +++ b/index.html @@ -41,19 +41,19 @@

Everyone needs a little Karma.

Internet for all devices

Boost your productivity

Pay as You Go

@@ -65,13 +65,13 @@

Everyone needs a little Karma.

Join us on

From 880427551b7804d0f51cd9b86a9121137d384f54 Mon Sep 17 00:00:00 2001 From: Appolin Semegni Fotso <108607571+AppolinFotso@users.noreply.github.com> Date: Sat, 28 Jan 2023 12:40:30 +0000 Subject: [PATCH 08/15] Created 2 files Added store.css and store.html --- css/store.css | 0 css/style.css | 2 +- index.html | 2 +- store.html | 0 4 files changed, 2 insertions(+), 2 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 d6196d82d..18e383f40 100755 --- a/css/style.css +++ b/css/style.css @@ -78,7 +78,7 @@ body { #section2 div { display: flex; flex-direction: row; - justify-content: center; + justify-content: space-around; } #section2 div a { diff --git a/index.html b/index.html index c93c9b5f2..c60e8cfa4 100755 --- a/index.html +++ b/index.html @@ -20,7 +20,7 @@

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

From 61452b8d172dcc8c94788300c908e0e9468c8a1d Mon Sep 17 00:00:00 2001 From: Appolin Semegni Fotso <108607571+AppolinFotso@users.noreply.github.com> Date: Sat, 28 Jan 2023 15:09:31 +0000 Subject: [PATCH 11/15] Added grid to store.css --- css/store.css | 82 +++++++++++++++++++++++++++++++++++++++++++++++++++ css/style.css | 53 +++++++++++++++++++++++++++++++-- index.html | 19 ++++++------ store.html | 30 +++++++++++++++++-- 4 files changed, 171 insertions(+), 13 deletions(-) diff --git a/css/store.css b/css/store.css index e69de29bb..37ebae82f 100644 --- a/css/store.css +++ b/css/store.css @@ -0,0 +1,82 @@ +/* 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: grid; + grid-template-columns: auto; + grid-template-rows: 10vh auto auto; +} + +.header { + grid-row: 1 / 2; + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-around; + background-color: aliceblue; +} + +.main { + grid-row: 2 / 3; + display: grid; + grid-template-columns: repeat(12, 1fr); + grid-template-rows: auto; + border-bottom: 1px solid gray; + padding-bottom: 5rem; +} + +.footer { + grid-row: 3 / -1; + text-align: center; + margin-bottom: 2rem; +} + +.header img { + width: 10%; + height: 80%; +} + +.header nav { + display: flex; + flex-direction: row; + gap: 1rem; +} + +.header a { + text-decoration: none; + color: grey; +} + +.header a:hover { + color: orangered; +} + +#section1 { + grid-column: 1 / 6; +} + +#section2 { + grid-column: 6 / -1; +} + +.footer div img { + height: 2%; + width: 2%; +} + +.footer div a { + text-decoration: none; + margin: 0 0.5rem; +} + +/** + * 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/css/style.css b/css/style.css index 18e383f40..31cdd9d58 100755 --- a/css/style.css +++ b/css/style.css @@ -15,12 +15,15 @@ body { flex-direction: row; align-items: center; justify-content: space-around; + background-color: aliceblue; } .main { grid-row: 2 / 3; display: flex; flex-direction: column; + border-bottom: 1px solid gray; + padding-bottom: 5rem; } .footer { @@ -73,12 +76,11 @@ body { #section2 { text-align: center; margin: 5rem 5rem 0px; - border-bottom: 1px solid gray; } #section2 div { display: flex; flex-direction: row; - justify-content: space-around; + justify-content: center; } #section2 div a { @@ -96,6 +98,53 @@ body { margin-bottom: 5rem; } +.section3 { + display: grid; + grid-template-columns: repeat(12, 1fr); + grid-template-rows: auto; + justify-content: center; + gap: 0px; + margin: 0px 2rem; +} + +.section3 .next-page { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + background-color: pink; + grid-column: 5 / -1; +} + +.section3 a { + text-decoration: none; + color: white; +} + +.section3 button { + background-color: orangered; + border: none; + border-radius: 5%; + padding: 1rem; + margin-top: 3rem; +} + +.section3 .image { + grid-column: 1 / 5; +} + +.section3 q:before { + color: orangered; +} + +.section3 q:after { + color: orangered; +} + +.section3 q { + padding: 0px 8rem; +} + .footer div img { height: 2%; width: 2%; diff --git a/index.html b/index.html index 5e4a85c40..eb229acf4 100755 --- a/index.html +++ b/index.html @@ -22,7 +22,7 @@
Meet Karma How it Works - Store + Store Blog Help Login @@ -61,14 +61,15 @@
Everyone needs a little Karma.

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

diff --git a/store.html b/store.html index 5fdf546ac..c1de10e77 100644 --- a/store.html +++ b/store.html @@ -13,7 +13,7 @@ type="text/css" /> - + @@ -22,11 +22,37 @@
Meet Karma How it Works - Store + Store Blog Help Login
+ +
+
+ +
+
+ +
+
Join us on
+
+ + + + + + + + + +
+
© Karma Mobility, Inc.
+
+ + + + From a78202556bcb9f949b5ceea8ec491b68299c4e8c Mon Sep 17 00:00:00 2001 From: Appolin Semegni Fotso <108607571+AppolinFotso@users.noreply.github.com> Date: Sat, 28 Jan 2023 15:51:39 +0000 Subject: [PATCH 12/15] Added form element Added form element on store.css --- css/store.css | 2 +- store.html | 44 +++++++++++++++++++++++++++++++++++++++++--- 2 files changed, 42 insertions(+), 4 deletions(-) diff --git a/css/store.css b/css/store.css index 37ebae82f..f55d8ee0e 100644 --- a/css/store.css +++ b/css/store.css @@ -24,7 +24,6 @@ body { grid-template-columns: repeat(12, 1fr); grid-template-rows: auto; border-bottom: 1px solid gray; - padding-bottom: 5rem; } .footer { @@ -55,6 +54,7 @@ body { #section1 { grid-column: 1 / 6; + color: orangered; } #section2 { diff --git a/store.html b/store.html index c1de10e77..ffa4c9001 100644 --- a/store.html +++ b/store.html @@ -13,7 +13,7 @@ type="text/css" /> - + @@ -30,9 +30,47 @@
-
+
+
Order your Karma WiFi device today!
-
+
+ First name* + + Last name* + + + Address* + + + Address 2 + + + City* + + Postcode* + + +
Select a colour
+ Karma orange + + Space Grey + + +
+ +
By placing your order you agree to Karma
+ Terms and Conditions +
+ + +
+
+ +
+ +

From 9641723adf1abd7338e993b58e3fe7b0cc49711f Mon Sep 17 00:00:00 2001 From: Appolin Semegni Fotso <108607571+AppolinFotso@users.noreply.github.com> Date: Sun, 29 Jan 2023 18:42:20 +0000 Subject: [PATCH 13/15] Added grid style to the form --- css/store.css | 105 +++++++++++++++++++++++++++++++++++++++++- css/style.css | 3 ++ img/checkmark.svg.png | Bin 0 -> 1798 bytes img/tick.jpg | Bin 2004 -> 0 bytes store.html | 75 +++++++++++++++++++----------- 5 files changed, 155 insertions(+), 28 deletions(-) create mode 100644 img/checkmark.svg.png delete mode 100644 img/tick.jpg diff --git a/css/store.css b/css/store.css index f55d8ee0e..f6b583822 100644 --- a/css/store.css +++ b/css/store.css @@ -53,12 +53,113 @@ body { } #section1 { - grid-column: 1 / 6; + grid-column: 1 / 7; + margin: 1rem 2rem 0px; + display: flex; + flex-direction: column; + margin: 1rem 5rem 1rem; +} + +#section1 h1 { color: orangered; + text-align: center; + margin: 2rem; +} + +#section1 form .form { + display: grid; + grid-template-columns: repeat(12, 1fr); + grid-template-rows: repeat(7, auto); + grid-template-areas: + "f f f f f f l l l l l l" + "a a a a a a a a a a a a" + "b b b b b b b b b b b b" + "c c c c c c c c p p p p" + "r r r r r r r r r r r r" + "t t t t t t t t t t t t" + "o o o o o o . . . . . ."; + gap: 1rem; } +#section1 form .firstName { + grid-area: f; + display: flex; + flex-direction: column; + gap: 0.5rem; +} +#section1 form .lastName { + grid-area: l; + display: flex; + flex-direction: column; + gap: 0.5rem; +} +#section1 form .address { + grid-area: a; + display: flex; + flex-direction: column; + gap: 0.5rem; +} +#section1 form .address2 { + grid-area: b; + display: flex; + flex-direction: column; + gap: 0.5rem; +} +#section1 form .city { + grid-area: c; + display: flex; + flex-direction: column; + gap: 0.5rem; +} +#section1 form .postcode { + grid-area: p; + display: flex; + flex-direction: column; + gap: 0.5rem; +} +#section1 form .radio-div { + grid-area: r; +} +#section1 form .terms-div { + grid-area: t; + display: flex; + flex-direction: row; + align-items: center; +} +#section1 form .btn { + grid-area: o; + background-color: orangered; + border: none; + border-radius: 5%; + padding: 2rem; + margin: 3rem; + color: white; +} + +#section1 form .terms-div img { + height: 3vh; + width: 2vw; + border: 1px solid black; + border-radius: 10%; +} +#section1 form .terms-div p a { + color: orangered; +} +#section1 form .terms-div p { + padding-left: 0.25rem; +} + +/*#section1 form label { + display: block; + margin-bottom: 0.5rem; +}*/ + #section2 { - grid-column: 6 / -1; + grid-column: 7 / -1; +} +#section2 img { + width: 100%; + height: 75vh; } .footer div img { diff --git a/css/style.css b/css/style.css index 31cdd9d58..de35c2b14 100755 --- a/css/style.css +++ b/css/style.css @@ -51,6 +51,9 @@ body { .header a:hover { color: orangered; } +.header a:visited { + color: orangered; +} #section1 { background-image: url("../img/first-background.jpg"); diff --git a/img/checkmark.svg.png b/img/checkmark.svg.png new file mode 100644 index 0000000000000000000000000000000000000000..92d5db60b9bbd33e0fda5e2868931c8b8a53dddc GIT binary patch literal 1798 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 CzK8k% diff --git a/store.html b/store.html index ffa4c9001..915b0ca2c 100644 --- a/store.html +++ b/store.html @@ -33,38 +33,61 @@

Order your Karma WiFi device today!
-
- First name* - - Last name* - + +
+
+ First name* + +
+
+ Last name* + +
- Address* - +
+ Address* + +
- Address 2 - +
+ Address 2 + +
- City* - - Postcode* - +
+ City* + +
+
+ Postcode* + +
-
Select a colour
- Karma orange - - Space Grey - +
+
Select a colour
+ + Karma orange + + Space Grey +
-
- -
By placing your order you agree to Karma
- Terms and Conditions -
+
+ +
+ By placing your order you agree to Karma's + Terms and Conditions * +
+
- + +

From f7ac9505573c4b57a47f9f6db5e3f4d63bfe708f Mon Sep 17 00:00:00 2001 From: Appolin Semegni Fotso <108607571+AppolinFotso@users.noreply.github.com> Date: Mon, 30 Jan 2023 12:16:05 +0000 Subject: [PATCH 14/15] Customised input radio button --- css/store.css | 25 +++++++++++++++++++++++-- css/style.css | 3 --- store.html | 4 +++- 3 files changed, 26 insertions(+), 6 deletions(-) diff --git a/css/store.css b/css/store.css index f6b583822..7571fcbc0 100644 --- a/css/store.css +++ b/css/store.css @@ -6,7 +6,7 @@ body { display: grid; grid-template-columns: auto; - grid-template-rows: 10vh auto auto; + grid-template-rows: 10vh 75vh auto; } .header { @@ -58,6 +58,7 @@ body { display: flex; flex-direction: column; margin: 1rem 5rem 1rem; + height: 75vh; } #section1 h1 { @@ -120,6 +121,26 @@ body { #section1 form .radio-div { grid-area: r; } +#section1 form .radio-div #grey { + margin-left: 2rem; +} + +/* changing the background of the radio button*/ +input[type="radio"] { + appearance: none; + display: inline-block; + width: 1rem; + height: 1rem; + padding: 0.1rem; + border: 1px solid black; + border-radius: 50%; + background-color: white; + background-clip: content-box; +} +input[type="radio"]:checked { + background-color: orangered; +} + #section1 form .terms-div { grid-area: t; display: flex; @@ -132,7 +153,7 @@ body { border: none; border-radius: 5%; padding: 2rem; - margin: 3rem; + margin: 3rem 0px; color: white; } diff --git a/css/style.css b/css/style.css index de35c2b14..31cdd9d58 100755 --- a/css/style.css +++ b/css/style.css @@ -51,9 +51,6 @@ body { .header a:hover { color: orangered; } -.header a:visited { - color: orangered; -} #section1 { background-image: url("../img/first-background.jpg"); diff --git a/store.html b/store.html index 915b0ca2c..9bf465be0 100644 --- a/store.html +++ b/store.html @@ -79,8 +79,10 @@
Order your Karma WiFi device today!

-
+ + By placing your order you agree to Karma's Terms and Conditions *
From 5316061672050989177115a7fda09c2f4ddc7cd5 Mon Sep 17 00:00:00 2001 From: Appolin Semegni Fotso <108607571+AppolinFotso@users.noreply.github.com> Date: Tue, 31 Jan 2023 12:02:09 +0000 Subject: [PATCH 15/15] Customised checkbox input control --- css/store.css | 56 +++++++++++++++++++++++++++++++++++++++++++++------ store.html | 12 +++++------ 2 files changed, 56 insertions(+), 12 deletions(-) diff --git a/css/store.css b/css/store.css index 7571fcbc0..73f9cfa6d 100644 --- a/css/store.css +++ b/css/store.css @@ -125,7 +125,7 @@ body { margin-left: 2rem; } -/* changing the background of the radio button*/ +/* Customise the radio input control*/ input[type="radio"] { appearance: none; display: inline-block; @@ -136,11 +136,56 @@ input[type="radio"] { border-radius: 50%; background-color: white; background-clip: content-box; + cursor: pointer; } input[type="radio"]:checked { background-color: orangered; } +/* Customise the checkbox input control*/ +.container { + position: relative; + padding-left: 1.75rem; + margin-top: 1.5rem; +} + +.container input[type="checkbox"] { + appearance: none; +} + +.container .checkmark { + position: absolute; + top: 0; + left: 0; + width: 20px; + height: 20px; + border: 1px solid black; + background-color: white; + border-radius: 15%; + cursor: pointer; +} + +.container .checkmark::after { + content: ""; + position: absolute; + display: none; +} + +.container input[type="checkbox"]:checked ~ .checkmark::after { + display: block; +} + +.container .checkmark::after { + top: 0px; + left: 6px; + width: 5px; + height: 16px; + border: solid orangered; + border-width: 0 2px 2px 0; + transform: rotate(45deg); +} + +/* grid items of main*/ #section1 form .terms-div { grid-area: t; display: flex; @@ -163,17 +208,16 @@ input[type="radio"]:checked { border: 1px solid black; border-radius: 10%; } -#section1 form .terms-div p a { +#section1 form .terms-div a { color: orangered; } #section1 form .terms-div p { padding-left: 0.25rem; } -/*#section1 form label { - display: block; - margin-bottom: 0.5rem; -}*/ +#section1 form .italic { + font-style: italic; +} #section2 { grid-column: 7 / -1; diff --git a/store.html b/store.html index 9bf465be0..f86f16877 100644 --- a/store.html +++ b/store.html @@ -57,7 +57,7 @@
Order your Karma WiFi device today!

City*

@@ -72,6 +72,7 @@
Order your Karma WiFi device today!
id="orange" name="Colour" value="Karma orange" + checked /> Karma orange @@ -79,13 +80,12 @@
Order your Karma WiFi device today!

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