diff --git a/index.html b/index.html
new file mode 100644
index 000000000..4bb654cb0
--- /dev/null
+++ b/index.html
@@ -0,0 +1,743 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title>Revera</title>
+    <link
+      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
+      rel="stylesheet"
+      integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
+      crossorigin="anonymous"
+    />
+    <link rel="stylesheet" type="text/css" href="styles/style.css" />
+  </head>
+  <body>
+    <div id="page">
+      <header class="site-header container">
+        <div class="row">
+          <nav class="navbar navbar-expand-lg">
+            <div class="col-sm-4">
+              <h1>
+                <a
+                  href="#"
+                  class="px-3 fw-semibold text-uppercase text-reset link-offset-2 link-underline link-underline-opacity-0"
+                  >revera</a
+                >
+              </h1>
+            </div>
+            <div class="container-fluid col-sm-8">
+              <button
+                class="navbar-toggler"
+                type="button"
+                data-bs-toggle="collapse"
+                data-bs-target="#navbarSupportedContent"
+                aria-controls="navbarSupportedContent"
+                aria-expanded="false"
+                aria-label="Toggle navigation"
+              >
+                <span class="navbar-toggler-icon"></span>
+              </button>
+              <div class="collapse navbar-collapse" id="navbarSupportedContent">
+                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+                  <li class="nav-item">
+                    <a class="nav-link active" aria-current="page" href="#"
+                      >Home</a
+                    >
+                  </li>
+                  <li class="nav-item">
+                    <a class="nav-link" href="#">About</a>
+                  </li>
+                  <li class="nav-item">
+                    <a class="nav-link" href="#">Sample Page</a>
+                  </li>
+                  <li class="nav-item">
+                    <a class="nav-link" href="#">Portfolio</a>
+                  </li>
+                  <li class="nav-item">
+                    <a class="nav-link" href="#">Blog</a>
+                  </li>
+                  <li class="nav-item dropdown">
+                    <a
+                      class="nav-link dropdown-toggle"
+                      href="#"
+                      role="button"
+                      data-bs-toggle="dropdown"
+                      aria-expanded="false"
+                    >
+                      Parent Page
+                    </a>
+                    <ul class="dropdown-menu">
+                      <li><a class="dropdown-item" href="#">Full Page</a></li>
+                      <li><hr class="dropdown-divider" /></li>
+                      <li>
+                        <a class="dropdown-item" href="#">Child Page 1</a>
+                      </li>
+                      <li><hr class="dropdown-divider" /></li>
+                      <li>
+                        <a class="dropdown-item" href="#">Child Page 2</a>
+                      </li>
+                    </ul>
+                  </li>
+                  <li class="nav-item">
+                    <a class="nav-link" href="#">Contact</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </nav>
+        </div>
+      </header>
+      <div id="slide" class="flexslider">
+        <main>
+          <div
+            id="myCarousel"
+            class="carousel slide mb-6"
+            data-bs-ride="carousel"
+          >
+            <div class="carousel-indicators">
+              <button
+                type="button"
+                data-bs-target="#myCarousel"
+                data-bs-slide-to="0"
+                class=""
+                aria-label="Slide 1"
+              ></button>
+              <button
+                type="button"
+                data-bs-target="#myCarousel"
+                data-bs-slide-to="1"
+                aria-label="Slide 2"
+                class="active"
+                aria-current="true"
+              ></button>
+              <button
+                type="button"
+                data-bs-target="#myCarousel"
+                data-bs-slide-to="2"
+                aria-label="Slide 3"
+                class=""
+              ></button>
+              <button
+                type="button"
+                data-bs-target="#myCarousel"
+                data-bs-slide-to="3"
+                aria-label="Slide 4"
+                class=""
+              ></button>
+            </div>
+            <div class="carousel-inner">
+              <div class="carousel-item">
+                <img
+                  class="bd-placeholder-img"
+                  style="filter: grayscale(1)"
+                  width="100%"
+                  height="100%"
+                  src="https://web.archive.org/web/20180109051150im_/http://demo.fabthemes.com/revera/files/2013/08/wallpaper-939317-1280x550.jpg"
+                  aria-hidden="true"
+                  preserveAspectRatio="xMidYMid slice"
+                  focusable="false"
+                /><rect
+                  width="100%"
+                  height="100%"
+                  fill="var(--bs-secondary-color)"
+                ></rect>
+                <div class="container">
+                  <div class="carousel-caption d-flex flex-column">
+                    <h1>Example headline.</h1>
+                    <p class="opacity-75">
+                      Some representative placeholder content for the first
+                      slide of the carousel.
+                    </p>
+                    <p>
+                      <a
+                        class="opacity-75 rounded-0 btn btn-lg text-light text-uppercase border border-light"
+                        href="#"
+                        >Sign up today</a
+                      >
+                    </p>
+                  </div>
+                </div>
+              </div>
+              <div class="carousel-item active">
+                <img
+                  class="bd-placeholder-img"
+                  style="filter: grayscale(1)"
+                  width="100%"
+                  height="100%"
+                  src="https://web.archive.org/web/20180109051150im_/http://demo.fabthemes.com/revera/files/2013/08/beautiful_poppies-wallpaper-1920x1080-1280x550.jpg"
+                  aria-hidden="true"
+                  preserveAspectRatio="xMidYMid slice"
+                  focusable="false"
+                /><rect
+                  width="100%"
+                  height="100%"
+                  fill="var(--bs-secondary-color)"
+                ></rect>
+                <div class="container">
+                  <div class="carousel-caption d-flex flex-column">
+                    <h1>Another example headline.</h1>
+                    <p>
+                      Some representative placeholder content for the second
+                      slide of the carousel.
+                    </p>
+                    <p>
+                      <a
+                        class="opacity-75 rounded-0 btn btn-lg text-light text-uppercase border border-light"
+                        href="#"
+                        >Learn more</a
+                      >
+                    </p>
+                  </div>
+                </div>
+              </div>
+              <div class="carousel-item">
+                <img
+                  class="bd-placeholder-img"
+                  style="filter: grayscale(1)"
+                  width="100%"
+                  height="100%"
+                  src="https://web.archive.org/web/20180109051150im_/http://demo.fabthemes.com/revera/files/2013/08/5824862885_d6ba1e611f_o-1280x550.jpg"
+                  aria-hidden="true"
+                  preserveAspectRatio="xMidYMid slice"
+                  focusable="false"
+                /><rect
+                  width="100%"
+                  height="100%"
+                  fill="var(--bs-secondary-color)"
+                ></rect>
+                <div class="container">
+                  <div class="carousel-caption d-flex flex-column">
+                    <h1>One more for good measure.</h1>
+                    <p>
+                      Some representative placeholder content for the third
+                      slide of this carousel.
+                    </p>
+                    <p>
+                      <a
+                        class="opacity-75 rounded-0 btn btn-lg text-light text-uppercase border border-light"
+                        href="#"
+                        >Browse gallery</a
+                      >
+                    </p>
+                  </div>
+                </div>
+              </div>
+              <div class="carousel-item">
+                <img
+                  class="bd-placeholder-img"
+                  style="filter: grayscale(1)"
+                  width="100%"
+                  height="100%"
+                  src="https://web.archive.org/web/20180109051150im_/http://demo.fabthemes.com/revera/files/2013/08/4203004253_2f65aff7be_o-1280x550.jpg"
+                  aria-hidden="true"
+                  preserveAspectRatio="xMidYMid slice"
+                  focusable="false"
+                /><rect
+                  width="100%"
+                  height="100%"
+                  fill="var(--bs-secondary-color)"
+                ></rect>
+                <div class="container">
+                  <div
+                    class="carousel-caption d-flex flex-column justify-content-center"
+                  >
+                    <h1>One more for good measure.</h1>
+                    <p>
+                      Some representative placeholder content for the third
+                      slide of this carousel.
+                    </p>
+                    <p>
+                      <a
+                        class="opacity-75 rounded-0 btn btn-lg text-light text-uppercase border border-light"
+                        href="#"
+                        >Browse gallery</a
+                      >
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <button
+              class="carousel-control-prev"
+              style="opacity: 1"
+              type="button"
+              data-bs-target="#myCarousel"
+              data-bs-slide="prev"
+            >
+              <span
+                class="carousel-control-prev-icon"
+                style="height: 100px; width: 50px; background-color: #ed564b"
+                aria-hidden="true"
+              ></span>
+              <span class="visually-hidden">Previous</span>
+            </button>
+            <button
+              class="carousel-control-next"
+              style="opacity: 1"
+              type="button"
+              data-bs-target="#myCarousel"
+              data-bs-slide="next"
+            >
+              <span
+                class="carousel-control-next-icon"
+                style="height: 100px; width: 50px; background-color: #ed564b"
+                aria-hidden="true"
+              ></span>
+              <span class="visually-hidden">Next</span>
+            </button>
+          </div>
+          <div class="text-center">
+            <div
+              class="row py-3"
+              style="background-color: #ed564b; color: white"
+            >
+              <div class="col-lg-4 pt-3">
+                <svg
+                  class="bd-placeholder-img rounded-circle"
+                  width="140"
+                  height="140"
+                  xmlns="http://www.w3.org/2000/svg"
+                  role="img"
+                  aria-label="Placeholder"
+                  preserveAspectRatio="xMidYMid slice"
+                  focusable="false"
+                >
+                  <title>Placeholder</title>
+                  <rect
+                    width="100%"
+                    height="100%"
+                    fill="var(--bs-secondary-color)"
+                  ></rect>
+                </svg>
+                <h2 class="fw-normal">Heading</h2>
+                <p>
+                  Some representative placeholder content for the three columns
+                  of text below the carousel. This is the first column.
+                </p>
+              </div>
+              <!-- /.col-lg-4 -->
+              <div class="col-lg-4 pt-3">
+                <svg
+                  class="bd-placeholder-img rounded-circle"
+                  width="140"
+                  height="140"
+                  xmlns="http://www.w3.org/2000/svg"
+                  role="img"
+                  aria-label="Placeholder"
+                  preserveAspectRatio="xMidYMid slice"
+                  focusable="false"
+                >
+                  <title>Placeholder</title>
+                  <rect
+                    width="100%"
+                    height="100%"
+                    fill="var(--bs-secondary-color)"
+                  ></rect>
+                </svg>
+                <h2 class="fw-normal">Heading</h2>
+                <p>
+                  Another exciting bit of representative placeholder content.
+                  This time, we've moved on to the second column.
+                </p>
+              </div>
+              <!-- /.col-lg-4 -->
+              <div class="col-lg-4 pt-3">
+                <svg
+                  class="bd-placeholder-img rounded-circle"
+                  width="140"
+                  height="140"
+                  xmlns="http://www.w3.org/2000/svg"
+                  role="img"
+                  aria-label="Placeholder"
+                  preserveAspectRatio="xMidYMid slice"
+                  focusable="false"
+                >
+                  <title>Placeholder</title>
+                  <rect
+                    width="100%"
+                    height="100%"
+                    fill="var(--bs-secondary-color)"
+                  ></rect>
+                </svg>
+                <h2 class="fw-normal">Heading</h2>
+                <p>
+                  And lastly this, the third column of representative
+                  placeholder content.
+                </p>
+              </div>
+              <!-- /.col-lg-4 -->
+            </div>
+          </div>
+        </main>
+      </div>
+      <div id="posts p-3" class="site-content">
+        <div id="first-list">
+          <div class="px-5 pt-4">
+            <p class="h3 fs-5 fw-bold">LATEST PROJECTS</p>
+            <p class="h4 fs-6 fw-bold text-secondary">
+              FEW OF THE LATEST PORTFOLIO ITEMS
+            </p>
+          </div>
+          <hr class="featurette-divider mx-4" />
+          <div
+            class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-md-4 g-3 p-5"
+          >
+            <div class="col">
+              <div class="card shadow-sm border border-0 shadow-none">
+                <svg
+                  class="rounded-0 bd-placeholder-img card-img-top"
+                  width="100%"
+                  xmlns="http://www.w3.org/2000/svg"
+                  role="img"
+                  aria-label="Placeholder: Thumbnail"
+                  preserveAspectRatio="xMidYMid slice"
+                  focusable="false"
+                >
+                  <title>Placeholder</title>
+                  <rect width="100%" height="100%" fill="#55595c"></rect>
+                  <text x="50%" y="50%" fill="#eceeef" dy=".3em">
+                    Thumbnail
+                  </text>
+                </svg>
+                <div class="card-body">
+                  <p class="card-text">
+                    This is a wider card with supporting text below as a natural
+                    lead-in to additional content. This content is a little bit
+                    longer.
+                  </p>
+                </div>
+              </div>
+            </div>
+            <div class="col">
+              <div class="card shadow-sm border-0 shadow-none">
+                <svg
+                  class="rounded-0 bd-placeholder-img card-img-top"
+                  width="100%"
+                  xmlns="http://www.w3.org/2000/svg"
+                  role="img"
+                  aria-label="Placeholder: Thumbnail"
+                  preserveAspectRatio="xMidYMid slice"
+                  focusable="false"
+                >
+                  <title>Placeholder</title>
+                  <rect width="100%" height="100%" fill="#55595c"></rect>
+                  <text x="50%" y="50%" fill="#eceeef" dy=".3em">
+                    Thumbnail
+                  </text>
+                </svg>
+                <div class="card-body">
+                  <p class="card-text">
+                    This is a wider card with supporting text below as a natural
+                    lead-in to additional content. This content is a little bit
+                    longer.
+                  </p>
+                </div>
+              </div>
+            </div>
+            <div class="col">
+              <div class="card shadow-sm border-0 shadow-none">
+                <svg
+                  class="rounded-0bd-placeholder-img card-img-top"
+                  width="100%"
+                  xmlns="http://www.w3.org/2000/svg"
+                  role="img"
+                  aria-label="Placeholder: Thumbnail"
+                  preserveAspectRatio="xMidYMid slice"
+                  focusable="false"
+                >
+                  <title>Placeholder</title>
+                  <rect width="100%" height="100%" fill="#55595c"></rect>
+                  <text x="50%" y="50%" fill="#eceeef" dy=".3em">
+                    Thumbnail
+                  </text>
+                </svg>
+                <div class="card-body">
+                  <p class="card-text">
+                    This is a wider card with supporting text below as a natural
+                    lead-in to additional content. This content is a little bit
+                    longer.
+                  </p>
+                </div>
+              </div>
+            </div>
+            <div class="col">
+              <div class="card shadow-sm border-0 shadow-none">
+                <svg
+                  class="rounded-0 bd-placeholder-img card-img-top"
+                  width="100%"
+                  xmlns="http://www.w3.org/2000/svg"
+                  role="img"
+                  aria-label="Placeholder: Thumbnail"
+                  preserveAspectRatio="xMidYMid slice"
+                  focusable="false"
+                >
+                  <title>Placeholder</title>
+                  <rect width="100%" height="100%" fill="#55595c"></rect>
+                  <text x="50%" y="50%" fill="#eceeef" dy=".3em">
+                    Thumbnail
+                  </text>
+                </svg>
+                <div class="card-body">
+                  <p class="card-text">
+                    This is a wider card with supporting text below as a natural
+                    lead-in to additional content. This content is a little bit
+                    longer.
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div id="second-list">
+          <div class="px-5 pt-4">
+            <p class="h3 fs-5 fw-bold">LATEST ARTICLES</p>
+            <p class="h4 fs-6 fw-bold text-secondary">
+              LATEST POSTS FROM THE BLOG
+            </p>
+          </div>
+          <hr class="featurette-divider mx-4" />
+          <div
+            class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-md-4 g-3 p-5"
+          >
+            <div class="col">
+              <div class="card shadow-sm border-0 shadow-none">
+                <svg
+                  class="rounded-0 bd-placeholder-img card-img-top"
+                  width="100%"
+                  xmlns="http://www.w3.org/2000/svg"
+                  role="img"
+                  aria-label="Placeholder: Thumbnail"
+                  preserveAspectRatio="xMidYMid slice"
+                  focusable="false"
+                >
+                  <title>Placeholder</title>
+                  <rect width="100%" height="100%" fill="#55595c"></rect>
+                  <text x="50%" y="50%" fill="#eceeef" dy=".3em">
+                    Thumbnail
+                  </text>
+                </svg>
+                <div class="card-body">
+                  <p class="card-text">
+                    This is a wider card with supporting text below as a natural
+                    lead-in to additional content. This content is a little bit
+                    longer.
+                  </p>
+                  <div class="mb-1 text-body-secondary fw-bold">
+                    POSTED ON
+                    <span style="color: #ed564b">AUGUST 19, 2013</span> BY ADMIN
+                  </div>
+                  <p>
+                    Duis tempus leo vitae ipsum viverra, blandit condimentum
+                    sapien porttitor. Duis porttitor sed metus eget mollis.
+                    Curabitur bibendum imperdiet tortor, ut pulvinar purus
+                    elementum nec. Suspendisse at erat luctus; hendrerit sapien
+                    sed, consectetur erat. Maecenas dignissim suscipit orci at
+                    molestie. Aenean fringilla dolor vitae lacus lacinia
+                    eleifend. Suspendisse et libero nunc. Etiam mauris tortor,
+                    pharetra [...]
+                  </p>
+                </div>
+              </div>
+            </div>
+            <div class="col">
+              <div class="card shadow-sm border-0 shadow-none">
+                <svg
+                  class="rounded-0 bd-placeholder-img card-img-top"
+                  width="100%"
+                  xmlns="http://www.w3.org/2000/svg"
+                  role="img"
+                  aria-label="Placeholder: Thumbnail"
+                  preserveAspectRatio="xMidYMid slice"
+                  focusable="false"
+                >
+                  <title>Placeholder</title>
+                  <rect width="100%" height="100%" fill="#55595c"></rect>
+                  <text x="50%" y="50%" fill="#eceeef" dy=".3em">
+                    Thumbnail
+                  </text>
+                </svg>
+                <div class="card-body">
+                  <p class="card-text">
+                    This is a wider card with supporting text below as a natural
+                    lead-in to additional content. This content is a little bit
+                    longer.
+                  </p>
+                  <div class="mb-1 text-body-secondary fw-bold">
+                    POSTED ON
+                    <span style="color: #ed564b">AUGUST 19, 2013</span> BY ADMIN
+                  </div>
+                  <p>
+                    Duis tempus leo vitae ipsum viverra, blandit condimentum
+                    sapien porttitor. Duis porttitor sed metus eget mollis.
+                    Curabitur bibendum imperdiet tortor, ut pulvinar purus
+                    elementum nec. Suspendisse at erat luctus; hendrerit sapien
+                    sed, consectetur erat. Maecenas dignissim suscipit orci at
+                    molestie. Aenean fringilla dolor vitae lacus lacinia
+                    eleifend. Suspendisse et libero nunc. Etiam mauris tortor,
+                    pharetra [...]
+                  </p>
+                </div>
+              </div>
+            </div>
+            <div class="col">
+              <div class="card shadow-sm border-0 shadow-none">
+                <svg
+                  class="rounded-0 bd-placeholder-img card-img-top"
+                  width="100%"
+                  xmlns="http://www.w3.org/2000/svg"
+                  role="img"
+                  aria-label="Placeholder: Thumbnail"
+                  preserveAspectRatio="xMidYMid slice"
+                  focusable="false"
+                >
+                  <title>Placeholder</title>
+                  <rect width="100%" height="100%" fill="#55595c"></rect>
+                  <text x="50%" y="50%" fill="#eceeef" dy=".3em">
+                    Thumbnail
+                  </text>
+                </svg>
+                <div class="card-body">
+                  <p class="card-text">
+                    This is a wider card with supporting text below as a natural
+                    lead-in to additional content. This content is a little bit
+                    longer.
+                  </p>
+                  <div class="mb-1 text-body-secondary fw-bold">
+                    POSTED ON
+                    <span style="color: #ed564b">AUGUST 19, 2013</span> BY ADMIN
+                  </div>
+                  <p>
+                    Duis tempus leo vitae ipsum viverra, blandit condimentum
+                    sapien porttitor. Duis porttitor sed metus eget mollis.
+                    Curabitur bibendum imperdiet tortor, ut pulvinar purus
+                    elementum nec. Suspendisse at erat luctus; hendrerit sapien
+                    sed, consectetur erat. Maecenas dignissim suscipit orci at
+                    molestie. Aenean fringilla dolor vitae lacus lacinia
+                    eleifend. Suspendisse et libero nunc. Etiam mauris tortor,
+                    pharetra [...]
+                  </p>
+                </div>
+              </div>
+            </div>
+            <div class="col">
+              <div class="card shadow-sm border-0 shadow-none">
+                <svg
+                  class="rounded-0 bd-placeholder-img card-img-top"
+                  width="100%"
+                  xmlns="http://www.w3.org/2000/svg"
+                  role="img"
+                  aria-label="Placeholder: Thumbnail"
+                  preserveAspectRatio="xMidYMid slice"
+                  focusable="false"
+                >
+                  <title>Placeholder</title>
+                  <rect width="100%" height="100%" fill="#55595c"></rect>
+                  <text x="50%" y="50%" fill="#eceeef" dy=".3em">
+                    Thumbnail
+                  </text>
+                </svg>
+                <div class="card-body">
+                  <p class="card-text">
+                    This is a wider card with supporting text below as a natural
+                    lead-in to additional content. This content is a little bit
+                    longer.
+                  </p>
+                  <div class="mb-1 text-body-secondary fw-bold">
+                    POSTED ON
+                    <span style="color: #ed564b">AUGUST 19, 2013</span> BY ADMIN
+                  </div>
+                  <p>
+                    Duis tempus leo vitae ipsum viverra, blandit condimentum
+                    sapien porttitor. Duis porttitor sed metus eget mollis.
+                    Curabitur bibendum imperdiet tortor, ut pulvinar purus
+                    elementum nec. Suspendisse at erat luctus; hendrerit sapien
+                    sed, consectetur erat. Maecenas dignissim suscipit orci at
+                    molestie. Aenean fringilla dolor vitae lacus lacinia
+                    eleifend. Suspendisse et libero nunc. Etiam mauris tortor,
+                    pharetra [...]
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div id="footer" style="background-color: #404040; color:white;">
+        <div class="container">
+            <footer class="py-5">
+              <div class="row">
+                <div class="col col-md-3 mb-3">
+                  <h5 class="text-uppercase">Revera</h5>
+                  <ul class="nav flex-column">
+                    <li class="nav-item mb-2"><a href="#" class="nav-link p-0" style="color:#aaa;">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum vehicula erat non congue cursus. Aenean auctor nulla quis augue dictum, sed sagittis odio varius? Aliquam nec venenatis turpis. Aenean euismod arcu vel volutpat tristique. In mattis ipsum quis magna feugiat, id tempus metus accumsan.</a></li>
+                  </ul>
+                </div>
+          
+                <div class="col col-md-3 mb-3">
+                  <h5>META</h5>
+                  <ul class="nav flex-column">
+                    <li class="nav-item mb-2"><a href="#" class="nav-link p-0" style="color:#aaa;">Home</a></li>
+                    <hr class="featurette-divider my-1">
+                    <li class="nav-item mb-2"><a href="#" class="nav-link p-0" style="color:#aaa;">Features</a></li>
+                    <hr class="featurette-divider my-1">
+                    <li class="nav-item mb-2"><a href="#" class="nav-link p-0" style="color:#aaa;">Pricing</a></li>
+                    <hr class="featurette-divider my-1">
+                    <li class="nav-item mb-2"><a href="#" class="nav-link p-0" style="color:#aaa;">FAQs</a></li>
+                    <hr class="featurette-divider my-1">
+                    <li class="nav-item mb-2"><a href="#" class="nav-link p-0" style="color:#aaa;">About</a></li>
+                    <hr class="featurette-divider my-1"> 
+                </ul>
+                </div>
+          
+                <div class="col col-md-3 mb-3">
+                  <h5>Archive</h5>
+                  <ul class="nav flex-column">
+                    <li class="nav-item mb-2"><a href="#" class="nav-link p-0" style="color:#aaa;">August 2013</a></li>
+                    <hr class="featurette-divider my-1">
+                </ul>
+                </div>
+          
+                <div class="col col-md-3 mb-3">
+                    <h5>Recent Posts</h5>
+                    <ul class="nav flex-column">
+                      <li class="nav-item mb-2"><a href="#" class="nav-link p-0" style="color:#aaa;">Etiam mauris tortor, pharetra quis lobortis in, pharetra in diam</a></li>
+                      <hr class="featurette-divider my-1">
+                      <li class="nav-item mb-2"><a href="#" class="nav-link p-0" style="color:#aaa;">Etiam mauris tortor, pharetra quis lobortis in, pharetra in diam</a></li>
+                      <hr class="featurette-divider my-1">
+                      <li class="nav-item mb-2"><a href="#" class="nav-link p-0" style="color:#aaa;">Etiam mauris tortor, pharetra quis lobortis in, pharetra in diam</a></li>
+                      <hr class="featurette-divider my-1">
+                      <li class="nav-item mb-2"><a href="#" class="nav-link p-0" style="color:#aaa;">Etiam mauris tortor, pharetra quis lobortis in, pharetra in diam</a></li>
+                      <hr class="featurette-divider my-1">
+                      <li class="nav-item mb-2"><a href="#" class="nav-link p-0" style="color:#aaa;">Etiam mauris tortor, pharetra quis lobortis in, pharetra in diam</a></li>
+                      <hr class="featurette-divider my-1">
+                    </ul>
+                  </div>
+              </div>
+          
+              <div class="d-flex flex-column flex-sm-row justify-content-between py-4 my-4 border-top">
+                <p>Copyright © 2018 revera - Just another demo Sites site.
+                    | Revera Theme</p>
+                <ul class="list-unstyled d-flex">
+                  <li class="ms-3"><a class="link-body-emphasis" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#twitter"></use></svg></a></li>
+                  <li class="ms-3"><a class="link-body-emphasis" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#instagram"></use></svg></a></li>
+                  <li class="ms-3"><a class="link-body-emphasis" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#facebook"></use></svg></a></li>
+                </ul>
+              </div>
+            </footer>
+          </div>
+      </div>
+    </div>
+  </body>
+  <script
+    src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"
+    integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r"
+    crossorigin="anonymous"
+  ></script>
+  <script
+    src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
+    integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
+    crossorigin="anonymous"
+  ></script>
+</html>
