From 3cc4de264d66acda54a526235f829ee158c6465d Mon Sep 17 00:00:00 2001 From: areebsattar Date: Wed, 27 Sep 2023 20:51:25 +0100 Subject: [PATCH 01/14] html written --- css/style.css | 7 ++++- index.html | 71 ++++++++++++++++++++++++++++++++++++++++++--------- 2 files changed, 65 insertions(+), 13 deletions(-) diff --git a/css/style.css b/css/style.css index 5cb025cef..fb2404e11 100755 --- a/css/style.css +++ b/css/style.css @@ -16,4 +16,9 @@ body { * - When using Flexbox, remember the items you want to move around need to be inside a parent container set to 'display: flex' */ - +.container { + display: grid; + gap: 5px; + grid-template-columns: repeat(12, 1fr); + grid-template-rows: 50px 300px 50px; +} diff --git a/index.html b/index.html index 3e742ef04..f83f519fc 100755 --- a/index.html +++ b/index.html @@ -1,19 +1,66 @@ - - - + + + Karma - - - - - - - + + + + + + +
+ + +
+
+
+

Introducing Karma

+

Bring WiFi with you, everywhere you go

+ +
+
+

Everyone needs a little Karma

+
+ Multiple devices with screens +

Internet for all devices

+
+
+ A cup of coffee +

Boost your productivity

+
+
+ A refill icon +

Pay as You Go

+
+
+
+ - - + From 1da24751d58aaddbed8287de68a1b262df9823ab Mon Sep 17 00:00:00 2001 From: areebsattar Date: Wed, 27 Sep 2023 22:42:23 +0100 Subject: [PATCH 02/14] Wrote html --- css/style.css | 72 +++++++++++++++++++++++++++++++++++++++++++++++---- index.html | 53 +++++++++++++++++++++++-------------- 2 files changed, 101 insertions(+), 24 deletions(-) diff --git a/css/style.css b/css/style.css index fb2404e11..2078964ee 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,9 +15,72 @@ body { * - When using Flexbox, remember the items you want to move around need to be inside a parent container set to 'display: flex' */ -.container { + + +/* .container { display: grid; gap: 5px; grid-template-columns: repeat(12, 1fr); grid-template-rows: 50px 300px 50px; +} */ + +header { + display: flex; + background-color: aquamarine; +} + +.karma-logo { + width: 30px; + padding-left: 70px; + padding-top: 10px; +} + +.navigation__list { + display: flex; + list-style: none; +} + +.navigation__item { + padding: 0.5rem 1rem; +} + +.navigation__link { + color: black; + font-weight: 600; + text-transform: uppercase; + text-decoration: none; +} + +.article{ +display: flex; +flex-direction: row; +} + +/* .article-karma-icons { + display: grid; + grid-template-columns: repeat(3, 150px); + grid-template-rows: 40px 100px; + +} + +.article-head { + grid-row-start: 1; + grid-row-end: -1; +} */ + +footer { + grid-column-start: 1; + grid-column-end: -1; +} + +h1, +h2, +h3, +h4, +h5 { + font-weight: lighter; +} + +.social { + display: flex; } diff --git a/index.html b/index.html index f83f519fc..b7a5ddb73 100755 --- a/index.html +++ b/index.html @@ -16,51 +16,66 @@ - -
+ + + + + +
-
+

Introducing Karma

Bring WiFi with you, everywhere you go

-
-

Everyone needs a little Karma

-
+
+

Everyone needs a little Karma

+
Multiple devices with screens

Internet for all devices

-
+
A cup of coffee

Boost your productivity

-
+
A refill icon

Pay as You Go

-
+ - - +
--> From 020a7449de33fe63150e9ea49234c2aa0a8c444c Mon Sep 17 00:00:00 2001 From: areebsattar Date: Thu, 28 Sep 2023 21:44:53 +0100 Subject: [PATCH 03/14] Test --- css/style.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/css/style.css b/css/style.css index 2078964ee..4267333a1 100755 --- a/css/style.css +++ b/css/style.css @@ -9,7 +9,7 @@ body { * Add your custom styles below * * Remember: - * - Be organised, use comments and separate your styles into meaningful chunks + * - Be organized, 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' From 0dfa64f2272544fdb10af306de308e827a0fb6b6 Mon Sep 17 00:00:00 2001 From: areebsattar Date: Fri, 29 Sep 2023 01:51:50 +0100 Subject: [PATCH 04/14] Refined Css --- css/style.css | 105 +++++++++++++++++++++++++++++++++++++++++--------- index.html | 21 ++++++---- 2 files changed, 99 insertions(+), 27 deletions(-) diff --git a/css/style.css b/css/style.css index 4267333a1..ee58a8d1e 100755 --- a/css/style.css +++ b/css/style.css @@ -24,9 +24,16 @@ body { grid-template-rows: 50px 300px 50px; } */ +h1, +h2, +h3, +h4, +h5 { + font-weight: lighter; +} + header { display: flex; - background-color: aquamarine; } .karma-logo { @@ -45,42 +52,102 @@ header { } .navigation__link { - color: black; - font-weight: 600; + color: gray; + font-weight: lighter; text-transform: uppercase; text-decoration: none; } -.article{ -display: flex; -flex-direction: row; +.hero { + background-image: url(../img/first-background.jpg); + background-repeat: no-repeat; + background-position: center; + height: 800px; + color: ghostwhite; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.hero-heading { + font-size: 45px; + margin-bottom: -5px; +} + + + +.learn { + background-color: rgb(211, 102, 0); + padding: 10px 20px; + border-radius: 5px; + border-color: rgb(211, 102, 0); } /* .article-karma-icons { + height: 100%; display: grid; - grid-template-columns: repeat(3, 150px); - grid-template-rows: 40px 100px; - + grid-gap: 5px; + grid-template-columns: repeat(11, 1fr); + grid-template-rows: repeat(2, 3fr); + grid-template-areas: + ". . . ah ah ah ah ah . . ." + ". a1 a1 a1 a2 a2 a2 a3 a3 a3 ."; } .article-head { - grid-row-start: 1; - grid-row-end: -1; + grid-area: ah; + justify-content: center; +} + +#a1 { + grid-area: a1; +} + +#a2 { + grid-area: a2; +} + +#a3{ + grid-area: a3; } */ +.article-karma-icons { + display: flex; + flex-wrap: nowrap; + align-items: center; + justify-content: center; +} + +.article-head{ + display: flex; + align-items: center; + justify-content: center; +} + +.article { + padding: 50px; + width: 150px; +} + footer { - grid-column-start: 1; - grid-column-end: -1; + display: flex; + flex-direction: column; + align-items: center; + } -h1, -h2, -h3, -h4, -h5 { - font-weight: lighter; +.social-icons { + display: flex; } .social { display: flex; + justify-content: center; + width: 15px; + height: 15px; + padding: 5px; + margin: 5px; + border: 1px solid rgba(219, 219, 219, 0.726) ; + border-radius: 50%; } diff --git a/index.html b/index.html index b7a5ddb73..b54dbc098 100755 --- a/index.html +++ b/index.html @@ -49,33 +49,38 @@
-
-

Introducing Karma

+
+

Introducing Karma

Bring WiFi with you, everywhere you go

-
+

Everyone needs a little Karma

-
+
+
Multiple devices with screens

Internet for all devices

-
+
A cup of coffee

Boost your productivity

-
+
A refill icon

Pay as You Go

+
- + From d7fa4771fefd842977d6b6a04c69aff0040963c2 Mon Sep 17 00:00:00 2001 From: areebsattar Date: Fri, 29 Sep 2023 22:12:34 +0100 Subject: [PATCH 05/14] Updated HTML and Css to fix footer and align items --- css/style.css | 42 ++++++++++++++---------------------------- index.html | 24 ++++++++++++------------ 2 files changed, 26 insertions(+), 40 deletions(-) diff --git a/css/style.css b/css/style.css index ee58a8d1e..bf6eb7150 100755 --- a/css/style.css +++ b/css/style.css @@ -3,6 +3,9 @@ body { font-family: "Roboto", sans-serif; -webkit-font-smoothing: antialiased; + min-height: 100vh; + display: flex; + flex-direction: column; } /** @@ -30,10 +33,17 @@ h3, h4, h5 { font-weight: lighter; + text-wrap: nowrap; } header { display: flex; + justify-content: center; + align-items: center; +} + +footer { + margin-top: auto; } .karma-logo { @@ -84,34 +94,6 @@ header { border-color: rgb(211, 102, 0); } -/* .article-karma-icons { - height: 100%; - display: grid; - grid-gap: 5px; - grid-template-columns: repeat(11, 1fr); - grid-template-rows: repeat(2, 3fr); - grid-template-areas: - ". . . ah ah ah ah ah . . ." - ". a1 a1 a1 a2 a2 a2 a3 a3 a3 ."; -} - -.article-head { - grid-area: ah; - justify-content: center; -} - -#a1 { - grid-area: a1; -} - -#a2 { - grid-area: a2; -} - -#a3{ - grid-area: a3; -} */ - .article-karma-icons { display: flex; flex-wrap: nowrap; @@ -126,8 +108,12 @@ header { } .article { + display: flex; + flex-direction: column; padding: 50px; width: 150px; + justify-content: center; + align-items: center; } footer { diff --git a/index.html b/index.html index b54dbc098..173b2f02a 100755 --- a/index.html +++ b/index.html @@ -49,28 +49,28 @@
-
+

Introducing Karma

Bring WiFi with you, everywhere you go

-
-
+ +

Everyone needs a little Karma

-
-
+
+
Multiple devices with screens

Internet for all devices

-
-
+
+
A cup of coffee

Boost your productivity

-
-
+ +
A refill icon

Pay as You Go

-
- - + + +