https://www.careerlauncher.com/cat-mba/js/cat_achiever.js

1
2// ===== Your HTML =====
3let cat_achiever = `<section class="program-offred no-matter">
4<div class="container">
5<div class="text-center mb-5">
6<h2>CAT 2025 <span class="ornge">99+%ilers</span></h2>
7<p class="mb-20"><strong>
8With 357* candidates scoring 99+%ile and counting, Career Launcher continues to be the trusted choice for serious CAT aspirants.
9</strong></p>
10</div>
11
12<div class="marquee-wrapper">
13<div class="marquee-content" id="marqueeContent">
14
15<div class="d-flex">
16
17<div class="program-boxs">
18<img src="https://www.careerlauncher.com/cat-mba/crack-cat-with-cl-online/images/result1.webp">
19<h3 class="mt-3 fw-medium">Saptarshi Mukherjee</h3>
20<span class="fs-13 pb-2 fw-medium d-block">CAT 2025</span>
21<span class="fs-13 fw-medium badge rounded-pill bg-danger-subtle">99.99%ile</span>
22</div>
23
24<div class="program-boxs">
25<img src="https://www.careerlauncher.com/cat-mba/crack-cat-with-cl-online/images/result2.webp">
26<h3 class="mt-3 fw-medium">Jagrit Lodha</h3>
27<span class="fs-13 pb-2 fw-medium d-block">CAT 2025</span>
28<span class="fs-13 fw-medium badge rounded-pill bg-danger-subtle">99.99%ile</span>
29</div>
30
31<div class="program-boxs">
32<img src="https://www.careerlauncher.com/cat-mba/crack-cat-with-cl-online/images/result3.webp">
33<h3 class="mt-3 fw-medium">Aayush Mittal</h3>
34<span class="fs-13 pb-2 fw-medium d-block">CAT 2025</span>
35<span class="fs-13 fw-medium badge rounded-pill bg-danger-subtle">99.97%ile</span>
36</div>
37
38<div class="program-boxs">
39<img src="https://www.careerlauncher.com/cat-mba/crack-cat-with-cl-online/images/result4.webp">
40<h3 class="mt-3 fw-medium">Harshil Kandoi</h3>
41<span class="fs-13 pb-2 fw-medium d-block">CAT 2025</span>
42<span class="fs-13 fw-medium badge rounded-pill bg-danger-subtle">99.95%ile</span>
43</div>
44
45<div class="program-boxs">
46<img src="https://www.careerlauncher.com/cat-mba/crack-cat-with-cl-online/images/result5.webp">
47<h3 class="mt-3 fw-medium">Krish Agarwal</h3>
48<span class="fs-13 pb-2 fw-medium d-block">CAT 2025</span>
49<span class="fs-13 fw-medium badge rounded-pill bg-danger-subtle">99.93%ile</span>
50</div>
51
52</div>
53
54</div>
55</div>
56
57<p class="text-center mt-30"><em><strong>(*Under audit)</strong></em></p>
58
59</div>
60</section>`;
61
62
63// ===== Append HTML to page =====
64
65  document.body.insertAdjacentHTML("beforeend", cat_achiever);
66document.addEventListener("DOMContentLoaded", function () {
67  // duplicate content for infinite scroll
68  var marquee = document.getElementById("marqueeContent");
69  marquee.innerHTML += marquee.innerHTML;
70});
71
72// ===== Inject CSS =====
73let style = document.createElement("style");
74style.innerHTML = `
75.program-boxs {
76    overflow: hidden;
77    position: relative;
78    text-align: center;
79    margin: 0 5px;
80    flex: 0 0 auto;
81    margin-right: 40px;
82}
83.program-boxs img {
84    width: 130px;
85    transition: 0.3s ease;
86    border-radius: 50%;
87    height: 130px;
88}
89.program-boxs:hover img {
90transform: scale(1.1);
91}
92
93.bg-danger-subtle {
94    background-color: #e85222 !important;
95    padding: 7px 20px;
96}
97.program-boxs .bg-warning {
98    --bs-bg-opacity: 1;
99    background-color: rgb(232 82 34) !important;
100}
101.program-boxs h3 {
102    font-size: 16px;
103    text-align: center;
104}
105.program-boxs h5 {
106text-align: center;
107color: #101828;
108background: #ffe3d9;
109padding: 5px;
110border-radius: 0px;
111border: 0px;
112border-bottom: 2px solid #ffa888;
113margin-bottom: 15px;
114border-top: 2px solid #ffa888;
115}
116.d-block {
117    display: block !important;
118}
119.pb-2 {
120    padding-bottom: .5rem !important;
121}
122.fs-13 {
123    font-size: 13px;
124}
125.mt-3 {
126    margin-top: 1rem !important;
127}
128.bg-light {
129    background-color: #f8f9fa !important;
130}
131.marquee-wrapper {
132      overflow: hidden;
133      position: relative;
134      padding: 0px 0;
135    max-width: 800px;
136    margin: 0 auto;
137}
138    .marquee-content {
139      display: flex;
140      width: max-content;
141      animation: scroll-left 25s linear infinite;
142    }
143
144    /* Pause on hover */
145    .marquee-wrapper:hover .marquee-content {
146      animation-play-state: paused;
147    }
148
149    @keyframes scroll-left {
150      0% {
151        transform: translateX(0);
152      }
153      100% {
154        transform: translateX(-50%);
155      }
156    }
157`;
158document.head.appendChild(style);