diff --git a/starter-code/index.html b/starter-code/index.html
new file mode 100644
index 000000000..376447643
--- /dev/null
+++ b/starter-code/index.html
@@ -0,0 +1,126 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <title>Document</title>
+</head>
+
+<body class="font-sans bg-gray-100">
+    <div class="container mx-auto px-4">
+        <nav class="bg-white p-4 shadow-md">
+            <h1 class="text-3xl font-bold text-gray-800">REVERA</h1>
+            <ul class="flex space-x-4 mt-4">
+                <li><a href="#Home" class="text-gray-600 hover:text-gray-900">Home</a></li>
+                <li><a href="#About" class="text-gray-600 hover:text-gray-900">About</a></li>
+                <li><a href="#Sample-page" class="text-gray-600 hover:text-gray-900">Sample page</a></li>
+                <li><a href="#Portfolio" class="text-gray-600 hover:text-gray-900">Portfolio</a></li>
+                <li><a href="#Blog" class="text-gray-600 hover:text-gray-900">Blog</a></li>
+                <li><a href="#Parent-page" class="text-gray-600 hover:text-gray-900">Parent page</a></li>
+                <li><a href="#Contact" class="text-gray-600 hover:text-gray-900">Contact</a></li>
+            </ul>
+        </nav>
+
+        <header class="mt-8">
+            <img src="starter-code/img/slider-1.jpg" alt="slider-1" class="w-full h-64 object-cover rounded-lg shadow-md">
+        </header>
+
+        <section class="mt-8 grid grid-cols-1 md:grid-cols-3 gap-4">
+            <div class="bg-white p-6 rounded-lg shadow-md">
+                <h3 class="text-2xl font-semibold text-gray-800">Web design</h3>
+                <p class="mt-2 text-gray-600">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ea ipsa, laborum a tempore ullam esse saepe incidunt perferendis.</p>
+            </div>
+            <div class="bg-white p-6 rounded-lg shadow-md">
+                <h3 class="text-2xl font-semibold text-gray-800">Web development</h3>
+                <p class="mt-2 text-gray-600">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eaque, impedit. Alias cupiditate eos libero necessitatibus suscipit, dolore temporibus iusto non!</p>
+            </div>
+            <div class="bg-white p-6 rounded-lg shadow-md">
+                <h3 class="text-2xl font-semibold text-gray-800">User interface</h3>
+                <p class="mt-2 text-gray-600">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi ut dolores, accusantium asperiores aliquam odio, quidem impedit enim labore suscipit nemo.</p>
+            </div>
+        </section>
+
+        <section class="mt-8">
+            <div class="bg-white p-6 rounded-lg shadow-md">
+                <h2 class="text-3xl font-bold text-gray-800">LATEST PROJECTS</h2>
+                <h3 class="text-xl text-gray-600 mt-2">FEW OF THE LATEST PORTFOLIO ITEMS</h3>
+                <ul class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mt-4">
+                    <li class="bg-gray-100 p-4 rounded-lg shadow">
+                        <img src="starter-code/img/project-1.jpg" alt="" class="w-full h-32 object-cover rounded-lg">
+                        <p class="mt-2 text-gray-600">Lorem ipsum, dolor sit amet consectetur adipisicing.</p>
+                    </li>
+                    <li class="bg-gray-100 p-4 rounded-lg shadow">
+                        <img src="starter-code/img/project-2.jpg" alt="" class="w-full h-32 object-cover rounded-lg">
+                        <p class="mt-2 text-gray-600">Lorem ipsum, dolor sit amet consectetur adipisicing.</p>
+                    </li>
+                    <li class="bg-gray-100 p-4 rounded-lg shadow">
+                        <img src="starter-code/img/project-3.jpg" alt="" class="w-full h-32 object-cover rounded-lg">
+                        <p class="mt-2 text-gray-600">Lorem ipsum, dolor sit amet consectetur adipisicing.</p>
+                    </li>
+                    <li class="bg-gray-100 p-4 rounded-lg shadow">
+                        <img src="starter-code/img/project-4.jpg" alt="" class="w-full h-32 object-cover rounded-lg">
+                        <p class="mt-2 text-gray-600">Lorem ipsum, dolor sit amet consectetur adipisicing.</p>
+                    </li>
+                </ul>
+            </div>
+
+            <div class="bg-white p-6 rounded-lg shadow-md mt-8">
+                <h2 class="text-3xl font-bold text-gray-800">LATEST ARTICLES</h2>
+                <h3 class="text-xl text-gray-600 mt-2">LATEST POST FROM THE BLOG</h3>
+                <ul class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mt-4">
+                    <li class="bg-gray-100 p-4 rounded-lg shadow">
+                        <img src="starter-code/img/slider-1.jpg" alt="" class="w-full h-32 object-cover rounded-lg">
+                        <p class="mt-2 text-gray-600">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsum nam in obcaecati magni similique numquam expedita nemo nostrum eaque excepturi?</p>
+                    </li>
+                    <li class="bg-gray-100 p-4 rounded-lg shadow">
+                        <img src="starter-code/img/slider-2.jpg" alt="" class="w-full h-32 object-cover rounded-lg">
+                        <p class="mt-2 text-gray-600">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsum nam in obcaecati magni similique numquam expedita nemo nostrum eaque excepturi?</p>
+                    </li>
+                    <li class="bg-gray-100 p-4 rounded-lg shadow">
+                        <img src="starter-code/img/slider-3.jpg" alt="" class="w-full h-32 object-cover rounded-lg">
+                        <p class="mt-2 text-gray-600">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsum nam in obcaecati magni similique numquam expedita nemo nostrum eaque excepturi?</p>
+                    </li>
+                    <li class="bg-gray-100 p-4 rounded-lg shadow">
+                        <img src="starter-code/img/slider-4.jpg" alt="" class="w-full h-32 object-cover rounded-lg">
+                        <p class="mt-2 text-gray-600">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsum nam in obcaecati magni similique numquam expedita nemo nostrum eaque excepturi?</p>
+                    </li>
+                </ul>
+            </div>
+        </section>
+
+        <footer class="bg-gray-800 text-white mt-8 p-6">
+            <section class="grid grid-cols-1 md:grid-cols-4 gap-4">
+                <div>
+                    <h4 class="text-xl font-semibold">REVERA</h4>
+                    <p class="mt-2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam rem facilis inventore reiciendis earum. Asperiores deserunt reprehenderit consectetur labore quos.</p>
+                </div>
+                <div>
+                    <h4 class="text-xl font-semibold">META</h4>
+                    <ul class="mt-2 space-y-1">
+                        <li><a href="#log-in" class="text-gray-400 hover:text-white">Log in</a></li>
+                        <li><a href="#entries-rss" class="text-gray-400 hover:text-white">Entries RSS</a></li>
+                        <li><a href="#components" class="text-gray-400 hover:text-white">Components RSS</a></li>
+                        <li><a href="#wordpess" class="text-gray-400 hover:text-white">WordPress.org</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h4 class="text-xl font-semibold">ARCHIVES</h4>
+                    <a href="#archive1" class="text-gray-400 hover:text-white mt-2 block">August 2013</a>
+                </div>
+                <div>
+                    <h4 class="text-xl font-semibold">RECENT POSTS</h4>
+                    <p class="mt-2">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Optio et ducimus tempore quidem reprehenderit?</p>
+                </div>
+            </section>
+            <div class="bg-black text-white py-4">
+                <div class="container mx-auto text-center">
+                    <p>&copy; 2024 All rights reserved.</p>
+                </div>
+            </div>
+        </footer>
+    </div>
+</body>
+
+</html>
\ No newline at end of file
