Compare commits
8 Commits
4b301c5013
...
f8a0db289c
| Author | SHA1 | Date | |
|---|---|---|---|
|
f8a0db289c | ||
| 2a84dce9b1 | |||
| 9e2784d5f2 | |||
| 4bccda809c | |||
| fbe12af676 | |||
| 40bd0701d2 | |||
| ff080dbbbe | |||
| 0c3bdd19b5 |
BIN
Assets/Images/learn/learn.png
Normal file
BIN
Assets/Images/learn/learn.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 143 KiB |
181
banner.html
181
banner.html
@ -1,181 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Skill Card</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: 'Arial', sans-serif;
|
||||
background-color: #f8f8f8;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.card {
|
||||
display: flex;
|
||||
width: 1200px;
|
||||
background-color: #fff;
|
||||
border-radius: 20px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
|
||||
transition: transform 0.3s, box-shadow 0.3s;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
transform: translateY(-10px);
|
||||
box-shadow: 0 20px 40px rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
.card-left {
|
||||
flex: 1;
|
||||
background-color: #FFD966;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card-left img {
|
||||
width: 80%;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
/* Optional: floating icons */
|
||||
.icon {
|
||||
position: absolute;
|
||||
background: white;
|
||||
border-radius: 50%;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-weight: bold;
|
||||
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
|
||||
animation: float 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.icon1 { top: 20%; left: 10%; animation-delay: 0s;}
|
||||
.icon2 { top: 10%; right: 15%; animation-delay: 0.5s;}
|
||||
.icon3 { bottom: 20%; left: 20%; animation-delay: 1s;}
|
||||
.icon4 { bottom: 15%; right: 10%; animation-delay: 1.5s;}
|
||||
|
||||
@keyframes float {
|
||||
0%, 100% { transform: translateY(0);}
|
||||
50% { transform: translateY(-10px);}
|
||||
}
|
||||
|
||||
.card-right {
|
||||
flex: 1;
|
||||
padding: 40px 30px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.card-right h2 {
|
||||
font-size: 2em;
|
||||
color: #0b2e6f;
|
||||
margin: 0 0 20px 0;
|
||||
}
|
||||
|
||||
.card-right p {
|
||||
font-size: 1em;
|
||||
color: #555;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.features {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.feature {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
font-size: 0.95em;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.feature span {
|
||||
background: #FFD966;
|
||||
border-radius: 50%;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 14px;
|
||||
color: #0b2e6f;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.card-right button {
|
||||
background-color: #0b2e6f;
|
||||
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;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.card-right button:hover {
|
||||
background-color: #1d4fa0;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.card {
|
||||
flex-direction: column;
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.card-right {
|
||||
padding: 80px 50px; /* more top/bottom space increases height */
|
||||
}
|
||||
|
||||
.card-left img {
|
||||
width: 90%;
|
||||
max-height: 100%; /* image takes more vertical space */
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-left">
|
||||
<img src="/home/rajesh/Downloads/Gemini_Generated_Image_u81x8ju81x8ju81x.png" alt="Student Image">
|
||||
<!-- Floating icons -->
|
||||
<!-- <div class="icon icon1">AWS</div>
|
||||
<div class="icon icon2">SQL</div>
|
||||
<div class="icon icon3">C++</div>
|
||||
<div class="icon icon4">Python</div> -->
|
||||
</div>
|
||||
<div class="card-right">
|
||||
<h2>Learn & Level Up Your Skills</h2>
|
||||
<p>Select from a wide range of courses to upskill and advance your career!</p>
|
||||
<div class="features">
|
||||
<div class="feature"><span>✓</span>50+ Courses</div>
|
||||
<div class="feature"><span>✓</span>Certificate</div>
|
||||
<div class="feature"><span>✓</span>Projects & Assignments</div>
|
||||
</div>
|
||||
<button>Explore Courses</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
202
dynamic-banner.html
Normal file
202
dynamic-banner.html
Normal file
@ -0,0 +1,202 @@
|
||||
<!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;
|
||||
}
|
||||
|
||||
body {
|
||||
background: #f9f9f9;
|
||||
color: #1a1a1a;
|
||||
padding: 40px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 26px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
p.subtext {
|
||||
color: #555;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
/* Flex container */
|
||||
.cards-container {
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
height: 220px;
|
||||
}
|
||||
|
||||
/* Card style */
|
||||
.card {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
border-radius: 14px;
|
||||
overflow: hidden;
|
||||
transition: all 0.4s ease;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* 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; }
|
||||
|
||||
/* 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 */
|
||||
}
|
||||
|
||||
/* Hide image initially */
|
||||
.card img {
|
||||
width: 0;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: all 0.4s ease;
|
||||
border-left: 0px solid #fff;
|
||||
}
|
||||
|
||||
/* 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 h3 {
|
||||
font-size: 18px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.card p {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.footer-text {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Hover effects */
|
||||
.cards-container:hover .card {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.cards-container .card:hover {
|
||||
flex: 2.5;
|
||||
}
|
||||
|
||||
.cards-container .card:hover img {
|
||||
width: 50%; /* show image on right */
|
||||
}
|
||||
|
||||
/* 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>
|
||||
</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>
|
||||
<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>
|
||||
</body>
|
||||
</html>
|
||||
205
index.html
205
index.html
@ -129,51 +129,26 @@
|
||||
<span class="blue_text">We Placed</span>
|
||||
</h2>
|
||||
<div class="mnc-logos">
|
||||
<img 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 class="mnc-logos-track">
|
||||
<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">
|
||||
<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>
|
||||
|
||||
<section class="opportunity-section">
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<h2 class="title">
|
||||
Pick <span class="highlight">The Right Opportunity!</span>
|
||||
</h2>
|
||||
<div class="header-content">
|
||||
<p class="subtitle">Explore opportunities that best suits your skills and interests!</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
</section>
|
||||
<section id="slider">
|
||||
<div class="slide1r-container">
|
||||
<div class="slide1r-wrapper">
|
||||
@ -221,6 +196,86 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="slide1">
|
||||
<div class="slide1-box">
|
||||
<div class="image-container">
|
||||
<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>Data Analytics</h4>
|
||||
<p>Business intelligence insights</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="image-container">
|
||||
<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>Technology Hub</h4>
|
||||
<p>Innovation and development</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="slide1">
|
||||
<div class="slide1-box">
|
||||
<div class="image-container">
|
||||
<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>Data Analytics</h4>
|
||||
<p>Business intelligence insights</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="image-container">
|
||||
<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>Technology Hub</h4>
|
||||
<p>Innovation and development</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="slide1">
|
||||
<div class="slide1-box">
|
||||
<div class="image-container">
|
||||
<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>Data Analytics</h4>
|
||||
<p>Business intelligence insights</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="image-container">
|
||||
<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>Technology Hub</h4>
|
||||
<p>Innovation and development</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="slide1">
|
||||
<div class="slide1-box">
|
||||
<div class="image-container">
|
||||
<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>Data Analytics</h4>
|
||||
<p>Business intelligence insights</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="image-container">
|
||||
<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>Technology Hub</h4>
|
||||
<p>Innovation and development</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Slide 3 -->
|
||||
<div class="slide1">
|
||||
@ -250,6 +305,40 @@
|
||||
<button class="nav-button next-btn" id="nextBtn" aria-label="Next slide"></button>
|
||||
</div>
|
||||
</section>
|
||||
<section class="opportunity-section">
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<h2 class="title">
|
||||
Pick <span class="highlight">The Right Opportunity!</span>
|
||||
</h2>
|
||||
<div class="header-content">
|
||||
<p class="subtitle">Explore opportunities that best suits your skills and interests!</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
</section>
|
||||
<section class="move-slider-ruby">
|
||||
<div class="move-slider-container">
|
||||
<div class="move-slider-box-static">
|
||||
@ -273,7 +362,7 @@
|
||||
"
|
||||
</p>
|
||||
<p class="slide-text">
|
||||
"From farm inventory to eco-shipment tracking, OpsMonsters built us a green-tech backbone.
|
||||
"From farm inventory to eco-shipment tracking, kodepilot built us a green-tech backbone.
|
||||
Their system lets us trace every organic ingredient and prove our sustainability story to
|
||||
conscious customers."
|
||||
</p>
|
||||
@ -296,7 +385,7 @@
|
||||
"
|
||||
</p>
|
||||
<p class="slide-text">
|
||||
"OpsMonsters understood our mission: simple, honest, organic. They delivered a clean,
|
||||
"kodepilot understood our mission: simple, honest, organic. They delivered a clean,
|
||||
lightning-fast e-commerce engine that scales with our growth."
|
||||
</p>
|
||||
<div class="slide-logo-box">
|
||||
@ -311,15 +400,13 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Slide 3 -->
|
||||
<div class="move-slider-box">
|
||||
<div class="slide-content">
|
||||
<p class="slide-text-cot">
|
||||
"
|
||||
</p>
|
||||
<p class="slide-text">
|
||||
"Loan processing used to take weeks. OpsMonsters’ smart engine made approvals happen in days
|
||||
"Loan processing used to take weeks. kodepilot’ smart engine made approvals happen in days
|
||||
without compromising security."
|
||||
</p>
|
||||
<div class="slide-logo-box">
|
||||
@ -338,7 +425,25 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="move-slider">
|
||||
<section class="card-simple">
|
||||
<div class="card-easy">
|
||||
<div class="card-easy-left">
|
||||
<img src="templateapi/Assets/Images/learn/learn.png" alt="Student Image">
|
||||
</div>
|
||||
<div class="card-easy-right">
|
||||
<h2>Learn & Level Up Your Skills</h2>
|
||||
<p>Select from a wide range of courses to upskill and advance your career!</p>
|
||||
<div class="features">
|
||||
<div class="feature"><span>✓</span>50+ Courses</div>
|
||||
<div class="feature"><span>✓</span>Certificate</div>
|
||||
<div class="feature"><span>✓</span>Projects & Assignments</div>
|
||||
</div>
|
||||
<button>Explore Courses</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="move-slider" style="display: none;">
|
||||
<div class="container-slider">
|
||||
<div class="container-slider-baby container-slider-1"></div>
|
||||
<div class="container-slider-baby container-slider-2"></div>
|
||||
@ -350,17 +455,17 @@
|
||||
<section class="our-numbers">
|
||||
<div class="stats-grid">
|
||||
<div class="stat-item">
|
||||
<span class="stat-number">100<span class="highlight">M+</span></span>
|
||||
<span class="stat-number">100<span class="highlight">+</span></span>
|
||||
<span class="stat-label">Active Users</span>
|
||||
</div>
|
||||
|
||||
<div class="stat-item">
|
||||
<span class="stat-number">16<span class="highlight">M+</span></span>
|
||||
<span class="stat-number">16<span class="highlight">+</span></span>
|
||||
<span class="stat-label">Assessments</span>
|
||||
</div>
|
||||
|
||||
<div class="stat-item">
|
||||
<span class="stat-number">1000<span class="highlight">K+</span></span>
|
||||
<span class="stat-number">1000<span class="highlight">+</span></span>
|
||||
<span class="stat-label">Opportunities</span>
|
||||
</div>
|
||||
|
||||
@ -370,7 +475,7 @@
|
||||
</div>
|
||||
|
||||
<div class="stat-item">
|
||||
<span class="stat-number">30<span class="highlight">K+</span></span>
|
||||
<span class="stat-number">30<span class="highlight">+</span></span>
|
||||
<span class="stat-label">Organisations</span>
|
||||
</div>
|
||||
|
||||
|
||||
256
main.css
256
main.css
@ -268,12 +268,15 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 40px;
|
||||
flex-wrap: wrap;
|
||||
flex-wrap: nowrap;
|
||||
overflow-x: auto;
|
||||
max-width: 1200px;
|
||||
}
|
||||
|
||||
.mnc h2 {
|
||||
font-size: 22px;
|
||||
font-weight: 600;
|
||||
font-size: 1.3vw;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.mnc h2 .gray,
|
||||
@ -287,10 +290,16 @@
|
||||
|
||||
|
||||
.mnc-logos {
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: 55px;
|
||||
}
|
||||
|
||||
.mnc-logos-track {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 40px;
|
||||
flex-wrap: wrap;
|
||||
gap: 5vw;
|
||||
animation: stepScroll 12s infinite;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.mnc-logos img {
|
||||
@ -299,13 +308,40 @@
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.mnc-logos img:hover {
|
||||
transform: scale(1.1);
|
||||
.mnc-logos img.image-hcl {
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
@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 {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto 47px auto;
|
||||
margin: 50px auto 50px auto;
|
||||
}
|
||||
|
||||
.our-numbers h2 {
|
||||
@ -433,35 +469,15 @@
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
animation: fadeInUp 0.6s ease forwards;
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
transition: opacity 0.6s ease, transform 0.6s ease;
|
||||
}
|
||||
|
||||
.stat-item:nth-child(1) {
|
||||
animation-delay: 0.1s;
|
||||
}
|
||||
|
||||
.stat-item:nth-child(2) {
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
|
||||
.stat-item:nth-child(3) {
|
||||
animation-delay: 0.3s;
|
||||
}
|
||||
|
||||
.stat-item:nth-child(4) {
|
||||
animation-delay: 0.4s;
|
||||
}
|
||||
|
||||
.stat-item:nth-child(5) {
|
||||
animation-delay: 0.5s;
|
||||
}
|
||||
|
||||
.stat-item:nth-child(6) {
|
||||
animation-delay: 0.6s;
|
||||
}
|
||||
|
||||
.opportunity-section {
|
||||
padding: 0 0 50px 0;
|
||||
/* when visible */
|
||||
.stat-item.visible {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.container {
|
||||
@ -792,7 +808,6 @@
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
/* Dots */
|
||||
.dots-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
@ -820,7 +835,6 @@
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
/* Mobile responsive */
|
||||
@media (max-width: 768px) {
|
||||
.slide1r-container {
|
||||
margin: 15px;
|
||||
@ -1143,6 +1157,7 @@
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
margin-top: 76px;
|
||||
}
|
||||
|
||||
.move-slider-box-static {
|
||||
@ -1301,4 +1316,171 @@
|
||||
margin-bottom: 20px;
|
||||
line-height: 1.5;
|
||||
margin-top: -23px;
|
||||
}
|
||||
|
||||
.card-simple {
|
||||
max-width: 1200px;
|
||||
margin: 50px auto 50px auto;
|
||||
}
|
||||
|
||||
.card-easy {
|
||||
display: flex;
|
||||
width: 1200px;
|
||||
background-color: #F6F8FA;
|
||||
border-radius: 20px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card-easy-left {
|
||||
flex: 1;
|
||||
background-color: #FFD966;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card-easy-left img {
|
||||
width: 80%;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
.icon {
|
||||
position: absolute;
|
||||
background: white;
|
||||
border-radius: 50%;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-weight: bold;
|
||||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
|
||||
animation: float 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.icon1 {
|
||||
top: 20%;
|
||||
left: 10%;
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
.icon2 {
|
||||
top: 10%;
|
||||
right: 15%;
|
||||
animation-delay: 0.5s;
|
||||
}
|
||||
|
||||
.icon3 {
|
||||
bottom: 20%;
|
||||
left: 20%;
|
||||
animation-delay: 1s;
|
||||
}
|
||||
|
||||
.icon4 {
|
||||
bottom: 15%;
|
||||
right: 10%;
|
||||
animation-delay: 1.5s;
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
|
||||
0%,
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
}
|
||||
|
||||
.card-easy-right {
|
||||
flex: 1;
|
||||
padding: 40px 30px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.card-easy-right h2 {
|
||||
font-size: 2em;
|
||||
color: #0b2e6f;
|
||||
margin: 0 0 20px 0;
|
||||
}
|
||||
|
||||
.card-easy-right p {
|
||||
font-size: 1em;
|
||||
color: #555;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.features {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.feature {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
font-size: 0.95em;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.feature span {
|
||||
background: #FFD966;
|
||||
border-radius: 50%;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 14px;
|
||||
color: #0b2e6f;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.card-easy-right button {
|
||||
background-color: #0b2e6f;
|
||||
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;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.card-easy-right button:hover {
|
||||
background-color: #1d4fa0;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.card-easy {
|
||||
flex-direction: column;
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.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 */
|
||||
}
|
||||
}
|
||||
16
main.js
16
main.js
@ -214,3 +214,19 @@ document.addEventListener("DOMContentLoaded", () => {
|
||||
|
||||
animate();
|
||||
});
|
||||
|
||||
|
||||
const statItems = document.querySelectorAll('.stat-item');
|
||||
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
const index = Array.from(statItems).indexOf(entry.target);
|
||||
entry.target.style.transitionDelay = `${(index + 1) * 0.1}s`;
|
||||
entry.target.classList.add('visible');
|
||||
// observer.unobserve(entry.target); // optional: animate only once
|
||||
}
|
||||
});
|
||||
}, { threshold: 0.2 }); // 20% visible
|
||||
|
||||
statItems.forEach(item => observer.observe(item));
|
||||
|
||||
Loading…
Reference in New Issue
Block a user