From f706104393e18b4cda1710d72ff177ed56eedc8b Mon Sep 17 00:00:00 2001 From: Ade0211 <62720742+Ade0211@users.noreply.github.com> Date: Tue, 19 May 2020 11:36:14 +0100 Subject: [PATCH 1/8] i made changes to my section i separated the h2 and p from the divs --- week2/2-website/css/style.css | 93 +++++++++++++++++++++++++++++++---- week2/2-website/index.html | 44 ++++++++++++++++- 2 files changed, 127 insertions(+), 10 deletions(-) diff --git a/week2/2-website/css/style.css b/week2/2-website/css/style.css index 5cb025ce..c52a81f9 100644 --- a/week2/2-website/css/style.css +++ b/week2/2-website/css/style.css @@ -2,18 +2,93 @@ /* We are using the 'Roboto' font from Google. This has already been added to your HTML header */ body { + background-color: white; font-family: 'Roboto', sans-serif; -webkit-font-smoothing: antialiased; } +nav.nav-links{ + position:fixed; +} +.container { + display: flex; + flex-direction: row; + justify-content: center; -/** - * 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' - */ + } + nav li { + display: inline; + padding-right: 30px; + } + .img1 { + width: auto; + height: 40px; + padding-right: 10rem; + padding-left: 7rem; + transform: translate(y); + } + .image-container { + width: 100%; + position: absolute; + top: 0; + left: 0; + + } + .top-image { + background-image: url('../img/first-background.jpg'); + background-repeat: no-repeat; + background-size: cover; + background-position: center; + height: 700px; + } + + .container { + padding-left: 5rem; + } +.intext { + display: column; + position: absolute; + top: 350px; + align-items: center; + color: white; + text-align: center; + padding-left: 35rem; +} + #button { + height: 60px; + width: 50px; + min-width: 150px; + border: 3px solid black; + background-color:orangered; + align-self: auto; + } + + .link, .links { + list-style-type: none; + padding-top: 20px; + + } + a { + text-decoration: none; + } + +.content{ + width: 100px; +} +h2 { + text-align: center; + padding-top: 30px; +} +.content_image { + display: flex; + justify-content: space-around; +} +.content { +} + + .content { + display: inline-block; + direction: row; + align-items: center; + } diff --git a/week2/2-website/index.html b/week2/2-website/index.html index 876b59d6..12abbd0a 100644 --- a/week2/2-website/index.html +++ b/week2/2-website/index.html @@ -8,10 +8,52 @@ - + +
+ +
+
+

Introducing Karma

+

Bring WiFi with you, everywhere you go.

+ +
+
+
+
+
+ +

Everyone needs a little Karma

+
+
+ image1 +
+
+ image_2 +
+
image3
+
+

Internet for all devices Boost your production


Pay as you go

+
+ + +
From 500238b8e4eade61de3e0f8e48392e6218ac5a5c Mon Sep 17 00:00:00 2001 From: Ade0211 <62720742+Ade0211@users.noreply.github.com> Date: Tue, 19 May 2020 22:41:14 +0100 Subject: [PATCH 2/8] Adjusted images in my section The text under my images were in consistent. so i had to use span to add the text under my images --- week2/2-website/css/style.css | 67 +++++++++++++++++++++++++++++------ week2/2-website/index.html | 38 ++++++++++++-------- 2 files changed, 80 insertions(+), 25 deletions(-) diff --git a/week2/2-website/css/style.css b/week2/2-website/css/style.css index c52a81f9..27bfed3e 100644 --- a/week2/2-website/css/style.css +++ b/week2/2-website/css/style.css @@ -73,22 +73,67 @@ nav.nav-links{ } .content{ - width: 100px; + width: 130px; } -h2 { +div>h2:first-child { text-align: center; padding-top: 30px; + font-size: 45px; + font-weight: lighter; } -.content_image { + +/* .content_image { + list-style-type: none; display: flex; - justify-content: space-around; + flex-wrap: wrap; + padding-right: 19rem; + padding-left: 17rem; + +} +.c1 { + height: 40vh; + flex-grow: 1; } -.content { +img { + + max-height:70%; + min-width: 20%; + object-fit: scale-down; + vertical-align: bottom; +} */ +.items{ + display: flex; + flex-direction: row; + justify-content: center; } - - .content { - display: inline-block; - direction: row; - align-items: center; - } +div.item { + vertical-align: top; + display: inline-block; + text-align: center; + width: 250px; + +} +img { + width: 150px; + height: 150px; +} +.caption { + display: flex; + font-size: 1.4rem; + padding-left: 1.5rem; +} +.caption1 { + display: flex; + font-size: 1.4rem; + padding-left: 1rem; + padding-right: .5rem; +} +.caption2 { + display: flex; + padding-left: 2rem; + font-size: 1.3rem; +} +span { + padding-top: 20px; +} \ No newline at end of file diff --git a/week2/2-website/index.html b/week2/2-website/index.html index 12abbd0a..41f8a98f 100644 --- a/week2/2-website/index.html +++ b/week2/2-website/index.html @@ -38,26 +38,36 @@

Bring WiFi with you, everywhere you go.

- -

Everyone needs a little Karma

-
-
- image1 +
+

Everyone needs a little Karma.

-
- image_2 +
+
+ + Internet for all devices
-
image3
-
-

Internet for all devices Boost your production


Pay as you go

+
+ + Boost your production +
+
+ + Pay as you go +
+
+ +
-
- - - From 9b2312b0d5321e121915cfe293843c7bfceda862 Mon Sep 17 00:00:00 2001 From: Ade0211 <62720742+Ade0211@users.noreply.github.com> Date: Wed, 20 May 2020 02:05:31 +0100 Subject: [PATCH 3/8] made adjustments to my nav-bar I changed the default color of the nav-links and i adjusted the postioning of my img1 within the container located in the nav-bar --- week2/2-website/css/style.css | 104 +++++++++++++++++----------------- week2/2-website/index.html | 25 +++----- 2 files changed, 60 insertions(+), 69 deletions(-) diff --git a/week2/2-website/css/style.css b/week2/2-website/css/style.css index 27bfed3e..e5adcdf3 100644 --- a/week2/2-website/css/style.css +++ b/week2/2-website/css/style.css @@ -6,70 +6,88 @@ body { font-family: 'Roboto', sans-serif; -webkit-font-smoothing: antialiased; } -nav.nav-links{ - position:fixed; -} -.container { + +.nav-bar { + top: 0; + width: 100%; + height:auto; + } + + .container { display: flex; flex-direction: row; justify-content: center; - + margin-top: 2px; + margin-bottom: 0; + padding-left: 10rem; } nav li { display: inline; padding-right: 30px; + top: 20px; } + .links a:nth-child(1) { + color: black !important + } + .img1 { width: auto; height: 40px; padding-right: 10rem; padding-left: 7rem; transform: translate(y); - } - .image-container { - width: 100%; - position: absolute; - top: 0; - left: 0; + } + - } .top-image { background-image: url('../img/first-background.jpg'); - background-repeat: no-repeat; + background-repeat: no-repeat; background-size: cover; background-position: center; height: 700px; } - - .container { - padding-left: 5rem; - } -.intext { + + .intext { display: column; position: absolute; - top: 350px; - align-items: center; + top: 200px; + left: 23rem; color: white; text-align: center; - padding-left: 35rem; +} +h1:first-child { + font-weight: lighter; + font-size: 3rem; + color: ivory; + margin-top: 40px; + } +.intext >:nth-child(2) { + font-weight: lighter; + font-size: 1.6rem; + color: ivory; + } #button { - height: 60px; + height: 55px; width: 50px; min-width: 150px; - border: 3px solid black; - background-color:orangered; - align-self: auto; + border: solid black; + background-color:orangered; + padding: 1px; + border-radius: 6px; } .link, .links { list-style-type: none; - padding-top: 20px; - + padding-top: 20px; } a { - text-decoration: none; + text-decoration: none; + color: grey; + } + a:hover { + color: black; } .content{ @@ -82,26 +100,6 @@ div>h2:first-child { font-weight: lighter; } -/* .content_image { - list-style-type: none; - display: flex; - flex-wrap: wrap; - padding-right: 19rem; - padding-left: 17rem; - -} -.c1 { - height: 40vh; - flex-grow: 1; -} -img { - - max-height:70%; - min-width: 20%; - object-fit: scale-down; - vertical-align: bottom; -} */ - .items{ display: flex; flex-direction: row; @@ -112,28 +110,28 @@ div.item { display: inline-block; text-align: center; width: 250px; - } img { - width: 150px; + width: 180px; height: 150px; } .caption { display: flex; font-size: 1.4rem; - padding-left: 1.5rem; + padding-left: 1rem; } .caption1 { display: flex; font-size: 1.4rem; - padding-left: 1rem; + padding-left: .7rem; padding-right: .5rem; } .caption2 { display: flex; - padding-left: 2rem; + padding-left: 1rem; font-size: 1.3rem; } span { padding-top: 20px; + padding-left: 10px; } \ No newline at end of file diff --git a/week2/2-website/index.html b/week2/2-website/index.html index 41f8a98f..fcbf0d97 100644 --- a/week2/2-website/index.html +++ b/week2/2-website/index.html @@ -13,21 +13,22 @@
+
+ My pic +
+
+

Introducing Karma

@@ -35,8 +36,8 @@

Bring WiFi with you, everywhere you go.

- -
+ +

Everyone needs a little Karma.

@@ -55,14 +56,6 @@

Everyone needs a little Karma.

Pay as you go
-
From 7b4dda66e4794a5725b892e1ea82cf6e1e2ac335 Mon Sep 17 00:00:00 2001 From: Ade0211 <62720742+Ade0211@users.noreply.github.com> Date: Wed, 20 May 2020 23:05:00 +0100 Subject: [PATCH 4/8] redesigned my header my navbar gets stuck everytime i tried to put it in a fixed position for the content of the page to scroll. so i fixed it by redesigning it --- week2/2-website/css/style.css | 170 +++++++++++++++++++--------------- week2/2-website/index.html | 35 +++++-- 2 files changed, 119 insertions(+), 86 deletions(-) diff --git a/week2/2-website/css/style.css b/week2/2-website/css/style.css index e5adcdf3..36cb8fda 100644 --- a/week2/2-website/css/style.css +++ b/week2/2-website/css/style.css @@ -1,74 +1,83 @@ /* We are using the 'Roboto' font from Google. This has already been added to your HTML header */ + body { background-color: white; font-family: 'Roboto', sans-serif; -webkit-font-smoothing: antialiased; } -.nav-bar { - top: 0; +.container{ + background-color: #fff; + position: fixed; width: 100%; - height:auto; - } - - .container { + border-bottom: 1px solid #DDD; + z-index: 9999;} +.img1 { + width:30px; + height: auto; + margin-left: 10%; +} +.nav-bar{ + position: sticky; display: flex; - flex-direction: row; - justify-content: center; - margin-top: 2px; - margin-bottom: 0; - padding-left: 10rem; - } - nav li { - display: inline; - padding-right: 30px; - top: 20px; - } - .links a:nth-child(1) { - color: black !important - } - - .img1 { - width: auto; - height: 40px; - padding-right: 10rem; - padding-left: 7rem; - transform: translate(y); - } - + justify-content: space-around; + align-items: center; - .top-image { - background-image: url('../img/first-background.jpg'); - background-repeat: no-repeat; - background-size: cover; - background-position: center; - height: 700px; +} +.nav-link { + display: flex; + justify-content: space-between; + width: 40%; + margin-right: 20%; + list-style-type: none; + padding-top: 10px; +} +a { + text-decoration: none; + color: grey; +} +.links a:nth-child(1) { + color: black !important +} +a:hover { + color: black; +} +.top-image { + background-image: url('../img/first-background.jpg'); + background-repeat: no-repeat; + background-size: cover; + background-position: center; + height: 600px; +} +.intext { + display: column; + position: absolute; + top: 200px; + left: 23rem; + color: white; + text-align: center; } - - .intext { - display: column; - position: absolute; - top: 200px; - left: 23rem; - color: white; - text-align: center; -} - -h1:first-child { + h1:first-child { font-weight: lighter; font-size: 3rem; color: ivory; margin-top: 40px; } -.intext >:nth-child(2) { + div>h2:first-child { + text-align: center; + padding-top: 30px; + font-size: 45px; + font-weight: lighter; +} + .intext >:nth-child(2) { font-weight: lighter; font-size: 1.6rem; color: ivory; } - #button { + #button { height: 55px; width: 50px; min-width: 150px; @@ -76,31 +85,8 @@ h1:first-child { background-color:orangered; padding: 1px; border-radius: 6px; - } - - .link, .links { - list-style-type: none; - padding-top: 20px; - } - a { - text-decoration: none; - color: grey; - } - a:hover { - color: black; - } - -.content{ - width: 130px; -} -div>h2:first-child { - text-align: center; - padding-top: 30px; - font-size: 45px; - font-weight: lighter; -} - -.items{ + } + .items{ display: flex; flex-direction: row; justify-content: center; @@ -112,8 +98,8 @@ div.item { width: 250px; } img { - width: 180px; - height: 150px; + width: 150px; + height: 130px; } .caption { display: flex; @@ -134,4 +120,36 @@ img { span { padding-top: 20px; padding-left: 10px; -} \ No newline at end of file +} + +.footer{ + text-align: center; +} +#icon1 { +background-color: whitesmoke; + border-radius: 50%; + border: 1x solid grey; + padding:15px; +} +#icon1 { + background-color: whitesmoke; + border-radius: 50%; + border: 1x solid grey; + padding:15px; + } +#icon2 { + background-color: whitesmoke; + border-radius: 50%; + border: 1x solid grey; + padding:15px; + } +#icon3 { + background-color: whitesmoke; + border: slategrey; + border-radius: 50%; + border: 1x solid grey; + padding:15px; + } +.footer-social-icons { + color: skyblue; +} diff --git a/week2/2-website/index.html b/week2/2-website/index.html index fcbf0d97..4006b6df 100644 --- a/week2/2-website/index.html +++ b/week2/2-website/index.html @@ -4,8 +4,8 @@ Karma + - @@ -13,11 +13,11 @@
-
- My pic +
-
+
@@ -38,7 +38,7 @@

Bring WiFi with you, everywhere you go.

-
+

Everyone needs a little Karma.

@@ -58,9 +58,24 @@

Everyone needs a little Karma.

+
+
+ + + +
-
- + + + + +

© Karma Mobility, Inc.

+ - From 013893d35518916bcf4bbdd67075fb403d61ff67 Mon Sep 17 00:00:00 2001 From: Ade0211 <62720742+Ade0211@users.noreply.github.com> Date: Thu, 21 May 2020 18:52:02 +0100 Subject: [PATCH 5/8] media query and active link adjusted i added and adjusted media query on my page. I also worked on my active link as it was not responding earlier --- week2/2-website/css/style.css | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/week2/2-website/css/style.css b/week2/2-website/css/style.css index 36cb8fda..a67c255f 100644 --- a/week2/2-website/css/style.css +++ b/week2/2-website/css/style.css @@ -38,8 +38,11 @@ a { text-decoration: none; color: grey; } -.links a:nth-child(1) { - color: black !important +.links a:active { + color: black; +} +/* .links a:nth-child(1) { + color: black !important */ } a:hover { color: black; @@ -153,3 +156,8 @@ background-color: whitesmoke; .footer-social-icons { color: skyblue; } +@media only screen and (max-width:600px) { + body { + width: 70%; + } +} \ No newline at end of file From f26487c401341f221fd2354f387c1a687fc1c31b Mon Sep 17 00:00:00 2001 From: Ade0211 <62720742+Ade0211@users.noreply.github.com> Date: Sat, 23 May 2020 17:34:04 +0100 Subject: [PATCH 6/8] Media query issue My media query seems not to be working. so i had to fix the problem so that ii can be responsive --- week2/2-website/css/style.css | 199 +++++++++++++++++++++------------- week2/2-website/index.html | 36 +++--- 2 files changed, 139 insertions(+), 96 deletions(-) diff --git a/week2/2-website/css/style.css b/week2/2-website/css/style.css index a67c255f..963bc5b4 100644 --- a/week2/2-website/css/style.css +++ b/week2/2-website/css/style.css @@ -1,6 +1,9 @@ /* We are using the 'Roboto' font from Google. This has already been added to your HTML header */ - +*{ + padding: 0rem; + margin: 0rem; +} body { background-color: white; @@ -8,70 +11,71 @@ body { -webkit-font-smoothing: antialiased; } -.container{ +.nav-bar{ background-color: #fff; position: fixed; width: 100%; border-bottom: 1px solid #DDD; - z-index: 9999;} -.img1 { - width:30px; - height: auto; - margin-left: 10%; -} -.nav-bar{ - position: sticky; + z-index: 9999; +} +ul { display: flex; justify-content: space-around; - align-items: center; - } -.nav-link { - display: flex; - justify-content: space-between; - width: 40%; - margin-right: 20%; - list-style-type: none; - padding-top: 10px; +li { + list-style-type: none; } -a { +li a { + text-decoration: none; - color: grey; } -.links a:active { + +a:hover { color: black; } -/* .links a:nth-child(1) { - color: black !important */ +.top-image h1 { + margin-top: 17.5rem; + font-size: 3.125rem; } -a:hover { - color: black; +.top-image h1, h3 { + color: white; + text-align: center; + font-weight: 300; } .top-image { background-image: url('../img/first-background.jpg'); background-repeat: no-repeat; background-size: cover; - background-position: center; - height: 600px; + background-position: center bottom; + height: 45.938rem; + overflow: hidden; + vertical-align: baseline; + box-sizing: border-box; + display: inline-block; + text-align: center; + align-items: flex-start; } .intext { - display: column; - position: absolute; - top: 200px; - left: 23rem; - color: white; - text-align: center; + padding: 15rem .938rem; + margin: 0 auto; + min-width: 37.5rem; + } + + .feeder h2 { + font-size: 2.75rem; + margin: 1.625rem 0 3.125rem; + font-weight: 300; } h1:first-child { font-weight: lighter; font-size: 3rem; color: ivory; - margin-top: 40px; + margin-top: 2.5rem; } div>h2:first-child { text-align: center; - padding-top: 30px; - font-size: 45px; + padding-top: 1.875rem; + font-size: 2.81rem; font-weight: lighter; } .intext >:nth-child(2) { @@ -84,25 +88,24 @@ a:hover { height: 55px; width: 50px; min-width: 150px; - border: solid black; - background-color:orangered; - padding: 1px; - border-radius: 6px; + border: black; + background-color:#F15A29; + padding: 10px; + border-radius: 5px; } .items{ display: flex; flex-direction: row; justify-content: center; + padding-bottom: 0.9375rem; + } div.item { vertical-align: top; display: inline-block; text-align: center; - width: 250px; -} -img { - width: 150px; - height: 130px; + width: 15.625rem; + padding-right: 1.5rem; } .caption { display: flex; @@ -118,46 +121,86 @@ img { .caption2 { display: flex; padding-left: 1rem; + padding-right: 1rem; font-size: 1.3rem; } span { - padding-top: 20px; - padding-left: 10px; + padding-top: 1.25rem; + padding-left: 0.625rem; } .footer{ + margin-top: 1.875rem; text-align: center; } -#icon1 { -background-color: whitesmoke; - border-radius: 50%; - border: 1x solid grey; - padding:15px; -} -#icon1 { - background-color: whitesmoke; - border-radius: 50%; - border: 1x solid grey; - padding:15px; - } -#icon2 { - background-color: whitesmoke; - border-radius: 50%; - border: 1x solid grey; - padding:15px; - } -#icon3 { - background-color: whitesmoke; - border: slategrey; - border-radius: 50%; - border: 1x solid grey; - padding:15px; - } +hr { + margin-top: 1.25rem; +} +.footer-logo { + font-size: 1.5rem; + font-weight: lighter; +} + .footer-social-icons { - color: skyblue; + padding-bottom: 0.625rem; + color: #4c66a4; +} +.fa-twitter { + margin-left: 0.625rem; + background-color:white; + padding: 0.625rem; + border-radius: 50%; +} + +.fa-facebook { + margin-right: 0.125rem; + background-color:white; + padding: 0.625rem; + border-radius: 50%; + +} + +.fa-instagram { + margin-right: 0.625rem; + background-color: white; + padding: 0.625rem; + border: grey; + border-radius: 50%; +} + + +@media only screen and (max-width: 1200px) { + html{ + font-size: 0.625rem; + } + + .top-image { + width: 100%; + background-image: cover; + } + .items{ + width: 100%; + } +.intext h1{ + width:100%; } -@media only screen and (max-width:600px) { - body { - width: 70%; + +} + +@media only screen and (min-width: 1200px) { + html{ + font-size: 1rem; } -} \ No newline at end of file + + .top-image { + width: 100%; + background-image: cover; + } + .items{ + width: 100%; + } +.intext h1{ + width:100%; +} + +} diff --git a/week2/2-website/index.html b/week2/2-website/index.html index 4006b6df..f1a72857 100644 --- a/week2/2-website/index.html +++ b/week2/2-website/index.html @@ -13,11 +13,12 @@
-
+ -
+
-
+
+

Introducing Karma

-

Bring WiFi with you, everywhere you go.

+

Bring WiFi with you, everywhere you go.

+
+
- -
-
+
+

Everyone needs a little Karma.

@@ -59,18 +64,12 @@

Everyone needs a little Karma.

+ + From 45767dc556a81ae298b2d0d7ab6b9e20c8104f43 Mon Sep 17 00:00:00 2001 From: Ade0211 <62720742+Ade0211@users.noreply.github.com> Date: Sat, 23 May 2020 20:57:44 +0100 Subject: [PATCH 7/8] adjusted my nav-bar My nav-links werent aligning to the center, so i had to adjust my nav-bar . --- week2/2-website/README.md | 4 +- week2/2-website/css/style.css | 75 ++++++++++++++++++++++++----------- week2/2-website/index.html | 10 +++-- 3 files changed, 60 insertions(+), 29 deletions(-) diff --git a/week2/2-website/README.md b/week2/2-website/README.md index 95bb4ad8..31e93e6a 100644 --- a/week2/2-website/README.md +++ b/week2/2-website/README.md @@ -1,7 +1,7 @@ # Karma-clone -The aim of this exercise is to create a page that looks just like this one: http://thinkful-ed.github.io/karma-clone/ - +The aim of this exercise is to create a page that looks just like this one: +http://thinkful-ed.github.io/karma-clone/ ## Tasks - Fork and clone this repo. diff --git a/week2/2-website/css/style.css b/week2/2-website/css/style.css index 963bc5b4..1fa67d6a 100644 --- a/week2/2-website/css/style.css +++ b/week2/2-website/css/style.css @@ -15,19 +15,41 @@ body { background-color: #fff; position: fixed; width: 100%; + + height: 4.375rem; border-bottom: 1px solid #DDD; z-index: 9999; + } -ul { - display: flex; - justify-content: space-around; + +.img1 { + display: inline-block; + width: 1.5rem; + line-height: .5rem; +} + + li { + margin-left: 2rem; + display: inline-block; + align-items: center; + } -li { - list-style-type: none; +.nav-link { + align-items: center; + padding: 1rem 0.938rem; + margin: 0 auto; + max-width: 35.5rem + } -li a { + +.active a{ + color: black; +} + + a { text-decoration: none; + color: grey; } a:hover { @@ -85,13 +107,14 @@ a:hover { } #button { - height: 55px; - width: 50px; - min-width: 150px; + height: 3.4375rem; + width: 3rem; + min-width: 9rem; border: black; - background-color:#F15A29; - padding: 10px; - border-radius: 5px; + background-color:#F15A29; + margin-top: 0.625rem; + padding: 0.625rem; + border-radius: 0.3125rem; } .items{ display: flex; @@ -104,25 +127,26 @@ div.item { vertical-align: top; display: inline-block; text-align: center; - width: 15.625rem; + width: 11rem; padding-right: 1.5rem; } + .caption { display: flex; - font-size: 1.4rem; - padding-left: 1rem; + font-size: 1rem; + /* padding-left: 1rem; */ } .caption1 { display: flex; - font-size: 1.4rem; - padding-left: .7rem; + font-size: 1rem; + /* padding-left: .7rem; */ padding-right: .5rem; } .caption2 { display: flex; - padding-left: 1rem; + padding-right: 1rem; - font-size: 1.3rem; + font-size: 1rem; } span { padding-top: 1.25rem; @@ -147,14 +171,14 @@ hr { } .fa-twitter { margin-left: 0.625rem; - background-color:white; + background-color:whitesmoke; padding: 0.625rem; border-radius: 50%; } .fa-facebook { margin-right: 0.125rem; - background-color:white; + background-color:whitesmoke; padding: 0.625rem; border-radius: 50%; @@ -162,8 +186,8 @@ hr { .fa-instagram { margin-right: 0.625rem; - background-color: white; - padding: 0.625rem; + background-color:whitesmoke; + padding: 1rem; border: grey; border-radius: 50%; } @@ -184,6 +208,9 @@ hr { .intext h1{ width:100%; } +.nav-bar{ + width: 100%; +} } @@ -198,9 +225,11 @@ hr { } .items{ width: 100%; + padding-left: 2rem; } .intext h1{ width:100%; } + } diff --git a/week2/2-website/index.html b/week2/2-website/index.html index f1a72857..d19113d2 100644 --- a/week2/2-website/index.html +++ b/week2/2-website/index.html @@ -15,19 +15,21 @@
From b92640c9ea493544a38567a44c3caa55b1c2139e Mon Sep 17 00:00:00 2001 From: Ade0211 <62720742+Ade0211@users.noreply.github.com> Date: Sat, 23 May 2020 21:10:45 +0100 Subject: [PATCH 8/8] indented my code I indented my code --- week2/2-website/css/style.css | 457 +++++++++++++++++----------------- week2/2-website/index.html | 150 +++++------ 2 files changed, 307 insertions(+), 300 deletions(-) diff --git a/week2/2-website/css/style.css b/week2/2-website/css/style.css index 1fa67d6a..1f333f98 100644 --- a/week2/2-website/css/style.css +++ b/week2/2-website/css/style.css @@ -1,235 +1,242 @@ - /* We are using the 'Roboto' font from Google. This has already been added to your HTML header */ -*{ - padding: 0rem; - margin: 0rem; -} - -body { - background-color: white; - font-family: 'Roboto', sans-serif; - -webkit-font-smoothing: antialiased; -} - -.nav-bar{ - background-color: #fff; - position: fixed; - width: 100%; - - height: 4.375rem; - border-bottom: 1px solid #DDD; - z-index: 9999; - -} - -.img1 { - display: inline-block; - width: 1.5rem; - line-height: .5rem; -} - - li { - margin-left: 2rem; - display: inline-block; - align-items: center; + /* We are using the 'Roboto' font from Google. This has already been added to your HTML header */ + *{ + padding: 0rem; + margin: 0rem; + } + + body { + background-color: white; + font-family: 'Roboto', sans-serif; + -webkit-font-smoothing: antialiased; + } -} -.nav-link { - align-items: center; - padding: 1rem 0.938rem; - margin: 0 auto; - max-width: 35.5rem - -} - -.active a{ - color: black; -} - - a { - - text-decoration: none; - color: grey; -} - -a:hover { - color: black; -} -.top-image h1 { - margin-top: 17.5rem; - font-size: 3.125rem; -} -.top-image h1, h3 { - color: white; - text-align: center; - font-weight: 300; -} -.top-image { - background-image: url('../img/first-background.jpg'); - background-repeat: no-repeat; - background-size: cover; - background-position: center bottom; - height: 45.938rem; - overflow: hidden; - vertical-align: baseline; - box-sizing: border-box; - display: inline-block; - text-align: center; - align-items: flex-start; -} -.intext { - padding: 15rem .938rem; - margin: 0 auto; - min-width: 37.5rem; - } - - .feeder h2 { - font-size: 2.75rem; - margin: 1.625rem 0 3.125rem; - font-weight: 300; - } - h1:first-child { - font-weight: lighter; - font-size: 3rem; - color: ivory; - margin-top: 2.5rem; - } - div>h2:first-child { - text-align: center; - padding-top: 1.875rem; - font-size: 2.81rem; - font-weight: lighter; -} - .intext >:nth-child(2) { - font-weight: lighter; - font-size: 1.6rem; - color: ivory; - -} - #button { - height: 3.4375rem; - width: 3rem; - min-width: 9rem; - border: black; - background-color:#F15A29; - margin-top: 0.625rem; - padding: 0.625rem; - border-radius: 0.3125rem; - } - .items{ - display: flex; - flex-direction: row; - justify-content: center; - padding-bottom: 0.9375rem; - -} -div.item { - vertical-align: top; - display: inline-block; - text-align: center; - width: 11rem; - padding-right: 1.5rem; -} - -.caption { - display: flex; - font-size: 1rem; - /* padding-left: 1rem; */ -} -.caption1 { - display: flex; - font-size: 1rem; - /* padding-left: .7rem; */ - padding-right: .5rem; -} -.caption2 { - display: flex; - padding-right: 1rem; - font-size: 1rem; -} -span { - padding-top: 1.25rem; - padding-left: 0.625rem; -} - -.footer{ - margin-top: 1.875rem; - text-align: center; -} -hr { - margin-top: 1.25rem; -} -.footer-logo { - font-size: 1.5rem; - font-weight: lighter; -} - -.footer-social-icons { - padding-bottom: 0.625rem; - color: #4c66a4; -} -.fa-twitter { - margin-left: 0.625rem; - background-color:whitesmoke; - padding: 0.625rem; - border-radius: 50%; -} - -.fa-facebook { - margin-right: 0.125rem; - background-color:whitesmoke; - padding: 0.625rem; - border-radius: 50%; - -} - -.fa-instagram { - margin-right: 0.625rem; - background-color:whitesmoke; - padding: 1rem; - border: grey; - border-radius: 50%; -} - - -@media only screen and (max-width: 1200px) { - html{ - font-size: 0.625rem; + + .nav-bar{ + background-color: #fff; + position: fixed; + width: 100%; + + height: 4.375rem; + border-bottom: 1px solid #DDD; + z-index: 9999; + + } + + .img1 { + display: inline-block; + width: 1.5rem; + line-height: .5rem; + } + + li { + margin-left: 2rem; + display: inline-block; + align-items: center; + + } + .nav-link { + align-items: center; + padding: 1rem 0.938rem; + margin: 0 auto; + max-width: 35.5rem + + } + + .active a{ + color: black; + } + + a { + + text-decoration: none; + color: grey; + } + + a:hover { + color: black; } + /* Background image and intext messages */ + .top-image h1 { + margin-top: 17.5rem; + font-size: 3.125rem; + } + .top-image h1, h3 { + color: white; + text-align: center; + font-weight: 300; + } .top-image { - width: 100%; - background-image: cover; - } - .items{ - width: 100%; - } -.intext h1{ - width:100%; -} -.nav-bar{ - width: 100%; -} - -} - -@media only screen and (min-width: 1200px) { - html{ + background-image: url('../img/first-background.jpg'); + background-repeat: no-repeat; + background-size: cover; + background-position: center bottom; + height: 45.938rem; + overflow: hidden; + vertical-align: baseline; + box-sizing: border-box; + display: inline-block; + text-align: center; + align-items: flex-start; + } + .intext { + padding: 15rem .938rem; + margin: 0 auto; + min-width: 37.5rem; + } + + .feeder h2 { + font-size: 2.75rem; + margin: 1.625rem 0 3.125rem; + font-weight: 300; + } + h1:first-child { + font-weight: lighter; + font-size: 3rem; + color: ivory; + margin-top: 2.5rem; + } + div>h2:first-child { + text-align: center; + padding-top: 1.875rem; + font-size: 2.81rem; + font-weight: lighter; + } + .intext >:nth-child(2) { + font-weight: lighter; + font-size: 1.6rem; + color: ivory; + + } + /* button */ + + #button { + height: 3.4375rem; + width: 3rem; + min-width: 9rem; + border: black; + background-color:#F15A29; + margin-top: 0.625rem; + padding: 0.625rem; + border-radius: 0.3125rem; + } + /* Refill Devices Coffee and Assigned Text */ + .items { + display: flex; + flex-direction: row; + justify-content: center; + padding-bottom: 0.9375rem; + + } + div.item { + vertical-align: top; + display: inline-block; + text-align: center; + width: 11rem; + padding-right: 1.5rem; + } + + .caption { + display: flex; font-size: 1rem; + } + .caption1 { + display: flex; + font-size: 1rem; - .top-image { + padding-right: .5rem; + } + .caption2 { + display: flex; + + padding-right: 1rem; + font-size: 1rem; + } + span { + padding-top: 1.25rem; + padding-left: 0.625rem; + } + /* footer */ + + + .footer{ + margin-top: 1.875rem; + text-align: center; + } + hr { + margin-top: 1.25rem; + } + .footer-logo { + font-size: 1.5rem; + font-weight: lighter; + } + + .footer-social-icons { + padding-bottom: 0.625rem; + color: #4c66a4; + } + .fa-twitter { + margin-left: 0.625rem; + background-color:whitesmoke; + padding: 0.625rem; + border-radius: 50%; + } + + .fa-facebook { + margin-right: 0.125rem; + background-color:whitesmoke; + padding: 0.625rem; + border-radius: 50%; + } + + .fa-instagram { + margin-right: 0.625rem; + background-color:whitesmoke; + padding: 1rem; + border: grey; + border-radius: 50%; + } + + @media only screen and (max-width: 1200px) { + html{ + font-size: 0.625rem; + } + + .top-image { + width: 100%; + background-image: cover; + } + .items{ + width: 100%; + } + .intext h1{ + width:100%; + } + .nav-bar{ + width: 100%; + } + + } + + @media only screen and (min-width: 1200px) { + html{ + font-size: 1rem; + } + + .top-image { + width: 100%; + background-image: cover; + } + .items{ width: 100%; - background-image: cover; - } - .items{ - width: 100%; - padding-left: 2rem; - } -.intext h1{ - width:100%; -} - - -} + padding-left: 2rem; + } + .intext h1{ + width:100%; + } + + + } diff --git a/week2/2-website/index.html b/week2/2-website/index.html index d19113d2..e62d72e3 100644 --- a/week2/2-website/index.html +++ b/week2/2-website/index.html @@ -1,83 +1,83 @@ - - - - - - Karma - - - - - - - - -
- - - -
-
-
+
-
-

Introducing Karma

-

Bring WiFi with you, everywhere you go.

-
- +
+
+

Everyone needs a little Karma.

-
- - -
-
-

Everyone needs a little Karma.

-
-
-
- - Internet for all devices -
-
- - Boost your production +
+
+ + Internet for all devices
-
- - Pay as you go +
+ + Boost your production +
+
+ + Pay as you go +
-
- -
-
+ + +
- + - - + +