/* Add custom Js code below */ 
// JavaScript
<script>
  // Create the banner container element
  const bannerContainer = document.createElement('div');
  bannerContainer.className = 'banner';
  bannerContainer.style.position = 'relative';
  bannerContainer.style.width = '100%';
  bannerContainer.style.height = '200px'; /* Adjust the height as needed */
  
  // Create the banner image element
  const bannerImage = document.createElement('img');
  bannerImage.src = 'https://www.raed.net/img?id=569242.gif';
  bannerImage.alt = 'Banner';
  bannerImage.style.position = 'absolute';
  bannerImage.style.top = '0';
  bannerImage.style.left = '0';
  bannerImage.style.width = '100%';
  bannerImage.style.height = '100%';
  bannerImage.style.objectFit = 'cover';
  bannerImage.style.animation = 'slide 10s infinite'; /* Adjust the animation duration as needed */
  
  // Append the image to the container
  bannerContainer.appendChild(bannerImage);
  
  // Append the container to the body or any other desired parent element
  document.body.appendChild(bannerContainer);
  
  // Define the slide animation
  const slideAnimation = `@keyframes slide {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-100%);
    }
  }`;
  
  // Create a style element to hold the animation
  const styleElement = document.createElement('style');
  styleElement.textContent = slideAnimation;
  
  // Append the style element to the head of the document
  document.head.appendChild(styleElement);
</script>