{% extends "base.html" %}
{% load static %}
{% block style %}
    <link rel="stylesheet" href="{% static 'css/Home.css' %}">
{% endblock style %}
{% block content %}
<img class="img-responsive" src="{% static 'images/codetrails_logo.png' %}" alt="codetrails">

    <!-- Animation first begin -->
    <!--<div id="object"></div>-->
    <!-- Animation second -->


    <!-- Animation-2  begin-->
    <div class="animations">
        <div class="animations-container">
            <div class="ani ani-6"><svg xmlns="http://www.w3.org/2000/svg"
                    xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1024 1024">
                    <path id="followPath"
                        d="M394.1-214.9c-49.7,89.4,114.4,192.8,175.5,475.1c13,60.1,85.4,424-98.1,552.6 c-95.7,67-267.2,74.5-346.3-22.1c-70.8-86.5-49-233.9,19.2-305.2c102.4-107,353.9-89.1,593.2,96.5c139.6,107,294.1,258.4,415,468.6 c19.2,33.5,36.6,66.6,52.3,99.3c13,8.6,34,19.5,53.3,13.2c148-48.6,165.1-1094.5-338.5-1374.8C723.7-320.8,449-313.8,394.1-214.9z">
                    </path>
                    <path id="dashedPath"
                        d="M394.1-214.9c-49.7,89.4,114.4,192.8,175.5,475.1c13,60.1,85.4,424-98.1,552.6 c-95.7,67-267.2,74.5-346.3-22.1c-70.8-86.5-49-233.9,19.2-305.2c102.4-107,353.9-89.1,593.2,96.5c139.6,107,294.1,258.4,415,468.6 c19.2,33.5,36.6,66.6,52.3,99.3c13,8.6,34,19.5,53.3,13.2c148-48.6,165.1-1094.5-338.5-1374.8C723.7-320.8,449-313.8,394.1-214.9z">
                    </path>
                    <path id="airplain" d="M8.04 84L92 48 8.04 12 8 40l60 8-60 8z">
                        <animateMotion xlink:href="#airplain" dur="6s" fill="freeze" repeatCount="indefinite"
                            rotate="auto">
                            <mpath xlink:href="#followPath"></mpath>
                        </animateMotion>
                    </path>
                </svg></div>

            <div class="ani ani-6 ani-6-pos"><svg xmlns="http://www.w3.org/2000/svg"
                    xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1024 1024">
                    <path id="followNewPath"
                        d="M394.1-214.9c-49.7,89.4,114.4,192.8,175.5,475.1c13,60.1,85.4,424-98.1,552.6 c-95.7,67-267.2,74.5-346.3-22.1c-70.8-86.5-49-233.9,19.2-305.2c102.4-107,353.9-89.1,593.2,96.5c139.6,107,294.1,258.4,415,468.6 c19.2,33.5,36.6,66.6,52.3,99.3c13,8.6,34,19.5,53.3,13.2c148-48.6,165.1-1094.5-338.5-1374.8C723.7-320.8,449-313.8,394.1-214.9z">
                    </path>
                    <path id="dashedPath"
                        d="M394.1-214.9c-49.7,89.4,114.4,192.8,175.5,475.1c13,60.1,85.4,424-98.1,552.6 c-95.7,67-267.2,74.5-346.3-22.1c-70.8-86.5-49-233.9,19.2-305.2c102.4-107,353.9-89.1,593.2,96.5c139.6,107,294.1,258.4,415,468.6 c19.2,33.5,36.6,66.6,52.3,99.3c13,8.6,34,19.5,53.3,13.2c148-48.6,165.1-1094.5-338.5-1374.8C723.7-320.8,449-313.8,394.1-214.9z">
                    </path>
                    <path id="newAirplain" d="M8.04 84L92 48 8.04 12 8 40l60 8-60 8z">
                        <animateMotion xlink:href="#newAirplain" dur="6s" fill="freeze" repeatCount="indefinite"
                            rotate="auto">
                            <mpath xlink:href="#followNewPath"></mpath>
                        </animateMotion>
                    </path>
                </svg></div>

        </div>
    </div>

    <!-- Animation-2 end -->
{% endblock content %}
{% block script %}
{% endblock script %}