From 902b2fcd73beb73d6f39c7f1777f0c4efa9c0cba Mon Sep 17 00:00:00 2001 From: Pedram Amani Date: Thu, 28 Sep 2023 13:38:00 +0100 Subject: [PATCH 01/12] Initial attempt (header): logo added, navbar added --- .vscode/settings.json | 3 +++ css/style.css | 32 +++++++++++++++++++++--- index.html | 58 +++++++++++++++++++++++++++++++++++-------- 3 files changed, 78 insertions(+), 15 deletions(-) create mode 100644 .vscode/settings.json diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 000000000..6b665aaa0 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} diff --git a/css/style.css b/css/style.css index 5cb025cef..16b7aed01 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,29 @@ 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 { + display: flex; + justify-content: space-around; +} + +.header-logo { + max-width: 30px; + height: auto; +} + +.nav-list { + list-style: none; + display: flex; + margin: o; + padding: 0; +} +.nav-item { + margin-right: 20px; +} + +.nav-link { + text-decoration: none; +} diff --git a/index.html b/index.html index 3e742ef04..326973dfc 100755 --- a/index.html +++ b/index.html @@ -1,19 +1,55 @@ - - - + + + Karma - - - - - - - + + + + + + - +
+ + + +
+ +
+ + + From 878c5323eed62717cd517341f2e2a66b9034238d Mon Sep 17 00:00:00 2001 From: Pedram Amani Date: Thu, 28 Sep 2023 15:01:09 +0100 Subject: [PATCH 02/12] Main:background img added,icons added,texts added. --- css/style.css | 26 +++++++++++++++++++++++++- index.html | 38 +++++++++++++++++++++++++++++++++++++- 2 files changed, 62 insertions(+), 2 deletions(-) diff --git a/css/style.css b/css/style.css index 16b7aed01..0282562de 100755 --- a/css/style.css +++ b/css/style.css @@ -15,7 +15,7 @@ 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 styles */ .header { display: flex; @@ -41,3 +41,27 @@ body { .nav-link { text-decoration: none; } + +/* Main styles */ + +.main { + text-align: center; +} + +.icons { + max-width: 100px; + height: auto; +} + +.the-three-icons { + display: flex; + justify-content: center; +} + +.icons-texts { + margin: 20px; +} + +.with-img-background { + background-image: url("../img/first-background.jpg"); +} diff --git a/index.html b/index.html index 326973dfc..73645f0f4 100755 --- a/index.html +++ b/index.html @@ -48,7 +48,43 @@ -
+
+
+

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 for refill +

Pay as You Go

+
+
+
+
From 614c52560c05c240ff36cd862308bb29ad5bcbd1 Mon Sep 17 00:00:00 2001 From: Pedram Amani Date: Thu, 28 Sep 2023 15:24:53 +0100 Subject: [PATCH 03/12] Footer: icons added, texts added. --- css/style.css | 11 +++++++++++ index.html | 22 +++++++++++++++++++++- 2 files changed, 32 insertions(+), 1 deletion(-) diff --git a/css/style.css b/css/style.css index 0282562de..bf13be745 100755 --- a/css/style.css +++ b/css/style.css @@ -65,3 +65,14 @@ body { .with-img-background { background-image: url("../img/first-background.jpg"); } + +/* Footer styles */ + +.footer { + text-align: center; +} + +.footer-icons { + max-width: 20px; + height: auto; +} diff --git a/index.html b/index.html index 73645f0f4..797faf9b4 100755 --- a/index.html +++ b/index.html @@ -86,6 +86,26 @@

Everyone needs a little Karma.

-
+
+ Join us on +
+ Icon for Twitter + Icon for Facebook + Icon for Instagram +
+ © Karma Mobility, Inc. +
From 3f8ee8238f31b2b0c5f3bf9192798bf51a43cedf Mon Sep 17 00:00:00 2001 From: Pedram Amani Date: Thu, 28 Sep 2023 16:11:02 +0100 Subject: [PATCH 04/12] Header styling: done --- css/style.css | 21 +++++++++++++++++++-- index.html | 4 ++-- 2 files changed, 21 insertions(+), 4 deletions(-) diff --git a/css/style.css b/css/style.css index bf13be745..8fc4dabd5 100755 --- a/css/style.css +++ b/css/style.css @@ -15,11 +15,17 @@ body { * - When using Flexbox, remember the items you want to move around need to be inside a parent container set to 'display: flex' */ +body { + margin: 40px; +} + /* Header styles */ .header { display: flex; - justify-content: space-around; + justify-content: space-between; + margin-left: 100px; + margin-right: 100px; } .header-logo { @@ -35,11 +41,22 @@ body { } .nav-item { - margin-right: 20px; + margin-right: 50px; } .nav-link { text-decoration: none; + color: gray; +} +.nav-link:hover { + color: orange; +} + +#black-text { + color: black; +} +#black-text:hover { + color: orange; } /* Main styles */ diff --git a/index.html b/index.html index 797faf9b4..75528e1d2 100755 --- a/index.html +++ b/index.html @@ -24,10 +24,10 @@
-