Untitled Paste

Created 27 days ago 12 views Javascript
Raw
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>iPhone 17 Pro Max Birthday Slideshow</title>
<style>
  html, body { width:100%; height:100%; margin:0; overflow:hidden; font-family:Arial, sans-serif; }
  .slide { position:absolute; top:0; left:0; width:100%; height:100%; background-color:#DCEBFF; color:#1E5BFF; font-size:48px; font-weight:bold; text-align:left; padding:50px; box-sizing:border-box; opacity:0; transition:opacity 1s ease-in-out;}
  .slide.active { opacity:1; }
  .slide-content { position:relative; left:-100px; transition:left 1s ease-in-out; }
  .slide.active .slide-content { left:0; }
  .emoji { position:absolute; right:-150px; top:50%; transform:translateY(-50%); font-size:80px; transition:right 1s ease-in-out; }
  .slide.active .emoji { right:50px; }
  .byline { position:absolute; bottom:50px; left:50px; font-size:32px; font-weight:normal; }
</style>
</head>
<body>

<div class="slide active">
  <div class="slide-content">Why I Should Have an iPhone 17 Pro Max</div>
  <div class="emoji">📱</div>
  <div class="byline">By Rhett</div>
</div>

<div class="slide">
  <div class="slide-content">I will take very much care of it</div>
  <div class="emoji">🥰📱</div>
</div>

<div class="slide">
  <div class="slide-content">It would make me really happy</div>
  <div class="emoji">😄📱</div>
</div>

<div class="slide">
  <div class="slide-content">I will never get it stolen</div>
  <div class="emoji">🔒📱</div>
</div>

<div class="slide">
  <div class="slide-content">That’s why I should have an iPhone 17 Pro Max for my birthday</div>
  <div class="emoji">😊📱</div>
</div>

<script>
let currentSlide = 0;
const slides = document.querySelectorAll('.slide');

function showSlide(index) {
  slides.forEach(s => s.classList.remove('active'));
  slides[index].classList.add('active');
}

function nextSlide() {
  currentSlide = (currentSlide + 1) % slides.length;
  showSlide(currentSlide);
}

// Start on first slide
showSlide(0);

// Automatically change every 15 seconds
setInterval(nextSlide, 15000);
</script>

</body>
</html>
JAVASCRIPT
2,235 characters
Quick Actions
Create New Paste Open Raw
<