diff --git a/index.html b/index.html
new file mode 100644
index 000000000..e3c8b9794
--- /dev/null
+++ b/index.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+
+</head>
+<body>
+    <nav class="bg-white">
+        <div class="mx-auto max-w-7xl px-2 sm:px-6 lg:px-8">
+          <div class="relative flex h-16 items-center justify-between">
+            <div class="flex flex-1 items-center justify-center sm:items-stretch sm:justify-start">
+              <div class="flex flex-shrink-0 items-center">
+                <a href="#" class="rounded-md text-3xl text-black hover:bg-gray-700 hover:text-black" >REVERA</a>
+              </div>
+              <div class="hidden sm:ml-6 sm:block justify-center">
+                <div class="flex space-x-4 ">
+                  <a href="#" class="rounded-md px-3 py-2 text-sm font-medium text-gray-700 hover:text-red-800" >Home</a>
+                  <a href="#" class="rounded-md px-3 py-2 text-sm font-medium text-gray-300 hover:text-red-800">About</a>
+                  <a href="#" class="rounded-md px-3 py-2 text-sm font-medium text-gray-300 hover:text-red-800">Sample page</a>
+                  <a href="#" class="rounded-md px-3 py-2 text-sm font-medium text-gray-300 hover:text-red-800">PortFolio</a>
+                  <a href="#" class="rounded-md px-3 py-2 text-sm font-medium text-gray-300 hover:text-red-800">Blog</a>
+                  <a href="#" class="rounded-md px-3 py-2 text-sm font-medium text-gray-300 hover:text-red-800">Parent Page >></a>
+                  <a href="#" class="rounded-md px-3 py-2 text-sm font-medium text-gray-300 hover:text-red-800">content</a>
+                </div>
+              </div>
+            </div>
+        </div>
+          </div>
+        </div>
+      </nav>
+      <div class="h-96 bg-[url('/starter-code/img/project-2.jpg')] bg-cover bg-no-repeat bg-center">
+        <div class="rounded-md text-3xl text-white flex justify-center">ETIAM MAURIS TORTOR, PHARETRA QUIS LOBORTIS IN, PHARETRA IN DIA</div>
+        <div class="rounded-md text-sm text-white flex justify-center">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 […]</div>
+      </div>
+      <div class="h-34 bg-red-600 bg-cover">
+        <div class="text-wrap ">
+            <h3 class="flex justify-start">Beloved Manhattan soup stand closes</h3>
+            <p>New Yorkers are facing the winter chill...</p>
+            <h3 class="flex justify-centers">Beloved Manhattan soup stand closes</h3>
+            <p>New Yorkers are facing the winter chill...</p>
+        </div>
+ 
+</div>
+</body>
+</html>
\ No newline at end of file
