From 9a12b82f2e34cd978e43950fedc070daab625116 Mon Sep 17 00:00:00 2001
From: SHIVANI PRAJAPATI <shivaniprajapati10jan@gmail.com>
Date: Tue, 19 Aug 2025 18:45:40 +0530
Subject: [PATCH 1/2] text color set and cards set center

---
 index.html      | 290 ++++++++++++++++++++++++------------------------
 styles/main.css |  17 ++-
 2 files changed, 163 insertions(+), 144 deletions(-)

diff --git a/index.html b/index.html
index 7b3ce92d..3031b1fd 100644
--- a/index.html
+++ b/index.html
@@ -60,7 +60,7 @@
   
   <!-- === SMART PROGRESS DASHBOARD FEATURE START === -->
   <link rel="stylesheet" href="./styles/progress-dashboard.css" />
-  <!-- === SMART PROGRESS DASHBOARD FEATURE END === -->
+  <!-- === SMART PROGRESS DASHBOARD FEATURE END === --> 
   
   <!-- Inline custom tweaks -->
   <style>
@@ -372,146 +372,149 @@ <h5 class="card-Header">JavaScript Mini Projects</h5>
     <!-- ================================ Leaderboard Section Starts Here ================================ -->
     <section id="leaderboardSection">
       <div class="container">
-        <h3 data-aos-duration="650" data-aos="fade-up" class="secHeader"><span class="">Top Coder</span> of the Week</h3>
-        <p data-aos-duration="650" data-aos="fade-up" class="leaderboard-Para">
-          Meet our top coders who accepted challenges, wrote great code,
-          contributed to open source, and stood out as the best performers of
-          the week.
-        </p>
-        <div class="row">
+        <!-- to make it center wrap inside div -->
+        <div class="lead-description">
+          <h3 data-aos-duration="650" data-aos="fade-up" class="secHeader"><span class="">Top Coder</span> of the Week</h3>
+          <p data-aos-duration="650" data-aos="fade-up" class="leaderboard-Para">
+            Meet our top coders who accepted challenges, wrote great code,
+            contributed to open source, and stood out as the best performers of
+            the week.
+          </p>
+        </div> 
           <!-- ======= owl cousel =========== -->
-          <div data-aos-duration="650" data-aos="fade-up" class="owl-carousel owl-theme">
-            <!-- === top coder 1 === -->
-            <div class="item">
-              <div class="card leaderboard-Card">
-                <div class="card-body leaderBoard-Container">
-                  <div class="leaderBoard-userContainer">
-                    <img
-                      src="assets/images/leaderboard-section/user-1.png"
-                      class="img-fluid leaderboard-Img"
-                      alt="user 1"
-                    />
-                  </div>
-
-                  <h5 class="card-title userName">Rahul</h5>
-
-                  <div class="leaderboradUser-RankContainer">
-                    <p class="rankPosition">
-                      <i class="fa-solid fa-award"></i> 1st Rank
-                    </p>
-                    <p class="rankPoints">
-                      <i class="fa-solid fa-medal"></i> 1080 Points
-                    </p>
-                  </div>
-                </div>
-              </div>
-            </div>
-
-            <!-- === top coder 2 === -->
-            <div class="item">
-              <div class="card leaderboard-Card">
-                <div class="card-body leaderBoard-Container">
-                  <div class="leaderBoard-userContainer">
-                    <img
-                      src="assets/images/leaderboard-section/user-2.png"
-                      class="img-fluid leaderboard-Img"
-                      alt="user 2"
-                    />
-                  </div>
-
-                  <h5 class="card-title userName">Manisha</h5>
-
-                  <div class="leaderboradUser-RankContainer">
-                    <p class="rankPosition">
-                      <i class="fa-solid fa-award"></i> 2nd Rank
-                    </p>
-                    <p class="rankPoints">
-                      <i class="fa-solid fa-medal"></i> 1060 Points
-                    </p>
-                  </div>
-                </div>
-              </div>
-            </div>
-
-            <!-- === top coder 3 === -->
-            <div class="item">
-              <div class="card leaderboard-Card">
-                <div class="card-body leaderBoard-Container">
-                  <div class="leaderBoard-userContainer">
-                    <img
-                      src="assets/images/leaderboard-section/user-1.png"
-                      class="img-fluid leaderboard-Img"
-                      alt="user 3"
-                    />
-                  </div>
-
-                  <h5 class="card-title userName">Pankaj</h5>
-
-                  <div class="leaderboradUser-RankContainer">
-                    <p class="rankPosition">
-                      <i class="fa-solid fa-award"></i> 3rd Rank
-                    </p>
-                    <p class="rankPoints">
-                      <i class="fa-solid fa-medal"></i> 1055 Points
-                    </p>
-                  </div>
-                </div>
-              </div>
-            </div>
-
-            <!-- === top coder 4 === -->
-            <div class="item">
-              <div class="card leaderboard-Card">
-                <div class="card-body leaderBoard-Container">
-                  <div class="leaderBoard-userContainer">
-                    <img
-                      src="assets/images/leaderboard-section/user-2.png"
-                      class="img-fluid leaderboard-Img"
-                      alt="user 4"
-                    />
-                  </div>
-
-                  <h5 class="card-title userName">Simarn</h5>
-
-                  <div class="leaderboradUser-RankContainer">
-                    <p class="rankPosition">
-                      <i class="fa-solid fa-award"></i> 4th Rank
-                    </p>
-                    <p class="rankPoints">
-                      <i class="fa-solid fa-medal"></i> 1030 Points
-                    </p>
-                  </div>
-                </div>
-              </div>
-            </div>
-
-            <!-- === top coder 5 === -->
-            <div class="item">
-              <div class="card leaderboard-Card">
-                <div class="card-body leaderBoard-Container">
-                  <div class="leaderBoard-userContainer">
-                    <img
-                      src="assets/images/leaderboard-section/user-1.png"
-                      class="img-fluid leaderboard-Img"
-                      alt="user 5"
-                    />
-                  </div>
-
-                  <h5 class="card-title userName">Rahul</h5>
-
-                  <div class="leaderboradUser-RankContainer">
-                    <p class="rankPosition">
-                      <i class="fa-solid fa-award"></i> 5th Rank
-                    </p>
-                    <p class="rankPoints">
-                      <i class="fa-solid fa-medal"></i> 1020 Points
-                    </p>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
+           <div class="row justify-content-center">
+             <div data-aos-duration="650" data-aos="fade-up" class="owl-carousel owl-theme">
+               <!-- === top coder 1 === -->
+               <div class="item">
+                 <div class="card leaderboard-Card">
+                   <div class="card-body leaderBoard-Container">
+                     <div class="leaderBoard-userContainer">
+                       <img
+                         src="assets/images/leaderboard-section/user-1.png"
+                         class="img-fluid leaderboard-Img"
+                         alt="user 1"
+                       />
+                     </div>
+   
+                     <h5 class="card-title userName">Rahul</h5>
+   
+                     <div class="leaderboradUser-RankContainer">
+                       <p class="rankPosition">
+                         <i class="fa-solid fa-award"></i> 1st Rank
+                       </p>
+                       <p class="rankPoints">
+                         <i class="fa-solid fa-medal"></i> 1080 Points
+                       </p>
+                     </div>
+                   </div>
+                 </div>
+               </div>
+   
+               <!-- === top coder 2 === -->
+               <div class="item">
+                 <div class="card leaderboard-Card">
+                   <div class="card-body leaderBoard-Container">
+                     <div class="leaderBoard-userContainer">
+                       <img
+                         src="assets/images/leaderboard-section/user-2.png"
+                         class="img-fluid leaderboard-Img"
+                         alt="user 2"
+                       />
+                     </div>
+   
+                     <h5 class="card-title userName">Manisha</h5>
+   
+                     <div class="leaderboradUser-RankContainer">
+                       <p class="rankPosition">
+                         <i class="fa-solid fa-award"></i> 2nd Rank
+                       </p>
+                       <p class="rankPoints">
+                         <i class="fa-solid fa-medal"></i> 1060 Points
+                       </p>
+                     </div>
+                   </div>
+                 </div>
+               </div>
+   
+               <!-- === top coder 3 === -->
+               <div class="item">
+                 <div class="card leaderboard-Card">
+                   <div class="card-body leaderBoard-Container">
+                     <div class="leaderBoard-userContainer">
+                       <img
+                         src="assets/images/leaderboard-section/user-1.png"
+                         class="img-fluid leaderboard-Img"
+                         alt="user 3"
+                       />
+                     </div>
+   
+                     <h5 class="card-title userName">Pankaj</h5>
+   
+                     <div class="leaderboradUser-RankContainer">
+                       <p class="rankPosition">
+                         <i class="fa-solid fa-award"></i> 3rd Rank
+                       </p>
+                       <p class="rankPoints">
+                         <i class="fa-solid fa-medal"></i> 1055 Points
+                       </p>
+                     </div>
+                   </div>
+                 </div>
+               </div>
+   
+               <!-- === top coder 4 === -->
+               <div class="item">
+                 <div class="card leaderboard-Card">
+                   <div class="card-body leaderBoard-Container">
+                     <div class="leaderBoard-userContainer">
+                       <img
+                         src="assets/images/leaderboard-section/user-2.png"
+                         class="img-fluid leaderboard-Img"
+                         alt="user 4"
+                       />
+                     </div>
+   
+                     <h5 class="card-title userName">Simarn</h5>
+   
+                     <div class="leaderboradUser-RankContainer">
+                       <p class="rankPosition">
+                         <i class="fa-solid fa-award"></i> 4th Rank
+                       </p>
+                       <p class="rankPoints">
+                         <i class="fa-solid fa-medal"></i> 1030 Points
+                       </p>
+                     </div>
+                   </div>
+                 </div>
+               </div>
+   
+               <!-- === top coder 5 === -->
+               <div class="item">
+                 <div class="card leaderboard-Card">
+                   <div class="card-body leaderBoard-Container">
+                     <div class="leaderBoard-userContainer">
+                       <img
+                         src="assets/images/leaderboard-section/user-1.png"
+                         class="img-fluid leaderboard-Img"
+                         alt="user 5"
+                       />
+                     </div>
+   
+                     <h5 class="card-title userName">Dinesh</h5>
+   
+                     <div class="leaderboradUser-RankContainer">
+                       <p class="rankPosition">
+                         <i class="fa-solid fa-award"></i> 5th Rank
+                       </p>
+                       <p class="rankPoints">
+                         <i class="fa-solid fa-medal"></i> 1020 Points
+                       </p>
+                     </div>
+                   </div>
+                 </div>
+               </div>
+             </div> 
+           </div>
       </div>
     </section>
     <!-- ================================ Leaderboard Section End Here ================================ -->
@@ -622,13 +625,16 @@ <h5 class="footer-title w-100">Contact Us</h5>
     <script src="scripts/main.js"></script>
     
     <!-- ================ Typed JS ================  -->
-    <script src="https://unpkg.com/typed.js@2.1.0/dist/typed.umd.js"></script>
+    <script src="https://unpkg.com/typed.js@2.1.0/dist/typed.umd.js"></script> 
+
     <script>
       var typed = new Typed("#element", {
         strings: ["Code", "Challenge", "Conquer"],
         typeSpeed: 50,
         loop: true,
-      });
+      }); 
+
+
     </script>
     
     <!-- ================ Module Scripts ================  -->
diff --git a/styles/main.css b/styles/main.css
index 65688260..6ca9dd72 100644
--- a/styles/main.css
+++ b/styles/main.css
@@ -410,8 +410,14 @@ nav {
     text-align: center;
     font-size: 2rem;
     font-weight: 600;
+    color: #000;
+}
+.lead-description{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
 }
-
 .secHeader span {
     color: #2563eb;
 }
@@ -419,9 +425,16 @@ nav {
 .leaderboard-Para {
     text-align: center;
     opacity: 0.8;
+    color: #000; 
+    width: 50%;
+    font-size: 1.2rem;
 }
+ 
 
-
+/* Make cards evenly spaced */
+.owl-stage-outer{  
+    margin-left: 9rem;
+}  
 .leaderboard-Img {
     width: 100px !important;
     border: 5px solid #e0ecfa;

From 9918bfe5e0bf62e84bf7ff7aacdc1b24d91e5639 Mon Sep 17 00:00:00 2001
From: SHIVANI PRAJAPATI <shivaniprajapati10jan@gmail.com>
Date: Tue, 19 Aug 2025 19:24:54 +0530
Subject: [PATCH 2/2] cards in top coder makes perfact in center

---
 index.html      | 288 ++++++++++++++++++++++++++----------------------
 styles.css      |   2 +-
 styles/main.css |  14 ++-
 3 files changed, 171 insertions(+), 133 deletions(-)

diff --git a/index.html b/index.html
index 3031b1fd..531fdd4b 100644
--- a/index.html
+++ b/index.html
@@ -11,6 +11,14 @@
       href="assets/favicon/codeClip-favicon.png"
       type="image/png"
     />
+    <!-- Swiper CSS -->
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"
+    />
+
+    <!-- Swiper JS -->
+    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
 
     <!-- ================ Meta Tags ================  -->
     <meta
@@ -383,136 +391,137 @@ <h3 data-aos-duration="650" data-aos="fade-up" class="secHeader"><span class="">
         </div> 
           <!-- ======= owl cousel =========== -->
            <div class="row justify-content-center">
-             <div data-aos-duration="650" data-aos="fade-up" class="owl-carousel owl-theme">
-               <!-- === top coder 1 === -->
-               <div class="item">
-                 <div class="card leaderboard-Card">
-                   <div class="card-body leaderBoard-Container">
-                     <div class="leaderBoard-userContainer">
-                       <img
-                         src="assets/images/leaderboard-section/user-1.png"
-                         class="img-fluid leaderboard-Img"
-                         alt="user 1"
-                       />
-                     </div>
-   
-                     <h5 class="card-title userName">Rahul</h5>
-   
-                     <div class="leaderboradUser-RankContainer">
-                       <p class="rankPosition">
-                         <i class="fa-solid fa-award"></i> 1st Rank
-                       </p>
-                       <p class="rankPoints">
-                         <i class="fa-solid fa-medal"></i> 1080 Points
-                       </p>
-                     </div>
-                   </div>
-                 </div>
-               </div>
-   
-               <!-- === top coder 2 === -->
-               <div class="item">
-                 <div class="card leaderboard-Card">
-                   <div class="card-body leaderBoard-Container">
-                     <div class="leaderBoard-userContainer">
-                       <img
-                         src="assets/images/leaderboard-section/user-2.png"
-                         class="img-fluid leaderboard-Img"
-                         alt="user 2"
-                       />
-                     </div>
-   
-                     <h5 class="card-title userName">Manisha</h5>
-   
-                     <div class="leaderboradUser-RankContainer">
-                       <p class="rankPosition">
-                         <i class="fa-solid fa-award"></i> 2nd Rank
-                       </p>
-                       <p class="rankPoints">
-                         <i class="fa-solid fa-medal"></i> 1060 Points
-                       </p>
-                     </div>
-                   </div>
-                 </div>
-               </div>
-   
-               <!-- === top coder 3 === -->
-               <div class="item">
-                 <div class="card leaderboard-Card">
-                   <div class="card-body leaderBoard-Container">
-                     <div class="leaderBoard-userContainer">
-                       <img
-                         src="assets/images/leaderboard-section/user-1.png"
-                         class="img-fluid leaderboard-Img"
-                         alt="user 3"
-                       />
-                     </div>
-   
-                     <h5 class="card-title userName">Pankaj</h5>
-   
-                     <div class="leaderboradUser-RankContainer">
-                       <p class="rankPosition">
-                         <i class="fa-solid fa-award"></i> 3rd Rank
-                       </p>
-                       <p class="rankPoints">
-                         <i class="fa-solid fa-medal"></i> 1055 Points
-                       </p>
-                     </div>
-                   </div>
-                 </div>
-               </div>
-   
-               <!-- === top coder 4 === -->
-               <div class="item">
-                 <div class="card leaderboard-Card">
-                   <div class="card-body leaderBoard-Container">
-                     <div class="leaderBoard-userContainer">
-                       <img
-                         src="assets/images/leaderboard-section/user-2.png"
-                         class="img-fluid leaderboard-Img"
-                         alt="user 4"
-                       />
-                     </div>
-   
-                     <h5 class="card-title userName">Simarn</h5>
-   
-                     <div class="leaderboradUser-RankContainer">
-                       <p class="rankPosition">
-                         <i class="fa-solid fa-award"></i> 4th Rank
-                       </p>
-                       <p class="rankPoints">
-                         <i class="fa-solid fa-medal"></i> 1030 Points
-                       </p>
-                     </div>
-                   </div>
-                 </div>
-               </div>
-   
-               <!-- === top coder 5 === -->
-               <div class="item">
-                 <div class="card leaderboard-Card">
-                   <div class="card-body leaderBoard-Container">
-                     <div class="leaderBoard-userContainer">
-                       <img
-                         src="assets/images/leaderboard-section/user-1.png"
-                         class="img-fluid leaderboard-Img"
-                         alt="user 5"
-                       />
-                     </div>
-   
-                     <h5 class="card-title userName">Dinesh</h5>
+             <div class="swiper mySwiper">
+              <div class="swiper-wrapper">
+                <!-- === top coder 1 === -->
+                <div class="item swiper-slide">
+                  <div class="card leaderboard-Card">
+                    <div class="card-body leaderBoard-Container">
+                      <div class="leaderBoard-userContainer">
+                        <img
+                          src="assets/images/leaderboard-section/user-1.png"
+                          class="img-fluid leaderboard-Img"
+                          alt="user 1"
+                        />
+                      </div>
+    
+                      <h5 class="card-title userName">Rahul</h5>
+    
+                      <div class="leaderboradUser-RankContainer">
+                        <p class="rankPosition">
+                          <i class="fa-solid fa-award"></i> 1st Rank
+                        </p>
+                        <p class="rankPoints">
+                          <i class="fa-solid fa-medal"></i> 1080 Points
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <!-- === top coder 2 === -->
+                <div class="item swiper-slide">
+                  <div class="card leaderboard-Card">
+                    <div class="card-body leaderBoard-Container">
+                      <div class="leaderBoard-userContainer">
+                        <img
+                          src="assets/images/leaderboard-section/user-2.png"
+                          class="img-fluid leaderboard-Img"
+                          alt="user 2"
+                        />
+                      </div>
+    
+                      <h5 class="card-title userName">Manisha</h5>
+    
+                      <div class="leaderboradUser-RankContainer">
+                        <p class="rankPosition">
+                          <i class="fa-solid fa-award"></i> 2nd Rank
+                        </p>
+                        <p class="rankPoints">
+                          <i class="fa-solid fa-medal"></i> 1060 Points
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <!-- === top coder 3 === -->
+                <div class="item swiper-slide">
+                  <div class="card leaderboard-Card">
+                    <div class="card-body leaderBoard-Container">
+                      <div class="leaderBoard-userContainer">
+                        <img
+                          src="assets/images/leaderboard-section/user-1.png"
+                          class="img-fluid leaderboard-Img"
+                          alt="user 3"
+                        />
+                      </div>
+    
+                      <h5 class="card-title userName">Pankaj</h5>
+    
+                      <div class="leaderboradUser-RankContainer">
+                        <p class="rankPosition">
+                          <i class="fa-solid fa-award"></i> 3rd Rank
+                        </p>
+                        <p class="rankPoints">
+                          <i class="fa-solid fa-medal"></i> 1055 Points
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+    
+                <!-- === top coder 4 === -->
+                <div class="item swiper-slide">
+                  <div class="card leaderboard-Card">
+                    <div class="card-body leaderBoard-Container">
+                      <div class="leaderBoard-userContainer">
+                        <img
+                          src="assets/images/leaderboard-section/user-2.png"
+                          class="img-fluid leaderboard-Img"
+                          alt="user 4"
+                        />
+                      </div>
+    
+                      <h5 class="card-title userName">Simarn</h5>
+    
+                      <div class="leaderboradUser-RankContainer">
+                        <p class="rankPosition">
+                          <i class="fa-solid fa-award"></i> 4th Rank
+                        </p>
+                        <p class="rankPoints">
+                          <i class="fa-solid fa-medal"></i> 1030 Points
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- === top coder 5 === -->
+                <div class="item swiper-slide">
+                  <div class="card leaderboard-Card">
+                    <div class="card-body leaderBoard-Container">
+                      <div class="leaderBoard-userContainer">
+                        <img
+                          src="assets/images/leaderboard-section/user-1.png"
+                          class="img-fluid leaderboard-Img"
+                          alt="user 5"
+                        />
+                      </div>
+    
+                      <h5 class="card-title userName">Dinesh</h5>
+    
+                      <div class="leaderboradUser-RankContainer">
+                        <p class="rankPosition">
+                          <i class="fa-solid fa-award"></i> 5th Rank
+                        </p>
+                        <p class="rankPoints">
+                          <i class="fa-solid fa-medal"></i> 1020 Points
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div> 
    
-                     <div class="leaderboradUser-RankContainer">
-                       <p class="rankPosition">
-                         <i class="fa-solid fa-award"></i> 5th Rank
-                       </p>
-                       <p class="rankPoints">
-                         <i class="fa-solid fa-medal"></i> 1020 Points
-                       </p>
-                     </div>
-                   </div>
-                 </div>
-               </div>
              </div> 
            </div>
       </div>
@@ -627,6 +636,27 @@ <h5 class="footer-title w-100">Contact Us</h5>
     <!-- ================ Typed JS ================  -->
     <script src="https://unpkg.com/typed.js@2.1.0/dist/typed.umd.js"></script> 
 
+     <script>
+          var swiper = new Swiper(".mySwiper", {
+        loop: true,                 // infinite loop
+        spaceBetween: 20,           // gap between slides
+        slidesPerView: 3,           // show 3 cards
+        autoplay: {
+          delay: 2500,              // 2.5s between slides
+          disableOnInteraction: false, // keep autoplay after user interaction
+        },
+        navigation: {
+          nextEl: ".swiper-button-next",
+          prevEl: ".swiper-button-prev",
+        },
+        pagination: {
+          el: ".swiper-pagination",
+          clickable: true,
+        },
+      });
+
+    </script>
+
     <script>
       var typed = new Typed("#element", {
         strings: ["Code", "Challenge", "Conquer"],
diff --git a/styles.css b/styles.css
index 6003dbee..0872b22c 100644
--- a/styles.css
+++ b/styles.css
@@ -549,7 +549,7 @@ body {
   margin: 10px;
   border-radius: 10px;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.24);
-  border: 2px solid rgba(249, 15, 15, 0.12);
+  /* border: 2px solid rgba(249, 15, 15, 0.12); */
   font-size: 16px;
   transition: all 0.3s ease;
   position: relative;
diff --git a/styles/main.css b/styles/main.css
index 6ca9dd72..fc224c65 100644
--- a/styles/main.css
+++ b/styles/main.css
@@ -431,9 +431,17 @@ nav {
 }
  
 
-/* Make cards evenly spaced */
-.owl-stage-outer{  
-    margin-left: 9rem;
+.swiper {
+    width: 100%; 
+}
+
+.swiper-slide { 
+    border-radius: 10px;
+    text-align: center;
+    font-size: 20px;
+    padding: 20px 0;
+    font-weight: bold;  
+    margin-left: 12px;  
 }  
 .leaderboard-Img {
     width: 100px !important;