From 27ec0084c7b2859480d7334822c97261710b4e5b Mon Sep 17 00:00:00 2001 From: ElenaBarker <113217019+ElenaBarker@users.noreply.github.com> Date: Fri, 10 Feb 2023 12:08:55 +0000 Subject: [PATCH 1/5] Fork and Clone Forked and clone the repo --- README.md | 2 +- index.html | 8 +++----- 2 files changed, 4 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index 31db35cef..df448e5fc 100644 --- a/README.md +++ b/README.md @@ -6,7 +6,7 @@ The aim of this exercise is to create a page that looks just like this one: ### Set up - - **Fork and clone** this repo. + + **Fork and clone** this repo. - To fork, hit the 'fork' button in the top right corner of this page on Github. Now you should be on your own Github repository - you'll know this because your name should now be in the repo name at the top of the Github page. - To clone, click the green button that says 'Code' on that page. diff --git a/index.html b/index.html index 3e742ef04..df4a6fd6e 100755 --- a/index.html +++ b/index.html @@ -10,10 +10,8 @@ - - - - - +
+
+ From e2f65dcdc4c004e122f84d766c841cb2f51f89f1 Mon Sep 17 00:00:00 2001 From: ElenaBarker <113217019+ElenaBarker@users.noreply.github.com> Date: Sat, 11 Feb 2023 14:28:21 +0000 Subject: [PATCH 2/5] Update index.html creating topnav --- index.html | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/index.html b/index.html index df4a6fd6e..bb077828f 100755 --- a/index.html +++ b/index.html @@ -10,6 +10,18 @@ +
From 3be2acc734b99bf231ff5719ad835aa8004e683f Mon Sep 17 00:00:00 2001 From: ElenaBarker <113217019+ElenaBarker@users.noreply.github.com> Date: Tue, 2 May 2023 21:54:10 +0100 Subject: [PATCH 3/5] Creating basic HTML added header, main, sections, footer, nav --- index.html | 43 +++++++++++++++++++++++++++++-------------- 1 file changed, 29 insertions(+), 14 deletions(-) diff --git a/index.html b/index.html index bb077828f..8d1fb5ec0 100755 --- a/index.html +++ b/index.html @@ -10,20 +10,35 @@ - + +
+
+

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
+
+
+ From b2d93ac0a80636fbc643591213fd0a2e6cf440ab Mon Sep 17 00:00:00 2001 From: ElenaBarker <113217019+ElenaBarker@users.noreply.github.com> Date: Tue, 9 May 2023 01:06:36 +0100 Subject: [PATCH 4/5] Updated HTML and CSS --- css/style.css | 106 ++++++++++++++++++++++++++++++++++++++++++++++++++ index.html | 58 +++++++++++++++++---------- 2 files changed, 143 insertions(+), 21 deletions(-) diff --git a/css/style.css b/css/style.css index 5cb025cef..d79f7c1aa 100755 --- a/css/style.css +++ b/css/style.css @@ -16,4 +16,110 @@ body { * - When using Flexbox, remember the items you want to move around need to be inside a parent container set to 'display: flex' */ +header { + display: flex; + align-items: center; + justify-content: space-between; + height: 3.5rem; + padding: 0.5rem 6.5rem; +} + header a { + text-decoration: none; + padding: 10px; + color: gray; + + } + .logo-img { +width: 1.5rem; +margin: 0 0.5rem; +padding: 0.7rem; + } + +.IntrKarma { + background-image:url(/img/first-background.jpg); + background-size: cover; + background-position: center center; + display: flex; + align-items: center; + justify-content: center; + height: 700px; + flex-direction: column; + position: relative; + margin: 0 50px 0 50px; + color: white; + font-size: 1.5rem; +} + +.IntrKarma h1 { + font-weight: lighter; + +} + +.IntrKarma button { + background-color: orange; + border: none; + border-radius: 0.2rem; + height: 2.5rem; + font-size: 1rem; + padding: 0 1.5rem; +} + + + +.top-flex-container { + display: flex; + flex-direction: column; + align-items: center; + padding-top: 70px; + padding-bottom: 50px; +} + +.flex-container { + display: flex; + flex-direction: row; + justify-content: space-evenly; + font-size: 1.2rem; + + + +} + +.icons { + width: 7rem; +} + +.icons-text{ + display: flex; + flex-direction: column; + flex-wrap: wrap; + justify-content: space-around; + +} + +.top-flex-container h2 { + justify-content: center; + font-weight: lighter; + font-size: 2rem; +} + +footer { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + border-top: 1px solid lightgrey; + padding: 0.5rem; + margin: 0 4rem; +} + +.social-media { + width: 50px; +} + +.social-media img { + width: 1rem; + border: solid 1px lightgrey; + border-radius: 50px; +} + diff --git a/index.html b/index.html index 8d1fb5ec0..450d4af99 100755 --- a/index.html +++ b/index.html @@ -11,34 +11,50 @@
- + karma-logo +
-
-
+ +
+

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

Internet for all devices

+
+
+ +

Boost your productivity

+
+
+ +

Pay As You Go

+
+
+ +
From b749e30a21431016c6d53a34e8b769987a48e884 Mon Sep 17 00:00:00 2001 From: ElenaBarker <113217019+ElenaBarker@users.noreply.github.com> Date: Tue, 9 May 2023 02:03:49 +0100 Subject: [PATCH 5/5] Level 1 done --- css/style.css | 48 +++++++++++++++++++++++++++++++++--------------- index.html | 10 +++++----- 2 files changed, 38 insertions(+), 20 deletions(-) diff --git a/css/style.css b/css/style.css index d79f7c1aa..0a554d53f 100755 --- a/css/style.css +++ b/css/style.css @@ -45,7 +45,7 @@ padding: 0.7rem; height: 700px; flex-direction: column; position: relative; - margin: 0 50px 0 50px; + margin: 0 40px 0 40px; color: white; font-size: 1.5rem; } @@ -55,6 +55,10 @@ padding: 0.7rem; } +.IntrKarma p { + font-weight: lighter; +} + .IntrKarma button { background-color: orange; border: none; @@ -62,6 +66,7 @@ padding: 0.7rem; height: 2.5rem; font-size: 1rem; padding: 0 1.5rem; + margin-top: 2.8rem; } @@ -69,7 +74,6 @@ padding: 0.7rem; .top-flex-container { display: flex; flex-direction: column; - align-items: center; padding-top: 70px; padding-bottom: 50px; } @@ -78,48 +82,62 @@ padding: 0.7rem; display: flex; flex-direction: row; justify-content: space-evenly; - font-size: 1.2rem; - - - + font-size: 1.2rem; + } .icons { width: 7rem; } -.icons-text{ +.icons-text { display: flex; flex-direction: column; - flex-wrap: wrap; justify-content: space-around; + + + } .top-flex-container h2 { justify-content: center; + align-self: center; font-weight: lighter; font-size: 2rem; } -footer { +.footer-content { display: flex; flex-direction: column; - align-items: center; - justify-content: center; + justify-content: space-around; border-top: 1px solid lightgrey; - padding: 0.5rem; - margin: 0 4rem; + padding: 1rem; + margin: 1rem 4rem; +} + +.footer-content span { + align-self: center; } .social-media { - width: 50px; + display: flex; + flex-direction: row; + justify-content: center; + } -.social-media img { +.social-media img{ + width: 1rem; border: solid 1px lightgrey; border-radius: 50px; + margin: 10px; + padding: 8px; } + .footer-inc { + color: gray; + } + diff --git a/index.html b/index.html index 450d4af99..292f76033 100755 --- a/index.html +++ b/index.html @@ -25,11 +25,11 @@

Introducing Karma

-

Bring WiFi with you, everywhere you go

+

Bring WiFi with you, everywhere you go.

-

Everyone needs a little Karma

+

Everyone needs a little Karma

@@ -43,18 +43,18 @@

Everyone needs a little Karma

Pay As You Go

-
+
-