<!DOCTYPE html>
<html>
<head>
	<title>Green Food</title>
	<link rel="shortcut icon" href="images/logo.png" type="image/x-icon">

	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
	<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<section>

	<div id="header">
		<img src="images/logo.png" height="80px" />
	</div>
	<div class="topnav" id="myTopnav">
	  <a href="index.php" class="active">Home</a>
	  <a href="registration.php">Registration</a>
	  <a href="animation.php">Animation</a>
	  <a href="javascript:void(0);" class="icon" onclick="myFunction()">
		<i class="fa fa-bars"></i>
	  </a>
	</div>

	<div class="container">
	  <div class="mySlides">
		<div class="numbertext">1 / 6</div>
		<img src="images/slide/A.jpg" style="width:100%">
	  </div>

	  <div class="mySlides">
		<div class="numbertext">2 / 6</div>
		<img src="images/slide/B.jpg" style="width:100%">
	  </div>

	  <div class="mySlides">
		<div class="numbertext">3 / 6</div>
		<img src="images/slide/C.jpg" style="width:100%">
	  </div>
		
	  <div class="mySlides">
		<div class="numbertext">4 / 6</div>
		<img src="images/slide/D.jpg" style="width:100%">
	  </div>

	  <div class="mySlides">
		<div class="numbertext">5 / 6</div>
		<img src="images/slide/E.jpg" style="width:100%">
	  </div>
		
	  <div class="mySlides">
		<div class="numbertext">6 / 6</div>
		<img src="images/slide/F.jpg" style="width:100%">
	  </div>
		
	  <a class="prev" onclick="plusSlides(-1)">❮</a>
	  <a class="next" onclick="plusSlides(1)">❯</a>

	  <div class="caption-container">
		<p id="caption"></p>
	  </div>

	  <div class="row">
		<div class="column">
		  <img class="demo cursor" src="images/slide/A.jpg" style="width:100%" onclick="currentSlide(1)" alt="Name of Iteem : A">
		</div>
		<div class="column">
		  <img class="demo cursor" src="images/slide/B.jpg" style="width:100%" onclick="currentSlide(2)" alt="Name of Iteem : B">
		</div>
		<div class="column">
		  <img class="demo cursor" src="images/slide/C.jpg" style="width:100%" onclick="currentSlide(3)" alt="Name of Iteem : C">
		</div>
		<div class="column">
		  <img class="demo cursor" src="images/slide/D.jpg" style="width:100%" onclick="currentSlide(4)" alt="Name of Iteem : D">
		</div>
		<div class="column">
		  <img class="demo cursor" src="images/slide/E.jpg" style="width:100%" onclick="currentSlide(5)" alt="Name of Iteem : E">
		</div>    
		<div class="column">
		  <img class="demo cursor" src="images/slide/F.jpg" style="width:100%" onclick="currentSlide(6)" alt="Name of Iteem : F">
		</div>
	  </div>
	</div>
	<div id="footer">
		<a href="https://www.facebook.com/" target="_blank" class="fa fa-facebook media"></a>
		<a href="https://www.google.com/" target="_blank" class="fa fa-google media"></a>
		<a href="https://www.youtube.com/" target="_blank" class="fa fa-youtube media"></a>
	</div>
</section>

<script>
function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
    x.className += " responsive";
  } else {
    x.className = "topnav";
  }
}
</script>

<script>
// Photo Slide 
var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("demo");
  var captionText = document.getElementById("caption");
  if (n > slides.length) {slideIndex = 1}
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";
  }
  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";
  captionText.innerHTML = dots[slideIndex-1].alt;
}
</script>

</body>
</html>
