From 1cc1181fe5aabe3f3f19a96faf86cc1f70cd7345 Mon Sep 17 00:00:00 2001
From: ZainabR11 <zainabrizwan811@gmail.com>
Date: Wed, 4 Oct 2023 12:04:11 +0500
Subject: [PATCH] Animated Hover Button

---
 DataScienceWebsite.github.io |   1 +
 courses.css                  |  52 +++-
 css/style.css                | 579 ++++++++++++++++++++++++++++++++++-
 index.html                   |  81 ++++-
 4 files changed, 679 insertions(+), 34 deletions(-)
 create mode 160000 DataScienceWebsite.github.io

diff --git a/DataScienceWebsite.github.io b/DataScienceWebsite.github.io
new file mode 160000
index 0000000..4172376
--- /dev/null
+++ b/DataScienceWebsite.github.io
@@ -0,0 +1 @@
+Subproject commit 41723760869a414b791641eb168d6abb3deb8ad4
diff --git a/courses.css b/courses.css
index 39756d2..51aa67e 100644
--- a/courses.css
+++ b/courses.css
@@ -43,7 +43,6 @@ body {
   color: var(--color-white);
   background: #071f30;
 }
-
 .container {
   width: var(--container-width-lg);
   margin: 0 auto;
@@ -91,8 +90,37 @@ img {
   display: block;
   object-fit: cover;
 }
+/* HOVER ANIMATED BUTTON */
+/* .container1{
+  display: flex;
+  flex-direction: row;
+  justify-content: space-evenly;
+  align-items: center;
+  text-align: center;
+  min-height: 100vh;
+}
+.hack1{
+width: 300px;
+height: 100px;
+border: none;
+color: white;
+background-color: rgb(231, 18, 53);
+border-radius: 4px;
+box-shadow: inset 0 0 0 0 yellow;
+transition: ease-out 0.3s;
+font-size: 2rem;
+outline: none;
+
+
+}
+.hack1:hover{
+  box-shadow: inset 300px 0 0 yellow;
+  cursor: pointer;
+  color: black; */
 
-.btn {
+/* } */
+
+/* .btn {
   display: inline-block;
   border-color: rgb(121, 116, 116);
   background-color: rgba(157, 147, 147, 0.562);
@@ -101,15 +129,15 @@ img {
   border-right: 1px solid;
   font-weight: 500;
   transition: var(--transition);
-}
+} 
 
 .btn:hover {
   background: transparent;
   color: var(--color-white);
   border-color: var(--color-white);
-}
+} */
 
-.btn-primary {
+/* .btn-primary {
   background: var(--color-define);
   color: var(--color-white);
   border-radius: 30px;
@@ -120,9 +148,9 @@ img {
   border-top: 3px solid;
   border-right: 3px solid;
   border-color: #761142b1;
-}
+}  */
 
-.button a span {
+/* .button a span {
   position: relative;
   display: inline-block;
   font-size: 18px;
@@ -133,9 +161,9 @@ img {
   letter-spacing: 2px;
   font-weight: 500;
   margin-top: 60px;
-}
+}  */
 
-.button a span:before {
+/* .button a span:before {
   content: "";
   position: absolute;
   top: 0;
@@ -146,11 +174,11 @@ img {
   background-color: #ff960b;
   z-index: -1;
   transition: all ease 0.5s;
-}
-
+}  */
+/* 
 .button a span:hover:before {
   width: 100%;
-}
+}  */
 
 .imgg img {
   position: relative;
diff --git a/css/style.css b/css/style.css
index 1f55cd7..df31ac5 100644
--- a/css/style.css
+++ b/css/style.css
@@ -575,7 +575,7 @@ nav button {
   gap: 5rem;
 }
 
-.about__achievements-right > p {
+.about__achievements-right>p {
   margin: 1.6rem 0 2.5rem;
 }
 
@@ -818,7 +818,7 @@ img {
   border-color: #761142b1;
 }
 
-.button a span {
+/* .button a span {
   position: relative;
   display: block;
   font-size: 18px;
@@ -832,9 +832,9 @@ img {
   letter-spacing: 2px;
   font-weight: 500;
   margin-top: 60px;
-}
+} */
 
-.button a span:before {
+/* .button a span:before {
   content: "";
   position: absolute;
   top: 0;
@@ -845,7 +845,7 @@ img {
   background-color: #ff960b;
   z-index: -1;
   transition: all ease 0.5s;
-}
+} */
 
 .button a span:hover:before {
   width: 100%;
@@ -1090,13 +1090,14 @@ nav button {
   color: var(--color-white);
   border-color: var(--color-white);
   box-shadow: 5px 5px 5px orange;
+
 }
 
-.nav-animation{
+.nav-animation {
   position: relative;
 }
 
-.nav-animation::after{
+.nav-animation::after {
   content: '';
   position: absolute;
   width: 100%;
@@ -1104,13 +1105,13 @@ nav button {
   background: #ff3c78;
   left: 0;
   bottom: 0;
-  transform: scale(0,1);
+  transform: scale(0, 1);
   transform-origin: 0% 100%;
   transition: transform 0.4s ease;
 }
 
-.nav-animation:hover::after{
-  transform: scale(1,1);
+.nav-animation:hover::after {
+  transform: scale(1, 1);
 }
 
 .para1 {
@@ -1439,6 +1440,7 @@ header {
   grid-template-columns: 1fr;
   gap: 1rem;
 }
+
 .faq {
   padding: 1.2rem;
   display: flex;
@@ -1510,16 +1512,20 @@ footer {
   justify-content: space-evenly;
   align-items: center;
 }
+
 .footer__1 {
   width: 250px;
 }
+
 .footer__2 {
   width: 250px;
 }
+
 .footer__3 {
   width: 250px;
 }
-.footer__container > div h4 {
+
+.footer__container>div h4 {
   margin-bottom: 1.2rem;
 }
 
@@ -1583,6 +1589,7 @@ footer ul li a:hover {
 .footer__socials {
   transition: 1s;
 }
+
 .footer__socials:hover {
   transform: scale(1.3);
   z-index: 2;
@@ -1738,6 +1745,7 @@ footer ul li a:hover {
     gap: 5rem;
   }
 }
+
 @media screen and (max-width: 600px) {
   .container {
     width: var(--container-width-sm);
@@ -1788,6 +1796,7 @@ footer ul li a:hover {
   .testimonial__body {
     padding: 1.2rem;
   }
+
   /*Adding style to chatbot in bot.css*/
 
   /* ====================== FOOTER ===================== */
@@ -1824,9 +1833,11 @@ footer ul li a:hover {
   z-index: 100;
   opacity: 0;
 }
+
 .opa {
   opacity: 1;
 }
+
 .progress:hover {
   background: transparent;
   background: #03e9f4;
@@ -1857,3 +1868,549 @@ footer ul li a:hover {
 }
 
 /* ====================== END OF SCROLL-TO-TOP BUTTON ===================== */
+
+@import url('https://fonts.googleapis.com/css2?family=Dosis:wght@200&family=Gabarito&family=Oswald:wght@500&family=Rubik:wght@500&display=swap');
+
+/* HOVER ANIMATED BUTTON */
+.container1 {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-evenly;
+  align-items: center;
+  text-align: center;
+  min-height: 100vh;
+}
+
+.hack1 {
+  width: 200px;
+  height: 80px;
+  border: none;
+  color: white;
+  background-color: rgb(130, 15, 126);
+  border-radius: 4px;
+  box-shadow: inset 0 0 0 0 #f8991c;
+  transition: ease-out 0.3s;
+  font-size: 20px;
+  outline: none;
+  margin-bottom: 500px;
+  border-radius: 10% 0% 30%;
+  font-family: bold;
+}
+
+.hack1:hover {
+  box-shadow: inset 300px 0 0 #e9cb04;
+  cursor: pointer;
+  color: black;
+
+}
+
+.hack1 span {
+  cursor: pointer;
+  display: inline-block;
+  position: relative;
+  transition: 0.5s;
+  color: white;
+  top: 1px;
+  /* font-family: 'Dosis', sans-serif; */
+  font-family: 'Dosis', sans-serif;
+}
+
+.hack1 span:after {
+  content: '\00bb';
+  position: absolute;
+  opacity: 0;
+  top: 0;
+  right: -20px;
+  transition: 0.5s;
+  color: white;
+}
+
+.hack1:hover span {
+  padding-right: 25px;
+
+}
+
+.hack1:hover span:after {
+  opacity: 1;
+  right: 0;
+}
+
+.hack2 a {
+  position: relative;
+  padding: 20px 50px;
+  display: block;
+  text-decoration: none;
+  text-transform: uppercase;
+  width: 200px;
+  overflow: hidden;
+
+}
+
+.hack2 a span {
+  position: relative;
+  z-index: 1;
+  color: #fff;
+  font-size: 15px;
+  font-family: bold;
+  font-family: 'Dosis', sans-serif;
+
+}
+
+a .liquid {
+  position: absolute;
+  left: 0;
+  top: -80px;
+  width: 200px;
+  height: 200px;
+  background: #7211f0;
+  box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.5);
+  transition: 0.5s;
+  overflow: hidden;
+
+}
+
+a .liquid:before,
+a .liquid:after {
+  content: '';
+  position: absolute;
+  width: 200%;
+  height: 200%;
+  top: 0;
+  left: 50%;
+  transform: translate(-50%, -75%);
+
+}
+
+a .liquid:before {
+  border-radius: 45%;
+  background: rgba(20, 20, 20, 1);
+  animation: zr 5s linear infinite;
+  overflow: hidden;
+}
+
+a .liquid:after {
+  border-radius: 40%;
+  background: rgba(20, 20, 20, 0.5);
+  animation: zr 10s linear infinite;
+}
+
+@keyframes zr {
+  0% {
+    transform: translate(-50%, -75%) rotate(0deg);
+  }
+
+  100% {
+    transform: translate(-50%, -75%) rotate(360deg);
+  }
+}
+
+a:hover .liquid {
+  top: -120px;
+}
+
+.hack2 a {
+  bottom: -50px;
+  left: 70px;
+}
+
+.hack3 a {
+  position: relative;
+  padding: 20px 50px;
+  display: block;
+  text-decoration: none;
+  text-transform: uppercase;
+  width: 200px;
+  overflow: hidden;
+
+}
+
+.hack3 a span {
+  position: relative;
+  z-index: 1;
+  color: #fff;
+  font-size: 15px;
+  font-family: bold;
+  font-family: 'Dosis', sans-serif;
+
+
+}
+
+a .liquid3 {
+  position: absolute;
+  left: 0;
+  top: -80px;
+  width: 200px;
+  height: 200px;
+  background: #7211f0;
+  box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.5);
+  transition: 0.5s;
+  overflow: hidden;
+
+}
+
+a .liquid3:before,
+a .liquid3:after {
+  content: '';
+  position: absolute;
+  width: 200%;
+  height: 200%;
+  top: 0;
+  left: 50%;
+  transform: translate(-50%, -75%);
+
+}
+
+a .liquid3:before {
+  border-radius: 45%;
+  background: rgba(20, 20, 20, 1);
+  animation: zr 5s linear infinite;
+  overflow: hidden;
+}
+
+a .liquid3:after {
+  border-radius: 40%;
+  background: rgba(20, 20, 20, 0.5);
+  animation: zr3 10s linear infinite;
+}
+
+@keyframes zr3 {
+  0% {
+    transform: translate(-50%, -75%) rotate(0deg);
+  }
+
+  100% {
+    transform: translate(-50%, -75%) rotate(360deg);
+  }
+}
+
+a:hover .liquid3 {
+  top: -120px;
+}
+
+.hack3 a {
+  margin-bottom: 60px;
+  bottom: -50px;
+  left: 70px;
+
+}
+
+
+.hack4 a {
+  position: relative;
+  padding: 20px 50px;
+  display: block;
+  text-decoration: none;
+  text-transform: uppercase;
+  width: 200px;
+  overflow: hidden;
+
+}
+
+.hack4 a span {
+  position: relative;
+  z-index: 1;
+  color: #fff;
+  font-size: 15px;
+  font-family: bold;
+  font-family: 'Dosis', sans-serif;
+
+
+}
+
+a .liquid4 {
+  position: absolute;
+  left: 0;
+  top: -80px;
+  width: 200px;
+  height: 200px;
+  background: #7211f0;
+  box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.5);
+  transition: 0.5s;
+  overflow: hidden;
+
+}
+
+a .liquid4:before,
+a .liquid4:after {
+  content: '';
+  position: absolute;
+  width: 200%;
+  height: 200%;
+  top: 0;
+  left: 50%;
+  transform: translate(-50%, -75%);
+
+}
+
+a .liquid4:before {
+  border-radius: 45%;
+  background: rgba(20, 20, 20, 1);
+  animation: zr 5s linear infinite;
+  overflow: hidden;
+}
+
+a .liquid4:after {
+  border-radius: 40%;
+  background: rgba(20, 20, 20, 0.5);
+  animation: zr4 10s linear infinite;
+}
+
+@keyframes zr4 {
+  0% {
+    transform: translate(-50%, -75%) rotate(0deg);
+  }
+
+  100% {
+    transform: translate(-50%, -75%) rotate(360deg);
+  }
+}
+
+a:hover .liquid4 {
+  top: -120px;
+}
+
+.hack4 a {
+  bottom: -50px;
+  left: 70px;
+}
+
+
+.hack5 a {
+  position: relative;
+  padding: 20px 50px;
+  display: block;
+  text-decoration: none;
+  text-transform: uppercase;
+  width: 200px;
+  overflow: hidden;
+
+}
+
+.hack5 a span {
+  position: relative;
+  z-index: 1;
+  color: #fff;
+  font-size: 15px;
+  font-family: bold;
+  font-family: 'Dosis', sans-serif;
+
+
+}
+
+a .liquid5 {
+  position: absolute;
+  left: 0;
+  top: -80px;
+  width: 200px;
+  height: 200px;
+  background: #7211f0;
+  box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.5);
+  transition: 0.5s;
+  overflow: hidden;
+
+}
+
+a .liquid5:before,
+a .liquid5:after {
+  content: '';
+  position: absolute;
+  width: 200%;
+  height: 200%;
+  top: 0;
+  left: 50%;
+  transform: translate(-50%, -75%);
+
+}
+
+a .liquid5:before {
+  border-radius: 45%;
+  background: rgba(20, 20, 20, 1);
+  animation: zr 5s linear infinite;
+  overflow: hidden;
+}
+
+a .liquid5:after {
+  border-radius: 40%;
+  background: rgba(20, 20, 20, 0.5);
+  animation: zr5 10s linear infinite;
+}
+
+@keyframes zr5 {
+  0% {
+    transform: translate(-50%, -75%) rotate(0deg);
+  }
+
+  100% {
+    transform: translate(-50%, -75%) rotate(360deg);
+  }
+}
+
+a:hover .liquid5 {
+  top: -120px;
+}
+
+.hack5 a {
+  bottom: -10px;
+  left: 70px;
+}
+
+
+
+.hack6 a {
+  position: relative;
+  padding: 20px 50px;
+  display: block;
+  text-decoration: none;
+  text-transform: uppercase;
+  width: 200px;
+  overflow: hidden;
+
+}
+
+.hack6 a span {
+  position: relative;
+  z-index: 1;
+  color: #fff;
+  font-size: 15px;
+  font-family: bold;
+  font-family: 'Dosis', sans-serif;
+
+
+}
+
+a .liquid6 {
+  position: absolute;
+  left: 0;
+  top: -80px;
+  width: 200px;
+  height: 200px;
+  background: #7211f0;
+  box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.5);
+  transition: 0.5s;
+  overflow: hidden;
+
+}
+
+a .liquid6:before,
+a .liquid6:after {
+  content: '';
+  position: absolute;
+  width: 200%;
+  height: 200%;
+  top: 0;
+  left: 50%;
+  transform: translate(-50%, -75%);
+
+}
+
+a .liquid6:before {
+  border-radius: 45%;
+  background: rgba(20, 20, 20, 1);
+  animation: zr 5s linear infinite;
+  overflow: hidden;
+}
+
+a .liquid6:after {
+  border-radius: 40%;
+  background: rgba(20, 20, 20, 0.5);
+  animation: zr6 10s linear infinite;
+}
+
+@keyframes zr6 {
+  0% {
+    transform: translate(-50%, -75%) rotate(0deg);
+  }
+
+  100% {
+    transform: translate(-50%, -75%) rotate(360deg);
+  }
+}
+
+a:hover .liquid6 {
+  top: -120px;
+}
+
+.hack6 a {
+  bottom: -10px;
+  left: 70px;
+}
+
+
+.hack7 a {
+  position: relative;
+  padding: 20px 50px;
+  display: block;
+  text-decoration: none;
+  text-transform: uppercase;
+  width: 200px;
+  overflow: hidden;
+
+}
+
+.hack7 a span {
+  position: relative;
+  z-index: 1;
+  color: #fff;
+  font-size: 15px;
+  font-family: bold;
+  font-family: 'Dosis', sans-serif;
+
+
+}
+
+a .liquid7 {
+  position: absolute;
+  left: 0;
+  top: -80px;
+  width: 200px;
+  height: 200px;
+  background: #7211f0;
+  box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.5);
+  transition: 0.5s;
+  overflow: hidden;
+
+}
+
+a .liquid7:before,
+a .liquid7:after {
+  content: '';
+  position: absolute;
+  width: 200%;
+  height: 200%;
+  top: 0;
+  left: 50%;
+  transform: translate(-50%, -75%);
+
+}
+
+a .liquid7:before {
+  border-radius: 45%;
+  background: rgba(20, 20, 20, 1);
+  animation: zr 5s linear infinite;
+  overflow: hidden;
+}
+
+a .liquid7:after {
+  border-radius: 40%;
+  background: rgba(20, 20, 20, 0.5);
+  animation: zr7 10s linear infinite;
+}
+
+@keyframes zr7 {
+  0% {
+    transform: translate(-50%, -75%) rotate(0deg);
+  }
+
+  100% {
+    transform: translate(-50%, -75%) rotate(360deg);
+  }
+}
+
+a:hover .liquid7 {
+  top: -120px;
+}
+
+.hack7 a {
+  bottom: -10px;
+  left: 70px;
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index 0bf5fb5..d99c1c4 100644
--- a/index.html
+++ b/index.html
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
   <meta charset="UTF-8" />
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
@@ -67,6 +68,7 @@
   <link rel="stylesheet" href="/chatbot/style.css" />
 
   <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet" />
+  
 </head>
 
 <body>
@@ -201,8 +203,13 @@ <h1>
               <span class="wrap"></span>
             </p>
           </h1>
+           
+          <div class="container1">
+          <button  class="hack1"><a href="login"><span> Get Started</span></a></button>
+          </div>
+
+          <!-- <a href="./login/index.html"  class="btn-1"> <span>Get Started</span> </a --> -->
 
-          <a href="./login/index.html" class="bttn bttn-prrimary btn-top"><span>Get Started</span></a -->
         </div>
         <div class="imgg lg:max-w-lg lg:w-full md:w-1/2 w-5/6">
           <img class="object-cover object-center rounded" alt="hero" src="./images/1.webp" />
@@ -339,11 +346,20 @@ <h2 class="headingh2" data-aos="zoom-in">Our Popular Courses</h2>
           </div>
           <div class="course__info">
             <h4>Data Sc 1</h4>
+
             <p>
               Lorem, ipsum dolor sit amet consectetur adipisicing elit.
               Nesciunt aperiam deserunt eaque quos iure ad debitis.
             </p>
-            <a href="course.html" class="btn btn-primary">Learn More</a>
+            <!-- hacktoberfest -->
+            
+            <div class="hack2">
+              <a href="course.html" class="hack">
+                <span> Learn More</span>
+                <div class="liquid"></div>
+              </a>
+            </div>
+            <!-- <a href="course.html" class="btn btn-primary">Learn More</a> -->
           </div>
         </article>
 
@@ -357,7 +373,15 @@ <h4>Data Sc 2</h4>
               Lorem, ipsum dolor sit amet consectetur adipisicing elit.
               Nesciunt aperiam deserunt eaque quos iure ad debitis.
             </p>
-            <a href="course.html" class="btn btn-primary">Learn More</a>
+            <!-- hacktoberfest -->
+            
+            <div class="hack3">
+              <a href="course.html" class="hack03">
+                <span> Learn More</span>
+                <div class="liquid3"></div>
+              </a>
+            </div>
+            <!-- <a href="course.html" class="btn btn-primary">Learn More</a> -->
           </div>
         </article>
 
@@ -371,7 +395,15 @@ <h4>Data Sc 3</h4>
               Lorem, ipsum dolor sit amet consectetur adipisicing elit.
               Nesciunt aperiam deserunt eaque quos iure ad debitis.
             </p>
-            <a href="course.html" class="btn btn-primary">Learn More</a>
+            <!-- hacktoberfest -->
+            
+            <div class="hack4">
+              <a href="course.html" class="hack04">
+                <span> Learn More</span>
+                <div class="liquid4"></div>
+              </a>
+            </div> 
+            <!-- <a href="course.html" class="btn btn-primary">Learn More</a> -->
           </div>
         </article>
 
@@ -384,8 +416,16 @@ <h4>GFG Data Science course</h4>
             <p>
               You can find the complete course on Data science here along with projects.
             </p>
-            <a href="https://practice.geeksforgeeks.org/courses/data-science-live?source=google&medium=cpc&device=c&keyword=data%20science%20course&matchtype=b&campaignid=17061683975&adgroup=139651128687&gad=1&gclid=Cj0KCQjw5f2lBhCkARIsAHeTvlhFSSVoZfpfScApBk5UgCNdXh7uBqmBgNQWVamY2xYTErJZSnlcRN8aAnVHEALw_wcB"
-              target="_blank" class="btn btn-primary">Learn More</a>
+             <!-- hacktoberfest -->
+            
+             <div class="hack5">
+              <a href="https://practice.geeksforgeeks.org/courses/data-science-live?source=google&medium=cpc&device=c&keyword=data%20science%20course&matchtype=b&campaignid=17061683975&adgroup=139651128687&gad=1&gclid=Cj0KCQjw5f2lBhCkARIsAHeTvlhFSSVoZfpfScApBk5UgCNdXh7uBqmBgNQWVamY2xYTErJZSnlcRN8aAnVHEALw_wcB" class="hack05">
+                <span> Learn More</span>
+                <div class="liquid5"></div>
+              </a>
+            </div> 
+            <!-- <a href="https://practice.geeksforgeeks.org/courses/data-science-live?source=google&medium=cpc&device=c&keyword=data%20science%20course&matchtype=b&campaignid=17061683975&adgroup=139651128687&gad=1&gclid=Cj0KCQjw5f2lBhCkARIsAHeTvlhFSSVoZfpfScApBk5UgCNdXh7uBqmBgNQWVamY2xYTErJZSnlcRN8aAnVHEALw_wcB"
+              target="_blank" class="btn btn-primary">Learn More</a> -->
           </div>
         </article>
 
@@ -398,7 +438,16 @@ <h4>Machine learning online course</h4>
             <p>
               This course is completely free of cost offered by Edureka and is available on youtube.
             </p>
-            <a href="https://www.youtube.com/watch?v=GwIo3gDZCVQ" target="_blank" class="btn btn-primary">Learn More</a>
+
+             <!-- hacktoberfest -->
+            
+             <div class="hack6">
+              <a href="https://www.youtube.com/watch?v=GwIo3gDZCVQ" class="hack06">
+                <span> Learn More</span>
+                <div class="liquid6"></div>
+              </a>
+            </div> 
+            <!-- <a href="https://www.youtube.com/watch?v=GwIo3gDZCVQ" target="_blank" class="btn btn-primary">Learn More</a> -->
           </div>
         </article>
 
@@ -411,8 +460,16 @@ <h4>Data Science online course</h4>
             <p>
               Complete Data Science course offered by Udemy
             </p>
-            <a href="https://www.udemy.com/course/the-data-science-course-complete-data-science-bootcamp/"
-              target="_blank" class="btn btn-primary">Learn More</a>
+             <!-- hacktoberfest -->
+            
+             <div class="hack7">
+              <a href="https://www.udemy.com/course/the-data-science-course-complete-data-science-bootcamp/" class="hack07">
+                <span> Learn More</span>
+                <div class="liquid7"></div>
+              </a>
+            </div> 
+            <!-- <a href="https://www.udemy.com/course/the-data-science-course-complete-data-science-bootcamp/"
+              target="_blank" class="btn btn-primary">Learn More</a> -->
           </div>
         </article>
 
@@ -634,7 +691,9 @@ <h2>Bot AI Chat-bot</h2>
           </div>
           <!-- Type your message input -->
           <input type="text" id="user-input" placeholder="Type your message..." class="colr" style="color: black;" />
-          <button id="send-btn">Send</button>
+           <button id="send-btn">Send</button> 
+        
+         
         </div>
 
         <script>
@@ -784,7 +843,7 @@ <h4 class="chatbox-message-no-message">Ask me anything !</h4> -->
   <script src="./chatbot/script.js"></script>
   <script>
     let scroll1 = document.querySelector(".progress");
-    window.addEventListener("scroll",function(){
+    window.addEventListener("scroll", function () {
       scroll1.classList.toggle("opa", window.scrollY > 700)
     })
     // slides for testimonials section