index.html

<!DOCTYPE html>
<head>
    <title>HackMann 2017</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1" />
    <link rel="stylesheet" href="bootstrap.min.css" />
    <link rel="stylesheet" href="style.css" />
</head>

<body class="container">

<div id="header" class="row">
    <div class="center-vertical col-xs-12">
        <div id="header-logo" class="text-center animated fadeInDown">
               <div class="chevron chevron-left animated chevronLeftSlide">
                   <img src="chevron.svg" alt="chevron-left" />
               </div>
               <h1 id="header-logo-text" class="animated headerTextAppear"><span class="hack">Hack</span><span class="mann">MANN</span> <b>2017</b></h1>
               <div class="chevron chevron-right animated chevronRightSlide">
                   <img src="chevron.svg" alt="chevron-right" />
               </div>
           </div>
        <h2 class="text-center animated fadeIn">Hack your code to <code id="bits">0101</code>.</h2>
        <h3 class="text-center animated fadeInUp"><b><span class="text-primary">June 3-4, 2017</span></b> from 1PM to 1PM<br />Horace Mann School, Bronx NY</h3>

        <h1 class="text-center animated fadeInUp">

            <a href="https://goo.gl/forms/Jz8rK3TTSKxuVKJi1" class="btn btn-primary btn-lg" role="button">Apply Today!</a>
        </h1>

    </div>
</div>


</div>

<div class="container">
    <hr />
    <div id="about" class="row">
        <a id="scroll-about" class="scroll-anchor"></a>
        <div class="col-xs-12">
            <p class="text-justify" style="font-size:1.3em"><span class="brand"><span class="hack">Hack</span><span class="mann">MANN</span></span> is a hackathon for high school students that will be hosted at the <b><span class="text-primary">Horace Mann School</span></b> in Riverdale, Bronx. On the weekend of <b><span class="text-primary">June 3-4, 2017</span></b>, teams of 1-4 students are invited to come to Horace Mann School and spend 24 hours making a hardware, software, or electrical project. Professional mentors will be available to assist students in their creations. At the end, each team will give a short presentation of its project, and the judges will decide the winners!</p>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-4">
            <h3>What goes on at a hackathon?</h3>
            <p class="text-justify"><span class="brand"><span class="hack">Hack</span><span class="mann">MANN</span></span> is more than just sitting in a room programming for 24 hours.  Makers will be treated to great food and snacks, fun games and activities (did somebody say laser tag?), and more.</p>
        </div>
        <div class="col-sm-4">
            <h3>What about hardware?</h3>
            <p class="text-justify"><span class="brand"><span class="hack">Hack</span><span class="mann">MANN</span></span> prides itself on being one of the first highschool hackathons to fully embrace hardware hacking.  Not only will we be providing a hardware station with Arduino's, Raspberry Pi's, and more, but we will have laser cutting, 3D printing, and a fully stocked machine shop at your demand.</p>
        </div>

        <div class="col-sm-4">
            <h3>Where is <b><span class="text-primary">Horace Mann School</span></b>?</h3>
            <p class="text-justify">The school is located at:</p>
            <address><b>231 West 246 Street<br />
                Bronx, NY 10471<br />
            </b></address>
        </div>
    </div>

    <hr />
    <!--
    <div id="schedule" class="row">
        <a id="scroll-schedule" class="scroll-anchor"></a>
        <h3 class="text-center">Schedule</h3>
        <div class="col-sm-3"></div>
        <dl class="col-sm-6 dl-horizontal">
            <dt>8 AM</dt>
            <dd>Registration, Breakfast</dd>
            <dt>9 AM</dt>
            <dd>Opening Remarks</dd>
            <dt>10 AM</dt>
            <dd>Team Formation</dd>
            <dt>11 AM</dt>
            <dd>Coding</dd>
            <dt>12 PM</dt>
            <dd>Lunch</dd>
            <dt>1 PM</dt>
            <dd>Coding</dd>
            <dt>6 PM</dt>
            <dd>Dinner</dd>
            <dt>7 PM</dt>
            <dd>Judging</dd>
            <dt>8 PM</dt>
            <dd>Closing</dd>
        </dl>
        <div class="col-sm-3"></div>
    </div>
    <hr />

    <div id="sponsors" class="row">
        <a id="scroll-sponsors" class="scroll-anchor"></a>
        <h3 class="text-center">Proudly sponsored by:</h3>
        <div class="col-sm-2"></div>
        <div class="col-sm-4">
            <a href="https://www.horacemann.org/" target="_blank">
                <img class="center-block" src="img/horacemann-logo.svg" alt="horacemann-logo" />
            </a>
        </div>
        <div class="col-sm-2"></div>
    </div>-->
</div>
<div id="footer" class="row">
    <div class="col-xs-12">
        <p class="text-right text-muted">Site design (c) 2017 HackMann</p>
    </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

<script>
        function formatDate(date) {
            date.setDate(date.getDate()+1);
        var monthNames = [
        "January", "February", "March",
        "April", "May", "June", "July",
        "August", "September", "October",
        "November", "December"
        ];

        var day = date.getDate();
        var monthIndex = date.getMonth();

        return monthNames[monthIndex] + ' ' + day;
        }


    window.onload = function() {
        document.getElementById("signupDate").innerHTML = formatDate(new Date());

        const BITS_ID = 'bits';
        const BITS_TEXT = 'bits';
        const BITS_ANIMATE_INTERVAL = 50.0;
        const BITS_ANIMATE_DURATION = 1500.0;
        var bitsTextTicks = 0;
        var animateBITS_ID = window.setInterval(function() {
            var len = Math.floor(bitsTextTicks / (BITS_ANIMATE_DURATION / BITS_ANIMATE_INTERVAL) * 4);
            var text = BITS_TEXT;
            for (i = len; i < 4; i++) {
                text = text.substr(0, i) + (Math.random() > 0.5 ? '1' : '0') + text.substr(i + 1);
            }
            document.getElementById(BITS_ID).innerHTML = text;
            bitsTextTicks++;
        }, BITS_ANIMATE_INTERVAL);
        window.setTimeout(function() {
            window.clearInterval(animateBITS_ID);
            document.getElementById(BITS_ID).innerHTML = BITS_TEXT;
        }, BITS_ANIMATE_DURATION);
    }
</script>
</body>
</html>