created by http://livecoding.io

README.md

View this code at http://livecoding.io/9160291

options.json

{
    "libraries": [],
    "mode": "html",
    "layout": "fullscreen mode (vertical)",
    "resolution": "reset"
}

water.css

/* css goes here */
#container{
  position: absolute;
  top: 20%;
  left: 30px;
  height: 60%;
}

.Stripe{
  height: 100%;
  white-space: nowrap;
}

.Stripe-Item{
  height: 100%;
  display: inline-block;
}

.media .content{
   height: 100%;
}

water.html

<div id="container">
  <ul class="Stripe">
    <li class="Stripe-Item">
      <figure class="media" style="height: 100%">
        <img class="content" src="http://upload.wikimedia.org/wikipedia/commons/8/80/Knut_IMG_8095.jpg">
        <figcaption>
          hello // baby
        </figcaption>
      </figure>
    </li>
    <li class="Stripe-Item">
      <figure class="media" style="height: 100%">
        <img class="content" src="http://upload.wikimedia.org/wikipedia/commons/8/80/Knut_IMG_8095.jpg">
        <figcaption>
          hello // baby
        </figcaption>
      </figure>
    </li>
    <li class="Stripe-Item">
      <figure class="media" style="height: 100%">
        <img class="content" src="http://upload.wikimedia.org/wikipedia/commons/8/80/Knut_IMG_8095.jpg">
        <figcaption>
          hello // baby
        </figcaption>
      </figure>
    </li>
    <li class="Stripe-Item">
      <figure class="media" style="height: 100%">
        <img class="content" src="http://upload.wikimedia.org/wikipedia/commons/8/80/Knut_IMG_8095.jpg">
        <figcaption>
          hello // baby
        </figcaption>
      </figure>
    </li>
  </ul>
</div>

water.js

/* javascript goes here */

water.json

{}