diff --git a/hotelWebProject.html b/hotelWebProject.html
new file mode 100644
index 0000000..f083f97
--- /dev/null
+++ b/hotelWebProject.html
@@ -0,0 +1,225 @@
+<html>
+    <head>
+        <title>Nirmal_02</title>
+        <style>
+            *{
+                font-family: 'Times New Roman', Times, serif;
+            }
+            body{
+                background-image: url(image_01.jpg);
+                background-position: center;
+                background-size: 100%;
+                background-repeat: no-repeat;
+                background-color:lightblue;
+            }
+            .logo{
+                position: absolute;
+                float: left;
+                top: 50px;
+                left: 50px;
+            }
+           .logoLink{
+                position: absolute;
+                display: block;
+                float: left;
+                top: 100px;
+                left: 120px;
+                width: 30px;
+                height: 30px;
+            }
+            #header{
+                position: absolute;
+                top: 65%;
+                left: 25%;
+                width: 50%;
+                justify-items: center;
+                font-size: 2.75vh;
+                background-color: rgba(255, 255, 255, 0.6);
+            }
+            #navbar{
+                position: absolute;
+                left: 16.5vw;
+                text-align: center;
+                
+            }
+            #navbar ul{
+                list-style-type: none;
+                display: flex;
+            }
+            #navbar li{
+                background-color: rgba(255, 255, 255, 0);
+                width: 15vw;
+            }
+            #navbar a{
+                text-decoration: none;
+                color: white;
+                font-size: 4vh;
+                transition: color 0.5s ease;
+            }
+            #link_01:hover{
+                color: lightblue;
+
+            }
+            .section_01:hover #dropbtn_01{
+                color: lightblue;
+            }
+            #dropbtn_01{
+                background-color: rgba(255, 255, 255, 0);
+                color: white;
+                border: none;
+                cursor: pointer;
+                transition: color 0.5s ease;
+                font-size: 4vh;
+            }
+            .section_01:hover #content_01{
+                display: block;
+            }
+            .section_01 #content_01{
+                position: absolute;
+                width: 25%;
+                background-color: rgba(255, 255, 255, 0.5);
+                border-radius: 10%;
+                display: none;
+                box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, 0.26);
+
+            }
+            .section_01 #content_01 a{
+                display: block;
+                border-radius: 15%;
+
+            }
+            #data_01:hover{
+                color: rgba(0, 0, 255, 0.6);
+                background-color: rgba(255, 255, 255, 0.75);
+                box-shadow: 10px 10px 10px 10px rgba(0, 0, 0, 0.1);
+            }
+            .downbar{
+                position: absolute;
+                top: 90vh;
+                left: 5vw;
+                text-align: center;
+            }
+            .downbar ul{
+                list-style-type: none;
+                display: flex;
+            }
+            .downbar li{
+                color: white;
+                background-color: rgba(0, 0, 0, 0);
+                width: 15vw;
+            }
+            .downbar a{
+                text-decoration: none;
+                font-size: 4vh;
+                color: white;
+                background-color: rgba(255, 255, 255, 0);
+                transition: color 0.5s ease;
+            }
+            .content_02, .content_03, .content_04{
+                position: absolute;
+                width: 25%;
+                background-color: rgba(255, 255, 255, 0.5);
+                border-radius: 10%;
+                display: none;
+                box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, 0.25);
+                
+            }
+            .data_02, .data_03, .data_04{
+                display: block;
+            }
+            .data_02:hover, .data_03:hover, .data_04:hover{
+                color: darkblue;
+                background-color: rgba(255, 255, 255, 0.5);
+                border-radius: 15%;
+                box-shadow: 10px 10px 10px 10px rgba(0, 0, 0, 0.1);
+
+            }
+            .upbtn_02, .upbtn_03, .upbtn_04{
+                font-size: 4vh;
+                border: none;
+                background-color: rgba(255, 255, 255, 0);
+                color: white;
+                cursor: pointer;
+                transition: color 0.5s ease;
+            }
+            .upbtn_02:hover, .upbtn_03:hover, .upbtn_04:hover{
+                color: rgb(28, 70, 84);
+            }
+            .link_02:hover, .link_03:hover{
+                color: rgb(28, 70, 84)
+            }
+            .section_02:hover .content_02, .section_03:hover .content_03, .section_04:hover .content_04{
+                display: block;
+                
+            }
+            
+
+
+        </style>
+    </head>
+    <body>
+        <div class="logo">
+            <img src="logo_01.png" width="150px">
+        </div>
+        <div class="logoLink">
+            <P><a href="">A</a></P>
+        </div>
+        <header id="header">
+            <h1>OCEAN LINE HOTEL</h1>
+            <p>This is a good hotel.</p>
+        </header>
+        <nav id="navbar">
+            <ul>
+                <li><a href="###" id="link_01">Home</a></li>
+                <li><a href="###" id="link_01">Home</a></li>
+                <li><a href="###" id="link_01">Home</a></li>
+                <div class="section_01">
+                <li><button id="dropbtn_01">Drop</button></li>
+                    <div id="content_01">
+                        <a id="data_01" href="####">Link 01</a>
+                        <a id="data_01" href="####">Link 02</a>
+                        <a id="data_01" href="####">Link 03</a>
+                    </div>
+                </div>
+                <div class="section_01">
+                <li><button id="dropbtn_01">Drop</button></li>
+                    <div id="content_01">
+                        <a id="data_01" href="####">Link 01</a>
+                        <a id="data_01" href="####">Link 02</a>
+                        <a id="data_01" href="####">Link 03</a>
+                    </div>
+                </div> 
+            </ul>
+        </nav>
+        <nav class="downbar">
+            <ul>
+                <li><a href="###" class="link_02">Home</a></li>
+                <div class="section_02">
+                <li><button class="upbtn_02">Drop</button></li>
+                    <div class="content_02">
+                        <a class="data_02" href="####">Link 01</a>
+                        <a class="data_02" href="####">Link 02</a>
+                        <a class="data_02" href="####">Link 03</a>
+                    </div>
+                </div>
+                <div class="section_03">
+                <li><button class="upbtn_03">Drop</button></li>
+                    <div class="content_03">
+                        <a class="data_03" href="####">Link 01</a>
+                        <a class="data_03" href="####">Link 02</a>
+                        <a class="data_03" href="####">Link 03</a>
+                    </div>
+                </div>
+                <div class="section_04">
+                <li><button class="upbtn_04">Drop</button></li>
+                    <div class="content_04">
+                        <a class="data_04" href="####">Link 01</a>
+                        <a class="data_04" href="####">Link 02</a>
+                        <a class="data_04" href="####">Link 03</a>
+                    </div>
+                </div>
+                <li><a href="###" class="link_03">Home</a></li>
+            </ul>
+        </nav>
+    </body>
+</html>
\ No newline at end of file
diff --git a/image_01.jpg b/image_01.jpg
new file mode 100644
index 0000000..718730d
Binary files /dev/null and b/image_01.jpg differ
diff --git a/image_03.jpg b/image_03.jpg
new file mode 100644
index 0000000..9a79944
Binary files /dev/null and b/image_03.jpg differ
diff --git a/image_04.jpg b/image_04.jpg
new file mode 100644
index 0000000..c9a80f4
Binary files /dev/null and b/image_04.jpg differ
diff --git a/image_05.jpg b/image_05.jpg
new file mode 100644
index 0000000..8a28266
Binary files /dev/null and b/image_05.jpg differ
diff --git a/logo_01.png b/logo_01.png
new file mode 100644
index 0000000..6042728
Binary files /dev/null and b/logo_01.png differ
diff --git a/tets.html b/tets.html
new file mode 100644
index 0000000..5adbf19
--- /dev/null
+++ b/tets.html
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Semantic HTML Example</title>
+</head>
+<body>
+  <!-- Header Section -->
+  <header>
+    <h1>Welcome to My Website</h1>
+    <p>Your go-to platform for quality content.</p>
+  </header>
+
+  <!-- Navigation Section -->
+  <nav>
+    <ul>
+      <li><a href="#home">Home</a></li>
+      <li><a href="#about">About</a></li>
+      <li><a href="#services">Services</a></li>
+      <li><a href="#contact">Contact</a></li>
+    </ul>
+  </nav>
+
+  <!-- Main Content Section -->
+  <main>
+    <section id="home">
+      <h2>Home</h2>
+      <p>Welcome to our homepage. Stay tuned for updates!</p>
+    </section>
+
+    <section id="about">
+      <h2>About Us</h2>
+      <p>We are a company committed to delivering exceptional service.</p>
+    </section>
+
+    <section id="services">
+      <h2>Our Services</h2>
+      <ul>
+        <li>Consulting</li>
+        <li>Development</li>
+        <li>Support</li>
+      </ul>
+    </section>
+
+    <section id="contact">
+      <h2>Contact Us</h2>
+      <p>Feel free to reach out at contact@example.com.</p>
+    </section>
+  </main>
+
+  <!-- Footer Section -->
+  <footer>
+    <p>&copy; 2025 My Website. All rights reserved.</p>
+  </footer>
+</body>
+</html>
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Color Fading with Transition</title>
+  <style>
+    .fade-box {
+      width: 200px;
+      height: 100px;
+      background-color: blue;
+      color: white;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 20px;
+      text-align: center;
+      transition: background-color 1s ease, color 1s ease; /* Smooth fade */
+    }
+
+    .fade-box:hover {
+      background-color: red; /* New color */
+      color: yellow; /* Text color fade */
+    }
+  </style>
+</head>
+<body>
+  <div class="fade-box">Hover me!</div>
+</body>
+</html>
