From debb935e6059959137619d9a0d14cc81e58503d9 Mon Sep 17 00:00:00 2001 From: AfshaHossain Date: Fri, 10 Feb 2023 18:26:23 +0000 Subject: [PATCH 1/5] Created the basic HTML layout with some CSS --- css/style.css | 50 ++++++++++++++++++++++++++++++++++++++++++++++++++ index.html | 44 +++++++++++++++++++++++++++++++++++++++++++- 2 files changed, 93 insertions(+), 1 deletion(-) diff --git a/css/style.css b/css/style.css index 5cb025cef..b381b1565 100755 --- a/css/style.css +++ b/css/style.css @@ -1,11 +1,61 @@ /* 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; } +header { + display: flex; + flex-direction: row; + margin: 1rem; + justify-content: center; + align-items: center; + justify-content: space-between; +} + +.logo { + width: 3rem; + height: 3rem; +} + +#nav-item1 { + font-weight: bold; +} + +.nav-item { + margin: 1rem; + text-align: center; + width: auto; +} + +.top-navbar { + display: flex; + flex-direction: row; + align-items: center; + margin: 0 3rem; +} + +.hero { + background-image: url("../img/first-background.jpg"); + +} + + +.icon { + width: 20%; + height: 20%; +} + + +.product-descriptions { + +} + /** * Add your custom styles below * diff --git a/index.html b/index.html index 3e742ef04..027c9c2d0 100755 --- a/index.html +++ b/index.html @@ -10,7 +10,49 @@ - +
+ + +
+
+ +

Introducting Karma

+

Bring WiFi with you, everywhere you go

+ +
+
+

Everyone needs a little Karma

+
+
+ icon of desktop screen, tablet and mobile phone +

Internet for all devices

+
+
+ icon of a cup with steam on top +

Boost your productivity

+
+
+ icon of a mobile device charging +

Pay as You Go

+
+
+
+ From 922bd302a889c7ab50e202e7d243ae2d0bcfdf79 Mon Sep 17 00:00:00 2001 From: AfshaHossain Date: Mon, 13 Feb 2023 01:27:56 +0000 Subject: [PATCH 2/5] Made some strange changes --- css/style.css | 43 ++++++++++++++++++++++++++++++++++++------- 1 file changed, 36 insertions(+), 7 deletions(-) diff --git a/css/style.css b/css/style.css index b381b1565..91123d2ae 100755 --- a/css/style.css +++ b/css/style.css @@ -1,26 +1,33 @@ - /* We are using the 'Roboto' font from Google. This has already been added to your HTML header */ - - +* { + width: 132rm; + height: 62rem; +} + /* 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; } +/* This is the header part */ + header { display: flex; flex-direction: row; margin: 1rem; - justify-content: center; - align-items: center; + /* justify-content: center; */ + /* align-items: center; */ justify-content: space-between; + height: 2rem; } .logo { - width: 3rem; - height: 3rem; + width: 95%; + height: 95%; + justify-content: start; + align-self:normal; } #nav-item1 { @@ -40,11 +47,25 @@ header { margin: 0 3rem; } +/* This is the hero section */ + .hero { background-image: url("../img/first-background.jpg"); + background-repeat: no-repeat; + background-size: cover; + /* width: 136rem; + height: 62rem; */ +} +h1 { + color: white; + font-weight: lighter; + display: flex; + justify-content: center; + align-items: center; } +/* This is the icon section */ .icon { width: 20%; @@ -56,6 +77,14 @@ header { } +/* This is the footer section */ + +.footer { + +} + + + /** * Add your custom styles below * From 258619c9306a51c8e5da816bad3e3e6c95d1c476 Mon Sep 17 00:00:00 2001 From: AfshaHossain Date: Mon, 13 Feb 2023 04:34:05 +0000 Subject: [PATCH 3/5] Completed the tasks Replicated the web page --- css/style.css | 115 +++++++++++++++++++++++++++++++++++++++++--------- index.html | 20 ++++----- 2 files changed, 105 insertions(+), 30 deletions(-) diff --git a/css/style.css b/css/style.css index 91123d2ae..3538d4c5d 100755 --- a/css/style.css +++ b/css/style.css @@ -1,9 +1,4 @@ -* { - width: 132rm; - height: 62rem; -} - /* We are using the 'Roboto' font from Google. This has already been added to your HTML header */ body { @@ -17,17 +12,14 @@ header { display: flex; flex-direction: row; margin: 1rem; - /* justify-content: center; */ - /* align-items: center; */ + justify-content: center; + align-items: center; justify-content: space-between; - height: 2rem; } .logo { - width: 95%; - height: 95%; - justify-content: start; - align-self:normal; + width: 3rem; + height: 3rem; } #nav-item1 { @@ -38,6 +30,11 @@ header { margin: 1rem; text-align: center; width: auto; + +} + +.nav-item:hover { + color: #E0633A; } .top-navbar { @@ -53,37 +50,115 @@ header { background-image: url("../img/first-background.jpg"); background-repeat: no-repeat; background-size: cover; - /* width: 136rem; - height: 62rem; */ + height: 39rem; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; } h1 { color: white; font-weight: lighter; + font-size: 3.25rem; + margin: 0; +} + +.hero-text { + color: white; + margin: 1rem; + font-weight: lighter; + font-size: 2rem; +} + +.learn-btn { + background-color: #E0633A; + font-size: 1.5rem; + border: none; + color: white; + padding: 0.75rem 1.5rem; + border-radius: 0.25rem; + margin: 2rem; +} + +/* This is the icon section */ + +.product-section { display: flex; + flex-direction: column; justify-content: center; align-items: center; } -/* This is the icon section */ +h2 { + font-weight: lighter; + font-size: 2.5rem; + margin-top: 5rem; +} + + +.product-nav { + display: flex; -.icon { - width: 20%; - height: 20%; } +.sevices { + display: flex; + flex-direction: column; + /* border: #E0633A solid 1px; */ + width: 14rem; + height: 12rem; + justify-content: center; + align-items: center; + text-align: center; + margin: 0 1rem; -.product-descriptions { +} +.icon { + width: 65%; + height: 65%; } +.product-descriptions { + margin-top: 2rem; + font-size: 1.25rem; + +} + + /* This is the footer section */ -.footer { +footer { + border-top: 2px solid #ECEDEE; + /* border: 2px solid #E0633A; */ + margin: 2rem 10rem 2rem 10rem; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.contact-nav { + display: flex; + flex-direction: row; +} +.social-media-btn { + border-radius: 5em; + background-color:transparent; + padding: .75rem 1rem; + border: #EEEFEF solid 2px; + margin: 0 0.45rem; } +.social-media-links { + width: .75rem; +} +#copyright-section { + color: #9DA1A9; +} /** * Add your custom styles below diff --git a/index.html b/index.html index 027c9c2d0..96ad6598e 100755 --- a/index.html +++ b/index.html @@ -23,33 +23,33 @@
-

Introducting Karma

+

Introducing Karma

Bring WiFi with you, everywhere you go

- +
-

Everyone needs a little Karma

+

Everyone needs a little Karma.

-
+
icon of desktop screen, tablet and mobile phone

Internet for all devices

-
+
icon of a cup with steam on top

Boost your productivity

-
+
icon of a mobile device charging

Pay as You Go

-

Join us on

+

Join us on

- - - + + +
From 42bb5022646d62e8376d2f0ab8dadf5a563c950d Mon Sep 17 00:00:00 2001 From: AfshaHossain Date: Tue, 14 Feb 2023 01:11:18 +0000 Subject: [PATCH 4/5] Corrected logo image location Corrected logo image location by removing an unnecessary dot. --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 96ad6598e..8a313f538 100755 --- a/index.html +++ b/index.html @@ -11,7 +11,7 @@
- +