final-11

index.html

@@ -66,7 +66,9 @@
   <!--Home Page Starts-->
   <div id="hero" class="hero">
       <div id="hero-content" class="hero-content fadeInUp-animation">
-          <h2 class="hehe fadeInUp-animation">Where Learning is <span>made practical</span></h2>
+          <h2 class="hehe fadeInUp-animation">Where Learning is 
+            <span>made practical</span>
+          </h2>
           <ul class="icons ">
             <li>
                 <a class="icon" href="https://www.youtube.com/" target="_blank">
@@ -116,13 +118,14 @@ <h2 class="hehe fadeInUp-animation">Where Learning is <span>made practical</span
       <img class="stone-2" src="images/rock.png" alt="Stone" width="70px">
       <img class="walk" src="images/walking-1.gif" alt="cartoon" height="160px">
       <img class="walk-1" src="images/doggo.gif" alt="cartoon" height="60px">
-      <img class="thoughts" src="images/thought-cloud.png" alt="cartoon" height="80px">
+      <img class="thoughts" src="images/night-cloud.png" alt="cartoon" height="80px">
+      <img class="thoughts-day" src="images/cloud-sun.png" alt="cartoon" height="80px">
     </div>
     <!--Tree, stone, human resource end-->
     <!--About section Starts-->
     <div id="about" class="about">
         <h2 class="heading">Why Us?</h2>
-        <img class="fade-in-right-target" src="images/about.png" alt="cartoon">
+        <img class="fade-in-right-target ani-img" src="images/about.png" alt="cartoon">
         <div class="space fade-in-left-target">
           <p>Welcome to Mini Minds! Our mission is to help children enrich their school basics while having tons of fun. At Mini Minds, we believe learning should be practical and enjoyable, which is why we've created a special place just for kids aged 5 to 12. Our site is packed with cool games, exciting activities, and interesting stories designed to make learning fun. Our logo represents our commitment to making education both practical and entertaining.</p><br><br>
           <a class="button-about" href="about.html">Know More</a>
@@ -132,7 +135,7 @@ <h2 class="heading">Why Us?</h2>
     <!--Courses section Starts-->
     <div id="courses" class="courses space">
         <h2 class="heading">What do we do?</h2>
-        <img class="fade-in-right-target" src="images/our courses.png" alt="cartoon">
+        <img class="fade-in-right-target ani-img" src="images/our courses.png" alt="cartoon">
         <div class="space fade-in-left-target">
           <p>Interactive Stories: We provide engaging stories help improve reading skills and ignite a imagination skills. According to Science, reading Sci-fi stories can improve your Analytical and Imagination skills. Each story is crafted to be entertaining and educational. Practical Learning: We believe in making education practical. Our content helps kids connect what they learn with real-world experiences, making learning meaningful. At Mini Minds, we are dedicated to creating a space where kids can learn, play, and grow</p><br><br>
           <a class="button-courses" onclick="window.dialog.showModal();">Explore Stories</a>
@@ -147,7 +150,8 @@ <h2 class="heading">What do we do?</h2>
     <!--Games section Starts-->
     <div class="games" id="games">
       <h2 class="heading">Our Edu-Games</h2>
-      <img class="fade-in-right-target" src="images/games.png" alt="cartoon"><br>
+      <img class="fade-in-right-target ani-img" src="images/games.png" alt="cartoon">
+      <br>
       <div class="space fade-in-left-target">
         <p>Our edu-games have levels, a new game unlocks on every level up ( course completion ) and games are fun and educational at the same time. Get ready for an awesome learning adventure! turn numbers into number magic, letters into language fun, and science into super cool discoveries. You'll explore, you'll laugh, and before you know it, you'll be a learning superstar! Dive into a world of fun where learning is an adventure. <strong>Note:</strong> Games are yet to be developed, if you still wanna explore our ideas about the game check them out by clicking on the button below!</p><br><br>
         <a class="button-games" href="courses.html">Coming soon!!</a>

styles.css

@@ -133,7 +133,7 @@ body.night nav ul {
 
 
 body.night .cursor-dot {
-    background-color: var(--moon-color);
+    background-color: var(--main-white);
 }
 /*Night stylings ends here*/
 /*Day stylings starts here*/
@@ -147,6 +147,10 @@ body.day header {
     top: 0;
 }
 
+body.day .cursor-dot {
+    background-color: var(--main-blue);
+}
+
 body.day .logo a {
     color: var(--main-green);
 }
@@ -552,6 +556,7 @@ a:visited {
     position: relative;
     z-index: 100;
     animation: 1.5s fadeInUp;
+    animation: 6s floating-img ease-in-out infinite;
 }
 
 .hero-content span {
@@ -680,7 +685,7 @@ nav:hover .menu-items-1 {
     overflow-x: none;
 }
 
-.thoughts {
+body.night .thoughts {
     display: block;
     position: relative;
     top: -500px;
@@ -689,6 +694,29 @@ nav:hover .menu-items-1 {
     overflow-x: none;
 }
 
+body.day .thoughts {
+    display: none;
+}
+
+body.day .thoughts-day {
+    display: block;
+    position: relative;
+    top: -500px;
+    left: 130px;
+    z-index: 100;
+    overflow-x: none;
+}
+
+body.night .thoughts-day {
+    display: none;
+}
+
+.ani-img {
+    animation: 6s floating-img ease-in-out infinite;
+    box-shadow: none !important;
+    animation-delay: 5s;
+}
+
 
 .walk-1 {
     position: relative;
@@ -751,6 +779,18 @@ nav:hover .menu-items-1 {
 }
 /*End of home interface*/
 /*Animations*/
+@keyframes floating-img {
+	0% {
+		transform: translatey(0px);
+	}
+	50% {
+		transform: translatey(-20px);
+	}
+	100% {
+		transform: translatey(0px);
+	}
+}
+
 @keyframes float {
     0% {
         transform: translateX(-80%);
@@ -850,14 +890,17 @@ nav:hover .menu-items-1 {
     .about > img {
         height: 160px;
         float: left;
+        animation: floating-img 6s ease-in-out infinite;
     }
 
     .courses > img {
         height: 160px;
+        animation: floating-img 6s ease-in-out infinite;
     }
 
     .games > img {
         height: 170px;
+        animation: floating-img 6s ease-in-out infinite;
     }
 
     .sign-in {
@@ -1087,7 +1130,7 @@ nav:hover .menu-items-1 {
         position: relative;
         top: -223px;
         z-index: 100;
-        animation: walking 27s infinite linear;
+        animation: walking 20s infinite linear;
         overflow-x: none;
     }
 
@@ -1102,7 +1145,7 @@ nav:hover .menu-items-1 {
 
     @keyframes walking {
         0% {
-            transform: translateX(800%);
+            transform: translateX(480%);
             overflow-x: none;
         }
         100% {
@@ -1113,7 +1156,7 @@ nav:hover .menu-items-1 {
 
     @keyframes walking-1 {
         0% {
-            transform: translateX(2000%);
+            transform: translateX(1850%);
             overflow-x: none;
         }
         100% {