From 95c5db0cdf5b0384442af0215a4bf20801f76b92 Mon Sep 17 00:00:00 2001 From: RbAvci Date: Thu, 28 Sep 2023 23:32:59 +0100 Subject: [PATCH 01/23] add html content --- .DS_Store | Bin 0 -> 8196 bytes .vscode/settings.json | 3 ++ css/style.css | 3 ++ img/.DS_Store | Bin 0 -> 6148 bytes index.html | 79 ++++++++++++++++++++++++++++++++++++------ 5 files changed, 74 insertions(+), 11 deletions(-) create mode 100644 .DS_Store create mode 100644 .vscode/settings.json create mode 100644 img/.DS_Store diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..838c4c240bd2aabd088a68453c30eec8282bc71e GIT binary patch literal 8196 zcmeHML2nyH6n>KgvW{u8Bo1wn0817Uha}jk8j5K(<8OXq=EswWskK4F5&v9Wj_XIk1F|@v`zCB$&{N$(a#H&CJvZg{gxF%S(4+}Mj*DYwhp|2Q5T zjKqHWyO?5jxIQ|d9@(i?eh-h)RZdfjB8tYn*c&OYEbWs;eeAkLoP5k6dnwkF6l;!d z(k^XMmA2>;^w+3M?G)$F6eovObND$FV8#w`mD*?{I;0pQ0ipz0L1#S9R3{Z@kv^nt zx&w9txQf|p=&iz9qmO83(ppGp^WDfDG*dC^^eI*7W9+6ei7!L3!CnQJ|ipAML<%qqtc7nN3a4y!7&{F>7Rv2lWGfRFAE= z7genAp15jo?%Bh>W#4w4qo$d=!Ts2BeJ7Lzx9z~?{vFqE^P>vy`Rzz@>&bwTF)~f_ z^6~MNYsHoP`unAmmHct3w6VUD-zZ)?ImsByg?F#-HV?h7&&ASFn0h18h2;9Q{R%y` z9kh9laR8s(bAt?bGjtqZ#@pWCkDPdKq<{B* z1Ua{2r@Q6vbHwjM%IzR_xgXtj!U%ZR3Pa29IF-i_Jj-^xZNI|fn0K4zg5-&KCNoi?d@IqYP<|)rm{b_5X5@xFg{2qmS?`d01H=)kAu&k9*6sKHvMwxVK0mHb0WU8Khec z)+$o3HZkpx@?#9OM-5tmv;xzK;Zhb@JOB6pG)-S?1+)VHBL&z@wO*}YL&NuDdT-*a zokx9$DvIzMBq%9pv=})DfpwgCYRvd|AaRr$7Y@sv_ zT_ObUS@!rh&-O&NV*swR9$W$ufF`40qs64cq+Q~U)k2LlI`xqvW0<0i$xd&pFa=D3 z-==`<-D8Zha|pxK`mCMAZI; zb67D9=|j%oJ!6B~Z}B-5vwx)k?`*N=fk#VC0aL&f_)2*Qa2CINGgY@s<%C3>n0PYmbjtdB##Bw+5*)8WG7!-bJuc%e8Qo&IC(4wrbe z)D$oUwiT%RVkGzf)%WlJZIYEt0aM^lDc~C2yKaX|3U}+y;^eN486OzMq+jk)DNMq3 gtQonA&luI%7E6Yh1k63MhGstkDuX4az>g~M2_j061poj5 literal 0 HcmV?d00001 diff --git a/index.html b/index.html index 3e742ef04..a803133d5 100755 --- a/index.html +++ b/index.html @@ -1,19 +1,76 @@ - - - + + + 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
+
+ + + + +
+ +
© Karma Mobility, Inc.
+
+ From 5d28d9685bc812fdf4dc587bd1e1c1614db89322 Mon Sep 17 00:00:00 2001 From: RbAvci Date: Fri, 29 Sep 2023 00:05:13 +0100 Subject: [PATCH 02/23] select root colors --- css/style.css | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/css/style.css b/css/style.css index 8c8a1a42a..760b70bd5 100755 --- a/css/style.css +++ b/css/style.css @@ -1,9 +1,14 @@ +/* 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 */ - +:root { + --dark-gray: rgb(75, 75, 75); + --light-gray: rgb(171, 171, 171); + --white: rgb(255, 255, 255); + --orange: rgb(241, 91, 42); +} body { - font-family: 'Roboto', sans-serif; - -webkit-font-smoothing: antialiased; + font-family: "Roboto", sans-serif; + -webkit-font-smoothing: antialiased; } /** @@ -15,8 +20,3 @@ body { * * - When using Flexbox, remember the items you want to move around need to be inside a parent container set to 'display: flex' */ - - - - - From 79d278db5d8a60c025bcd20c767ef6ab906df109 Mon Sep 17 00:00:00 2001 From: RbAvci Date: Fri, 29 Sep 2023 00:51:59 +0100 Subject: [PATCH 03/23] add header and text styles --- css/style.css | 28 ++++++++++++++++++++++++++++ index.html | 12 ++++++------ 2 files changed, 34 insertions(+), 6 deletions(-) diff --git a/css/style.css b/css/style.css index 760b70bd5..78e3e4125 100755 --- a/css/style.css +++ b/css/style.css @@ -5,10 +5,14 @@ --light-gray: rgb(171, 171, 171); --white: rgb(255, 255, 255); --orange: rgb(241, 91, 42); + + --h3-color: var(--dark-gray); } body { font-family: "Roboto", sans-serif; + font-size: 16px; -webkit-font-smoothing: antialiased; + color: var(--dark-gray); } /** @@ -20,3 +24,27 @@ body { * * - When using Flexbox, remember the items you want to move around need to be inside a parent container set to 'display: flex' */ + +h1, +h2, +h3 { + font-weight: 400; + line-height: 1.2em; +} + +h1 { + font-size: 52px; + color: var(--white); +} +h2 { + font-size: 40px; + color: var(--dark-gray); +} +h3 { + font-size: 30px; + color: var(--h3-color); +} + +p { + font-size: 25px; +} diff --git a/index.html b/index.html index a803133d5..91baea82e 100755 --- a/index.html +++ b/index.html @@ -35,28 +35,28 @@
-
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
+

Internet for all devices

-
Boost your productivity
+

Boost your productivity

-
Pay as You Go
+

Pay as You Go

From 8d023e060ccca9b9a3b4ed33fe7b221e2ead7f3f Mon Sep 17 00:00:00 2001 From: RbAvci Date: Fri, 29 Sep 2023 00:54:44 +0100 Subject: [PATCH 04/23] add general styles comment --- css/style.css | 2 ++ 1 file changed, 2 insertions(+) diff --git a/css/style.css b/css/style.css index 78e3e4125..1f57a71d0 100755 --- a/css/style.css +++ b/css/style.css @@ -25,6 +25,7 @@ body { * - When using Flexbox, remember the items you want to move around need to be inside a parent container set to 'display: flex' */ +/* General styles, */ h1, h2, h3 { @@ -48,3 +49,4 @@ h3 { p { font-size: 25px; } + From 630af1b79b4beeb2ba8707d797f5a1eae412a8da Mon Sep 17 00:00:00 2001 From: RbAvci Date: Fri, 29 Sep 2023 22:13:57 +0100 Subject: [PATCH 05/23] add header styles --- css/style.css | 22 +++++++++++++++++++++- index.html | 18 ++++++++---------- 2 files changed, 29 insertions(+), 11 deletions(-) diff --git a/css/style.css b/css/style.css index 1f57a71d0..dee89412e 100755 --- a/css/style.css +++ b/css/style.css @@ -7,10 +7,11 @@ --orange: rgb(241, 91, 42); --h3-color: var(--dark-gray); + + font-size: 16px; } body { font-family: "Roboto", sans-serif; - font-size: 16px; -webkit-font-smoothing: antialiased; color: var(--dark-gray); } @@ -50,3 +51,22 @@ p { font-size: 25px; } +li { + list-style: none; +} + +/* Header styles */ + +.header { + display: flex; + justify-content: space-between; + align-content: center; + height: 4rem; + padding: 1.5rem 7rem; +} + +.nav-menu { + display: flex; + align-items: center; + gap: 3rem; +} diff --git a/index.html b/index.html index 91baea82e..282abadd1 100755 --- a/index.html +++ b/index.html @@ -19,17 +19,15 @@ -
+
-
From ba8b91e983a393c6ac0535941737a4c46adf2fa8 Mon Sep 17 00:00:00 2001 From: RbAvci Date: Fri, 29 Sep 2023 23:01:39 +0100 Subject: [PATCH 06/23] add hero styles --- css/style.css | 29 +++++++++++++++++++++++++++-- 1 file changed, 27 insertions(+), 2 deletions(-) diff --git a/css/style.css b/css/style.css index dee89412e..d5301f31b 100755 --- a/css/style.css +++ b/css/style.css @@ -30,12 +30,13 @@ body { h1, h2, h3 { - font-weight: 400; + font-weight: 300; line-height: 1.2em; + margin: 0; } h1 { - font-size: 52px; + font-size: 72px; color: var(--white); } h2 { @@ -70,3 +71,27 @@ li { align-items: center; gap: 3rem; } + +/* Hero styles */ + +.hero { + --h3-color: var(--white); + background: url(../img/first-background.jpg) no-repeat center/cover; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + height: 700px; +} + +.hero h1 { + margin-bottom: 2rem; +} + +.hero h3 { + margin-bottom: 2rem; +} + +.hero button { + margin: 2rem 0px; +} From d18822b7f21f3ce19f177a01422dd3c981229a7b Mon Sep 17 00:00:00 2001 From: RbAvci Date: Fri, 29 Sep 2023 23:37:31 +0100 Subject: [PATCH 07/23] add content styles --- css/style.css | 29 +++++++++++++++++++++++++++++ index.html | 14 +++++++------- 2 files changed, 36 insertions(+), 7 deletions(-) diff --git a/css/style.css b/css/style.css index d5301f31b..85a1e0152 100755 --- a/css/style.css +++ b/css/style.css @@ -95,3 +95,32 @@ li { .hero button { margin: 2rem 0px; } + +/* Content Styles */ + +.content { + display: flex; + flex-direction: column; + align-items: center; + padding: 5rem 0; +} +.content h2 { + margin: 3rem 0; +} +.feature-list { + display: flex; + gap: 3rem; +} + +.feature { + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: center; + width: 260px; + text-align: center; +} + +.feature img { + width: 120px; +} diff --git a/index.html b/index.html index 282abadd1..0054c60c9 100755 --- a/index.html +++ b/index.html @@ -40,20 +40,20 @@

Bring WiFi with you, everywhere you go

Everyone needs a little Karma

-
+
-
- +
+ icon-devices

Internet for all devices

-
- +
+ icon-coffee

Boost your productivity

-
- +
+ icon-refill

Pay as You Go

From a1ce034a2206df8dbcc05a433d0843713558c507 Mon Sep 17 00:00:00 2001 From: RbAvci Date: Sat, 30 Sep 2023 00:21:36 +0100 Subject: [PATCH 08/23] add footer styles --- css/style.css | 20 ++++++++++++++++++++ index.html | 7 ++++--- 2 files changed, 24 insertions(+), 3 deletions(-) diff --git a/css/style.css b/css/style.css index 85a1e0152..fc92d082f 100755 --- a/css/style.css +++ b/css/style.css @@ -124,3 +124,23 @@ li { .feature img { width: 120px; } + +/* Footer Styles */ + +.footer { + display: flex; + flex-direction: column; + align-items: center; + height: 12rem; + padding: 1rem 0; +} + +.social-media { + display: flex; + margin: 1rem; + gap: 1rem; +} + +.social-media img { + width: 40px; +} diff --git a/index.html b/index.html index 0054c60c9..98f15949e 100755 --- a/index.html +++ b/index.html @@ -59,10 +59,11 @@

Everyone needs a little Karma

-
+
+
Join us on
-
- + +
From 8cab1071417536f33076536a56489bf0e9318ec8 Mon Sep 17 00:00:00 2001 From: RbAvci Date: Thu, 5 Oct 2023 00:34:23 +0100 Subject: [PATCH 13/23] add store feature --- css/style.css | 33 ++++++++++++++++++++++++++++++++- index.html | 12 ++++++++++++ 2 files changed, 44 insertions(+), 1 deletion(-) diff --git a/css/style.css b/css/style.css index d6c29c211..db7d136c3 100755 --- a/css/style.css +++ b/css/style.css @@ -5,6 +5,7 @@ --light-gray: rgb(171, 171, 171); --white: rgb(255, 255, 255); --orange: rgb(241, 91, 42); + --light-orange: rgb(252, 239, 235); --h3-color: var(--dark-gray); @@ -14,6 +15,7 @@ body { font-family: "Roboto", sans-serif; -webkit-font-smoothing: antialiased; color: var(--dark-gray); + text-align: center; } /** @@ -154,13 +156,42 @@ hr { justify-content: space-between; align-items: center; width: 350px; - text-align: center; } .feature img { width: 120px; } +/* Store Feature Styles */ + +.store-ft { + display: flex; + margin-bottom: 5rem; +} + +.store-ft > img { + max-width: 40%; + flex-grow: 1; +} + +.store-ft-nav { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + flex-grow: 1; + max-width: 60%; + background-color: var(--light-orange); +} + +.store-ft-nav > h3 { + margin: 0 3rem 3rem; + font-style: italic; +} + +.color-orange { + color: var(--orange); +} /* Footer Styles */ .footer { diff --git a/index.html b/index.html index 591a801a3..454b70e6e 100755 --- a/index.html +++ b/index.html @@ -58,6 +58,18 @@

Everyone needs a little Karma

+ + +
+ a woman looks tablet +
+

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

+ +
+