From af2a7cb5b15a92f24e4f484473ee4fa3e1324635 Mon Sep 17 00:00:00 2001 From: esamaalesaei <91167099+esamaalesaei@users.noreply.github.com> Date: Wed, 21 Sep 2022 01:07:40 +0100 Subject: [PATCH 1/3] HTML Code --- index.html | 79 +++++++++++++++++++++++++++++++++++++++++++++++++----- 1 file changed, 73 insertions(+), 6 deletions(-) diff --git a/index.html b/index.html index 3e742ef04..bd2f2aecf 100755 --- a/index.html +++ b/index.html @@ -10,10 +10,77 @@ - - - - - + +
+
+ +
+
+ +
+
+ +
+
+

+ 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

+
+
+ +
+
+

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

+ Get Karma today +
+
+
+ + - + \ No newline at end of file From 0b7adccf1dd9daf1b06e8ee446540fb2874bcb16 Mon Sep 17 00:00:00 2001 From: esamaalesaei <91167099+esamaalesaei@users.noreply.github.com> Date: Wed, 21 Sep 2022 16:51:19 +0100 Subject: [PATCH 2/3] header completed this is the header completed --- css/style.css | 68 +++++++++++++++++++++++++++++++++++++++++---------- index.html | 29 +++++++++------------- 2 files changed, 67 insertions(+), 30 deletions(-) diff --git a/css/style.css b/css/style.css index 5cb025cef..9afc5f04b 100755 --- a/css/style.css +++ b/css/style.css @@ -1,19 +1,61 @@ - - /* We are using the 'Roboto' font from Google. This has already been added to your HTML header */ +/* global */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: "Roboto", sans-serif; +} body { - font-family: 'Roboto', sans-serif; - -webkit-font-smoothing: antialiased; + -webkit-font-smoothing: antialiased; + width: 100%; +} + +header { + height: 100vh; + width: 100%; +} + +nav { + display: flex; + align-items: center; + justify-content: space-between; + padding-top: 10px; + padding-left: 10%; + padding-right: 10%; +} + +#logo { + display: flex; + max-width: 1.5rem; } -/** - * 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' - */ +span { + font-weight: bold; + color: #55575e; +} + +button { + color: white; + background-color: #e0633a; + padding: 1em 2em; + border: none; + border-radius: 5px; + cursor: pointer; +} + +nav ul li { + list-style-type: none; + display: inline-block; + padding: 10px 20px; +} + +nav ul li a { + text-decoration: none; + color: #9a9ea6; +} +nav ul li a:hover { + color: #e0633a; +} diff --git a/index.html b/index.html index bd2f2aecf..921b50b0e 100755 --- a/index.html +++ b/index.html @@ -10,34 +10,29 @@ -
-
- -
-
-
+
-
+

Introducing Karma

Bring Wifi with you, everywhere you go.

-
From da134fbd103cb04c83e9f703fe64ebd012768138 Mon Sep 17 00:00:00 2001 From: esamaalesaei <91167099+esamaalesaei@users.noreply.github.com> Date: Sun, 2 Oct 2022 14:56:10 +0100 Subject: [PATCH 3/3] more additions I added the banner and cards, but still needs more work.. --- css/style.css | 72 +++++++++++++++++++++++++++++++++++++++++---------- index.html | 24 ++++++++++------- 2 files changed, 74 insertions(+), 22 deletions(-) diff --git a/css/style.css b/css/style.css index 9afc5f04b..68581fa57 100755 --- a/css/style.css +++ b/css/style.css @@ -12,7 +12,7 @@ body { } header { - height: 100vh; + height: 7vh; width: 100%; } @@ -35,15 +35,6 @@ span { color: #55575e; } -button { - color: white; - background-color: #e0633a; - padding: 1em 2em; - border: none; - border-radius: 5px; - cursor: pointer; -} - nav ul li { list-style-type: none; display: inline-block; @@ -51,11 +42,66 @@ nav ul li { } nav ul li a { - text-decoration: none; - color: #9a9ea6; + text-decoration: none; + color: #9a9ea6; } nav ul li a:hover { - color: #e0633a; + color: #e0633a; +} + +.banner { + position: relative; + width: 100%; + margin: 0; +} + +.banner img { + margin: 0; + width: 100; +} + +.banner h1 { + color: white; + position: absolute; + top: 30%; + left: 50%; + widows: 100%; + text-align: center; } +.banner h3 { + color: white; + position: absolute; + top: 40%; + text-align: center; + left: 50%; +} + +.banner button { + color: white; + position: absolute; + top: 50%; + left: 50%; + text-align: center; +} + +button { + color: white; + background-color: #e0633a; + padding: 1em 2em; + border: none; + border-radius: 5px; + cursor: pointer; +} + +.container { + width: 100%; +} + +.card { + width: 200px; + text-align: center; + float: left; + margin: 30px; +} diff --git a/index.html b/index.html index 921b50b0e..dc343c412 100755 --- a/index.html +++ b/index.html @@ -25,16 +25,22 @@
+
-

- Introducing Karma -

-

- Bring Wifi with you, everywhere you go. -

- +
+ +