diff --git a/Assets/Images/unlockcarrer/competitions.png b/Assets/Images/unlockcarrer/competitions.png new file mode 100644 index 0000000..9d163f7 Binary files /dev/null and b/Assets/Images/unlockcarrer/competitions.png differ diff --git a/Assets/Images/unlockcarrer/internship.png b/Assets/Images/unlockcarrer/internship.png new file mode 100644 index 0000000..2d557eb Binary files /dev/null and b/Assets/Images/unlockcarrer/internship.png differ diff --git a/Assets/Images/unlockcarrer/jobs.png b/Assets/Images/unlockcarrer/jobs.png new file mode 100644 index 0000000..a0085a7 Binary files /dev/null and b/Assets/Images/unlockcarrer/jobs.png differ diff --git a/Assets/Images/unlockcarrer/mentorship.png b/Assets/Images/unlockcarrer/mentorship.png new file mode 100644 index 0000000..0ace7f3 Binary files /dev/null and b/Assets/Images/unlockcarrer/mentorship.png differ diff --git a/Assets/Images/unlockcarrer/more.png b/Assets/Images/unlockcarrer/more.png new file mode 100644 index 0000000..a8cdbca Binary files /dev/null and b/Assets/Images/unlockcarrer/more.png differ diff --git a/Assets/Images/unlockcarrer/practice.png b/Assets/Images/unlockcarrer/practice.png new file mode 100644 index 0000000..78fb69c Binary files /dev/null and b/Assets/Images/unlockcarrer/practice.png differ diff --git a/banner.html b/banner.html new file mode 100644 index 0000000..443bf31 --- /dev/null +++ b/banner.html @@ -0,0 +1,181 @@ + + + + + +Skill Card + + + + +
+
+ Student Image + + +
+
+

Learn & Level Up Your Skills

+

Select from a wide range of courses to upskill and advance your career!

+
+
✓50+ Courses
+
✓Certificate
+
✓Projects & Assignments
+
+ +
+
+ + + diff --git a/index.html b/index.html index 3d2a740..70b6515 100644 --- a/index.html +++ b/index.html @@ -250,15 +250,101 @@ -
-
-
-
-
-
-
+
+
+
+
+

Kodepilot

+

+ Helping the world withcreative +

+

+ designs +

+

+ 92% Client Retention +

+
-
+
+
+
+

+ " +

+

+ "From farm inventory to eco-shipment tracking, OpsMonsters built us a green-tech backbone. + Their system lets us trace every organic ingredient and prove our sustainability story to + conscious customers." +

+
+
+ +
+

John Doe

+

CEO

+
+
+
+
+
+ +
+
+

+ " +

+

+ "OpsMonsters understood our mission: simple, honest, organic. They delivered a clean, + lightning-fast e-commerce engine that scales with our growth." +

+
+
+ +
+

John Doe

+

CEO

+
+
+
+
+
+ + +
+
+

+ " +

+

+ "Loan processing used to take weeks. OpsMonsters’ smart engine made approvals happen in days + without compromising security." +

+
+
+ +
+

John Doe

+

CEO

+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
diff --git a/main.css b/main.css index 73e57a6..3308177 100644 --- a/main.css +++ b/main.css @@ -209,6 +209,7 @@ margin: 0; flex: 1 1 352px; max-height: 100px; + width: 342px; } .crd img { @@ -229,7 +230,6 @@ .crd p { -webkit-line-clamp: 2; - /* show max 2 lines */ -webkit-box-orient: vertical; font-size: 12px; line-height: 140%; @@ -338,6 +338,11 @@ box-sizing: border-box; } + .nameContainer { + display: block; + text-align: start; + } + .stat-number { display: block; font-size: clamp(1.8rem, 2.5vw, 3rem); @@ -1128,4 +1133,172 @@ .action-buttons { flex-direction: column; } + } + + .move-slider-ruby { + width: 100%; + overflow: hidden; + background: #fff; + display: flex; + justify-content: center; + align-items: center; + gap: 20px; + } + + .move-slider-box-static { + background: #1e90ff; + height: 350px; + min-width: 350px; + border-radius: 10px; + padding: 24px; + display: flex; + flex-direction: column; + justify-content: center; + text-align: center; + gap: 10px; + z-index: 9; + } + + .slide-static-text { + color: #fff; + line-height: 3px; + } + + .slide-static-footer { + color: #fff; + font-size: 25px; + font-weight: bold; + } + + .slide-static-h1 { + color: #fff; + } + + .slide-content-static { + text-align: center; + } + + .move-slider-container { + display: flex; + overflow: hidden; + max-width: 1200px; + } + + .move-slider-animation-box { + display: flex; + gap: 20px; + animation: scroll 20s linear infinite; + } + + @keyframes scroll { + from { + transform: translateX(0); + } + + to { + transform: translateX(-50%); + } + + } + + .move-slider-box { + flex: 0 0 auto; + } + + .move-slider-box { + flex: 1 0 30%; + background: #fff; + border-radius: 12px; + padding: 20px; + min-width: 350px; + } + + .move-slider-box .slide-content>*:not(.slide-text) { + transition: opacity 0.3s ease 0s; + } + + .move-slider-box:hover .slide-content>*:not(.slide-text) { + opacity: 0; + pointer-events: none; + } + + .move-slider-box .slide-text { + opacity: 1; + transform: translateY(0) scale(1); + transition: transform 0.6s ease 0.5s, opacity 0.6s ease 0.5s; + } + + .move-slider-box:hover .slide-text { + transform: translateY(100px) scale(1.1); + } + + .slide-content { + display: flex; + flex-direction: column; + height: 100%; + justify-content: start; + } + + .slide-text-cot { + font-size: 40px; + font-weight: bold; + color: red; + } + + .slide-text-cot, + .slide-text { + margin: 0; + padding: 0; + line-height: 1.4; + } + + .slide-logo-box { + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + justify-content: flex-end; + align-items: flex-start; + } + + .profile-box { + display: flex; + align-items: center; + flex-direction: row; + gap: 12px; + } + + .profile-info { + display: flex; + flex-direction: column; + justify-content: center; + } + + .slide-logo { + width: 60px; + height: 60px; + object-fit: cover; + border-radius: 50%; + border: 3px solid #fff; + } + + .slide-name { + font-weight: bold; + font-size: 16px; + color: #333; + margin: 0; + } + + .slide-role { + font-size: 14px; + color: #666; + margin: 0; + } + + .slide-text { + font-size: 20px; + color: #333; + margin-bottom: 20px; + line-height: 1.5; + margin-top: -23px; } \ No newline at end of file diff --git a/main.js b/main.js index 808aa44..4b13d2e 100644 --- a/main.js +++ b/main.js @@ -189,3 +189,28 @@ function goToLogin() { new Slide1rSlider(); })(); + +document.addEventListener("DOMContentLoaded", () => { + const track = document.querySelector(".move-slider-track"); + const boxes = Array.from(track.children); + + // Clone all slides once + boxes.forEach(box => { + const clone = box.cloneNode(true); + track.appendChild(clone); + }); + + let position = 0; + const speed = 1; // pixels per frame, adjust for faster/slower scroll + + function animate() { + position -= speed; + if (Math.abs(position) >= track.scrollWidth / 2) { + position = 0; // reset after first set slides out + } + track.style.transform = `translateX(${position}px)`; + requestAnimationFrame(animate); + } + + animate(); +});