{% extends 'base.html' %}
{% load static %}
{% block title %}
iTRANS Menu
{% endblock %}
{% block style %}
.content{
  position: absolute;
  top: 80px;
  z-index: -1;
  align-items: center;
  height: 100%;
  width: 100%;
  background-position: center center;
  background-size: cover;
  z-index: -1;
}
#img1{
  position: absolute;
  animation: xfade 15s -0s infinite;
  animation-timing-function: ease-in-out;
}

#img2{
  position: absolute;
  animation: xfade 15s -5s infinite;
  animation-timing-function: ease-in-out;
}

#img3{
  position: absolute;
  animation: xfade 15s -10s infinite;
  animation-timing-function: ease-in-out;
}
@keyframes xfade {
   0% {opacity: 0;}
    20% {opacity: 1;}
    33% {opacity: 1;}
    53% {opacity: 0;}
    100% {opacity: 0;}
}
{% endblock %}
{% block content %}
<div class="content">
          <img class="img-fluid" id="img1" src="{% static 'itrans.jpg' %}" alt="photo">
          <img class="img-fluid" id="img2" src="{% static 'itrans1.jpg' %}" alt="photo">
          <img class="img-fluid" id="img3" src="{% static 'itrans2.jpg' %}" alt="photo">
</div>
{% endblock %}