From 76919e6321980ee9080d7afc878fd20cb33478c2 Mon Sep 17 00:00:00 2001 From: AitkenFortuin Date: Fri, 4 Dec 2020 03:50:00 +0200 Subject: [PATCH 1/8] First Commit of Website Skeleton (In Progress) Created Skeleton of Website (First commit --- css/style.css | 65 +++++++++++++++++++++++++++++++++++++++++++++++++++ index.html | 65 +++++++++++++++++++++++++++++++++++++-------------- 2 files changed, 112 insertions(+), 18 deletions(-) diff --git a/css/style.css b/css/style.css index 75e9841e..99948bb8 100644 --- a/css/style.css +++ b/css/style.css @@ -6,3 +6,68 @@ * for example: General styles, Navigation styles, Hero styles, Footer etc. * */ + + body { + font-family: Arial; + padding: 20px; + background: #f1f1f1; + } + + /* Header/Blog Title */ + .header { + padding: 30px; + font-size: 40px; + text-align: center; + background: rgb(18, 135, 181); + } + + /* Create two unequal columns that floats next to each other */ + /* Left column */ + .leftcolumn { + float: left; + width: 75%; + } + + /* Right column */ + .rightcolumn { + float: left; + width: 25%; + padding-left: 20px; + } + + /* Fake image */ + .fakeimg { + background-color: #aaa; + width: 100%; + padding: 20px; + } + + /* Add a card effect for articles */ + .card { + background-color: white; + padding: 20px; + margin-top: 20px; + } + + /* Clear floats after the columns */ + .row:after { + content: ""; + display: table; + clear: both; + } + + /* Footer */ + .footer { + padding: 20px; + text-align: center; + background: #ddd; + margin-top: 20px; + } + + /* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */ + @media screen and (max-width: 800px) { + .leftcolumn, .rightcolumn { + width: 100%; + padding: 0; + } + } \ No newline at end of file diff --git a/index.html b/index.html index 67dfc7f5..882e73f1 100644 --- a/index.html +++ b/index.html @@ -1,22 +1,51 @@ - - - - My Blog - - - - - + + +
+

The BatCave

+
+ +
+
+
+

A Safe Space for people to speak about Comics

+
Created by Comic Kids For Comic Kids on Dec 3, 2020
+
Image
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut blandit ex auctor leo sagittis eleifend at in mi. Sed tristique mattis velit. Nulla et ullamcorper lorem, iaculis posuere nunc. Duis enim nibh, tempus nec iaculis vel, egestas bibendum nulla. Sed posuere lacus non ultrices viverra. Pellentesque nec mi sem. Cras hendrerit nec neque at semper

+
+ +
+

TITLE HEADING

+
Title description, Sep 2, 2017
+
Image
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nibh odio, consequat eu maximus vitae, vulputate nec libero. Maecenas placerat nunc non sem dapibus semper. Aenean ut sollicitudin mauris, at placerat lacus. Morbi sed tellus vel magna sodales ultricies vel at metus. Etiam interdum ullamcorper velit vel ultrices. Sed vel dolor in arcu euismod posuere sit amet et magna. Sed ut pellentesque tortor. Integer at mi nunc. Duis aliquam dolor id vulputate venenatis

+
+
+
+
+

About Me

+
Image
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nibh odio, consequat eu maximus vitae, vulputate nec libero. Maecenas placerat nunc non sem dapibus semper..

+
+
+

Popular Post

+
Image

+
Image

+
Image
+
+
+

Follow Me

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nibh odio, consequat eu maximus vitae, vulputate nec libero. Maecenas placerat nunc non sem dapibus semper.

+
+
+
+ +
+

Footer

+
+ + - - + \ No newline at end of file From 347d87ecee9b4f0f27b787711e1880e421122e13 Mon Sep 17 00:00:00 2001 From: AitkenFortuin Date: Fri, 4 Dec 2020 04:06:27 +0200 Subject: [PATCH 2/8] Update Css Testing Background Updates --- css/style.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/css/style.css b/css/style.css index 99948bb8..16f3c963 100644 --- a/css/style.css +++ b/css/style.css @@ -10,7 +10,7 @@ body { font-family: Arial; padding: 20px; - background: #f1f1f1; + background: #73a8fa; } /* Header/Blog Title */ @@ -18,7 +18,7 @@ padding: 30px; font-size: 40px; text-align: center; - background: rgb(18, 135, 181); + background: #0787ad; } /* Create two unequal columns that floats next to each other */ From bce3b381fc16e2afcf447b22862151e4eef800a8 Mon Sep 17 00:00:00 2001 From: AitkenFortuin Date: Fri, 4 Dec 2020 17:14:51 +0200 Subject: [PATCH 3/8] Added more imqges to site and CSS color change Site is about 80% complete just need to work out the kinks to link the CSS and HTML files --- css/style.css | 21 ++++++++++++++++++--- index.html | 27 ++++++++++++++++++--------- 2 files changed, 36 insertions(+), 12 deletions(-) diff --git a/css/style.css b/css/style.css index 16f3c963..60a8bf98 100644 --- a/css/style.css +++ b/css/style.css @@ -10,7 +10,7 @@ body { font-family: Arial; padding: 20px; - background: #73a8fa; + background:#062063; } /* Header/Blog Title */ @@ -18,8 +18,23 @@ padding: 30px; font-size: 40px; text-align: center; - background: #0787ad; + background: #1fb59c; } +/* First Image of Batman */ + div.First-img{ + width: 1500px; + height: 500px; + background-color:#06161f; + overflow:hidden; + }; + + /* Second Image of Trio */ + .Second-img{ + width: 150px; + height: 50px; + background-color:#06161f; + overflow:hidden; + }; /* Create two unequal columns that floats next to each other */ /* Left column */ @@ -38,7 +53,7 @@ /* Fake image */ .fakeimg { background-color: #aaa; - width: 100%; + width: 80%; padding: 20px; } diff --git a/index.html b/index.html index 882e73f1..2f166062 100644 --- a/index.html +++ b/index.html @@ -1,9 +1,10 @@ +
-

The BatCave

+

THE BATCAVE

@@ -11,23 +12,31 @@

The BatCave

A Safe Space for people to speak about Comics

Created by Comic Kids For Comic Kids on Dec 3, 2020
-
Image
+ +
+ +

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut blandit ex auctor leo sagittis eleifend at in mi. Sed tristique mattis velit. Nulla et ullamcorper lorem, iaculis posuere nunc. Duis enim nibh, tempus nec iaculis vel, egestas bibendum nulla. Sed posuere lacus non ultrices viverra. Pellentesque nec mi sem. Cras hendrerit nec neque at semper

- +
-

TITLE HEADING

-
Title description, Sep 2, 2017
-
Image
+

What Our Current Mission Is

+
To allow people of all kinds to come together in a safe place and find unity
+
+ +

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nibh odio, consequat eu maximus vitae, vulputate nec libero. Maecenas placerat nunc non sem dapibus semper. Aenean ut sollicitudin mauris, at placerat lacus. Morbi sed tellus vel magna sodales ultricies vel at metus. Etiam interdum ullamcorper velit vel ultrices. Sed vel dolor in arcu euismod posuere sit amet et magna. Sed ut pellentesque tortor. Integer at mi nunc. Duis aliquam dolor id vulputate venenatis

+

About Me

-
Image
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nibh odio, consequat eu maximus vitae, vulputate nec libero. Maecenas placerat nunc non sem dapibus semper..

-
+
+ +
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nibh odio, consequat eu maximus vitae, vulputate nec libero. Maecenas placerat nunc non sem dapibus semper..

+

Popular Post

Image

From da4f3501791917cf0976f8b7f4758da1bc17081d Mon Sep 17 00:00:00 2001 From: AitkenFortuin Date: Fri, 4 Dec 2020 17:21:11 +0200 Subject: [PATCH 4/8] Linked CSS File to HTML Linked the files and tested, works perfectly . Last Step is Finalize and Cleanup Code --- index.html | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 2f166062..8c70f966 100644 --- a/index.html +++ b/index.html @@ -1,7 +1,11 @@ - +

THE BATCAVE

From 6805924575e5f6aa8971d00d453dfd58bbb558db Mon Sep 17 00:00:00 2001 From: AitkenFortuin Date: Fri, 4 Dec 2020 17:45:35 +0200 Subject: [PATCH 5/8] Fixed CSS Images and added First Child in CSS Testing different Font Family with the first child of Paragraph 1 --- css/style.css | 19 ++++++++++--------- index.html | 7 +++++-- 2 files changed, 15 insertions(+), 11 deletions(-) diff --git a/css/style.css b/css/style.css index 60a8bf98..31910c65 100644 --- a/css/style.css +++ b/css/style.css @@ -22,19 +22,19 @@ } /* First Image of Batman */ div.First-img{ - width: 1500px; - height: 500px; + width: 100%; + height: 300px; background-color:#06161f; overflow:hidden; }; - /* Second Image of Trio */ - .Second-img{ - width: 150px; - height: 50px; - background-color:#06161f; - overflow:hidden; - }; + /* First child to stand out */ + p:first-child { + font-family:Helvetica; + font-size: 1.5em; + } + + /* Create two unequal columns that floats next to each other */ /* Left column */ @@ -78,6 +78,7 @@ background: #ddd; margin-top: 20px; } + /* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */ @media screen and (max-width: 800px) { diff --git a/index.html b/index.html index 8c70f966..0f3bf3b8 100644 --- a/index.html +++ b/index.html @@ -6,6 +6,8 @@ rel="stylesheet" type="text/css" /> + +

THE BATCAVE

@@ -21,13 +23,14 @@
Created by Comic Kids For Comic Kids on Dec 3, 2020

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut blandit ex auctor leo sagittis eleifend at in mi. Sed tristique mattis velit. Nulla et ullamcorper lorem, iaculis posuere nunc. Duis enim nibh, tempus nec iaculis vel, egestas bibendum nulla. Sed posuere lacus non ultrices viverra. Pellentesque nec mi sem. Cras hendrerit nec neque at semper

+

Nullam neque dolor, tempor vitae scelerisque in, commodo at quam. Phasellus quis nunc tempor, elementum justo non, mollis nulla. Pellentesque pulvinar felis eu arcu tristique pharetra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc mattis lorem a diam vulputate, quis semper sapien dapibus. Ut vehicula pellentesque justo in volutpat. Suspendisse potenti.

What Our Current Mission Is

To allow people of all kinds to come together in a safe place and find unity
- +

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nibh odio, consequat eu maximus vitae, vulputate nec libero. Maecenas placerat nunc non sem dapibus semper. Aenean ut sollicitudin mauris, at placerat lacus. Morbi sed tellus vel magna sodales ultricies vel at metus. Etiam interdum ullamcorper velit vel ultrices. Sed vel dolor in arcu euismod posuere sit amet et magna. Sed ut pellentesque tortor. Integer at mi nunc. Duis aliquam dolor id vulputate venenatis

@@ -37,7 +40,7 @@
To allow people of all kinds to come together in a safe place and find unity

About Me

- +

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nibh odio, consequat eu maximus vitae, vulputate nec libero. Maecenas placerat nunc non sem dapibus semper..

From 52615752363933a757861e4c84fd7d49ed3e82f4 Mon Sep 17 00:00:00 2001 From: AitkenFortuin Date: Fri, 4 Dec 2020 17:57:50 +0200 Subject: [PATCH 6/8] Cleaning Code --- css/style.css | 1 + index.html | 9 ++++++--- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/css/style.css b/css/style.css index 31910c65..c631a05a 100644 --- a/css/style.css +++ b/css/style.css @@ -16,6 +16,7 @@ /* Header/Blog Title */ .header { padding: 30px; + width: 100%; font-size: 40px; text-align: center; background: #1fb59c; diff --git a/index.html b/index.html index 0f3bf3b8..eb3700a8 100644 --- a/index.html +++ b/index.html @@ -7,18 +7,20 @@ type="text/css" /> - +

THE BATCAVE

- + +

A Safe Space for people to speak about Comics

Created by Comic Kids For Comic Kids on Dec 3, 2020
+
@@ -35,7 +37,7 @@
To allow people of all kinds to come together in a safe place and find unity

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nibh odio, consequat eu maximus vitae, vulputate nec libero. Maecenas placerat nunc non sem dapibus semper. Aenean ut sollicitudin mauris, at placerat lacus. Morbi sed tellus vel magna sodales ultricies vel at metus. Etiam interdum ullamcorper velit vel ultrices. Sed vel dolor in arcu euismod posuere sit amet et magna. Sed ut pellentesque tortor. Integer at mi nunc. Duis aliquam dolor id vulputate venenatis

- +

About Me

@@ -57,6 +59,7 @@

Follow Me

+

Footer

From 0677013ec2b656eae3d9a46797c33a5497c77c3e Mon Sep 17 00:00:00 2001 From: AitkenFortuin Date: Fri, 4 Dec 2020 18:20:06 +0200 Subject: [PATCH 7/8] Cleanup Code Fixing the CSS as Images are not aligning properly --- .vscode/launch.json | 15 +++++++++++++++ css/style.css | 4 +--- index.html | 3 +++ 3 files changed, 19 insertions(+), 3 deletions(-) create mode 100644 .vscode/launch.json diff --git a/.vscode/launch.json b/.vscode/launch.json new file mode 100644 index 00000000..7a9dfa04 --- /dev/null +++ b/.vscode/launch.json @@ -0,0 +1,15 @@ +{ + // Use IntelliSense to learn about possible attributes. + // Hover to view descriptions of existing attributes. + // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 + "version": "0.2.0", + "configurations": [ + { + "type": "pwa-chrome", + "request": "launch", + "name": "Launch Chrome against localhost", + "url": "http://localhost:8080", + "webRoot": "${workspaceFolder}" + } + ] +} \ No newline at end of file diff --git a/css/style.css b/css/style.css index c631a05a..31dc62f0 100644 --- a/css/style.css +++ b/css/style.css @@ -15,7 +15,7 @@ /* Header/Blog Title */ .header { - padding: 30px; + padding: 20px; width: 100%; font-size: 40px; text-align: center; @@ -35,8 +35,6 @@ font-size: 1.5em; } - - /* Create two unequal columns that floats next to each other */ /* Left column */ .leftcolumn { diff --git a/index.html b/index.html index eb3700a8..9932e6e6 100644 --- a/index.html +++ b/index.html @@ -20,6 +20,7 @@

THE BATCAVE

A Safe Space for people to speak about Comics

Created by Comic Kids For Comic Kids on Dec 3, 2020
+
@@ -38,6 +39,7 @@
To allow people of all kinds to come together in a safe place and find unity
+

About Me

@@ -46,6 +48,7 @@

About Me

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nibh odio, consequat eu maximus vitae, vulputate nec libero. Maecenas placerat nunc non sem dapibus semper..

+

Popular Post

Image

From 4cd1a17ef6f61b58f8caea5c7625404f8380d255 Mon Sep 17 00:00:00 2001 From: AitkenFortuin Date: Fri, 4 Dec 2020 19:08:09 +0200 Subject: [PATCH 8/8] Added Links to All Articles And cleaned code --- css/style.css | 6 ++++-- index.html | 21 ++++++++++++++++----- 2 files changed, 20 insertions(+), 7 deletions(-) diff --git a/css/style.css b/css/style.css index 31dc62f0..46bb97cd 100644 --- a/css/style.css +++ b/css/style.css @@ -9,8 +9,9 @@ body { font-family: Arial; - padding: 20px; + padding: 30px; background:#062063; + align-content:center; } /* Header/Blog Title */ @@ -30,9 +31,10 @@ }; /* First child to stand out */ - p:first-child { + .p:first-child { font-family:Helvetica; font-size: 1.5em; + color: blue; } /* Create two unequal columns that floats next to each other */ diff --git a/index.html b/index.html index 9932e6e6..e8ecf7dd 100644 --- a/index.html +++ b/index.html @@ -8,11 +8,13 @@ /> +

THE BATCAVE

+
@@ -26,7 +28,7 @@
Created by Comic Kids For Comic Kids on Dec 3, 2020

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut blandit ex auctor leo sagittis eleifend at in mi. Sed tristique mattis velit. Nulla et ullamcorper lorem, iaculis posuere nunc. Duis enim nibh, tempus nec iaculis vel, egestas bibendum nulla. Sed posuere lacus non ultrices viverra. Pellentesque nec mi sem. Cras hendrerit nec neque at semper

-

Nullam neque dolor, tempor vitae scelerisque in, commodo at quam. Phasellus quis nunc tempor, elementum justo non, mollis nulla. Pellentesque pulvinar felis eu arcu tristique pharetra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc mattis lorem a diam vulputate, quis semper sapien dapibus. Ut vehicula pellentesque justo in volutpat. Suspendisse potenti.

+

Nullam neque dolor, tempor vitae scelerisque in, commodo at quam. Phasellus quis nunc tempor, elementum justo non, mollis nulla. Pellentesque pulvinar felis eu arcu tristique pharetra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc mattis lorem a diam vulputate, quis semper sapien dapibus. Ut vehicula pellentesque justo in volutpat. Suspendisse potenti. To Learn more Click On Me

@@ -35,8 +37,18 @@
To allow people of all kinds to come together in a safe place and find unity
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nibh odio, consequat eu maximus vitae, vulputate nec libero. Maecenas placerat nunc non sem dapibus semper. Aenean ut sollicitudin mauris, at placerat lacus. Morbi sed tellus vel magna sodales ultricies vel at metus. Etiam interdum ullamcorper velit vel ultrices. Sed vel dolor in arcu euismod posuere sit amet et magna. Sed ut pellentesque tortor. Integer at mi nunc. Duis aliquam dolor id vulputate venenatis

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nibh odio, consequat eu maximus vitae, vulputate nec libero. Maecenas placerat nunc non sem dapibus semper. Aenean ut sollicitudin mauris, at placerat lacus. Morbi sed tellus vel magna sodales ultricies vel at metus. Etiam interdum ullamcorper velit vel ultrices. Sed vel dolor in arcu euismod posuere sit amet et magna. Sed ut pellentesque tortor. Integer at mi nunc. Duis aliquam dolor id vulputate venenatis Latest Content at This Website Link

+
+ +
+

What Can I Do Here?

+
Be Yourself with Like Minded Individuals
+
+ +
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nibh odio, consequat eu maximus vitae, vulputate nec libero. Maecenas placerat nunc non sem dapibus semper. Aenean ut sollicitudin mauris, at placerat lacus. Morbi sed tellus vel magna sodales ultricies vel at metus. Etiam interdum ullamcorper velit vel ultrices. Sed vel dolor in arcu euismod posuere sit amet et magna. Sed ut pellentesque tortor. Integer at mi nunc. Duis aliquam dolor id vulputate venenatis For Comics Navigate toThis Website Of Bruce Wayne

+
@@ -61,13 +73,12 @@

Follow Me

- +
-

Footer

+

Site Created By Aitken Fortuin For Purpose of CodeYourFuture

- \ No newline at end of file