From 2bc7f8fa4e6e8c7932e2557f2f553b084f92e085 Mon Sep 17 00:00:00 2001 From: Karleen M S Richards Date: Tue, 25 Oct 2022 22:22:30 +0100 Subject: [PATCH 01/16] completed level 1 --- css/style.css | 157 ++++++++++++++++++++++++++++++++++++++++++++++++++ index.html | 48 ++++++++++++++- 2 files changed, 204 insertions(+), 1 deletion(-) diff --git a/css/style.css b/css/style.css index 5cb025cef..6e0481eaf 100755 --- a/css/style.css +++ b/css/style.css @@ -17,3 +17,160 @@ body { */ + + /* MY COMMENTS: + Styles for the header: It includes the logo and nav bar*/ + +header { + justify-content: space-between; + align-items: center; + padding: 0 100px; + display: flex; +} + +.logo-img { + max-height: 32px; + max-width: 32px; + display: block; +} + +ul { + list-style: none; + display: flex; + gap: 10px; +} + +ul li a { + color: rgb(158, 156, 156); + text-decoration: none; + padding: 15px; + +} + +ul li a:hover { + color: #CE5C08; +} + +.nav-head { + color: rgb(63, 57, 57); + font-weight: 500; + font-size: 14px; + +} + +/* Styles for main section or section 1: background-image, the text that is centered and the orange button */ + +.section1 { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + color: rgb(238, 230, 230); + background-image: url("../img/first-background.jpg"); + background-repeat:no-repeat; + background-size: cover; + height: 500px; + font-size: 22px; + font-weight: 12; +} + +.section1-phrase1 { + margin-bottom: 0; + font-size: 40px; + font-weight: 10; + +} + +.section1-phrase2 { + display: flex; + justify-content: space-around; +} + +button { + background-color: #CE5C08; + width: 120px; + height: 50px; + font-size: 14px; + border-radius: 4%; + border: none; +} + +/* section 2 styles: These are styles for the area with the orange images and the text above and below them. Also the horizontal line*/ + +.section2 { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + height: 350px; + color:rgb(63, 57, 57); +} + +.section2-phrase1 { + margin-bottom: 0; + font-size: 27px; + font-weight: 10; +} + +.section2-imgs-text { + display: flex; + flex-direction: row; +} + +.info1 { + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + padding-right: 65px; +} + +.info2 { + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; +} + +.orange-imgs { + width: 100px; + height: 150px; + margin-bottom: 0; +} + +.catch-phrases { + margin-top: 0; +} + +hr { + color: rgb(217, 219, 224);; +} + +/* Footer styles: Include images and text in the footer area */ + +footer { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + height: 150px; + margin-bottom: 50px; +} + +.footer-imgs { + font-weight: 2; + padding: 10px; + width: 15x; + height: 15px; + border: 1px solid rgb(233, 236, 243);; + border-radius: 50%; +} + +h6 { + margin-bottom: 10px; + color:rgb(138, 135, 135); +} + +.footer-p { + color: rgb(172, 169, 169); +} \ No newline at end of file diff --git a/index.html b/index.html index 3e742ef04..2d47656e4 100755 --- a/index.html +++ b/index.html @@ -14,6 +14,52 @@ - +
+ + +
+
+
+

Introducing Karma

+

Bring WiFi with you, everywhere you go.

+ +
+
+

Everyone needs a little Karma.

+
+
+ +

Internet for all devices

+
+
+ +

Boost your productivity

+
+
+ +

Pay as You Go

+
+
+
+
+
+ From ddba44b76df45fb14792de351302e6948ed47bd0 Mon Sep 17 00:00:00 2001 From: Karleen M S Richards Date: Thu, 27 Oct 2022 11:34:47 +0100 Subject: [PATCH 02/16] Final changes made to structure HTML/CSS structure arranged --- .vscode/settings.json | 3 +++ css/style.css | 8 ++++---- index.html | 7 ++++++- 3 files changed, 13 insertions(+), 5 deletions(-) create mode 100644 .vscode/settings.json diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 000000000..4c7ff40f6 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5502 +} diff --git a/css/style.css b/css/style.css index 6e0481eaf..02c70f7e1 100755 --- a/css/style.css +++ b/css/style.css @@ -19,7 +19,7 @@ body { /* MY COMMENTS: - Styles for the header: It includes the logo and nav bar*/ + Navigation Styles */ header { justify-content: space-between; @@ -58,7 +58,7 @@ ul li a:hover { } -/* Styles for main section or section 1: background-image, the text that is centered and the orange button */ +/* Hero Styles*/ .section1 { display: flex; @@ -95,7 +95,7 @@ button { border: none; } -/* section 2 styles: These are styles for the area with the orange images and the text above and below them. Also the horizontal line*/ +/* General Styles*/ .section2 { display: flex; @@ -146,7 +146,7 @@ hr { color: rgb(217, 219, 224);; } -/* Footer styles: Include images and text in the footer area */ +/* Footer styles */ footer { display: flex; diff --git a/index.html b/index.html index 2d47656e4..d2e13ec85 100755 --- a/index.html +++ b/index.html @@ -15,7 +15,7 @@
- + Karma logo
+

Introducing Karma

Bring WiFi with you, everywhere you go.

+

Everyone needs a little Karma.

@@ -51,14 +53,17 @@
+
Join us on
+
+

©Karma Mobility, Inc.

From 625872459567cb98f572be8525b83cebece178a7 Mon Sep 17 00:00:00 2001 From: Karleen M S Richards Date: Thu, 27 Oct 2022 11:55:19 +0100 Subject: [PATCH 03/16] Fixed parts of footer --- css/style.css | 8 ++------ index.html | 4 ++-- 2 files changed, 4 insertions(+), 8 deletions(-) diff --git a/css/style.css b/css/style.css index 02c70f7e1..4cc6b87e4 100755 --- a/css/style.css +++ b/css/style.css @@ -140,6 +140,7 @@ button { .catch-phrases { margin-top: 0; + font-size: 18px; } hr { @@ -166,11 +167,6 @@ footer { border-radius: 50%; } -h6 { - margin-bottom: 10px; - color:rgb(138, 135, 135); -} - .footer-p { - color: rgb(172, 169, 169); + color: rgb(85, 81, 81); } \ No newline at end of file diff --git a/index.html b/index.html index d2e13ec85..ddad23dcd 100755 --- a/index.html +++ b/index.html @@ -56,14 +56,14 @@
-
Join us on
+

Join us on

- +

©Karma Mobility, Inc.

From 3ca3702999e32830829b8cfcc13282aab6e369e8 Mon Sep 17 00:00:00 2001 From: Karleen M S Richards Date: Thu, 27 Oct 2022 23:15:34 +0100 Subject: [PATCH 04/16] Changes to classes --- css/style.css | 12 ++++++------ index.html | 12 ++++++------ 2 files changed, 12 insertions(+), 12 deletions(-) diff --git a/css/style.css b/css/style.css index 4cc6b87e4..0dad411e3 100755 --- a/css/style.css +++ b/css/style.css @@ -60,7 +60,7 @@ ul li a:hover { /* Hero Styles*/ -.section1 { +.main-container { display: flex; flex-direction: column; justify-content: center; @@ -74,14 +74,14 @@ ul li a:hover { font-weight: 12; } -.section1-phrase1 { +.main-container-phrase1 { margin-bottom: 0; font-size: 40px; font-weight: 10; } -.section1-phrase2 { +.main-container-phrase2 { display: flex; justify-content: space-around; } @@ -97,7 +97,7 @@ button { /* General Styles*/ -.section2 { +.secondary-container { display: flex; flex-direction: column; justify-content: center; @@ -106,13 +106,13 @@ button { color:rgb(63, 57, 57); } -.section2-phrase1 { +.secondary-container-phrase1 { margin-bottom: 0; font-size: 27px; font-weight: 10; } -.section2-imgs-text { +.secondary-imgs-text { display: flex; flex-direction: row; } diff --git a/index.html b/index.html index ddad23dcd..0b6d386ef 100755 --- a/index.html +++ b/index.html @@ -29,15 +29,15 @@
-
-

Introducing Karma

-

Bring WiFi with you, everywhere you go.

+
+

Introducing Karma

+

Bring WiFi with you, everywhere you go.

-
-

Everyone needs a little Karma.

-
+
+

Everyone needs a little Karma.

+

Internet for all devices

From fe4ad6b2a2a5add7cb6fa6e8c2d694f8e7f2c35d Mon Sep 17 00:00:00 2001 From: Karleen M S Richards Date: Sun, 30 Oct 2022 09:56:40 +0000 Subject: [PATCH 05/16] Made corrections to HYML semantic tags and CSS structure 1. Used fixed font sizes, eg rem throughout 2. Used fixed colours through out eg hex only for this page 3. Added an h1 4. Changed some sections tags to
as they did not fit the description of a section. --- css/style.css | 82 ++++++++++++++++++++++++----------- index.html | 41 +++++++++--------- store.html | 93 +++++++++++++++++++++++++++++++++++++++ styles.css | 117 ++++++++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 289 insertions(+), 44 deletions(-) create mode 100644 store.html create mode 100644 styles.css diff --git a/css/style.css b/css/style.css index 0dad411e3..69fed61ec 100755 --- a/css/style.css +++ b/css/style.css @@ -40,11 +40,10 @@ ul { gap: 10px; } -ul li a { - color: rgb(158, 156, 156); +.nav-item { + color: #9E9C9C; text-decoration: none; - padding: 15px; - + padding: 15px; } ul li a:hover { @@ -52,10 +51,9 @@ ul li a:hover { } .nav-head { - color: rgb(63, 57, 57); + color: #39393F; font-weight: 500; - font-size: 14px; - + text-decoration: none; } /* Hero Styles*/ @@ -65,32 +63,31 @@ ul li a:hover { flex-direction: column; justify-content: center; align-items: center; - color: rgb(238, 230, 230); + color: #FFFFFF; background-image: url("../img/first-background.jpg"); background-repeat:no-repeat; background-size: cover; height: 500px; - font-size: 22px; - font-weight: 12; } -.main-container-phrase1 { +h1 { margin-bottom: 0; - font-size: 40px; - font-weight: 10; - + font-size: 3rem; + font-weight: 200; } .main-container-phrase2 { display: flex; justify-content: space-around; + font-size: 2.3rem; } button { background-color: #CE5C08; + color: white; width: 120px; height: 50px; - font-size: 14px; + font-size: .875rem; border-radius: 4%; border: none; } @@ -103,12 +100,12 @@ button { justify-content: center; align-items: center; height: 350px; - color:rgb(63, 57, 57); + color: #39393F; } .secondary-container-phrase1 { margin-bottom: 0; - font-size: 27px; + font-size: 1.7rem; font-weight: 10; } @@ -140,13 +137,50 @@ button { .catch-phrases { margin-top: 0; - font-size: 18px; + font-size: 1.125rem; } hr { - color: rgb(217, 219, 224);; + color: #D9DBE0; } +.article { + display: flex; + flex-direction: row; + background-color: #F3B6B6; + margin: 40px 0 90px 0; +} + +.article-img { + width: 700px; +} + +.article-content { + display: flex; + flex-direction: column; + border: 5px dotted black; + justify-content: center; + align-items: center; + padding: 30px 200px; +} + +.article-button { + background-color: #CE5C08; + color: white; + width: 140px; + height: 40px; + font-size: .875rem; + border-radius: 4px; + justify-content: center; +} + +.article-p { + padding: 0; + font-style: italic; + font-size: 1.6rem; +} + + /* Footer styles */ footer { @@ -156,17 +190,17 @@ footer { align-items: center; height: 150px; margin-bottom: 50px; + border-top: 1px solid #FAF6F6; } .footer-imgs { - font-weight: 2; padding: 10px; - width: 15x; + width: 15px; height: 15px; - border: 1px solid rgb(233, 236, 243);; - border-radius: 50%; + border: 1px solid #E9ECF3;; + border-radius: 50px; } .footer-p { - color: rgb(85, 81, 81); + color: #555151; } \ No newline at end of file diff --git a/index.html b/index.html index 0b6d386ef..cbc059948 100755 --- a/index.html +++ b/index.html @@ -18,51 +18,52 @@ Karma logo
+
-

Introducing Karma

+

Introducing Karma

Bring WiFi with you, everywhere you go.

Everyone needs a little Karma.

-
-
+
+

Internet for all devices

-
-
+
+

Boost your productivity

-
-
+ +

Pay as You Go

-
+
-
+

Join us on

-
- - - -
+
+ twitter + facebook + instagram +

©Karma Mobility, Inc.

diff --git a/store.html b/store.html new file mode 100644 index 000000000..8ac9bb0ab --- /dev/null +++ b/store.html @@ -0,0 +1,93 @@ + + + + + + + Karma + + + + + + + + + + + +
+ Karma logo + +
+
+
+ +
+

Order you Karma Wifi device today!

+ +
+ + + + +
+ +
+ + + + + +
+ + + + + +
+ + +
+ Select colour + + + + + + + + + +
+ +
+ Select colour + + + + + +
+ + + + + + + + + + + +
+
\ No newline at end of file diff --git a/styles.css b/styles.css new file mode 100644 index 000000000..f6314e5fb --- /dev/null +++ b/styles.css @@ -0,0 +1,117 @@ + +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' + */ + + + +/* MY COMMENTS: + Navigation Styles */ + + /* body { + background-image: url("./level-2/store-image_by-andrew-neel-unsplash.jpg"); + background-repeat: no-repeat; + background-size: contain; + background-position: right center; + } + */ + +header { + justify-content: space-between; + align-items: center; + padding: 5px 100px; + display: flex; + background-color: rgb(247, 240, 240); + +} + +.logo-img { + max-height: 32px; + max-width: 32px; + display: block; +} + +ul { + list-style: none; + display: flex; + gap: 10px; +} + +ul li a { + color: rgb(158, 156, 156); + text-decoration: none; + padding: 15px; + +} + +ul li a:hover { + color: #CE5C08; +} + +.nav-head { + color: rgb(63, 57, 57); + font-weight: 500; + font-size: 14px; + +} +main { + display: flex; + flex-direction: row; +} + +#main-container { + display: flex; + flex-direction: row; + +} + + + +#heading { + color: #CE5C08; + font-size: 35px; +} + +form { + width: 1345px; + padding: 80px 10px 10px 10px; + border: 2px solid pink; + background-size: 45%; + background-position: center right; +} + + +#main-img { + + width: 40%; + justify-content: flex-end; +} + +#checkmark { + border: 1px solid black; +} + +button { + background-color: #CE5C08; + color: white; + width: 120px; + height: 50px; + font-size: 14px; + border-radius: 4%; + border: none; +} + +fieldset { + border: 0; +} \ No newline at end of file From 60e40dc376f470df7fa99e6a022f8dd8dbdb15cd Mon Sep 17 00:00:00 2001 From: Karleen M S Richards Date: Sun, 30 Oct 2022 20:15:37 +0000 Subject: [PATCH 06/16] Added new block to webpage Added new division with img and text and added the css to style the new block. --- css/style.css | 52 +++++++++++++++++++++++++++++++++------------------ index.html | 11 +++++++++++ 2 files changed, 45 insertions(+), 18 deletions(-) diff --git a/css/style.css b/css/style.css index 69fed61ec..e26305bb0 100755 --- a/css/style.css +++ b/css/style.css @@ -144,27 +144,33 @@ hr { color: #D9DBE0; } -.article { +.block2 { display: flex; flex-direction: row; - background-color: #F3B6B6; - margin: 40px 0 90px 0; + margin: 40px 0 90px 0; } -.article-img { - width: 700px; +.block2-img { + } -.article-content { - display: flex; - flex-direction: column; - border: 5px dotted black; - justify-content: center; - align-items: center; - padding: 30px 200px; +.block2-p1 { + margin-bottom: 0; + font-style: italic; +} + +.block2-p2 { + margin-top: 0; + margin-bottom: 0; + font-style: italic; +} + +.block2-p3 { + margin-top: 0; + font-style: italic; } -.article-button { +.block2-button { background-color: #CE5C08; color: white; width: 140px; @@ -174,13 +180,23 @@ hr { justify-content: center; } -.article-p { - padding: 0; - font-style: italic; - font-size: 1.6rem; +.block2-text { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + justify-content: center; + align-items: center; + font-size: 2.3rem; + padding-left: 100px; + padding-right: 100px; + background-color: #FFF5EE; + width: 550px; } - +.block2-span { + color: #CE5C08; +} /* Footer styles */ footer { diff --git a/index.html b/index.html index cbc059948..ef340a47e 100755 --- a/index.html +++ b/index.html @@ -56,6 +56,17 @@

Introducing Karma

+ +
+ +
+

"Wherever I am, I just don't

+

worry about my connection

+

anymore."

+ +
+
+