index.html

---
layout: default
class: home
---


<section class="hero switchable switchable--switch space--xs">
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <div class="height-50 imagebg border--round" data-overlay="2">
                    <div class="background-image-holder">
                        <img alt="background" src="{{site.url}}{% asset_path hero-3.jpg %}" />
                    </div>
                    <div class="pos-vertical-center col-xs-8 col-sm-6 col-md-5 col-sm-offset-1">
                        <div class="row">
                            <div class="col-xs-9">
                                <h2><b>Screenly</b></h2>
                                <h4 class="no-margin">Digital Signage made easy</h4>
                                <p class="no-margin">Display rich apps on any of your <b>Screenly</b> devices.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--end of row-->
    </div>
    <!--end of container-->
</section>


<section>
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <div class="masonry">

                    <hr>

                    <div class="row">
                        <div class="col-xs-7 text-left">
                            <h3 class="h2">Screenly App list</h3>
                        </div>
                        <div class="col-xs-5 text-right">
                            <div class="masonry-filter-container">
                                <span>Filter:</span>
                                <div class="masonry-filter-holder ">
                                    <div class="masonry__filters" data-filter-all-text="All Categories"></div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="masonry__container">
                            <div class="masonry__item col-sm-4 text-center" data-masonry-filter="Clock">
                                <div class="project-thumb">
                                    <a href="{{site.url}}/clock/digital/">
                                        <img alt="Digital Clock" class="border--round" src="{{site.url}}{% asset_path app-clock-digital.jpg %}" />
                                    </a>
                                    <h4>Digital Clock</h4>
                                    <span>Digital Clock displaying local time</span>
                                </div>
                            </div>
                            <!--end item-->
                            <div class="masonry__item col-sm-4 text-center" data-masonry-filter="Clock, Weather">
                                <div class="project-thumb">
                                    <a href="{{site.url}}/weather/">
                                        <img alt="Weather" class="border--round" src="{{site.url}}{% asset_path app-weather.jpg %}" />
                                    </a>
                                    <h4>Weather</h4>
                                    <span>Weather App with location selection.</span>
                                </div>
                            </div>
                            <!--end item-->
                            <div class="masonry__item col-sm-4 text-center" data-masonry-filter="WordPress">
                                <div class="project-thumb">
                                    <a href="{{site.url}}/screenly-cast-for-wordpress/">
                                        <img alt="Weather" class="border--round" src="{{site.url}}{% asset_path app-screenly-cast-for-wordpress.jpg %}" />
                                    </a>
                                    <h4>Screenly Cast for WordPress</h4>
                                    <span>WordPress plugin to enable casting of content on Screenly devices.</span>
                                </div>
                            </div>
                        </div>
                        <!--end of masonry container-->
                    </div>
                    <!--end row-->
                </div>
                <!--end masonry-->
            </div>
        </div>
        <!--end of row-->
    </div>
    <!--end of container-->
</section>