index.html

---
layout: default
banner: true
---
<div class="jumbotron">
    <div class="container">
        <div class="row-fluid">
            <div class="span8 hero-content">
                <h1>Octo<wbr>Print</h1>
                <p class="visible-desktop hidden-phone hidden-tablet">The snappy web interface for your 3D printer.</p>
                <p class="visible-phone visible-tablet hidden-desktop">The snappy web interface<br>for your 3D printer.</p>
                <div class="shameless-self-promotion">
                    Created &amp; maintained by Gina Häußge
                </div>
            </div>
            <div class="span4 logo-content">
                <img src="{{ BASE_PATH }}/assets/img/logo.png">
            </div>
        </div>

    </div>
</div>

<section id="shortpromo">
    <div class="container">
        <div class="row-fluid">
            {% for p in site.data.promo %}
            {% if p.icon %}
            <div class="span4 promobox">
                <h1><i class="{{ p.icon }}"></i></h1>
                <h4>{{ p.title }}</h4>
                <p>{{ p.short-description }}</p>
                {% if p.description %}
                    <p><a data-scroll href="#{{ p.id }}">Learn more</a></p>
                {% endif %}
            </div>
            {% endif %}
            {% endfor %}
        </div>

        <div class="row-fluid">
            <div class="sponsorbox span12">
                <div class="container">
                {% if site.data.sponsors.size > 0 %}
                    <div class="row-fluid">
                        <div class="span12">
                            OctoPrint's development is made possible only through the <strong><a href="/support-octoprint/" rel="noopener noreferrer" data-analytics='"Support Click", { "props": { "origin": "startblurb"} }'>financial support</a></strong>
                            of its awesome supporters and
                        </div>
                    </div>
                    <div class="row-fluid sponsorrow">
                        {% assign sponsor_count = site.data.sponsors.size %}
                        {% assign sponsors = site.data.sponsors | sample: sponsor_count %}
                        {% assign remainder = sponsor_count | modulo: 6 %}
                        <div class="{% if remainder == 1 %}offset1 span10{% else %}span12{% endif %}">
                        {% for sponsor in sponsors %}
                            <div class="sponsor">
                                <a href="{{ sponsor.url }}" title="{{ sponsor.title }}" data-analytics='"Sponsor Link", { "props": { "sponsor": "{{ sponsor.title }}"} }'>
                                    <img src="{{ BASE_PATH }}/assets/img/sponsors/{{ sponsor.logo }}" alt="{{ sponsor.title }}">
                                </a>
                            </div>
                        {% endfor %}
                        </div>
                    </div>
                {% else %}
                    <div class="row-fluid">
                        <div class="span12">
                            OctoPrint's development is made possible only through the <strong><a href="/support-octoprint/" rel="noopener noreferrer" data-analytics='"Support Click", { "props": { "origin": "startblurb"} }'>financial support</a></strong>
                            of its awesome supporters.
                        </div>
                    </div>
                {% endif %}
                </div>
            </div>
        </div>

        <div class="row-fluid">
            <div class="offset2 span8 actionbox">
                <a class="btn btn-large btn-block donatelink" href="/support-octoprint/" title="Support the project!" data-analytics='"Support Click", { "props": { "origin": "home"} }'>
                    <i class="fa fa-heart octo-heart"></i> Support the project!
                </a>
                <a class="btn btn-primary btn-large btn-block" title="Download" href="/download/"><i class="fa fa-download"></i> Download</a>
            </div>
        </div>
        <div class="row-fluid adbox">
            {% include adsnippet.html %}
        </div>
    </div>
</section>

<section id="features">
    {% for p in site.data.promo %}
    {% if p.description %}
    <div id="{{ p.id }}" class="promo">
        <div class="container">
            <div class="row-fluid">
                <div class="span12 sectiontitle">
                    <h3>{{ p.title }}</h3>
                </div>
            </div>
            <div class="row-fluid">
                {% if p.screenshots %}
                    <div class="span6 promo-description">{{ p.description | markdownify }}</div>
                    <div class="span6 promo-screenshots">
                        <div class="slick-container" data-slick='{"dots": true, "arrows": false, "autoplay": true, "autoplaySpeed": 5000, "prevArrow": "", "nextArrow": ""}'>
                            {% for s in p.screenshots %}
                            {% capture screenie %}{{ BASE_PATH }}/assets/img/{{ s }}{% endcapture %}
                            <div>
                                <a href="{{ screenie }}" data-lightbox="{{ p.id }}">
                                    <img src="{{ screenie }}">
                                </a>
                            </div>
                            {% endfor %}
                        </div>
                    </div>
                {% else %}
                    {% if p.icon %}
                        <div class="span6 promo-description">{{ p.description | markdownify }}</div>
                        <div class="span6 promo-screenshots"><h1><i class="fa fa-{{ p.icon }} fa-2x"></i></h1></div>
                    {% else %}
                        <div class="span12 promo-description">{{ p.description | markdownify }}</div>
                    {% endif %}
                {% endif %}
            </div>
        </div>
    </div>
    {% endif %}
    {% endfor %}
</section>