Skip to content

Commit 9918bfe

Browse files
Shivin1016Shivin1016
committed
cards in top coder makes perfact in center
1 parent 9a12b82 commit 9918bfe

File tree

3 files changed

+171
-133
lines changed

3 files changed

+171
-133
lines changed

‎index.html‎

Lines changed: 159 additions & 129 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
@@ -383,136 +391,137 @@ <h3 data-aos-duration="650" data-aos="fade-up" class="secHeader"><span class="">
383391
</div>
384392
<!-- ======= owl cousel =========== -->
385393
<div class="row justify-content-center">
386-
<div data-aos-duration="650" data-aos="fade-up" class="owl-carousel owl-theme">
387-
<!-- === top coder 1 === -->
388-
<div class="item">
389-
<div class="card leaderboard-Card">
390-
<div class="card-body leaderBoard-Container">
391-
<div class="leaderBoard-userContainer">
392-
<img
393-
src="assets/images/leaderboard-section/user-1.png"
394-
class="img-fluid leaderboard-Img"
395-
alt="user 1"
396-
/>
397-
</div>
398-
399-
<h5 class="card-title userName">Rahul</h5>
400-
401-
<div class="leaderboradUser-RankContainer">
402-
<p class="rankPosition">
403-
<i class="fa-solid fa-award"></i> 1st Rank
404-
</p>
405-
<p class="rankPoints">
406-
<i class="fa-solid fa-medal"></i> 1080 Points
407-
</p>
408-
</div>
409-
</div>
410-
</div>
411-
</div>
412-
413-
<!-- === top coder 2 === -->
414-
<div class="item">
415-
<div class="card leaderboard-Card">
416-
<div class="card-body leaderBoard-Container">
417-
<div class="leaderBoard-userContainer">
418-
<img
419-
src="assets/images/leaderboard-section/user-2.png"
420-
class="img-fluid leaderboard-Img"
421-
alt="user 2"
422-
/>
423-
</div>
424-
425-
<h5 class="card-title userName">Manisha</h5>
426-
427-
<div class="leaderboradUser-RankContainer">
428-
<p class="rankPosition">
429-
<i class="fa-solid fa-award"></i> 2nd Rank
430-
</p>
431-
<p class="rankPoints">
432-
<i class="fa-solid fa-medal"></i> 1060 Points
433-
</p>
434-
</div>
435-
</div>
436-
</div>
437-
</div>
438-
439-
<!-- === top coder 3 === -->
440-
<div class="item">
441-
<div class="card leaderboard-Card">
442-
<div class="card-body leaderBoard-Container">
443-
<div class="leaderBoard-userContainer">
444-
<img
445-
src="assets/images/leaderboard-section/user-1.png"
446-
class="img-fluid leaderboard-Img"
447-
alt="user 3"
448-
/>
449-
</div>
450-
451-
<h5 class="card-title userName">Pankaj</h5>
452-
453-
<div class="leaderboradUser-RankContainer">
454-
<p class="rankPosition">
455-
<i class="fa-solid fa-award"></i> 3rd Rank
456-
</p>
457-
<p class="rankPoints">
458-
<i class="fa-solid fa-medal"></i> 1055 Points
459-
</p>
460-
</div>
461-
</div>
462-
</div>
463-
</div>
464-
465-
<!-- === top coder 4 === -->
466-
<div class="item">
467-
<div class="card leaderboard-Card">
468-
<div class="card-body leaderBoard-Container">
469-
<div class="leaderBoard-userContainer">
470-
<img
471-
src="assets/images/leaderboard-section/user-2.png"
472-
class="img-fluid leaderboard-Img"
473-
alt="user 4"
474-
/>
475-
</div>
476-
477-
<h5 class="card-title userName">Simarn</h5>
478-
479-
<div class="leaderboradUser-RankContainer">
480-
<p class="rankPosition">
481-
<i class="fa-solid fa-award"></i> 4th Rank
482-
</p>
483-
<p class="rankPoints">
484-
<i class="fa-solid fa-medal"></i> 1030 Points
485-
</p>
486-
</div>
487-
</div>
488-
</div>
489-
</div>
490-
491-
<!-- === top coder 5 === -->
492-
<div class="item">
493-
<div class="card leaderboard-Card">
494-
<div class="card-body leaderBoard-Container">
495-
<div class="leaderBoard-userContainer">
496-
<img
497-
src="assets/images/leaderboard-section/user-1.png"
498-
class="img-fluid leaderboard-Img"
499-
alt="user 5"
500-
/>
501-
</div>
502-
503-
<h5 class="card-title userName">Dinesh</h5>
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>
419+
</div>
420+
</div>
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>
444+
</div>
445+
</div>
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>
469+
</div>
470+
</div>
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>
495+
</div>
496+
</div>
497+
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>
521+
</div>
522+
</div>
523+
</div>
504524

505-
<div class="leaderboradUser-RankContainer">
506-
<p class="rankPosition">
507-
<i class="fa-solid fa-award"></i> 5th Rank
508-
</p>
509-
<p class="rankPoints">
510-
<i class="fa-solid fa-medal"></i> 1020 Points
511-
</p>
512-
</div>
513-
</div>
514-
</div>
515-
</div>
516525
</div>
517526
</div>
518527
</div>
@@ -627,6 +636,27 @@ <h5 class="footer-title w-100">Contact Us</h5>
627636
<!-- ================ Typed JS ================ -->
628637
<script src="https://unpkg.com/typed.js@2.1.0/dist/typed.umd.js"></script>
629638

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+
630660
<script>
631661
var typed = new Typed("#element", {
632662
strings: ["Code", "Challenge", "Conquer"],

‎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: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -431,9 +431,17 @@ nav {
431431
}
432432

433433

434-
/* Make cards evenly spaced */
435-
.owl-stage-outer{
436-
margin-left: 9rem;
434+
.swiper {
435+
width: 100%;
436+
}
437+
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;
437445
}
438446
.leaderboard-Img {
439447
width: 100px !important;

0 commit comments

Comments
 (0)