From d4c3b348d58f7e059dae1ddf19dd862f63b75b2a Mon Sep 17 00:00:00 2001 From: AndrianaOS Date: Sun, 23 Oct 2022 13:34:53 +0100 Subject: [PATCH 01/19] HMTL elements added Added a new header to include nav bar information --- .DS_Store | Bin 0 -> 6148 bytes index.html | 41 ++++++++++++++++++++++++++++++----------- 2 files changed, 30 insertions(+), 11 deletions(-) create mode 100644 .DS_Store diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..7acdc828ae1567510d3721e759aead6ad3e55158 GIT binary patch literal 6148 zcmeHK-HsA582!4S3=lWOtjXS(OyVsd3$AhF4Io4}x@vaNy-mLP)sQ zckmUw^+|jeuk`e16X>$HN=(0`J)QPDU)$5pbV@|5KJgBSaztbyaZF~AZ7|->(-qrM zHM>B@V?^g}5V?5b;fxsti~`%P0DpHAbWSnF$HChBTSH6nw=gk@EPbL5P05FML?IPr zNn?H2SQ&asr&OZ`9n(vci!>l_ox|>GoIUEJhXHkIh#q^u0(r<|x}Y&yhKMr62zpwa zuUeej^o(B78Q3jg0lha-DxkJWFX;8AvF!A;7&$G5LvN@~CzwrZ6CX1r`nICluHv`F z7}{XgpvUt~T=q-rI{}3U`YeenyxN2Ea%b^SeSLqp!@!TnrP5EflStmUnX*z=*81S| zqnR`Aj3;ruGkV9LT2U0Zm*tN8*6+^RxxFV*IPUmicO(eD*M-abGe7jASv{JBUM#qd zY_QT+x}Dpf&&!XF@^|g41&jj!l>#i;a2j - - - + + + Karma - - - - - - - + + + + + + - +
+ karma logo + +
+ From 3b36f6e4bb2889916f9d45ff420d7e5520fa6fb1 Mon Sep 17 00:00:00 2001 From: AndrianaOS Date: Sun, 23 Oct 2022 14:41:47 +0100 Subject: [PATCH 02/19] Update to HTML and CSS Included styling to nav bar and included HTML content for main page --- css/style.css | 18 ++++++++++++++---- index.html | 7 +++++-- 2 files changed, 19 insertions(+), 6 deletions(-) diff --git a/css/style.css b/css/style.css index 5cb025cef..c727af7f6 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,15 @@ 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*/ + +#karma-logo { + width: 25px; + margin-left: 50px; + margin-top: 30px; +} +nav li { + display: inline; + justify-content: flex-end; +} diff --git a/index.html b/index.html index f067befac..99a006730 100755 --- a/index.html +++ b/index.html @@ -22,8 +22,8 @@
- karma logo -
+

Introducing Karma

+

Bring WiFi with you, everywhere you go.

+ From 46dcbe5909c979df1ebb2ace7e0d5e351ad29042 Mon Sep 17 00:00:00 2001 From: AndrianaOS Date: Sun, 23 Oct 2022 15:14:18 +0100 Subject: [PATCH 03/19] Button updated Button design updated to match template image --- css/style.css | 21 +++++++++++++++++++++ index.html | 4 ++-- 2 files changed, 23 insertions(+), 2 deletions(-) diff --git a/css/style.css b/css/style.css index c727af7f6..337e33462 100755 --- a/css/style.css +++ b/css/style.css @@ -3,6 +3,7 @@ body { font-family: "Roboto", sans-serif; -webkit-font-smoothing: antialiased; + background-image: url("img/first-background.jpg"); } /** @@ -26,4 +27,24 @@ body { nav li { display: inline; justify-content: flex-end; + text-align: center; +} + +/*CONTENT STYLES*/ +h1 { + text-align: center; +} + +h2 { + text-align: center; +} + +button { + display: flex; + align-content: center; + color: white; + background-color: #ffa500; + border: none; + border-radius: 5px; + padding: 15px 20px; } diff --git a/index.html b/index.html index 99a006730..051bc136e 100755 --- a/index.html +++ b/index.html @@ -34,8 +34,8 @@ -

Introducing Karma

-

Bring WiFi with you, everywhere you go.

+

Introducing Karma

+

Bring WiFi with you, everywhere you go.

From fa569af1ada5d6d9efbf21bc991a095d19cb91cd Mon Sep 17 00:00:00 2001 From: AndrianaOS Date: Tue, 25 Oct 2022 21:48:52 +0100 Subject: [PATCH 04/19] Updated HTML and CSS Updated HTML file to change links in nav bar from li elements to a elements. Styled HTML page to look similar to reference picture given --- css/style.css | 30 +++++++++++++++++++++++------- index.html | 22 +++++++++++----------- 2 files changed, 34 insertions(+), 18 deletions(-) diff --git a/css/style.css b/css/style.css index 337e33462..6c724e33b 100755 --- a/css/style.css +++ b/css/style.css @@ -21,13 +21,23 @@ body { #karma-logo { width: 25px; margin-left: 50px; - margin-top: 30px; + margin-top: 50px; } -nav li { - display: inline; - justify-content: flex-end; - text-align: center; +nav { + /*display: flex; + flex-direction: row; + float: right; + justify-content: space-around; + align-items: flex-start; + text-align: center;*/ + float: right; + margin-top: 50px; + margin-right: 50px; +} + +nav a { + margin-right: 40px; } /*CONTENT STYLES*/ @@ -40,11 +50,17 @@ h2 { } button { - display: flex; align-content: center; color: white; - background-color: #ffa500; + background-color: #e09200; border: none; border-radius: 5px; padding: 15px 20px; + margin-left: 650px; + margin-top: 50px; +} + +section { + background-image: url("HTML-CSS-MODULE-PROJECT/img/first-background.jpg"); + margin-top: 200px; } diff --git a/index.html b/index.html index 051bc136e..f7286085e 100755 --- a/index.html +++ b/index.html @@ -24,18 +24,18 @@
-

Introducing Karma

-

Bring WiFi with you, everywhere you go.

- +
+

Introducing Karma

+

Bring WiFi with you, everywhere you go.

+ +
From 0724ceac33a90e213f9b9b0b5c69adf122800da6 Mon Sep 17 00:00:00 2001 From: AndrianaOS Date: Tue, 25 Oct 2022 22:26:00 +0100 Subject: [PATCH 05/19] Added additional styling and text Included icons and text to build reference page --- .DS_Store | Bin 6148 -> 8196 bytes css/style.css | 35 ++++++++++++++++++++++++++++++++--- index.html | 49 ++++++++++++++++++++++++++++++++++++++++++++----- 3 files changed, 76 insertions(+), 8 deletions(-) diff --git a/.DS_Store b/.DS_Store index 7acdc828ae1567510d3721e759aead6ad3e55158..f34f61e262e4584f0f90f1506e2aff711fa06407 100644 GIT binary patch delta 151 zcmZoMXmOBWU|?W$DortDU;r^WfEYvza8E20o2aMAD6lbLH}hr%jz7$c**Q2SHn1=X zZ02DRWo9&*e1-M6G&@5MLn=cV5a%%HG8mNw7v<&T=cR)Toh-nfv^ig7D)Yn!9zkZH l2oOkc0|{4<@tXxXzB5ne7xA3z&%?pN2(g)Ab3D%+W&jVA9sU3S delta 107 zcmZp1XfcprU|?W$DortDU=RQ@Ie-{Mvv5r;6q~50$jG-bU^g=(-)0^GQRc~_B7qZ2 tr!Hpa;1Fa6DgpulZXn?bQophAJM(0I8BdUI1}2C}Aj26p$Mei#1^}?P5XJxi diff --git a/css/style.css b/css/style.css index 6c724e33b..8ad20ba79 100755 --- a/css/style.css +++ b/css/style.css @@ -3,7 +3,6 @@ body { font-family: "Roboto", sans-serif; -webkit-font-smoothing: antialiased; - background-image: url("img/first-background.jpg"); } /** @@ -60,7 +59,37 @@ button { margin-top: 50px; } -section { - background-image: url("HTML-CSS-MODULE-PROJECT/img/first-background.jpg"); +#first-page { + background-image: url("img/first-background.jpg"); margin-top: 200px; } + +/*STYLING FOR PAGE WITHOUT BACKGROUND IMAGE*/ + +.icons { + width: 100px; +} + +#icon-info { + display: flex; + justify-content: space-evenly; + align-items: center; + text-align: center; + margin-top: 50px; +} + +#next-page { + margin-top: 200px; +} + +/*STYLING FOR FOOTER*/ + +footer { + text-align: center; + margin-top: 50px; + text-decoration: overline; +} + +.smicon { + width: 20px; +} diff --git a/index.html b/index.html index f7286085e..621924a54 100755 --- a/index.html +++ b/index.html @@ -32,10 +32,49 @@ Login -
-

Introducing Karma

-

Bring WiFi with you, everywhere you go.

- -
+
+
+

Introducing Karma

+

Bring WiFi with you, everywhere you go.

+ +
+
+

Everyone needs a little Karma.

+
+
+ Picture showing a monitor, phone and tablet +

Internet for all devices

+
+
+ Picture showing a steamy teacup +

Boost your productivity

+
+
+ Picture showing gas pump +

Pay as You Go

+
+
+
+
+
+

Join us on

+
+ twitter logo + facebook logo + instagram logo +
+
From 896cc1c35937c016d2ca109242bb1960f9bbee24 Mon Sep 17 00:00:00 2001 From: AndrianaOS Date: Wed, 26 Oct 2022 07:04:57 +0100 Subject: [PATCH 06/19] Deleted commented out styles Deleted commented out styles and edited style for background image --- css/style.css | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/css/style.css b/css/style.css index 8ad20ba79..30360beb7 100755 --- a/css/style.css +++ b/css/style.css @@ -24,12 +24,6 @@ body { } nav { - /*display: flex; - flex-direction: row; - float: right; - justify-content: space-around; - align-items: flex-start; - text-align: center;*/ float: right; margin-top: 50px; margin-right: 50px; @@ -60,7 +54,7 @@ button { } #first-page { - background-image: url("img/first-background.jpg"); + background-image: url("first-background.jpg"); margin-top: 200px; } From 20fe91e12bc89be85a099b51558b0b0e7e12193b Mon Sep 17 00:00:00 2001 From: AndrianaOS Date: Wed, 26 Oct 2022 22:31:31 +0100 Subject: [PATCH 07/19] Image rendered and footer styled Background image rendered, footer styled as per reference and nav bar restyled --- .DS_Store | Bin 8196 -> 8196 bytes css/style.css | 44 +++++++++++++++++++++++++++++++++++++------- index.html | 5 +++-- 3 files changed, 40 insertions(+), 9 deletions(-) diff --git a/.DS_Store b/.DS_Store index f34f61e262e4584f0f90f1506e2aff711fa06407..33219e840405434ea2f2aeafa966f6cfa4dc1cb3 100644 GIT binary patch delta 95 zcmZp1XmOa}&nUDpU^hRb&}JS1O%{H3h8%`ehB6?|VbEnTo_s~{_~e(ue7weG!9{sF g`FZIK3=E8ujYLc~mab)5%r3z?`KhoFHrZ870Q9aK7ytkO delta 39 vcmZp1XmOa}&nU1lU^hRbz-Ar+O_s@;qK1?6WoB$_;ACFRF2TC7;V%;a@D2<; diff --git a/css/style.css b/css/style.css index 30360beb7..f095f4d74 100755 --- a/css/style.css +++ b/css/style.css @@ -21,6 +21,7 @@ body { width: 25px; margin-left: 50px; margin-top: 50px; + margin-bottom: 20px; } nav { @@ -31,21 +32,36 @@ nav { nav a { margin-right: 40px; + text-decoration: none; + color: gray; +} + +#karma-meet { + font-weight: bold; +} +a:hover { + color: #c05326; } /*CONTENT STYLES*/ h1 { text-align: center; + color: white; + font-size: 75px; + font-weight: lighter; } h2 { text-align: center; + color: white; + font-weight: lighter; + font-size: 40px; } button { align-content: center; color: white; - background-color: #e09200; + background-color: #c05326; border: none; border-radius: 5px; padding: 15px 20px; @@ -54,11 +70,15 @@ button { } #first-page { - background-image: url("first-background.jpg"); - margin-top: 200px; + background-image: url("../img/first-background.jpg"); + padding-bottom: 165px; + padding-top: 200px; } -/*STYLING FOR PAGE WITHOUT BACKGROUND IMAGE*/ +.need-karma { + color: black; + font-size: 55px; +} .icons { width: 100px; @@ -73,17 +93,27 @@ button { } #next-page { - margin-top: 200px; + margin-top: 100px; } /*STYLING FOR FOOTER*/ footer { text-align: center; - margin-top: 50px; - text-decoration: overline; + margin: 50px 70px 0 70px; + border-top: 1px solid #ebebeb; } .smicon { width: 20px; + border: 1px solid #ebebeb; + padding: 10px; + border-radius: 20px; + margin-right: 5px; +} + +#copyright { + color: #cccccc; + text-align: center; + margin-bottom: 20px; } diff --git a/index.html b/index.html index 621924a54..f74cdd9d2 100755 --- a/index.html +++ b/index.html @@ -24,7 +24,7 @@
+

Introducing Karma

@@ -67,6 +68,18 @@

Everyone needs a little Karma.

+
+ woman on a tablet smiling with a coffee cup on the table +
+

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

+ +
+