diff --git a/Starter/assets/css/main.css b/Starter/assets/css/main.css
index 7bbec97..ca6081e 100644
--- a/Starter/assets/css/main.css
+++ b/Starter/assets/css/main.css
@@ -1,61 +1,863 @@
 /* Import font */
-@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap");
 /* Custom properties */
-:root{
-    --light-color: #fff;
-    --light-color-alt: #afb6cd;
-    --primary-background-color: #131417;
-    --secondary-background-color: #252830;
-    --hover-light-color: var(--light-color);
-    --hover-dark-color: var(--primary-background-color);
-    --gradient-color: linear-gradient(
-        115deg,#4fcf70,#fad648,#a767e5,#12bcfe,#44ce7b);
-    --transparent-light-color: rgba(255,255,255,.05);
-    --transparent-dark-color: rgba(0,0,0,.75);
-    --font-family: 'Poppins', sans-serif;
-    --font-size-xsm: 1.2rem;
-    --font-size-sm: 1.6rem;
-    --font-size-md: 2.4rem;
-    --font-size-lg: 3rem;
-    --font-size-xl: 4rem;
-    --gap: 2rem;
-    --margin-sm: 2rem;
-    --margin-md: 3rem;
-    --item-min-height-sm: 20rem;
-    --item-min-height-md: 30rem;
+:root {
+  --light-color: #fff;
+  --light-color-alt: #afb6cd;
+  --primary-background-color: #131417;
+  --secondary-background-color: #252830;
+  --hover-light-color: var(--light-color);
+  --hover-dark-color: var(--primary-background-color);
+  --gradient-color: linear-gradient(
+    115deg,
+    #4fcf70,
+    #fad648,
+    #a767e5,
+    #12bcfe,
+    #44ce7b
+  );
+  --transparent-light-color: rgba(255, 255, 255, 0.05);
+  --transparent-dark-color: rgba(0, 0, 0, 0.75);
+  --font-family: "Poppins", sans-serif;
+  --font-size-xsm: 1.2rem;
+  --font-size-sm: 1.6rem;
+  --font-size-md: 2.4rem;
+  --font-size-lg: 3rem;
+  --font-size-xl: 4rem;
+  --gap: 2rem;
+  --margin-sm: 2rem;
+  --margin-md: 3rem;
+  --item-min-height-sm: 20rem;
+  --item-min-height-md: 30rem;
 }
 /* Base styles */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+html {
+  /* font-size: 10px; */
+  font-size: 62.5%;
+}
+
+body {
+  font-family: var(--font-family);
+  font-size: var(--font-size-sm);
+  color: var(--light-color-alt);
+  background-color: var(--primary-background-color);
+  letter-spacing: 1px;
+  transition: background-color 0.25s, color 0.25s;
+}
+
+a {
+  text-decoration: none;
+  color: inherit;
+}
 
+img {
+  max-width: 100%;
+  display: block;
+}
+
+ul {
+  list-style: none;
+}
+
+input,
+button {
+  font: inherit;
+  color: inherit;
+  background-color: transparent;
+  outline: none;
+}
+
+i {
+  font-size: var(--font-size-md);
+}
 /* Theme color change */
+body.light-theme {
+  --light-color: #3d3d3d;
+  --light-color-alt: rgba(0, 0, 0, 0.6);
+  --primary-background-color: #fff;
+  --secondary-background-color: #f1f1f1;
+  --hover-light-color: #fff;
+  --transparent-dark-color: #252830;
+  --transparent-light-color: rgba(0, 0, 0, 0.1);
+}
 
 /* Reusable classes */
+.container {
+  max-width: 160rem;
+  margin: 0 auto;
+  padding: 0 1.5rem;
+}
+
+.place-items-center {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.screen-sm-hidden {
+  display: none;
+}
+
+.d-grid {
+  display: grid;
+}
+
+.section {
+  padding-block: 5rem;
+}
 
 /* Header */
+.header {
+  background-color: var(--secondary-background-color);
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 999;
+}
+
+.navbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-block: 1.5rem;
+}
+
+.logo {
+  font-size: var(--font-size-md);
+  color: var(--light-color);
+}
+
+.menu {
+  position: absolute;
+  top: 8.5rem;
+  right: 1.5rem;
+  width: 23rem;
+  padding: 1.5rem;
+  background-color: var(--secondary-background-color);
+  opacity: 0;
+  transform: scale(0);
+  transition: opacity 0.25s ease-in;
+}
+
+.list {
+  display: flex;
+  align-items: center;
+  gap: var(--gap);
+}
+
+.menu > .list {
+  flex-direction: column;
+}
+
+.list-link.current {
+  color: var(--light-color);
+}
+
+.close-menu-icon {
+  display: none;
+}
+
+.btn {
+  cursor: pointer;
+  border: none;
+}
+
+.list-link:hover,
+.btn:hover,
+.btn:hover span {
+  color: var(--light-color);
+}
+
+.moon-icon {
+  display: none;
+}
+
+.light-theme .sun-icon {
+  display: none;
+}
+
+.light-theme .moon-icon {
+  display: block;
+}
 
 /* Header JavaScript Styles */
+.header.active {
+  box-shadow: 0 1px 0.5rem var(--transparent-light-color);
+}
+
+.menu.active {
+  box-shadow: 1px 1px 1rem var(--transparent-light-color);
+  opacity: 1;
+  transform: scale(1);
+}
+
+.menu-toggle-icon.active .open-menu-icon {
+  display: none;
+}
+
+.menu-toggle-icon.active .close-menu-icon {
+  display: block;
+}
 
 /* Search */
+.search-form-container {
+  width: 100%;
+  max-width: 100%;
+  height: 100vh;
+  background-color: var(--primary-background-color);
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 9999;
+  display: flex;
+  opacity: 0;
+  transform: scale(0);
+  transition: opacity 0.5s;
+}
+
+.form-container-inner {
+  margin: auto;
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap);
+  text-align: center;
+}
+
+.form {
+  display: flex;
+  justify-content: center;
+}
+
+.form-input,
+.form-btn {
+  display: inline-block;
+  border: 2px solid var(--secondary-background-color);
+  padding: 1.5rem;
+}
+
+.form-input {
+  border-right: none;
+  width: 100%;
+}
+.form-btn {
+  margin-left: -0.5rem;
+  border-left: none;
+  background-color: var(--secondary-background-color);
+  width: 8rem;
+}
+
+.form-note {
+  font-size: var(--font-size-xsm);
+  align-self: flex-end;
+}
+
+.form-close-btn {
+  position: absolute;
+  top: 1.5rem;
+  right: 1.5rem;
+  border: 2px solid var(--secondary-background-color);
+  width: 4rem;
+  height: 4rem;
+}
 
 /* Form JavaScript styles */
+.search-form-container.active {
+  opacity: 1;
+  transform: scale(1);
+}
 
 /* Featured articles */
+.featured-articles {
+  padding-block: 2rem;
+}
+
+.section-header-offset {
+  margin-top: 7.4rem;
+}
+
+.featured-articles-container,
+.featured-content {
+  gap: var(--gap);
+}
+
+.headline-banner {
+  background-color: var(--secondary-background-color);
+  display: flex;
+  align-items: center;
+  gap: var(--gap);
+  font-size: var(--font-size-xsm);
+}
+
+.headline {
+  color: var(--light-color);
+  font-size: 1rem;
+  text-align: center;
+  padding: 0.4rem;
+  height: 100%;
+  text-transform: uppercase;
+}
+
+.headline span {
+  height: inherit;
+}
+
+.fancy-border {
+  position: relative;
+  overflow: hidden;
+}
+
+.fancy-border::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 200%;
+  height: 100%;
+  background: var(--gradient-color);
+  background-size: 50% 50%;
+  z-index: 5;
+}
+
+.fancy-border span {
+  position: relative;
+  z-index: 10;
+  display: inline-flex;
+  padding: 0.6rem 1.5rem;
+  background-color: var(--secondary-background-color);
+}
+
+.article {
+  position: relative;
+  min-height: var(--item-min-height-md);
+}
+
+.article-image {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: transform 0.2s;
+}
+
+.article-category {
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+  padding: 1rem;
+  font-size: 1rem;
+  background-color: var(--primary-background-color);
+  color: var(--light-color);
+  text-transform: uppercase;
+  z-index: 10;
+}
+
+.article-data-container {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  padding: 2rem 1.5rem;
+  background-color: var(--transparent-light-color);
+  z-index: 10;
+  width: 100%;
+  transition: background-color 0.5s;
+}
+
+.article:hover .article-data-container {
+  background-color: var(--hover-dark-color);
+  color: var(--hover-light-color);
+}
+
+.article:hover .article-data-spacer {
+  background-color: var(--hover-light-color);
+}
+.article:hover .article-title {
+  color: var(--hover-light-color);
+}
+.article-data {
+  display: flex;
+  align-items: center;
+  gap: var(--gap);
+  font-size: var(--font-size-xsm);
+  margin-bottom: 1rem;
+}
+
+.article-data-spacer {
+  width: 0.5rem;
+  height: 0.5rem;
+  background-color: var(--light-color-alt);
+  transform: rotate(45deg);
+}
+
+.title {
+  color: var(--light-color);
+}
+
+.article-title {
+  font-size: var(--font-size-md);
+}
 
 /* Featured articles - Sidebar */
+.sidebar {
+  background-color: var(--secondary-background-color);
+  padding: 2.5rem;
+}
+
+.trending-news-box {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap);
+  padding-block: 2rem;
+  border-bottom: 1px solid var(--transparent-light-color);
+}
+
+.trending-news-box:last-of-type {
+  border-bottom: none;
+}
+
+.trending-news-image-box {
+  position: relative;
+  width: 100%;
+  height: var(--item-min-height-sm);
+}
+
+.featured-content-title {
+  font-size: var(--font-size-md);
+  text-align: center;
+  padding: 1rem;
+}
+
+.trending-number {
+  position: absolute;
+  top: 1rem;
+  left: 1rem;
+  z-index: 15;
+  width: 3rem;
+  height: 3rem;
+  background-color: var(--secondary-background-color);
+  color: var(--light-color);
+  border-radius: 50%;
+}
+
+.trending-news-data {
+  padding-inline: 1rem;
+}
+
+.trending-news-data .article-title {
+  font-size: var(--font-size-sm);
+}
+
+.trending-news-box:hover .article-title {
+  color: var(--light-color-alt);
+}
 
 /* Quick read */
+.section-title {
+  position: relative;
+  font-size: var(--font-size-md);
+  margin-bottom: 6rem;
+}
+
+.section-title::before {
+  content: attr(data-name);
+  font-size: var(--font-size-lg);
+  text-transform: uppercase;
+  position: absolute;
+  top: 1.5rem;
+  left: 2rem;
+  opacity: 0.1;
+}
+
+.article .swiper-slide {
+  height: 40rem;
+}
 
 /* Quick read - Swiper */
+.swiper-wraper {
+  height: auto;
+}
+
+.swiper-controls {
+  width: 3.5rem;
+  height: 3.5rem;
+  background-color: var(--secondary-background-color);
+}
 
+.swiper-controls::after {
+  font-size: 1.6rem;
+  color: var(--light-color);
+}
+
+.swiper-pagination {
+  bottom: 0.5rem !important;
+}
+
+.swiper-pagination-bullet {
+  background-color: var(--light-color);
+}
 /* Older posts */
+.older-posts-grid-wrapper {
+  gap: var(--gap);
+}
+
+.older-posts,
+.article .older-posts-article-image-wrapper {
+  min-height: var(--item-min-height-sm);
+}
 
+.older-posts .article {
+  background-color: var(--secondary-background-color);
+}
+
+.older-posts-article-image-wrapper {
+  position: relative;
+}
+
+.older-posts-grid-wrapper .article-data-container {
+  position: static;
+  background-color: transparent;
+}
+
+.older-posts-grid-wrapper .article-title {
+  margin-bottom: var(--margin-sm);
+}
+
+.see-more-container {
+  margin-top: var(--margin-md);
+}
+
+.see-more-btn {
+  text-transform: uppercase;
+}
+
+.see-more-btn i {
+  transition: transform 0.25s;
+}
+
+.see-more-btn:hover i {
+  transform: translateX(0.5rem);
+}
 /* Popular tags */
+.popular-tags-container {
+  gap: var(--gap);
+}
+
+.popular-tags-container .article {
+  min-height: var(--item-min-height-sm);
+  overflow: hidden;
+}
+
+.tag-name {
+  position: absolute;
+  z-index: 10;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background-color: var(--transparent-dark-color);
+
+  padding: 1rem 2rem;
+}
+
+.popular-tags-container .article:hover .tag-name {
+  color: var(--hover-light-color);
+}
+
+.popular-tags-container .article:hover .article-image {
+  transform: scale(1.05);
+}
 
 /* Newsletter */
+.newsletter {
+  padding-bottom: 6rem;
+}
+
+.newsletter-title {
+  font-size: var(--font-size-lg);
+}
+
+.newsletter-description {
+  margin-bottom: 3rem;
+}
 
 /* Footer */
+.footer {
+  background-color: var(--secondary-background-color);
+}
+
+.footer-container {
+  gap: var(--gap);
+}
+
+.company-data {
+  display: flex;
+  flex-direction: column;
+  order: 1;
+}
+
+.company-description {
+  margin-block: var(--margin-sm);
+  max-width: 75%;
+}
+
+.social-links {
+  margin-bottom: var(--margin-md);
+}
+
+.copyright-notice {
+  opacity: 0.8;
+}
+
+.footer-list {
+  flex-direction: column;
+  align-items: flex-start;
+}
 
+.footer-title {
+  font-size: var(--font-size-md);
+  text-transform: uppercase;
+  margin-bottom: var(--margin-sm);
+}
 /* Scrollbar styles */
+::-webkit-scrollbar {
+  width: 1rem;
+}
+
+::-webkit-scrollbar-track {
+  background-color: #f1f1f1;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: #3f4254;
+}
+::-webkit-scrollbar-thumb:hover {
+  background-color: #2e303b;
+}
 
 /* Blog post */
+.blog-post {
+  padding-bottom: 5rem;
+}
 
-/* Media queries */
\ No newline at end of file
+.blog-post-data {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  padding-block: 2.5rem;
+}
+
+.blog-post-title {
+  font-size: clamp(3rem, 5vw, 6rem);
+}
+
+.blog-post-data .article-data {
+  margin-bottom: 2.5rem;
+}
+
+.blog-post-data img {
+  width: 100%;
+  height: var(--item-min-height-sm);
+  object-fit: cover;
+  object-position: center 10%;
+}
+
+.blog-post-container .container {
+  max-width: 90rem;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap);
+}
+
+.quote {
+  background-color: var(--secondary-background-color);
+  padding: 2.5rem;
+}
+
+.quote p {
+  font-style: italic;
+}
+
+.quote span i {
+  font-size: 3.5rem;
+}
+
+.author {
+  margin-top: 5rem;
+  gap: var(--gap);
+  background-color: var(--secondary-background-color);
+}
+
+.author-image-box {
+  position: relative;
+  height: var(--item-min-height-sm);
+}
+
+.author-about {
+  padding: 1.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.author-name {
+  color: var(--light-color);
+  font-weight: 400;
+}
+
+.author p {
+  max-width: 50rem;
+  margin-bottom: 1rem;
+}
+
+.author-about .social-links {
+  margin-top: auto;
+  margin-bottom: 0;
+}
+
+/* Media queries */
+
+@media screen and (min-width: 700px) {
+  .trending-news-box {
+    flex-direction: row;
+    align-items: center;
+  }
+  .trending-news-image-box {
+    width: 50%;
+  }
+
+  .trending-news-data {
+    margin: auto;
+    text-align: center;
+  }
+
+  .newsletter-description {
+    max-width: 40rem;
+  }
+  .popular-tags-container,
+  .footer-container {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  .form-container-inner {
+    align-items: center;
+  }
+  .company-data {
+    order: 0;
+  }
+  .author {
+    grid-template-columns: 25rem 1fr;
+  }
+}
+
+@media screen and (min-width: 768px) {
+  .featured-content {
+    grid-template-columns: repeat(4, 1fr);
+    grid-template-rows: 5rem repeat(4, 1fr);
+  }
+  .headline-banner {
+    grid-column: 1/-1;
+    font-size: var(--font-size-sm);
+  }
+  .featured-article {
+    grid-column: 3/-1;
+    grid-row: 2/4;
+  }
+  .featured-article-1 {
+    grid-column: 1/3;
+  }
+  .featured-article-3 {
+    grid-column: 1/-1;
+    grid-row: 4/6;
+  }
+  .older-posts .article {
+    grid-template-columns: 25rem 1fr;
+  }
+  .older-posts-article-image-wrapper {
+    height: auto;
+  }
+  .blog-post-data img {
+    height: var(--item-min-height-md);
+  }
+}
+
+@media screen and (min-width: 1024px) {
+  .menu {
+    position: initial;
+    width: initial;
+    padding: initial;
+    background-color: transparent;
+    opacity: initial;
+    transform: initial;
+  }
+
+  .menu > .list {
+    flex-direction: row;
+  }
+
+  .screen-lg-hidden {
+    display: none;
+  }
+
+  .screen-sm-hidden {
+    display: block;
+  }
+
+  .sign-up-btn {
+    padding: 0.4rem;
+  }
+  .btn.fancy-border:hover::before {
+    animation: animate_border 0.75s linear infinite;
+  }
+  @keyframes animate_border {
+    to {
+      transform: translateX(-50%);
+    }
+  }
+  .featured-articles-container {
+    grid-template-columns: 1fr 40rem;
+  }
+  .trending-news-image-box {
+    width: 10rem;
+    height: 10rem;
+  }
+  .popular-tags-container {
+    grid-template-columns: repeat(3, 1fr);
+  }
+  .footer-container {
+    grid-template-columns: repeat(5, 1fr);
+  }
+  .company-data {
+    grid-column: span 2;
+  }
+  .company-description {
+    max-width: 85%;
+  }
+  .copyright-notice {
+    margin-top: auto;
+  }
+  .blog-post-data img {
+    height: 40rem;
+  }
+}
+
+@media screen and (min-width: 1200px) {
+  .older-posts-grid-wrapper {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media screen and (min-width: 1500px) {
+  .featured-article {
+    grid-column: 3/-1;
+  }
+  .featured-article-1 {
+    grid-column: 1/3;
+    grid-row: 2/-1;
+  }
+}
diff --git a/Starter/assets/js/main.js b/Starter/assets/js/main.js
index 9bee93a..b4e053f 100644
--- a/Starter/assets/js/main.js
+++ b/Starter/assets/js/main.js
@@ -1,13 +1,90 @@
 // Grab elements
+const selectElement = (selector) => {
+  const element = document.querySelector(selector);
+  if (element) return element;
+  throw new Error(
+    `Something Went Wrong, make sure that ${selector} exists or its typed correctly`
+  );
+};
 
 //Nav styles on scroll
+const scrollHeader = () => {
+  const headerElement = selectElement("#header");
+  if (this.scrollY >= 15) {
+    headerElement.classList.add("active");
+  } else {
+    headerElement.classList.remove("active");
+  }
+};
+
+window.addEventListener("scroll", scrollHeader);
 
 // Open menu & search pop-up
+const menuToggleIcon = selectElement("#menu-toggle-btn");
+
+const toggleMenu = () => {
+  const mobileMenu = selectElement("#menu");
+  mobileMenu.classList.toggle("active");
+};
+
+menuToggleIcon.addEventListener("click", toggleMenu);
 
 // Open/Close search form popup
+const formOpenBtn = selectElement("#search-icon");
+const formCloseBtn = selectElement("#form-close-btn");
+const searchForm = selectElement("#search-form-container");
 
+formOpenBtn.addEventListener("click", () => searchForm.classList.add("active"));
+formCloseBtn.addEventListener("click", () =>
+  searchForm.classList.remove("active")
+);
 // -- Close the search form popup on ESC keypress
-
+window.addEventListener("keyup", (e) => {
+  if (e.key === "Escape") {
+    searchForm.classList.remove("active");
+  }
+});
 // Switch theme/add to local storage
+const bodyElement = document.body;
+const themeToggleBtn = selectElement("#theme-toggle-btn");
+const currentTheme = localStorage.getItem("currentTheme");
+
+if (currentTheme) {
+  bodyElement.classList.add("light-theme");
+}
+themeToggleBtn.addEventListener("click", () => {
+  bodyElement.classList.toggle("light-theme");
+
+  if (bodyElement.classList.contains("light-theme")) {
+    localStorage.setItem("currentTheme", "themeActive");
+  } else {
+    localStorage.removeItem("currentTheme");
+  }
+});
+
+// Swiper
+const swiper = new Swiper(".swiper", {
+  slidesPerView: 1,
+  spaceBetween: 20,
+  navigation: {
+    nextEl: ".swiper-button-next",
+    prevEl: ".swiper-button-prev",
+  },
+  pagination: {
+    el: ".swiper-pagination",
+  },
+  breakpoints: {
+    700: {
+      slidesPerView: 2,
+    },
+    1200: {
+      slidesPerView: 3,
+    },
+  },
+});
 
-// Swiper
\ No newline at end of file
+document.addEventListener("DOMContentLoaded", () => {
+  const yrSpan = selectElement(".yrSpan");
+  let year = new Date().getFullYear();
+  yrSpan.innerHTML = year;
+});
diff --git a/Starter/index.html b/Starter/index.html
index b2db673..f4f72a3 100644
--- a/Starter/index.html
+++ b/Starter/index.html
@@ -1,38 +1,753 @@
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>NewsFlash | Home</title>
     <!-- Favicon -->
-    <link rel="icon" type="image/png" sizes="32x32" href="./assets/images/favicon.png">
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="32x32"
+      href="./assets/images/favicon.png"
+    />
     <!-- Remix icons -->
-    <link href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css" rel="stylesheet">
+    <link
+      href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css"
+      rel="stylesheet"
+    />
     <!-- Swiper.js styles -->
-    <link rel="stylesheet" href="./assets/css/swiper-bundle.min.css"/>
+    <link rel="stylesheet" href="./assets/css/swiper-bundle.min.css" />
     <!-- Custom styles -->
-    <link rel="stylesheet" href="./assets/css/main.css">
-</head>
-<body>
+    <link rel="stylesheet" href="./assets/css/main.css" />
+  </head>
+  <body>
     <!-- Header -->
+    <header class="header" id="header">
+      <nav class="navbar container">
+        <a href="./index.html">
+          <h2 class="logo">NewsFlash</h2>
+        </a>
+
+        <div class="menu" id="menu">
+          <ul class="list">
+            <li class="list-item">
+              <a href="/" class="list-link current">Home</a>
+            </li>
+            <li class="list-item">
+              <a href="/" class="list-link">Categories</a>
+            </li>
+            <li class="list-item">
+              <a href="/" class="list-link">Reviews</a>
+            </li>
+            <li class="list-item">
+              <a href="/" class="list-link">News</a>
+            </li>
+            <li class="list-item">
+              <a href="/" class="list-link">Membership</a>
+            </li>
+            <li class="list-item">
+              <a href="/" class="list-link">Contact</a>
+            </li>
+            <li class="list-item screen-lg-hidden">
+              <a href="/" class="list-link">Sign in</a>
+            </li>
+            <li class="list-item screen-lg-hidden">
+              <a href="/" class="list-link">Sign up</a>
+            </li>
+          </ul>
+        </div>
+
+        <div class="list list-right">
+          <button class="btn place-items-center" id="theme-toggle-btn">
+            <i class="ri-sun-line sun-icon"></i>
+            <i class="ri-moon-line moon-icon"></i>
+          </button>
+
+          <button class="btn place-items-center" id="search-icon">
+            <i class="ri-search-line"></i>
+          </button>
+
+          <button
+            class="btn place-items-center screen-lg-hidden menu-toggle-icon"
+            id="menu-toggle-btn"
+          >
+            <i class="ri-menu-3-line open-menu-icon"></i>
+            <i class="ri-close-line close-menu-icon"></i>
+          </button>
+        </div>
+
+        <a href="/" class="list-link screen-sm-hidden">Sign in</a>
+        <a
+          href="/"
+          class="list-link screen-sm-hidden btn fancy-border sign-up-btn"
+          ><span>Sign up</span></a
+        >
+      </nav>
+    </header>
 
     <!-- Search -->
+    <div class="search-form-container container" id="search-form-container">
+      <div class="form-container-inner">
+        <form action="" class="form">
+          <input
+            type="text"
+            class="form-input"
+            placeholder="What are you looking for?"
+          />
+          <button class="btn form-btn" type="submit">
+            <i class="ri-search-line"></i>
+          </button>
+        </form>
+        <span class="form-note">Or Press ESC to close</span>
+      </div>
+
+      <button class="btn form-close-btn place-items-center" id="form-close-btn">
+        <i class="ri-close-line"></i>
+      </button>
+    </div>
 
     <!-- Featured articles -->
-    
+    <section class="featured-articles section-header-offset">
+      <div class="featured-articles-container container d-grid">
+        <!-- Featured contents -->
+        <div class="featured-content d-grid">
+          <div class="headline-banner">
+            <h3 class="headline fancy-border">
+              <span class="place-items-center">Breaking News</span>
+            </h3>
+            <span class="headline-description"
+              >Apple announces a new partnership...</span
+            >
+          </div>
+          <!-- Featured article 1 -->
+          <a
+            href="./post.html"
+            class="article featured-article featured-article-1"
+          >
+            <img
+              src="./assets/images/featured/featured-1.jpg"
+              alt=""
+              class="article-image"
+            />
+            <span class="article-category">Technology</span>
+
+            <div class="article-data-container">
+              <div class="article-data">
+                <span>Dec 5th 2021</span>
+                <span class="article-data-spacer"></span>
+                <span>8 min read</span>
+              </div>
+
+              <h3 class="title article-title">Is VR the future?</h3>
+            </div>
+          </a>
+          <!-- Featured article 2 -->
+          <a
+            href="./post.html"
+            class="article featured-article featured-article-2"
+          >
+            <img
+              src="./assets/images/featured/featured-2.jpg"
+              alt=""
+              class="article-image"
+            />
+            <span class="article-category">Food</span>
+
+            <div class="article-data-container">
+              <div class="article-data">
+                <span>Dec 5th 2021</span>
+                <span class="article-data-spacer"></span>
+                <span>8 min read</span>
+              </div>
+
+              <h3 class="title article-title">Is VR the future?</h3>
+            </div>
+          </a>
+          <!-- Featured article 3 -->
+          <a
+            href="./post.html"
+            class="article featured-article featured-article-3"
+          >
+            <img
+              src="./assets/images/featured/featured-3.jpg"
+              alt=""
+              class="article-image"
+            />
+            <span class="article-category">Health</span>
+
+            <div class="article-data-container">
+              <div class="article-data">
+                <span>Dec 5th 2021</span>
+                <span class="article-data-spacer"></span>
+                <span>8 min read</span>
+              </div>
+
+              <h3 class="title article-title">Is VR the future?</h3>
+            </div>
+          </a>
+        </div>
+        <!-- Featured sidebar -->
+        <div class="sidebar d-gird">
+          <h3 class="title featured-content-title">Trending News</h3>
+          <a href="" class="trending-news-box">
+            <div class="trending-news-image-box">
+              <span class="trending-number place-items-center">01</span>
+              <img
+                src="./assets/images/trending/trending_1.jpg"
+                alt=""
+                class="article-image"
+              />
+            </div>
+            <div class="trending-news-data">
+              <div class="article-data">
+                <span>Dec 5th 2021</span>
+                <span class="article-data-spacer"></span>
+                <span>8 min read</span>
+              </div>
+              <h3 class="title article-title">Sample article title</h3>
+            </div>
+          </a>
+          <a href="" class="trending-news-box">
+            <div class="trending-news-image-box">
+              <span class="trending-number place-items-center">02</span>
+              <img
+                src="./assets/images/trending/trending_2.jpg"
+                alt=""
+                class="article-image"
+              />
+            </div>
+            <div class="trending-news-data">
+              <div class="article-data">
+                <span>Dec 5th 2021</span>
+                <span class="article-data-spacer"></span>
+                <span>8 min read</span>
+              </div>
+              <h3 class="title article-title">Sample article title</h3>
+            </div>
+          </a>
+          <a href="" class="trending-news-box">
+            <div class="trending-news-image-box">
+              <span class="trending-number place-items-center">03</span>
+              <img
+                src="./assets/images/trending/trending_3.jpg"
+                alt=""
+                class="article-image"
+              />
+            </div>
+            <div class="trending-news-data">
+              <div class="article-data">
+                <span>Dec 5th 2021</span>
+                <span class="article-data-spacer"></span>
+                <span>8 min read</span>
+              </div>
+              <h3 class="title article-title">Sample article title</h3>
+            </div>
+          </a>
+          <a href="" class="trending-news-box">
+            <div class="trending-news-image-box">
+              <span class="trending-number place-items-center">04</span>
+              <img
+                src="./assets/images/trending/trending_4.jpg"
+                alt=""
+                class="article-image"
+              />
+            </div>
+            <div class="trending-news-data">
+              <div class="article-data">
+                <span>Dec 5th 2021</span>
+                <span class="article-data-spacer"></span>
+                <span>8 min read</span>
+              </div>
+              <h3 class="title article-title">Sample article title</h3>
+            </div>
+          </a>
+          <a href="" class="trending-news-box">
+            <div class="trending-news-image-box">
+              <span class="trending-number place-items-center">05</span>
+              <img
+                src="./assets/images/trending/trending_5.jpg"
+                alt=""
+                class="article-image"
+              />
+            </div>
+            <div class="trending-news-data">
+              <div class="article-data">
+                <span>Dec 5th 2021</span>
+                <span class="article-data-spacer"></span>
+                <span>8 min read</span>
+              </div>
+              <h3 class="title article-title">Sample article title</h3>
+            </div>
+          </a>
+        </div>
+      </div>
+    </section>
+
     <!-- Quick read -->
+    <section class="quick-read section">
+      <div class="container">
+        <h2 class="title section-title" data-name="Quick read">Quick Read</h2>
+        <div class="swiper">
+          <div class="swiper-wrapper">
+            <a href="#" class="article swiper-slide">
+              <img
+                src="./assets/images/quick_read/quick_read_1.jpg"
+                alt=""
+                class="article-image"
+              />
+
+              <div class="article-data-container">
+                <div class="article-data">
+                  <span>Dec 5th 2021</span>
+                  <span class="article-data-spacer"></span>
+                  <span>8 min read</span>
+                </div>
+                <h3 class="title article-title">Sample article title</h3>
+              </div>
+            </a>
+            <a href="#" class="article swiper-slide">
+              <img
+                src="./assets/images/quick_read/quick_read_2.jpg"
+                alt=""
+                class="article-image"
+              />
+
+              <div class="article-data-container">
+                <div class="article-data">
+                  <span>Dec 5th 2021</span>
+                  <span class="article-data-spacer"></span>
+                  <span>8 min read</span>
+                </div>
+                <h3 class="title article-title">Sample article title</h3>
+              </div>
+            </a>
+            <a href="#" class="article swiper-slide">
+              <img
+                src="./assets/images/quick_read/quick_read_3.jpg"
+                alt=""
+                class="article-image"
+              />
+
+              <div class="article-data-container">
+                <div class="article-data">
+                  <span>Dec 5th 2021</span>
+                  <span class="article-data-spacer"></span>
+                  <span>8 min read</span>
+                </div>
+                <h3 class="title article-title">Sample article title</h3>
+              </div>
+            </a>
+            <a href="#" class="article swiper-slide">
+              <img
+                src="./assets/images/quick_read/quick_read_4.jpg"
+                alt=""
+                class="article-image"
+              />
+
+              <div class="article-data-container">
+                <div class="article-data">
+                  <span>Dec 5th 2021</span>
+                  <span class="article-data-spacer"></span>
+                  <span>8 min read</span>
+                </div>
+                <h3 class="title article-title">Sample article title</h3>
+              </div>
+            </a>
+            <a href="#" class="article swiper-slide">
+              <img
+                src="./assets/images/quick_read/quick_read_5.jpg"
+                alt=""
+                class="article-image"
+              />
+
+              <div class="article-data-container">
+                <div class="article-data">
+                  <span>Dec 5th 2021</span>
+                  <span class="article-data-spacer"></span>
+                  <span>8 min read</span>
+                </div>
+                <h3 class="title article-title">Sample article title</h3>
+              </div>
+            </a>
+            <a href="#" class="article swiper-slide">
+              <img
+                src="./assets/images/quick_read/quick_read_6.jpg"
+                alt=""
+                class="article-image"
+              />
+
+              <div class="article-data-container">
+                <div class="article-data">
+                  <span>Dec 5th 2021</span>
+                  <span class="article-data-spacer"></span>
+                  <span>8 min read</span>
+                </div>
+                <h3 class="title article-title">Sample article title</h3>
+              </div>
+            </a>
+          </div>
+
+          <div class="swiper-button-prev swiper-controls"></div>
+          <div class="swiper-button-next swiper-controls"></div>
+
+          <div class="swiper-pagination"></div>
+        </div>
+      </div>
+    </section>
 
     <!-- Older posts -->
-    
-    <!-- Popular tags -->
+    <section class="section older-posts">
+      <div class="container">
+        <h2 class="title section-title" data-name="Older posts">Older Posts</h2>
+        <div class="older-posts-grid-wrapper d-grid">
+          <a href="#" class="article d-grid">
+            <div class="older-posts-article-image-wrapper">
+              <img
+                src="./assets/images/older_posts/older_posts_1.jpg"
+                alt=""
+                class="article-image"
+              />
+            </div>
+            <div class="article-data-container">
+              <div class="article-data">
+                <span>Dec 5th 2021</span>
+                <span class="article-data-spacer"></span>
+                <span>8 min read</span>
+              </div>
+              <h3 class="title article-title">Sample article title</h3>
+              <p class="article-description">
+                Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos id
+                ipsum cupiditate maxime itaque possimus temporibus! Quis error,
+                non accusamus modi, praesentium omnis nostrum odit sapiente
+                doloremque sunt ullam ratione.
+              </p>
+            </div>
+          </a>
+          <a href="#" class="article d-grid">
+            <div class="older-posts-article-image-wrapper">
+              <img
+                src="./assets/images/older_posts/older_posts_2.jpg"
+                alt=""
+                class="article-image"
+              />
+            </div>
+            <div class="article-data-container">
+              <div class="article-data">
+                <span>Dec 5th 2021</span>
+                <span class="article-data-spacer"></span>
+                <span>8 min read</span>
+              </div>
+              <h3 class="title article-title">Sample article title</h3>
+              <p class="article-description">
+                Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos id
+                ipsum cupiditate maxime itaque possimus temporibus! Quis error,
+                non accusamus modi, praesentium omnis nostrum odit sapiente
+                doloremque sunt ullam ratione.
+              </p>
+            </div>
+          </a>
+          <a href="#" class="article d-grid">
+            <div class="older-posts-article-image-wrapper">
+              <img
+                src="./assets/images/older_posts/older_posts_3.jpg"
+                alt=""
+                class="article-image"
+              />
+            </div>
+            <div class="article-data-container">
+              <div class="article-data">
+                <span>Dec 5th 2021</span>
+                <span class="article-data-spacer"></span>
+                <span>8 min read</span>
+              </div>
+              <h3 class="title article-title">Sample article title</h3>
+              <p class="article-description">
+                Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos id
+                ipsum cupiditate maxime itaque possimus temporibus! Quis error,
+                non accusamus modi, praesentium omnis nostrum odit sapiente
+                doloremque sunt ullam ratione.
+              </p>
+            </div>
+          </a>
+          <a href="#" class="article d-grid">
+            <div class="older-posts-article-image-wrapper">
+              <img
+                src="./assets/images/older_posts/older_posts_4.jpg"
+                alt=""
+                class="article-image"
+              />
+            </div>
+            <div class="article-data-container">
+              <div class="article-data">
+                <span>Dec 5th 2021</span>
+                <span class="article-data-spacer"></span>
+                <span>8 min read</span>
+              </div>
+              <h3 class="title article-title">Sample article title</h3>
+              <p class="article-description">
+                Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos id
+                ipsum cupiditate maxime itaque possimus temporibus! Quis error,
+                non accusamus modi, praesentium omnis nostrum odit sapiente
+                doloremque sunt ullam ratione.
+              </p>
+            </div>
+          </a>
+          <a href="#" class="article d-grid">
+            <div class="older-posts-article-image-wrapper">
+              <img
+                src="./assets/images/older_posts/older_posts_5.jpg"
+                alt=""
+                class="article-image"
+              />
+            </div>
+            <div class="article-data-container">
+              <div class="article-data">
+                <span>Dec 5th 2021</span>
+                <span class="article-data-spacer"></span>
+                <span>8 min read</span>
+              </div>
+              <h3 class="title article-title">Sample article title</h3>
+              <p class="article-description">
+                Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos id
+                ipsum cupiditate maxime itaque possimus temporibus! Quis error,
+                non accusamus modi, praesentium omnis nostrum odit sapiente
+                doloremque sunt ullam ratione.
+              </p>
+            </div>
+          </a>
+          <a href="#" class="article d-grid">
+            <div class="older-posts-article-image-wrapper">
+              <img
+                src="./assets/images/older_posts/older_posts_6.jpg"
+                alt=""
+                class="article-image"
+              />
+            </div>
+            <div class="article-data-container">
+              <div class="article-data">
+                <span>Dec 5th 2021</span>
+                <span class="article-data-spacer"></span>
+                <span>8 min read</span>
+              </div>
+              <h3 class="title article-title">Sample article title</h3>
+              <p class="article-description">
+                Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos id
+                ipsum cupiditate maxime itaque possimus temporibus! Quis error,
+                non accusamus modi, praesentium omnis nostrum odit sapiente
+                doloremque sunt ullam ratione.
+              </p>
+            </div>
+          </a>
+        </div>
+
+        <div class="see-more-container">
+          <a href="#" class="btn see-more-btn place-items-center">
+            see more <i class="ri-arrow-right-s-line"></i>
+          </a>
+        </div>
+      </div>
+    </section>
 
+    <!-- Popular tags -->
+    <section class="popular-tags section">
+      <div class="container">
+        <h2 class="title section-ttile" data-name="Popular tags">
+          Popular Tags
+        </h2>
+        <div class="popular-tags-container d-grid">
+          <a href="#" class="article">
+            <span class="tag-name">#Travel</span>
+            <img
+              src="./assets/images/tags/travel-tag.jpg"
+              alt=""
+              class="article-image"
+            />
+          </a>
+          <a href="#" class="article">
+            <span class="tag-name">#Food</span>
+            <img
+              src="./assets/images/tags/food-tag.jpg"
+              alt=""
+              class="article-image"
+            />
+          </a>
+          <a href="#" class="article">
+            <span class="tag-name">#Technology</span>
+            <img
+              src="./assets/images/tags/technology-tag.jpg"
+              alt=""
+              class="article-image"
+            />
+          </a>
+          <a href="#" class="article">
+            <span class="tag-name">#Health</span>
+            <img
+              src="./assets/images/tags/health-tag.jpg"
+              alt=""
+              class="article-image"
+            />
+          </a>
+          <a href="#" class="article">
+            <span class="tag-name">#Nature</span>
+            <img
+              src="./assets/images/tags/nature-tag.jpg"
+              alt=""
+              class="article-image"
+            />
+          </a>
+          <a href="#" class="article">
+            <span class="tag-name">#Fitness</span>
+            <img
+              src="./assets/images/tags/fitness-tag.jpg"
+              alt=""
+              class="article-image"
+            />
+          </a>
+        </div>
+      </div>
+    </section>
     <!-- Newsletter -->
-    
+    <section class="section newsletter">
+      <div class="container">
+        <h2 class="title section-title" data-name="Newsletter">Newsletter</h2>
+        <div class="form-container-inner">
+          <h6 class="title newsletter-title">Subscribe to NewsFlash</h6>
+          <p class="newsletter-description">
+            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugiat
+            adipisci dolorum earum eum expedita non repellendus rem est
+            repudiandae a?
+          </p>
+          <form action="" class="form">
+            <input
+              type="text"
+              class="form-input"
+              placeholder="Enter your email id"
+            />
+            <button class="btn form-btn" type="submit">
+              <i class="ri-mail-send-line"></i>
+            </button>
+          </form>
+        </div>
+      </div>
+    </section>
     <!-- Footer -->
+    <footer class="footer section">
+      <div class="footer-container container d-grid">
+        <div class="company-data">
+          <a href="./index.html">
+            <h2 class="logo">NewsFlash</h2>
+          </a>
+          <p class="company-description">
+            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fugiat id,
+            sint dolor unde dolorum odit assumenda consequatur suscipit, enim
+            corporis, obcaecati cum voluptatibus eum cumque.
+          </p>
+          <ul class="social-links list">
+            <li class="list-item">
+              <a href="#" class="list-link">
+                <i class="ri-instagram-line"></i>
+              </a>
+              <a href="#" class="list-link">
+                <i class="ri-facebook-line"></i>
+              </a>
+              <a href="#" class="list-link">
+                <i class="ri-whatsapp-line"></i>
+              </a>
+              <a href="#" class="list-link">
+                <i class="ri-twitter-line"></i>
+              </a>
+              <a href="#" class="list-link">
+                <i class="ri-youtube-line"></i>
+              </a>
+              <a href="#" class="list-link">
+                <i class="ri-pinterest-line"></i>
+              </a>
+            </li>
+          </ul>
+
+          <span class="copyright-notice"
+            >&copy; <span class="yrSpan"></span> NewsFlash. All rights
+            reserved</span
+          >
+        </div>
+        
+        <div>
+          <h6 class="title footer-title">Categories</h6>
+          <ul class="list footer-list">
+            <li class="list-item">
+              <a href="" class="list-link">Business</a>
+            </li>
+            <li class="list-item">
+              <a href="" class="list-link">Fitness</a>
+            </li>
+            <li class="list-item">
+              <a href="" class="list-link">Technology</a>
+            </li>
+            <li class="list-item">
+              <a href="" class="list-link">Health</a>
+            </li>
+            <li class="list-item">
+              <a href="" class="list-link">Food</a>
+            </li>
+            <li class="list-item">
+              <a href="" class="list-link">Nature</a>
+            </li>
+          </ul>
+        </div>
+
+        <div>
+          <h6 class="title footer-title">Useful Links</h6>
+          <ul class="list footer-list">
+            <li class="list-item">
+              <a href="" class="list-link">Home</a>
+            </li>
+            <li class="list-item">
+              <a href="" class="list-link">Categories</a>
+            </li>
+            <li class="list-item">
+              <a href="" class="list-link">Reviews</a>
+            </li>
+            <li class="list-item">
+              <a href="" class="list-link">News</a>
+            </li>
+            <li class="list-item">
+              <a href="" class="list-link">Membership</a>
+            </li>
+            <li class="list-item">
+              <a href="" class="list-link">Contact</a>
+            </li>
+          </ul>
+        </div>
 
+        <div>
+          <h6 class="title footer-title">Company</h6>
+          <ul class="list footer-list">
+            <li class="list-item">
+              <a href="" class="list-link">Home</a>
+            </li>
+            <li class="list-item">
+              <a href="" class="list-link">Categories</a>
+            </li>
+            <li class="list-item">
+              <a href="" class="list-link">Reviews</a>
+            </li>
+            <li class="list-item">
+              <a href="" class="list-link">News</a>
+            </li>
+            <li class="list-item">
+              <a href="" class="list-link">Membership</a>
+            </li>
+            <li class="list-item">
+              <a href="" class="list-link">Contact</a>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </footer>
     <!-- Swiper.js -->
     <script src="./assets/js/swiper-bundle.min.js"></script>
     <!-- Custom script -->
     <script src="./assets/js/main.js"></script>
-</body>
-</html>
\ No newline at end of file
+  </body>
+</html>
diff --git a/Starter/post.html b/Starter/post.html
index 961822e..cfad07e 100644
--- a/Starter/post.html
+++ b/Starter/post.html
@@ -1,199 +1,294 @@
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>NewsFlash | Post</title>
     <!-- Favicon -->
-    <link rel="icon" type="image/png" sizes="32x32" href="./assets/images/favicon.png">
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="32x32"
+      href="./assets/images/favicon.png"
+    />
     <!-- Remix icons -->
-    <link href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css" rel="stylesheet">
+    <link
+      href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css"
+      rel="stylesheet"
+    />
     <!-- Swiper.js styles -->
-    <link rel="stylesheet" href="./assets/css/swiper-bundle.min.css"/>
+    <link rel="stylesheet" href="./assets/css/swiper-bundle.min.css" />
     <!-- Custom styles -->
-    <link rel="stylesheet" href="./assets/css/main.css">
-</head>
-<body>
+    <link rel="stylesheet" href="./assets/css/main.css" />
+  </head>
+  <body>
     <!-- Header -->
     <header class="header" id="header">
+      <nav class="navbar container">
+        <a href="./index.html">
+          <h2 class="logo">NewsFlash</h2>
+        </a>
 
-        <nav class="navbar container">
-
-            <a href="./index.html">
-                <h2 class="logo">NewsFlash</h2>
-            </a>
-
-            <div class="menu" id="menu">
-                <ul class="list">
-                    <li class="list-item">
-                        <a href="#" class="list-link current">Home</a>
-                    </li>
-                    <li class="list-item">
-                        <a href="#" class="list-link">Categories</a>
-                    </li>
-                    <li class="list-item">
-                        <a href="#" class="list-link">Reviews</a>
-                    </li>
-                    <li class="list-item">
-                        <a href="#" class="list-link">News</a>
-                    </li>
-                    <li class="list-item">
-                        <a href="#" class="list-link">Membership</a>
-                    </li>
-                    <li class="list-item">
-                        <a href="#" class="list-link">Contact</a>
-                    </li>
-                    <li class="list-item screen-lg-hidden">
-                        <a href="#" class="list-link">Sign in</a>
-                    </li>
-                    <li class="list-item screen-lg-hidden">
-                        <a href="#" class="list-link">Sign up</a>
-                    </li>
-                </ul>
-            </div>
-
-            <div class="list list-right">
-                <button class="btn place-items-center" id="theme-toggle-btn">
-                    <i class="ri-sun-line sun-icon"></i>
-                    <i class="ri-moon-line moon-icon"></i>
-                </button>
+        <div class="menu" id="menu">
+          <ul class="list">
+            <li class="list-item">
+              <a href="#" class="list-link current">Home</a>
+            </li>
+            <li class="list-item">
+              <a href="#" class="list-link">Categories</a>
+            </li>
+            <li class="list-item">
+              <a href="#" class="list-link">Reviews</a>
+            </li>
+            <li class="list-item">
+              <a href="#" class="list-link">News</a>
+            </li>
+            <li class="list-item">
+              <a href="#" class="list-link">Membership</a>
+            </li>
+            <li class="list-item">
+              <a href="#" class="list-link">Contact</a>
+            </li>
+            <li class="list-item screen-lg-hidden">
+              <a href="#" class="list-link">Sign in</a>
+            </li>
+            <li class="list-item screen-lg-hidden">
+              <a href="#" class="list-link">Sign up</a>
+            </li>
+          </ul>
+        </div>
 
-                <button class="btn place-items-center" id="search-icon">
-                    <i class="ri-search-line"></i>
-                </button>
+        <div class="list list-right">
+          <button class="btn place-items-center" id="theme-toggle-btn">
+            <i class="ri-sun-line sun-icon"></i>
+            <i class="ri-moon-line moon-icon"></i>
+          </button>
 
-                <button class="btn place-items-center screen-lg-hidden menu-toggle-icon" id="menu-toggle-icon">
-                    <i class="ri-menu-3-line open-menu-icon"></i>
-                    <i class="ri-close-line close-menu-icon"></i>
-                </button>
+          <button class="btn place-items-center" id="search-icon">
+            <i class="ri-search-line"></i>
+          </button>
 
-                <a href="#" class="list-link screen-sm-hidden">Sign in</a>
-                <a href="#" class="list-link screen-sm-hidden btn sign-up-btn fancy-border">
-                    <span>Sign in</span>
-                </a>
-            </div>
-        </nav>
+          <button
+            class="btn place-items-center screen-lg-hidden menu-toggle-icon"
+            id="menu-toggle-icon"
+          >
+            <i class="ri-menu-3-line open-menu-icon"></i>
+            <i class="ri-close-line close-menu-icon"></i>
+          </button>
 
+          <a href="#" class="list-link screen-sm-hidden">Sign in</a>
+          <a
+            href="#"
+            class="list-link screen-sm-hidden btn sign-up-btn fancy-border"
+          >
+            <span>Sign up</span>
+          </a>
+        </div>
+      </nav>
     </header>
 
     <!-- Search -->
     <div class="search-form-container container" id="search-form-container">
+      <div class="form-container-inner">
+        <form action="" class="form">
+          <input
+            type="text"
+            class="form-input"
+            placeholder="What are looking for?"
+          />
+          <button class="btn form-btn" type="submit">
+            <i class="ri-search-line"></i>
+          </button>
+        </form>
+        <span class="form-note">Or press ESC to close.</span>
+      </div>
 
-        <div class="form-container-inner">
-
-            <form action="" class="form">
-                <input type="text" class="form-input" placeholder="What are looking for?">
-                <button class="btn form-btn" type="submit">
-                    <i class="ri-search-line"></i>
-                </button>
-            </form>
-            <span class="form-note">Or press ESC to close.</span>
+      <button class="btn form-close-btn place-items-center" id="form-close-btn">
+        <i class="ri-close-line"></i>
+      </button>
+    </div>
+    <!-- Blog post -->
+    <section class="blog-post section-header-offset">
+      <div class="blog-post-container container">
+        <div class="blog-post-data">
+          <h3 class="title blog-post-title">Is VR the future</h3>
+          <div class="article-data">
+            <span>Dec 6th 2021</span>
+            <span class="article-data-spacer"></span>
+            <span>4 min read</span>
+          </div>
+          <img src="./assets/images/featured/featured-1.jpg" alt="" />
         </div>
+        <div class="container">
+          <p>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure et
+            exercitationem mollitia architecto quasi eum eos culpa consequatur
+            magnam velit non excepturi magni unde, provident odio natus libero
+            est saepe!
+          </p>
 
-        <button class="btn form-close-btn place-items-center" id="form-close-btn">
-            <i class="ri-close-line"></i>
-        </button>
+          <p>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur aut
+            odio facilis minima cum quasi aliquam, illo illum esse totam, quidem
+            ducimus inventore incidunt magnam!
+          </p>
 
-    </div>
-    <!-- Blog post -->
-    
+          <blockquote class="quote">
+            <p>
+              <span><i class="ri-double-quotes-l"></i></span>Lorem ipsum dolor,
+              sit amet consectetur adipisicing elit. Animi, illo iste. Modi
+              voluptatem repudiandae totam!<span
+                ><i class="ri-double-quotes-r"></i
+              ></span>
+            </p>
+          </blockquote>
+
+          <p>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate
+            omnis nihil odit mollitia doloribus beatae distinctio, corporis
+            alias maxime? Ea doloribus enim incidunt consectetur doloremque,
+            assumenda placeat. Quibusdam, fugit suscipit!
+          </p>
+
+          <div class="author d-grid">
+            <div class="author-image-box">
+              <img
+                src="./assets/images/author.jpg"
+                alt=""
+                class="article-image"
+              />
+            </div>
+            <div class="author-about">
+              <h3 class="author-name">John Doe</h3>
+              <p>
+                Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi,
+                accusantium?
+              </p>
+              <ul class="social-links list">
+                <li class="list-item">
+                  <a href="#" class="list-link">
+                    <i class="ri-instagram-line"></i>
+                  </a>
+                  <a href="#" class="list-link">
+                    <i class="ri-facebook-line"></i>
+                  </a>
+                  <a href="#" class="list-link">
+                    <i class="ri-twitter-line"></i>
+                  </a>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
     <!-- Footer -->
     <footer class="footer section">
-        <div class="footer-container container d-grid">
-            
-            <div class="company-data">
-                <a href="./index.html">
-                    <h2 class="logo">NewsFlash</h2>
-                </a>
-                <p class="company-description">Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere, iure. Harum, animi dolores, nam, ad magni expedita.</p>
-                <ul class="list social-media">
-                    <li class="list-item">
-                        <a href="#" class="list-link"><i class="ri-instagram-line"></i></a>
-                    </li>
-                    <li class="list-item">
-                        <a href="#" class="list-link"><i class="ri-facebook-circle-line"></i></a>
-                    </li>
-                    <li class="list-item">
-                        <a href="#" class="list-link"><i class="ri-twitter-line"></i></a>
-                    </li>
-                    <li class="list-item">
-                        <a href="#" class="list-link"><i class="ri-pinterest-line"></i></a>
-                    </li>
-                </ul>
-                <span class="copyright-notice">&copy;2021 NewsFlash. All rights reserved.</span>
-            </div>
+      <div class="footer-container container d-grid">
+        <div class="company-data">
+          <a href="./index.html">
+            <h2 class="logo">NewsFlash</h2>
+          </a>
+          <p class="company-description">
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere,
+            iure. Harum, animi dolores, nam, ad magni expedita.
+          </p>
+          <ul class="list social-media">
+            <li class="list-item">
+              <a href="#" class="list-link"
+                ><i class="ri-instagram-line"></i
+              ></a>
+            </li>
+            <li class="list-item">
+              <a href="#" class="list-link"
+                ><i class="ri-facebook-circle-line"></i
+              ></a>
+            </li>
+            <li class="list-item">
+              <a href="#" class="list-link"><i class="ri-twitter-line"></i></a>
+            </li>
+            <li class="list-item">
+              <a href="#" class="list-link"
+                ><i class="ri-pinterest-line"></i
+              ></a>
+            </li>
+          </ul>
+          <span class="copyright-notice"
+            >&copy;2021 NewsFlash. All rights reserved.</span
+          >
+        </div>
 
-            <div>
-                <h6 class="title footer-title">Categories</h6>
-                <ul class="footer-list list">
-                    <li class="list-item">
-                        <a href="#" class="list-link">Travel</a>
-                    </li>
-                    <li class="list-item">
-                        <a href="#" class="list-link">Food</a>
-                    </li>
-                    <li class="list-item">
-                        <a href="#" class="list-link">Technology</a>
-                    </li>
-                    <li class="list-item">
-                        <a href="#" class="list-link">Health</a>
-                    </li>
-                    <li class="list-item">
-                        <a href="#" class="list-link">Nature</a>
-                    </li>
-                    <li class="list-item">
-                        <a href="#" class="list-link">Fitness</a>
-                    </li>
-                </ul>
-            </div>
+        <div>
+          <h6 class="title footer-title">Categories</h6>
+          <ul class="footer-list list">
+            <li class="list-item">
+              <a href="#" class="list-link">Travel</a>
+            </li>
+            <li class="list-item">
+              <a href="#" class="list-link">Food</a>
+            </li>
+            <li class="list-item">
+              <a href="#" class="list-link">Technology</a>
+            </li>
+            <li class="list-item">
+              <a href="#" class="list-link">Health</a>
+            </li>
+            <li class="list-item">
+              <a href="#" class="list-link">Nature</a>
+            </li>
+            <li class="list-item">
+              <a href="#" class="list-link">Fitness</a>
+            </li>
+          </ul>
+        </div>
 
-            <div>
-                <h6 class="title footer-title">Useful links</h6>
-                <ul class="footer-list list">
-                    <li class="list-item">
-                        <a href="#" class="list-link">Home</a>
-                    </li>
-                    <li class="list-item">
-                        <a href="#" class="list-link">Elements</a>
-                    </li>
-                    <li class="list-item">
-                        <a href="#" class="list-link">Tags</a>
-                    </li>
-                    <li class="list-item">
-                        <a href="#" class="list-link">Authors</a>
-                    </li>
-                    <li class="list-item">
-                        <a href="#" class="list-link">Membership</a>
-                    </li>
-                </ul>
-            </div>
+        <div>
+          <h6 class="title footer-title">Useful links</h6>
+          <ul class="footer-list list">
+            <li class="list-item">
+              <a href="#" class="list-link">Home</a>
+            </li>
+            <li class="list-item">
+              <a href="#" class="list-link">Elements</a>
+            </li>
+            <li class="list-item">
+              <a href="#" class="list-link">Tags</a>
+            </li>
+            <li class="list-item">
+              <a href="#" class="list-link">Authors</a>
+            </li>
+            <li class="list-item">
+              <a href="#" class="list-link">Membership</a>
+            </li>
+          </ul>
+        </div>
 
-            <div>
-                <h6 class="title footer-title">Company</h6>
-                <ul class="footer-list list">
-                    <li class="list-item">
-                        <a href="#" class="list-link">Contact us</a>
-                    </li>
-                    <li class="list-item">
-                        <a href="#" class="list-link">F.A.Q</a>
-                    </li>
-                    <li class="list-item">
-                        <a href="#" class="list-link">Careers</a>
-                    </li>
-                    <li class="list-item">
-                        <a href="#" class="list-link">Authors</a>
-                    </li>
-                    <li class="list-item">
-                        <a href="#" class="list-link">Memberships</a>
-                    </li>
-                </ul>
-            </div>
+        <div>
+          <h6 class="title footer-title">Company</h6>
+          <ul class="footer-list list">
+            <li class="list-item">
+              <a href="#" class="list-link">Contact us</a>
+            </li>
+            <li class="list-item">
+              <a href="#" class="list-link">F.A.Q</a>
+            </li>
+            <li class="list-item">
+              <a href="#" class="list-link">Careers</a>
+            </li>
+            <li class="list-item">
+              <a href="#" class="list-link">Authors</a>
+            </li>
+            <li class="list-item">
+              <a href="#" class="list-link">Memberships</a>
+            </li>
+          </ul>
         </div>
+      </div>
     </footer>
 
     <!-- Swiper.js -->
     <script src="./assets/js/swiper-bundle.min.js"></script>
     <!-- Custom script -->
     <script src="./assets/js/main.js"></script>
-</body>
-</html>
\ No newline at end of file
+  </body>
+</html>