From db1d34c07297962d4e9394637e4abb83a276a41c Mon Sep 17 00:00:00 2001 From: kostiantynkovalchuk Date: Thu, 3 Oct 2024 20:22:46 +0200 Subject: [PATCH 1/8] html-first-draft --- index.html | 69 ++++++++++++++++++++++++++++++++++++++++++++---------- 1 file changed, 57 insertions(+), 12 deletions(-) diff --git a/index.html b/index.html index 3e742ef04..03dd692f1 100755 --- a/index.html +++ b/index.html @@ -1,19 +1,64 @@ - - - + + + Karma - - - - - - - + + + + + + - - + +
+ +
+ + girl is sitting in cafe with gadgets on the table +

Introducing Karma

+

Bring WiFi with you, everywhere you go.

+ + +
+

Everyone needs a little Karma.

+
+
+ icon for devices +
+
+ icon for coffee +
+
+
+ From 4c21a687e20140a98430571aecde95a585e7b755 Mon Sep 17 00:00:00 2001 From: kostiantynkovalchuk Date: Fri, 4 Oct 2024 02:01:21 +0200 Subject: [PATCH 2/8] starting with css --- css/style.css | 28 ++++++++++++++++++++++++---- index.html | 40 +++++++++++++++++++++++++--------------- 2 files changed, 49 insertions(+), 19 deletions(-) diff --git a/css/style.css b/css/style.css index 5cb025cef..aa09eda64 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; } /** @@ -16,4 +15,25 @@ body { * - When using Flexbox, remember the items you want to move around need to be inside a parent container set to 'display: flex' */ +/* Header styles */ +header { + width: 100%; + + .karma-logo { + width: 4em; + margin-left: 5em; + margin-top: 1em; + } +} +/* Navbar styles */ +ul.navbar { + display: inline; + padding: 1em; + float: right; + font-size: 2em; +} +ul.navbar li { + display: inline; + color: dimgrey; +} diff --git a/index.html b/index.html index 03dd692f1..f1d4de6ba 100755 --- a/index.html +++ b/index.html @@ -22,19 +22,20 @@
- + + +
Everyone needs a little Karma.
icon for devices +

Internet for all devices

icon for coffee +

Boost your productivity

+
+
+ icon of charging devices +

Pay as You Go

-
Join us on
- +

(c) Karma Mobility, Inc.

From 82c63ce23893b3092fc6969a1c2842b49ea63e05 Mon Sep 17 00:00:00 2001 From: kostiantynkovalchuk Date: Fri, 4 Oct 2024 02:14:46 +0200 Subject: [PATCH 3/8] changes to css and html --- css/style.css | 141 +++++++++++++++++++++++++++++++++++++++----------- index.html | 126 +++++++++++++++++++++----------------------- 2 files changed, 172 insertions(+), 95 deletions(-) diff --git a/css/style.css b/css/style.css index aa09eda64..79491af57 100755 --- a/css/style.css +++ b/css/style.css @@ -1,39 +1,122 @@ -/* We are using the 'Roboto' font from Google. This has already been added to your HTML header */ - +/* Basic body styling */ body { font-family: "Roboto", sans-serif; - -webkit-font-smoothing: antialiased; + line-height: 1.6; + color: #333; + margin: 0; } -/** - * 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' - */ - -/* Header styles */ +/* Header Styling */ header { - width: 100%; + display: flex; + justify-content: space-between; + align-items: center; + padding: 20px; + background-color: #fff; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); +} + +.karma-logo img { + height: 40px; +} + +.navbar { + list-style: none; + display: flex; + gap: 20px; +} + +.navbar a { + text-decoration: none; + font-weight: 500; + color: #333; +} + +.navbar a:hover { + color: #f15a22; +} + +/* Hero Section */ +.hero { + background-image: url("img/first-background.jpg"); + background-size: cover; + background-position: center; + padding: 100px 20px; + text-align: center; + color: #fff; +} + +.hero-content h1 { + font-size: 48px; + font-weight: 300; +} + +.hero-content p { + font-size: 24px; + margin: 20px 0; +} + +.hero-content button { + padding: 10px 30px; + background-color: #f15a22; + color: #fff; + border: none; + font-size: 16px; + cursor: pointer; +} + +.hero-content button:hover { + background-color: #e14e1b; +} + +/* Features Section */ +main { + text-align: center; + padding: 40px 20px; +} + +main h2 { + font-size: 32px; + margin-bottom: 40px; +} + +.columns { + display: flex; + justify-content: space-around; +} - .karma-logo { - width: 4em; - margin-left: 5em; - margin-top: 1em; - } +.column { + width: 30%; } -/* Navbar styles */ -ul.navbar { - display: inline; - padding: 1em; - float: right; - font-size: 2em; +.column img { + width: 60px; + margin-bottom: 20px; } -ul.navbar li { - display: inline; - color: dimgrey; + +.column p { + font-size: 18px; +} + +/* Footer Section */ +footer { + background-color: #f9f9f9; + padding: 20px; + text-align: center; +} + +footer h5 { + font-size: 16px; + margin-bottom: 20px; +} + +.social-media-icons img { + margin: 0 10px; + width: 30px; +} + +footer p { + margin-top: 20px; + font-size: 14px; + color: #888; } diff --git a/index.html b/index.html index f1d4de6ba..25cb9c377 100755 --- a/index.html +++ b/index.html @@ -2,73 +2,67 @@ - - Karma - - - - + + Karma WiFi + + + - - - - -
- + +
+ + +
+ + +
+
+

Introducing Karma

+

Bring WiFi with you, everywhere you go.

+ +
+
- -
- - girl is sitting in cafe with gadgets on the table -

Introducing Karma

-

Bring WiFi with you, everywhere you go.

- - -
-

Everyone needs a little Karma.

-
-
- icon for devices -

Internet for all devices

-
-
- icon for coffee -

Boost your productivity

-
-
- icon of charging devices -

Pay as You Go

-
-
-
-
Join us on
- -

(c) Karma Mobility, Inc.

-
+ +
+

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

+
+
+
+ + +
+
Join us on
+ +

© Karma Mobility, Inc.

+
+ From b4097f17707d69a9043cc39eae61a80eff1105c2 Mon Sep 17 00:00:00 2001 From: kostiantynkovalchuk Date: Fri, 4 Oct 2024 02:16:03 +0200 Subject: [PATCH 4/8] change title --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 25cb9c377..0cc772589 100755 --- a/index.html +++ b/index.html @@ -3,7 +3,7 @@ - Karma WiFi + Karma From 844dc3346365c138a84d149f2bd0636b9d734e9e Mon Sep 17 00:00:00 2001 From: kostiantynkovalchuk Date: Fri, 4 Oct 2024 22:37:11 +0200 Subject: [PATCH 5/8] html-first-draft --- level-2/store.css | 0 level-2/store.html | 106 +++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 106 insertions(+) create mode 100644 level-2/store.css create mode 100644 level-2/store.html diff --git a/level-2/store.css b/level-2/store.css new file mode 100644 index 000000000..e69de29bb diff --git a/level-2/store.html b/level-2/store.html new file mode 100644 index 000000000..c0bd96bbf --- /dev/null +++ b/level-2/store.html @@ -0,0 +1,106 @@ + + + + + + Karma Store + + + + + + +
+ +
+ + +
+
+

Order your Karma wifi device today!

+
+ + + + + + + + + + + + +
+
+ + +
+ +
+ + +
+
+ + +
+ + + Karma orange + + + + Space Grey +
+ +
+ + + By placing your order, you agree to Karma's + Terms and Conditions. * +
+ + +
+
+
+ Woman working on laptop +
+
+ + +
+ +

© Karma Mobility, Inc.

+
+ + From 9db20edd2cac60563c10ea300613f24d5b625c76 Mon Sep 17 00:00:00 2001 From: kostiantynkovalchuk Date: Fri, 4 Oct 2024 22:44:32 +0200 Subject: [PATCH 6/8] files-updated --- level-2/store.css | 96 ++++++++++++++++++++++++++++++++++++++++++++++ level-2/store.html | 15 +++++--- 2 files changed, 106 insertions(+), 5 deletions(-) diff --git a/level-2/store.css b/level-2/store.css index e69de29bb..ae6d90966 100644 --- a/level-2/store.css +++ b/level-2/store.css @@ -0,0 +1,96 @@ +/* Store Form Styles */ +.store-form-container { + display: flex; + justify-content: space-between; + align-items: center; + padding: 4em; + background-color: white; +} + +.order-form { + width: 50%; + padding: 2em; +} + +.order-form h2 { + color: #ff6f61; +} + +.order-form label { + display: block; + margin-bottom: 0.5em; + font-size: 1rem; +} + +.order-form input, +.order-form select { + width: 100%; + padding: 0.75em; + margin-bottom: 1em; + border: 1px solid #ddd; + border-radius: 4px; +} + +.form-row { + display: flex; + gap: 1em; +} + +.radio-container, +.checkbox-container { + display: flex; + align-items: center; + margin-bottom: 1em; +} + +.radio-container input, +.checkbox-container input { + display: none; +} + +/* Custom radio styles */ +.custom-radio { + width: 16px; + height: 16px; + border-radius: 50%; + border: 2px solid #ddd; + margin-right: 0.5em; + position: relative; +} + +input[type="radio"]:checked + .custom-radio { + background-color: #ff6f61; +} + +/* Custom checkbox styles */ +.custom-checkbox { + width: 16px; + height: 16px; + border: 2px solid #ddd; + margin-right: 0.5em; + position: relative; +} + +input[type="checkbox"]:checked + .custom-checkbox::after { + content: "\2713"; + position: absolute; + top: 0; + left: 0; + color: white; + font-size: 12px; + background-color: #ff6f61; + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; +} + +.store-image { + width: 50%; +} + +.store-image img { + max-width: 100%; + height: auto; +} diff --git a/level-2/store.html b/level-2/store.html index c0bd96bbf..09d008fd0 100644 --- a/level-2/store.html +++ b/level-2/store.html @@ -13,7 +13,9 @@