From 95b7050d88c7e72b5cb36e87c889813539fa8d98 Mon Sep 17 00:00:00 2001 From: Fikret Ellek Date: Tue, 3 Oct 2023 22:43:38 +0100 Subject: [PATCH 01/12] html elements created --- index.html | 75 ++++++++++++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 73 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 3e742ef04..12cd25f08 100755 --- a/index.html +++ b/index.html @@ -1,5 +1,6 @@ + @@ -7,13 +8,83 @@ - + + + + +
+ karma's icon + +
+ +
+ + + + + + +
+

Everyone needs a little Karma.

+
+ icon of pc, tablet and mobile phone + icon of a coffee mug with steam coming out + icon of a gas pump from a refill station +

Internet for all devices

+

Boost your productivity

+

Pay as You Go

+
+
+ +
+ + + + + + + - + + \ No newline at end of file From c5a23cbcb6fc2698cdd46cd5b7d262deb3216d35 Mon Sep 17 00:00:00 2001 From: Fikret Ellek Date: Wed, 4 Oct 2023 00:35:15 +0100 Subject: [PATCH 02/12] header style added - css, few lines updated - html --- css/style.css | 53 +++++++++++++++++++++++++++++++++++++++++++++++++++ index.html | 14 +++++++------- 2 files changed, 60 insertions(+), 7 deletions(-) diff --git a/css/style.css b/css/style.css index 5cb025cef..b42016719 100755 --- a/css/style.css +++ b/css/style.css @@ -17,3 +17,56 @@ body { */ + body{ + font-weight: 400; + } + + /* header styles */ + + header{ + margin: 30px 8vw; + height: 60px; + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + + + } + .karmaIcon{ + height: 60px; + + + } + nav ul{ + list-style: none; + display: flex; + flex-direction: row; + gap: 2.5vw; + padding: 0; + } + nav ul li:nth-child(1){ + color: rgb(75, 75, 75); + font-weight: 500; + } + li{ + font-size: 1.5vw; + color: rgb(150, 150, 150); + } + + + + /* first section styles */ + + main{ + margin: 0; + } + h1{ + margin: 0; + } + + + /* second section styles */ + + + /* footer styles */ \ No newline at end of file diff --git a/index.html b/index.html index 12cd25f08..6b1c7a01a 100755 --- a/index.html +++ b/index.html @@ -20,26 +20,26 @@
- karma's icon + karma's icon From 7d151a4d7d6df569f526eab2b1e25a534457a7bf Mon Sep 17 00:00:00 2001 From: Fikret Ellek Date: Wed, 4 Oct 2023 01:40:37 +0100 Subject: [PATCH 03/12] main section 1 css created, few changes in html --- css/style.css | 57 ++++++++++++++++++++++++++++++++++++++++++++++++--- index.html | 18 ++++++++-------- 2 files changed, 63 insertions(+), 12 deletions(-) diff --git a/css/style.css b/css/style.css index b42016719..7102154d5 100755 --- a/css/style.css +++ b/css/style.css @@ -15,16 +15,24 @@ body { * * - When using Flexbox, remember the items you want to move around need to be inside a parent container set to 'display: flex' */ - + :root { + --gap: 2vh; + --sectionHeight: 90vh; + --headerLineSize: calc(3.5vw + 25px); + --subHeaderLineSize: calc(2vw + 15px); + --logoColor: #e0633a; + --reverseColor: white; + } body{ font-weight: 400; + } /* header styles */ header{ - margin: 30px 8vw; + margin: 3vh 8vw; height: 60px; display: flex; flex-direction: row; @@ -65,8 +73,51 @@ body { margin: 0; } + .main-area{ + height: var(--sectionHeight); + background-position: center; + background-size: cover; + + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + + } + .main-area h3{ + color: white; + font-size: var(--headerLineSize); + font-weight: 100; + margin: var(--gap); + } + + .main-area h4{ + color: white; + font-size: var(--subHeaderLineSize); + font-weight: 100; + margin: var(--gap); + } + .main-area button{ + margin: calc(3*var(--gap)); + font-size: calc(var(--subHeaderLineSize)/2); + color: var(--reverseColor); + background-color: var(--logoColor); + padding:calc(1.5*var(--gap)) calc(3*var(--gap)); + border: none; + border-radius: 10px; + + } + + + /* second section styles */ +.article-icon{ + height: 30vh; +} + /* footer styles */ - /* footer styles */ \ No newline at end of file + .media-logo{ + height: 50px; + } \ No newline at end of file diff --git a/index.html b/index.html index 6b1c7a01a..f117777a9 100755 --- a/index.html +++ b/index.html @@ -50,9 +50,9 @@ @@ -60,9 +60,9 @@

Bring WiFi with you, everywhere you go.

Everyone needs a little Karma.

- icon of pc, tablet and mobile phone - icon of a coffee mug with steam coming out - icon of a gas pump from a refill station + icon of pc, tablet and mobile phone + icon of a coffee mug with steam coming out + icon of a gas pump from a refill station

Internet for all devices

Boost your productivity

Pay as You Go

@@ -74,9 +74,9 @@

Pay as You Go

Join us on
- twitter icon - facebook icon - instagram icon + + +
@ Karma Mobility, Inc.
From d805ac6c3dc7f02e8f12fb0b8d4d86090d631070 Mon Sep 17 00:00:00 2001 From: Fikret Ellek Date: Wed, 4 Oct 2023 02:26:42 +0100 Subject: [PATCH 04/12] article are style added, few changes in html --- css/style.css | 235 +++++++++++++++++++++++++++----------------------- index.html | 12 +-- 2 files changed, 131 insertions(+), 116 deletions(-) diff --git a/css/style.css b/css/style.css index 7102154d5..e33fae4fa 100755 --- a/css/style.css +++ b/css/style.css @@ -1,9 +1,8 @@ - - /* 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; } /** @@ -15,109 +14,125 @@ body { * * - When using Flexbox, remember the items you want to move around need to be inside a parent container set to 'display: flex' */ - :root { - --gap: 2vh; - --sectionHeight: 90vh; - --headerLineSize: calc(3.5vw + 25px); - --subHeaderLineSize: calc(2vw + 15px); - --logoColor: #e0633a; - --reverseColor: white; - } - - body{ - font-weight: 400; - - } - - /* header styles */ - - header{ - margin: 3vh 8vw; - height: 60px; - display: flex; - flex-direction: row; - justify-content: space-between; - align-items: center; - - - } - .karmaIcon{ - height: 60px; - - - } - nav ul{ - list-style: none; - display: flex; - flex-direction: row; - gap: 2.5vw; - padding: 0; - } - nav ul li:nth-child(1){ - color: rgb(75, 75, 75); - font-weight: 500; - } - li{ - font-size: 1.5vw; - color: rgb(150, 150, 150); - } - - - - /* first section styles */ - - main{ - margin: 0; - } - h1{ - margin: 0; - } - - .main-area{ - height: var(--sectionHeight); - background-position: center; - background-size: cover; - - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - - } - .main-area h3{ - color: white; - font-size: var(--headerLineSize); - font-weight: 100; - margin: var(--gap); - } - - .main-area h4{ - color: white; - font-size: var(--subHeaderLineSize); - font-weight: 100; - margin: var(--gap); - } - .main-area button{ - margin: calc(3*var(--gap)); - font-size: calc(var(--subHeaderLineSize)/2); - color: var(--reverseColor); - background-color: var(--logoColor); - padding:calc(1.5*var(--gap)) calc(3*var(--gap)); - border: none; - border-radius: 10px; - - } - - - - - /* second section styles */ -.article-icon{ - height: 30vh; -} - - /* footer styles */ - - .media-logo{ - height: 50px; - } \ No newline at end of file +:root { + --gap: 2vh; + --sectionHeight: 90vh; + --headerLineSize: calc(3.5vw + 25px); + --subHeaderLineSize: calc(2vw + 15px); + --logoColor: #e0633a; + --reverseColor: white; + --color: black; +} + +body { + font-weight: 400; +} +main { + margin: 0; +} + +h3 { + color: var(--reverseColor); + font-size: var(--headerLineSize); + font-weight: 100; + margin: var(--gap); +} + +h4 { + color: var(--reverseColor); + font-size: var(--subHeaderLineSize); + font-weight: 100; + margin: var(--gap); +} + +/* header styles */ + +header { + margin: 3vh 8vw; + height: 60px; + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; +} +.karmaIcon { + height: 60px; +} +nav ul { + list-style: none; + display: flex; + flex-direction: row; + gap: 2.5vw; + padding: 0; +} +nav ul li:nth-child(1) { + color: rgb(75, 75, 75); + font-weight: 500; +} +li { + font-size: 1.5vw; + color: rgb(150, 150, 150); +} + +/* first section styles */ + +.main-area { + height: var(--sectionHeight); + background-position: center; + background-size: cover; + + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} + +.main-area button { + margin: calc(3 * var(--gap)); + font-size: calc(var(--subHeaderLineSize) / 2); + color: var(--reverseColor); + background-color: var(--logoColor); + padding: calc(1.5 * var(--gap)) calc(3 * var(--gap)); + border: none; + border-radius: 10px; +} + +/* second section styles */ +.article-area { + height: var(--sectionHeight); + margin: 0 9vw 5vh 9vw; + + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} + +.article-area h3 { + margin: 8vh; + color: var(--color); + font-size: calc(var(--headerLineSize) / 1.3); +} + +.article-area h4 { + color: var(--color); + font-size: calc(var(--subHeaderLineSize) / 1.3); +} + +.article-icon { + height: 25vh; +} + +.article-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + justify-items: center; + text-align: center; + gap: 40px; +} + +/* footer styles */ + +.media-logo { + height: 50px; +} diff --git a/index.html b/index.html index f117777a9..f2c1126c0 100755 --- a/index.html +++ b/index.html @@ -57,15 +57,15 @@

Bring WiFi with you, everywhere you go.

-
-

Everyone needs a little Karma.

-
+
+

Everyone needs a little Karma.

+
icon of pc, tablet and mobile phone icon of a coffee mug with steam coming out icon of a gas pump from a refill station -

Internet for all devices

-

Boost your productivity

-

Pay as You Go

+

Internet for all devices

+

Boost your productivity

+

Pay as You Go

From 878dce2658b159fb6d5bfc7b861c5af15448e978 Mon Sep 17 00:00:00 2001 From: Fikret Ellek Date: Wed, 4 Oct 2023 02:49:52 +0100 Subject: [PATCH 05/12] footer style added, hr added to html --- css/style.css | 32 ++++++++++++++++++++++++++++---- index.html | 1 + 2 files changed, 29 insertions(+), 4 deletions(-) diff --git a/css/style.css b/css/style.css index e33fae4fa..7388b29ad 100755 --- a/css/style.css +++ b/css/style.css @@ -22,6 +22,7 @@ body { --logoColor: #e0633a; --reverseColor: white; --color: black; + --navColor:rgb(150, 150, 150); } body { @@ -48,7 +49,7 @@ h4 { /* header styles */ header { - margin: 3vh 8vw; + margin: 3vh 9vw; height: 60px; display: flex; flex-direction: row; @@ -71,7 +72,7 @@ nav ul li:nth-child(1) { } li { font-size: 1.5vw; - color: rgb(150, 150, 150); + color: var(--navColor); } /* first section styles */ @@ -132,7 +133,30 @@ li { } /* footer styles */ - +footer { + margin: 0 9vw 5vh 9vw; + text-align: center; +} .media-logo { - height: 50px; + border-radius: 27px; + padding: 10px; + border: var(--navColor) solid 2px; + height: 30px; + margin: 0 5px; +} +footer h5 { + font-size: 1.3vw; + + color: var(--color); + font-weight: 300; + margin: 30px; +} +footer h6 { + font-size: 1vw; + color: rgb(150, 150, 150); + font-weight: 200; + margin: 40px 0 100px; +} +hr{ + border: var(--navColor) solid 2px; } diff --git a/index.html b/index.html index f2c1126c0..8e31a58e4 100755 --- a/index.html +++ b/index.html @@ -72,6 +72,7 @@

Pay as You Go

+
Join us on
From 1466f2023b8780932bbac8b235c99b5f063c0fcf Mon Sep 17 00:00:00 2001 From: Fikret Ellek Date: Wed, 4 Oct 2023 02:50:28 +0100 Subject: [PATCH 06/12] formatted code, last version --- css/style.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/css/style.css b/css/style.css index 7388b29ad..9870386e0 100755 --- a/css/style.css +++ b/css/style.css @@ -22,7 +22,7 @@ body { --logoColor: #e0633a; --reverseColor: white; --color: black; - --navColor:rgb(150, 150, 150); + --navColor: rgb(150, 150, 150); } body { @@ -157,6 +157,6 @@ footer h6 { font-weight: 200; margin: 40px 0 100px; } -hr{ - border: var(--navColor) solid 2px; +hr { + border: var(--navColor) solid 2px; } From 1b743fd4e2271f3e7736565283da83478173bf47 Mon Sep 17 00:00:00 2001 From: Fikret Ellek Date: Sat, 7 Oct 2023 13:33:03 +0100 Subject: [PATCH 07/12] nav elements hover function added --- css/style.css | 17 ++++++++++++----- index.html | 26 ++++++++++++++++++++------ 2 files changed, 32 insertions(+), 11 deletions(-) diff --git a/css/style.css b/css/style.css index 9870386e0..6dad31ba5 100755 --- a/css/style.css +++ b/css/style.css @@ -23,6 +23,7 @@ body { --reverseColor: white; --color: black; --navColor: rgb(150, 150, 150); + --navSize: 1.5vw; } body { @@ -57,7 +58,7 @@ header { align-items: center; } .karmaIcon { - height: 60px; + height: calc(40px + 1vw); } nav ul { list-style: none; @@ -66,13 +67,19 @@ nav ul { gap: 2.5vw; padding: 0; } -nav ul li:nth-child(1) { + +.nav-link{ + font-size: calc(9px + 1vw); + color: var(--navColor); + text-decoration: none; +} +.first-link{ color: rgb(75, 75, 75); font-weight: 500; } -li { - font-size: 1.5vw; - color: var(--navColor); +.nav-link:hover { + + color: var(--logoColor); } /* first section styles */ diff --git a/index.html b/index.html index 8e31a58e4..34d206d6f 100755 --- a/index.html +++ b/index.html @@ -24,22 +24,22 @@ @@ -69,7 +69,21 @@

Pay as You Go

+ + + + + + + + + + + + + +
From c9bf7e028a638e84b9ab8ca38b130272b63ce866 Mon Sep 17 00:00:00 2001 From: Fikret Ellek Date: Fri, 13 Oct 2023 01:57:09 +0100 Subject: [PATCH 08/12] home page extension added, few changes updated --- css/style.css | 53 +++++++++++-- index.html | 204 ++++++++++++++++++++++++++++---------------------- 2 files changed, 162 insertions(+), 95 deletions(-) diff --git a/css/style.css b/css/style.css index 6dad31ba5..6131e9955 100755 --- a/css/style.css +++ b/css/style.css @@ -33,14 +33,15 @@ main { margin: 0; } -h3 { +.main-area > h3, +h4 { color: var(--reverseColor); font-size: var(--headerLineSize); font-weight: 100; margin: var(--gap); } -h4 { +.main-area > h4 { color: var(--reverseColor); font-size: var(--subHeaderLineSize); font-weight: 100; @@ -68,17 +69,16 @@ nav ul { padding: 0; } -.nav-link{ +.nav-link { font-size: calc(9px + 1vw); color: var(--navColor); text-decoration: none; } -.first-link{ +.first-link { color: rgb(75, 75, 75); font-weight: 500; } .nav-link:hover { - color: var(--logoColor); } @@ -95,7 +95,7 @@ nav ul { justify-content: center; } -.main-area button { +button { margin: calc(3 * var(--gap)); font-size: calc(var(--subHeaderLineSize) / 2); color: var(--reverseColor); @@ -120,11 +120,13 @@ nav ul { margin: 8vh; color: var(--color); font-size: calc(var(--headerLineSize) / 1.3); + font-weight: 100; } .article-area h4 { color: var(--color); font-size: calc(var(--subHeaderLineSize) / 1.3); + font-weight: 400; } .article-icon { @@ -139,6 +141,42 @@ nav ul { gap: 40px; } +/* third section styles */ + +.getKarma { + display: flex; + flex-direction: row; + margin-bottom: 45px; +} + +.article-getKarma { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + width: 100%; + background-color: rgb(224, 98, 56, 0.1); +} + +.article-getKarma h4 { + color: var(--color); + font-size: calc(var(--subHeaderLineSize) / 1.3); + text-align: center; + line-height: 1.5em; + font-style: italic; +} + +.get-karma-quote { + color: var(--logoColor); + font-size: calc(var(--headerLineSize) / 1.3); + line-height: 0; + letter-spacing: 0; +} + +.get-btn { + margin: calc(1 * var(--gap)); +} + /* footer styles */ footer { margin: 0 9vw 5vh 9vw; @@ -165,5 +203,6 @@ footer h6 { margin: 40px 0 100px; } hr { - border: var(--navColor) solid 2px; + height: 0px; + border: var(--navColor) solid 1px; } diff --git a/index.html b/index.html index 34d206d6f..b06d7e205 100755 --- a/index.html +++ b/index.html @@ -1,105 +1,133 @@ - - - - + + + Karma - - - - - - - - + + + + + + + -
- karma's icon - + karma's icon +
- - - - - - -
-

Everyone needs a little Karma.

-
- icon of pc, tablet and mobile phone - icon of a coffee mug with steam coming out - icon of a gas pump from a refill station -

Internet for all devices

-

Boost your productivity

-

Pay as You Go

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

Everyone needs a little Karma.

+
+ icon of pc, tablet and mobile phone + icon of a coffee mug with steam coming out + icon of a gas pump from a refill station +

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.
+
+
Join us on
+
+ + + +
+
@ Karma Mobility, Inc.
- - - - - - - - \ No newline at end of file + + From f2ce15227559d25334797da4d27af26958c77ca8 Mon Sep 17 00:00:00 2001 From: Fikret Ellek Date: Fri, 13 Oct 2023 02:09:03 +0100 Subject: [PATCH 09/12] store page created, few updates on index header --- css/style.css | 4 ++- index.html | 2 +- store.html | 81 +++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 85 insertions(+), 2 deletions(-) create mode 100644 store.html diff --git a/css/style.css b/css/style.css index 6131e9955..9252ab509 100755 --- a/css/style.css +++ b/css/style.css @@ -24,6 +24,7 @@ body { --color: black; --navColor: rgb(150, 150, 150); --navSize: 1.5vw; + --headerBackground: #c4c4c41a; } body { @@ -51,12 +52,13 @@ h4 { /* header styles */ header { - margin: 3vh 9vw; + padding: 3vh 9vw; height: 60px; display: flex; flex-direction: row; justify-content: space-between; align-items: center; + background-color: var(--headerBackground); } .karmaIcon { height: calc(40px + 1vw); diff --git a/index.html b/index.html index b06d7e205..61c6b7ed1 100755 --- a/index.html +++ b/index.html @@ -6,7 +6,7 @@ name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> - Karma + Karma - Homepage + + + + + Karma - Store + + + + + + + + + + + + +
+ karma's icon + +
+ +
+ + +
+
+
Join us on
+
+ + + +
+
@ Karma Mobility, Inc.
+
+ + From 75d15da49ab4de2cec2ccc65f23562fd7dd106a7 Mon Sep 17 00:00:00 2001 From: Fikret Ellek Date: Fri, 13 Oct 2023 05:32:18 +0100 Subject: [PATCH 10/12] store page edited --- css/style.css | 74 +++++++++++++++++++++++++++++++++++++++++++++++++-- index.html | 6 ++--- store.html | 71 +++++++++++++++++++++++++++++++++++++++++++++--- 3 files changed, 143 insertions(+), 8 deletions(-) diff --git a/css/style.css b/css/style.css index 9252ab509..e3b58ad41 100755 --- a/css/style.css +++ b/css/style.css @@ -23,6 +23,7 @@ body { --reverseColor: white; --color: black; --navColor: rgb(150, 150, 150); + --navColor2: rgb(150, 150, 150, 0.5); --navSize: 1.5vw; --headerBackground: #c4c4c41a; } @@ -98,7 +99,7 @@ nav ul { } button { - margin: calc(3 * var(--gap)); + margin: calc(3 * var(--gap)) 0; font-size: calc(var(--subHeaderLineSize) / 2); color: var(--reverseColor); background-color: var(--logoColor); @@ -205,6 +206,75 @@ footer h6 { margin: 40px 0 100px; } hr { + margin: 0; height: 0px; - border: var(--navColor) solid 1px; + border: var(--navColor2) solid 1px; +} + +/* store page styles */ +.store-area { + display: grid; + grid-template-columns: 1fr 1fr; +} + +.form-area{ + padding: 6vw 9vw; + gap: 3vw; +} + +.img-area { + + background-image: url("../level-2/store-image_by-andrew-neel-unsplash.jpg"); + background-position: center; + background-size: cover; +} +.form-hdr{ + color: var(--logoColor); + font-size: calc(var(--headerLineSize) / 1.5); + font-weight: 500; + margin: 0; + +} +form { + text-align: left; + padding: 3vw 0; + display: flex; + flex-direction: column; + gap: 3em; +} + +.form-row { + display: flex; + flex-direction: row; + gap: 2em; +} +.couple-lbl-inpt { + width: 100%; + display: flex; + flex-direction: column; + gap: 1em; +} + +input[type="text"]{ + height: 3em; + border: #666666 solid 1px; + border-radius: 0.3em; +} + +input[type="radio"] { + accent-color: var(--logoColor); +} + +input[type="checkbox"]:checked { + content: url("../level-2/checkmark.svg"); + accent-color: rgba(255, 255, 255, 0); +} + +.order-btn{ + margin: 0; + align-self: flex-start; +} + +.tac-spn{ + color: var(--logoColor); } diff --git a/index.html b/index.html index 61c6b7ed1..e5096a174 100755 --- a/index.html +++ b/index.html @@ -28,13 +28,13 @@
diff --git a/store.html b/store.html index 6444e3ebb..91a9cf5bf 100644 --- a/store.html +++ b/store.html @@ -28,13 +28,13 @@
-
+
+
+
+

Order your Karma wifi
device today!

+
+
+
+ + +
+
+ + +
+
+
+
+ + +
+
+
+
+ + +
+
+
+
+ + +
+
+ + +
+
+
+ Select a colour * +
+ + + + +
+
+
+ + +
+ +
+
+ +
+
+