From d9e88b5b3f8d7cfb19856a29f06ce0488c963ac0 Mon Sep 17 00:00:00 2001
From: erin-switchstitch <83361880+erin-switchstitch@users.noreply.github.com>
Date: Thu, 20 May 2021 23:17:04 +0100
Subject: [PATCH 1/5] Cyber Blog v.1.0
I have set out most of the HTML and CSS. Still need to make HTML semantic, and need to finetune the CSS so that all the elements are spaced and styled correctly.
---
css/style.css | 93 +++++++++++++++++++++++++++++++++++++++++++++++++++
index.html | 85 +++++++++++++++++++++++++++++++++++++++++++---
2 files changed, 174 insertions(+), 4 deletions(-)
diff --git a/css/style.css b/css/style.css
index 75e9841e..4ca90756 100644
--- a/css/style.css
+++ b/css/style.css
@@ -6,3 +6,96 @@
* for example: General styles, Navigation styles, Hero styles, Footer etc.
*
*/
+
+* {
+ background-color: #275e85;
+ color: white;
+}
+
+body {
+ margin: 0;
+ padding: 0;
+ width: 100%; /* full window width */
+ text-align: center;
+}
+
+/* I have reset the box-sizing from content-box to border-box. this will make sizing elements easier */
+*,
+*:before,
+*:after {
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ -box-sizing: border-box;
+}
+
+/* I have used this solution to try and show 3 elements on the same line based on the percentage of the overall width
+of the page, whilst not having to use CSS grids. Source for solution : https://www.codecademy.com/forum_questions/53a1263e631fe949a9000427
+
+However I am still running into issues for getting it to display properly */
+
+#wrapper {
+ width: 100%; /* of body width */
+ background-color: #1e4763;
+}
+
+#wrapper > div {
+ display: inline-block;
+ width: 32%; /* of wrapper width */
+ margin: auto;
+ text-align: center;
+ overflow: hidden;
+}
+
+h1 {
+ /*width: max-content; /* of wrapper width */
+ margin: auto;
+ color: whitesmoke;
+ height: 300px;
+ font-size: 3em;
+ background-color: #1e4763;
+ /*vertical-align:middle;*/
+}
+
+.h1-image-1 .h1-image-2 {
+ margin: auto;
+}
+
+p {
+ text-align: start;
+ margin-left: 10%;
+ margin-right: 10%;
+ padding-top: 5%;
+ color: white;
+ font-size: 1.3em;
+}
+
+h2 {
+ text-align: start;
+ font-size: 225%;
+ margin-top: 10%;
+ margin-left: 10%;
+ margin-right: 10%;
+}
+
+.h2-image {
+ display: block;
+ margin-top: 2.5%;
+ align-items: baseline;
+ margin-left: 10%;
+}
+
+input {
+ display: block;
+ background-color: white;
+ color: black;
+ width: 40%;
+ height: 30px;
+ align-items: baseline;
+ margin-left: 10%;
+ margin-top: 5%;
+}
+
+.footer-top {
+ border-top: solid grey 2px;
+ margin-top: 10%;
+}
diff --git a/index.html b/index.html
index 67dfc7f5..e70843b9 100644
--- a/index.html
+++ b/index.html
@@ -1,12 +1,12 @@
-
+
- My Blog
+ Cyber Security in the 21st Century
+
+
-
-
+
+
+
+
+
+
+
+
Cyber Security in the 21st Century
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+ aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
+ aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
+ occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+ aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
+ aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
+ occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+
+
+
+
Breaking passwords
+
+
+
+
"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam,
+ eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam
+ voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
+ voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit,
+ sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
+
+ Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae
+ sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus
+ maiores alias consequatur aut perferendis doloribus asperiores repellat.
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+ aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
+ aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
+ occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+ aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
+ aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
+ occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
+
+
+
+
+
How secure is your password?
+
+
Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae
+ sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus
+ maiores alias consequatur aut perferendis doloribus asperiores repellat.
+
+
+
+
+
+
+
From cc0ce2d71ba10a506a256af1143148f2f9164b8f Mon Sep 17 00:00:00 2001
From: erin-switchstitch <83361880+erin-switchstitch@users.noreply.github.com>
Date: Fri, 21 May 2021 11:59:02 +0100
Subject: [PATCH 2/5] Cyber Blog v.1.1
Started to make the page semantic by adding article elements in . I have also added a 3rd article. Need to add links.
---
css/style.css | 20 ++++++++++--
index.html | 84 ++++++++++++++++++++++++++++++++++++---------------
2 files changed, 77 insertions(+), 27 deletions(-)
diff --git a/css/style.css b/css/style.css
index 4ca90756..061ddb31 100644
--- a/css/style.css
+++ b/css/style.css
@@ -64,22 +64,33 @@ p {
text-align: start;
margin-left: 10%;
margin-right: 10%;
- padding-top: 5%;
+ margin-top: 3em;
color: white;
font-size: 1.3em;
}
+.heading-p {
+ margin-top: 5%;
+}
+
h2 {
text-align: start;
font-size: 225%;
- margin-top: 10%;
+ margin-top: 7.5%;
margin-left: 10%;
margin-right: 10%;
}
+.h2-bottom {
+ margin-bottom: 3.5%;
+ margin-left: 10%;
+ margin-right: 34.5%;
+ border-bottom: #1e4763 solid 3px;
+}
+
.h2-image {
display: block;
- margin-top: 2.5%;
+
align-items: baseline;
margin-left: 10%;
}
@@ -99,3 +110,6 @@ input {
border-top: solid grey 2px;
margin-top: 10%;
}
+
+footer a {
+}
diff --git a/index.html b/index.html
index e70843b9..95fc43b5 100644
--- a/index.html
+++ b/index.html
@@ -2,6 +2,9 @@
+
+
+
Cyber Security in the 21st Century
-
Breaking passwords
-
+
-
-
"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam,
- eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam
- voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
- voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit,
- sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
+
+
Breaking passwords
+
- Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae
- sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus
- maiores alias consequatur aut perferendis doloribus asperiores repellat.
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
- aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
- aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
- occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
- aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
- aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
- occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
+
+
"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam,
+ eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam
+ voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
+ voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit,
+ sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
+
+ Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae
+ sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus
+ maiores alias consequatur aut perferendis doloribus asperiores repellat.
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+ aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
+ aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
+ occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+ aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
+ aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
+ occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
+
+
+
+
+
+
Brute force attack vs. dictionary attacks
+
+
+
+
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+ aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
+ aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
+ occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit
+ amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+ aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
+ aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
+ occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+
+
Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates
+ repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis
+ voluptatibus
+ maiores alias consequatur aut perferendis doloribus asperiores repellat.
-
+
+
+
+
How secure is your password?
+
-
Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae
- sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus
- maiores alias consequatur aut perferendis doloribus asperiores repellat.
-
+
Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae
+ sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus
+ maiores alias consequatur aut perferendis doloribus asperiores repellat.
+
+
From 2b6f78a8a54f8f9a0f079f6eaac9d18a5a0ce58c Mon Sep 17 00:00:00 2001
From: erin-switchstitch <83361880+erin-switchstitch@users.noreply.github.com>
Date: Fri, 21 May 2021 13:41:09 +0100
Subject: [PATCH 3/5] Cyber-Blog-v.1.2
Added links to all the articles. Made first:child for the first article to make it slightly bigger. Still need to fix the header (it doesn't stretch evenly).
---
css/style.css | 55 +++++++++++++++++++++++++++++++--------------------
index.html | 29 ++++++++++++++++++++-------
2 files changed, 56 insertions(+), 28 deletions(-)
diff --git a/css/style.css b/css/style.css
index 061ddb31..4a010809 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,12 +1,3 @@
-/**
- * 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.
- *
- */
-
* {
background-color: #275e85;
color: white;
@@ -16,7 +7,6 @@ body {
margin: 0;
padding: 0;
width: 100%; /* full window width */
- text-align: center;
}
/* I have reset the box-sizing from content-box to border-box. this will make sizing elements easier */
@@ -35,31 +25,34 @@ However I am still running into issues for getting it to display properly */
#wrapper {
width: 100%; /* of body width */
- background-color: #1e4763;
+
+ position: fixed;
+ top: 0;
+ width: 100%;
+ background-color: #1c3f57;
}
+/* wrapper > div selects all child elements div within the wrapper. This is how I managed to get all three elements to display in a row.*/
+
#wrapper > div {
+ background-color: #1c3f57;
display: inline-block;
- width: 32%; /* of wrapper width */
- margin: auto;
+ width: 32.4%; /* of wrapper width */
+ height: 250px;
text-align: center;
overflow: hidden;
}
h1 {
/*width: max-content; /* of wrapper width */
- margin: auto;
+ background-color: #1c3f57;
+ margin-top: 10%;
color: whitesmoke;
height: 300px;
font-size: 3em;
- background-color: #1e4763;
/*vertical-align:middle;*/
}
-.h1-image-1 .h1-image-2 {
- margin: auto;
-}
-
p {
text-align: start;
margin-left: 10%;
@@ -70,13 +63,12 @@ p {
}
.heading-p {
- margin-top: 5%;
+ margin-top: 350px;
}
h2 {
text-align: start;
font-size: 225%;
- margin-top: 7.5%;
margin-left: 10%;
margin-right: 10%;
}
@@ -95,6 +87,27 @@ h2 {
margin-left: 10%;
}
+main article:first-child {
+ font-size: 1.2em;
+ margin-top: 100px;
+ margin-bottom: 15%;
+}
+
+/* Note - margin-top did not work for because it is an inline element, need to change to inline-block or block*/
+.article-link {
+ display: block;
+ font-size: 1.5em;
+ text-align: left;
+ margin-left: 10%;
+ margin-top: 5%;
+ text-decoration: none;
+ font-style: italic;
+}
+
+a:hover {
+ color: #ff3100;
+}
+
input {
display: block;
background-color: white;
diff --git a/index.html b/index.html
index 95fc43b5..2c6bfdc9 100644
--- a/index.html
+++ b/index.html
@@ -50,7 +50,10 @@
repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis
voluptatibus
maiores alias consequatur aut perferendis doloribus asperiores repellat.
+
+ How to stop a brute force attack
@@ -116,11 +125,17 @@
Brute force attack vs. dictionary attacks
How secure is your password?
-
-
-
Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae
- sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus
+Check if your email address has been comprimised by clicking here
+
Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates
+ repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus
+ maiores alias consequatur aut perferendis doloribus asperiores repellat.Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus
+ maiores alias consequatur aut perferendis doloribus asperiores repellat.Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus
+ maiores alias consequatur aut perferendis doloribus asperiores repellat.Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus
maiores alias consequatur aut perferendis doloribus asperiores repellat.
+
+
+
+
From 0e0af8218119af6919902d8e46ba65f3d78d5f05 Mon Sep 17 00:00:00 2001
From: erin-switchstitch <83361880+erin-switchstitch@users.noreply.github.com>
Date: Fri, 21 May 2021 17:58:02 +0100
Subject: [PATCH 4/5] Cyber-Blog-v1. 3
Changed some styling elements, and worked on some responsivity. Need to do more work to get this page properly responsive. Hoping to avoid loads of @media requests
---
css/style.css | 4 +++-
index.html | 2 ++
2 files changed, 5 insertions(+), 1 deletion(-)
diff --git a/css/style.css b/css/style.css
index 4a010809..17292bf1 100644
--- a/css/style.css
+++ b/css/style.css
@@ -7,6 +7,7 @@ body {
margin: 0;
padding: 0;
width: 100%; /* full window width */
+ font-family: "KoHo", sans-serif;
}
/* I have reset the box-sizing from content-box to border-box. this will make sizing elements easier */
@@ -30,6 +31,7 @@ However I am still running into issues for getting it to display properly */
top: 0;
width: 100%;
background-color: #1c3f57;
+ border-bottom: #ff3100 4px solid;
}
/* wrapper > div selects all child elements div within the wrapper. This is how I managed to get all three elements to display in a row.*/
@@ -120,7 +122,7 @@ input {
}
.footer-top {
- border-top: solid grey 2px;
+ border-top: solid #ff3100 2px;
margin-top: 10%;
}
diff --git a/index.html b/index.html
index 2c6bfdc9..89079f85 100644
--- a/index.html
+++ b/index.html
@@ -17,6 +17,8 @@
/>
+
+
From 6d16e71104925914c56990551978b334d749a530 Mon Sep 17 00:00:00 2001
From: erin-switchstitch <83361880+erin-switchstitch@users.noreply.github.com>
Date: Sat, 22 May 2021 15:43:02 +0100
Subject: [PATCH 5/5] Refugee-Bike-Broken-prefix
---
css/style.css | 12 +++++++++++-
1 file changed, 11 insertions(+), 1 deletion(-)
diff --git a/css/style.css b/css/style.css
index 17292bf1..f20c6fe6 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,3 +1,11 @@
+/* After having watched the responsivity videos, there is a lot that I would change witgh this project. It
+would be really good to start again from the ground up and design it first for an iphone, and then for a tablet
+etc...
+
+I would massively change the layout of the font, change the pictures so theyre centered and larger, then as the
+website sclaes up I could look to shift them to a left alligned position. I would also play around with spacing
+and perhaps redesign the header. */
+
* {
background-color: #275e85;
color: white;
@@ -82,9 +90,11 @@ h2 {
border-bottom: #1e4763 solid 3px;
}
+/* Using a relative measurement for the width of the images mean that they will rescale as the page does !!! */
+
.h2-image {
display: block;
-
+ width: 30%;
align-items: baseline;
margin-left: 10%;
}