{# created by Chirath R, chirath.02@gmail.com#}
<!DOCTYPE HTML>
{% load static %}
<!--
	Ethereal by HTML5 UP
	html5up.net | @ajlkn
	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
    <title>FOSS@Amrita</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>
    <link rel="stylesheet" href="{% static 'promotion/css/main.css' %}"/>
    <noscript>
        <link rel="stylesheet" href="{% static 'promotion/css/noscript.css' %}"/>
    </noscript>
    <link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
</head>
<body>

<nav class="nav">
    <div class="nav-content">
        <div class="nav-left">
            <div class="nav-item">
                <h3 class="nav-data active"><a class="nav-link" href="{% url 'home' %}">FOSS@Amrita</a></h3>
            </div>
            <div class="nav-item">
                <h4 class="nav-data"><a class="nav-link" href="{% url 'achievements' %}">Achievements</a></h4>
            </div>
            <div class="nav-item">
                <h4 class="nav-data"><a class="nav-link" href="{% url 'profile_list' %}">Members</a></h4>
            </div>
        </div>
        <div class="nav-right">
            <div class="nav-item">
                {% if request.user.is_authenticated %}
                    <h4 class="nav-data">
                        <a class="nav-link" href="{% url 'profile' request.user.id %}">{{ request.user.username }}</a>
                        <a class="nav-link nav-data" href="{% url 'logout' %}">Logout</a>
                    </h4>
                {% else %}
                    <h4 class="nav-data"><a href="{% url 'login' %}">Login</a></h4>
                {% endif %}
            </div>
        </div>
    </div>
</nav>


<style>
    @media only screen and (max-width: 737px) {
        .nav {
            display: none;
        }
    }

    a {
        border-bottom: none !important;
    }

    .nav {
        position: fixed;
        top: 0;
        left: 0;
        height: 50px;
        width: 100%;
        background: #343335;
        z-index: 10000;
    }

    .nav-content {
        width: 100%;
        margin: auto 0;
    }

    .nav-item {
        display: inline-block;
    }

    .nav-data {
        height: 50px;
        line-height: 50px;
        white-space: nowrap;
        margin: 0 20px;
        color: #b7c3c8;
        font-family: 'Ubuntu', sans-serif;

    }

    .active {
        color: white;
    }

    .nav-left {
        display: inline-block;
        margin-left: 20px;
    }

    .nav-right {
        display: inline-block;
        float: right;
        margin-right: 10px;
    }

    .nav-link {
        font-weight: 100;
    }
</style>

<!-- Page Wrapper -->
<div id="page-wrapper">

    <!-- Wrapper -->
    <div id="wrapper">

        <!-- Panel (Spotlight) -->
        <section class="panel spotlight large left">
            <div class="content span-5">
                <h1 class="major"><a href="{% url 'home' %}">FOSS@Amrita</a><br/></h1>
                <h3>Code | Share | Grow</h3>
                <h4>Welcome to the FOSS club of Amritapuri Campus!</h4>
                <p style="color: white;">Foss@Amrita is a club where you spend time to learn more about software
                    development and write excellent code.
                    <br/>
                    <br/>
                    <a href="#eighth"><strong>Click here</strong></a> to join the club.
                </p>
                <ul class="actions">
                    <li><a href="#seventh" id="btn-home" class="button special color1 circle icon fa-angle-right">Next</a>
                    </li>
                </ul>
            </div>
            <div class="image filtered tinted" data-position="top right">
                <img src="{% static 'promotion/images/pic01.jpg' %}" alt=""/>
            </div>
        </section>

        <!-- Panel (Spotlight) -->
        <section class="panel spotlight large left" id="first">
            <div class="content span-5">
                <h2 class="major">What do we do?<br/></h2>
                <p style="color: white;">This club gives solid training to the students in the basics of computer
                    science and hence students are able to excel. </p>
                <p style="color: white;">There are lots of skills you don't get to learn in the classrooms. Here we
                    emphasize starting from basics such as how to type correctly and to gain speed, writing code, ability
                    to read large code base (more than 1000s of lines of code) and debugging, making presentations and
                    many more…</p>
            </div>
            <div class="image filtered tinted" data-position="top left">
                <img src="{% static 'promotion/images/bg-02.jpg' %}" alt=""/>
            </div>
        </section>

        <!-- Panel (Spotlight) -->
        <section class="panel spotlight large left" id="second">
            <div class="content span-7">
                <h2 class="major">Achievements</h2>
                <ul>
                    <li style="color: white">
                        For the very first time we got five first years (Gopal, Aniketh, Amrit, Anant and Chiranjeeb) to get into
                        <a href="https://summerofcode.withgoogle.com/" >GSoC 2017</a>
                    </li>
                    <li style="color: white">
                        Conducted conferences like MediaWiki To Learn Conference and Drupalathon'17.
                    </li>
                    <li style="color: white">
                        For the first time we had one first year student to get into Season Of KDE (SoK).
                    </li>
                    <li style="color: white">
                        Three students from the club were selected as speakers for the Wiki To Learn Conference India.
                    </li>
                    <li style="color: white">
                        Two students were selected as speakers for KDE Conference India.
                    </li>
                    <li style="color: white">
                        And much much more....... at
                        <a href="http://foss.amrita.ac.in/achievements/">
                            <strong>Achievements</strong>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="image filtered tinted" data-position="top left">
                <img src="{% static 'promotion/images/pic02.jpg' %}" alt=""/>
            </div>
        </section>


        <!-- Panel (Spotlight) -->
        <section class="panel spotlight large left" id="third">
            <div class="content span-6">
                <h2 class="major">Why should you join?</h2>
                <p style="color: white">
                    This club is pretty informal and is operational from 2007.
                    The alumni of the club are all over the world and in top companies as well such as Cisco, Amazon,
                    Flipkart, Google, VMWare etc.
                    As members of the club you get some guidance from the alumni at a later point of time as well.
                    Also there are many who are doing PhD or Masters in reputed universities all over the world.
                    Students from the club has got various opportunities such as doing paid internships in New Zealand,
                    Israel, US and Europe.
                    Our students are also invited for talks all over the world, invited to deliver workshops in IITs and
                    many more.
                </p>
                <p style="color: white">
                    You may be aware that our FOSS club has one of the largest number of Google Summer of Code Interns
                    in India.
                    We are getting better and better every year.
                </p>
            </div>
            <div class="image filtered tinted" data-position="top right">
                <img src="{% static 'promotion/images/pic03.jpg' %}" alt=""/>
            </div>
        </section>

        <!-- Panel -->
        <section class="panel" id="fourth">
            <div class="intro color2">
                <h2 class="major">The Fun!</h2>
                <p style="color: white">We have a lot of fun in the club!<br/></p>
                <ul>
                    <li style="color: white">Gardening sessions</li>
                    <li style="color: white">Outings</li>
                    <li style="color: white">Conferences</li>
                    <li style="color: white">Fests</li>
                    <li style="color: white">Hackathons</li>
                    <li style="color: white">And a lot more....</li>
                </ul>
            </div>
            <div class="gallery">
                <div class="group span-3">
                    <a href="{% static 'promotion/images/gallery/fulls/01.jpg' %}" class="image filtered span-3"
                       data-position="bottom"><img src="{% static 'promotion/images/gallery/thumbs/01.jpg' %}" alt=""/></a>
                    <a href="{% static 'promotion/images/gallery/fulls/02.jpg' %}" class="image filtered span-1-5"
                       data-position="center"><img src="{% static 'promotion/images/gallery/thumbs/02.jpg' %}" alt=""/></a>
                    <a href="{% static 'promotion/images/gallery/fulls/03.jpg' %}" class="image filtered span-1-5"
                       data-position="bottom"><img src="{% static 'promotion/images/gallery/thumbs/03.jpg' %}" alt=""/></a>
                </div>
                <a href="{% static 'promotion/images/gallery/fulls/04.jpg' %}" class="image filtered span-2-5"
                   data-position="top"><img src="{% static 'promotion/images/gallery/thumbs/04.jpg' %}" alt=""/></a>
                <div class="group span-4-5">
                    <a href="{% static 'promotion/images/gallery/fulls/05.jpg' %}" class="image filtered span-3"
                       data-position="top"><img src="{% static 'promotion/images/gallery/thumbs/05.jpg' %}" alt=""/></a>
                    <a href="{% static 'promotion/images/gallery/fulls/06.jpg' %}" class="image filtered span-1-5"
                       data-position="center"><img src="{% static 'promotion/images/gallery/thumbs/06.jpg' %}" alt=""/></a>
                    <a href="{% static 'promotion/images/gallery/fulls/07.jpg' %}" class="image filtered span-1-5"
                       data-position="bottom"><img src="{% static 'promotion/images/gallery/thumbs/07.jpg' %}" alt=""/></a>
                    <a href="{% static 'promotion/images/gallery/fulls/08.jpg' %}" class="image filtered span-3"
                       data-position="top"><img src="{% static 'promotion/images/gallery/thumbs/08.jpg' %}" alt=""/></a>
                </div>
                <a href="{% static 'promotion/images/gallery/fulls/09.jpg' %}" class="image filtered span-2-5"
                   data-position="right"><img src="{% static 'promotion/images/gallery/thumbs/09.jpg' %}" alt=""/></a>
            </div>
        </section>


        <!-- Panel (Spotlight) -->
        <section class="panel spotlight large left" id="fifth">
            <div class="content span-7">
                <h2 class="major">How to join?</h2>
                <p style="color: white">
                    The club is open for students from all branches. There is no particular test or anything for entry.
                    Therefore we have a big problem identifying those that are really serious in working.
                </p>
                <p style="color: white">
                    You don't need to have any prior experience or knowledge.Only one condition, the ability to work
                    really hard to improve yourself.
                    Work on the tasks below, and when you are ready.
                </p>
                <p style="color: white">
                    <strong><a href="#seventh">Click here</a></strong> to apply for the club membership.
                </p>
            </div>
            <div class="image filtered tinted" data-position="top left">
                <img src="{% static 'promotion/images/pic04.jpg' %}" alt=""/>
            </div>
        </section>


        <!-- Panel (Spotlight) -->
        <section class="panel spotlight large left" id="sixth">
            <div class="content span-7">
                <h2 class="major">Tasks to complete<br/></h2>
                <h5>So with that brief introduction let us get to the tasks in hand.
                    You can do some or all of these tasks depending on your time and interest
                </h5>
                <ol>
                    <li style="color: white">
                        Try to buy a laptop before you come and join. This will help you a lot.
                        Try to avoid laptops with dedicated graphics card as it might have issues running Linux.
                        You can buy a laptop without any operating system as well.
                    </li>
                    <li style="color: white">
                        Candidates with prior experience in programming should try out challenges in HackerRank. 
                    </li>
                    <li style="color: white">
                        Candidates who are not from CS background can watch the video lectures from
                        <strong><a href="http://cs50.tv/">cs50.tv</a></strong> and do the
                        problem sets in <a href="http://cs50.tv/2016/fall/#about,psets">cs50 website</a>.
                    </li>
                    <li style="color: white">
                        Go to <strong><a href="https://www.powertyping.com/">powertyping.com</a></strong> or
                        <strong><a href="https://www.keybr.com/">keybr.com</a></strong> and take the typing test and
                        measure your typing speed.
                        Do typing practice daily from sites like <strong><a href="https://www.powertyping.com/">powertyping.com</a></strong> or <strong><a href="https://www.typing.com/">typing.com</a></strong>
                    </li>
                </ol>
            </div>
            <div class="image filtered tinted" data-position="top left">
                <img src="{% static 'promotion/images/pic05.jpg' %}" alt=""/>
            </div>
        </section>


        <!-- Panel -->
        <section class="panel color4-alt" id="seventh">
            <div class="intro color4">
                <h2 class="major">Join us.</h2>
                <p>
                    We are a group of passionate students who work hard to attain our dreams.
                    If you are interested in joining the club, please click the button below.
                </p>
                <a href="{% url 'join' %}" class="button">Join Us</a>
            </div>
            <div class="inner columns divided">
                <div class="span-3-25">
                    <h2 class="major">Contact us</h2>
                    <form method="post" action="">
                        {% csrf_token %}
                        <div class="field half">
                            <label for="name">Name</label>
                            <input type="text"
                                   value="{% ifnotequal form.name.value None %}{{ form.name.value }}{% endifnotequal %}"
                                   name="name" id="name"/>
                        </div>
                        <div class="field half">
                            <label for="email">Email</label>
                            <input type="email"
                                   value="{% ifnotequal form.email.value None %}{{ form.email.value }}{% endifnotequal %}"
                                   name="email" id="email"/>
                        </div>
                        <div class="field">
                            <label for="message">Message</label>
                            <textarea name="message" id="message" rows="4">
                                {% ifnotequal form.message.value None %}{{ form.message.value }}{% endifnotequal %}
                            </textarea>
                        </div>
                        <ul class="actions">
                            <li>{{ form.captcha }}</li>
                            <li><input type="submit" value="Send Message" class="button special"/></li>
                        </ul>

                    </form>
                    {% if is_success %}
                        Thank you!!
                        <script>alert("Thank you! Message sent.")</script>
                    {% endif %}
                    {% ifequal is_success False %}
                        Failed!!
                        <script>alert("Sorry! Message sent failed.")</script>
                    {% endifequal %}
                </div>
                {% if form.errors %}
                    <div class="span-1-5">
                        {{ form.errors }}
                    </div>
                {% endif %}
                <div class="span-1-5" id="eighth">
                    <ul class="contact-icons color1">
                        <li class="icon fa-twitter"><a href="https://twitter.com/amfoss_in">@amfoss_in</a></li>
                        <li class="icon fa-facebook"><a href="https://www.facebook.com/amfoss.in">facebook.com/amfoss.in</a></li>
                        <li class="icon fa-github"><a href="https://github.com/amfoss">github.com/amfoss</a></li>
                        <li class="icon fa-google-plus"><a href="https://plus.google.com/107405104458420547482">plus.google.com/amfoss</a></li>
                    </ul>
                </div>
            </div>
        </section>

        <!-- Copyright -->
        <div class="copyright"><a href="http://foss.amrita.ac.in/club/teams/3/">WebTeam</a>, <a href="http://foss.amrita.ac.in">FOSS@Amrita</a></div>
    </div>

</div>

<!-- Scripts -->
<script src="{% static 'promotion/js/jquery.min.js' %}"></script>
<script src="{% static 'promotion/js/skel.min.js' %}"></script>
<script src="{% static 'promotion/js/main.js' %}"></script>

<script>
    $(window).load(function () {
        //resize just happened, pixels changed
        if ($(window).width() < 737) {
            $("#btn-home").addClass('fa-angle-down').removeClass('fa-angle-right');
        }
        else {
            $("#btn-home").addClass('fa-angle-right').removeClass('fa-angle-down');
        }
    });
</script>
</body>
</html>
