John cabot

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>John Cabot Presentation</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
      background-color: #f0f0f0;
    }
    .slide {
      display: none;
      text-align: center;
      padding: 50px;
    }
    img {
      max-width: 100%;
      height: auto;
    }
    button {
      padding: 10px 20px;
      font-size: 16px;
      background-color: #4CAF50;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }
  </style>
</head>
<body>

<div class="slide" id="slide1">
  <h1>John Cabot</h1>
  <img src="john_cabot.jpg" alt="John Cabot">
  <p>John Cabot (Giovanni Caboto) was an Italian explorer who discovered parts of North America in 1497, including the coast of Newfoundland.</p>
</div>

<div class="slide" id="slide2">
  <h1>Exploration Route</h1>
  <img src="exploration_route.jpg" alt="Exploration Route">
  <p>Cabot's exploration route led him from Europe to the coast of North America, contributing to the European exploration and colonization of the New World.</p>
</div>

<!-- Add more slides as needed -->

<button onclick="prevSlide()">Previous</button>
<button onclick="nextSlide()">Next</button>

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

  function showSlide(slideIndex) {
    slides.forEach((slide, index) => {
      if (index === slideIndex) {
        slide.style.display = 'block';
      } else {
        slide.style.display = 'none';
      }
    });
  }

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

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

  // Show the first slide initially
  showSlide(currentSlide);
</script>

</body>
</html>
Editor is loading...