Merge pull request 'content' (#8) from content into main
Reviewed-on: #8
|
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 |
|
Before Width: | Height: | Size: 74 KiB After Width: | Height: | Size: 149 KiB |
|
Before Width: | Height: | Size: 62 KiB After Width: | Height: | Size: 218 KiB |
|
Before Width: | Height: | Size: 39 KiB After Width: | Height: | Size: 135 KiB |
|
Before Width: | Height: | Size: 45 KiB After Width: | Height: | Size: 119 KiB |
|
Before Width: | Height: | Size: 41 KiB After Width: | Height: | Size: 126 KiB |
|
Before Width: | Height: | Size: 48 KiB After Width: | Height: | Size: 201 KiB |
1359
index.html
10
main.css
@ -260,7 +260,7 @@
|
|||||||
.mnc-box {
|
.mnc-box {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
max-width: 1200px;
|
max-width: 1159px;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -277,6 +277,7 @@
|
|||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
font-size: 1.3vw;
|
font-size: 1.3vw;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
|
margin-top: -5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mnc h2 .gray,
|
.mnc h2 .gray,
|
||||||
@ -704,13 +705,11 @@
|
|||||||
position: relative;
|
position: relative;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
border-radius: 16px;
|
border-radius: 16px;
|
||||||
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
|
|
||||||
transition: all 0.3s ease;
|
transition: all 0.3s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.image-container:hover {
|
.image-container:hover {
|
||||||
transform: translateY(-5px);
|
transform: translateY(-5px);
|
||||||
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.18);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.slide1-box img {
|
.slide1-box img {
|
||||||
@ -917,7 +916,7 @@
|
|||||||
.footer {
|
.footer {
|
||||||
background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%);
|
background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%);
|
||||||
color: white;
|
color: white;
|
||||||
padding: 60px 0 30px 0;
|
padding: 60px 0 0;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -1100,6 +1099,7 @@
|
|||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: #94a3b8;
|
color: #94a3b8;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
|
background: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer-bottom-links {
|
.footer-bottom-links {
|
||||||
@ -1342,7 +1342,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.card-easy-left img {
|
.card-easy-left img {
|
||||||
width: 80%;
|
width: 100%;
|
||||||
border-radius: 15px;
|
border-radius: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
8
main.js
@ -194,19 +194,18 @@ document.addEventListener("DOMContentLoaded", () => {
|
|||||||
const track = document.querySelector(".move-slider-track");
|
const track = document.querySelector(".move-slider-track");
|
||||||
const boxes = Array.from(track.children);
|
const boxes = Array.from(track.children);
|
||||||
|
|
||||||
// Clone all slides once
|
|
||||||
boxes.forEach(box => {
|
boxes.forEach(box => {
|
||||||
const clone = box.cloneNode(true);
|
const clone = box.cloneNode(true);
|
||||||
track.appendChild(clone);
|
track.appendChild(clone);
|
||||||
});
|
});
|
||||||
|
|
||||||
let position = 0;
|
let position = 0;
|
||||||
const speed = 1; // pixels per frame, adjust for faster/slower scroll
|
const speed = 1;
|
||||||
|
|
||||||
function animate() {
|
function animate() {
|
||||||
position -= speed;
|
position -= speed;
|
||||||
if (Math.abs(position) >= track.scrollWidth / 2) {
|
if (Math.abs(position) >= track.scrollWidth / 2) {
|
||||||
position = 0; // reset after first set slides out
|
position = 0;
|
||||||
}
|
}
|
||||||
track.style.transform = `translateX(${position}px)`;
|
track.style.transform = `translateX(${position}px)`;
|
||||||
requestAnimationFrame(animate);
|
requestAnimationFrame(animate);
|
||||||
@ -224,9 +223,8 @@ const observer = new IntersectionObserver((entries) => {
|
|||||||
const index = Array.from(statItems).indexOf(entry.target);
|
const index = Array.from(statItems).indexOf(entry.target);
|
||||||
entry.target.style.transitionDelay = `${(index + 1) * 0.1}s`;
|
entry.target.style.transitionDelay = `${(index + 1) * 0.1}s`;
|
||||||
entry.target.classList.add('visible');
|
entry.target.classList.add('visible');
|
||||||
// observer.unobserve(entry.target); // optional: animate only once
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}, { threshold: 0.2 }); // 20% visible
|
}, { threshold: 0.2 });
|
||||||
|
|
||||||
statItems.forEach(item => observer.observe(item));
|
statItems.forEach(item => observer.observe(item));
|
||||||
|
|||||||