diff --git a/index.html b/index.html
new file mode 100644
index 0000000..8084d69
--- /dev/null
+++ b/index.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <title></title>
+        <meta name="description" content="">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"
+            integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
+        <style>
+            p {
+                color:aliceblue;
+            }
+        </style>
+    </head>
+    <body class="bg-dark">
+        <div class="container text-center">
+            <div class="row my-5 gap-3 justify-content-center">
+                <!-- Used bootrap classesfor responsive containers -->
+                <div class="col-md-5 bg-light rounded p-3">
+                    <h3>Drag from here</h3><hr style="height: 3px; background: black;">
+                    <!-- home container is the one that contains the items initially, considered bootstrap icons -->
+                    <div id="home" class="p-3">
+                        <i class="bi bi-1-square m-1" draggable="true" ondragstart="drag(event)"></i>
+                        <i class="bi bi-2-square m-1" draggable="true" ondragstart="drag(event)"></i>
+                        <i class="bi bi-3-square m-1" draggable="true" ondragstart="drag(event)"></i>
+                    </div>
+                </div>
+                <div class="col-md-5 bg-light rounded p-3">
+                    <h3>Drop here</h3><hr style="height: 3px; background: black;">
+                    <!-- Drop area / target area -->
+                    <div id="targetarea" class="p-4 bg-info rounded" ondrop="drop(event)" ondragover="allowDrop(event)">
+                        
+                    </div>
+                </div>
+            </div>
+            <button class="btn btn-primary mb-3" onclick="reset()">Reset</button>
+            <p>Use reset button to clear drop area.</p>
+            <p class="bg-secondary rounded">Created using bootstrap and its icons, assuming I can do so for this assignment. <i class="bi bi-pen"></i> : Ashwin</p>
+        </div>
+        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"
+            integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz"
+            crossorigin="anonymous"></script>
+        <script>
+            //overwrite inbuilt function
+            function allowDrop(ev) {
+                ev.preventDefault();
+            }
+
+            //storing classname of icon in text when drag starts
+            function drag(ev) {
+                ev.dataTransfer.setData("text", ev.target.className);
+            }
+
+            //accessing classname of currently dropping icon
+            function drop(ev) {
+                ev.preventDefault();
+                var data = ev.dataTransfer.getData("text");
+                // Assuming no duplicate icons exist, then an alternative is to give id's to the draggable items and use getElementbyId //
+                ev.target.appendChild(document.getElementsByClassName(data)[0]);
+                alert("Moved successfully");
+            }
+            
+            //reseting the icons
+            function reset(){
+                var targetarea = document.getElementById("targetarea");
+                var home = document.getElementById("home");
+                home.innerHTML+= targetarea.innerHTML;
+                targetarea.innerHTML = "";
+                alert("Cleared drop area. All items in Home container");
+            }
+        </script>
+    </body>
+</html>
\ No newline at end of file
