<article id="demo-flat" class="demo">

    <h2>Your Housemates</h2>

    <div id="flat" style="display: block;" class="flipster flipster--transform flipster--flat flipster--click flipster--active" tabindex="0">
        <ul class="flipster__container" style="height: 305px; transform: translateX(-715.75px);">
            <li data-flip-title="Red" class="flipster__item  flipster__item--past flipster__item--past-5" style="z-index: 0; margin-right: -75px;"><div class="flipster__item__content">
                <img src="img/text1.gif">
            </div></li>
            <li data-flip-title="Razzmatazz" data-flip-category="Purples" class="flipster__item  flipster__item--past flipster__item--past-4" style="z-index: 1; margin-right: -75px;"><div class="flipster__item__content">
                <img src="img/text2.gif">
             </div></li>
            <li data-flip-title="Deep Lilac" data-flip-category="Purples" class="flipster__item  flipster__item--past flipster__item--past-3" style="z-index: 2; margin-right: -75px;"><div class="flipster__item__content">
                <img src="img/text3.gif">
            </div></li>
            <li data-flip-title="Daisy Bush" data-flip-category="Purples" class="flipster__item  flipster__item--past flipster__item--past-2" style="z-index: 3; margin-right: -75px;"><div class="flipster__item__content">
                <img src="img/text4.gif">
            </div></li>
            <li data-flip-title="Cerulean Blue" data-flip-category="Blues" class="flipster__item  flipster__item--past flipster__item--past-1" style="z-index: 4; margin-right: -75px;"><div class="flipster__item__content">
                <img src="img/text5.gif">
            </div></li>
            <li data-flip-title="Dodger Blue" data-flip-category="Blues" class="flipster__item  flipster__item--current" style="z-index: 11; margin-right: -75px;"><div class="flipster__item__content">
                <img src="img/text6.gif">
            </div></li>
            <li data-flip-title="Cyan" data-flip-category="Blues" class="flipster__item  flipster__item--future flipster__item--future-1" style="z-index: 4; margin-right: -75px;"><div class="flipster__item__content">
                <img src="img/text7.gif">
            </div></li>
            <li data-flip-title="Robin's Egg" data-flip-category="Blues" class="flipster__item  flipster__item--future flipster__item--future-2" style="z-index: 3; margin-right: -75px;"><div class="flipster__item__content">
                <img src="img/text8.gif">
            </div></li>
            <li data-flip-title="Deep Sea" data-flip-category="Greens" class="flipster__item  flipster__item--future flipster__item--future-3" style="z-index: 2; margin-right: -75px;"><div class="flipster__item__content">
                <img src="img/text9.gif">
            </div></li>
            <li data-flip-title="Apple" data-flip-category="Greens" class="flipster__item  flipster__item--future flipster__item--future-4" style="z-index: 1; margin-right: -75px;"><div class="flipster__item__content">
                <img src="img/text10.gif">
            </div></li>
        </ul>
    </div>

<script>
    var flat = $("#flat").flipster({
        style: 'flat',
        spacing: -0.25
    });
</script>



</article>