{% extends 'base.html' %}

{% block title %}Just a Page{% endblock title %}

{% block content %}
    <header class="masthead" style="background: url(&quot;/static/img/bryan-goff-f7YQo-eYHdM-unsplash.jpg&quot;);">
        <div class="overlay"></div>
        <div class="container">
            <div class="row">
                <div class="col-md-10 col-lg-8 mx-auto position-relative">
                    <div class="site-heading">
                        <h1><strong>Just a Page</strong></h1><span class="subheading">Actually this is the home page</span>
                    </div>
                </div>
            </div>
        </div>
    </header>
    <section id="about" class="about" style="margin-top: 80px;">
        <div class="container">
            <div class="row">
                <div class="col-md-10 col-lg-8 mx-auto">
                    <h1><strong>¿WhO</strong>&nbsp;aM I</h1>
                    <p>I am 20 years old and I am studying computer science in the 4th grade of Azerbaijan Technical University.</p>
                    <p>I have been learning and using the Python programming language for over 2 years. So far I have used python in many projects mainly for developing web based applications.</p>
                </div>
            </div>
            <div class="row" style="margin-top: 50px;">
                <div class="col-md-10 col-lg-8 mx-auto">
                    <h1 style="margin-bottom: 12px;"><strong>Tools I usually use</strong></h1>
                    <div class="row" style="margin-right: -6px;padding-right: 116px;margin-bottom: 35px;">
                        <div class="col-xxl-2" style="margin-top: 10px;"><a href="https://www.python.org/" target="_blank" style="margin-right: 0;margin-top: 0;"><img src="https://img.shields.io/badge/python-3670A0?style=for-the-badge&amp;logo=python&amp;logoColor=ffdd54" alt="django" width="116" height="37"></a></div>
                        <div class="col-xxl-2" style="margin-top: 10px;"><a href="https://www.djangoproject.com/" target="_blank" style="margin-right: 0;margin-top: 0;"><img src="https://img.shields.io/badge/django-%23092E20.svg?style=for-the-badge&amp;logo=django&amp;logoColor=white" alt="django" width="116" height="37"></a></div>
                        <div class="col" style="margin-top: 10px;"><a href="https://www.django-rest-framework.org/" target="_blank" style="margin-right: 0;margin-top: 0;"><img src="https://img.shields.io/badge/DJANGO-REST-ff1709?style=for-the-badge&amp;logo=django&amp;logoColor=white&amp;color=ff1709&amp;labelColor=gray" alt="django-rest framework" width="161" height="37"></a></div>
                        <div class="col" style="margin-top: 10px;"><a href="https://www.postman.com/" target="_blank" style="margin-right: 0;margin-top: 0;"><img src="https://img.shields.io/badge/Postman-FF6C37?style=for-the-badge&amp;logo=postman&amp;logoColor=white" alt="django" width="127" height="37"></a></div>
                        <div class="col" style="margin-top: 10px;"><a href="https://selenium-python.readthedocs.io/" target="_blank" style="margin-right: 0;margin-top: 0;"><img src="https://img.shields.io/badge/-selenium-%43B02A?style=for-the-badge&amp;logo=selenium&amp;logoColor=white" alt="selenium" width="132" height="37"></a></div>
                    </div>
                    <div class="row" style="margin-right: -6px;padding-right: 116px;margin-bottom: 35px;">
                        <div class="col-xxl-2" style="margin-top: 10px;"><a href="https://pandas.pydata.org/" target="_blank" style="margin-right: 0;margin-top: 0;"><img src="https://img.shields.io/badge/pandas-%23150458.svg?style=for-the-badge&amp;logo=pandas&amp;logoColor=white" alt="pandas" width="116" height="37"></a></div>
                        <div class="col-xxl-2" style="margin-top: 10px;"><a href="https://numpy.org/" target="_blank" style="margin-right: 0;margin-top: 0;"><img src="https://img.shields.io/badge/numpy-%23013243.svg?style=for-the-badge&amp;logo=numpy&amp;logoColor=white&quot; alt=&quot;numpy" alt="numpy" width="119" height="37"></a></div>
                        <div class="col" style="margin-top: 10px;"><a href="https://streamlit.io/" target="_blank" style="margin-right: 0;margin-top: 0;"><img src="https://img.shields.io/badge/Streamlit-%23D00000.svg?style=for-the-badge&amp;logoColor=white" alt="streamlit" width="116" height="37"></a></div>
                    </div>
                    <div class="row" style="margin-right: -6px;padding-right: 116px;">
                        <div class="col-xxl-2" style="margin-top: 10px;"><a href="https://www.docker.com/" target="_blank" style="margin-right: 0;margin-top: 0;"><img src="https://img.shields.io/badge/docker-%230db7ed.svg?style=for-the-badge&amp;logo=docker&amp;logoColor=white" alt="docker" width="116" height="37"></a></div>
                        <div class="col-xxl-2" style="margin-top: 10px;"><a href="https://www.postgresql.org/" target="_blank" style="margin-right: 0;margin-top: 0;"><img src="https://img.shields.io/badge/postgres-%23316192.svg?style=for-the-badge&amp;logo=postgresql&amp;logoColor=white" alt="postgres" width="121" height="37"></a></div>
                        <div class="col-xxl-2" style="margin-top: 10px;"><a href="https://www.nginx.com/" target="_blank" style="margin-right: 0;margin-top: 0;"><img src="https://img.shields.io/badge/nginx-%23009639.svg?style=for-the-badge&amp;logo=nginx&amp;logoColor=white" alt="nginx" width="116" height="37"></a></div>
                        <div class="col-xxl-2" style="margin-top: 10px;"><a href="https://aws.amazon.com/" target="_blank" style="margin-right: 0;margin-top: 0;"><img src="https://img.shields.io/badge/AWS-%23FF9900.svg?style=for-the-badge&amp;logo=amazon-aws&amp;logoColor=white" alt="AWS" width="105" height="37"></a></div>
                        <div class="col" style="margin-top: 10px;"><a href="https://ubuntu.com/" target="_blank" style="margin-right: 0;margin-top: 0;"><img src="https://img.shields.io/badge/Ubuntu-E95420?style=for-the-badge&amp;logo=ubuntu&amp;logoColor=white" alt="django" width="126" height="37"></a></div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section id="contact" class="contact" style="margin-top: 150px;margin-bottom: 20px;">
        <div class="container">
            <div class="row">
                <div class="col-md-10 col-lg-8 mx-auto">
                    <h1>Contact me</h1>
                    <p>Want to get in touch? Fill out the form below to send me a message and I will get back to you as soon as possible!</p>
                    <form action="/send-email" method="POST" id="contactForm" name="sentMessage">
                        <div class="control-group">
                            <div class="form-floating controls mb-3"><input name="name" class="form-control" type="text" id="name" required maxlength="50" placeholder="Name"><label class="form-label" for="name">Name</label><small class="form-text text-danger help-block"></small></div>
                        </div>
                        <div class="control-group">
                            <div class="form-floating controls mb-3"><input class="form-control" name="email" type="email" id="email" required placeholder="Email Address"><label class="form-label">Email Address</label><small class="form-text text-danger help-block"></small></div>
                        </div>
                        <div class="control-group">
                            <div class="form-floating controls mb-3"><input class="form-control" name="phone" type="tel" id="phone" maxlength="20" placeholder="Phone Number"><label class="form-label">Phone Number</label><small class="form-text text-danger help-block"></small></div>
                        </div>
                        <div class="control-group">
                            <div class="form-floating controls mb-3"><textarea class="form-control" name="message" id="message" maxlength="1000" data-validation-required-message="Please enter a message." required="" placeholder="Message" style="height: 150px;"></textarea><label class="form-label">Message</label><small class="form-text text-danger help-block"></small></div>
                        </div>
                        <div id="success"></div>
                        <div class="mb-3"><button class="btn btn-primary" id="sendMessageButton" type="submit">Send</button></div>
                    </form>
                </div>
            </div>
        </div>
    </section>
{% endblock content %}