diff --git a/index.html b/Hactoberfest2020index.html
similarity index 84%
rename from index.html
rename to Hactoberfest2020index.html
index 15ffb1b..57c24f1 100644
--- a/index.html
+++ b/Hactoberfest2020index.html
@@ -25,7 +25,16 @@
 
 <body>
 
-   <h1>Array Visualization</h1>
+    <img src="img/hack.jpeg">
+    <h2>Hacktoberfest is a "month-long celebration of open source software." It's organized by DigitalOcean and DEV and open to anyone. In my experience, Hacktoberfest is an easy way for users of open source to become contributors to open source.</h2>
+    <p style="text-align: center;">To Visit Offiaial page of <strong>Hacktoberfest</strong> <a href="https://hacktoberfest.digitalocean.com/">Click Here</a></p>
+
+    <h4>The project below is the part if this event.</h4>
+
+
+    <hr>
+
+    <h1>Array Visualization</h1>
 
 
     <br>
diff --git a/Hactoberfest2020index.html.html b/Hactoberfest2020index.html.html
new file mode 100644
index 0000000..57c24f1
--- /dev/null
+++ b/Hactoberfest2020index.html.html
@@ -0,0 +1,107 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="index.css" />
+    <script src="index.js"></script>
+    <script>
+        function allowDrop(ev) {
+            ev.preventDefault();
+        }
+
+        function drag(ev) {
+            ev.dataTransfer.setData("text", ev.target.id);
+        }
+
+        function drop(ev) {
+            ev.preventDefault();
+            var data = ev.dataTransfer.getData("text");
+            ev.target.appendChild(document.getElementById(data));
+        }
+    </script>
+</head>
+
+<body>
+
+    <img src="img/hack.jpeg">
+    <h2>Hacktoberfest is a "month-long celebration of open source software." It's organized by DigitalOcean and DEV and open to anyone. In my experience, Hacktoberfest is an easy way for users of open source to become contributors to open source.</h2>
+    <p style="text-align: center;">To Visit Offiaial page of <strong>Hacktoberfest</strong> <a href="https://hacktoberfest.digitalocean.com/">Click Here</a></p>
+
+    <h4>The project below is the part if this event.</h4>
+
+
+    <hr>
+
+    <h1>Array Visualization</h1>
+
+
+    <br>
+   
+    
+    <section id="box" class="first">
+        <div class="container-each">
+            <p>0</p>
+            <div class="container" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
+        </div>
+        <div class="container-each">
+            <p>1</p>
+            <div class="container" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
+        </div>
+        <div class="container-each">
+            <p>2</p>
+            <div class="container" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
+        </div>
+        <div class="container-each">
+            <p>3</p>
+            <div class="container" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
+        </div>
+        <div class="container-each">
+            <p>4</p>
+            <div class="container" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
+        </div>
+        <!-- <div class="container-each">
+            <p>5</p>
+            <div class="container" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
+        </div>
+        <div class="container-each">
+            <p>6</p>
+            <div class="container" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
+        </div>
+        <div class="container-each">
+            <p>7</p>
+            <div class="container" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
+        </div> -->
+        
+        
+    </section>
+    <section class="element-holder">
+         <div id="drag1" draggable="true" ondragstart="drag(event)" class="each-block">
+        <p>1</p>
+    </div>
+    <div id="drag2" draggable="true" ondragstart="drag(event)" class="each-block">
+        <p>2</p>
+    </div>
+    <div id="drag3" draggable="true" ondragstart="drag(event)" class="each-block">
+        <p>3</p>
+    </div>
+    <div id="drag4" draggable="true" ondragstart="drag(event)" class="each-block">
+        <p>4</p>
+    </div>
+    <div id="drag5" draggable="true" ondragstart="drag(event)" class="each-block">
+        <p>5</p>
+    </div>
+    <div id="drag6" draggable="true" ondragstart="drag(event)" class="each-block">
+        <p>+</p>
+    </div>
+    </section>
+    <section class="button-holder">
+        <button type="button">Add New Row</button>
+        
+    </section>
+    
+    
+</body>
+
+</html>
\ No newline at end of file
diff --git a/img/hack.jpeg b/img/hack.jpeg
new file mode 100644
index 0000000..b86e874
Binary files /dev/null and b/img/hack.jpeg differ
