Compare commits
10 Commits
dfc215704e
...
a0b06bc080
| Author | SHA1 | Date | |
|---|---|---|---|
| a0b06bc080 | |||
| e523c2a8d2 | |||
| dd5c668a82 | |||
| 65744c6481 | |||
|
9d99753ab3 | ||
|
|
1990965d1b | ||
| b50d56bc36 | |||
| aec5da395b | |||
| 402e7783cf | |||
| 8fa56182c9 |
Binary file not shown.
|
Before Width: | Height: | Size: 54 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 53 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 49 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 100 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 652 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 110 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 135 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 126 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 95 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 108 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 62 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.2 KiB |
|
Before Width: | Height: | Size: 113 KiB After Width: | Height: | Size: 113 KiB |
|
Before Width: | Height: | Size: 63 KiB After Width: | Height: | Size: 63 KiB |
|
Before Width: | Height: | Size: 50 KiB After Width: | Height: | Size: 50 KiB |
|
Before Width: | Height: | Size: 33 KiB After Width: | Height: | Size: 33 KiB |
|
Before Width: | Height: | Size: 44 KiB After Width: | Height: | Size: 44 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 132 KiB After Width: | Height: | Size: 135 KiB |
@ -1,202 +1,453 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Right-side Image Expanding Cards</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: "Segoe UI", sans-serif;
|
||||
}
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Practice Coding & Ace Hiring Assessments</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: 'Segoe UI', system-ui, sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
background: #f9f9f9;
|
||||
color: #1a1a1a;
|
||||
padding: 40px;
|
||||
}
|
||||
body {
|
||||
background-color: #f9fafb;
|
||||
color: #1f2937;
|
||||
padding: 40px 20px;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 26px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.container {
|
||||
max-width: 1300px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
p.subtext {
|
||||
color: #555;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
header {
|
||||
margin-bottom: 40px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Flex container */
|
||||
.cards-container {
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
height: 220px;
|
||||
}
|
||||
h1 {
|
||||
font-size: 32px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 12px;
|
||||
color: #111827;
|
||||
}
|
||||
|
||||
/* Card style */
|
||||
.card {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
border-radius: 14px;
|
||||
overflow: hidden;
|
||||
transition: all 0.4s ease;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
color: #fff;
|
||||
}
|
||||
.subtitle {
|
||||
font-size: 18px;
|
||||
color: #6b7280;
|
||||
max-width: 700px;
|
||||
margin: 0 auto;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* Different background colors */
|
||||
.card:nth-child(1) { background: #1d4ed8; }
|
||||
.card:nth-child(2) { background: #e11d48; }
|
||||
.card:nth-child(3) { background: #9333ea; }
|
||||
.card:nth-child(4) { background: #f59e0b; }
|
||||
.cards-container {
|
||||
margin: 30px 0;
|
||||
display: flex;
|
||||
height: 380px;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
|
||||
position: relative;
|
||||
gap: 1px;
|
||||
background-color: #d1d5db;
|
||||
padding: 1px;
|
||||
}
|
||||
|
||||
/* Card content */
|
||||
.card-content {
|
||||
flex: 1;
|
||||
padding: 16px 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
transition: all 0.4s ease;
|
||||
min-width: 0; /* For text ellipsis */
|
||||
}
|
||||
.card {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transform-origin: center;
|
||||
background-color: white;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
/* Hide image initially */
|
||||
.card img {
|
||||
width: 0;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: all 0.4s ease;
|
||||
border-left: 0px solid #fff;
|
||||
}
|
||||
.card:first-child {
|
||||
border-radius: 11px 0 0 11px;
|
||||
}
|
||||
|
||||
.card:last-child {
|
||||
border-radius: 0 11px 11px 0;
|
||||
}
|
||||
|
||||
/* Icon style */
|
||||
.icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
background: rgba(255,255,255,0.3);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 20px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.card-content {
|
||||
flex: 1;
|
||||
padding: 24px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
transition: all 0.7s ease;
|
||||
min-width: 0;
|
||||
z-index: 2;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.card h3 {
|
||||
font-size: 18px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
/* Color changes for active and hover states */
|
||||
.card.active { background-color: #c6e0f1; }
|
||||
.card:nth-child(1):hover,
|
||||
.card:nth-child(1).active { background-color: #89CFF0; }
|
||||
.card:nth-child(2):hover,
|
||||
.card:nth-child(2).active { background-color: #FEB4CF; }
|
||||
.card:nth-child(3):hover,
|
||||
.card:nth-child(3).active { background-color: #DFC5FE; }
|
||||
.card:nth-child(4):hover,
|
||||
.card:nth-child(4).active { background-color: #FFE186; }
|
||||
|
||||
.card p {
|
||||
font-size: 14px;
|
||||
}
|
||||
/* SVG Container */
|
||||
.card-svg {
|
||||
width: 0;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 1.3s cubic-bezier(0.23, 1, 0.32, 1);
|
||||
opacity: 0;
|
||||
padding: 20px;
|
||||
/* Remove the gradient and use solid background that matches the card */
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.cta-btn {
|
||||
margin-top: 10px;
|
||||
background: rgba(255,255,255,0.3);
|
||||
color: #fff;
|
||||
padding: 6px 12px;
|
||||
border-radius: 8px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
text-decoration: none;
|
||||
width: fit-content;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.card-svg svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-width: 180px;
|
||||
max-height: 180px;
|
||||
filter: drop-shadow(0 4px 8px rgba(0,0,0,0.1));
|
||||
}
|
||||
|
||||
.footer-text {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
}
|
||||
.card-icon {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 24px;
|
||||
margin-bottom: 16px;
|
||||
transition: transform 0.5s ease;
|
||||
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
/* Hover effects */
|
||||
.cards-container:hover .card {
|
||||
flex: 1;
|
||||
}
|
||||
.card:nth-child(1) .card-icon { background-color: #1268f3; color: white; }
|
||||
.card:nth-child(2) .card-icon { background-color: #ef4444; color: white; }
|
||||
.card:nth-child(3) .card-icon { background-color: #8b5cf6; color: white; }
|
||||
.card:nth-child(4) .card-icon { background-color: #f59e0b; color: white; }
|
||||
|
||||
.cards-container .card:hover {
|
||||
flex: 2.5;
|
||||
}
|
||||
.card h3 {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 12px;
|
||||
color: #111827;
|
||||
transition: transform 0.5s ease;
|
||||
}
|
||||
|
||||
.cards-container .card:hover img {
|
||||
width: 50%; /* show image on right */
|
||||
}
|
||||
.card p {
|
||||
font-size: 15px;
|
||||
color: #6b7280;
|
||||
line-height: 1.5;
|
||||
margin-bottom: 16px;
|
||||
transition: transform 0.5s ease;
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 992px) {
|
||||
.cards-container {
|
||||
flex-direction: column;
|
||||
height: auto;
|
||||
}
|
||||
.card {
|
||||
flex: none;
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
}
|
||||
.cards-container .card:hover img {
|
||||
width: 100%;
|
||||
height: 180px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
.meta-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
font-size: 14px;
|
||||
color: #4b5563;
|
||||
transition: transform 0.5s ease;
|
||||
}
|
||||
|
||||
.meta-logo {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background-color: #3b82f6;
|
||||
border-radius: 4px;
|
||||
margin-right: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.footer-text {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #374151;
|
||||
margin-top: auto;
|
||||
transition: transform 0.5s ease;
|
||||
}
|
||||
|
||||
.cta-btn {
|
||||
margin-top: 16px;
|
||||
background-color: #111827;
|
||||
color: white;
|
||||
padding: 10px 16px;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
width: fit-content;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
transition: all 0.7s cubic-bezier(0.23, 1, 0.32, 1);
|
||||
opacity: 0;
|
||||
transform: translateY(15px);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.cta-btn::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
|
||||
transition: left 0.8s;
|
||||
}
|
||||
|
||||
.cta-btn:hover::before {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
.cta-btn:hover {
|
||||
background-color: #374151;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 12px rgba(0,0,0,0.15);
|
||||
}
|
||||
|
||||
/* Active card styles */
|
||||
.card.active {
|
||||
flex: 3.5;
|
||||
transform: translateY(-8px) scale(1.02);
|
||||
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.card.active .card-svg {
|
||||
width: 45%;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.card.active .cta-btn {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.card.active .card-icon {
|
||||
transform: scale(1.1) rotate(5deg);
|
||||
}
|
||||
|
||||
.card.active h3 {
|
||||
transform: translateY(-3px);
|
||||
}
|
||||
|
||||
.card.active p,
|
||||
.card.active .meta-info,
|
||||
.card.active .footer-text {
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
/* Hover effects for non-active cards */
|
||||
.card:hover:not(.active) {
|
||||
flex: 1.3;
|
||||
transform: translateY(-4px) scale(1.01);
|
||||
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.card:hover:not(.active) .card-svg {
|
||||
width: 25%;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
/* Subtle overlay effect */
|
||||
.card::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(to bottom, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 100%);
|
||||
opacity: 0;
|
||||
transition: opacity 0.6s ease;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.card.active::after,
|
||||
.card:hover::after {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
.cards-container {
|
||||
flex-direction: column;
|
||||
height: auto;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.card {
|
||||
flex-direction: column;
|
||||
height: auto;
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
.card:first-child {
|
||||
border-radius: 12px 12px 0 0 !important;
|
||||
}
|
||||
|
||||
.card:last-child {
|
||||
border-radius: 0 0 12px 12px !important;
|
||||
}
|
||||
|
||||
.card.active .card-svg,
|
||||
.card:hover .card-svg {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.card.active {
|
||||
transform: translateY(-5px) scale(1.01);
|
||||
}
|
||||
|
||||
.card:hover:not(.active) {
|
||||
transform: translateY(-3px) scale(1.005);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Practice Coding & Ace Hiring Assessments</h1>
|
||||
<p class="subtext">Level up your coding skills by practicing the hiring assessments of your dream companies & ace your placement game!</p>
|
||||
|
||||
<div class="cards-container">
|
||||
<!-- Card 1 -->
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
<div>
|
||||
<div class="icon">💻</div>
|
||||
<h3>Coding Practice</h3>
|
||||
<p>Level up your coding skills by practicing the hiring Questions.</p>
|
||||
<p><strong>400+ Questions</strong></p>
|
||||
</div>
|
||||
<a href="#" class="cta-btn">Start Now →</a>
|
||||
<div class="container">
|
||||
<h1>Practice Coding & Ace Hiring Assessments</h1>
|
||||
<p>Level up your coding skills by practicing the hiring assessments of your dream companies & ace your placement game!</p>
|
||||
|
||||
<div class="cards-container">
|
||||
<!-- Coding Practice Card -->
|
||||
<div class="card active">
|
||||
<div class="card-content">
|
||||
<div>
|
||||
<div class="card-icon">💻</div>
|
||||
<h3>Coding Practice</h3>
|
||||
<p>Level up your coding skills by practicing the hiring Questions.</p>
|
||||
</div>
|
||||
<a href="#" class="cta-btn">Start Now ➤</a>
|
||||
</div>
|
||||
<div class="card-svg">
|
||||
<img src="assets/images/mit-ico/ebmpapst.svg" alt="Coding Practice">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Interview Preparation Card -->
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
<div>
|
||||
<div class="card-icon">📋</div>
|
||||
<h3>Interview Preparation</h3>
|
||||
<p>Crack Top companies in just 5 days.</p>
|
||||
<div class="footer-text">20+ Companies</div>
|
||||
</div>
|
||||
<a href="#" class="cta-btn">Start Now ➤</a>
|
||||
</div>
|
||||
<div class="card-svg">
|
||||
<img src="assets/images/mit-ico/ebmpapst.svg" alt="Coding Practice">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Projects Card -->
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
<div>
|
||||
<div class="card-icon">📂</div>
|
||||
<h3>Projects</h3>
|
||||
<p>Projects epitomize perfect synergy for success.</p>
|
||||
<!-- <div class="meta-info">
|
||||
<div class="meta-logo">M</div>
|
||||
<span>Meta</span>
|
||||
<span style="margin-left: auto;">$4,000 Regis...</span>
|
||||
</div> -->
|
||||
<div class="footer-text">15+ Projects</div>
|
||||
</div>
|
||||
<a href="#" class="cta-btn">Start Now ➤</a>
|
||||
</div>
|
||||
<div class="card-svg">
|
||||
<img src="assets/images/mit-ico/ebmpapst.svg" alt="Coding Practice">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Skill Based Assessments Card -->
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
<div>
|
||||
<div class="card-icon">📝</div>
|
||||
<h3>Skill Based Assessments</h3>
|
||||
<p>Assess your skills and get ahead of the curve.</p>
|
||||
<div class="footer-text">2000+ Questions</div>
|
||||
</div>
|
||||
<a href="#" class="cta-btn">Start Now ➤</a>
|
||||
</div>
|
||||
<div class="card-svg">
|
||||
<img src="assets/images/mit-ico/ebmpapst.svg" alt="Coding Practice">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<img src="https://images.pexels.com/photos/3762800/pexels-photo-3762800.jpeg?auto=compress&cs=tinysrgb&w=600&h=400" loading="lazy" alt="Coding Practice">
|
||||
</div>
|
||||
|
||||
<!-- Card 2 -->
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
<div class="icon">📋</div>
|
||||
<h3>Interview Preparation</h3>
|
||||
<p>Crack top companies in just 5 days.</p>
|
||||
<p class="footer-text">20+ Companies →</p>
|
||||
</div>
|
||||
<img src="https://images.pexels.com/photos/1438084/pexels-photo-1438084.jpeg?auto=compress&cs=tinysrgb&w=600&h=400" loading="lazy" alt="Interview Prep">
|
||||
</div>
|
||||
|
||||
<!-- Card 3 -->
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
<div class="icon">📂</div>
|
||||
<h3>Projects</h3>
|
||||
<p>Projects epitomize perfect synergy for success.</p>
|
||||
<p class="footer-text">15+ Projects →</p>
|
||||
</div>
|
||||
<img src="https://images.pexels.com/photos/267569/pexels-photo-267569.jpeg?auto=compress&cs=tinysrgb&w=600&h=400" loading="lazy" alt="Projects">
|
||||
</div>
|
||||
|
||||
<!-- Card 4 -->
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
<div class="icon">📝</div>
|
||||
<h3>Skill Based Assessments</h3>
|
||||
<p>Assess your skills and get ahead of the curve.</p>
|
||||
<p class="footer-text">2000+ Questions →</p>
|
||||
</div>
|
||||
<img src="https://images.pexels.com/photos/3769021/pexels-photo-3769021.jpeg?auto=compress&cs=tinysrgb&w=600&h=400" loading="lazy" alt="Assessments">
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const cards = document.querySelectorAll('.card');
|
||||
let activeCard = document.querySelector('.card.active');
|
||||
let lastActiveCard = activeCard;
|
||||
|
||||
// Function to set active card
|
||||
function setActiveCard(card) {
|
||||
// Remove active class from all cards
|
||||
cards.forEach(c => {
|
||||
c.classList.remove('active');
|
||||
const btn = c.querySelector('.cta-btn');
|
||||
btn.style.visibility = 'hidden';
|
||||
});
|
||||
|
||||
// Add active class to the specified card
|
||||
card.classList.add('active');
|
||||
const btn = card.querySelector('.cta-btn');
|
||||
btn.style.visibility = 'visible';
|
||||
|
||||
// Update last active card
|
||||
lastActiveCard = card;
|
||||
}
|
||||
|
||||
// Set first card as active by default
|
||||
setActiveCard(cards[0]);
|
||||
|
||||
// Add hover event listeners
|
||||
cards.forEach(card => {
|
||||
card.addEventListener('mouseenter', function() {
|
||||
setActiveCard(this);
|
||||
});
|
||||
|
||||
// When mouse leaves the container, keep the last hovered card active
|
||||
document.querySelector('.cards-container').addEventListener('mouseleave', function() {
|
||||
// Keep the current active card as is (no change needed)
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
294
index.html
294
index.html
@ -7,7 +7,6 @@
|
||||
<title>Kodepilot Clone</title>
|
||||
<link rel="stylesheet" href="main.css">
|
||||
<link rel="stylesheet" href="templateapi/main.css">
|
||||
<link rel="icon" type="image/x-icon" href="assets/images/logo/favicon.ico">
|
||||
<style>
|
||||
.center-container {
|
||||
display: flex;
|
||||
@ -165,11 +164,13 @@
|
||||
<div class="logo">Kodepilot</div>
|
||||
<input type="text" class="search" placeholder="Search Opportunities">
|
||||
<nav>
|
||||
<a href="/login">Log in</a>
|
||||
<a href="#">Internships</a>
|
||||
<a href="#">Jobs</a>
|
||||
<a href="#">Competitions</a>
|
||||
</nav>
|
||||
<div class="buttons">
|
||||
<button class="business" onclick="getInTouch()">Get in touch</button>
|
||||
<button class="login" onclick="goToApplay()">Apply</button>
|
||||
<a href="/my/"><button class="business">Dashboard</button></a>
|
||||
<button class="login" onclick="goToLogin()">Login</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
@ -257,8 +258,15 @@
|
||||
<img src="https://repo.dhanu.cloud/ico/jbl.svg" alt="jbl">
|
||||
<img src="https://repo.dhanu.cloud/ico/ust.svg" alt="ust">
|
||||
<img src="https://repo.dhanu.cloud/ico/accenture.svg" alt="accenture">
|
||||
<img class="image-hcl" src="https://repo.dhanu.cloud/ico/hcl.svg" alt="hcl">
|
||||
<img src="https://repo.dhanu.cloud/ico/ebmpapst.svg" alt="ebmpapst">
|
||||
<img src="https://repo.dhanu.cloud/ico/infosys.svg" alt="infosys">
|
||||
<img src="https://repo.dhanu.cloud/ico/jbl.svg" alt="jbl">
|
||||
<img src="https://repo.dhanu.cloud/ico/ust.svg" alt="ust">
|
||||
<img src="https://repo.dhanu.cloud/ico/accenture.svg" alt="accenture">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@ -271,19 +279,19 @@
|
||||
<div class="slide1">
|
||||
<div class="slide1-box">
|
||||
<div class="image-container">
|
||||
<img src="assets/images/hai1/qa.jpg"
|
||||
<img src="https://images.unsplash.com/photo-1557804506-669a67965ba0?w=500&h=400&fit=crop&crop=entropy&cs=tinysrgb"
|
||||
alt="Business Meeting">
|
||||
<div class="image-overlay">
|
||||
<h4>QA & Testing</h4>
|
||||
<p>A close-up of a developer's screen showing a green 'Tests Passed' status and a successful performance report graph.</p>
|
||||
<h4>Business Innovation</h4>
|
||||
<p>Modern workspace collaboration</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="image-container">
|
||||
<img src="assets/images/hai1/hai12.jpg"
|
||||
<img src="https://images.unsplash.com/photo-1542744094-24638eff58bb?w=500&h=400&fit=crop&crop=entropy&cs=tinysrgb"
|
||||
alt="Architecture">
|
||||
<div class="image-overlay">
|
||||
<h4>Software Dev</h4>
|
||||
<p>A sleek image of a professional wireframe/design on a large monitor, with a split view showing the finished product on a mobile phone.</p>
|
||||
<h4>Modern Architecture</h4>
|
||||
<p>Contemporary design solutions</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -293,19 +301,19 @@
|
||||
<div class="slide1">
|
||||
<div class="slide1-box">
|
||||
<div class="image-container">
|
||||
<img src="assets/images/hai1/ai.jpg"
|
||||
<img src="https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=500&h=400&fit=crop&crop=entropy&cs=tinysrgb"
|
||||
alt="Analytics">
|
||||
<div class="image-overlay">
|
||||
<h4>AI & Data</h4>
|
||||
<p>A stunning, large-scale data visualization or chart (like a complex network graph) displayed on a screen, hinting at discovery and high-level strategy.</p>
|
||||
<h4>Data Analytics</h4>
|
||||
<p>Business intelligence insights</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="image-container">
|
||||
<img src="assets/images/hai1/cyber.jpg"
|
||||
<img src="https://images.unsplash.com/photo-1551434678-e076c223a692?w=500&h=400&fit=crop&crop=entropy&cs=tinysrgb"
|
||||
alt="Technology">
|
||||
<div class="image-overlay">
|
||||
<h4>Cybersecurity</h4>
|
||||
<p>A digital shield or lock icon overlaid on a dark, technical background with green/blue code lines, symbolizing protection.</p>
|
||||
<h4>Technology Hub</h4>
|
||||
<p>Innovation and development</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -313,19 +321,19 @@
|
||||
<div class="slide1">
|
||||
<div class="slide1-box">
|
||||
<div class="image-container">
|
||||
<img src="assets/images/hai1/qa.jpg"
|
||||
<img src="https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=500&h=400&fit=crop&crop=entropy&cs=tinysrgb"
|
||||
alt="Analytics">
|
||||
<div class="image-overlay">
|
||||
<h4>QA & Testing</h4>
|
||||
<p>A close-up of a developer's screen showing a green 'Tests Passed' status and a successful performance report graph.</p>
|
||||
<h4>Data Analytics</h4>
|
||||
<p>Business intelligence insights</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="image-container">
|
||||
<img src="assets/images/hai1/cyber.jpg"
|
||||
<img src="https://images.unsplash.com/photo-1551434678-e076c223a692?w=500&h=400&fit=crop&crop=entropy&cs=tinysrgb"
|
||||
alt="Technology">
|
||||
<div class="image-overlay">
|
||||
<h4>Cybersecurity</h4>
|
||||
<p>A digital shield or lock icon overlaid on a dark, technical background with green/blue code lines, symbolizing protection.</p>
|
||||
<h4>Technology Hub</h4>
|
||||
<p>Innovation and development</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -333,19 +341,19 @@
|
||||
<div class="slide1">
|
||||
<div class="slide1-box">
|
||||
<div class="image-container">
|
||||
<img src="assets/images/hai1/hai12.jpg"
|
||||
<img src="https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=500&h=400&fit=crop&crop=entropy&cs=tinysrgb"
|
||||
alt="Analytics">
|
||||
<div class="image-overlay">
|
||||
<h4>Software Dev</h4>
|
||||
<p>A sleek image of a professional wireframe/design on a large monitor, with a split view showing the finished product on a mobile phone.</p>
|
||||
<h4>Data Analytics</h4>
|
||||
<p>Business intelligence insights</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="image-container">
|
||||
<img src="assets/images/hai1/qa.jpg"
|
||||
<img src="https://images.unsplash.com/photo-1551434678-e076c223a692?w=500&h=400&fit=crop&crop=entropy&cs=tinysrgb"
|
||||
alt="Technology">
|
||||
<div class="image-overlay">
|
||||
<h4>QA & Testing</h4>
|
||||
<p>A close-up of a developer's screen showing a green 'Tests Passed' status and a successful performance report graph.</p>
|
||||
<h4>Technology Hub</h4>
|
||||
<p>Innovation and development</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -353,19 +361,19 @@
|
||||
<div class="slide1">
|
||||
<div class="slide1-box">
|
||||
<div class="image-container">
|
||||
<img src="assets/images/hai1/ai.jpg"
|
||||
<img src="https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=500&h=400&fit=crop&crop=entropy&cs=tinysrgb"
|
||||
alt="Analytics">
|
||||
<div class="image-overlay">
|
||||
<h4>AI & Data</h4>
|
||||
<p>A stunning, large-scale data visualization or chart (like a complex network graph) displayed on a screen, hinting at discovery and high-level strategy.</p>
|
||||
<h4>Data Analytics</h4>
|
||||
<p>Business intelligence insights</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="image-container">
|
||||
<img src="assets/images/hai1/aws..jpg"
|
||||
<img src="https://images.unsplash.com/photo-1551434678-e076c223a692?w=500&h=400&fit=crop&crop=entropy&cs=tinysrgb"
|
||||
alt="Technology">
|
||||
<div class="image-overlay">
|
||||
<h4>Cloud & DevOps</h4>
|
||||
<p>An abstract, interconnected graphic of servers and data pipelines with subtle logos (AWS/Azure/GCP-style icons, if usage is permitted) to symbolize powerful infrastructure.</p>
|
||||
<h4>Technology Hub</h4>
|
||||
<p>Innovation and development</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -373,19 +381,19 @@
|
||||
<div class="slide1">
|
||||
<div class="slide1-box">
|
||||
<div class="image-container">
|
||||
<img src="assets/images/hai1/ai.jpg"
|
||||
<img src="https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=500&h=400&fit=crop&crop=entropy&cs=tinysrgb"
|
||||
alt="Analytics">
|
||||
<div class="image-overlay">
|
||||
<h4>AI & Data</h4>
|
||||
<p>A stunning, large-scale data visualization or chart (like a complex network graph) displayed on a screen, hinting at discovery and high-level strategy.</p>
|
||||
<h4>Data Analytics</h4>
|
||||
<p>Business intelligence insights</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="image-container">
|
||||
<img src="assets/images/hai1/cyber.jpg"
|
||||
<img src="https://images.unsplash.com/photo-1551434678-e076c223a692?w=500&h=400&fit=crop&crop=entropy&cs=tinysrgb"
|
||||
alt="Technology">
|
||||
<div class="image-overlay">
|
||||
<h4>Cybersecurity</h4>
|
||||
<p>A digital shield or lock icon overlaid on a dark, technical background with green/blue code lines, symbolizing protection.</p>
|
||||
<h4>Technology Hub</h4>
|
||||
<p>Innovation and development</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -394,19 +402,19 @@
|
||||
<div class="slide1">
|
||||
<div class="slide1-box">
|
||||
<div class="image-container">
|
||||
<img src="assets/images/hai1/hai12.jpg"
|
||||
<img src="https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?w=500&h=400&fit=crop&crop=entropy&cs=tinysrgb"
|
||||
alt="Creativity">
|
||||
<div class="image-overlay">
|
||||
<h4>Software Dev</h4>
|
||||
<p>A sleek image of a professional wireframe/design on a large monitor, with a split view showing the finished product on a mobile phone.</p>
|
||||
<h4>Creative Space</h4>
|
||||
<p>Inspiration and expression</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="image-container">
|
||||
<img src="assets/images/hai1/aws..jpg"
|
||||
<img src="https://images.unsplash.com/photo-1507525428034-b723cf961d3e?w=500&h=400&fit=crop&crop=entropy&cs=tinysrgb"
|
||||
alt="Beach">
|
||||
<div class="image-overlay">
|
||||
<h4>Cloud & DevOps</h4>
|
||||
<p>An abstract, interconnected graphic of servers and data pipelines with subtle logos (AWS/Azure/GCP-style icons, if usage is permitted) to symbolize powerful infrastructure.</p>
|
||||
<h4>Tropical Paradise</h4>
|
||||
<p>Natural beauty and relaxation</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -430,18 +438,23 @@
|
||||
|
||||
<div class="cards-grid">
|
||||
<div class="card-add card-quizzes">
|
||||
<h3>Quizzes</h3>
|
||||
</div>
|
||||
|
||||
<div class="card-add card-hackathons">
|
||||
<h3>Hackathons</h3>
|
||||
</div>
|
||||
|
||||
<div class="card-add card-scholarships">
|
||||
<h3>Scholarships</h3>
|
||||
</div>
|
||||
|
||||
<div class="card-add card-conferences">
|
||||
<h3>Conferences</h3>
|
||||
</div>
|
||||
|
||||
<div class="card-add card-festivals">
|
||||
<h3>College Festivals</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -534,86 +547,6 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<section class="practice-cards-container">
|
||||
|
||||
<!-- <div class="practice-cards-container"> -->
|
||||
<div class="practice-container">
|
||||
<h1 class="practice-title">Practice Coding & Ace Hiring Assessments</h1>
|
||||
<p class="practice-subtitle">Level up your coding skills by practicing the hiring assessments of your dream companies & ace your placement game!</p>
|
||||
|
||||
<div class="practice-cards-wrapper">
|
||||
<!-- Coding Practice Card -->
|
||||
<div class="practice-card active">
|
||||
<div class="practice-card-content">
|
||||
<div>
|
||||
<div class="practice-card-icon">💻</div>
|
||||
<h3>Coding Practice</h3>
|
||||
<p>Level up your coding skills by practicing the hiring Questions.</p>
|
||||
</div>
|
||||
<a href="#" class="practice-cta-btn">Start Now ➤</a>
|
||||
</div>
|
||||
<div class="practice-card-svg">
|
||||
<img src="assets/images/mit-ico/ebmpapst.svg" alt="Coding Practice">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Interview Preparation Card -->
|
||||
<div class="practice-card">
|
||||
<div class="practice-card-content">
|
||||
<div>
|
||||
<div class="practice-card-icon">📋</div>
|
||||
<h3>Interview Preparation</h3>
|
||||
<p>Crack Top companies in just 5 days.</p>
|
||||
<div class="practice-footer-text">20+ Companies</div>
|
||||
</div>
|
||||
<a href="#" class="practice-cta-btn">Start Now ➤</a>
|
||||
</div>
|
||||
<div class="practice-card-svg">
|
||||
<img src="assets/images/mit-ico/ebmpapst.svg" alt="Coding Practice">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Projects Card -->
|
||||
<div class="practice-card">
|
||||
<div class="practice-card-content">
|
||||
<div>
|
||||
<div class="practice-card-icon">📂</div>
|
||||
<h3>Projects</h3>
|
||||
<p>Projects epitomize perfect synergy for success.</p>
|
||||
<div class="practice-footer-text">15+ Projects</div>
|
||||
</div>
|
||||
<a href="#" class="practice-cta-btn">Start Now ➤</a>
|
||||
</div>
|
||||
<div class="practice-card-svg">
|
||||
<img src="assets/images/mit-ico/ebmpapst.svg" alt="Coding Practice">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Skill Based Assessments Card -->
|
||||
<div class="practice-card">
|
||||
<div class="practice-card-content">
|
||||
<div>
|
||||
<div class="practice-card-icon">📝</div>
|
||||
<h3>Skill Based Assessments</h3>
|
||||
<p>Assess your skills and get ahead of the curve.</p>
|
||||
<div class="practice-footer-text">2000+ Questions</div>
|
||||
</div>
|
||||
<a href="#" class="practice-cta-btn">Start Now ➤</a>
|
||||
</div>
|
||||
<div class="practice-card-svg">
|
||||
<img src="assets/images/mit-ico/ebmpapst.svg" alt="Coding Practice">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- </div> -->
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
<section class="card-simple">
|
||||
<div class="card-easy">
|
||||
<div class="card-easy-left">
|
||||
@ -675,29 +608,93 @@
|
||||
<section class="corces-s">
|
||||
<div class="corces"></div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
console.log("test");
|
||||
document.addEventListener('DOMContentLoaded', async () => {
|
||||
const allCourses = [];
|
||||
|
||||
const baseUrl = 'https://kodepilot.in/course/index.php';
|
||||
const res = await fetch(baseUrl);
|
||||
const html = await res.text();
|
||||
|
||||
const categoryRegex = /<h3 class="categoryname aabtn"><a href="([^"]+)">([^<]+)<\/a><\/h3>/g;
|
||||
const categories = [];
|
||||
let match;
|
||||
while ((match = categoryRegex.exec(html)) !== null) {
|
||||
categories.push({ url: match[1], name: match[2] });
|
||||
}
|
||||
|
||||
for (const category of categories) {
|
||||
const resCat = await fetch(category.url);
|
||||
const catHtml = await resCat.text();
|
||||
const cleanHtml = catHtml.replace(/\n/g, ' ');
|
||||
|
||||
const courseRegex = /<div class="card dashboard-card [^"]*"[^>]*>.*?<a href="([^"]+)"[^>]*>.*?background-image: url\(([^)]+)\);".*?<span class="sr-only">(.*?)<\/span>.*?<div class="course-category">\s*([^<]+)<\/div>.*?<div class="course-summary">.*?<p>(.*?)<\/p>/g;
|
||||
|
||||
while ((match = courseRegex.exec(cleanHtml)) !== null) {
|
||||
allCourses.push({
|
||||
category: match[4].trim(),
|
||||
link: match[1].trim(),
|
||||
image: match[2].trim(),
|
||||
name: match[3].trim(),
|
||||
description: match[5].replace(/<br\s*\/?>/g, ' ').trim()
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
renderCourses(allCourses);
|
||||
});
|
||||
|
||||
function renderCourses(allCourses) {
|
||||
const container = document.querySelector('.corces');
|
||||
if (!container) {
|
||||
console.error("⚠️ No .corces container found in DOM");
|
||||
return;
|
||||
}
|
||||
|
||||
container.innerHTML = ''; // clear old content
|
||||
|
||||
allCourses.forEach(course => {
|
||||
const courseDiv = document.createElement('div');
|
||||
courseDiv.className = 'course-card';
|
||||
courseDiv.innerHTML = `
|
||||
<a href="${course.link}" target="_blank">
|
||||
<div class="course-image" style="background-image: url(${course.image});"></div>
|
||||
</a>
|
||||
<div class="course-content">
|
||||
<div class="course-category">${course.category}</div>
|
||||
<a href="${course.link}" class="course-name" target="_blank">${course.name}</a>
|
||||
<div class="course-description">${course.description}</div>
|
||||
</div>
|
||||
`;
|
||||
container.appendChild(courseDiv);
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<footer class="footer">
|
||||
<div class="footer-container">
|
||||
<div class="footer-section company-section">
|
||||
<div class="logo">Kode Pilot</div>
|
||||
<div class="logo">Kodepilot</div>
|
||||
<p class="tagline">Built with <span class="heart">❤</span> in India for the world</p>
|
||||
|
||||
<div class="contact-info">
|
||||
<h4>Stay Connected</h4>
|
||||
<h4>Stay Connected</h4>
|
||||
|
||||
<div style="margin-bottom: 20px;">
|
||||
<strong style="color: white; font-size: 14px;">Sales Inquiries</strong>
|
||||
<div style="margin-bottom: 20px; line-height: 23px;">
|
||||
<div class="contact-item">
|
||||
<i class="fas fa-envelope"></i>
|
||||
sales@kodepilot.com
|
||||
</div>
|
||||
<div class="contact-item">
|
||||
<i class="fas fa-phone"></i>
|
||||
+91-9311777388 <span style="font-size: 12px;">(Mon to Fri, 9 AM to 6 PM)</span>
|
||||
+91-9311777388 <span style="font-size: 12px;"> </span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<strong style="color: white; font-size: 14px;">Support Inquiries</strong>
|
||||
<strong style="color: white; font-size: 14px; line-height: 30px;">Support Inquiries</strong>
|
||||
<div class="contact-item">
|
||||
<i class="fas fa-envelope"></i>
|
||||
support@kodepilot.com
|
||||
@ -737,15 +734,15 @@
|
||||
<div class="footer-section">
|
||||
<h3>Courses</h3>
|
||||
<ul>
|
||||
<li><a href="#">Web Development</a></li>
|
||||
<li><a href="#">Full Stack Development</a></li>
|
||||
<li><a href="#">Frontend Development</a></li>
|
||||
<li><a href="#">Backend Development</a></li>
|
||||
<li><a href="#">JavaScript Mastery</a></li>
|
||||
<li><a href="#">React & Next.js</a></li>
|
||||
<li><a href="#">Node.js & Express</a></li>
|
||||
<li><a href="#">Software Development</a></li>
|
||||
<li><a href="#">Cloud & DevOps</a></li>
|
||||
<li><a href="#">AI & Data</a></li>
|
||||
<li><a href="#">Cybersecurity</a></li>
|
||||
<li><a href="#">Quality & Testing</a></li>
|
||||
<li><a href="#">Enterprise Tech</a></li>
|
||||
<!-- <li><a href="#">Node.js & Express</a></li>
|
||||
<li><a href="#">Database Management</a></li>
|
||||
<li><a href="#">API Development</a></li>
|
||||
<li><a href="#">API Development</a></li> -->
|
||||
</ul>
|
||||
|
||||
<h3 style="margin-top: 30px;">Learning Paths</h3>
|
||||
@ -771,22 +768,21 @@
|
||||
|
||||
<h3 style="margin-top: 30px;">Community</h3>
|
||||
<ul>
|
||||
<li><a href="#">Student Forum</a></li>
|
||||
<li><a href="#">Forums & Study Groups</a></li>
|
||||
<li><a href="#">Code Reviews</a></li>
|
||||
<li><a href="#">Study Groups</a></li>
|
||||
<li><a href="#">Success Stories</a></li>
|
||||
<li><a href="#">Mentorship Program</a></li>
|
||||
<li><a href="#">Mentorship & Alumni</a></li>
|
||||
<!-- <li><a href="#">Success Stories & Alumni Network</a></li>
|
||||
<li><a href="#">Mentorship Program</a></li> -->
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer-bottom">
|
||||
<div style="max-width: 1200px; margin: 0 auto; padding: 0 20px;">
|
||||
<div class="footer-bottom-links">
|
||||
<p style="margin-top: 20px;">
|
||||
<p style="color:#000;">
|
||||
Copyright © 2025 <a href="#" style="color:#000; text-decoration:none;">Kode Pilot Learning Pvt Ltd</a> - All rights reserved.
|
||||
</p>
|
||||
<p style="margin-top: 20px 0px; padding: 10px 0px; font-size: 15px; margin-bottom : 30px">
|
||||
Copyright © 2025 <a href="#" style="color: #120ee2;">Kodepilot</a> - All
|
||||
rights
|
||||
reserved.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
498
main.css
498
main.css
@ -22,22 +22,16 @@
|
||||
|
||||
.search {
|
||||
flex: 1;
|
||||
margin: 0 20px 0 10px;
|
||||
margin: 0 20px;
|
||||
padding: 8px 12px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 20px;
|
||||
max-width: 344px;
|
||||
position: absolute;
|
||||
left: 142px;
|
||||
}
|
||||
|
||||
nav a {
|
||||
margin: 0 10px;
|
||||
text-decoration: none;
|
||||
color: #333;
|
||||
position: absolute;
|
||||
right: 235px;
|
||||
top: 19px;
|
||||
}
|
||||
|
||||
.buttons button {
|
||||
@ -132,9 +126,9 @@
|
||||
.green {
|
||||
background: #9BE6C1;
|
||||
background-image: url('assets/images/unlockcarrer/internship.png');
|
||||
background-size: 115px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: bottom right;
|
||||
background-size: 115px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: bottom right;
|
||||
}
|
||||
|
||||
.orange {
|
||||
@ -163,8 +157,7 @@
|
||||
}
|
||||
|
||||
.yellow {
|
||||
background: #ffdd80;
|
||||
background-image: url('assets/images/unlockcarrer/competitions.png');
|
||||
background: #ffdd80;background-image: url('assets/images/unlockcarrer/competitions.png');
|
||||
background-size: 115px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: bottom right;
|
||||
@ -318,13 +311,14 @@
|
||||
.mnc-logos {
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: 55px;
|
||||
}
|
||||
|
||||
.mnc-logos-track {
|
||||
display: flex;
|
||||
gap: 40px;
|
||||
transform: translateX(0);
|
||||
transition: transform 0.5s ease;
|
||||
gap: 5vw;
|
||||
animation: stepScroll 12s infinite;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.mnc-logos img {
|
||||
@ -335,7 +329,33 @@
|
||||
|
||||
.mnc-logos img.image-hcl {
|
||||
height: 25px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
@keyframes stepScroll {
|
||||
|
||||
0%,
|
||||
20% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
25%,
|
||||
45% {
|
||||
transform: translateX(-25%);
|
||||
}
|
||||
|
||||
50%,
|
||||
70% {
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
75%,
|
||||
95% {
|
||||
transform: translateX(-75%);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
.our-numbers {
|
||||
@ -552,27 +572,27 @@
|
||||
}
|
||||
|
||||
.card-quizzes {
|
||||
background: url('assets/images/seize/quizz.png') no-repeat center/cover;
|
||||
background: linear-gradient(to bottom right, #60a5fa, #2563eb);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.card-hackathons {
|
||||
background: url('assets/images/seize/hackathons.png') no-repeat center/cover;
|
||||
background: linear-gradient(to bottom right, #4ade80, #22c55e);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.card-scholarships {
|
||||
background: url('assets/images/seize/scholarships.png') no-repeat center/cover;
|
||||
background: linear-gradient(to bottom right, #a855f7, #7c3aed);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.card-conferences {
|
||||
background: url('assets/images/seize/conferences.png') no-repeat center/cover;
|
||||
background: linear-gradient(to bottom right, #fed7aa, #fdba74);
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
.card-festivals {
|
||||
background: url('assets/images/seize/test.png') no-repeat center/cover;
|
||||
background: linear-gradient(to bottom right, #facc15, #eab308);
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
@ -918,44 +938,48 @@
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.footer-container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
gap: 50px;
|
||||
}
|
||||
.footer-container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px; /* restore padding */
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
gap: 50px;
|
||||
}
|
||||
|
||||
|
||||
.footer-section h3 {
|
||||
font-size: 18px;
|
||||
font-size: 18 px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 20px;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.footer-section ul {
|
||||
list-style: none;
|
||||
}
|
||||
.footer-section ul {
|
||||
list-style: none;
|
||||
padding: 0; /* removes left padding */
|
||||
margin: 0; /* removes default top/bottom margin */
|
||||
}
|
||||
|
||||
.footer-section ul li {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.footer-section ul li {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.footer-section ul li a {
|
||||
color: #cbd5e1;
|
||||
text-decoration: none;
|
||||
font-size: 14px;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
.footer-section ul li a {
|
||||
color: #cbd5e1;
|
||||
text-decoration: none;
|
||||
font-size: 14px;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.footer-section ul li a:hover {
|
||||
color: #ffffff;
|
||||
}
|
||||
.footer-section ul li a:hover {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.company-section {
|
||||
grid-column: 1;
|
||||
}
|
||||
|
||||
.company-section {
|
||||
grid-column: 1;
|
||||
}
|
||||
|
||||
.company-section .logo {
|
||||
font-size: 28px;
|
||||
@ -974,27 +998,31 @@
|
||||
color: #ef4444;
|
||||
}
|
||||
|
||||
.contact-info {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.contact-info {
|
||||
margin-bottom: 20px;
|
||||
|
||||
}
|
||||
|
||||
.contact-info h4 {
|
||||
font-size: 16px;
|
||||
margin-bottom: 15px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.contact-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
color: #cbd5e1;
|
||||
}
|
||||
.contact-info h4 {
|
||||
font-size: 16px;
|
||||
margin-bottom: 15px;
|
||||
color: white;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.contact-item i {
|
||||
margin-right: 10px;
|
||||
width: 16px;
|
||||
}
|
||||
.contact-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
margin-left :-27px
|
||||
|
||||
}
|
||||
|
||||
.contact-item i {
|
||||
margin-right: 10px;
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
.social-icons {
|
||||
display: flex;
|
||||
@ -1013,7 +1041,7 @@
|
||||
}
|
||||
|
||||
.newsletter-section {
|
||||
margin-top: 30px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.newsletter-section h4 {
|
||||
@ -1318,7 +1346,7 @@
|
||||
|
||||
.card-simple {
|
||||
max-width: 1200px;
|
||||
margin: 70px auto 70px auto;
|
||||
margin: 50px auto 50px auto;
|
||||
}
|
||||
|
||||
.card-easy {
|
||||
@ -1446,11 +1474,15 @@
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 8px 18px;
|
||||
/* controls height and width */
|
||||
border-radius: 25px;
|
||||
font-size: 0.9em;
|
||||
width: auto;
|
||||
/* ensures it doesn't stretch */
|
||||
max-width: 155px;
|
||||
/* optional limit */
|
||||
display: inline-block;
|
||||
/* prevents flex from stretching it */
|
||||
cursor: pointer;
|
||||
transition: background 0.3s;
|
||||
}
|
||||
@ -1469,336 +1501,12 @@
|
||||
|
||||
.card-easy-right {
|
||||
padding: 80px 50px;
|
||||
/* more top/bottom space increases height */
|
||||
}
|
||||
|
||||
.card-easy-left img {
|
||||
width: 90%;
|
||||
max-height: 100%;
|
||||
/* image takes more vertical space */
|
||||
}
|
||||
}
|
||||
|
||||
/*----------------------------------------------------------------------------------------------------------------------*/
|
||||
|
||||
|
||||
/* Practice Cards Component CSS - Unique class names to prevent conflicts */
|
||||
.practice-cards-container * {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: 'Segoe UI', system-ui, sans-serif;
|
||||
}
|
||||
|
||||
.practice-cards-container {
|
||||
background-color: #ffffff;
|
||||
color: #1f2937;
|
||||
padding: 40px 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.practice-container {
|
||||
max-width: 1300px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.practice-title {
|
||||
font-size: 32px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 12px;
|
||||
color: #111827;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.practice-subtitle {
|
||||
font-size: 18px;
|
||||
color: #6b7280;
|
||||
max-width: 700px;
|
||||
/* margin: 0 auto 40px; */
|
||||
line-height: 1.5;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.practice-cards-wrapper {
|
||||
margin: 30px 0;
|
||||
display: flex;
|
||||
height: 380px;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
/* box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); */
|
||||
position: relative;
|
||||
gap: 1px;
|
||||
background-color: #d1d5db;
|
||||
padding: 1px;
|
||||
}
|
||||
|
||||
.practice-card {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transform-origin: center;
|
||||
background-color: white;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.practice-card:first-child {
|
||||
border-radius: 11px 0 0 11px;
|
||||
}
|
||||
|
||||
.practice-card:last-child {
|
||||
border-radius: 0 11px 11px 0;
|
||||
}
|
||||
|
||||
.practice-card-content {
|
||||
flex: 1;
|
||||
padding: 24px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
transition: all 0.7s ease;
|
||||
min-width: 0;
|
||||
z-index: 2;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Color changes for active and hover states */
|
||||
.practice-card.active { background-color: #c6e0f1; }
|
||||
.practice-card:nth-child(1):hover,
|
||||
.practice-card:nth-child(1).active { background-color: #89CFF0; }
|
||||
.practice-card:nth-child(2):hover,
|
||||
.practice-card:nth-child(2).active { background-color: #FEB4CF; }
|
||||
.practice-card:nth-child(3):hover,
|
||||
.practice-card:nth-child(3).active { background-color: #DFC5FE; }
|
||||
.practice-card:nth-child(4):hover,
|
||||
.practice-card:nth-child(4).active { background-color: #FFE186; }
|
||||
|
||||
/* SVG Container */
|
||||
.practice-card-svg {
|
||||
width: 0;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 1.3s cubic-bezier(0.23, 1, 0.32, 1);
|
||||
opacity: 0;
|
||||
padding: 20px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.practice-card-svg svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-width: 180px;
|
||||
max-height: 180px;
|
||||
filter: drop-shadow(0 4px 8px rgba(0,0,0,0.1));
|
||||
}
|
||||
|
||||
.practice-card-icon {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 24px;
|
||||
margin-bottom: 16px;
|
||||
transition: transform 0.5s ease;
|
||||
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.practice-card:nth-child(1) .practice-card-icon { background-color: #1268f3; color: white; }
|
||||
.practice-card:nth-child(2) .practice-card-icon { background-color: #ef4444; color: white; }
|
||||
.practice-card:nth-child(3) .practice-card-icon { background-color: #8b5cf6; color: white; }
|
||||
.practice-card:nth-child(4) .practice-card-icon { background-color: #f59e0b; color: white; }
|
||||
|
||||
.practice-card h3 {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 12px;
|
||||
color: #111827;
|
||||
transition: transform 0.5s ease;
|
||||
}
|
||||
|
||||
.practice-card p {
|
||||
font-size: 15px;
|
||||
color: #6b7280;
|
||||
line-height: 1.5;
|
||||
margin-bottom: 16px;
|
||||
transition: transform 0.5s ease;
|
||||
}
|
||||
|
||||
.practice-meta-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
font-size: 14px;
|
||||
color: #4b5563;
|
||||
transition: transform 0.5s ease;
|
||||
}
|
||||
|
||||
.practice-meta-logo {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background-color: #3b82f6;
|
||||
border-radius: 4px;
|
||||
margin-right: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.practice-footer-text {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #374151;
|
||||
margin-top: auto;
|
||||
transition: transform 0.5s ease;
|
||||
}
|
||||
|
||||
.practice-cta-btn {
|
||||
margin-top: 16px;
|
||||
background-color: #111827;
|
||||
color: white;
|
||||
padding: 10px 16px;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
width: fit-content;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
transition: all 0.7s cubic-bezier(0.23, 1, 0.32, 1);
|
||||
opacity: 0;
|
||||
transform: translateY(15px);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.practice-cta-btn::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
|
||||
transition: left 0.8s;
|
||||
}
|
||||
|
||||
.practice-cta-btn:hover::before {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
.practice-cta-btn:hover {
|
||||
background-color: #374151;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 12px rgba(0,0,0,0.15);
|
||||
}
|
||||
|
||||
/* Active card styles */
|
||||
.practice-card.active {
|
||||
flex: 3.5;
|
||||
transform: translateY(-8px) scale(1.02);
|
||||
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.practice-card.active .practice-card-svg {
|
||||
width: 45%;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.practice-card.active .practice-cta-btn {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.practice-card.active .practice-card-icon {
|
||||
transform: scale(1.1) rotate(5deg);
|
||||
}
|
||||
|
||||
.practice-card.active h3 {
|
||||
transform: translateY(-3px);
|
||||
}
|
||||
|
||||
.practice-card.active p,
|
||||
.practice-card.active .practice-meta-info,
|
||||
.practice-card.active .practice-footer-text {
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
/* Hover effects for non-active cards */
|
||||
.practice-card:hover:not(.active) {
|
||||
flex: 1.3;
|
||||
transform: translateY(-4px) scale(1.01);
|
||||
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.practice-card:hover:not(.active) .practice-card-svg {
|
||||
width: 25%;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
/* Subtle overlay effect */
|
||||
.practice-card::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(to bottom, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 100%);
|
||||
opacity: 0;
|
||||
transition: opacity 0.6s ease;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.practice-card.active::after,
|
||||
.practice-card:hover::after {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
.practice-cards-wrapper {
|
||||
flex-direction: column;
|
||||
height: auto;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.practice-card {
|
||||
flex-direction: column;
|
||||
height: auto;
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
.practice-card:first-child {
|
||||
border-radius: 12px 12px 0 0 !important;
|
||||
}
|
||||
|
||||
.practice-card:last-child {
|
||||
border-radius: 0 0 12px 12px !important;
|
||||
}
|
||||
|
||||
.practice-card.active .practice-card-svg,
|
||||
.practice-card:hover .practice-card-svg {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.practice-card.active {
|
||||
transform: translateY(-5px) scale(1.01);
|
||||
}
|
||||
|
||||
.practice-card:hover:not(.active) {
|
||||
transform: translateY(-3px) scale(1.005);
|
||||
}
|
||||
}
|
||||
}
|
||||
248
main.js
248
main.js
@ -1,12 +1,7 @@
|
||||
function goToApplay() {
|
||||
window.location.href = "/applay/";
|
||||
function goToLogin() {
|
||||
window.location.href = "/my/";
|
||||
}
|
||||
|
||||
function getInTouch() {
|
||||
window.open("https://wa.me/1234567890?text=Hi%20Link%20kodepilote%20Team...", "_blank");
|
||||
}
|
||||
|
||||
|
||||
(function () {
|
||||
if (window.Slide1rSliderLoaded) {
|
||||
return;
|
||||
@ -232,243 +227,4 @@ const observer = new IntersectionObserver((entries) => {
|
||||
});
|
||||
}, { threshold: 0.2 });
|
||||
|
||||
console.log("test");
|
||||
document.addEventListener('DOMContentLoaded', async () => {
|
||||
// const allCourses = [];
|
||||
|
||||
// const baseUrl = 'https://kodepilot.in/course/index.php';
|
||||
// const res = await fetch(baseUrl);
|
||||
// const html = await res.text();
|
||||
|
||||
// const categoryRegex = /<h3 class="categoryname aabtn"><a href="([^"]+)">([^<]+)<\/a><\/h3>/g;
|
||||
// const categories = [];
|
||||
// let match;
|
||||
// while ((match = categoryRegex.exec(html)) !== null) {
|
||||
// categories.push({ url: match[1], name: match[2] });
|
||||
// }
|
||||
|
||||
// for (const category of categories) {
|
||||
// const resCat = await fetch(category.url);
|
||||
// const catHtml = await resCat.text();
|
||||
// const cleanHtml = catHtml.replace(/\n/g, ' ');
|
||||
|
||||
// const courseRegex = /<div class="card dashboard-card [^"]*"[^>]*>.*?<a href="([^"]+)"[^>]*>.*?background-image: url\(([^)]+)\);".*?<span class="sr-only">(.*?)<\/span>.*?<div class="course-category">\s*([^<]+)<\/div>.*?<div class="course-summary">.*?<p>(.*?)<\/p>/g;
|
||||
|
||||
// while ((match = courseRegex.exec(cleanHtml)) !== null) {
|
||||
// allCourses.push({
|
||||
// category: match[4].trim(),
|
||||
// link: match[1].trim(),
|
||||
// image: match[2].trim(),
|
||||
// name: match[3].trim(),
|
||||
// description: match[5].replace(/<br\s*\/?>/g, ' ').trim()
|
||||
// });
|
||||
// }
|
||||
// }
|
||||
const allCourses = [
|
||||
{
|
||||
category: "Software Development & Engineering",
|
||||
link: "https://kodepilot.in/course/view.php?id=16",
|
||||
image: "https://kodepilot.in/pluginfile.php/53/course/overviewfiles/UiUx.png",
|
||||
name: "UI/UX Design",
|
||||
description: "Learn the fundamentals of user interface and user experience design."
|
||||
},
|
||||
{
|
||||
category: "Software Development & Engineering",
|
||||
link: "https://kodepilot.in/course/view.php?id=9",
|
||||
image: "https://kodepilot.in/pluginfile.php/39/course/overviewfiles/IOS.png",
|
||||
name: "iOS Development",
|
||||
description: "Build iOS apps using Swift and Apple’s development tools."
|
||||
},
|
||||
{
|
||||
category: "Software Development & Engineering",
|
||||
link: "https://kodepilot.in/course/view.php?id=7",
|
||||
image: "https://kodepilot.in/pluginfile.php/35/course/overviewfiles/RD.png",
|
||||
name: "React Development",
|
||||
description: "Master React.js for building fast and scalable web apps."
|
||||
},
|
||||
{
|
||||
category: "Software Development & Engineering",
|
||||
link: "https://kodepilot.in/course/view.php?id=5",
|
||||
image: "https://kodepilot.in/pluginfile.php/31/course/overviewfiles/PFS.png",
|
||||
name: "Full Stack Development",
|
||||
description: "End-to-end training in frontend, backend, and databases."
|
||||
},
|
||||
{
|
||||
category: "Software Development & Engineering",
|
||||
link: "https://kodepilot.in/course/view.php?id=3",
|
||||
image: "https://kodepilot.in/pluginfile.php/25/course/overviewfiles/JFS.png",
|
||||
name: "Java Full Stack",
|
||||
description: "Become a full stack developer with Java, Spring, and modern tools."
|
||||
},
|
||||
{
|
||||
category: "Quality & Testing",
|
||||
link: "https://kodepilot.in/course/view.php?id=13",
|
||||
image: "https://kodepilot.in/pluginfile.php/46/course/overviewfiles/PT.png",
|
||||
name: "Performance Testing",
|
||||
description: "Learn tools and techniques for testing system performance."
|
||||
},
|
||||
{
|
||||
category: "Quality & Testing",
|
||||
link: "https://kodepilot.in/course/view.php?id=10",
|
||||
image: "https://kodepilot.in/pluginfile.php/41/course/overviewfiles/QA.png",
|
||||
name: "QA Testing",
|
||||
description: "Understand quality assurance practices for reliable software."
|
||||
},
|
||||
{
|
||||
category: "Cloud & DevOps",
|
||||
link: "https://kodepilot.in/course/view.php?id=17",
|
||||
image: "https://kodepilot.in/pluginfile.php/55/course/overviewfiles/GC.png",
|
||||
name: "Google Cloud",
|
||||
description: "Get hands-on with Google Cloud Platform services and tools."
|
||||
},
|
||||
{
|
||||
category: "Cloud & DevOps",
|
||||
link: "https://kodepilot.in/course/view.php?id=4",
|
||||
image: "https://kodepilot.in/pluginfile.php/28/course/overviewfiles/AWSA.png",
|
||||
name: "AWS Associate",
|
||||
description: "Prepare for AWS certifications and cloud computing skills."
|
||||
},
|
||||
{
|
||||
category: "AI, Data & Emerging Tech (On-demand & trending)",
|
||||
link: "https://kodepilot.in/course/view.php?id=26",
|
||||
image: "https://kodepilot.in/pluginfile.php/73/course/overviewfiles/DE.png",
|
||||
name: "Data Engineering",
|
||||
description: "Build pipelines and manage data at scale for analytics."
|
||||
},
|
||||
{
|
||||
category: "AI, Data & Emerging Tech (On-demand & trending)",
|
||||
link: "https://kodepilot.in/course/view.php?id=18",
|
||||
image: "https://kodepilot.in/pluginfile.php/58/course/overviewfiles/PE.png",
|
||||
name: "Prompt Engineering",
|
||||
description: "Learn to design prompts for AI models like ChatGPT."
|
||||
},
|
||||
{
|
||||
category: "AI, Data & Emerging Tech (On-demand & trending)",
|
||||
link: "https://kodepilot.in/course/view.php?id=12",
|
||||
image: "https://kodepilot.in/pluginfile.php/44/course/overviewfiles/AI%28Ess%29.png",
|
||||
name: "AI Essentials",
|
||||
description: "Introduction to AI, ML concepts, and real-world use cases."
|
||||
},
|
||||
{
|
||||
category: "Enterprise & Business Tech",
|
||||
link: "https://kodepilot.in/course/view.php?id=24",
|
||||
image: "https://kodepilot.in/pluginfile.php/70/course/overviewfiles/ServiceNow.png",
|
||||
name: "ServiceNow",
|
||||
description: "Learn ITSM and workflow automation with ServiceNow."
|
||||
},
|
||||
{
|
||||
category: "Enterprise & Business Tech",
|
||||
link: "https://kodepilot.in/course/view.php?id=19",
|
||||
image: "https://kodepilot.in/pluginfile.php/61/course/overviewfiles/SAP.png",
|
||||
name: "SAP",
|
||||
description: "Master SAP ERP modules for enterprise solutions."
|
||||
},
|
||||
{
|
||||
category: "Cybersecurity & Compliance",
|
||||
link: "https://kodepilot.in/course/view.php?id=23",
|
||||
image: "https://kodepilot.in/pluginfile.php/69/course/overviewfiles/Security.png",
|
||||
name: "Security Fundamentals",
|
||||
description: "Understand core concepts of IT security and defense."
|
||||
},
|
||||
{
|
||||
category: "Cybersecurity & Compliance",
|
||||
link: "https://kodepilot.in/course/view.php?id=22",
|
||||
image: "https://kodepilot.in/pluginfile.php/68/course/overviewfiles/CyE.png",
|
||||
name: "Cyber Essentials",
|
||||
description: "Learn the basics of cybersecurity and compliance standards."
|
||||
}
|
||||
];
|
||||
|
||||
console.table(allCourses);
|
||||
|
||||
|
||||
renderCourses(allCourses);
|
||||
});
|
||||
|
||||
function renderCourses(allCourses) {
|
||||
const container = document.querySelector('.corces');
|
||||
if (!container) {
|
||||
console.error("⚠️ No .corces container found in DOM");
|
||||
return;
|
||||
}
|
||||
|
||||
container.innerHTML = '';
|
||||
|
||||
// Group courses by category
|
||||
const grouped = {};
|
||||
allCourses.forEach(course => {
|
||||
if (!grouped[course.category]) grouped[course.category] = [];
|
||||
grouped[course.category].push(course);
|
||||
});
|
||||
|
||||
// Render each category section
|
||||
Object.keys(grouped).forEach(category => {
|
||||
const section = document.createElement('div');
|
||||
section.className = 'course-section';
|
||||
|
||||
section.innerHTML = `
|
||||
<h2 class="course-category-title">${category}</h2>
|
||||
<div class="course-slider">
|
||||
<button class="prev-btn">◀</button>
|
||||
<div class="course-track"></div>
|
||||
<button class="next-btn">▶</button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
const track = section.querySelector('.course-track');
|
||||
|
||||
grouped[category].forEach(course => {
|
||||
const courseDiv = document.createElement('div');
|
||||
courseDiv.className = 'course-card';
|
||||
courseDiv.innerHTML = `
|
||||
<a href="${course.link}" target="_blank">
|
||||
<div class="course-image" style="background-image: url(${course.image});"></div>
|
||||
</a>
|
||||
<div class="course-content">
|
||||
<a href="${course.link}" class="course-name" target="_blank">${course.name}</a>
|
||||
<div class="course-description">${course.description}</div>
|
||||
</div>
|
||||
`;
|
||||
track.appendChild(courseDiv);
|
||||
});
|
||||
|
||||
const prevBtn = section.querySelector('.prev-btn');
|
||||
const nextBtn = section.querySelector('.next-btn');
|
||||
|
||||
let scrollAmount = 0;
|
||||
prevBtn.addEventListener('click', () => {
|
||||
track.scrollBy({ left: -300, behavior: 'smooth' });
|
||||
});
|
||||
nextBtn.addEventListener('click', () => {
|
||||
track.scrollBy({ left: 300, behavior: 'smooth' });
|
||||
});
|
||||
|
||||
container.appendChild(section);
|
||||
});
|
||||
}
|
||||
|
||||
statItems.forEach(item => observer.observe(item));
|
||||
|
||||
|
||||
const track = document.querySelector('.mnc-logos-track');
|
||||
const gap = 40;
|
||||
let index = 0;
|
||||
|
||||
function stepScroll() {
|
||||
const items = track.children;
|
||||
const first = items[0];
|
||||
const moveWidth = first.offsetWidth + gap;
|
||||
|
||||
track.style.transform = `translateX(-${moveWidth}px)`;
|
||||
|
||||
track.addEventListener('transitionend', function handler() {
|
||||
track.appendChild(first);
|
||||
track.style.transition = 'none';
|
||||
track.style.transform = 'translateX(0)';
|
||||
void track.offsetWidth; // force reflow
|
||||
track.style.transition = 'transform 0.5s ease';
|
||||
track.removeEventListener('transitionend', handler);
|
||||
});
|
||||
}
|
||||
|
||||
setInterval(stepScroll, 3000);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user