Skip to content

Commit 99c329f

Browse files
adityai0adityai0
authored
Merge pull request #536 from Shivin1016/new-feature
text color set balck , size increses and cards align in center with display three cards
2 parents 88448fa + 9918bfe commit 99c329f

File tree

3 files changed

+190
-133
lines changed

3 files changed

+190
-133
lines changed

‎index.html‎

Lines changed: 167 additions & 131 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,14 @@
1111
href="assets/favicon/codeClip-favicon.png"
1212
type="image/png"
1313
/>
14+
<!-- Swiper CSS -->
15+
<link
16+
rel="stylesheet"
17+
href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"
18+
/>
19+
20+
<!-- Swiper JS -->
21+
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
1422

1523
<!-- ================ Meta Tags ================ -->
1624
<meta
@@ -60,7 +68,7 @@
6068

6169
<!-- === SMART PROGRESS DASHBOARD FEATURE START === -->
6270
<link rel="stylesheet" href="./styles/progress-dashboard.css" />
63-
<!-- === SMART PROGRESS DASHBOARD FEATURE END === -->
71+
<!-- === SMART PROGRESS DASHBOARD FEATURE END === -->
6472

6573
<!-- Inline custom tweaks -->
6674
<style>
@@ -372,146 +380,150 @@ <h5 class="card-Header">JavaScript Mini Projects</h5>
372380
<!-- ================================ Leaderboard Section Starts Here ================================ -->
373381
<section id="leaderboardSection">
374382
<div class="container">
375-
<h3 data-aos-duration="650" data-aos="fade-up" class="secHeader"><span class="">Top Coder</span> of the Week</h3>
376-
<p data-aos-duration="650" data-aos="fade-up" class="leaderboard-Para">
377-
Meet our top coders who accepted challenges, wrote great code,
378-
contributed to open source, and stood out as the best performers of
379-
the week.
380-
</p>
381-
<div class="row">
383+
<!-- to make it center wrap inside div -->
384+
<div class="lead-description">
385+
<h3 data-aos-duration="650" data-aos="fade-up" class="secHeader"><span class="">Top Coder</span> of the Week</h3>
386+
<p data-aos-duration="650" data-aos="fade-up" class="leaderboard-Para">
387+
Meet our top coders who accepted challenges, wrote great code,
388+
contributed to open source, and stood out as the best performers of
389+
the week.
390+
</p>
391+
</div>
382392
<!-- ======= owl cousel =========== -->
383-
<div data-aos-duration="650" data-aos="fade-up" class="owl-carousel owl-theme">
384-
<!-- === top coder 1 === -->
385-
<div class="item">
386-
<div class="card leaderboard-Card">
387-
<div class="card-body leaderBoard-Container">
388-
<div class="leaderBoard-userContainer">
389-
<img
390-
src="assets/images/leaderboard-section/user-1.png"
391-
class="img-fluid leaderboard-Img"
392-
alt="user 1"
393-
/>
394-
</div>
395-
396-
<h5 class="card-title userName">Rahul</h5>
397-
398-
<div class="leaderboradUser-RankContainer">
399-
<p class="rankPosition">
400-
<i class="fa-solid fa-award"></i> 1st Rank
401-
</p>
402-
<p class="rankPoints">
403-
<i class="fa-solid fa-medal"></i> 1080 Points
404-
</p>
393+
<div class="row justify-content-center">
394+
<div class="swiper mySwiper">
395+
<div class="swiper-wrapper">
396+
<!-- === top coder 1 === -->
397+
<div class="item swiper-slide">
398+
<div class="card leaderboard-Card">
399+
<div class="card-body leaderBoard-Container">
400+
<div class="leaderBoard-userContainer">
401+
<img
402+
src="assets/images/leaderboard-section/user-1.png"
403+
class="img-fluid leaderboard-Img"
404+
alt="user 1"
405+
/>
406+
</div>
407+
408+
<h5 class="card-title userName">Rahul</h5>
409+
410+
<div class="leaderboradUser-RankContainer">
411+
<p class="rankPosition">
412+
<i class="fa-solid fa-award"></i> 1st Rank
413+
</p>
414+
<p class="rankPoints">
415+
<i class="fa-solid fa-medal"></i> 1080 Points
416+
</p>
417+
</div>
418+
</div>
405419
</div>
406420
</div>
407-
</div>
408-
</div>
409-
410-
<!-- === top coder 2 === -->
411-
<div class="item">
412-
<div class="card leaderboard-Card">
413-
<div class="card-body leaderBoard-Container">
414-
<div class="leaderBoard-userContainer">
415-
<img
416-
src="assets/images/leaderboard-section/user-2.png"
417-
class="img-fluid leaderboard-Img"
418-
alt="user 2"
419-
/>
420-
</div>
421-
422-
<h5 class="card-title userName">Manisha</h5>
423-
424-
<div class="leaderboradUser-RankContainer">
425-
<p class="rankPosition">
426-
<i class="fa-solid fa-award"></i> 2nd Rank
427-
</p>
428-
<p class="rankPoints">
429-
<i class="fa-solid fa-medal"></i> 1060 Points
430-
</p>
421+
<!-- === top coder 2 === -->
422+
<div class="item swiper-slide">
423+
<div class="card leaderboard-Card">
424+
<div class="card-body leaderBoard-Container">
425+
<div class="leaderBoard-userContainer">
426+
<img
427+
src="assets/images/leaderboard-section/user-2.png"
428+
class="img-fluid leaderboard-Img"
429+
alt="user 2"
430+
/>
431+
</div>
432+
433+
<h5 class="card-title userName">Manisha</h5>
434+
435+
<div class="leaderboradUser-RankContainer">
436+
<p class="rankPosition">
437+
<i class="fa-solid fa-award"></i> 2nd Rank
438+
</p>
439+
<p class="rankPoints">
440+
<i class="fa-solid fa-medal"></i> 1060 Points
441+
</p>
442+
</div>
443+
</div>
431444
</div>
432445
</div>
433-
</div>
434-
</div>
435-
436-
<!-- === top coder 3 === -->
437-
<div class="item">
438-
<div class="card leaderboard-Card">
439-
<div class="card-body leaderBoard-Container">
440-
<div class="leaderBoard-userContainer">
441-
<img
442-
src="assets/images/leaderboard-section/user-1.png"
443-
class="img-fluid leaderboard-Img"
444-
alt="user 3"
445-
/>
446-
</div>
447-
448-
<h5 class="card-title userName">Pankaj</h5>
449-
450-
<div class="leaderboradUser-RankContainer">
451-
<p class="rankPosition">
452-
<i class="fa-solid fa-award"></i> 3rd Rank
453-
</p>
454-
<p class="rankPoints">
455-
<i class="fa-solid fa-medal"></i> 1055 Points
456-
</p>
446+
<!-- === top coder 3 === -->
447+
<div class="item swiper-slide">
448+
<div class="card leaderboard-Card">
449+
<div class="card-body leaderBoard-Container">
450+
<div class="leaderBoard-userContainer">
451+
<img
452+
src="assets/images/leaderboard-section/user-1.png"
453+
class="img-fluid leaderboard-Img"
454+
alt="user 3"
455+
/>
456+
</div>
457+
458+
<h5 class="card-title userName">Pankaj</h5>
459+
460+
<div class="leaderboradUser-RankContainer">
461+
<p class="rankPosition">
462+
<i class="fa-solid fa-award"></i> 3rd Rank
463+
</p>
464+
<p class="rankPoints">
465+
<i class="fa-solid fa-medal"></i> 1055 Points
466+
</p>
467+
</div>
468+
</div>
457469
</div>
458470
</div>
459-
</div>
460-
</div>
461-
462-
<!-- === top coder 4 === -->
463-
<div class="item">
464-
<div class="card leaderboard-Card">
465-
<div class="card-body leaderBoard-Container">
466-
<div class="leaderBoard-userContainer">
467-
<img
468-
src="assets/images/leaderboard-section/user-2.png"
469-
class="img-fluid leaderboard-Img"
470-
alt="user 4"
471-
/>
472-
</div>
473-
474-
<h5 class="card-title userName">Simarn</h5>
475-
476-
<div class="leaderboradUser-RankContainer">
477-
<p class="rankPosition">
478-
<i class="fa-solid fa-award"></i> 4th Rank
479-
</p>
480-
<p class="rankPoints">
481-
<i class="fa-solid fa-medal"></i> 1030 Points
482-
</p>
471+
472+
<!-- === top coder 4 === -->
473+
<div class="item swiper-slide">
474+
<div class="card leaderboard-Card">
475+
<div class="card-body leaderBoard-Container">
476+
<div class="leaderBoard-userContainer">
477+
<img
478+
src="assets/images/leaderboard-section/user-2.png"
479+
class="img-fluid leaderboard-Img"
480+
alt="user 4"
481+
/>
482+
</div>
483+
484+
<h5 class="card-title userName">Simarn</h5>
485+
486+
<div class="leaderboradUser-RankContainer">
487+
<p class="rankPosition">
488+
<i class="fa-solid fa-award"></i> 4th Rank
489+
</p>
490+
<p class="rankPoints">
491+
<i class="fa-solid fa-medal"></i> 1030 Points
492+
</p>
493+
</div>
494+
</div>
483495
</div>
484496
</div>
485-
</div>
486-
</div>
487-
488-
<!-- === top coder 5 === -->
489-
<div class="item">
490-
<div class="card leaderboard-Card">
491-
<div class="card-body leaderBoard-Container">
492-
<div class="leaderBoard-userContainer">
493-
<img
494-
src="assets/images/leaderboard-section/user-1.png"
495-
class="img-fluid leaderboard-Img"
496-
alt="user 5"
497-
/>
498-
</div>
499-
500-
<h5 class="card-title userName">Rahul</h5>
501497

502-
<div class="leaderboradUser-RankContainer">
503-
<p class="rankPosition">
504-
<i class="fa-solid fa-award"></i> 5th Rank
505-
</p>
506-
<p class="rankPoints">
507-
<i class="fa-solid fa-medal"></i> 1020 Points
508-
</p>
498+
<!-- === top coder 5 === -->
499+
<div class="item swiper-slide">
500+
<div class="card leaderboard-Card">
501+
<div class="card-body leaderBoard-Container">
502+
<div class="leaderBoard-userContainer">
503+
<img
504+
src="assets/images/leaderboard-section/user-1.png"
505+
class="img-fluid leaderboard-Img"
506+
alt="user 5"
507+
/>
508+
</div>
509+
510+
<h5 class="card-title userName">Dinesh</h5>
511+
512+
<div class="leaderboradUser-RankContainer">
513+
<p class="rankPosition">
514+
<i class="fa-solid fa-award"></i> 5th Rank
515+
</p>
516+
<p class="rankPoints">
517+
<i class="fa-solid fa-medal"></i> 1020 Points
518+
</p>
519+
</div>
520+
</div>
509521
</div>
510522
</div>
511-
</div>
512-
</div>
513-
</div>
514-
</div>
523+
</div>
524+
525+
</div>
526+
</div>
515527
</div>
516528
</section>
517529
<!-- ================================ Leaderboard Section End Here ================================ -->
@@ -622,13 +634,37 @@ <h5 class="footer-title w-100">Contact Us</h5>
622634
<script src="scripts/main.js"></script>
623635

624636
<!-- ================ Typed JS ================ -->
625-
<script src="https://unpkg.com/[email protected]/dist/typed.umd.js"></script>
637+
<script src="https://unpkg.com/[email protected]/dist/typed.umd.js"></script>
638+
639+
<script>
640+
var swiper = new Swiper(".mySwiper", {
641+
loop: true, // infinite loop
642+
spaceBetween: 20, // gap between slides
643+
slidesPerView: 3, // show 3 cards
644+
autoplay: {
645+
delay: 2500, // 2.5s between slides
646+
disableOnInteraction: false, // keep autoplay after user interaction
647+
},
648+
navigation: {
649+
nextEl: ".swiper-button-next",
650+
prevEl: ".swiper-button-prev",
651+
},
652+
pagination: {
653+
el: ".swiper-pagination",
654+
clickable: true,
655+
},
656+
});
657+
658+
</script>
659+
626660
<script>
627661
var typed = new Typed("#element", {
628662
strings: ["Code", "Challenge", "Conquer"],
629663
typeSpeed: 50,
630664
loop: true,
631-
});
665+
});
666+
667+
632668
</script>
633669

634670
<!-- ================ Module Scripts ================ -->

‎styles.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -549,7 +549,7 @@ body {
549549
margin: 10px;
550550
border-radius: 10px;
551551
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.24);
552-
border: 2px solid rgba(249, 15, 15, 0.12);
552+
/* border: 2px solid rgba(249, 15, 15, 0.12); */
553553
font-size: 16px;
554554
transition: all 0.3s ease;
555555
position: relative;

‎styles/main.css‎

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -410,18 +410,39 @@ nav {
410410
text-align: center;
411411
font-size: 2rem;
412412
font-weight: 600;
413+
color: #000;
414+
}
415+
.lead-description{
416+
display: flex;
417+
flex-direction: column;
418+
justify-content: center;
419+
align-items: center;
413420
}
414-
415421
.secHeader span {
416422
color: #2563eb;
417423
}
418424

419425
.leaderboard-Para {
420426
text-align: center;
421427
opacity: 0.8;
428+
color: #000;
429+
width: 50%;
430+
font-size: 1.2rem;
422431
}
432+
423433

434+
.swiper {
435+
width: 100%;
436+
}
424437

438+
.swiper-slide {
439+
border-radius: 10px;
440+
text-align: center;
441+
font-size: 20px;
442+
padding: 20px 0;
443+
font-weight: bold;
444+
margin-left: 12px;
445+
}
425446
.leaderboard-Img {
426447
width: 100px !important;
427448
border: 5px solid #e0ecfa;

0 commit comments

Comments
 (0)