Enhanced bg color in dark mode and Added floating effect

PriyaGhosal · Oct 8, 2024 · 9a66020 · 9a66020
1 parent aeefcc1
commit 9a66020
Show file tree

Hide file tree

Showing 2 changed files with 116 additions and 9 deletions.
diff --git a/assets/css/darkmode.css b/assets/css/darkmode.css
@@ -8,7 +8,7 @@
     --light-white:#FFFFF0;
     --light-gray:#d3d3d3;
     --oxford-blue:#1a1f4d;
-    --black:#121212;
+    --black:#1e1e1e;
     --light-black:#2C2C2C;
     --charcoal-black:#3C3C3C;
     --roman-silver: #5A5A5A ;
@@ -1496,4 +1496,107 @@ body.nav-active { overflow: hidden; }
   .footer-bottom p{
     font-size: 1.0rem;
   }
-  }
+  }.header1{
+    animation-name: pulse1;
+    animation-duration: 2s;
+    animation-timing-function: ease-in-out;
+    animation-iteration-count: infinite;
+  }
+  .header2{
+    animation-name: pulse2;
+    animation-duration: 1.8s;
+    animation-timing-function: ease-in-out;
+    animation-iteration-count: infinite;
+  }
+  .header3{
+    animation-name: pulse3;
+    animation-duration: 2s;
+    animation-timing-function: ease-in-out;
+    animation-iteration-count: infinite;
+  }
+  .header4{
+    animation-name: pulse4;
+    animation-duration: 1.8s;
+    animation-timing-function: ease-in-out;
+    animation-iteration-count: infinite;
+  }
+  .header5{
+    animation-name: pulse5;
+    animation-duration: 2s;
+    animation-timing-function: ease-in-out;
+    animation-iteration-count: infinite;
+  }
+  .header6{
+    animation-name: pulse6;
+    animation-duration: 1.8s;
+    animation-timing-function: ease-in-out;
+    animation-iteration-count: infinite;
+  }
+
+  @keyframes pulse1{
+    0%{
+      transform: translateY(-3.5px);
+    }
+    50%{
+      transform: translateY(0px);
+    }
+    100%{
+      transform: translateY(-3.5px);
+    }
+  }
+  @keyframes pulse2{
+    0%{
+      transform: translateY(-5px);
+    }
+    50%{
+      transform: translateY(0px);
+    }
+    100%{
+      transform: translateY(-5px);
+    }
+  }
+  @keyframes pulse3{
+    0%{
+      transform: translateY(-3.5px);
+    }
+    50%{
+      transform: translateY(0px);
+    }
+    100%{
+      transform: translateY(-3.5px);
+    }
+  }
+  @keyframes pulse4{
+    0%{
+      transform: translateY(-5px);
+    }
+    50%{
+      transform: translateY(0px);
+    }
+    100%{
+      transform: translateY(-5px);
+    }
+  }
+  @keyframes pulse5{
+    0%{
+      transform: translateY(-3.5px);
+    }
+    50%{
+      transform: translateY(0px);
+    }
+    100%{
+      transform: translateY(-3.5px);
+    }
+  }
+  @keyframes pulse6{
+    0%{
+      transform: translateY(-5px);
+    }
+    50%{
+      transform: translateY(0px);
+    }
+    100%{
+      transform: translateY(-5px);
+    }
+  }
+
diff --git a/index.html b/index.html
@@ -265,7 +265,7 @@ <h3>Your Email</h3>
           <p id="keppi" class="title-sm text-center section-subtitle keppi" id="category-label" data-aos="flip-down">Course Categories</p>
 
           <h2 class="headline-md text-center section-title" data-aos="fade-down">
-           <div class="headline"> Browse Top <span class="span has-after">Categories</span></div>
+           <div class="header1"> Browse Top <span class="span has-after">Categories</span></div>
           </h2>
 
           <ul class="grid-list">
@@ -483,7 +483,7 @@ <h2 class="headline-md section-title">
           <p id="keppi" class="title-sm section-subtitle text-center ">Featured Courses</p>
 
           <h2 class="headline-md section-title text-center" id="course-label" data-aos="fade-down">
-           <div class="headline">Choose Unlimited <span class="span has-after">Courses</span</div> >
+           <div class="header1">Choose Unlimited <span class="span has-after">Courses</span</div> >
           </h2>
 
           <ul class="grid-list">
@@ -900,13 +900,14 @@ <h2 id="Trust">Trusted by Organizations</h2>
           <p id="keppi" class="title-sm text-center section-subtitle" id="category-label">Featured Blogs</p>
 
           <h2 class="headline-md text-center section-title" data-aos="fade-down">
-            Learn with <span class="span has-after">Articles</span>
+           <div class="header1">Learn with <span class="span has-after">Articles</span></div> 
           </h2>
 
           <ul class="grid-list">
             <li class="card-container" data-aos="fade-right"
             data-aos-offset="100"
             data-aos-easing="ease-in-sine">
+            <div class="header1">
               <div class="card blog-card">
                 <figure class="card-banner">
                   <img src="./assets/images/course-1.png" width="370" height="248" loading="lazy"
@@ -919,11 +920,12 @@ <h3 class="title-lg card-title">
                   <p class="title-sm">Explore the emerging trends in data science and how they are shaping industries globally.</p>
                   <a href="./pages/blog.html">Read More ...</a>
                 </div>
-              </div>
+              </div></div>
             </li>
             <li class="card-container" data-aos="fade-right"
             data-aos-offset="200"
             data-aos-easing="ease-in-sine">
+            <div class="header2">
               <div class="card blog-card">
                 <figure class="card-banner">
                   <img src="./assets/images/course-2.png" width="370" height="248" loading="lazy"
@@ -936,11 +938,12 @@ <h3 class="title-lg card-title">
                   <p class="title-sm">Discover how digital marketing is evolving with new platforms and technologies.</p>
                   <a href="./pages/blog.html">Read More ...</a>
                 </div>
-              </div>
+              </div></div>
             </li>
             <li class="card-container"data-aos="fade-right"
             data-aos-offset="300"
             data-aos-easing="ease-in-sine">
+            <div class="header3">
               <div class="card blog-card">
                 <figure class="card-banner">
                   <img src="./assets/images/course-6.png" width="370" height="248" loading="lazy"
@@ -953,7 +956,7 @@ <h3 class="title-lg card-title">
                   <p class="title-sm">Learn how to navigate the world of graphic design, from basic principles to advanced techniques.</p>
                   <a href="./pages/blog.html">Read More ...</a>
                 </div>
-              </div>
+              </div></div>
             </li>
           </ul>
 
@@ -1161,7 +1164,8 @@ <h2 class="headline-md section-title" id="cta-label" data-aos="fade-right">
           <input type="text" name="name" placeholder="Your Name" required>
           <input type="email" name="email" placeholder="Your Email" required>
           <textarea name="message" placeholder="Your Message" required></textarea>
-          <button type="submit">Send</button>
+          <button style="width: 80px ;font-size: 13px;
+           " type="submit;">Send</button>
         </form>
       </div>
     </section>