PNG IHDR x sBIT|d pHYs + tEXtSoftware www.inkscape.org< ,tEXtComment
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ACHIEVERS ITECH Presentation</title>
<style>
body, html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.slide {
position: absolute;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
transition: opacity 1s;
opacity: 0;
}
.slide.active {
opacity: 1;
}
.content {
text-align: center;
max-width: 80%;
}
.logo {
position: absolute;
bottom: 20px;
right: 20px;
width: 100px;
height: auto;
}
@keyframes flyIn {
from { transform: translateY(100%); }
to { transform: translateY(0); }
}
.fly-in {
animation: flyIn 1s forwards;
}
</style>
</head>
<body>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAAA3NCSVQICAjb4U/gAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAs1BMUEsFBgAAAAABAAEASAAAAEscuwKxUAAAAlUlEQVQI12P4n/3/AQMAxj2z4QAAAABJRU5ErkJggg==" alt="ACHIEVERS ITECH Logo" class="logo">
<div class="slide active">
<div class="content">
<h1>ACHIEVERS ITECH</h1>
<p>Website Design Course</p>
</div>
</div>
<div class="slide">
<div class="content fly-in">
<h2>Building Achievers Who Design With Purpose</h2>
</div>
</div>
<div class="slide">
<div class="content fly-in">
<h2>Our Philosophy</h2>
<p>At ACHIEVERS ITECH, website design is not treated as typing code.</p>
<p>It is treated as thinking, structure, and intention.</p>
<blockquote>“Design is not just what it looks like and feels like. Design is how it works.” — Steve Jobs</blockquote>
</div>
</div>
<div class="slide">
<div class="content fly-in">
<h2>Course Duration</h2>
<p>1.5 Months (6 Weeks)</p>
</div>
</div>
<div class="slide">
<div class="content fly-in">
<h2>Course Vision</h2>
<p>To introduce learners to website design as a craft, where every tag, section, color, and motion exists for a reason.</p>
</div>
</div>
<div class="slide">
<div class="content fly-in">
<h2>What This Course Builds</h2>
<ul>
<li>Understand how websites are structured</li>
<li>Use HTML tags correctly and meaningfully</li>
<li>Design clean layouts using CSS</li>
<li>Add motion and simple interactions responsibly</li>
<li>Build a complete website from start to finish</li>
</ul>
</div>
</div>
<!-- Add more slides here -->
<script>
let currentSlide = 0;
const slides = document.querySelectorAll('.slide');
const totalSlides = slides.length;
function showSlide(index) {
slides.forEach((slide, i) => {
slide.classList.toggle('active', i === index);
slide.querySelector('.content').classList.toggle('fly-in', i === index);
});
currentSlide = index;
}
function nextSlide() {
if (currentSlide < totalSlides - 1) {
showSlide(currentSlide + 1);
} else {
showSlide(0);
}
}
document.addEventListener('keydown', (event) => {
if (event.code === 'ArrowRight' || event.code === 'Space') {
nextSlide();
}
});
showSlide(currentSlide);
</script>
</body>
</html>
b IDATxytVսϓ22 A@IR:hCiZ[v*E:WũZA ^dQeQ @ !jZ'>gsV仿$|?g)&x-E