<!-- Animated Typing Headline -->
<div class="typing-hero">
<h1>
A Partner For <br>
Integrated Solutions<br>
OO <span id="typing-word"></span><span class="typing-cursor">|</span>
</h1>
</div>
<style>
.typing-hero {
padding: 40px 20px;
background: transparent;
}
.typing-hero h1 {
margin: 0;
color: #111111;
font-family: Arial, Helvetica, sans-serif;
font-size: clamp(36px, 6vw, 80px);
font-weight: 700;
line-height: 1.08;
letter-spacing: -1px;
}
#typing-word {
color: #8DCC21;
}
.typing-cursor {
display: inline-block;
margin-left: 4px;
color: #00000;
font-weight: 400;
animation: blink-cursor 0.75s infinite;
}
@keyframes blink-cursor {
0%, 45% {
opacity: 1;
}
46%, 100% {
opacity: 0;
}
}
@media (max-width: 600px) {
.typing-hero {
padding: 25px 15px;
}
.typing-hero h1 {
font-size: 42px;
}
}
</style>
<script>
(function () {
const typingWord = document.getElementById("typing-word");
const words = [
"Global HR & Recruitment",
"Immigration Support",
"Study Abroad",
"Test Preparation"
];
let wordIndex = 0;
let characterIndex = 0;
let deleting = false;
const typingSpeed = 110;
const deletingSpeed = 70;
const pauseAfterTyping = 1800;
const pauseAfterDeleting = 500;
function typeEffect() {
const currentWord = words[wordIndex];
if (!deleting) {
typingWord.textContent = currentWord.substring(
0,
characterIndex + 1
);
characterIndex++;
if (characterIndex === currentWord.length) {
deleting = true;
setTimeout(typeEffect, pauseAfterTyping);
return;
}
setTimeout(typeEffect, typingSpeed);
} else {
typingWord.textContent = currentWord.substring(
0,
characterIndex - 1
);
characterIndex--;
if (characterIndex === 0) {
deleting = false;
wordIndex = (wordIndex + 1) % words.length;
setTimeout(typeEffect, pauseAfterDeleting);
return;
}
setTimeout(typeEffect, deletingSpeed);
}
}
typeEffect();
})();
</script><!-- Animated Typing Headline -->
<div class="typing-hero">
<h1>
A Partner For <br>
Integrated Solutions<br>
OO <span id="typing-word"></span><span class="typing-cursor">|</span>
</h1>
</div>
<style>
.typing-hero {
padding: 40px 20px;
background: transparent;
}
.typing-hero h1 {
margin: 0;
color: #111111;
font-family: Arial, Helvetica, sans-serif;
font-size: clamp(36px, 6vw, 80px);
font-weight: 700;
line-height: 1.08;
letter-spacing: -1px;
}
#typing-word {
color: #8DCC21;
}
.typing-cursor {
display: inline-block;
margin-left: 4px;
color: #f15a24;
font-weight: 400;
animation: blink-cursor 0.75s infinite;
}
@keyframes blink-cursor {
0%, 45% {
opacity: 1;
}
46%, 100% {
opacity: 0;
}
}
@media (max-width: 600px) {
.typing-hero {
padding: 25px 15px;
}
.typing-hero h1 {
font-size: 42px;
}
}
</style>
<script>
(function () {
const typingWord = document.getElementById("typing-word");
const words = [
"Global HR & Recruitment",
"Immigration Support",
"Study Abroad",
"Test Preparation"
];
let wordIndex = 0;
let characterIndex = 0;
let deleting = false;
const typingSpeed = 110;
const deletingSpeed = 70;
const pauseAfterTyping = 1800;
const pauseAfterDeleting = 500;
function typeEffect() {
const currentWord = words[wordIndex];
if (!deleting) {
typingWord.textContent = currentWord.substring(
0,
characterIndex + 1
);
characterIndex++;
if (characterIndex === currentWord.length) {
deleting = true;
setTimeout(typeEffect, pauseAfterTyping);
return;
}
setTimeout(typeEffect, typingSpeed);
} else {
typingWord.textContent = currentWord.substring(
0,
characterIndex - 1
);
characterIndex--;
if (characterIndex === 0) {
deleting = false;
wordIndex = (wordIndex + 1) % words.length;
setTimeout(typeEffect, pauseAfterDeleting);
return;
}
setTimeout(typeEffect, deletingSpeed);
}
}
typeEffect();
})();
</script>