diff --git a/front end b/front end
new file mode 100644
index 00000000..4873d1b5
--- /dev/null
+++ b/front end	
@@ -0,0 +1,99 @@
+<!DOCTYPE html> 
+
+<html> 
+
+<head> 
+
+    <title> 
+
+        How to create drag and drop 
+
+        features for images reorder 
+
+        using HTML CSS and jQueryUI? 
+
+    </title> 
+
+</head> 
+
+       
+
+<body> 
+
+    <h1 style="color:green">GeeksforGeeks</h1>  
+
+      
+
+    <b>Drag and drop using jQuery UI Sortable</b> 
+
+      
+
+    <div class="height"></div><br> 
+
+      
+
+    <div id = "imageListId"> 
+
+        <div id="imageNo1" class = "listitemClass"> 
+
+            <img src="images/geeksimage1.png" alt=""> 
+
+        </div> 
+
+          
+
+        <div id="imageNo2" class = "listitemClass"> 
+
+            <img src="images/geeksimage2.png" alt=""> 
+
+        </div> 
+
+          
+
+        <div id="imageNo3" class = "listitemClass"> 
+
+            <img src="images/geeksimage3.png" alt=""> 
+
+        </div> 
+
+          
+
+        <div id="imageNo4" class = "listitemClass"> 
+
+            <img src="images/geeksimage4.png" alt=""> 
+
+        </div> 
+
+          
+
+        <div id="imageNo5" class = "listitemClass"> 
+
+            <img src="images/geeksimage5.png" alt=""> 
+
+        </div> 
+
+          
+
+        <div id="imageNo6" class = "listitemClass"> 
+
+            <img src="images/geeksimage6.png" alt=""> 
+
+        </div> 
+
+    </div> 
+
+      
+
+    <div id="outputDiv"> 
+
+        <b>Output of ID's of images : </b> 
+
+        <input id="outputvalues" type="text" value="" /> 
+
+    </div> 
+
+</body> 
+
+  
+
+</html>
