datamad2017/_includes/speakers-list-2.html

<!-- Begin Speakers List 2-->
<section id="speakers">
    <div class="content-wrapper">
        <div class="col-lg-10 col-lg-offset-1 appear-animation-trigger">
            {% for speaker in site.data.speakers %}
            <div class="effect-wrapper col-md-4 col-sm-6 col-xs-12 appear-animation">
                <div class="zoe-effect ribbon-activator" data-toggle="modal" data-target="#speakerDetail-{{ speaker.id }}">
                    <figure class="waves-effect waves-block waves-light" style="background-image: url({{ site.baseurl | append: site.thumbnailsFolder | append: speaker.thumbnailUrl }})">
                        <div class="overlay solid-overlay"></div>
                        {% if speaker.ribbon != null %}
                        <ul class="ribbon-wrapper">
                            {% for ribbon in speaker.ribbon %}
                            <li class="{{ ribbon["abbr"] | downcase }}">
                                <p class="ribbon abbr">{{ ribbon["abbr"] }}</p>
                                <p class="ribbon full-title">{{ ribbon["title"] }}</p>
                            </li>
                            {% endfor %}
                        </ul>
                        {% endif %}
                        <figcaption>
                            <div class="col-md-8 col-xs-8 text-left">
                                <h2 class="name">{{ speaker.name }} <span>{{ speaker.surname }}</span></h2>
                                <div class="clearfix"></div>
                                <span class="position">{{ speaker.company }}</span>
                            </div>
                            {% for social in speaker.social %}
                            <a href="{{ social.link }}" target="_blank">
                                <svg class="icon icon-{{ social.name }}" viewBox="0 0 30 32">
                                    <use xlink:href="{{ site.baseurl }}/img/sprites/sprites.svg#icon-{{ social.name }}"></use>
                                </svg>
                            </a>
                            {% endfor %}
                        </figcaption>
                        <p class="bio">{{ speaker.bio | strip_html }}</p>
                    </figure>
                </div>
            </div>
            {% endfor %}
        </div>
        <a href="{{ site.c4pUrl }}" class="bottom-section-link btn btn-primary waves-effect waves-button waves-light waves-float" target="_blank">Become a speaker</a>         
    </div>
</section>
<!-- End Speakers List 2 -->