diff --git a/dropDownlList.html b/dropDownlList.html
new file mode 100644
index 0000000..0d88dc4
--- /dev/null
+++ b/dropDownlList.html
@@ -0,0 +1,152 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <script src="https://kit.fontawesome.com/a076d05399.js"></script>
+    <style>
+      nav {
+        position: absolute;
+        top: 20%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        background: #1b1b1b;
+        width: 400px;
+        line-height: 40px;
+        padding: 8px 25px;
+        border-radius: 5px;
+      }
+      nav label {
+        color: white;
+        font-size: 22px;
+        font-weight: 500;
+        display: block;
+        cursor: pointer;
+      }
+      .button span {
+        float: right;
+        line-height: 35px;
+      }
+      nav ul
+      {
+          position: absolute;
+          background: #1b1b1b;
+          list-style: none;
+          top: 70px;
+          left: 0;
+          width: 100%;
+          border-radius: 5px;
+          display: none;
+      }
+       [id^=btn]:checked + ul
+      {
+          display: block;
+      }
+      
+      nav .menu::before
+      {
+          position: absolute;
+          content: '';
+          height: 20px;
+          width: 20px;
+          background: #1b1b1b;
+          right: 50px;
+          top: -10px;
+          transform: rotate(45deg);
+          z-index: -1;
+          
+
+      }
+      nav ul li 
+      {
+          line-height: 40px;
+          padding: 8px 20px;
+          cursor: pointer;
+          border-bottom: 1px solid rgb(0,0,0,0.2);
+      }
+      nav ul li label
+      {
+          font-size: 18px;
+
+      }
+
+      nav ul li a
+      {
+          color: white;
+          text-decoration: none;
+           font-size: 18px;
+      }
+      nav ul li a:hover,
+       nav ul li label:hover
+      {
+            color: cyan;
+      }
+      nav ul ul
+      {
+            position: static;
+      }
+       nav ul ul li
+       {
+                line-height: 30px;
+                padding-left: 30px;
+                border-bottom: none;
+       }
+       nav ul ul li a
+       {
+            color: #e6e6e6;
+            font-size: 17px;
+       }
+       nav ul li span
+       {
+           font-size: 20px;
+           float: right;
+           margin-top: 10px;
+           padding: 0 10px;
+       }
+
+       input
+       {
+           display: none;
+       }
+    </style>
+  </head>
+  <body>
+    <nav>
+      <label for="btn" class="button"
+        >Drop Down
+        <span class="fas fa-caret-down"></span>
+      </label>
+
+
+
+      <input type="checkbox" id="btn"/>
+      <ul class="menu">
+        <li><a href="#">Home</a></li>
+        <li>
+
+
+          <label for="btn-2" class="first">Features
+              <span class="fas fa-caret-down"></span>
+          </label>
+          <input type="checkbox" id="btn-2"/>
+
+
+
+          <ul>
+            <li><a href="#">Page</a></li>
+          </ul>
+        </li>
+        <li>
+          <label for="btn-3" class="second">Service
+              <span class="fas fa-caret-down"></span>
+          </label>
+          <input type="checkbox" id="btn-3"/>
+          <ul>
+            <li><a href="#">web design</a></li>
+            <li><a href="#">App design</a></li>
+          </ul>
+        </li>
+        <li><a href="#">Contect</a></li>
+        <li><a href="#">Feedback</a></li>
+      </ul>
+    </nav>
+  </body>
+</html>
diff --git a/product.html b/product.html
index d8aa2ed..f6eaa9d 100644
--- a/product.html
+++ b/product.html
@@ -1,14 +1,41 @@
 <!DOCTYPE html>
-<html lang="en">
+<html>
+	
 <head>
-    <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
-    <title>Document</title>
+	<meta charset="UTF-8" />
+	<meta name="viewport" content=
+		"width=device-width, initial-scale=1.0" />
+		
+	<title>
+		How to Zoom an Image on
+		Mouse Hover using CSS?
+	</title>
+	
+	<style>
+		.geeks {
+			width: 400px;
+			height: 400px;
+			overflow: hidden;
+			margin: 0 auto;
+		}
+	
+		.geeks img {
+			width: 100%;
+			transition: 0.5s all ease-in-out;
+		}
+	
+		.geeks:hover img {
+			transform: scale(1.5);
+		}
+	</style>
 </head>
+
 <body>
-    <h1>
-        heading
-    </h1>
+	<div class="geeks">
+		<img src=
+"https://media.geeksforgeeks.org/wp-content/uploads/20200403151026/adblur_gfg.png"
+			alt="Geeks Image" />
+	</div>
 </body>
-</html>
\ No newline at end of file
+
+</html>
diff --git a/showCaseOfProduct.html b/showCaseOfProduct.html
new file mode 100644
index 0000000..a546a00
--- /dev/null
+++ b/showCaseOfProduct.html
@@ -0,0 +1,247 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+      <link href='https://unpkg.com/boxicons@2.0.9/css/boxicons.min.css' rel='stylesheet'>
+        
+      <title>ShowCase Of Product</title>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Balsamiq+Sans&family=Poppins:wght@300;400;500;600;700&family=Roboto&display=swap');
+        *{
+            font-family: 'Balsamiq Sans', cursive;
+            font-family: 'Poppins', sans-serif;
+            font-family: 'Roboto', sans-serif;
+        }
+
+      #mainDiv {
+        border: 1px solid slateblue;
+        display: grid;
+        grid-template-columns: 20% 80%;
+        margin-top: 40px;
+      }
+
+      #leftDiv {
+        height: 700px;
+        border: 1px solid red;
+        overflow: scroll;
+        margin-left: 20px;
+      }
+      #rightDiv {
+        display: grid;
+        grid-template-columns: 33% 33% 33%;
+        height: 700px;
+        border: 1px solid red;
+        overflow: scroll;
+        justify-content: center;
+        margin-left: 30px;
+      }
+      #rightDiv::-webkit-scrollbar,
+      #leftDiv::-webkit-scrollbar {
+        display: none;
+      }
+       #rightSubDiv > p
+       {
+           padding-right: 100px;
+       }
+      #rightSubDiv > img {
+        width: 250px;
+        height: 300px;
+        cursor: pointer;
+      }
+      #rightSubDiv > img
+      {
+        
+        transition: 0.5s all ease-in-out;
+      }
+       #rightSubDiv:hover img {
+            transform: scale(1.1);
+       }
+      .details
+      {
+        
+        padding-top: 20px;
+        cursor: pointer;
+      }
+      
+      .details ::marker
+      {
+          content: "";
+      }
+      .details[open] >summary>span
+      {
+          content: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAMVJREFUSEvtlNsNwjAMRU83gElgBJioIwAbsBGMAJPQDUAX5cNYeTgSlUCqvyI1vse5tjswcwwz67MAmg7/nEXPVHK4sPDFJLwAmkPxVYuOwBmYDDYHWAEjcMqVV2qyxA/ADdgbiAdI/AJsE0B5H1ECKPEKbBzEAqz4Hdi5175BtTHNQR6pvLWpvCjeAui7h8gKhazTuSoeAXiI9bcpHgXkICHxHoCF6JxtaM+YljZOPVHY3ahuZ+/Prrnq0T3oFiol/P8LXrIHKhlg12RKAAAAAElFTkSuQmCC");
+      }
+      .details >summary
+      {
+          
+          font-weight: bolder;
+          padding: 10px;
+      }
+      .details >summary > span
+      {
+          float: right;
+          content: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAKZJREFUSEvtlMENwjAQBMcd0AmUkHRAR6EEOqGEUAJ0QgdE90NRZN8uOC/8tmbkvfUVOp/Smc9f0EzYiegCXIFXkw7yDAI+AQ9gzEjUFxyAO3DMSlRBpCJJHIEkcQVpSU3wzrTk487m4H8peALDulnfRjQDJ2ATHq9zBdGkJtwVpOGOQII7gjNwq2W+bp4zg5DEuuiy7MSv4bcoLXIiSsOdIUvwXQQLDaAoGREMQ18AAAAASUVORK5CYII=");
+                
+      }
+      .ulClass > li
+      {
+         padding: 5px;
+         color: rgb(78, 78, 184);
+      }
+      #button
+      {
+          
+        
+        height: 40px;
+        width: 40px;
+       
+        opacity: 0.5;
+        border-radius: 50%;
+        transform: translate(-120%,-670%);
+        
+          
+          
+      }
+      #button 
+      {
+            color: cornflowerblue;
+      }
+
+      .details+hr
+      {
+          width: 95%;
+      }
+      
+    </style>
+  </head>
+  <body>
+    <h1>Dyanamic Headding 7899</h1>
+    <div id="mainDiv">
+      <div id="leftDiv">
+        <details class="details">
+           <summary>Gender<span></span></summary>
+           <ul  class="ulClass">
+               <li>Men</li>
+               <li>Woman</li>
+               <li>Unisex</li>
+           </ul>
+        </details>
+        <hr/>
+        <details class="details">
+           <summary>Category<span> </i></span></summary>
+           <ul class="ulClass">
+               <li>T-Shirt</li>
+               <li>Jacket</li>
+                
+           </ul>
+        </details>
+         <hr>
+        <details class="details">
+           <summary>Colore<span> </i></span></summary>
+           <ul class="ulClass">
+               <li>Red</li>
+               <li>Blue</li>
+               
+           </ul>
+        </details>
+         <hr>
+        <details class="details">
+           <summary>Design<span> </i></span></summary>
+           <ul class="ulClass">
+               <li>Printed</li>
+               <li>Plain</li>
+               <li>Unisex</li>
+           </ul>
+           
+        </details>
+         <hr>
+        <details class="details">
+           <summary>Sort By<span> </i></span></summary>
+           <ul class="ulClass">
+               <li>Popular</li>
+               <li>New</li>
+               <li>Price: High To Low</li>
+               <li>Price: Low To High</li>
+           </ul>
+        </details>
+         <hr>
+      </div>
+      <div id="rightDiv"></div>
+    </div>
+  </body>
+</html>
+<script>
+  var rightDiv = document.getElementById("rightDiv");
+  console.log("here");
+  var dataOfProduct = [
+    {
+      imgUrl:
+        "https://images.bewakoof.com/t320/iron-face-half-sleeve-t-shirt-avl-black-men-s-printed-t-shirts-374205-1624870301.jpg",
+      name: "Iron Face Half Sleeve T-Shirt (AVL) Black",
+      price: 499,
+    },
+    {
+      imgUrl:
+        "https://images.bewakoof.com/t320/pocket-joint-sun-active-t-shirt-men-s-printed-t-shirts-262558-1579955492.gif",
+      name: "Iron Face Half Sleeve T-Shirt (AVL) Black",
+      price: 499,
+    },
+    {
+      imgUrl:
+        "https://images.bewakoof.com/t320/world-peace-full-sleeve-t-shirt-men-s-printed-full-sleeve-t-shirt-231490-1631886128.jpg",
+      name: "Iron Face Half Sleeve T-Shirt (AVL) Black",
+      price: 499,
+    },
+    {
+      imgUrl:
+        "https://images.bewakoof.com/t320/iron-face-half-sleeve-t-shirt-avl-black-men-s-printed-t-shirts-374205-1624870301.jpg",
+      name: "Iron Face Half Sleeve T-Shirt (AVL) Black",
+      price: 499,
+    },
+    {
+      imgUrl:
+        "https://images.bewakoof.com/t320/iron-face-half-sleeve-t-shirt-avl-black-men-s-printed-t-shirts-374205-1624870301.jpg",
+      name: "Iron Face Half Sleeve T-Shirt (AVL) Black",
+      price: 499,
+    },
+    {
+      imgUrl:
+        "https://images.bewakoof.com/t320/iron-face-half-sleeve-t-shirt-avl-black-men-s-printed-t-shirts-374205-1624870301.jpg",
+      name: "Iron Face Half Sleeve T-Shirt (AVL) Black",
+      price: 499,
+    },
+    {
+      imgUrl:
+        "https://images.bewakoof.com/t320/iron-face-half-sleeve-t-shirt-avl-black-men-s-printed-t-shirts-374205-1624870301.jpg",
+      name: "Iron Face Half Sleeve T-Shirt <br>(AVL) Black",
+      price: 499,
+    },
+    {
+      imgUrl:
+        "https://images.bewakoof.com/t320/iron-face-half-sleeve-t-shirt-avl-black-men-s-printed-t-shirts-374205-1624870301.jpg",
+      name: "Iron Face Half Sleeve T-Shirt (AVL) Black",
+      price: 499,
+    },
+  ];
+
+  dataOfProduct.map(function (item) {
+    var div = document.createElement("div");
+    div.setAttribute("id", "rightSubDiv");
+
+    var img = document.createElement("img");
+    img.setAttribute("src", item.imgUrl);
+    img.setAttribute("id","img");
+
+    var button = document.createElement("button");
+    button.setAttribute("id","button")
+    button.innerHTML = "Fav";
+
+    var p = document.createElement("p");
+    p.textContent = item.name;
+
+    localStorage.setItem("porductlist",dataOfProduct)
+    var pPrice = document.createElement("p");
+    pPrice.textContent = `MRP ${item.price}`;
+    div.append(img, button, p, pPrice);
+    rightDiv.append(div);
+  });
+</script>
diff --git a/sideBar.html b/sideBar.html
new file mode 100644
index 0000000..dcd215c
--- /dev/null
+++ b/sideBar.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+    <link href='https://unpkg.com/boxicons@2.0.9/css/boxicons.min.css' rel='stylesheet'>
+    <style>
+        #details  
+
+        {
+            
+            width: 620px;
+            background-color: lawngreen;
+            padding: 2px 6px;
+            font: 16px "Open Sans", Calibri, sans-serif;
+   
+        }
+        #details  > summary >span
+        {
+            
+                float: right;
+            
+            
+        }
+        #details[open] > summary >span
+        {
+            
+                float: right;
+                content: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAPtJREFUSEvtleERATEUhD8V0AEdoAJUgA50gApQAUpQASpABeiADujArImZm7vIS8bcP/l3l3277+1tchVKXpWS+fkLmA5nLboATbMiDiCutqBlCVyBVl5AL85xDZooda8pCimaAzOzPAxYAOJ5L19Mf/kWJ6Cb1fcJNNx41cRJns73myWg/QmwTBSYAqt8TegkH4FOpMgeGPiwIYEaoHEtq2SNbH2kCgivrrbGFENg9w0Tc9mpuP+FYAOMQg3ECMgqRbeeI7q71HitCZ0DX0PK9iG30QMUhOCKmeBDoAiO3cPaRdniT/rhyKpPx++LLGalTBDDV8D8BUzbXs+cIBmzAPLtAAAAAElFTkSuQmCC");
+            
+            
+        }
+        
+        #details > summary::marker
+        {
+            
+            content: "";
+        }
+        #details > li
+        {
+           background-color: lawngreen;
+           list-style: none;
+            font: 16px "Open Sans", Calibri, sans-serif;
+            
+        }
+        #n > li
+        {
+            list-style: none;
+            
+            padding: 10px;
+        }
+        #n > li:hover
+        {
+                background-color: lawngreen;
+                opacity: 1;
+                 
+        }
+    </style>
+  </head>
+  <body>
+    <details id="details">
+      <summary>Tid<span><i class='bx bxs-right-arrow'></i></span></summary>
+      <div id = "n">
+        <li>1</li>
+        <li>2</li>
+        <li>5</li>
+        <li>2</li>
+      </div>
+      <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAANVJREFUSEu1lV0NAkEMhL9zBFJwAA6QAA5AAg7AweEAHIADUACZZJvwk+N2SztP9zRf59ptO5LVJfszBDgBD2AB6NutIYDMTStg7SXUAOStFDPg0gqqBcj3BijNtgXSAjDfvqQRcFQegKXRAOzHCF6A+Qog0GCafwECqfGC6Nd9KQJgppsyzm9pIgE2ztPXGNGAMzDJAuh9LD+bEJHgCsyzmrwrVYeP6b1UnfLQDsU8fFWoai07zXu1apt8LFWnrGsdG1Xu0q+TKUONX8rJdFXbsuzCAE/j5jYZKYpDjQAAAABJRU5ErkJggg=="/>
+    </details>
+  </body>
+</html>
