{% extends 'layout.html' %}
{% load static %}

{% block body %}
    <!-- splash -->
     <div id="splash" class="fullscreen">
        {% for img in content %}
            <img class="img-fluid" src="{{ img.landing_image.url }}">
        {% endfor %}
        <img src="{% static 'info/media/logo.png' %}" alt="MEDRC_logo" class="img-fluid img-container">
    </div>

    <!-- Slide show -->
    <div class="banner mb-4">
        {% for img in content %}
            <div class="slides">
                <img class="img-fluid" src="{{ img.first_banner.url }}" alt="banner_pic1" style="width: 100%;">
            </div>

            <div class="slides">
                <img class="img-fluid" src="{{ img.second_banner.url }}" alt="banner_pic2" style="width: 100%;">
            </div>

            <div class="slides">
                <img class="img-fluid" src="{{ img.third_banner.url }}" alt="banner_pic3" style="width: 100%;">
            </div>
        {% endfor %}
    </div>

    <!-- Content -->
    <div class="container text-center mb-3">
        <div class="row">
            <div class="col">
                <a class="water wep-landing-text" href="{% url 'info:water'%}">Water</a>
            </div>
            <div class="col">
                <a class="environment wep-landing-text" href="{% url 'info:environment'%}">Environment</a>
            </div>
            <div class="col">
                <a class="peace wep-landing-text" href="{% url 'info:peace'%}">Peace</a>
            </div>
        </div>
    </div>
{% endblock %}