diff --git a/drag-n-drop/index.html b/drag-n-drop/index.html
new file mode 100644
index 0000000..a04cdc4
--- /dev/null
+++ b/drag-n-drop/index.html
@@ -0,0 +1,20 @@
+
+
+
+
+
+
+ Drag N Drop
+
+
+
+
+
+
+
+
+
+
+
diff --git a/drag-n-drop/script.js b/drag-n-drop/script.js
new file mode 100644
index 0000000..abc8a6e
--- /dev/null
+++ b/drag-n-drop/script.js
@@ -0,0 +1,39 @@
+const fill = document.querySelector('.fill')
+const empties = document.querySelectorAll('.empty')
+
+fill.addEventListener('dragstart', dragStart)
+fill.addEventListener('dragend', dragEnd)
+
+for(const empty of empties) {
+ empty.addEventListener('dragover', dragOver)
+ empty.addEventListener('dragenter', dragEnter)
+ empty.addEventListener('dragleave', dragLeave)
+ empty.addEventListener('drop', dragDrop)
+}
+
+function dragStart() {
+ this.className += ' hold'
+ setTimeout(() => this.className = 'invisible', 0)
+}
+
+function dragEnd() {
+ this.className = 'fill'
+}
+
+function dragOver(e) {
+ e.preventDefault()
+}
+
+function dragEnter(e) {
+ e.preventDefault()
+ this.className += ' hovered'
+}
+
+function dragLeave() {
+ this.className = 'empty'
+}
+
+function dragDrop() {
+ this.className = 'empty'
+ this.append(fill)
+}
\ No newline at end of file
diff --git a/drag-n-drop/style.css b/drag-n-drop/style.css
new file mode 100644
index 0000000..c5036ab
--- /dev/null
+++ b/drag-n-drop/style.css
@@ -0,0 +1,44 @@
+* {
+ box-sizing: border-box;
+}
+
+body {
+ background-color: steelblue;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ height: 100vh;
+ overflow: hidden;
+ margin: 0;
+}
+
+.empty {
+ height: 150px;
+ width: 150px;
+ margin: 10px;
+ border: solid 3px black;
+ background: white;
+}
+
+.fill {
+ background-image: url('https://source.unsplash.com/random/150x150');
+ height: 145px;
+ width: 145px;
+ cursor: pointer;
+}
+
+.hold {
+ border: solid 5px #ccc;
+}
+
+.hovered {
+ background-color: #333;
+ border-color: white;
+ border-style: dashed;
+}
+
+@media (max-width: 800px) {
+ body {
+ flex-direction: column;
+ }
+}
diff --git a/social-links/index.html b/social-links/index.html
deleted file mode 100644
index ac73829..0000000
--- a/social-links/index.html
+++ /dev/null
@@ -1,39 +0,0 @@
-
-
-
-
-
-
-
- Social Links
-
-
-
-
-
-
-
diff --git a/social-links/script.js b/social-links/script.js
deleted file mode 100644
index 1758aea..0000000
--- a/social-links/script.js
+++ /dev/null
@@ -1,7 +0,0 @@
-const container = document.getElementById('container')
-const open = document.getElementById('open')
-const close = document.getElementById('close')
-
-open.addEventListener('click', () => container.classList.add('open'))
-
-close.addEventListener('click', () => container.classList.remove('open'))
\ No newline at end of file
diff --git a/social-links/style.css b/social-links/style.css
deleted file mode 100644
index a30958c..0000000
--- a/social-links/style.css
+++ /dev/null
@@ -1,102 +0,0 @@
-@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');
-
-* {
- box-sizing: border-box;
-}
-
-body {
- background-color: #e0e0e0;
- display: flex;
- align-items: center;
- justify-content: center;
- height: 100vh;
- margin: 0;
-}
-
-.container {
- background-color: #fff;
- border-radius: 50px;
- overflow: hidden;
- display: flex;
- align-items: center;
- justify-content: center;
- position: relative;
- transition: 0.4s ease;
- height: 70px;
- width: 70px;
-}
-
-.container.open {
- width: 350px;
-}
-
-.container .open-btn {
- position: absolute;
- top: 0;
- left: 0;
-
- background-image: linear-gradient(
- 110.1deg,
- rgba(241, 115, 30, 1) 18.9%,
- rgba(231, 29, 54, 1) 90.7%
- );
- color: #fff;
- cursor: pointer;
- border: 0;
- border-radius: 50%;
- font-size: 26px;
- display: flex;
- align-items: center;
- justify-content: center;
- padding: 0;
- height: 70px;
- width: 70px;
- z-index: 100;
-}
-
-.container.open .open-btn {
- display: none;
-}
-
-.container a {
- background-color: #fff;
- border-radius: 50%;
- font-size: 26px;
- display: flex;
- align-items: center;
- justify-content: center;
- position: absolute;
- top: 0;
- left: 0;
- margin: 10px;
- height: 50px;
- width: 50px;
- text-decoration: none;
- opacity: 0;
-}
-
-.container.open a {
- position: static;
- opacity: 1;
- transition: 0.4s ease;
-}
-
-.container a.ytb {
- background-color: #ff0000;
-}
-.container a.twt {
- background-color: #1da1f2;
-}
-.container a.x {
- background-color: #282c37;
-}
-.container a.lin {
- background-color: #007bb5;
-}
-.container a.ins {
- background-color: #c32aa3;
-}
-
-.container a i {
- color: #fff;
-}