CodeYourFuture · TomRafferty · Jul 14, 2021 · Jul 14, 2021 · Jul 14, 2021 · Jul 15, 2021
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,5 @@
+{
+    "cSpell.words": [
+        "preconnect"
+    ]
+}
diff --git a/images/edited/cover-img.png b/images/edited/cover-img.png
diff --git a/images/source/crash-bandicoot.png b/images/source/crash-bandicoot.png
diff --git a/images/source/fifa.jpg b/images/source/fifa.jpg
diff --git a/images/source/gran-turismo.jpg b/images/source/gran-turismo.jpg
diff --git a/images/source/left-4-dead.jpg b/images/source/left-4-dead.jpg
diff --git a/images/source/minecraft.jpg b/images/source/minecraft.jpg
diff --git a/images/source/resident-evil-4.jpg b/images/source/resident-evil-4.jpg
diff --git a/index.html b/index.html
@@ -6,17 +6,311 @@
       name="viewport"
       content="width=device-width, initial-scale=1, shrink-to-fit=no"
     />
-    <title>My Blog</title>
+    <title>Games! and Why They're Great!</title>
     <link
       href="//fonts.googleapis.com/css?family=Roboto:400,500,300"
       rel="stylesheet"
       type="text/css"
     />
-    <link rel="stylesheet" href="css/style.css" />
     <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
+
+    <!-- this links to the css stylesheet -->
+    <link rel="stylesheet" href="webpage-style.css">
+
+    <!-- this imports my header font -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
+
   </head>
   <body>
     <!-- Add your HTML markup here -->
     <!-- Remember: Use semantic HTML tags like <header>, <main>, <nav>, <footer>, <section> etc -->
+
+    <div class="header">
+      <!-- cover image -->
+      <img src="images\edited\cover-img.png" alt="cover image">
+      <!-- header -->
+      <h1>Games and Why They're Great!</h1>
+      <p>an insight to the game we play and why we can't get enough of them!</p>
+
+      <div class="nav-bar">
+        <ul>
+          <li><a href="#article-section">Article Section</a></li>
+          <li><a href="#footer">Footer/Legal</a></li>
+        </ul>
+      </div>
+
+    </div>
+
+    <section id="article-section">
+      <article class="game-article">
+        <h2>I'm an article!</h2>
+        <p>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.</p>
+        <img src="images\source\fifa.jpg" alt="placeholder">
+        <h3>this is a caption for an image</h3>
+        <p>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.</p>
+      </article>
+
+      <article class="game-article">
+        <h2>I'm an article!</h2>
+        <p>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.</p>
+        <img src="images\source\fifa.jpg" alt="placeholder">
+        <h3>this is a caption for an image</h3>
+        <p>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.</p>
+      </article>
+
+      <article class="game-article">
+        <h2>I'm an article!</h2>
+        <p>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.</p>
+        <img src="images\source\fifa.jpg" alt="placeholder">
+        <h3>this is a caption for an image</h3>
+        <p>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.</p>
+      </article>
+    </section>
   </body>
+
+  <footer id="footer">
+    <p>
+      All content belongs to it's respective owners (insert legal mumbo jumbo)
+      <br>
+      The cover image in the header is made by me but uses images I didn't capture.
+      <br>
+      Contact us : random_person@random_email.random
+    </p>
+  </footer>
 </html>