hacsu.html

---
layout: default
permalink: hacsu.html
---

<script>
$(".navbar-custom").css('background-color', '#272940');
</script>
<style>
.signup-button {
    background: rgba(39,41,64,0.99);
    color: #fff;
    opacity: 0.9;
    padding: 7px 30px;
    border-radius: 5px;
    border: none;
}

.signup-button:hover {
  background: rgba(39,41,64,0.75);
}

.carousel{
    background: #FFF;
    margin-top: 20px;
}

.carousel .item {
    min-height: 600px; /* Prevent carousel from being distorted if for some reason image doesn't load */
}

.carousel .inner {
    min-height: 600px;
    overflow: auto;
}

.carousel-indicators li {
    border-color: #CCC;
}

.carousel-indicators {
    bottom: 690px;
}

.carousel {
    padding-top: 50px;
}

.carousel-indicators .active {
    background-color: #CCC;
}

.carousel-control.left, .carousel-control.right {
    background-image: none;
    color: #000;
    top: 30%;
}

.iframe-container {
    padding-top: 56.25%;
    position: relative;
    min-height: 690px;
    overflow: visible;
}

.iframe-container iframe {
    border: 0;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

</style>

<!-- Section: hacsu -->
<section id="hacsu" class="home-section text-center">
    <div class="wow bounceInDown" data-wow-delay="0.4s">
        <h1> Humans of ACSU </h1>
        <div class="container-fluid">
            <div class="row">
                <div class = "col-xs-10 col-md-6 col-xs-offset-1 col-md-offset-3">
                    <p> Over the course of the year we will be highlighting some of the amazing students in the Cornell University CIS community. We want to share your stories with the world!

                    Got some advice to share? A surprising college experience? Just want to rant? Or do you have a friend who you know would have an awesome story to tell? Submit this Google form to sign up for a quick, casual interview and a photo, and see yourself/your friend on our FB page!
                    </p>
                    <a href="https://goo.gl/forms/GHVqoZjwox7lRdUt1"><button class="signup-button">Sign up here!</button></a>
                </div>
            </div>
            <br/>
            <div class="hacsu-container">
            <h2> Latest Stories </h2>
            <div id="hacsu-carousel" class="carousel slide" data-ride="carousel" data-interval="false">
                {% assign data = site.data.hacsu.posts %}
                  <!-- Indicators -->
                  <ol class="carousel-indicators">
                    {% for post in data %}
                        {% if forloop.index == 1 %}
                            {% assign class = 'active' %}
                        {% else %}
                            {% assign class = '' %}
                        {% endif %}
                        {% assign index = forloop.index0 %}
                        <li data-target="#hacsu-carousel" data-slide-to="{{ index }}" class="{{ class }}"></li>
                    {% endfor %}

                  </ol>

                  <!-- Wrapper for slides -->
                  <div class="carousel-inner">
                    {% for post in data %}
                        {% if forloop.index0 == 0 %}
                            {% assign class = 'item active' %}
                        {% else %}
                            {% assign class = 'item' %}
                        {% endif %}
                        <div class="{{ class }} ">
                            <div class="col-xs-offset-1 col-md-offset-3 col-sm-offset-3 col-xs-10 col-sm-6 col-md-6">
                                <div class="iframe-container">
                                    <iframe src="{{ post.url }}&width=auto" width="100%" height="600px" scrolling="yes" frameborder="0" allowTransparency="true" allow="encrypted-media"></iframe>
                                </div>
                            </div>
                        </div>
                    {% endfor %}
                  </div>

                  <!-- Left and right controls -->
                <a class="left carousel-control" href="#hacsu-carousel" data-slide="prev">
                  <i class="fa fa-angle-left fa-3x" aria-hidden="true"></i>
                  <span class="sr-only">Previous</span>
                </a>
                <a class="right carousel-control" href="#hacsu-carousel" data-slide="next">
                  <i class="fa fa-angle-right fa-3x" aria-hidden="true"></i>
                  <span class="sr-only">Next</span>
                </a>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- /Section: hacsu -->