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

    {% block title %}
    <title>Homepage</title>
    {% endblock %}
    
    {% block style %}
    <link rel="stylesheet" href="{% static 'css/homepage.css' %}"/>
    {% endblock %}

    {% block content %}
        
        <div class="text2">
        The Right College,<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;The Right tool.
            <!-- act differently if user is already logged in i.e. use if user.is_authenticated -->
            <form action="{% url 'HOME:inst' %}">
            <button type="submit" class="btn btn-danger">College match tool</button>
            </form>
                </div>
        
        <div class="container-fluid padding">
    <div class="row welcome">
    <div class="col-xl-6 col-lg-6 col-md-8 col-sm-12 col-xs-12">
        <h1 class="font1">Get college matches based on JEE Mains, JEE Advanced ranks, majors and test scores</h1>
        
        <div class="font2 text-justify"><br>We'll match you against IITS, NITs, IIITs and other Government-funded institutes to find the best fit for you, and provide you with the best college and branch you can get.</div>
        </div>
        <img src="{% static 'images/college-matches.jpg' %}" class="col-xl-6 col-lg-6 col-md-4 col-sm-12 col-xs-12">
        <div class="b1">
            <br><br>
<!-- act differently if user is already logged in i.e. use if user.is_authenticated -->
            <form action="{% url 'HOME:inst' %}">
        <button type="submit" class="btn btn-primary">Find College matches</button>
            </form>
    </div>
            </div>
    </div>
        <hr>
        <div class="container-fluid padding1">
    <div class="row welcome">
    <div class="col-xl-6 col-lg-6 col-md-8 col-sm-12 col-xs-12">
        <h1 class="font1">Institute rankings (Official MHRD rank-lists)</h1>
        
        <div class="font2 text-justify"><br>Get the latest official rankings of the colleges based on factors like placements, average packages, student-teacher ratio and faculties.<br><br>The list includes only the institutes which admit students based on their performance in JEE Mains and JEE Advanced.</div>
        </div>
        <img src="{% static 'images/clg-rank2.jpg' %}" width="600" height="400" class="col-xl-6 col-lg-6 col-md-4 col-sm-12 col-xs-12 img1">
        <div class="b1">
            <button class="btn btn-primary">College rankings</button>
        </div>
            </div>
        </div>
        
        <hr>
        <div class="container-fluid padding1">
    <div class="row welcome">
    <div class="col-xl-6 col-lg-6 col-md-8 col-sm-12 col-xs-12">
        <h1 class="font1">Estimate your chances of admission in a college by seeing previous year cutoffs</h1>
        
        <div class="font2 text-justify"><br>We'll compare your admissions chances with other students and help to make correct choice. Here are previous year Opening and Closing ranks of various colleges.</div>
        </div>
        <img src="https://www.collegeraptor.com/Content/raptor/images/responsive/admissions-chances-chart.jpg" class="col-xl-6 col-lg-6 col-md-4 col-sm-12 col-xs-12">
        <div class="b1">
            <!-- link to previous year data -->
        <button class="btn btn-primary">previous years data</button>
    </div>
            </div>
    </div>
        <hr>
        <br><br><br>
        <center>
        <div class="container-fluid">
        <div class="row">
            <div class="col-lg-3">
            <img src="{% static 'images/lock2.jpg' %}"><br>
                <h3 class="icon">Safe and Secure</h3>
                <p class="icon1">We take security very seriously and encrypt all of your information to keep it safe</p>
            </div>
            <div class="col-lg-3">
            <img src="{% static 'images/trust2.jpg' %}"><br>
                <h3 class="icon">Trusted Information</h3>
                <p class="icon1">Institutes can't pay to improve their rankings or matches on College Predictor, so you can trust that information you receive is fair and as accurate as possible</p>
            </div>
                    <div class="col-lg-3">
            <img src="{% static 'images/privacy2.jpg' %}"><br>
                        <h3 class="icon">Privacy Guaranteed</h3>
                        <p class="icon1">We will never provide personally identifiable information about you to colleges or anyone else without your permission</p>
            </div>
                        <div class="col-lg-3">
            <img src="{% static 'images/rupee2.jpg' %}"><br>
                            <h3 class="icon">Completely Free</h3>
                            <p class="icon1">College Predictor is 100% free to use, with no stipulations or exceptions</p>
            </div>
            </div>   
            </div>
            </center>
        <br><br>
        
        <div>
        <img src="{% static 'images/back6.jpg' %}" class="img2" alt="College park">
        <div class="text">
            Spend less time searching and more time making it happen.
        </div>
        </div>
        
        
    <footer>
    <div class="container-fluid">
        <div class="row padding1 text-center">
        <div class="col-lg-12">
            
        <img src="{% static 'images/logo.v2.png' %}" width="80" height="80"><img src="{% static 'images/brandfoot.png' %}" height="80px"><img src="{% static 'images/logo.v2.png' %}" width="80" height="80"><br>
            <p class="foottext">College Predictor is the best way for high school families to find college matches, discover colleges that may offer them the best educatoin and simplify the college search process—all for FREE!</p>
        </div>
            <div class="col-lg-12 foottext2">
                <hr class="hor1">
                Connect
            </div>
            <div class="col-12 social">
            <a href="#"><i class="fab fa-facebook"></i></a>
                <a href="#"><i class="fab fa-twitter"></i></a>
                <a href="#"><i class="fab fa-google-plus-g"></i></a>
                <a href="#"><i class="fab fa-youtube"></i></a>
                <a href="#"><i class="fab fa-linkedin"></i></a>
            </div>
            
            <div class="col-lg-12">
            <hr class="hor2">
                <br>
                <a href="#" class="foottext3">FAQs</a>
            <a href="#" class="foottext3">About us</a>
                <a href="#" class="foottext3">Contact us</a>
                <a href="#" class="foottext3">Our Team</a>
                <a href="#" class="foottext3">Feedback</a>
                <a href="#" class="foottext3">Privacy Policy</a>
            </div>
        </div>
    </div>    
    </footer>
    
    
    </body>
    
</html>
{% endblock %}