diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 00000000..6f3a2913
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
\ No newline at end of file
diff --git a/css/style.css b/css/style.css
index 75e9841e..0680049a 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,8 +1,198 @@
-/**
- * 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.
- * 
- */
+* {
+  font-family: "Courier New", Courier, monospace;
+  background-color: #000;
+  color: #fff;
+  scroll-behavior: smooth;
+  scroll-padding-top: 9.5rem;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+}
+
+/* Header styles */
+
+.logo {
+  width: 4rem;
+  height: 4rem;
+  margin-right: 0.625rem;
+  margin-top: 0.3125rem;
+}
+
+.header-section {
+  display: flex;
+  justify-content: space-between;
+  background-color: #000;
+  position: fixed;
+  width: 100%;
+  height: 7.95rem;
+}
+
+.site-info-container {
+  display: flex;
+  margin-left: 1.25rem;
+}
+
+.site-info-container p {
+  color: #baa309;
+  font-weight: bold;
+  font-size: 1.1rem;
+}
+
+.title-container > p {
+  font-style: italic;
+}
+
+.main-headng {
+  margin-top: 1.25rem;
+  margin-left: 0.625rem;
+}
+
+/* Nav styles */
+
+.page-navigation {
+  margin-top: 0.1875rem;
+  height: 7.75rem;
+}
+
+.page-navigation > ul {
+  display: flex;
+  justify-content: space-around;
+  list-style: none;
+  height: 2.3rem;
+}
+
+.page-navigation > ul > li {
+  text-decoration: none;
+  font-weight: bold;
+  color: #000;
+  margin: 0.5rem;
+  width: 100%;
+  height: 1.2rem;
+}
+
+.page-navigation > ul > li > a {
+  text-decoration: none;
+  font-weight: bold;
+  display: flex;
+  width: 10rem;
+  justify-content: center;
+  border: 2px solid #fff;
+  border-radius: 10px;
+}
+
+.page-navigation > ul > li:nth-last-child(1) > a {
+  background-color: #fff;
+  color: #000;
+}
+
+/* Nav hover styles */
+
+/*  I had so much fun figuring the next few rules out and there was 
+    definitely a eureka moment or two in there :) */
+.page-navigation > ul > li:first-child > a:focus,
+.page-navigation > ul > li:first-child > a:hover {
+  padding-bottom: 5.3rem;
+  border: 2px ridge #e6d408;
+  border-radius: 8px 8px 0 0;
+  border-bottom: 0;
+  transition: padding-bottom 1.2s ease-in;
+  color: #e6d408;
+}
+
+.page-navigation > ul > li:nth-child(2) > a:focus,
+.page-navigation > ul > li:nth-child(2) > a:hover {
+  padding-bottom: 5.4rem;
+  border: 2px ridge #cf7208;
+  border-radius: 8px 8px 0 0;
+  border-bottom: 0;
+  transition: padding-bottom 1.2s ease-in;
+  color: #cf7208;
+}
+
+.page-navigation > ul > li:nth-child(3) > a:focus,
+.page-navigation > ul > li:nth-child(3) > a:hover {
+  padding-bottom: 5.4rem;
+  border: 2px ridge #29af22;
+  border-radius: 8px 8px 0 0;
+  border-bottom: 0;
+  transition: padding-bottom 1.2s ease-in;
+  color: #29af22;
+}
+
+.page-navigation > ul > li:nth-last-child(1) > a:focus,
+.page-navigation > ul > li:nth-last-child(1) > a:hover {
+  background-color: #6aa2e4;
+  border: 2px solid #6aa2e4;
+  color: #fff;
+  transition: padding-bottom 1s ease-in;
+}
+
+/* Article styles */
+
+/*  Just a bit of fun to show the site information paragraph content is an actual selector 
+    and to play with the nth-last-type(), last-of-type and first-child Pseudo selectors 
+    which allow each article to be manipulated independently :) */
+.your-selector-to-the-latest-software-development article:nth-last-of-type(2) {
+  background-color: #000;
+  border: 2px ridge #cf7208;
+  border-radius: 4px;
+  margin: 0 0.625rem 0.625rem 0.625rem;
+}
+
+.your-selector-to-the-latest-software-development article:last-of-type {
+  background-color: #000;
+  border: 2px ridge #29af22;
+  border-radius: 4px;
+  margin: 0 0.625rem 0.625rem 0.625rem;
+}
+
+.your-selector-to-the-latest-software-development article:first-child {
+  border: 2px groove #e6d408;
+  margin: 0.625rem;
+  border-radius: 15px;
+}
+
+.article-section {
+  padding-top: 7.5rem;
+}
+
+article > p {
+  margin-left: 3.125rem;
+  margin-right: 3.125rem;
+  color: #d67f3c;
+}
+
+article > h2 {
+  margin-left: 0.625rem;
+  color: #6aa2e4;
+  font-size: 1.5rem;
+}
+
+.source-link {
+  font-size: 1rem;
+  color: #6bb590;
+  margin-left: 3.125rem;
+  text-decoration: none;
+}
+
+.article-semicolon {
+  font-size: 1.5rem;
+  font-weight: bold;
+  color: #fff;
+}
+
+/* Cosmetically closes the selector rule started at the top of the website */
+
+.main-curly-bracket {
+  color: #baa309;
+  font-weight: bold;
+}
+
+/* Footer styles */
+
+.footer-details {
+  text-align: center;
+  font-size: 0.8rem;
+}
diff --git a/images/CodeFavicon.ico b/images/CodeFavicon.ico
new file mode 100644
index 00000000..6af6186a
Binary files /dev/null and b/images/CodeFavicon.ico differ
diff --git a/images/logo.png b/images/logo.png
new file mode 100644
index 00000000..62eed0fd
Binary files /dev/null and b/images/logo.png differ
diff --git a/index.html b/index.html
index 67dfc7f5..0c1cf980 100644
--- a/index.html
+++ b/index.html
@@ -6,17 +6,351 @@
       name="viewport"
       content="width=device-width, initial-scale=1, shrink-to-fit=no"
     />
-    <title>My Blog</title>
-    <link
-      href="//fonts.googleapis.com/css?family=Roboto:400,500,300"
-      rel="stylesheet"
-      type="text/css"
+    <meta name="author" content="Andy Robertson" />
+    <meta
+      name="description"
+      content="THE BINARY BYTE website contains interesting articles relating to software development"
     />
+    <title>THE BINARY BYTE BLOG</title>
     <link rel="stylesheet" href="css/style.css" />
-    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
+    <link
+      rel="shortcut icon"
+      type="image/x-icon"
+      href="images/CodeFavicon.ico"
+    />
   </head>
   <body>
-    <!-- Add your HTML markup here -->
-    <!-- Remember: Use semantic HTML tags like <header>, <main>, <nav>, <footer>, <section> etc -->
+    <header class="header-section">
+      <div class="site-info-container">
+        <img
+          src="images/logo.png"
+          alt="Site logo showing a code symbol"
+          class="logo"
+        />
+        <div class="title-container">
+          <h1 class="main-headng">THE BINARY BYTE</h1>
+          <p>.your-selector-to-software-development ></p>
+        </div>
+      </div>
+      <nav class="page-navigation">
+        <ul>
+          <li><a href="#article-one">article one {</a></li>
+          <li><a href="#article-two">article two {</a></li>
+          <li><a href="#article-three">article three {</a></li>
+          <li>
+            <a class="get-in-touch" href="mailto:getInTouch@byte.com"
+              >Get in touch</a
+            >
+          </li>
+        </ul>
+      </nav>
+    </header>
+    <main class="your-selector-to-the-latest-software-development">
+      <section class="article-section">
+        <article>
+          <h2><a id="article-one"></a>html-css:</h2>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur
+            efficitur molestie erat, nec accumsan velit tempor interdum.
+            Pellentesque interdum nisl quis velit ullamcorper ullamcorper. Sed
+            eu auctor mi, vitae accumsan felis. Quisque facilisis quam eu
+            accumsan bibendum. Donec pretium justo tempus, finibus purus non,
+            euismod nulla. Etiam vel malesuada quam. Nunc id magna at risus
+            finibus consectetur a vel dui. Sed volutpat lectus felis, non
+            gravida ante rutrum vitae. Nullam vitae pellentesque diam. Morbi id
+            fermentum ex. In eu nibh dolor. Donec ac neque id neque tincidunt
+            ornare. Cras quis tincidunt ipsum. Pellentesque accumsan varius
+            pulvinar. Fusce erat odio, consectetur lobortis tincidunt vel,
+            tempor a elit. Nam venenatis ultrices risus, ac aliquam lacus
+            condimentum non. Duis eget lacus in felis feugiat rhoncus. Aenean
+            iaculis semper diam, a condimentum leo pulvinar a. Ut turpis arcu,
+            interdum eget lorem eget, congue sollicitudin sem. Cras imperdiet
+            gravida tellus, at congue sem imperdiet eu. Curabitur a scelerisque
+            arcu.
+          </p>
+          <p>
+            Aliquam eu ipsum fermentum massa suscipit dapibus sit amet sed
+            dolor. Donec imperdiet massa quis tellus tempor, vel accumsan sapien
+            suscipit. Quisque dui leo, congue eget nibh vel, aliquam ultricies
+            urna. Aenean at libero sed nibh feugiat finibus. Praesent pretium
+            sodales nibh. Donec faucibus magna a maximus porttitor. Vestibulum
+            laoreet arcu ex, sed vulputate sapien aliquet ac. Integer at enim
+            eget tortor efficitur commodo. Nunc venenatis nunc erat, nec
+            eleifend odio ultricies a. Phasellus blandit tellus in diam
+            efficitur, sit amet iaculis sapien scelerisque. Sed tempor arcu
+            arcu, commodo ultricies nulla semper sit amet. Nunc lacus enim,
+            auctor id malesuada ut, aliquet faucibus purus. Cras congue sagittis
+            elit vel dictum. Vestibulum pulvinar magna nec ligula ultrices, a
+            imperdiet urna mollis. Suspendisse lacinia, dolor tempor fringilla
+            euismod, nisl risus lacinia felis, vel porttitor tortor lectus sit
+            amet dui. Ut tempor, purus vel finibus viverra, lorem nibh tempus
+            tellus, nec porta ipsum ligula tincidunt tortor. Pellentesque mattis
+            scelerisque lacus nec vestibulum.
+          </p>
+          <p>
+            Pellentesque felis enim, accumsan in accumsan vitae, dapibus
+            suscipit est. In sollicitudin eget sem mattis euismod. Vestibulum
+            eleifend blandit massa vitae semper. Quisque hendrerit eros non
+            ultrices cursus. Mauris lobortis ligula eget ex faucibus, sed
+            sollicitudin nunc porttitor. Vestibulum rhoncus varius eros. Donec
+            dictum massa lacus, at elementum velit posuere non. Morbi maximus
+            augue ut mi faucibus ornare. Etiam vitae mauris vel dolor tincidunt
+            vulputate. Morbi sollicitudin diam nec neque maximus pulvinar.
+            Nullam at elementum quam, pharetra porttitor odio. Sed et sapien sit
+            amet lorem consequat luctus. Maecenas et dictum ex.
+          </p>
+          <a
+            href="https://syllabus.codeyourfuture.io/html-css/week-1/lesson"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="source-link"
+            >/*Reference Source*/</a
+          >
+          <p class="article-semicolon">;</p>
+        </article>
+        <article>
+          <h2>
+            <a id="article-two"></a>responsiveWebDesign-mediaQueries-flexbox:
+          </h2>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur
+            efficitur molestie erat, nec accumsan velit tempor interdum.
+            Pellentesque interdum nisl quis velit ullamcorper ullamcorper. Sed
+            eu auctor mi, vitae accumsan felis. Quisque facilisis quam eu
+            accumsan bibendum. Donec pretium justo tempus, finibus purus non,
+            euismod nulla. Etiam vel malesuada quam. Nunc id magna at risus
+            finibus consectetur a vel dui. Sed volutpat lectus felis, non
+            gravida ante rutrum vitae. Nullam vitae pellentesque diam. Morbi id
+            fermentum ex. In eu nibh dolor. Donec ac neque id neque tincidunt
+            ornare. Cras quis tincidunt ipsum. Pellentesque accumsan varius
+            pulvinar. Fusce erat odio, consectetur lobortis tincidunt vel,
+            tempor a elit. Nam venenatis ultrices risus, ac aliquam lacus
+            condimentum non. Duis eget lacus in felis feugiat rhoncus.
+          </p>
+          <p>
+            Aenean iaculis semper diam, a condimentum leo pulvinar a. Ut turpis
+            arcu, interdum eget lorem eget, congue sollicitudin sem. Cras
+            imperdiet gravida tellus, at congue sem imperdiet eu. Curabitur a
+            scelerisque arcu. Aliquam eu ipsum fermentum massa suscipit dapibus
+            sit amet sed dolor. Donec imperdiet massa quis tellus tempor, vel
+            accumsan sapien suscipit. Quisque dui leo, congue eget nibh vel,
+            aliquam ultricies urna. Aenean at libero sed nibh feugiat finibus.
+            Praesent pretium sodales nibh. Donec faucibus magna a maximus
+            porttitor. Vestibulum laoreet arcu ex, sed vulputate sapien aliquet
+            ac. Integer at enim eget tortor efficitur commodo. Nunc venenatis
+            nunc erat, nec eleifend odio ultricies a. Phasellus blandit tellus
+            in diam efficitur, sit amet iaculis sapien scelerisque. Sed tempor
+            arcu arcu, commodo ultricies nulla semper sit amet. Nunc lacus enim,
+            auctor id malesuada ut, aliquet faucibus purus.
+          </p>
+          <p>
+            Cras congue sagittis elit vel dictum. Vestibulum pulvinar magna nec
+            ligula ultrices, a imperdiet urna mollis. Suspendisse lacinia, dolor
+            tempor fringilla euismod, nisl risus lacinia felis, vel porttitor
+            tortor lectus sit amet dui. Ut tempor, purus vel finibus viverra,
+            lorem nibh tempus tellus, nec porta ipsum ligula tincidunt tortor.
+            Pellentesque mattis scelerisque lacus nec vestibulum. Pellentesque
+            felis enim, accumsan in accumsan vitae, dapibus suscipit est. In
+            sollicitudin eget sem mattis euismod. Vestibulum eleifend blandit
+            massa vitae semper. Quisque hendrerit eros non ultrices cursus.
+            Mauris lobortis ligula eget ex faucibus, sed sollicitudin nunc
+            porttitor. Vestibulum rhoncus varius eros.
+          </p>
+          <p>
+            Donec dictum massa lacus, at elementum velit posuere non. Morbi
+            maximus augue ut mi faucibus ornare. Etiam vitae mauris vel dolor
+            tincidunt vulputate. Morbi sollicitudin diam nec neque maximus
+            pulvinar. Nullam at elementum quam, pharetra porttitor odio. Sed et
+            sapien sit amet lorem consequat luctus. Maecenas et dictum ex.
+          </p>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur
+            efficitur molestie erat, nec accumsan velit tempor interdum.
+            Pellentesque interdum nisl quis velit ullamcorper ullamcorper. Sed
+            eu auctor mi, vitae accumsan felis. Quisque facilisis quam eu
+            accumsan bibendum. Donec pretium justo tempus, finibus purus non,
+            euismod nulla. Etiam vel malesuada quam. Nunc id magna at risus
+            finibus consectetur a vel dui. Sed volutpat lectus felis, non
+            gravida ante rutrum vitae. Nullam vitae pellentesque diam. Morbi id
+            fermentum ex. In eu nibh dolor. Donec ac neque id neque tincidunt
+            ornare. Cras quis tincidunt ipsum. Pellentesque accumsan varius
+            pulvinar. Fusce erat odio, consectetur lobortis tincidunt vel,
+            tempor a elit. Nam venenatis ultrices risus, ac aliquam lacus
+            condimentum non. Duis eget lacus in felis feugiat rhoncus. Aenean
+            iaculis semper diam, a condimentum leo pulvinar a.
+          </p>
+          <p>
+            Mauris lobortis ligul eget ex faucibus, sed sollicitudin nunc
+            porttitor. Vestibulum rhoncus varius eros. Donec dictum massa lacus,
+            at elementum velit posuere non. Morbi maximus augue ut mi faucibus
+            ornare. Etiam vitae mauris vel dolor tincidunt vulputate. Morbi
+            sollicitudin diam nec neque maximus pulvinar. Nullam at elementum
+            quam, pharetra porttitor odio. Sed et sapien sit amet lorem
+            consequat luctus. Maecenas et dictum ex.
+          </p>
+          <a
+            href="https://syllabus.codeyourfuture.io/html-css/week-2/lesson"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="source-link"
+            >/*Reference Source*/</a
+          >
+          <p class="article-semicolon">;</p>
+        </article>
+        <article>
+          <h2><a id="article-three"></a>forms-frameworks:</h2>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur
+            efficitur molestie erat, nec accumsan velit tempor interdum.
+            Pellentesque interdum nisl quis velit ullamcorper ullamcorper. Sed
+            eu auctor mi, vitae accumsan felis. Quisque facilisis quam eu
+            accumsan bibendum. Donec pretium justo tempus, finibus purus non,
+            euismod nulla. Etiam vel malesuada quam. Nunc id magna at risus
+            finibus consectetur a vel dui. Sed volutpat lectus felis, non
+            gravida ante rutrum vitae. Nullam vitae pellentesque diam. Morbi id
+            fermentum ex. In eu nibh dolor. Donec ac neque id neque tincidunt
+            ornare. Cras quis tincidunt ipsum. Pellentesque accumsan varius
+            pulvinar. Fusce erat odio, consectetur lobortis tincidunt vel,
+            tempor a elit. Nam venenatis ultrices risus, ac aliquam lacus
+            condimentum non. Duis eget lacus in felis feugiat rhoncus. Aenean
+            iaculis semper diam, a condimentum leo pulvinar a.
+          </p>
+          <p>
+            Ut turpis arcu, interdum eget lorem eget, congue sollicitudin sem.
+            Cras imperdiet gravida tellus, at congue sem imperdiet eu. Curabitur
+            a scelerisque arcu. Aliquam eu ipsum fermentum massa suscipit
+            dapibus sit amet sed dolor. Donec imperdiet massa quis tellus
+            tempor, vel accumsan sapien suscipit. Quisque dui leo, congue eget
+            nibh vel, aliquam ultricies urna. Aenean at libero sed nibh feugiat
+            finibus. Praesent pretium sodales nibh. Donec faucibus magna a
+            maximus porttitor. Vestibulum laoreet arcu ex, sed vulputate sapien
+            aliquet ac. Integer at enim eget tortor efficitur commodo. Nunc
+            venenatis nunc erat, nec eleifend odio ultricies a. Phasellus
+            blandit tellus in diam efficitur, sit amet iaculis sapien
+            scelerisque.
+          </p>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur
+            efficitur molestie erat, nec accumsan velit tempor interdum.
+            Pellentesque interdum nisl quis velit ullamcorper ullamcorper. Sed
+            eu auctor mi, vitae accumsan felis. Quisque facilisis quam eu
+            accumsan bibendum. Donec pretium justo tempus, finibus purus non,
+            euismod nulla. Etiam vel malesuada quam. Nunc id magna at risus
+            finibus consectetur a vel dui. Sed volutpat lectus felis, non
+            gravida ante rutrum vitae. Nullam vitae pellentesque diam. Morbi id
+            fermentum ex. In eu nibh dolor. Donec ac neque id neque tincidunt
+            ornare. Cras quis tincidunt ipsum. Pellentesque accumsan varius
+            pulvinar. Fusce erat odio, consectetur lobortis tincidunt vel,
+            tempor a elit. Nam venenatis ultrices risus, ac aliquam lacus
+            condimentum non. Duis eget lacus in felis feugiat rhoncus. Aenean
+            iaculis semper diam, a condimentum leo pulvinar a.
+          </p>
+          <p>
+            Ut turpis arcu, interdum eget lorem eget, congue sollicitudin sem.
+            Cras imperdiet gravida tellus, at congue sem imperdiet eu. Curabitur
+            a scelerisque arcu. Aliquam eu ipsum fermentum massa suscipit
+            dapibus sit amet sed dolor. Donec imperdiet massa quis tellus
+            tempor, vel accumsan sapien suscipit. Quisque dui leo, congue eget
+            nibh vel, aliquam ultricies urna. Aenean at libero sed nibh feugiat
+            finibus. Praesent pretium sodales nibh. Donec faucibus magna a
+            maximus porttitor. Vestibulum laoreet arcu ex, sed vulputate sapien
+            aliquet ac. Integer at enim eget tortor efficitur commodo. Nunc
+            venenatis nunc erat, nec eleifend odio ultricies a. Phasellus
+            blandit tellus in diam efficitur, sit amet iaculis sapien
+            scelerisque.
+          </p>
+          <p>
+            Sed tempor arcu arcu, commodo ultricies nulla semper sit amet. Nunc
+            lacus enim, auctor id malesuada ut, aliquet faucibus purus. Cras
+            congue sagittis elit vel dictum. Vestibulum pulvinar magna nec
+            ligula ultrices, a imperdiet urna mollis. Suspendisse lacinia, dolor
+            tempor fringilla euismod, nisl risus lacinia felis, vel porttitor
+            tortor lectus sit amet dui. Ut tempor, purus vel finibus viverra,
+            lorem nibh tempus tellus, nec porta ipsum ligula tincidunt tortor.
+            Pellentesque mattis scelerisque lacus nec vestibulum. Pellentesque
+            felis enim, accumsan in accumsan vitae, dapibus suscipit est. In
+            sollicitudin eget sem mattis euismod. Vestibulum eleifend blandit
+            massa vitae semper. Quisque hendrerit eros non ultrices cursus.
+          </p>
+          <p>
+            Mauris lobortis ligul eget ex faucibus, sed sollicitudin nunc
+            porttitor. Vestibulum rhoncus varius eros. Donec dictum massa lacus,
+            at elementum velit posuere non. Morbi maximus augue ut mi faucibus
+            ornare. Etiam vitae mauris vel dolor tincidunt vulputate. Morbi
+            sollicitudin diam nec neque maximus pulvinar. Nullam at elementum
+            quam, pharetra porttitor odio. Sed et sapien sit amet lorem
+            consequat luctus. Maecenas et dictum ex.
+          </p>
+          <p>
+            Sed tempor arcu arcu, commodo ultricies nulla semper sit amet. Nunc
+            lacus enim, auctor id malesuada ut, aliquet faucibus purus. Cras
+            congue sagittis elit vel dictum. Vestibulum pulvinar magna nec
+            ligula ultrices, a imperdiet urna mollis. Suspendisse lacinia, dolor
+            tempor fringilla euismod, nisl risus lacinia felis, vel porttitor
+            tortor lectus sit amet dui. Ut tempor, purus vel finibus viverra,
+            lorem nibh tempus tellus, nec porta ipsum ligula tincidunt tortor.
+            Pellentesque mattis scelerisque lacus nec vestibulum. Pellentesque
+            felis enim, accumsan in accumsan vitae, dapibus suscipit est. In
+            sollicitudin eget sem mattis euismod. Vestibulum eleifend blandit
+            massa vitae semper. Quisque hendrerit eros non ultrices cursus.
+          </p>
+          <p>
+            Mauris lobortis ligul eget ex faucibus, sed sollicitudin nunc
+            porttitor. Vestibulum rhoncus varius eros. Donec dictum massa lacus,
+            at elementum velit posuere non. Morbi maximus augue ut mi faucibus
+            ornare. Etiam vitae mauris vel dolor tincidunt vulputate. Morbi
+            sollicitudin diam nec neque maximus pulvinar. Nullam at elementum
+            quam, pharetra porttitor odio. Sed et sapien sit amet lorem
+            consequat luctus. Maecenas et dictum ex.
+          </p>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur
+            efficitur molestie erat, nec accumsan velit tempor interdum.
+            Pellentesque interdum nisl quis velit ullamcorper ullamcorper. Sed
+            eu auctor mi, vitae accumsan felis. Quisque facilisis quam eu
+            accumsan bibendum. Donec pretium justo tempus, finibus purus non,
+            euismod nulla. Etiam vel malesuada quam. Nunc id magna at risus
+            finibus consectetur a vel dui. Sed volutpat lectus felis, non
+            gravida ante rutrum vitae. Nullam vitae pellentesque diam. Morbi id
+            fermentum ex. In eu nibh dolor. Donec ac neque id neque tincidunt
+            ornare. Cras quis tincidunt ipsum. Pellentesque accumsan varius
+            pulvinar. Fusce erat odio, consectetur lobortis tincidunt vel,
+            tempor a elit. Nam venenatis ultrices risus, ac aliquam lacus
+            condimentum non. Duis eget lacus in felis feugiat rhoncus. Aenean
+            iaculis semper diam, a condimentum leo pulvinar a.
+          </p>
+          <p>
+            Ut turpis arcu, interdum eget lorem eget, congue sollicitudin sem.
+            Cras imperdiet gravida tellus, at congue sem imperdiet eu. Curabitur
+            a scelerisque arcu. Aliquam eu ipsum fermentum massa suscipit
+            dapibus sit amet sed dolor. Donec imperdiet massa quis tellus
+            tempor, vel accumsan sapien suscipit. Quisque dui leo, congue eget
+            nibh vel, aliquam ultricies urna. Aenean at libero sed nibh feugiat
+            finibus. Praesent pretium sodales nibh. Donec faucibus magna a
+            maximus porttitor. Vestibulum laoreet arcu ex, sed vulputate sapien
+            aliquet ac. Integer at enim eget tortor efficitur commodo. Nunc
+            venenatis nunc erat, nec eleifend odio ultricies a. Phasellus
+            blandit tellus in diam efficitur, sit amet iaculis sapien
+            scelerisque.
+          </p>
+          <a
+            href="https://syllabus.codeyourfuture.io/html-css/week-3/lesson"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="source-link"
+            >/*Reference Source*/</a
+          >
+          <p class="article-semicolon">;</p>
+        </article>
+        <p class="main-curly-bracket">};</p>
+      </section>
+    </main>
+    <footer class="footer-details">
+      <p>
+        © All rights reserved | CYF Student 2021 | Send website
+        <a href="mailto:siteFeedback@byte.com">feedback</a>
+      </p>
+      <address>Based in Glasgow</address>
+    </footer>
   </body>
 </html>