{% extends 'page.html'%}
{% load static %}
{% block content %}
<div class="row">
<h3>Register</h3>
<div class="row">
<div class="large-8 columns">
    <div class="reg"> 
        <table>
            <th>Tickets</th>
            <th>Price</th>
            <tr>
                <td>Regular Registration<sup>*</sup></td>
                <td>INR 600</td>
            </tr>
            <tr>
                <td>Corporate Registration</td>
                <td>INR 1000</td>
            </tr>
        </table>
    </div>

    <div class="reg">
        <table>
            <th>Addons</th>
            <th>Price</th>
            <tr>
                <td>Accommodation<sup>#</sup></td>
                <td>INR 740</td>
            </tr>
            <tr>
                <td>T-Shirt</td>
                <td>INR 250</td>
            </tr>
        </table>
    </div>
    
    <div style="margin-left: 10px;">
    <div class="clearfix"></div>
    <a class="button small success" href="http://scipyindia2013.doattend.com/">Register</a>
    <strong>for SciPy India 2013.</strong>
    <br>
    <h5>Note:</h5>
    <p>* Regular Registrants should bring any one of their college/institute identification cards during the event</p>
    <p># Accommodation will be provided for 4 days starting from 12th to 15th of December</p>
    <p>Registration closes on 10th December</p>
    </div>
    
    <!-- Modal test -->
    <div id="myModal" class="reveal-modal">
        <ul class="large-grid-2" style="text-align: center">
           <img src="{% static 'img/Front-lg.png' %}"> 
           <img src="{% static 'img/Back-lg.png' %}" width="360px"> 
        </ul>
        <p style="text-align: center">*Colours are for representation purpose and may slightly vary from the original.</p>
        <a class="close-reveal-modal">&#215;</a>
    </div>
</div> 

<div class="large-4 columns">
    <h6><u>T-Shirt Preview</u></h6>
    <div class="row">
        <ul class="large-grid-2">
        <a href="#" data-reveal-id="myModal">
           <img src="{% static 'img/Front-sm.png' %}"> 
           <img src="{% static 'img/Back-sm.png' %}" width="90px"> 
        </a>
        </ul>
    </div>
</div>

</div> <!-- /row -->
</div> <!-- /row -->
<div class="reveal-modal-bg" style="display: none"></div>
{% endblock %}