From 90603d53129e7fa204b468405a77cfd1b5c95374 Mon Sep 17 00:00:00 2001 From: hadika1malik Date: Thu, 28 Sep 2023 00:25:37 +0100 Subject: [PATCH 01/14] draft 1 --- css/style.css | 65 ++++++++++++++++++++++++++++++++++++++++++++------- 1 file changed, 56 insertions(+), 9 deletions(-) diff --git a/css/style.css b/css/style.css index 5cb025cef..44c3f52df 100755 --- a/css/style.css +++ b/css/style.css @@ -6,14 +6,61 @@ body { -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' - */ +.header, +.main, +.footer{ + padding: 0 1.5rem; + max-width: 1200px; + margin: 0 auto; +} + +.header{ + display: flex; + align-items: center; + justify-content: space-between; + height: 5rem; + margin-bottom: 1rem; + padding-top: 1rem; + margin-left: 4rem; + margin-right: 4rem; +} + +.header_logo{ + width: 20px; + height: auto; +} + +.navigation_list{ + display: flex; + list-style: none; +} + +.navigation_item{ + padding: 20px; +} +.navigation_link{ + text-decoration: none; + color: grey; +} + +.navigation_link:hover{ + color: rgba(214, 65, 12, 0.842); +} + +.main{ + background-image: url(../img/first-background.jpg); + color: white; + padding: 80px; + text-align: center; + font-size: xx-large; +} + +.main h1{ + margin-top: 12rem; +} + +.main button{ + margin-bottom: 16rem; +} From a829614dd50c333cb9228e09ef4e73b0c811b911 Mon Sep 17 00:00:00 2001 From: hadika1malik Date: Thu, 28 Sep 2023 00:26:13 +0100 Subject: [PATCH 02/14] draft 1 --- index.html | 92 ++++++++++++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 89 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index 3e742ef04..93de5800d 100755 --- a/index.html +++ b/index.html @@ -10,10 +10,96 @@ +
+ + + + +
- - - +
+
+

Introducing Karma

+

Bring WiFi with you, everywhere you go.

+ +
+
+

Everyone needs a little Karma.

+ +
+ devices image +

Internet for all devices

+
+
+ devices image +

Boost your productivity

+
+ +
+ devices image +

Pay as You Go

+
+
+
+ +
+
+

Join us on

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

@Karma Mobility Inc.

+
+
From 47644897a2370f95be95ffa7cbbc0225b5c0375d Mon Sep 17 00:00:00 2001 From: hadika1malik Date: Thu, 28 Sep 2023 01:29:42 +0100 Subject: [PATCH 03/14] draft 2 --- css/style.css | 44 ++++++++++++++++++++++++++++++++++++++++++-- index.html | 2 +- 2 files changed, 43 insertions(+), 3 deletions(-) diff --git a/css/style.css b/css/style.css index 44c3f52df..7ff141b10 100755 --- a/css/style.css +++ b/css/style.css @@ -54,13 +54,53 @@ body { padding: 80px; text-align: center; font-size: xx-large; + margin-bottom: 5rem; } .main h1{ - margin-top: 12rem; + margin-top: 7rem; } +.main p{ + margin-bottom: 4rem; +} + .main button{ - margin-bottom: 16rem; + margin-bottom: 10rem; + background-color: rgba(214, 65, 12, 0.842); + color: white; + padding: 20px 50px; + border-radius: 10px; +} + +.second_heading{ + text-align: center; +} + +.images{ + display: inline-block; + justify-content:space-around; + padding: 40px; + width: 300px; + height: 200px; } +.article_title{ + text-align: center; + font-size: 25px; +} + +.footer p { + text-align: center; + margin-top: 10rem; + font-size: 20px; + align-items: center; +} + +.footer_img{ + display:inline-block; + align-items: center; + padding: 10px; + width: 20px; + height: 30px; +} \ No newline at end of file diff --git a/index.html b/index.html index 93de5800d..f9c7dbdcf 100755 --- a/index.html +++ b/index.html @@ -48,7 +48,7 @@

Introducing Karma

Bring WiFi with you, everywhere you go.

-
+

Everyone needs a little Karma.

From 94623e8f355fda0012147c5b1f832d0872d42513 Mon Sep 17 00:00:00 2001 From: hadika1malik Date: Thu, 28 Sep 2023 15:12:36 +0100 Subject: [PATCH 04/14] draft2 --- css/style.css | 54 +++++++++++++++++++++++++++++++++--------------- index.html | 57 +++++++++++++++++++++++++++------------------------ 2 files changed, 67 insertions(+), 44 deletions(-) diff --git a/css/style.css b/css/style.css index 7ff141b10..26b5bc315 100755 --- a/css/style.css +++ b/css/style.css @@ -6,37 +6,36 @@ body { -webkit-font-smoothing: antialiased; } -.header, +/* .header, .main, .footer{ padding: 0 1.5rem; max-width: 1200px; margin: 0 auto; -} +} */ .header{ display: flex; align-items: center; justify-content: space-between; height: 5rem; - margin-bottom: 1rem; - padding-top: 1rem; - margin-left: 4rem; - margin-right: 4rem; + margin: 2px 100px; } .header_logo{ width: 20px; - height: auto; + height: 10rem; } .navigation_list{ display: flex; + align-items: center; list-style: none; } .navigation_item{ padding: 20px; + font-size: large; } .navigation_link{ @@ -50,11 +49,13 @@ body { .main{ background-image: url(../img/first-background.jpg); + background-repeat: no-repeat; + background-position: center; color: white; padding: 80px; text-align: center; font-size: xx-large; - margin-bottom: 5rem; + margin: 5px 40px; } .main h1{ @@ -75,31 +76,50 @@ body { .second_heading{ text-align: center; + margin-top: 5rem; + margin-bottom: 8rem; + font-size: 50px; } +.container{ + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 8rem; +} .images{ - display: inline-block; - justify-content:space-around; - padding: 40px; width: 300px; height: 200px; } .article_title{ - text-align: center; font-size: 25px; + display: flex; + align-items: center; + justify-content: center; } -.footer p { +/* .container{ + display: grid; + align-items: center; + justify-content: center; + grid-gap: 200px; + grid-template-columns: 200px 200px 200px; + grid-template-rows: 50px 300px; +} */ + +.footer{ + display: flex; + align-items: center; + justify-content: center; text-align: center; - margin-top: 10rem; +} + +.footer p { font-size: 20px; - align-items: center; } .footer_img{ - display:inline-block; - align-items: center; padding: 10px; width: 20px; height: 30px; diff --git a/index.html b/index.html index f9c7dbdcf..2757c1312 100755 --- a/index.html +++ b/index.html @@ -48,38 +48,41 @@

Introducing Karma

Bring WiFi with you, everywhere you go.

-
-

Everyone needs a little Karma.

+
+

Everyone needs a little Karma.

-
- devices image -

Internet for all devices

-
+
+
+ devices image +

Internet for all devices

+
-
- devices image -

Boost your productivity

-
+
+ devices image +

Boost your productivity

+
+ +
+ devices image +

Pay as You Go

+
+
-
- devices image -

Pay as You Go

-
- +

Join us on

From d22b0478e6163da716989305923290316918adb2 Mon Sep 17 00:00:00 2001 From: hadika1malik Date: Sat, 30 Sep 2023 15:50:18 +0100 Subject: [PATCH 05/14] final version --- css/style.css | 38 ++++++++++++++++++++++++++++++++------ index.html | 10 +++++----- 2 files changed, 37 insertions(+), 11 deletions(-) diff --git a/css/style.css b/css/style.css index 26b5bc315..050b65391 100755 --- a/css/style.css +++ b/css/style.css @@ -6,6 +6,16 @@ body { -webkit-font-smoothing: antialiased; } +h1, +h2, +h3, +h4, +h5, +h6, +p{ + font-weight: lighter; +} + /* .header, .main, .footer{ @@ -77,7 +87,6 @@ body { .second_heading{ text-align: center; margin-top: 5rem; - margin-bottom: 8rem; font-size: 50px; } @@ -85,16 +94,22 @@ body { display: flex; align-items: center; justify-content: center; - margin-bottom: 8rem; + margin-bottom: 4rem; } + .images{ - width: 300px; - height: 200px; + width: 200px; } .article_title{ - font-size: 25px; + font-size: 40px; + text-wrap: nowrap; +} + +.articles{ + padding: 20px 40px; display: flex; + flex-direction: column; align-items: center; justify-content: center; } @@ -119,8 +134,19 @@ body { font-size: 20px; } +.copyright{ + color: lightgray; +} + .footer_img{ padding: 10px; width: 20px; - height: 30px; + height: 20px; + border: solid 1px lightgray; + border-radius: 50%; + margin: 5px; +} + +hr{ + width: 90%; } \ No newline at end of file diff --git a/index.html b/index.html index 2757c1312..b8010dee6 100755 --- a/index.html +++ b/index.html @@ -52,7 +52,7 @@

Introducing Karma

Everyone needs a little Karma.

-
+
Everyone needs a little Karma.

Internet for all devices

-
+
Everyone needs a little Karma.

Boost your productivity

-
+
Everyone needs a little Karma.
-
+

Join us on

@@ -101,7 +101,7 @@

Everyone needs a little Karma.

src="img/instagram-icon.svg" alt="instagram-icon" /> -

@Karma Mobility Inc.

+

@Karma Mobility Inc.

From 5fd3daf7232684b3de09c7bf0aefce27b8c5c3f5 Mon Sep 17 00:00:00 2001 From: hadika1malik Date: Thu, 5 Oct 2023 00:40:19 +0100 Subject: [PATCH 06/14] level 2 feature homepage draft 1 --- css/style.css | 39 +++++++++++++++++++++++++++++++++++---- index.html | 15 +++++++++++++++ 2 files changed, 50 insertions(+), 4 deletions(-) diff --git a/css/style.css b/css/style.css index 050b65391..7edd4de6e 100755 --- a/css/style.css +++ b/css/style.css @@ -76,12 +76,15 @@ p{ margin-bottom: 4rem; } -.main button{ +.orange-button{ margin-bottom: 10rem; - background-color: rgba(214, 65, 12, 0.842); + background-color: rgb(214, 103, 12); + border: none; color: white; - padding: 20px 50px; - border-radius: 10px; + padding: 20px 35px; + border-radius: 8px; + font-size: 25px; + font-weight: lighter; } .second_heading{ @@ -149,4 +152,32 @@ p{ hr{ width: 90%; +} + +.feature{ + display: flex; + justify-content: center; + align-content: center; +} + + +.feedback{ + background-color: rgba(255, 113, 4, 0.252); + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + text-align: center; +} + + .speechmarks{ + font-size: 40px; + font-style: italic; + padding: 2px 20px; + margin: 20px 40px 10px 40px; + text-wrap: wrap; +} + +.feedback button{ + margin-top: 200px; } \ No newline at end of file diff --git a/index.html b/index.html index b8010dee6..6bd9da667 100755 --- a/index.html +++ b/index.html @@ -81,6 +81,21 @@

Everyone needs a little Karma.

+ +
+
+ happy woman +
+ + +
+
From 8d528945f423346db6e669b1e64fc31a626ed96e Mon Sep 17 00:00:00 2001 From: hadika1malik Date: Thu, 5 Oct 2023 23:12:51 +0100 Subject: [PATCH 07/14] homepage addition --- css/style.css | 17 ++++++----------- 1 file changed, 6 insertions(+), 11 deletions(-) diff --git a/css/style.css b/css/style.css index 7edd4de6e..2dd2c2b9b 100755 --- a/css/style.css +++ b/css/style.css @@ -160,24 +160,19 @@ hr{ align-content: center; } - .feedback{ - background-color: rgba(255, 113, 4, 0.252); display: flex; flex-direction: column; justify-content: center; align-items: center; - text-align: center; + padding: 10rem; } - .speechmarks{ +.speechmarks{ + display: flex; + justify-content: center; + align-items: center; font-size: 40px; font-style: italic; - padding: 2px 20px; - margin: 20px 40px 10px 40px; - text-wrap: wrap; + white-space: nowrap; } - -.feedback button{ - margin-top: 200px; -} \ No newline at end of file From 316c4269aec350ef86e001878da1362137cf0166 Mon Sep 17 00:00:00 2001 From: hadika1malik Date: Fri, 6 Oct 2023 23:09:36 +0100 Subject: [PATCH 08/14] trial for feedback css styling --- css/style.css | 5 ++++- index.html | 11 +++++------ 2 files changed, 9 insertions(+), 7 deletions(-) diff --git a/css/style.css b/css/style.css index 2dd2c2b9b..ea1498f30 100755 --- a/css/style.css +++ b/css/style.css @@ -155,17 +155,20 @@ hr{ } .feature{ + width: 90%; + margin: auto; display: flex; justify-content: center; align-content: center; } + .feedback{ display: flex; flex-direction: column; justify-content: center; align-items: center; - padding: 10rem; + /* padding: 10rem; */ } .speechmarks{ diff --git a/index.html b/index.html index 6bd9da667..3efc2b4e1 100755 --- a/index.html +++ b/index.html @@ -83,12 +83,11 @@

Everyone needs a little Karma.

-
- happy woman -
+ happy woman