diff --git a/index.html b/index.html
index 808b59c..0a36cf5 100644
--- a/index.html
+++ b/index.html
@@ -6,6 +6,7 @@
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <title>Copy To Clipboard With jQuery</title>
         <!-- Google Fonts Link -->
+        <link rel="stylesheet" href="styles.css">
         <link
                 href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap"
                 rel="stylesheet"
@@ -21,7 +22,12 @@
 <body>
     <div class="container">
         <h1>Copy to Clipboard</h1>
-
+        <textarea id="textField" class="text-field">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id gravida lorem. In sed tortor varius, commodo tellus vitae, sollicitudin ipsum. Aliquam quis augue malesuada, fringilla sem mattis, rhoncus ipsum. Nunc luctus a turpis in interdum.
+        </textarea>
+        <button class="copy-btn">Copy<i class="fas fa-clone"></i></button>
+        <span class="copied">Copied!</span>
     </div>
 </body>
+<script src="main.js"></script>
 </html>
\ No newline at end of file
diff --git a/main.js b/main.js
index e69de29..85f72b3 100644
--- a/main.js
+++ b/main.js
@@ -0,0 +1,16 @@
+$(document).ready(function (){
+    //two function to add and remove the class in the span
+    function add(){
+        $(".copied").addClass("bounce-effect");
+    }
+    function remove(){
+        $(".copied").removeClass("bounce-effect");
+    }
+
+    $(".copy-btn").click(function (){
+        $("#textField").select();
+        document.execCommand("copy");
+        add();
+        setTimeout(remove,800);
+    });
+});
\ No newline at end of file
diff --git a/styles.css b/styles.css
index e69de29..d476d27 100644
--- a/styles.css
+++ b/styles.css
@@ -0,0 +1,103 @@
+*{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+body{
+    margin: 0;
+    padding: 0;
+    height: 100vh;
+    background-color: #f3f4f7;
+    font-family: 'montserrat',sans-serif;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+input,textarea,button{
+    font-family: inherit;
+}
+.container{
+    width: 420px;
+    height: 530px;
+    padding: 25px;
+    background-color: #f3f4f7;
+    border-radius: 10px;
+    box-shadow: 0 0 25px rgba(83,87,95,0.25);
+}
+h1{
+    padding: 20px 0;
+    color: #090909;
+    font-size: 30px;
+    font-weight: 700;
+    text-align: center;
+    text-transform: uppercase;
+}
+.text-field{
+    width: 100%;
+    height: 230px;
+    margin: 20px 0;
+    padding: 10px;
+    background: transparent;
+    border: 1px solid #52565e;
+    font-size: 16px;
+    font-weight: 400;
+    outline: none;
+    resize: none;
+}
+.copy-btn{
+    padding: 10px 15px;
+    color: #f3f4f7;
+    background-color: #037ef3;
+    border-radius: 5px;
+    font-size: 16px;
+    font-weight: 600;
+    text-transform: uppercase;
+    border: none;
+    outline: none;
+    cursor: pointer;
+}
+.copy-btn i{
+    padding-left: 10px;
+}
+.copy-btn:active{
+    transform: scale(0.98);
+}
+span.copied{
+    display: block;
+    margin-top: 50px;
+    text-align: center;
+    font-size: 26px;
+    color: #858585;
+    transform: scale(0);
+    transition: all 0.5s;
+}
+span.bounce-effect{
+    animation: bounceIn 0.8s linear;
+}
+
+/* BounceIn Animation*/
+
+@keyframes bounceIn {
+    0%{
+        opacity: 0;
+        transform: scale(0.3);
+    }
+    20%{
+        transform: scale(1.1);
+    }
+    40%{
+        transform: scale(0.9);
+    }
+    60%{
+        opacity: 1;
+        transform: scale(1.03);
+    }
+    80%{
+        transform: scale(0.97);
+    }
+    100%{
+        opacity: 1;
+        transform: scale(1);
+    }
+}
\ No newline at end of file
