diff --git a/starter-code/index.html b/starter-code/index.html
new file mode 100644
index 000000000..49fb8ade4
--- /dev/null
+++ b/starter-code/index.html
@@ -0,0 +1,349 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</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"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
+    />
+    <link
+      href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css"
+      rel="stylesheet"
+    />
+  </head>
+
+  <body>
+    <script
+      src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
+      integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
+      crossorigin="anonymous"
+    ></script>
+
+    <div class="container-fluid text-center">
+      <div class="row my-3">
+        <div class="col">
+          <h1 class="site-title">
+            <a
+              href="https://web.archive.org/web/20180109051150/http://demo.fabthemes.com/revera/"
+              title="revera"
+              rel="home"
+              style="
+                color: black;
+                text-transform: uppercase;
+                text-decoration: none;
+                font-weight: bolder;
+              "
+              >revera</a>
+          </h1>
+        </div>
+        <div class="col">
+          <nav class="navbar navbar-expand-lg navbar-light bg-light">
+            <div class="container-fluid">
+              <div class="collapse navbar-collapse" id="navbarNav">
+                <ul class="navbar-nav">
+                  <li class="nav-item">
+                    <a class="nav-link" href="#" style="color:#ed564b;">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">
+                    <a class="nav-link" href="#">Parent Page &raquo;</a>
+                  </li>
+                  <li class="nav-item">
+                    <a class="nav-link" href="#">Contact</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </nav>
+        </div>
+      </div>
+      <div class="row my-3">
+        <div
+          id="carouselExampleIndicators"
+          class="carousel slide"
+          data-bs-ride="carousel"
+        >
+          <div class="carousel-inner">
+            <div class="carousel-item active">
+              <img
+                src="img/slider-1.jpg"
+                class="d-block w-100 grayscale"
+                alt="Slider 1"
+                style="filter: grayscale(100%)"
+              />
+              <div class="carousel-caption">
+                <h3>Lorem Ipsum 1</h3>
+                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+              </div>
+            </div>
+            <div class="carousel-item">
+              <img
+                src="img/slider-2.jpg"
+                class="d-block w-100 grayscale"
+                alt="Slider 2"
+                style="filter: grayscale(100%)"
+              />
+              <div class="carousel-caption">
+                <h3>Lorem Ipsum 2</h3>
+                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+              </div>
+            </div>
+            <div class="carousel-item">
+              <img
+                src="img/slider-3.jpg"
+                class="d-block w-100 grayscale"
+                alt="Slider 3"
+                style="filter: grayscale(100%)"
+              />
+              <div class="carousel-caption">
+                <h3>Lorem Ipsum 3</h3>
+                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+              </div>
+            </div>
+            <div class="carousel-item">
+              <img
+                src="img/slider-4.jpg"
+                class="d-block w-100 grayscale"
+                alt="Slider 4"
+                style="filter: grayscale(100%)"
+              />
+              <div class="carousel-caption">
+                <h3>Lorem Ipsum 4</h3>
+                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+              </div>
+            </div>
+          </div>
+          <a
+            class="carousel-control-prev"
+            href="#carouselExampleIndicators"
+            role="button"
+            data-bs-slide="prev"
+          >
+            <span class="carousel-control-prev-icon" aria-hidden="true" style="background-color: #ed564b;"></span>
+            <span class="visually-hidden">Previous</span>
+          </a>
+          <a
+            class="carousel-control-next"
+            href="#carouselExampleIndicators"
+            role="button"
+            data-bs-slide="next"
+          >
+            <span class="carousel-control-next-icon" aria-hidden="true" style="background-color: #ed564b;"></span>
+            <span class="visually-hidden">Next</span>
+          </a>
+        </div>
+      </div>
+      <div class="row" style="background-color: #ed564b; color: #ffffff">
+        <div class="col-sm-4 homewidget my-3">
+          <i class="fas fa-glass-martini-alt fa-stack-1x"></i>
+          <span class="fa-stack fa-2x">
+            <i class="far fa-circle fa-stack-2x"></i>
+            <i class="fas fa-glass-martini-alt fa-stack-1x"></i>
+          </span>
+          <h3>Web design</h3>
+          <p>
+            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
+          </p>
+        </div>
+        <div class="col-sm-4 homewidget my-3">
+          <i class="fas fa-star fa-stack-1x"></i>
+          <span class="fa-stack fa-2x">
+            <i class="far fa-circle fa-stack-2x"></i>
+            <i class="fas fa-star fa-stack-1x"></i>
+          </span>
+          <h3>Web development</h3>
+          <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 nspendisse at erat
+            luctus.
+          </p>
+        </div>
+        <div class="col-sm-4 homewidget my-3">
+          <i class="fas fa-heart fa-stack-1x"></i>
+          <span class="fa-stack fa-2x">
+            <i class="far fa-circle fa-stack-2x"></i>
+            <i class="fas fa-heart fa-stack-1x"></i>
+          </span>
+          <h3>User interface</h3>
+          <p>
+            Cras aliquet venenatis porttitor. Donec rutrum sapien et sapien
+            dignissim, eu dapibus mi molestie. Suspendisse dictum convallis quam
+            et sodales. Praesent non enim et magna congue gravida.
+          </p>
+        </div>
+      </div>
+      <div class="row my-3" style="width: 80%; margin: 40px auto;">
+        <div class="col-12">
+          <h2
+            style="
+              color: black;
+              text-transform: uppercase;
+              font-weight: semi-bold;
+              text-align: left;
+            "
+          >
+            Latest projects
+          </h2>
+          <h3
+            style="
+              color: grey;
+              text-transform: uppercase;
+              font-weight: semibold;
+              text-align: left;
+            "
+          >
+            few of the latest portfolio items
+          </h3>
+        </div>
+        <hr style="background-color: grey; height: 2px; border: none" />
+        <div class="col-3">
+          <div class="container-fluid">
+            <img
+              src="img/project-1.jpg"
+              alt="Project 1"
+              class="img-fluid mx-auto d-block"
+            />
+          </div>
+
+          <p>Nunc libero elit, iaculis nec augue non</p>
+        </div>
+        <div class="col-3">
+          <div class="container-fluid">
+            <img
+              src="img/project-2.jpg"
+              alt="Project 2"
+              class="img-fluid mx-auto d-block"
+            />
+          </div>
+
+          <p>Phasellus aliquet iaculis neque accumsan aliquam</p>
+        </div>
+        <div class="col-3">
+          <div class="container-fluid">
+            <img
+              src="img/project-3.jpg"
+              alt="Project 3"
+              class="img-fluid mx-auto d-block"
+            />
+          </div>
+          <p>Vivamus blandit ipsum sed arcu euismod</p>
+        </div>
+        <div class="col-3">
+          <div class="container-fluid">
+            <img
+              src="img/project-4.jpg"
+              alt="Project 4"
+              class="img-fluid mx-auto d-block"
+            />
+          </div>
+          <p>Curabitur auctor dolor risus, vitae pellentesque arcu consequat</p>
+        </div>
+      </div>
+
+      <div class="row" style="background-color: #363636; text-align: left;">
+        <div style="width: 80%; margin: 40px auto; display: flex;">
+        <div class="col-3">
+          <h3 style="color: white; text-transform: uppercase; font-weight: 600">
+            Revera
+          </h3>
+          <p style="color: grey;">
+            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.
+          </p>
+        </div>
+
+        <div class="col-3">
+          <h3 style="color: white; text-transform: uppercase; font-weight: 600">
+            Meta
+          </h3>
+          <p style="color: #d3d3d3">
+            <a href="#" style="color: grey; text-decoration: none">Log in</a>
+            <br style="border-bottom: 1px dotted grey" />
+            <a href="#" style="color: grey; text-decoration: none"
+              >Entries RSS</a
+            ><br style="border-bottom: 1px dotted grey" />
+            <a href="#" style="color: grey; text-decoration: none"
+              >Comments RSS</a
+            ><br style="border-bottom: 1px dotted grey" />
+            <a
+              href="https://wordpress.org/"
+              style="color: grey; text-decoration: none"
+              >WordPress.org</a
+            ><br style="border-bottom: 1px dotted grey" />
+          </p>
+        </div>
+
+        <div class="col-3">
+          <h3 style="color: white; text-transform: uppercase; font-weight: 600">
+            Archives
+          </h3>
+          <p style="color: #d3d3d3">
+            <a href="#" style="color: grey; text-decoration: none"
+              >August 2013</a
+            ><br style="border-bottom: 1px dotted grey" />
+          </p>
+        </div>
+
+        <div class="col-3">
+            <h3 style="color: white; text-transform: uppercase; font-weight: 600">
+              Recents posts
+            </h3>
+            <p style="color: grey">
+              <a href="#" style="color: grey; text-decoration: none"
+                >Etiam mauris tortor, pharetra quis lobortis in, pharetra in
+                diam</a
+              ><br style="border-bottom: 1px dotted grey" />
+              <a href="#" style="color: grey; text-decoration: none"
+                >Nunc libero elit, iaculis nec augue non</a
+              ><br style="border-bottom: 1px dotted grey" />
+              <a href="#" style="color: grey; text-decoration: none"
+                >Falauris sollicitudin quis dolor venenatis facilisis</a
+              ><br style="border-bottom: 1px dotted grey" />
+              <a href="#" style="color: grey; text-decoration: none"
+                >Phasellus aliquet iaculis neque accumsan aliquam</a
+              ><br style="border-bottom: 1px dotted grey" />
+              <a href="#" style="color: grey; text-decoration: none"
+                >Vivamus blandit ipsum sed arcu euismod</a
+              ><br style="border-bottom: 1px dotted grey" />
+            </p>
+          </div>
+
+        </div>
+      </div>
+      <div class="row py-4" style="background-color: black">
+        <div class="col-12" style="width: 80%; margin: auto;">
+          <p style="color: grey; text-align: left">
+            &copy; 2018 revera - Just another demo Sites site.
+          </p>
+          <p style="color: grey; text-align: left">| Revera Theme</p>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
\ No newline at end of file
