{% load static %}
<!DOCTYPE html>
<html lang="zxx">
    

<head>
    <meta charset="UTF-8">
    <meta name="description" content="Gutim Template">
    <meta name="keywords" content="Gutim, unica, creative, html">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>GymBuddy</title>
    
    <!-- Google Font -->
    <link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800,900&display=swap"
        rel="stylesheet">
    
    <!-- Css Styles -->
    <!-- <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}" type="text/css"> 
     <link rel="stylesheet" href="{% static 'css/font-awesome.min.css' %}" type="text/css">
    <link rel="stylesheet" href="{% static 'css/owl.carousel.min.css' %}" type="text/css">
    <link rel="stylesheet" href="{% static 'css/magnific-popup.css' %}" type="text/css">
    <link rel="stylesheet" href="{% static 'css/slicknav.min.css' %}" type="text/css"> -->
    <link rel="stylesheet" href="{% static 'css/style.css' %}" type="text/css"> 
</head>


<body style="background-color:grey;" >
    

    <!-- Header Section Begin -->
    <header class="header-section" style="margin-left: 3.5%;">
        <div>
            <div class="logo" style="margin-left: 120px;">
                <a href="/home">
                    <img src="{% static 'img/logo2.png' %}" alt="">
                </a>
            </div>
            <div class="nav-menu" style="float: left; margin-left: 11px; margin-top: 45px; margin-right: 0%; padding-right: 0%;">
                <nav class="mainmenu mobile-menu" style= "font-size: smaller;">
                    <ul>
                        <li class="active"><a href="/home" style= "font-size: 17px;">Home</a></li>
                        <li><a href="/macros" style= "font-size: 17px;">Track Macros/Calories</a></li>
                        <li><a href="/meals" style= "font-size: 17px;">Meals</a></li>
                        <li><a href="/exercises" style= "font-size: 17px;">Exercises</a></li>
                        <li><a href="/weight" style= "font-size: 17px;">Track Your Weight</a></li>
                    </ul>
                </nav>
                {% if loggedIn %}
                    <a href="/profile" class="primary-btn">Profile</a>
                    <a href="/logout" class="primary-btn">Logout</a>
                {% endif %}
                {% if not loggedIn %}
                    <a href="/register" class="primary-btn">Register</a>
                    <a href="/login" class="primary-btn">Sign In</a>
                {% endif %}
            </div>
            <div id="mobile-menu-wrap"></div>
        </div>
    </header>
    <!-- Header End -->
    
    <!-- About Section Begin -->
    <section class="about-section spad" style="margin-top: 50px;">
        <div class="container">
            <div class="row">
                <img src="{% static 'img/about-pic.jpg' %}" alt="" style=" margin-top: 20px; float: left; margin-left: 50px; margin-right: 50px;">
                <div class="col-lg-6" style="float: right; margin-left: 50px;">
                </div>
                
                <div class="col-lg-6">
                    <div class="about-pic">
                        <!-- <img src="{% static 'img/about-pic.jpg' %}" alt="" > -->
                        <a href="https://www.youtube.com/watch?v=s3oDv6M6Fb0&feature=youtu.be&ab_channel=RyanAhmed" class="play-btn video-popup">
                            <img src="{% static 'img/play.png' %}" alt="">
                        </a>
                    </div>
                </div>
                <div class="col-lg-6" >
                    <div class="about-text">
                        <h2 style="color:white;" >Story About Us </h2>
                        <p class="first-para" style="color:white;">We are a group of College Students studying Computer Science at the University of Florida. 
                            We all share a strong passion for both mental and physical health/fitness, as well as helping others upgrade and become the best versions of themselves.
                        </p>    
                        <p class="second-para" style="color:white;">In the past, we have all shared similar struggles in finding a coherent application to track various aspects of our health. 
                            Therefore, we decided to come together and create an "all in one" application that tracks bodyweight, lifts, macros, and calories, suggest workout plans and caloric intake per day,
                            and more all personalized to the individual!
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- About Section End -->
    
    <!-- Services Section Begin -->
    <section class="services-section">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-6">
                    <div class="services-pic">
                        <img src="{% static 'img/services/service-pic.jpg' %}" alt="">
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="service-items">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="services-item bg-gray" >
                                    <img src="{% static 'img/services/service-icon-1.png' %}" alt="">
                                    <h4>Macros and Calorie Tracker</h4>
                                    <ul style="color:white; margin-left: 20px;">
                                        <li>Here at GymBuddy, you will be able to track Carbohydrates, Fats, Protein, Calories! </li>
                                        <li>The dates you enter will be automatically updated to keep you accountable! </li>
                                        <li>We also implmented a webscraper to provide a database for you to look up different foods nutritional information without the need for you to input manually. How convenient!</li>
                                        <li>You will also be able to better visualize your progress in the form of graphs and charts on the profile tab! </li>
                                    </ul>
                                </div>
                                <img src="{% static 'img/foodWide.jpeg' %}" alt="" style=" width: 100%; margin-bottom: 0%;">
                                <div class="services-item bg-gray pd-b">
                                    <img src="{% static 'img/services/service-icon-3.png' %}" alt="">
                                    <h4>Healthy Meals Database</h4>
                                    <ul style="color:white; margin-left: 20px;">
                                        <li>Here at GymBuddy, you will be able to browse our grand selection of various healthy meals to inspire your meal preps! </li>
                                        <li>Each meal provides instructions, ingredients, as well as tags for easy filtering! </li>
                                    </ul>
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="services-item">
                                    <img src="{% static 'img/services/service-icon-2.png' %}" alt="">
                                    <h4>Lifts Tracker and Strengths Comparison</h4>
                                    <ul style="color:white; margin-left: 20px;">
                                        <li>Here at GymBuddy, you will be able to log the weights of your lifts as well as a variety of other exercises over time to keep track of improvments and progress! </li>
                                        <li>We also provide a huge catalog of different exercises for you to pick and crate a workout routine! We provide a filter option to help you find specific exercises and muscles groups to focus on! </li>    
                                        <li>You will also be able to better visualize your progress in the form of graphs and charts on the profile tab! </li>
                                    </ul>
                                </div>
                                <img src="{% static 'img/gymWide.jpg' %}" alt="" style="float: left; width: 25%; margin-bottom: 0%;">
                                <img src="{% static 'img/gymWide.jpg' %}" alt="" style="float: left; width: 25%; margin-bottom: 0%;">
                                <img src="{% static 'img/gymWide.jpg' %}" alt="" style="float: left; width: 25%; margin-bottom: 0%;">
                                <img src="{% static 'img/gymWide.jpg' %}" alt="" style=" width: 25%; margin-bottom: 0%;">
                                <div class="services-item pd-b">
                                    <img src="{% static 'img/services/service-icon-4.png' %}" alt="">
                                    <h4>Body Weight Tracker</h4>
                                    <ul style="color:white; margin-left: 20px;">
                                        <li>Here at GymBuddy, you will be able to log your weights over time to keep track of improvments and progress! </li>
                                        <li>You will also be able to better visualize your progress in the form of graphs and charts on the profile tab! </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- Services Section End -->


    <!-- Js Plugins -->
    <!-- <script src="{% static 'js/jquery-3.3.1.min.js' %}"></script>
    <script src="{% static 'js/bootstrap.min.js' %}"></script>
    <script src="{% static 'js/jquery.magnific-popup.min.js' %}"></script>
    <script src="{% static 'js/mixitup.min.js' %}"></script>
    <script src="{% static 'js/jquery.slicknav.js' %}"></script>
    <script src="{% static 'js/owl.carousel.min.js' %}"></script>
    <script src="{% static 'js/main.js' %}"></script> -->
</body>

</html>