<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box;}

.mySlides {display: none; }
.img {vertical-align: middle; height:300px;  width:100%; }

/* Slideshow container */
.slideshow-container { 
  width:100%;  
  position: relative;
  margin: auto;
}

/* Caption text */
.text { background:white; font-size:medium;  padding:15px;  position: absolute;  bottom: 0%;  width: 98%;  text-align:left;  opacity: .8; margin-left:1%;  border-top: 2px solid  #006A4E;  color:#006A4E; font-weight: bold;}
/* The dots/bullets/indicators */
.dot { height:5px;  width: 5px;  margin-bottom:2px;
  background-color:#FFAA1D;  border-radius: 50%;  display: inline-block;  transition: background-color 0.6s ease;}

.active {  background-color: #006A4E; margin-top: 10px; }

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 2.5s;
  animation-name: fade;
  animation-duration: 2.5s;
}

@-webkit-keyframes fade {
  from {opacity: .6} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .6} 
  to {opacity: 1}
}
@media only screen and (max-width: 800px) {
   .text {width: 100%; margin-left:0%; }
  .text a {font-size: small;}
   .text h4 {font-size:large;}
  .img {vertical-align: middle; height:200px;}

}
</style>
</head>
<body>
<div class="slideshow-container">
 <div class='mySlides fade'>
 <img src="images/s1.jpg" class="img" />
  <nav class='text'>
<a>The Joy of our families is  when they are  enjoying  fresh fruits</a> 
</nav>
 </div>


 <div class='mySlides fade'>
 <img src="images/s2.jpg" class="img" />
<nav class='text'> 
<a>One Piece Each is enough</a> 
</nav>
 </div>


 <div class='mySlides fade'>
 <img src="images/s1.jpg" class="img" />
 <nav class='text'> 
<a>Try us today, and tomorrow you will tell our story </a>
</nav>
 </div>

 <div class='mySlides fade'>
 <img src="images/s2.jpg" class="img" />
 <nav class='text'> 
<a>Thank you for Shopping with us, We expect you back !</a>
</nav>
 </div>



</div>
<div style="text-align:center">
  <span class="dot"></span> 
  <span class="dot"></span> 
  <span class="dot"></span>
  <span class="dot"></span>
  </div>


<script>
var slideIndex = 0;
showSlides();

function showSlides() {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";  
  }
  slideIndex++;
  if (slideIndex > slides.length) {slideIndex = 1}    
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";  
  dots[slideIndex-1].className += " active";
  setTimeout(showSlides, 4000); // Change image every 2 seconds
}
</script>

</body>
</html> 
