Untitled

dabblet.css

body {
  font-family: Helvetica;
}

#content {
  max-width: 960px;
  margin: 0 auto;
}

#content-main {
  max-width: 640px;
  display: inline-block;
}

#content-side {
  max-width: 200px;
  margin-left: 40px;
  display: inline-block;
  vertical-align: top;
}

.title {
  padding-bottom: 6px;
  border-bottom: solid 4px black;
  margin-bottom: 4px;
}

.sub-title {
  font-weight: normal;
  font-size: 20px
}

.media-list {
  list-style: none;
  padding: 0;
}

.media-item {
  width: 200px;
  position: relative;
  display: inline-block;
  margin-right: 10px;
  cursor: pointer;
}

.media-header {
  position: absolute;
  top: 0;
  margin-top: 4px;
  margin-left: 4px;
  border-bottom: solid 4px black;
}

.media-description {
  line-height: 18px;
  position: absolute;
  bottom: 0;
  background: rgba(255, 255, 255, .6);
  padding: 4px;
  margin-bottom: 0;
}

dabblet.html

<div id="content">
  <h1 class="title">
    Austen Vanderbleek
    <span class="sub-title">Badass advertising man</span>
  </h1>
  <div id="content-main">
    <h2>Whatever I do</h2>
    <ul class="media-list">
      <li class="media-item">
        <h2 class="media-header">DJ</h3>
        <img src="http://placekitten.com/200/200">
        <p class="media-description">
          Vice occupy blog +1 pickled iPhone Schlitz 8-bit small batch tote bag semiotics.
        </p>
      </li>
      <li class="media-item">
        <h2 class="media-header">Stuff</h3>
        <img src="http://placekitten.com/200/200">
        <p class="media-description">
          Vice occupy blog +1 pickled iPhone Schlitz 8-bit small batch tote bag semiotics.
        </p>
      </li>
      <li class="media-item">
        <h2 class="media-header">$$$</h3>
        <img src="http://placekitten.com/200/200">
        <p class="media-description">
          Vice occupy blog +1 pickled iPhone Schlitz 8-bit small batch tote bag semiotics.
        </p>
      </li>
    </ul>
  </div>
  <div id="content-side">
    <h2>About Me</h2>
    <p class="about-paragraph">Kinda a dick...</p>
  </div>
</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"result"}