From 9e902a42a09f907cbec03281360bcaf95fa7a0a3 Mon Sep 17 00:00:00 2001 From: OrlandoMoralesKuan Date: Mon, 25 Sep 2023 15:56:24 +0100 Subject: [PATCH 01/26] Starting the website, Adding the navigation items and background image --- css/style.css | 48 ++++++++++++++++++++++++++++++++++++++++++++++++ index.html | 38 +++++++++++++++++++++++++++++++++++++- 2 files changed, 85 insertions(+), 1 deletion(-) diff --git a/css/style.css b/css/style.css index 5cb025cef..fab6a0084 100755 --- a/css/style.css +++ b/css/style.css @@ -15,5 +15,53 @@ body { * * - When using Flexbox, remember the items you want to move around need to be inside a parent container set to 'display: flex' */ +.header, .footer { + padding: 0rem 1rem 0rem 1rem; + max-width: 1200px; + margin: 0 auto; +} + +/* Header */ +.header { + display: flex; + flex-direction: row; + align-items: center; + justify-content: flex-start; + height: 3rem; + margin-bottom: 1rem; + margin-left: 5rem; + padding-top: 0rem; + } + + + /* Navigation */ + .navigation_list { + display: flex; + list-style: none; + width: 600px; + justify-content: space-between; + padding-left: 450px; + } + + .navigation_item { + padding: 0.5rem 0; + } + .navigation_link1 { + color: #252525; + font-weight: 600; + text-decoration: none; + } + + .navigation_link { + color: #6e6d6d; + font-weight: 400; + text-decoration: none; + } + /* Content*/ + .content{ + background-image: url("../img/first-background.jpg"); + width: 1200px; + height: 400px; + } \ No newline at end of file diff --git a/index.html b/index.html index 3e742ef04..f7a72fc05 100755 --- a/index.html +++ b/index.html @@ -10,10 +10,46 @@ - +
+ + + + + + +
+
+
+ +
+
From b875518e7d412c442a4d97e3719d28335376ae4d Mon Sep 17 00:00:00 2001 From: OrlandoMoralesKuan Date: Mon, 25 Sep 2023 17:32:34 +0100 Subject: [PATCH 02/26] Adding text in main with a div class introducing and button --- css/style.css | 44 +++++++++++++++++++++++++++++++++++++++++--- index.html | 6 ++++-- 2 files changed, 45 insertions(+), 5 deletions(-) diff --git a/css/style.css b/css/style.css index fab6a0084..812c50d75 100755 --- a/css/style.css +++ b/css/style.css @@ -6,6 +6,20 @@ body { -webkit-font-smoothing: antialiased; } +h1{ + font-family: 'Roboto'; + font-weight: lighter; + font-size: 65px; + margin-top: 80px; + margin-bottom: 0px; +} + +p{ + font-size: 35px; + font-weight: lighter; + margin-top: 25px; + margin-bottom: 35px; +} /** * Add your custom styles below * @@ -59,9 +73,33 @@ body { text-decoration: none; } + .navigation_link:hover{ + color: #f96203; + } + /* Content*/ .content{ background-image: url("../img/first-background.jpg"); - width: 1200px; - height: 400px; - } \ No newline at end of file + width: 1263px; + height: 700px; + justify-content: center; + } + + .Introducing{ + color: white; + display: flex; + flex-direction: column; + align-items: center; + padding-top: 170px; + } + +/* Button */ + + .btnLearn{ + background-color: #e05e0d; + width: 120px; + height: 50px; + border-radius: 5px; + font-size: 17px; + margin-top: 20px; + } \ No newline at end of file diff --git a/index.html b/index.html index f7a72fc05..2922f883b 100755 --- a/index.html +++ b/index.html @@ -46,8 +46,10 @@
-
- +
+

Introducing Karma

+

Bring WiFi with you, everywhere you go.

+
From 10f388da2fc6ed05b267f29d23afc6a1529eb529 Mon Sep 17 00:00:00 2001 From: OrlandoMoralesKuan Date: Mon, 25 Sep 2023 19:31:32 +0100 Subject: [PATCH 03/26] Adding the footing --- css/style.css | 81 +++++++++++++++++++++++++++++++++++++++++++++++---- index.html | 42 ++++++++++++++++++++++---- 2 files changed, 113 insertions(+), 10 deletions(-) diff --git a/css/style.css b/css/style.css index 812c50d75..d5f9234f3 100755 --- a/css/style.css +++ b/css/style.css @@ -6,7 +6,7 @@ body { -webkit-font-smoothing: antialiased; } -h1{ +.h1Introducing{ font-family: 'Roboto'; font-weight: lighter; font-size: 65px; @@ -14,12 +14,31 @@ h1{ margin-bottom: 0px; } -p{ +.pIntroducing{ font-size: 35px; font-weight: lighter; margin-top: 25px; margin-bottom: 35px; } + +.h2Logos{ + font-family: 'Roboto'; + font-weight: lighter; + font-size: 50px; + width: 1263px; + height: 50px; + margin-top: 120px; + text-align: center; +} + +.h3Content3{ + width: 500px; + margin-top: 80px; + font-size: 40px; + font-weight: lighter; + padding-right: 106.5px; + padding-left: 106.5px; +} /** * Add your custom styles below * @@ -62,7 +81,7 @@ p{ } .navigation_link1 { - color: #252525; + color: #414040; font-weight: 600; text-decoration: none; } @@ -78,11 +97,10 @@ p{ } /* Content*/ - .content{ + .content1{ background-image: url("../img/first-background.jpg"); width: 1263px; height: 700px; - justify-content: center; } .Introducing{ @@ -93,6 +111,31 @@ p{ padding-top: 170px; } + .content2{ + width: 550px; + height: 400px; + padding-top: 120px; + display: flex; + padding-bottom: 80px; + } + + .content3{ + text-align: center; + background-color: #ffeaf0; + width: 713px; + height: 400px; + } + + .imgDrinking{ + width: 550px; + height: 400px; + } + + .quotation{ + color: #ff0000; + font-size: 50px; + } + /* Button */ .btnLearn{ @@ -102,4 +145,32 @@ p{ border-radius: 5px; font-size: 17px; margin-top: 20px; + } + + .btnGetKarma{ + background-color: #e05e0d; + width: 180px; + height: 50px; + color: white; + border: solid white 2px; + border-radius: 5px; + font-size: 17px; + margin-top: 20px; + } + + /* Footer */ + + .footer{ + width: 1000px; + font-size: 25px; + text-align: center; + color: #232121; + border-top: solid 2px #eae6e6; + } + + .textFooter{ + text-align: center; + font-size: 24px; + color: #acacac; + font-weight: lighter; } \ No newline at end of file diff --git a/index.html b/index.html index 2922f883b..d92fb2b2b 100755 --- a/index.html +++ b/index.html @@ -45,13 +45,45 @@ -
-
-

Introducing Karma

-

Bring WiFi with you, everywhere you go.

- +
+
+
+

Introducing Karma

+

Bring WiFi with you, everywhere you go.

+ +
+
+

Everyone needs a little Karma.

+ +
+
+
+ girl drinking coffee + +
+
+

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

+ +
+
+
+
+

Join us on

+
+
+ +
+
+
(C) Karma Mobility, Inc.
+
+
From 13e9266dac328521031a75d569307fa89a680ed3 Mon Sep 17 00:00:00 2001 From: OrlandoMoralesKuan Date: Mon, 25 Sep 2023 20:52:33 +0100 Subject: [PATCH 04/26] Adding icon in the Footer --- css/style.css | 37 ++++++++++++++++++++++++++++++++++++- index.html | 16 +++++++++++++--- 2 files changed, 49 insertions(+), 4 deletions(-) diff --git a/css/style.css b/css/style.css index d5f9234f3..d86cf6afe 100755 --- a/css/style.css +++ b/css/style.css @@ -27,7 +27,8 @@ body { font-size: 50px; width: 1263px; height: 50px; - margin-top: 120px; + margin-top: 160px; + margin-bottom: 80px; text-align: center; } @@ -158,6 +159,26 @@ body { margin-top: 20px; } +/* Logos */ + +.iconLogos{ + display: flex; + justify-content: flex-start; +} + +.icon{ + width: 1263px; + height: 150px; +} + +.iconText{ + font-family: 'Roboto'; + font-size: 30px; + font-weight: 400; + padding-left: 70px; + padding-right: 70px; +} + /* Footer */ .footer{ @@ -173,4 +194,18 @@ body { font-size: 24px; color: #acacac; font-weight: lighter; + } + + .logosFooter{ + display: flex; + justify-content: center; + } + + .iconFooter{ + height: 30px; + border: solid 2px #d4ceceaa; + border-radius: 30px; + padding: 5px; + margin-right: 10px; + margin-left: 10px; } \ No newline at end of file diff --git a/index.html b/index.html index d92fb2b2b..5f4d2f3d2 100755 --- a/index.html +++ b/index.html @@ -55,8 +55,16 @@

Introducing Karma

Everyone needs a little Karma.

- - +
+ device + coffee + refill +
+
+

Internet for all devices

+

Boost your productivity

+

Pay as You go

+
@@ -80,7 +88,9 @@

Join us on

- + twitter + facebook + instagram
(C) Karma Mobility, Inc.
From 2bb34deef56c1cc1c10b1c6c06e39e28afbdbc47 Mon Sep 17 00:00:00 2001 From: OrlandoMoralesKuan Date: Mon, 25 Sep 2023 21:18:36 +0100 Subject: [PATCH 05/26] FinalVersionMeetKarma --- css/style.css | 17 +++++++++++------ index.html | 2 +- 2 files changed, 12 insertions(+), 7 deletions(-) diff --git a/css/style.css b/css/style.css index d86cf6afe..dfea25879 100755 --- a/css/style.css +++ b/css/style.css @@ -138,7 +138,6 @@ body { } /* Button */ - .btnLearn{ background-color: #e05e0d; width: 120px; @@ -159,8 +158,7 @@ body { margin-top: 20px; } -/* Logos */ - +/* Icons */ .iconLogos{ display: flex; justify-content: flex-start; @@ -180,7 +178,6 @@ body { } /* Footer */ - .footer{ width: 1000px; font-size: 25px; @@ -191,9 +188,10 @@ body { .textFooter{ text-align: center; - font-size: 24px; + font-size: 25px; color: #acacac; - font-weight: lighter; + font-weight:400; + margin-top: 20px; } .logosFooter{ @@ -208,4 +206,11 @@ body { padding: 5px; margin-right: 10px; margin-left: 10px; + } + + .circle{ + border: solid 1px #acacac; + border-radius: 20px; + padding: 0 4px 0 4px; + font-size: 15px; } \ No newline at end of file diff --git a/index.html b/index.html index 5f4d2f3d2..92c6af00e 100755 --- a/index.html +++ b/index.html @@ -93,7 +93,7 @@

Join us on

instagram
-
(C) Karma Mobility, Inc.
+
C Karma Mobility, Inc.
From 54ccead2826a82db12146b1a02197e8c4823d1dc Mon Sep 17 00:00:00 2001 From: OrlandoMoralesKuan Date: Tue, 26 Sep 2023 11:33:12 +0100 Subject: [PATCH 06/26] Starting with the store website --- css/style.css | 3 +-- index.html | 38 +++++++++++++++++++++----------------- 2 files changed, 22 insertions(+), 19 deletions(-) diff --git a/css/style.css b/css/style.css index dfea25879..d469c6693 100755 --- a/css/style.css +++ b/css/style.css @@ -67,7 +67,6 @@ body { padding-top: 0rem; } - /* Navigation */ .navigation_list { display: flex; @@ -99,7 +98,7 @@ body { /* Content*/ .content1{ - background-image: url("../img/first-background.jpg"); + background-image: url("/img/first-background.jpg"); width: 1263px; height: 700px; } diff --git a/index.html b/index.html index 92c6af00e..bb6f01a3f 100755 --- a/index.html +++ b/index.html @@ -22,13 +22,13 @@
- twitter - facebook - instagram + twitter + facebook + instagram
C Karma Mobility, Inc.
From 57034ceb86a78df3d0b97925c6fe12cf568b49a2 Mon Sep 17 00:00:00 2001 From: OrlandoMoralesKuan Date: Tue, 26 Sep 2023 13:19:00 +0100 Subject: [PATCH 07/26] Adding the radios to the store html --- index.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index bb6f01a3f..b323a24de 100755 --- a/index.html +++ b/index.html @@ -77,12 +77,12 @@

Pay as You go

class="imgDrinking">
-
+

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

-
+
From cc2d26c9ebb43eb9bd3f074b40930b0bd55f5238 Mon Sep 17 00:00:00 2001 From: OrlandoMoralesKuan Date: Tue, 26 Sep 2023 19:07:24 +0100 Subject: [PATCH 08/26] Adding Store website --- store.html | 183 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 183 insertions(+) create mode 100644 store.html diff --git a/store.html b/store.html new file mode 100644 index 000000000..5eba71eda --- /dev/null +++ b/store.html @@ -0,0 +1,183 @@ + + + + + + Store-desktop + + + + + +
+ + + + + +
+ +
+
+
+ girl drinking coffee + +
+
+

+ Order your Karma wifi device today! +

+
+
First Name *
+
Last Name *
+
+
+ + +
+
+
Address 1 *
+
+
+ +
+
+
Address 2
+
+
+ +
+
+
City *
+
PostCode *
+
+
+ +
+ +
+

Select a colour

+
+ + + + +
+ +
+
+ +
+ +
+ +
+ +
+ + + +
+
+

Join us on

+
+
+ twitter + facebook + instagram +
+
+
C Karma Mobility, Inc.
+
+
+ \ No newline at end of file From 3c036eac9256fea6d0c42e27b61adc1db1f3f750 Mon Sep 17 00:00:00 2001 From: OrlandoMoralesKuan Date: Tue, 26 Sep 2023 19:16:38 +0100 Subject: [PATCH 09/26] Adding CSS for Store Website Lv2 --- store.css | 231 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 231 insertions(+) create mode 100644 store.css diff --git a/store.css b/store.css new file mode 100644 index 000000000..245e39499 --- /dev/null +++ b/store.css @@ -0,0 +1,231 @@ +body{ + font-family: 'Roboto', sans-serif; + -webkit-font-smoothing: antialiased; + margin: 0; +} + +main{ + height: 900px; +} + +.header, .footer { + padding: 0rem 1rem 0rem 1rem; + max-width: 1200px; + margin: 0 auto; +} + +/* Header */ +.header{ + display: flex; + flex-direction: row; + align-items: center; + justify-content: flex-start; + height: 4rem; + width: 1167px; + margin-bottom: 0rem; + padding-left: 96px; + padding-right: 0rem; + padding-top: 0rem; + background-color: #e0e0e0; +} + +/* Navigation */ +.navigation_list { + display: flex; + list-style: none; + width: 600px; + justify-content: space-between; + padding-left: 450px; + } + + .navigation_item { + padding: 0.5rem 0; + } + + .navigation_link1 { + color: #414040; + font-weight: 600; + text-decoration: none; + } + + .navigation_link { + color: #6e6d6d; + font-weight: 400; + text-decoration: none; + } + + .navigation_link:hover{ + color: #f96203; + } + + /* Main */ + .content2{ + width: 600px; + padding-top: 0px; + display: flex; + } + + .content3{ + text-align: center; + height: 900px; + } + + .h1Content3{ + width: 543px; + font-size: 40px; + margin: 100px 60px 15px 60px; + color: #f96203; + } + + .imgStore{ + width: 600px; + } + +/* Input*/ + .nameText{ + display: flex; + justify-content: start; + padding-top: 0px; + font-size: 20px; + height: 50px; + color: #414040; + } + + .h5name1{ + margin-bottom: 0px; + padding-left: 133px; + height: 25px; + } + + .h5name2{ + margin-bottom: 0px; + padding-left: 115px; + height: 25px; + } + + .inputName{ + width: 190px; + height: 30px; + margin-left: 10px; + border: solid 2px rgb(118, 118, 118); + border-radius: 4px; + } + + .inputAddress{ + width: 398px; + height: 30px; + margin-left: 10px; + border: solid 2px rgb(118, 118, 118); + border-radius: 4px; + } + + .inputCity{ + width: 290px; + height: 36px; + padding: 1px 2px; + margin-left: 10px; + margin-right: 12px; + border: solid 2px rgb(118, 118, 118); + border-radius: 4px; + } + + .inputPostCode{ + width: 100px; + height: 30px; + padding: 1px 2px; + border: solid 2px rgb(118, 118, 118); + border-radius: 4px; + } + + /* Select*/ + .h5name3{ + margin-bottom: 0px; + padding-left: 258px; + height: 25px; + } + + .h4SelectColour{ + margin-top: 50px; + margin-left: 133px; + } + + .inputRadio1{ + margin-top: 40px; + margin-left: -105px; + } + +.inputRadio2{ + margin-top: 40px; + margin-left: 20px; + } + +.radioText{ + font-size: 20px; + } + +.checkbox{ + display: flex; + text-align: left; + margin-top: 60px; + margin-left: 127px; + margin-right: 95px; + font-size: 18px; + } + + a{ + color: #f96203; + } + +.divPlace{ + text-align: left; +} + +.btnPlace{ + margin-top: 30px; + margin-left: 130px; + width: 180px; + height: 50px; + font-size: 17px; + color: #ffffff; + background: #f96203; + border-radius: 8px; + border: solid 2px #ffffff; + } + + /* Footer */ + .footer{ + width: 1000px; + font-size: 25px; + text-align: center; + color: #232121; + border-top: solid 2px #eae6e6; + } + + .textFooter{ + text-align: center; + font-size: 25px; + color: #acacac; + font-weight:400; + margin-top: 20px; + } + + .logosFooter{ + display: flex; + justify-content: center; + } + + .iconFooter{ + height: 30px; + border: solid 2px #d4ceceaa; + border-radius: 30px; + padding: 5px; + margin-right: 10px; + margin-left: 10px; + } + + .circle{ + border: solid 1px #acacac; + border-radius: 20px; + padding: 0 4px 0 4px; + font-size: 15px; + } \ No newline at end of file From afef89cc585855a64dffe791a5bf4dc6133bf27a Mon Sep 17 00:00:00 2001 From: OrlandoMoralesKuan Date: Tue, 26 Sep 2023 19:23:26 +0100 Subject: [PATCH 10/26] Changing the path for get the CSS features --- store.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/store.html b/store.html index 5eba71eda..3f6f550c6 100644 --- a/store.html +++ b/store.html @@ -4,7 +4,7 @@ Store-desktop - + @@ -164,7 +164,7 @@

Select a colour

- +