diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 00000000..7d74d998 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,5 @@ +{ + "cSpell.words": [ + "preconnect" + ] +} \ No newline at end of file diff --git a/images/edited/cover-img.png b/images/edited/cover-img.png new file mode 100644 index 00000000..ec187832 Binary files /dev/null and b/images/edited/cover-img.png differ diff --git a/images/source/crash-bandicoot.png b/images/source/crash-bandicoot.png new file mode 100644 index 00000000..7f399f21 Binary files /dev/null and b/images/source/crash-bandicoot.png differ diff --git a/images/source/fifa.jpg b/images/source/fifa.jpg new file mode 100644 index 00000000..ee0616a0 Binary files /dev/null and b/images/source/fifa.jpg differ diff --git a/images/source/gran-turismo.jpg b/images/source/gran-turismo.jpg new file mode 100644 index 00000000..b208e0c0 Binary files /dev/null and b/images/source/gran-turismo.jpg differ diff --git a/images/source/left-4-dead.jpg b/images/source/left-4-dead.jpg new file mode 100644 index 00000000..37424ea1 Binary files /dev/null and b/images/source/left-4-dead.jpg differ diff --git a/images/source/minecraft.jpg b/images/source/minecraft.jpg new file mode 100644 index 00000000..38bd873d Binary files /dev/null and b/images/source/minecraft.jpg differ diff --git a/images/source/resident-evil-4.jpg b/images/source/resident-evil-4.jpg new file mode 100644 index 00000000..d477506b Binary files /dev/null and b/images/source/resident-evil-4.jpg differ diff --git a/index.html b/index.html index 67dfc7f5..896f9d69 100644 --- a/index.html +++ b/index.html @@ -6,17 +6,311 @@ name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> - My Blog + Games! and Why They're Great! - + + + + + + + + + + +
+ + cover image + +

Games and Why They're Great!

+

an insight to the game we play and why we can't get enough of them!

+ +
+ +
+ +
+ +
+
+

I'm an article!

+

Lorem ipsum dolor sit amet, + consectetur adipiscing elit. + Maecenas sed ullamcorper purus, + eu blandit mi. Vivamus ac sapien + pellentesque, vulputate est ullamcorper, + scelerisque tellus. Phasellus vulputate, + est vel pellentesque dapibus, nisl felis + hendrerit ex, lacinia tincidunt lectus + quam vitae nunc. Vestibulum porta tempor + leo sit amet interdum. Aliquam erat volutpat. + Pellentesque diam ex, dapibus eget mi sed, + vulputate dictum lacus. Nam convallis nisl + tortor, sed varius ex convallis vestibulum. + Vestibulum eu placerat turpis, non gravida + eros. Curabitur aliquet, est eu molestie + congue, tortor urna lobortis ex, laoreet + sagittis lorem elit ut tellus. Aliquam ac + mauris at est accumsan fermentum. Quisque + accumsan commodo est ut ornare. Proin tempus + dolor urna, et gravida mauris semper eget. + Proin molestie eleifend sapien, ultricies + aliquet libero vehicula eget. Morbi sem nisi, + lobortis ut eros et, vestibulum imperdiet purus. + + In egestas sollicitudin tincidunt. Donec id + accumsan ipsum. Nunc blandit ex ac pretium + hendrerit. Donec blandit enim in tortor feugiat + malesuada. Proin justo ligula, euismod et purus a, + blandit lacinia eros. Phasellus gravida elit quis + lorem sodales vulputate. Suspendisse luctus diam sed + turpis efficitur, nec lobortis arcu eleifend. In + aliquet faucibus dui sit amet euismod. Aliquam facilisis + scelerisque eleifend. Quisque ut venenatis elit. Etiam + imperdiet, massa eget vestibulum gravida, arcu nunc + tincidunt sem, quis imperdiet erat nulla et ex. Praesent + nulla ex, maximus porta erat quis, sodales placerat arcu. + Pellentesque sollicitudin lobortis felis a aliquam. Morbi + cursus, urna in bibendum auctor, augue nisl pellentesque + nibh, ac consequat dui ipsum ut nisi. Sed auctor pretium + interdum.

+ placeholder +

this is a caption for an image

+

Lorem ipsum dolor sit amet, + consectetur adipiscing elit. + Maecenas sed ullamcorper purus, + eu blandit mi. Vivamus ac sapien + pellentesque, vulputate est ullamcorper, + scelerisque tellus. Phasellus vulputate, + est vel pellentesque dapibus, nisl felis + hendrerit ex, lacinia tincidunt lectus + quam vitae nunc. Vestibulum porta tempor + leo sit amet interdum. Aliquam erat volutpat. + Pellentesque diam ex, dapibus eget mi sed, + vulputate dictum lacus. Nam convallis nisl + tortor, sed varius ex convallis vestibulum. + Vestibulum eu placerat turpis, non gravida + eros. Curabitur aliquet, est eu molestie + congue, tortor urna lobortis ex, laoreet + sagittis lorem elit ut tellus. Aliquam ac + mauris at est accumsan fermentum. Quisque + accumsan commodo est ut ornare. Proin tempus + dolor urna, et gravida mauris semper eget. + Proin molestie eleifend sapien, ultricies + aliquet libero vehicula eget. Morbi sem nisi, + lobortis ut eros et, vestibulum imperdiet purus. + + In egestas sollicitudin tincidunt. Donec id + accumsan ipsum. Nunc blandit ex ac pretium + hendrerit. Donec blandit enim in tortor feugiat + malesuada. Proin justo ligula, euismod et purus a, + blandit lacinia eros. Phasellus gravida elit quis + lorem sodales vulputate. Suspendisse luctus diam sed + turpis efficitur, nec lobortis arcu eleifend. In + aliquet faucibus dui sit amet euismod. Aliquam facilisis + scelerisque eleifend. Quisque ut venenatis elit. Etiam + imperdiet, massa eget vestibulum gravida, arcu nunc + tincidunt sem, quis imperdiet erat nulla et ex. Praesent + nulla ex, maximus porta erat quis, sodales placerat arcu. + Pellentesque sollicitudin lobortis felis a aliquam. Morbi + cursus, urna in bibendum auctor, augue nisl pellentesque + nibh, ac consequat dui ipsum ut nisi. Sed auctor pretium + interdum.

+
+ +
+

I'm an article!

+

Lorem ipsum dolor sit amet, + consectetur adipiscing elit. + Maecenas sed ullamcorper purus, + eu blandit mi. Vivamus ac sapien + pellentesque, vulputate est ullamcorper, + scelerisque tellus. Phasellus vulputate, + est vel pellentesque dapibus, nisl felis + hendrerit ex, lacinia tincidunt lectus + quam vitae nunc. Vestibulum porta tempor + leo sit amet interdum. Aliquam erat volutpat. + Pellentesque diam ex, dapibus eget mi sed, + vulputate dictum lacus. Nam convallis nisl + tortor, sed varius ex convallis vestibulum. + Vestibulum eu placerat turpis, non gravida + eros. Curabitur aliquet, est eu molestie + congue, tortor urna lobortis ex, laoreet + sagittis lorem elit ut tellus. Aliquam ac + mauris at est accumsan fermentum. Quisque + accumsan commodo est ut ornare. Proin tempus + dolor urna, et gravida mauris semper eget. + Proin molestie eleifend sapien, ultricies + aliquet libero vehicula eget. Morbi sem nisi, + lobortis ut eros et, vestibulum imperdiet purus. + + In egestas sollicitudin tincidunt. Donec id + accumsan ipsum. Nunc blandit ex ac pretium + hendrerit. Donec blandit enim in tortor feugiat + malesuada. Proin justo ligula, euismod et purus a, + blandit lacinia eros. Phasellus gravida elit quis + lorem sodales vulputate. Suspendisse luctus diam sed + turpis efficitur, nec lobortis arcu eleifend. In + aliquet faucibus dui sit amet euismod. Aliquam facilisis + scelerisque eleifend. Quisque ut venenatis elit. Etiam + imperdiet, massa eget vestibulum gravida, arcu nunc + tincidunt sem, quis imperdiet erat nulla et ex. Praesent + nulla ex, maximus porta erat quis, sodales placerat arcu. + Pellentesque sollicitudin lobortis felis a aliquam. Morbi + cursus, urna in bibendum auctor, augue nisl pellentesque + nibh, ac consequat dui ipsum ut nisi. Sed auctor pretium + interdum.

+ placeholder +

this is a caption for an image

+

Lorem ipsum dolor sit amet, + consectetur adipiscing elit. + Maecenas sed ullamcorper purus, + eu blandit mi. Vivamus ac sapien + pellentesque, vulputate est ullamcorper, + scelerisque tellus. Phasellus vulputate, + est vel pellentesque dapibus, nisl felis + hendrerit ex, lacinia tincidunt lectus + quam vitae nunc. Vestibulum porta tempor + leo sit amet interdum. Aliquam erat volutpat. + Pellentesque diam ex, dapibus eget mi sed, + vulputate dictum lacus. Nam convallis nisl + tortor, sed varius ex convallis vestibulum. + Vestibulum eu placerat turpis, non gravida + eros. Curabitur aliquet, est eu molestie + congue, tortor urna lobortis ex, laoreet + sagittis lorem elit ut tellus. Aliquam ac + mauris at est accumsan fermentum. Quisque + accumsan commodo est ut ornare. Proin tempus + dolor urna, et gravida mauris semper eget. + Proin molestie eleifend sapien, ultricies + aliquet libero vehicula eget. Morbi sem nisi, + lobortis ut eros et, vestibulum imperdiet purus. + + In egestas sollicitudin tincidunt. Donec id + accumsan ipsum. Nunc blandit ex ac pretium + hendrerit. Donec blandit enim in tortor feugiat + malesuada. Proin justo ligula, euismod et purus a, + blandit lacinia eros. Phasellus gravida elit quis + lorem sodales vulputate. Suspendisse luctus diam sed + turpis efficitur, nec lobortis arcu eleifend. In + aliquet faucibus dui sit amet euismod. Aliquam facilisis + scelerisque eleifend. Quisque ut venenatis elit. Etiam + imperdiet, massa eget vestibulum gravida, arcu nunc + tincidunt sem, quis imperdiet erat nulla et ex. Praesent + nulla ex, maximus porta erat quis, sodales placerat arcu. + Pellentesque sollicitudin lobortis felis a aliquam. Morbi + cursus, urna in bibendum auctor, augue nisl pellentesque + nibh, ac consequat dui ipsum ut nisi. Sed auctor pretium + interdum.

+
+ +
+

I'm an article!

+

Lorem ipsum dolor sit amet, + consectetur adipiscing elit. + Maecenas sed ullamcorper purus, + eu blandit mi. Vivamus ac sapien + pellentesque, vulputate est ullamcorper, + scelerisque tellus. Phasellus vulputate, + est vel pellentesque dapibus, nisl felis + hendrerit ex, lacinia tincidunt lectus + quam vitae nunc. Vestibulum porta tempor + leo sit amet interdum. Aliquam erat volutpat. + Pellentesque diam ex, dapibus eget mi sed, + vulputate dictum lacus. Nam convallis nisl + tortor, sed varius ex convallis vestibulum. + Vestibulum eu placerat turpis, non gravida + eros. Curabitur aliquet, est eu molestie + congue, tortor urna lobortis ex, laoreet + sagittis lorem elit ut tellus. Aliquam ac + mauris at est accumsan fermentum. Quisque + accumsan commodo est ut ornare. Proin tempus + dolor urna, et gravida mauris semper eget. + Proin molestie eleifend sapien, ultricies + aliquet libero vehicula eget. Morbi sem nisi, + lobortis ut eros et, vestibulum imperdiet purus. + + In egestas sollicitudin tincidunt. Donec id + accumsan ipsum. Nunc blandit ex ac pretium + hendrerit. Donec blandit enim in tortor feugiat + malesuada. Proin justo ligula, euismod et purus a, + blandit lacinia eros. Phasellus gravida elit quis + lorem sodales vulputate. Suspendisse luctus diam sed + turpis efficitur, nec lobortis arcu eleifend. In + aliquet faucibus dui sit amet euismod. Aliquam facilisis + scelerisque eleifend. Quisque ut venenatis elit. Etiam + imperdiet, massa eget vestibulum gravida, arcu nunc + tincidunt sem, quis imperdiet erat nulla et ex. Praesent + nulla ex, maximus porta erat quis, sodales placerat arcu. + Pellentesque sollicitudin lobortis felis a aliquam. Morbi + cursus, urna in bibendum auctor, augue nisl pellentesque + nibh, ac consequat dui ipsum ut nisi. Sed auctor pretium + interdum.

+ placeholder +

this is a caption for an image

+

Lorem ipsum dolor sit amet, + consectetur adipiscing elit. + Maecenas sed ullamcorper purus, + eu blandit mi. Vivamus ac sapien + pellentesque, vulputate est ullamcorper, + scelerisque tellus. Phasellus vulputate, + est vel pellentesque dapibus, nisl felis + hendrerit ex, lacinia tincidunt lectus + quam vitae nunc. Vestibulum porta tempor + leo sit amet interdum. Aliquam erat volutpat. + Pellentesque diam ex, dapibus eget mi sed, + vulputate dictum lacus. Nam convallis nisl + tortor, sed varius ex convallis vestibulum. + Vestibulum eu placerat turpis, non gravida + eros. Curabitur aliquet, est eu molestie + congue, tortor urna lobortis ex, laoreet + sagittis lorem elit ut tellus. Aliquam ac + mauris at est accumsan fermentum. Quisque + accumsan commodo est ut ornare. Proin tempus + dolor urna, et gravida mauris semper eget. + Proin molestie eleifend sapien, ultricies + aliquet libero vehicula eget. Morbi sem nisi, + lobortis ut eros et, vestibulum imperdiet purus. + + In egestas sollicitudin tincidunt. Donec id + accumsan ipsum. Nunc blandit ex ac pretium + hendrerit. Donec blandit enim in tortor feugiat + malesuada. Proin justo ligula, euismod et purus a, + blandit lacinia eros. Phasellus gravida elit quis + lorem sodales vulputate. Suspendisse luctus diam sed + turpis efficitur, nec lobortis arcu eleifend. In + aliquet faucibus dui sit amet euismod. Aliquam facilisis + scelerisque eleifend. Quisque ut venenatis elit. Etiam + imperdiet, massa eget vestibulum gravida, arcu nunc + tincidunt sem, quis imperdiet erat nulla et ex. Praesent + nulla ex, maximus porta erat quis, sodales placerat arcu. + Pellentesque sollicitudin lobortis felis a aliquam. Morbi + cursus, urna in bibendum auctor, augue nisl pellentesque + nibh, ac consequat dui ipsum ut nisi. Sed auctor pretium + interdum.

+
+
+ + diff --git a/webpage-style.css b/webpage-style.css new file mode 100644 index 00000000..e487bdc0 --- /dev/null +++ b/webpage-style.css @@ -0,0 +1,97 @@ +html { + background-color: #03071e; +} + +p { + font-size: 1.2em; + color: #faa307; + text-align: center; +} + +.header { + background-color: #6a040f; +} +.nav-bar ul { + list-style-type: none; + margin: 0; + padding: 0; + background-color: #370617; + overflow: hidden; +} +.nav-bar ul li { + display: inline; + float: left; +} +.nav-bar ul li a { + display: block; + padding: 1em; + background-color: #370617; + text-align: center; + padding: 14px 16px; + text-decoration: none; +} +.nav-bar ul li a:hover { + background-color: #2c000f; +} + +.header h1 { + text-align: center; + color: #ffba08; + font-family: 'Bebas Neue', cursive; + text-decoration: overline; + letter-spacing: 0.1rem; +} +h2 { + font-family: 'Bebas Neue', cursive; + letter-spacing: 0.1em; +} +h3 { + font-family: 'Bebas Neue', cursive; + letter-spacing: 0.1em; +} +.header img { + /* sorts out centering of the cover image */ + display: block; + width: 80%; + height: auto; + margin-left: auto; + margin-right: auto; + + /* adds the border */ + border-style: solid; + border-color: #370617; + border-width: 0.5em; + border-radius: 0.6em; +} + +#article-section article:first-child { + background-color: #9d0208; /* place holder test color */ + +} + +.game-article { + padding: 1em; + background-color: #370617; + color: #faa307; +} +.game-article h2 { + text-align: center; + text-decoration: underline; +} +.game-article h3 { + text-decoration: overline; + text-align: center; +} +.game-article img { + /* sizes and centers the image */ + display: block; + max-width: 80%; + margin-left: auto; + margin-right: auto; + + /* adds the border */ + border-style: solid; + border-color: #370617; + border-width: 0.5em; + border-radius: 0.6em; +} \ No newline at end of file