blog application updated

.storybook/main.js

-// // .storybook/main.js or .storybook/main.ts
-// module.exports = {
-//   stories: [
-//     "../components/**/*.mdx",
-//     "../components/**/*.stories.@(js|jsx|mjs|ts|tsx)",
-//   ],
-
-//   addons: [
-//     "@storybook/addon-links",
-//     "@storybook/addon-essentials",
-//     "@storybook/addon-onboarding",
-//     "@storybook/addon-interactions",
-//     "storybook-dark-mode",
-//   ],
-
-//   frameworks: {
-//     "@storybook/nextjs": {
-//       options: {},
-//     },
-//   },
-
-//   docs: {
-//     autodocs: "tag",
-//   },
-
-//   framework: {
-//     name: "@storybook/nextjs",
-//     options: {},
-//   },
-// };
-
 import path from "path";
 
 module.exports = {
@@ -46,11 +15,6 @@ module.exports = {
   webpackFinal: (config) => {
     config.resolve = {
       ...config.resolve,
-      fallback: {
-        fs: false,
-        path: false,
-        os: false,
-      },
       alias: {
         ...config.resolve.alias,
         "@components": path.resolve(__dirname, "../components"),

app/@header/default.js

+"use client";
+import Header from "@components/base/header";
+import { useAppContext } from "@context/index";
+
+export default function PageHeader() {
+  const { theme, toggleTheme, setInput } = useAppContext();
+  const handleSearch = (value) => {
+    setInput(value);
+  };
+  const handleClose = () => {
+    setInput("");
+  };
+
+  return (
+    <Header
+      name="NewsBlog"
+      currentTheme={theme}
+      onThemeChange={toggleTheme}
+      onSearch={handleSearch}
+      onClose={handleClose}
+    />
+  );
+}

app/@header/page.js

-"use client";
-import Header from "@components/base/header";
-import { useAppContext } from "@context/index";
-
-export default function PageHeader() {
-  const { theme, toggleTheme } = useAppContext();
-
-  return (
-    <Header name="NewsBlog" currentTheme={theme} onThemeChange={toggleTheme} />
-  );
-}

app/_app.js

+import { ThemeProvider } from "@context/index";
 import "@styles/global.css";
 
 export default function App({ Component, pageProps }) {
-  return <Component {...pageProps} />;
+  return (
+    <ThemeProvider>
+      <Component {...pageProps} />
+    </ThemeProvider>
+  );
 }

app/api/posts/route.js

+import { getAllPosts } from "@lib/posts";
+
+import { NextResponse } from "next/server";
+
+export async function GET() {
+  const blogs = await getAllPosts("posts");
+  return NextResponse.json(blogs);
+}

app/container.js

+"use client";
+import { useEffect, useState } from "react";
+import BlogLists from "@components/top-level/blog-lists";
+
+import { useAppContext } from "@context/index";
+
+export default function BlogContainer({ blogs }) {
+  const { input } = useAppContext();
+  const [filteredBlogs, setFilteredBlogs] = useState([]);
+
+  useEffect(() => {
+    handleBlogs();
+  }, [input, blogs]); // Added 'blogs' as a dependency
+
+  const handleBlogs = () => {
+    const filtered = blogs.filter((blog) => {
+      const lowerCaseBlogTitle = blog.title.toLowerCase();
+      const lowerCaseInput = input.toLowerCase();
+      return lowerCaseBlogTitle.includes(lowerCaseInput);
+    });
+
+    setFilteredBlogs(filtered);
+  };
+
+  return (
+    <BlogLists
+      title="Lifestyle"
+      description="Lorem ipsum dolor sit amet elit. Id quaerat amet ipsum sunt et quos dolorum."
+      blogs={filteredBlogs}
+    />
+  );
+}

app/container.module.css

+.center {
+  text-align: center;
+}

app/globals.css

@@ -8,12 +8,13 @@
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
     Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
   text-decoration: none;
-  --heading1: clamp(1rem, 1.3rem + 2vw, 3rem);
-  --heading2: clamp(1rem, 1rem + 2vw, 1.7rem);
-  --heading3: clamp(0.8rem, 0.5rem + 1.5vw, 1.5rem);
-  --heading4: clamp(0.7rem, 0.4rem + 1.4vw, 1.4rem);
-  --heading5: clamp(0.6rem, 0.3rem + 1.3vw, 1.3rem);
-  --heading6: clamp(0.5rem, 0.2rem + 1.2vw, 1.2rem);
+  --heading1: clamp(1rem, 1rem + 2.2vw, 2.6rem);
+  --heading2: clamp(1rem, 1rem + 2vw, 2rem);
+  --heading3: clamp(1rem, 0.7rem + 1.4vw, 1.7rem);
+  --heading4: clamp(1rem, 1rem + 1.2vw, 1.5rem);
+  --heading5: clamp(1rem, 1rem + 1vw, 1.3rem);
+  --heading6: clamp(0.9rem, 1rem + 0.8vw, 1.1rem);
+  line-height: 1.2;
 }
 
 .light {
@@ -56,9 +57,8 @@ html {
   padding: 0;
   margin: 0;
   scroll-behavior: smooth;
-  box-sizing: border-box;
   background: var(--bg-color);
-  height: 100dvh;
+  min-height: 100vh;
   max-width: 1920px;
   margin: 0 auto;
   color: #718096;

app/layout.js

@@ -2,9 +2,13 @@ import { ThemeProvider } from "@context/index";
 import "./globals.css";
 
 export default function RootLayout({ children, header }) {
+  // Check if localStorage is available (client-side)
+  const themeClass =
+    typeof window !== "undefined" ? localStorage.getItem("theme") : "light";
+
   return (
     <ThemeProvider>
-      <html en="lang">
+      <html lang="en" className={themeClass}>
         <body>
           {header}
           {children}

app/loading.js

 import styles from "./loading.module.css";
 
-const loading = () => {
+const Loading = () => {
   return <h2 className={styles.loading}>Loading ...</h2>;
 };
 
-export default loading;
+export default Loading;

app/loading.module.css

 .loading {
   display: grid;
-  place-content: center;
+  place-items: center;
 }

app/page.js

-import BlogLists from "@components/top-level/blog-lists";
-import { getAllPosts } from "@lib/posts";
+"use client";
+import React, { useState, useEffect } from "react";
+import BlogContainer from "./container";
+import Loading from "./loading";
+import styles from "./page.module.css";
 
 const Home = () => {
-  let blogs;
-  const fetchAllBlogs = () => {
-    blogs = getAllPosts("posts");
-  };
-  fetchAllBlogs();
+  const [loading, setLoading] = useState(true);
+  const [blogs, setBlogs] = useState([]);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const response = await fetch(`http://localhost:3000/api/posts`);
+        const fetchedBlogs = await response.json();
+        setBlogs(fetchedBlogs);
+        setLoading(false);
+      } catch (error) {
+        console.error("Error fetching blogs:", error);
+      }
+    };
+
+    fetchData();
+  }, []);
 
   return (
-    <div>
-      <BlogLists
-        id={blogs?.id}
-        title={blogs?.title}
-        description={blogs?.description}
-        blogs={blogs}
-      />
+    <div className={styles.container}>
+      {loading ? <Loading /> : <BlogContainer blogs={blogs} />}
     </div>
   );
 };

app/page.module.css

+.container {
+  padding-top: 3rem;
+}

app/singleblog/[id]/page.js

@@ -5,14 +5,13 @@ const SingleBlogApp = ({ params }) => {
   let blog;
   const fetchBlogsBySlug = () => {
     try {
-      console.log("sdkjfh", params.id);
       const blogPost = getPostById("posts", params.id);
       blog = blogPost[0];
-      console.log("fjh", blog);
     } catch (err) {
       console.log("error", err.message);
     }
   };
+
   fetchBlogsBySlug();
   return (
     <SingleBlog

components/base/card/styles.module.css

@@ -45,6 +45,7 @@
 .authorcontainer .cardbottom .authordescription .authorName {
   font-size: 18px;
   font-weight: 500;
+  line-height: 0;
 }
 .authorcontainer .cardbottom .authordescription .author-desc {
   display: flex;

components/base/header/index.js

@@ -4,28 +4,28 @@ import Icons from "@components/base/icons";
 import styles from "./styles.module.css";
 import PropTypes from "prop-types";
 
-function Header({ name, currentTheme, onThemeChange }) {
+function Header({ name, currentTheme, onSearch, onClose, onThemeChange }) {
   const handleTheme = () => {
-    // currentTheme = currentTheme === "light" ? "dark" : "light";
     onThemeChange(currentTheme);
   };
-  // const handleSearch = (value) => {
-  //   onSearch(value);
-  // };
-  // const handleClose = () => {
-  //   onClose("");
-  // };
+  const handleSearch = (value) => {
+    onSearch(value);
+  };
+  const handleClose = () => {
+    onClose("");
+  };
+
   return (
     <header className={styles.header}>
       <div className={styles.container}>
         <nav className={styles.navbar}>
           <Link className={styles["navbar-brand"]} href="/">
             <Icons name="newspaper" size="medium" classes="newspaper-icon" />
-            <h2>{name}</h2>
+            <h3>{name}</h3>
           </Link>
 
           <div className={styles.search}>
-            <Search />
+            <Search onSearch={handleSearch} onClose={handleClose} />
           </div>
 
           <div onClick={handleTheme} className={styles.themelight}>

components/base/header/styles.module.css

 .header {
   position: sticky;
   top: 57px;
-  height: 179px;
   z-index: 1000;
+  margin-bottom: 40px;
 }
 .header .container {
   background-color: var(--card-bg);
@@ -28,7 +28,7 @@
   display: flex;
   gap: 1rem;
 }
-.header .container .navbar .navbar-brand .search {
+.search {
   display: none;
 }
 @media screen and (min-width: 991px) {

components/base/icons/index.js

@@ -2,7 +2,7 @@ import PropTypes from "prop-types";
 import cn from "classnames";
 import styles from "./styles.module.css";
 
-const Icons = ({ name, size, classes }) => {
+const Icons = ({ name, size = 20, classes }) => {
   const icons = {
     search: (
       <svg
@@ -82,17 +82,6 @@ const Icons = ({ name, size, classes }) => {
         <path d="M552 64H112c-20.858 0-38.643 13.377-45.248 32H24c-13.255 0-24 10.745-24 24v272c0 30.928 25.072 56 56 56h496c13.255 0 24-10.745 24-24V88c0-13.255-10.745-24-24-24zM48 392V144h16v248c0 4.411-3.589 8-8 8s-8-3.589-8-8zm480 8H111.422c.374-2.614.578-5.283.578-8V112h416v288zM172 280h136c6.627 0 12-5.373 12-12v-96c0-6.627-5.373-12-12-12H172c-6.627 0-12 5.373-12 12v96c0 6.627 5.373 12 12 12zm28-80h80v40h-80v-40zm-40 140v-24c0-6.627 5.373-12 12-12h136c6.627 0 12 5.373 12 12v24c0 6.627-5.373 12-12 12H172c-6.627 0-12-5.373-12-12zm192 0v-24c0-6.627 5.373-12 12-12h104c6.627 0 12 5.373 12 12v24c0 6.627-5.373 12-12 12H364c-6.627 0-12-5.373-12-12zm0-144v-24c0-6.627 5.373-12 12-12h104c6.627 0 12 5.373 12 12v24c0 6.627-5.373 12-12 12H364c-6.627 0-12-5.373-12-12zm0 72v-24c0-6.627 5.373-12 12-12h104c6.627 0 12 5.373 12 12v24c0 6.627-5.373 12-12 12H364c-6.627 0-12-5.373-12-12z" />
       </svg>
     ),
-    // hamburger: (
-    //   <svg
-    //     xmlns="http://www.w3.org/2000/svg"
-    //     height="1.3em"
-    //     fill="currentColor"
-    //     viewBox="0 0 448 512"
-    //     stroke="currentColor"
-    //   >
-    //     <path d="M0 96C0 78.3 14.3 64 32 64H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H416c17.7 0 32 14.3 32 32z" />
-    //   </svg>
-    // ),
   };
   const classNames = cn({
     [styles[classes]]: classes,

components/base/search/index.js

@@ -18,7 +18,12 @@ const Search = ({ onSearch, onClose }) => {
     };
   }, [text]);
   const handleSearch = (value) => {
-    setText(value);
+    if (value !== "") {
+      setText(value);
+    } else {
+      setText("");
+      onSearch("");
+    }
   };
   const handleCustomClear = (e) => {
     e.preventDefault();

components/base/search/styles.module.css

@@ -12,6 +12,8 @@
   outline: none;
   padding-left: 3rem;
   font-size: 16px;
+  font-weight: 500;
+  color: var(--font-color-300);
 }
 .search .search-input::placeholder {
   color: #718096;

components/top-level/blog-lists/index.js

@@ -9,7 +9,6 @@ const BlogLists = ({ title, description, blogs }) => {
   const length = blogs.length;
   const itemsPerPage = 6;
   const [currentPage, setCurrentPage] = useState(1);
-
   // Calculate the start and end indices for the current page
   const startIndex = (currentPage - 1) * itemsPerPage;
   const endIndex = startIndex + itemsPerPage;

components/top-level/blog-lists/styles.module.css

@@ -18,11 +18,13 @@
 }
 .blog-container .row {
   display: grid;
-  grid-row-gap: 3rem;
+  justify-items: flex-start;
+  grid-row-gap: 2rem;
 }
 .blog-container .row .col {
   display: flex;
   align-self: normal;
+  justify-content: center;
   flex: 1 0 auto;
 }
 .pagination {
@@ -30,8 +32,9 @@
 }
 @media screen and (min-width: 768px) {
   .row {
-    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
+    grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
     justify-items: center;
+    grid-row-gap: 3rem;
   }
 }
 @media screen and (min-width: 1440px) {

components/top-level/single-blog/index.js

@@ -14,37 +14,36 @@ function SingleBlog({
   markdown,
 }) {
   return (
-    <>
-      <div className={styles["head-container"]}>
-        <div className={styles.headtitle}>
-          <h1 className={styles.title}>{title}</h1>
-        </div>
-        <div className={styles["blog-list"]}>
-          <ul>
-            <li>
-              Posted on&nbsp;
-              <span className={styles["list-bold"]}>{publishedDate}</span>
-            </li>
-            <li>
-              By&nbsp;
-              <a href="#" className={styles["list-bold"]}>
-                {author.name}
-              </a>
-            </li>
-            <li>
-              Published in&nbsp;
-              <a href="#" className={styles["list-bold"]}>
-                {category}
-              </a>
-            </li>
-            <li>
-              <a href="#" className={styles["list-bold"]}>
-                {readingTime}
-              </a>
-            </li>
-          </ul>
-        </div>
+    <div className={styles["container"]}>
+      <div className={styles.headtitle}>
+        <h1 className={styles.title}>{title}</h1>
       </div>
+      <div className={styles["blog-list"]}>
+        <ul>
+          <li>
+            Posted on&nbsp;
+            <span className={styles["list-bold"]}>{publishedDate}</span>
+          </li>
+          <li>
+            By&nbsp;
+            <a href="#" className={styles["list-bold"]}>
+              {author.name}
+            </a>
+          </li>
+          <li>
+            Published in&nbsp;
+            <a href="#" className={styles["list-bold"]}>
+              {category}
+            </a>
+          </li>
+          <li>
+            <a href="#" className={styles["list-bold"]}>
+              {readingTime}
+            </a>
+          </li>
+        </ul>
+      </div>
+
       <div className={styles["blog-container"]}>
         <div className={styles.blogimage}>
           <Image
@@ -65,7 +64,7 @@ function SingleBlog({
           </div>
         </div>
       </div>
-    </>
+    </div>
   );
 }
 

components/top-level/single-blog/single-blog.stories.js

@@ -20,7 +20,7 @@ export const singleBlog = {
     readingTime: "1 min read",
     categories: ["Fashion", "Beauty"],
     markdown: `
-## How to create an Art that shows the beauty in everyone ideas of flaws.
+### How to create an Art that shows the beauty in everyone ideas of flaws.
 
 Fusce faucibus ante vitae justo efficitur elementum.Donec et ipsum faucibus arcu ipsum elementum ,luctus justo. ac purus semper.Fusce
 faucibus ante vitae justo efficitur sed et elementum.Donec ipsum faucibus arcu elementum ,luctus justo. ac purus semper.Fusce faucibus ante
@@ -30,7 +30,7 @@ Fusce faucibus ante vitae justo efficitur elementum.Donec ipsum faucibus arcu ip
 ante vitae justo efficitur elementum.Donec ipsum faucibus arcu elementum ,luctus justo. ac purus semper.
 
 
-> ## For dull and lifeless skin, mix apple juice with honey. Apply a thin layer to your face, and leave it for 5 minutes.
+> ### For dull and lifeless skin, mix apple juice with honey. Apply a thin layer to your face, and leave it for 5 minutes.
 >
 > Kelvin edison
 
@@ -40,7 +40,7 @@ Fusce faucibus ante vitae justo efficitur elementum.Donec ipsum faucibus.Donec i
 
 
 
-## Fusce faucibus ante vitae justo efficitur
+### Fusce faucibus ante vitae justo efficitur
 
 Lorem faucibus fusce ante vitae justo efficitur elementum.Donec ipsum faucibus arcu elementum ,luctus justo. ac purus semper.Fusce faucibus ante
 vitae justo efficitur elementum.Donec ipsum faucibus.Donec ipsum faucibus arcu Donec ipsum faucibus ipsum arcu elementum ,luctus justo. ac purus semper.
@@ -50,7 +50,7 @@ vitae justo efficitur elementum.Donec ipsum faucibus.Donec ipsum faucibus arcu D
    3. Nam libero tempore, cum soluta nobis est eligendi optio.
    4. Sed ut perspiciatis unde omnis natus
 
-## Quisque sagittis lacus eu lorem sodales
+### Quisque sagittis lacus eu lorem sodales
 
 Lorem faucibus fusce ante vitae justo efficitur elementum.Donec ipsum faucibus arcu ipsum elementum ,luctus justo. ac purus semper.Fusce faucibus ante
 vitae justo efficitur elementum.Donec et ipsum faucibus.Donec et ipsum faucibus arcu.

components/top-level/single-blog/styles.module.css

+.container {
+  padding-top: 5rem;
+  padding-bottom: 3rem;
+}
+.headtitle,
+.blog-list ul {
+  padding: 0rem 2.3rem;
+}
 .blog-content {
   padding: 1rem;
   border-radius: 15px;
   margin-top: 2rem;
   font-size: 18px;
+  line-height: 1.2;
   background: var(--card-bg);
 }
 .blog-content p,
 .blog-content ol li {
-  font-size: clamp(0.8rem, 2rem, 1.1rem);
+  font-size: clamp(1rem, 0.8rem + 1vw, 1.2rem);
 }
 .blogimage {
   overflow: hidden;
@@ -28,12 +37,13 @@
   display: flex;
   flex-wrap: wrap;
   list-style: none;
-  line-height: 1em;
   gap: 1em;
-  padding-inline: 0.1rem;
-  font-weight: 500;
   color: var(--font-color-300);
 }
+.blog-list ul li {
+  font-size: clamp(1rem, 0.4rem + 0.5vw, 1.1rem);
+  line-height: 1;
+}
 .blog-list ul li a {
   text-decoration: none;
   color: var(--font-color-300);
@@ -53,10 +63,11 @@
   border-radius: 40px;
   color: #718096;
   font-weight: 400;
+  font-size: 17px;
 }
 .tag > span {
-  font-weight: bold;
-  font-size: 20px;
+  font-weight: 400;
+  font-size: 22px;
 }
 .tag p:hover {
   background: #5a67d8;
@@ -84,6 +95,11 @@
 }
 
 @media screen and (min-width: 768px) {
+  .headtitle,
+  .blog-list ul {
+    width: min(80rem, 90%);
+    padding: 0rem 3.5rem;
+  }
   .blog-content {
     padding: 3rem;
   }
@@ -92,9 +108,15 @@
   }
 }
 @media screen and (min-width: 1440px) {
+  .container {
+    padding-inline: 40px;
+  }
   .headtitle,
   .blog-list ul {
-    width: 70rem;
-    padding-inline: 6rem;
+    width: min(70rem, 90%);
+    margin: 0 auto;
+  }
+  .blog-list ul {
+    margin-top: 1rem;
   }
 }

context/index.js

@@ -7,6 +7,7 @@ export const useAppContext = () => useContext(ThemeContext);
 
 export const ThemeProvider = ({ children }) => {
   const [theme, setTheme] = useState("light");
+  const [input, setInput] = useState("");
 
   useEffect(() => {
     const storedTheme = localStorage.getItem("theme") || "light";
@@ -24,6 +25,8 @@ export const ThemeProvider = ({ children }) => {
   const contextValue = {
     theme,
     toggleTheme,
+    input,
+    setInput,
   };
 
   return (

package.json

@@ -17,17 +17,14 @@
     "classnames": "^2.3.2",
     "gray-matter": "^4.0.3",
     "next": "^14.0.3",
-    "next-themes": "^0.2.1",
     "path": "^0.12.7",
     "prettier": "^3.1.0",
-    "qs": "^6.11.2",
     "react": "^18",
     "react-dom": "^18",
     "react-icons": "^4.12.0",
     "react-markdown": "^9.0.1",
     "rehype-raw": "^7.0.0",
     "remark": "^15.0.1",
-    "remark-gfm": "^4.0.0",
     "remark-html": "^16.0.1"
   },
   "devDependencies": {

posts/blog1.md

@@ -5,7 +5,7 @@ title: "How to get a perfect start for beginning runners"
 description: "Lorem ipsum dolor sir amet consectetur ipsum adipisicing elit. Quis vitae sit."
 author:
   {
-    name: "Charlotte mia",
+    name: "Isabella ava",
     image: { url: "/images/a1.jpg", width: 80, height: 80 },
   }
 publishedDate: "2020-07-16"
@@ -15,7 +15,7 @@ categories: ["Fashion", "Beauty"]
 blogImage: { url: "/images/blogsingle.jpg", width: 1920, height: 500 }
 ---
 
-## How to create an Art that shows the beauty in everyone ideas of flaws.
+### How to create an Art that shows the beauty in everyone ideas of flaws.
 
 Fusce faucibus ante vitae justo efficitur elementum.Donec et ipsum faucibus arcu ipsum elementum ,luctus justo. ac purus semper.Fusce
 faucibus ante vitae justo efficitur sed et elementum.Donec ipsum faucibus arcu elementum ,luctus justo. ac purus semper.Fusce faucibus ante
@@ -24,14 +24,14 @@ vitae justo efficitur elementum.Donec ipsum faucibus arcu vitae justo efficitur
 Fusce faucibus ante vitae justo efficitur elementum.Donec ipsum faucibus arcu ipsum elementum ,luctus justo. ac purus semper.Fusce faucibus
 ante vitae justo efficitur elementum.Donec ipsum faucibus arcu elementum ,luctus justo. ac purus semper.
 
-> ## For dull and lifeless skin, mix apple juice with honey. Apply a thin layer to your face, and leave it for 5 minutes.
+> ### For dull and lifeless skin, mix apple juice with honey. Apply a thin layer to your face, and leave it for 5 minutes.
 >
 > Kelvin edison
 
 Lorem faucibus fusce ante vitae justo efficitur elementum.Donec ipsum faucibus arcu elementum ,luctus justo.ac purus semper.
 Fusce faucibus ante vitae justo efficitur elementum.Donec ipsum faucibus.Donec ipsum faucibus arcu elementum..
 
-## Fusce faucibus ante vitae justo efficitur
+### Fusce faucibus ante vitae justo efficitur
 
 Lorem faucibus fusce ante vitae justo efficitur elementum.Donec ipsum faucibus arcu elementum ,luctus justo. ac purus semper.Fusce faucibus ante
 vitae justo efficitur elementum.Donec ipsum faucibus.Donec ipsum faucibus arcu Donec ipsum faucibus ipsum arcu elementum ,luctus justo. ac purus semper.
@@ -41,7 +41,7 @@ vitae justo efficitur elementum.Donec ipsum faucibus.Donec ipsum faucibus arcu D
 3.  Nam libero tempore, cum soluta nobis est eligendi optio.
 4.  Sed ut perspiciatis unde omnis natus
 
-## Quisque sagittis lacus eu lorem sodales
+### Quisque sagittis lacus eu lorem sodales
 
 Lorem faucibus fusce ante vitae justo efficitur elementum.Donec ipsum faucibus arcu ipsum elementum ,luctus justo. ac purus semper.Fusce faucibus ante
 vitae justo efficitur elementum.Donec et ipsum faucibus.Donec et ipsum faucibus arcu.

posts/blog2.md

 ---
 id: 2
 image: { url: "/images/lifestyle2.jpg", width: 470, height: 300 }
-title: "How to get a perfect start for beginning runners"
+title: "Great tools to improve your personal blogging experience"
 description: "Lorem ipsum dolor sir amet consectetur ipsum adipisicing elit. Quis vitae sit."
 author:
   {
@@ -15,7 +15,7 @@ categories: ["Fashion", "Beauty"]
 blogImage: { url: "/images/blogsingle.jpg", width: 1920, height: 500 }
 ---
 
-## How to create an Art that shows the beauty in everyone ideas of flaws.
+### How to create an Art that shows the beauty in everyone ideas of flaws.
 
 Fusce faucibus ante vitae justo efficitur elementum.Donec et ipsum faucibus arcu ipsum elementum ,luctus justo. ac purus semper.Fusce
 faucibus ante vitae justo efficitur sed et elementum.Donec ipsum faucibus arcu elementum ,luctus justo. ac purus semper.Fusce faucibus ante
@@ -24,14 +24,14 @@ vitae justo efficitur elementum.Donec ipsum faucibus arcu vitae justo efficitur
 Fusce faucibus ante vitae justo efficitur elementum.Donec ipsum faucibus arcu ipsum elementum ,luctus justo. ac purus semper.Fusce faucibus
 ante vitae justo efficitur elementum.Donec ipsum faucibus arcu elementum ,luctus justo. ac purus semper.
 
-> ## For dull and lifeless skin, mix apple juice with honey. Apply a thin layer to your face, and leave it for 5 minutes.
+> ### For dull and lifeless skin, mix apple juice with honey. Apply a thin layer to your face, and leave it for 5 minutes.
 >
 > Kelvin edison
 
 Lorem faucibus fusce ante vitae justo efficitur elementum.Donec ipsum faucibus arcu elementum ,luctus justo.ac purus semper.
 Fusce faucibus ante vitae justo efficitur elementum.Donec ipsum faucibus.Donec ipsum faucibus arcu elementum..
 
-## Fusce faucibus ante vitae justo efficitur
+### Fusce faucibus ante vitae justo efficitur
 
 Lorem faucibus fusce ante vitae justo efficitur elementum.Donec ipsum faucibus arcu elementum ,luctus justo. ac purus semper.Fusce faucibus ante
 vitae justo efficitur elementum.Donec ipsum faucibus.Donec ipsum faucibus arcu Donec ipsum faucibus ipsum arcu elementum ,luctus justo. ac purus semper.
@@ -41,7 +41,7 @@ vitae justo efficitur elementum.Donec ipsum faucibus.Donec ipsum faucibus arcu D
 3.  Nam libero tempore, cum soluta nobis est eligendi optio.
 4.  Sed ut perspiciatis unde omnis natus
 
-## Quisque sagittis lacus eu lorem sodales
+### Quisque sagittis lacus eu lorem sodales
 
 Lorem faucibus fusce ante vitae justo efficitur elementum.Donec ipsum faucibus arcu ipsum elementum ,luctus justo. ac purus semper.Fusce faucibus ante
 vitae justo efficitur elementum.Donec et ipsum faucibus.Donec et ipsum faucibus arcu.

posts/blog3.md

 ---
 id: 3
 image: { url: "/images/lifestyle3.jpg", width: 470, height: 300 }
-title: "How to get a perfect start for beginning runners"
+title: "Blog Guide: How to Start a Personal Blog on WordPress"
 description: "Lorem ipsum dolor sir amet consectetur ipsum adipisicing elit. Quis vitae sit."
 author:
   {
-    name: "Charlotte mia",
+    name: "Isabella ava",
     image: { url: "/images/a3.jpg", width: 80, height: 80 },
   }
 publishedDate: "2020-07-16"
@@ -15,7 +15,7 @@ categories: ["Fashion", "Beauty"]
 blogImage: { url: "/images/blogsingle.jpg", width: 1920, height: 500 }
 ---
 
-## How to create an Art that shows the beauty in everyone ideas of flaws.
+### How to create an Art that shows the beauty in everyone ideas of flaws.
 
 Fusce faucibus ante vitae justo efficitur elementum.Donec et ipsum faucibus arcu ipsum elementum ,luctus justo. ac purus semper.Fusce
 faucibus ante vitae justo efficitur sed et elementum.Donec ipsum faucibus arcu elementum ,luctus justo. ac purus semper.Fusce faucibus ante
@@ -24,14 +24,14 @@ vitae justo efficitur elementum.Donec ipsum faucibus arcu vitae justo efficitur
 Fusce faucibus ante vitae justo efficitur elementum.Donec ipsum faucibus arcu ipsum elementum ,luctus justo. ac purus semper.Fusce faucibus
 ante vitae justo efficitur elementum.Donec ipsum faucibus arcu elementum ,luctus justo. ac purus semper.
 
-> ## For dull and lifeless skin, mix apple juice with honey. Apply a thin layer to your face, and leave it for 5 minutes.
+> ### For dull and lifeless skin, mix apple juice with honey. Apply a thin layer to your face, and leave it for 5 minutes.
 >
 > Kelvin edison
 
 Lorem faucibus fusce ante vitae justo efficitur elementum.Donec ipsum faucibus arcu elementum ,luctus justo.ac purus semper.
 Fusce faucibus ante vitae justo efficitur elementum.Donec ipsum faucibus.Donec ipsum faucibus arcu elementum..
 
-## Fusce faucibus ante vitae justo efficitur
+### Fusce faucibus ante vitae justo efficitur
 
 Lorem faucibus fusce ante vitae justo efficitur elementum.Donec ipsum faucibus arcu elementum ,luctus justo. ac purus semper.Fusce faucibus ante
 vitae justo efficitur elementum.Donec ipsum faucibus.Donec ipsum faucibus arcu Donec ipsum faucibus ipsum arcu elementum ,luctus justo. ac purus semper.
@@ -41,7 +41,7 @@ vitae justo efficitur elementum.Donec ipsum faucibus.Donec ipsum faucibus arcu D
 3.  Nam libero tempore, cum soluta nobis est eligendi optio.
 4.  Sed ut perspiciatis unde omnis natus
 
-## Quisque sagittis lacus eu lorem sodales
+### Quisque sagittis lacus eu lorem sodales
 
 Lorem faucibus fusce ante vitae justo efficitur elementum.Donec ipsum faucibus arcu ipsum elementum ,luctus justo. ac purus semper.Fusce faucibus ante
 vitae justo efficitur elementum.Donec et ipsum faucibus.Donec et ipsum faucibus arcu.

posts/blog4.md

 ---
 id: 4
 image: { url: "/images/lifestyle4.jpg", width: 470, height: 300 }
-title: "How to get a perfect start for beginning runners"
+title: "The technical setup when starting a personal blog"
 description: "Lorem ipsum dolor sir amet consectetur ipsum adipisicing elit. Quis vitae sit."
 author:
   {
@@ -15,7 +15,7 @@ categories: ["Fashion", "Beauty"]
 blogImage: { url: "/images/blogsingle.jpg", width: 1920, height: 500 }
 ---
 
-## How to create an Art that shows the beauty in everyone ideas of flaws.
+### How to create an Art that shows the beauty in everyone ideas of flaws.
 
 Fusce faucibus ante vitae justo efficitur elementum.Donec et ipsum faucibus arcu ipsum elementum ,luctus justo. ac purus semper.Fusce
 faucibus ante vitae justo efficitur sed et elementum.Donec ipsum faucibus arcu elementum ,luctus justo. ac purus semper.Fusce faucibus ante
@@ -24,14 +24,14 @@ vitae justo efficitur elementum.Donec ipsum faucibus arcu vitae justo efficitur
 Fusce faucibus ante vitae justo efficitur elementum.Donec ipsum faucibus arcu ipsum elementum ,luctus justo. ac purus semper.Fusce faucibus
 ante vitae justo efficitur elementum.Donec ipsum faucibus arcu elementum ,luctus justo. ac purus semper.
 
-> ## For dull and lifeless skin, mix apple juice with honey. Apply a thin layer to your face, and leave it for 5 minutes.
+> ### For dull and lifeless skin, mix apple juice with honey. Apply a thin layer to your face, and leave it for 5 minutes.
 >
 > Kelvin edison
 
 Lorem faucibus fusce ante vitae justo efficitur elementum.Donec ipsum faucibus arcu elementum ,luctus justo.ac purus semper.
 Fusce faucibus ante vitae justo efficitur elementum.Donec ipsum faucibus.Donec ipsum faucibus arcu elementum..
 
-## Fusce faucibus ante vitae justo efficitur
+### Fusce faucibus ante vitae justo efficitur
 
 Lorem faucibus fusce ante vitae justo efficitur elementum.Donec ipsum faucibus arcu elementum ,luctus justo. ac purus semper.Fusce faucibus ante
 vitae justo efficitur elementum.Donec ipsum faucibus.Donec ipsum faucibus arcu Donec ipsum faucibus ipsum arcu elementum ,luctus justo. ac purus semper.
@@ -41,7 +41,7 @@ vitae justo efficitur elementum.Donec ipsum faucibus.Donec ipsum faucibus arcu D
 3.  Nam libero tempore, cum soluta nobis est eligendi optio.
 4.  Sed ut perspiciatis unde omnis natus
 
-## Quisque sagittis lacus eu lorem sodales
+### Quisque sagittis lacus eu lorem sodales
 
 Lorem faucibus fusce ante vitae justo efficitur elementum.Donec ipsum faucibus arcu ipsum elementum ,luctus justo. ac purus semper.Fusce faucibus ante
 vitae justo efficitur elementum.Donec et ipsum faucibus.Donec et ipsum faucibus arcu.

posts/blog5.md

 ---
 id: 5
 image: { url: "/images/lifestyle5.jpg", width: 470, height: 300 }
-title: "How to get a perfect start for beginning runners"
+title: "3 New Outfit Formulas To Add To Your Capsule Wardrobe"
 description: "Lorem ipsum dolor sir amet consectetur ipsum adipisicing elit. Quis vitae sit."
 author:
-  {
-    name: "Charlotte mia",
-    image: { url: "/images/a1.jpg", width: 80, height: 80 },
-  }
+  { name: "Elizabeth", image: { url: "/images/a1.jpg", width: 80, height: 80 } }
 publishedDate: "2020-07-16"
 readingTime: "1 min read"
 category: "Fashion"
@@ -15,7 +12,7 @@ categories: ["Fashion", "Beauty"]
 blogImage: { url: "/images/blogsingle.jpg", width: 1920, height: 500 }
 ---
 
-## How to create an Art that shows the beauty in everyone ideas of flaws.
+### How to create an Art that shows the beauty in everyone ideas of flaws.
 
 Fusce faucibus ante vitae justo efficitur elementum.Donec et ipsum faucibus arcu ipsum elementum ,luctus justo. ac purus semper.Fusce
 faucibus ante vitae justo efficitur sed et elementum.Donec ipsum faucibus arcu elementum ,luctus justo. ac purus semper.Fusce faucibus ante
@@ -24,14 +21,14 @@ vitae justo efficitur elementum.Donec ipsum faucibus arcu vitae justo efficitur
 Fusce faucibus ante vitae justo efficitur elementum.Donec ipsum faucibus arcu ipsum elementum ,luctus justo. ac purus semper.Fusce faucibus
 ante vitae justo efficitur elementum.Donec ipsum faucibus arcu elementum ,luctus justo. ac purus semper.
 
-> ## For dull and lifeless skin, mix apple juice with honey. Apply a thin layer to your face, and leave it for 5 minutes.
+> ### For dull and lifeless skin, mix apple juice with honey. Apply a thin layer to your face, and leave it for 5 minutes.
 >
 > Kelvin edison
 
 Lorem faucibus fusce ante vitae justo efficitur elementum.Donec ipsum faucibus arcu elementum ,luctus justo.ac purus semper.
 Fusce faucibus ante vitae justo efficitur elementum.Donec ipsum faucibus.Donec ipsum faucibus arcu elementum..
 
-## Fusce faucibus ante vitae justo efficitur
+### Fusce faucibus ante vitae justo efficitur
 
 Lorem faucibus fusce ante vitae justo efficitur elementum.Donec ipsum faucibus arcu elementum ,luctus justo. ac purus semper.Fusce faucibus ante
 vitae justo efficitur elementum.Donec ipsum faucibus.Donec ipsum faucibus arcu Donec ipsum faucibus ipsum arcu elementum ,luctus justo. ac purus semper.
@@ -41,7 +38,7 @@ vitae justo efficitur elementum.Donec ipsum faucibus.Donec ipsum faucibus arcu D
 3.  Nam libero tempore, cum soluta nobis est eligendi optio.
 4.  Sed ut perspiciatis unde omnis natus
 
-## Quisque sagittis lacus eu lorem sodales
+### Quisque sagittis lacus eu lorem sodales
 
 Lorem faucibus fusce ante vitae justo efficitur elementum.Donec ipsum faucibus arcu ipsum elementum ,luctus justo. ac purus semper.Fusce faucibus ante
 vitae justo efficitur elementum.Donec et ipsum faucibus.Donec et ipsum faucibus arcu.

posts/blog6.md

 ---
 id: 6
 image: { url: "/images/lifestyle6.jpg", width: 470, height: 300 }
-title: "How to get a perfect start for beginning runners"
+title: "Blog Guide: How to Start a Personal Blog on WordPress"
 description: "Lorem ipsum dolor sir amet consectetur ipsum adipisicing elit. Quis vitae sit."
 author:
   {
-    name: "Charlotte mia",
+    name: "Johnson smith",
     image: { url: "/images/a3.jpg", width: 80, height: 80 },
   }
 publishedDate: "2020-07-16"
@@ -15,7 +15,7 @@ categories: ["Fashion", "Beauty"]
 blogImage: { url: "/images/blogsingle.jpg", width: 1920, height: 500 }
 ---
 
-## How to create an Art that shows the beauty in everyone ideas of flaws.
+### How to create an Art that shows the beauty in everyone ideas of flaws.
 
 Fusce faucibus ante vitae justo efficitur elementum.Donec et ipsum faucibus arcu ipsum elementum ,luctus justo. ac purus semper.Fusce
 faucibus ante vitae justo efficitur sed et elementum.Donec ipsum faucibus arcu elementum ,luctus justo. ac purus semper.Fusce faucibus ante
@@ -24,14 +24,14 @@ vitae justo efficitur elementum.Donec ipsum faucibus arcu vitae justo efficitur
 Fusce faucibus ante vitae justo efficitur elementum.Donec ipsum faucibus arcu ipsum elementum ,luctus justo. ac purus semper.Fusce faucibus
 ante vitae justo efficitur elementum.Donec ipsum faucibus arcu elementum ,luctus justo. ac purus semper.
 
-> ## For dull and lifeless skin, mix apple juice with honey. Apply a thin layer to your face, and leave it for 5 minutes.
+> ### For dull and lifeless skin, mix apple juice with honey. Apply a thin layer to your face, and leave it for 5 minutes.
 >
 > Kelvin edison
 
 Lorem faucibus fusce ante vitae justo efficitur elementum.Donec ipsum faucibus arcu elementum ,luctus justo.ac purus semper.
 Fusce faucibus ante vitae justo efficitur elementum.Donec ipsum faucibus.Donec ipsum faucibus arcu elementum..
 
-## Fusce faucibus ante vitae justo efficitur
+### Fusce faucibus ante vitae justo efficitur
 
 Lorem faucibus fusce ante vitae justo efficitur elementum.Donec ipsum faucibus arcu elementum ,luctus justo. ac purus semper.Fusce faucibus ante
 vitae justo efficitur elementum.Donec ipsum faucibus.Donec ipsum faucibus arcu Donec ipsum faucibus ipsum arcu elementum ,luctus justo. ac purus semper.
@@ -41,7 +41,7 @@ vitae justo efficitur elementum.Donec ipsum faucibus.Donec ipsum faucibus arcu D
 3.  Nam libero tempore, cum soluta nobis est eligendi optio.
 4.  Sed ut perspiciatis unde omnis natus
 
-## Quisque sagittis lacus eu lorem sodales
+### Quisque sagittis lacus eu lorem sodales
 
 Lorem faucibus fusce ante vitae justo efficitur elementum.Donec ipsum faucibus arcu ipsum elementum ,luctus justo. ac purus semper.Fusce faucibus ante
 vitae justo efficitur elementum.Donec et ipsum faucibus.Donec et ipsum faucibus arcu.

posts/blog7.md

@@ -4,10 +4,7 @@ image: { url: "/images/lifestyle7.jpg", width: 470, height: 300 }
 title: "How to get a perfect start for beginning runners"
 description: "Lorem ipsum dolor sir amet consectetur ipsum adipisicing elit. Quis vitae sit."
 author:
-  {
-    name: "Charlotte mia",
-    image: { url: "/images/a1.jpg", width: 80, height: 80 },
-  }
+  { name: "Eva maria", image: { url: "/images/a1.jpg", width: 80, height: 80 } }
 publishedDate: "2020-07-16"
 readingTime: "1 min read"
 category: "Fashion"
@@ -15,7 +12,7 @@ categories: ["Fashion", "Beauty"]
 blogImage: { url: "/images/blogsingle.jpg", width: 1920, height: 500 }
 ---
 
-## How to create an Art that shows the beauty in everyone ideas of flaws.
+### How to create an Art that shows the beauty in everyone ideas of flaws.
 
 Fusce faucibus ante vitae justo efficitur elementum.Donec et ipsum faucibus arcu ipsum elementum ,luctus justo. ac purus semper.Fusce
 faucibus ante vitae justo efficitur sed et elementum.Donec ipsum faucibus arcu elementum ,luctus justo. ac purus semper.Fusce faucibus ante
@@ -24,14 +21,14 @@ vitae justo efficitur elementum.Donec ipsum faucibus arcu vitae justo efficitur
 Fusce faucibus ante vitae justo efficitur elementum.Donec ipsum faucibus arcu ipsum elementum ,luctus justo. ac purus semper.Fusce faucibus
 ante vitae justo efficitur elementum.Donec ipsum faucibus arcu elementum ,luctus justo. ac purus semper.
 
-> ## For dull and lifeless skin, mix apple juice with honey. Apply a thin layer to your face, and leave it for 5 minutes.
+> ### For dull and lifeless skin, mix apple juice with honey. Apply a thin layer to your face, and leave it for 5 minutes.
 >
 > Kelvin edison
 
 Lorem faucibus fusce ante vitae justo efficitur elementum.Donec ipsum faucibus arcu elementum ,luctus justo.ac purus semper.
 Fusce faucibus ante vitae justo efficitur elementum.Donec ipsum faucibus.Donec ipsum faucibus arcu elementum..
 
-## Fusce faucibus ante vitae justo efficitur
+### Fusce faucibus ante vitae justo efficitur
 
 Lorem faucibus fusce ante vitae justo efficitur elementum.Donec ipsum faucibus arcu elementum ,luctus justo. ac purus semper.Fusce faucibus ante
 vitae justo efficitur elementum.Donec ipsum faucibus.Donec ipsum faucibus arcu Donec ipsum faucibus ipsum arcu elementum ,luctus justo. ac purus semper.
@@ -41,7 +38,7 @@ vitae justo efficitur elementum.Donec ipsum faucibus.Donec ipsum faucibus arcu D
 3.  Nam libero tempore, cum soluta nobis est eligendi optio.
 4.  Sed ut perspiciatis unde omnis natus
 
-## Quisque sagittis lacus eu lorem sodales
+### Quisque sagittis lacus eu lorem sodales
 
 Lorem faucibus fusce ante vitae justo efficitur elementum.Donec ipsum faucibus arcu ipsum elementum ,luctus justo. ac purus semper.Fusce faucibus ante
 vitae justo efficitur elementum.Donec et ipsum faucibus.Donec et ipsum faucibus arcu.

posts/blog8.md

 ---
 id: 8
 image: { url: "/images/lifestyle8.jpg", width: 470, height: 300 }
-title: "How to get a perfect start for beginning runners"
+title: "Great tools to improve your personal blogging experience"
 description: "Lorem ipsum dolor sir amet consectetur ipsum adipisicing elit. Quis vitae sit."
 author:
-  {
-    name: "Charlotte mia",
-    image: { url: "/images/a2.jpg", width: 80, height: 80 },
-  }
+  { name: "Julie mia", image: { url: "/images/a2.jpg", width: 80, height: 80 } }
 publishedDate: "2020-07-16"
 readingTime: "1 min read"
 category: "Fashion"
@@ -15,7 +12,7 @@ categories: ["Fashion", "Beauty"]
 blogImage: { url: "/images/blogsingle.jpg", width: 1920, height: 500 }
 ---
 
-## How to create an Art that shows the beauty in everyone ideas of flaws.
+### How to create an Art that shows the beauty in everyone ideas of flaws.
 
 Fusce faucibus ante vitae justo efficitur elementum.Donec et ipsum faucibus arcu ipsum elementum ,luctus justo. ac purus semper.Fusce
 faucibus ante vitae justo efficitur sed et elementum.Donec ipsum faucibus arcu elementum ,luctus justo. ac purus semper.Fusce faucibus ante
@@ -24,14 +21,14 @@ vitae justo efficitur elementum.Donec ipsum faucibus arcu vitae justo efficitur
 Fusce faucibus ante vitae justo efficitur elementum.Donec ipsum faucibus arcu ipsum elementum ,luctus justo. ac purus semper.Fusce faucibus
 ante vitae justo efficitur elementum.Donec ipsum faucibus arcu elementum ,luctus justo. ac purus semper.
 
-> ## For dull and lifeless skin, mix apple juice with honey. Apply a thin layer to your face, and leave it for 5 minutes.
+> ### For dull and lifeless skin, mix apple juice with honey. Apply a thin layer to your face, and leave it for 5 minutes.
 >
 > Kelvin edison
 
 Lorem faucibus fusce ante vitae justo efficitur elementum.Donec ipsum faucibus arcu elementum ,luctus justo.ac purus semper.
 Fusce faucibus ante vitae justo efficitur elementum.Donec ipsum faucibus.Donec ipsum faucibus arcu elementum..
 
-## Fusce faucibus ante vitae justo efficitur
+### Fusce faucibus ante vitae justo efficitur
 
 Lorem faucibus fusce ante vitae justo efficitur elementum.Donec ipsum faucibus arcu elementum ,luctus justo. ac purus semper.Fusce faucibus ante
 vitae justo efficitur elementum.Donec ipsum faucibus.Donec ipsum faucibus arcu Donec ipsum faucibus ipsum arcu elementum ,luctus justo. ac purus semper.
@@ -41,7 +38,7 @@ vitae justo efficitur elementum.Donec ipsum faucibus.Donec ipsum faucibus arcu D
 3.  Nam libero tempore, cum soluta nobis est eligendi optio.
 4.  Sed ut perspiciatis unde omnis natus
 
-## Quisque sagittis lacus eu lorem sodales
+### Quisque sagittis lacus eu lorem sodales
 
 Lorem faucibus fusce ante vitae justo efficitur elementum.Donec ipsum faucibus arcu ipsum elementum ,luctus justo. ac purus semper.Fusce faucibus ante
 vitae justo efficitur elementum.Donec et ipsum faucibus.Donec et ipsum faucibus arcu.

posts/blog9.md

@@ -5,7 +5,7 @@ title: "How to get a perfect start for beginning runners"
 description: "Lorem ipsum dolor sir amet consectetur ipsum adipisicing elit. Quis vitae sit."
 author:
   {
-    name: "Charlotte mia",
+    name: "Liza ethan",
     image: { url: "/images/a1.jpg", width: 80, height: 80 },
   }
 publishedDate: "2020-07-16"
@@ -15,7 +15,7 @@ categories: ["Fashion", "Beauty"]
 blogImage: { url: "/images/blogsingle.jpg", width: 1920, height: 500 }
 ---
 
-## How to create an Art that shows the beauty in everyone ideas of flaws.
+### How to create an Art that shows the beauty in everyone ideas of flaws.
 
 Fusce faucibus ante vitae justo efficitur elementum.Donec et ipsum faucibus arcu ipsum elementum ,luctus justo. ac purus semper.Fusce
 faucibus ante vitae justo efficitur sed et elementum.Donec ipsum faucibus arcu elementum ,luctus justo. ac purus semper.Fusce faucibus ante
@@ -24,14 +24,14 @@ vitae justo efficitur elementum.Donec ipsum faucibus arcu vitae justo efficitur
 Fusce faucibus ante vitae justo efficitur elementum.Donec ipsum faucibus arcu ipsum elementum ,luctus justo. ac purus semper.Fusce faucibus
 ante vitae justo efficitur elementum.Donec ipsum faucibus arcu elementum ,luctus justo. ac purus semper.
 
-> ## For dull and lifeless skin, mix apple juice with honey. Apply a thin layer to your face, and leave it for 5 minutes.
+> ### For dull and lifeless skin, mix apple juice with honey. Apply a thin layer to your face, and leave it for 5 minutes.
 >
 > Kelvin edison
 
 Lorem faucibus fusce ante vitae justo efficitur elementum.Donec ipsum faucibus arcu elementum ,luctus justo.ac purus semper.
 Fusce faucibus ante vitae justo efficitur elementum.Donec ipsum faucibus.Donec ipsum faucibus arcu elementum..
 
-## Fusce faucibus ante vitae justo efficitur
+### Fusce faucibus ante vitae justo efficitur
 
 Lorem faucibus fusce ante vitae justo efficitur elementum.Donec ipsum faucibus arcu elementum ,luctus justo. ac purus semper.Fusce faucibus ante
 vitae justo efficitur elementum.Donec ipsum faucibus.Donec ipsum faucibus arcu Donec ipsum faucibus ipsum arcu elementum ,luctus justo. ac purus semper.
@@ -41,7 +41,7 @@ vitae justo efficitur elementum.Donec ipsum faucibus.Donec ipsum faucibus arcu D
 3.  Nam libero tempore, cum soluta nobis est eligendi optio.
 4.  Sed ut perspiciatis unde omnis natus
 
-## Quisque sagittis lacus eu lorem sodales
+### Quisque sagittis lacus eu lorem sodales
 
 Lorem faucibus fusce ante vitae justo efficitur elementum.Donec ipsum faucibus arcu ipsum elementum ,luctus justo. ac purus semper.Fusce faucibus ante
 vitae justo efficitur elementum.Donec et ipsum faucibus.Donec et ipsum faucibus arcu.