interactive HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
<title>HTML5 Company presentation</title>
<style>
* {
box-sizing:border-box;
margin: 0;
padding:0;
}
html, body{
height:100%;
font-family: 'Segoe UI',sans-serif;
overflow: hidden;
background:#000; /*fallback background*/
}
.presentation{
width:100vw;
height:100vh;
position:relative;
}
/*SLEDE BASE STYLING*/
.slide{
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
padding:50px 30px;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
opacity:0;
transition:opacity 0.65 ease;
pointer-events:center;
text-align:center;
color:white;
background-size:coner;
background-position:center;
/*INDIRIDUAL SLIDE BACKROUNDS*/
}
.slide:nth-child(1){
background:linear-gradient(135deg,#1e3c72,#2a5298);
}
.slide:nth-child(2){
background:linear-gradient(135deg,#ff6a00,#ee0979);
}
.slide:nth-child(3){
background:linear-gradient(135deg,#43cea2,#185a9d);
}
slide:nth-child(4){
background:linear-gradient(135deg,#614385,#516395);
}
.slide.active {
opacity: 1;
pointer-events: auto;
}
h1,h2{
color: #ffffff;
margin-bottom: 20px;
text-shadow:1px 1px 4px raba(0,0,0,0.4);
}
h1{
font-size: 3rem;
}
h2{
font-size: 2.2rem;
}
p{
color:#f0f0f0;
max-width:750;
font-size:1.2rem;
line-height:1.7;
margin-bottom:20px;
}
.slide ul{
margin-top:20px;
list-style:none;
padding-left:0;
}
slide ul li {
font-family:1.2rem;
margin-bottom:12px;
position:relative;
padding-left:28px;
color:#fff;
}
.slide ul li::before{
content:'✔';
position:absolute;
left:0;
color:#fff700;
font-weight:bold;
font-size:11.2rem;
}
/*NAVIGA TION BUTTONS8*/
.controls{
position:absolute;
bottom:40px;
left:50%;
transform:translateX(-50%);
display:flex;
gap:20px;
z-index:10;
}
button {
padding: 12px 28px;
background: rgba(255, 255, 255, 0.15);
color: #ffffff;
border: 2px solid #ffffff;
border-radius: 30px;
font-size: 1rem;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease;
backdrop-filter: blur(5px);
}
button:hover{
background-color: #ffffff;
color: #000000
}
/*reponsine style*/
@media (max-width: 600px)
{
hl{
font-family:2rem;
}
h2{
font-size: 1.5rem;
}
p,ul li {
font-size:1rem;
}
button{
padding:10px;
font-size:00.9rem;
}
}
</style>
</head>
<body>
<div class="presentation" id="presentation">
<section class="slide active">
<h1>Welcame TO Code CodeWave </h1>
<p>we create custom HTML5 solutions that help businesses present and return new Promise their services clearly,professionally,
and beautifully</p>
</section>
<section class="slide">
<h1>about us</h1>
<p>codewave is font-end development agency specializing in clean code ,responsive design, user-focused HTML presentations
</p>
</section>
<section class="slide">
<h2>our Services</h2>
<ul>
<li>HTML5 /CSS3 presentation</li>
<li>Responsive WEB Design</li>
<li>JavaScript UI Enhancements</li>
<li>Fast Turnaround Time</li>
</ul>
</section>
<section class="slide">
<h2>Let's work Together></h2>
<p>Need a presentation like this one? we'r ready to build your next one - or upgrade your current design</p>
<p><strong>Email:</strong>hello@CodeWave</p>
</section>
<div class="controls">
<button id="prevBtn">Previous</button>
<button id="nextBtn">Next</button>
</div>
</div>
<script>
const slides = document.querySelectorAll('.slide');
let currentIndex = 0;
function showSlide(index) {
slides.forEach((slide, i) => {
slide.classList.toggle('active', i === index);
});
}
document.getElementById('nextBtn').addEventListener('click', () => {
currentIndex = (currentIndex + 1) % slides.length;
showSlide(currentIndex);
});
document.getElementById('prevBtn').addEventListener('click', () => {
currentIndex = (currentIndex - 1 + slides.length) % slides.length;
showSlide(currentIndex);
});
document.addEventListener('keydown', (e) => {
if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
currentIndex = (currentIndex + 1) % slides.length;
showSlide(currentIndex);
}
if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
currentIndex = (currentIndex - 1 + slides.length) % slides.length;
showSlide(currentIndex);
}
});
</script>
</body>
</html>
Please sign in to leave a comment.
Comments
2 comments