{% 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">
        <div class="container">
            <div class="logo">
                <a href="/home">
                    <img src="{% static 'img/logo.png' %}" alt="">
                </a>
            </div>
            <div class="nav-menu">
                <nav class="mainmenu mobile-menu">
                    <ul>
                        <li class="active"><a href="/home">Home</a></li>
                        <li><a href="/macros">Track Macros/Calories</a></li>
                        <li><a href="/meals">Meals</a></li>
                        <li><a href="/exercises">Exercises</a></li>
                        <li><a href="/weight">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">
        <div class="container">
            <div class="row">
                <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>
                        <a href="#" class="primary-btn">Read More</a>
                    </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>
                                    <p>Aenean massa. Cum sociis Theme et natoque penatibus et magnis dis part urient
                                        montes.</p>
                                </div>
                                <div class="services-item bg-gray pd-b">
                                    <img src="{% static 'img/services/service-icon-3.png' %}" alt="">
                                    <h4>Caloric Intake Calculator</h4>
                                    <p>Aenean massa. Cum sociis Theme et natoque penatibus et magnis dis part urient
                                        montes.</p>
                                </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>
                                    <p>Aenean massa. Cum sociis Theme et natoque penatibus et magnis dis part urient
                                        montes.</p>
                                </div>
                                <div class="services-item pd-b">
                                    <img src="{% static 'img/services/service-icon-4.png' %}" alt="">
                                    <h4>Body Weight Tracker</h4>
                                    <p>Aenean massa. Cum sociis Theme et natoque penatibus et magnis dis part urient
                                        montes.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- Services Section End -->

    <!-- Classes Section Begin -->
    <section class="classes-section spad">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="section-title">
                        <a href="/register" class="primary-btn">Register Now!</a>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- Classes Section End -->

    <!-- Footer Section Begin -->
    <footer class="footer-section">
        <div class="container">
            <div class="row">
                <div class="col-md-4">
                    <div class="contact-option">
                        <span>Phone</span>
                        <p>(123) 118 9999 - (123) 118 9999</p>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="contact-option">
                        <span>Address</span>
                        <p>72 Kangnam, 45 Opal Point Suite 391</p>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="contact-option">
                        <span>Email</span>
                        <p>contactcompany@Gutim.com</p>
                    </div>
                </div>
            </div>
            <div class="copyright-text">
                <ul>
                    <li><a href="#">Term&Use</a></li>
                    <li><a href="#">Privacy Policy</a></li>
                </ul>
                <div class="footer-social">
                    <a href="#"><i class="fa fa-facebook"></i></a>
                    <a href="#"><i class="fa fa-twitter"></i></a>
                    <a href="#"><i class="fa fa-instagram"></i></a>
                    <a href="#"><i class="fa fa-dribbble"></i></a>
                </div>
            </div>
        </div>
    </footer>
    <!-- Footer 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>