.netboxes

dabblet.css

/**
 * .netboxes
 */
 
/* universal */
body {
margin: 0;
background: url('http://subtlepatterns.com/patterns/lightpaperfibers.png') repeat;
}
img {
max-width:100%;
}

@media screen and (min-width: 320px) {
section {
width:100%;
}
section > article {
background: #8EF;
overflow:auto;
padding:0 4%;
margin:1% 2%;
}

article > img {
display:block;
margin: 1% auto;
}
article > blockquote {

float:right;
text-align:right;
width:38%;

}
}


@media screen and (min-width:768px) {

section {
float:left;
width:50%;

}

}

dabblet.html

<!-- http://dabblet.com/gist/2890407 -->
<section class="intro">
	<article>
		<!--BACKGROUND IMAGE <img src="http://placehold.it/500x300"> -->
		<h1>Talks</h1>
			<h2>An interesting conundrum: non-equal heights and background color : (</h2>
		<blockquote><p>Perhaps if we attempted to use nth-of-type(1) or something to make the 1st section tage extend the full length of the page?</p></p>
		</blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vel urna vel dolor scelerisque sollicitudin. Nulla dolor risus, sollicitudin non facilisis a, tincidunt luctus dolor. Duis enim nisi, volutpat et tempus vel, aliquet sit amet urna. Sed sem neque, rutrum quis lacinia et, viverra at neque. Cras vel arcu mauris. Praesent vitae arcu dolor, dignissim pulvinar lectus. Duis lectus felis, blandit sit amet iaculis et, fringilla non dolor. Sed quam dui, sagittis quis convallis id, posuere non orci. Nulla sed erat velit, ac vulputate urna. Vivamus velit ipsum, aliquam eu euismod eget, pretium at sapien. Pellentesque semper pellentesque nulla, ut tristique erat volutpat vel. Phasellus pellentesque interdum luctus.
</p></article>
</section>

<section class="works">
	<article>
		<img src="http://placehold.it/300x200">
		<h1>Webinars</h1>
		

	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vel urna vel dolor scelerisque sollicitudin. Nulla dolor risus, sollicitudin non facilisis a, tincidunt luctus dolor. Duis enim nisi, volutpat et tempus vel, aliquet sit amet urna. Sed sem neque, rutrum quis lacinia et, viverra at neque. Cras vel arcu mauris. Praesent vitae arcu dolor, dignissim pulvinar lectus. Duis lectus felis, blandit sit amet iaculis et, fringilla non dolor. Sed quam dui, sagittis quis convallis id, posuere non orci. Nulla sed erat velit, ac vulputate urna. Vivamus velit ipsum, aliquam eu euismod eget, pretium at sapien. Pellentesque semper pellentesque nulla, ut tristique erat volutpat vel. Phasellus pellentesque interdum luctus.</p>

	<p>Pellentesque justo nulla, euismod imperdiet volutpat a, mollis eget dui. In hac habitasse platea dictumst. Cras bibendum orci nunc, nec aliquam lacus. In fermentum, augue et commodo varius, lorem sem accumsan eros, sit amet molestie mauris erat ut est. Vivamus malesuada nibh mauris, vitae viverra eros. Aliquam tellus leo, tempus ac congue ac, vestibulum ut erat. Vestibulum eget tortor sem, eu blandit nisl. Pellentesque congue, leo eget interdum porttitor, urna magna interdum velit, sed rhoncus velit velit in est. Cras ornare elementum enim vel interdum. Aliquam quis erat et tortor rutrum hendrerit. Ut facilisis vestibulum quam, et tincidunt tortor pharetra id. Sed euismod, lorem sed rhoncus euismod, massa dolor consectetur nisl, sed ultrices elit dui fermentum erat. Suspendisse et sapien at magna condimentum bibendum.
	<p>	Pellentesque justo nulla, euismod imperdiet volutpat a, mollis eget dui. In hac habitasse </p>platea dictumst. Cras bibendum orci nunc, nec aliquam lacus. In fermentum, augue et commodo varius, lorem sem accumsan eros, sit amet molestie mauris erat ut est. Vivamus malesuada nibh mauris, vitae viverra eros. Aliquam tellus leo, tempus ac congue ac, vestibulum ut erat. Vestibulum eget tortor sem, eu blandit nisl. Pellentesque congue, leo eget interdum porttitor, urna magna interdum velit, sed rhoncus velit velit in est. Cras ornare elementum enim vel interdum. Aliquam quis erat et tortor rutrum hendrerit. Ut facilisis vestibulum quam, et tincidunt tortor pharetra id. Sed euismod, lorem sed rhoncus euismod, massa dolor consectetur nisl, sed ultrices elit dui fermentum erat. Suspendisse et sapien at magna condimentum bibendum.</p>

	</article>
</section>

<section class="content"><article><h1>Courses</h1>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 	Phasellus vel urna vel dolor scelerisque sollicitudin. Nulla dolor risus, sollicitudin non facilisis a, tincidunt luctus dolor. Duis enim nisi, volutpat et tempus vel, aliquet sit amet urna. Sed sem neque, rutrum quis lacinia et, viverra at neque. Cras vel arcu mauris. Praesent vitae arcu dolor, dignissim pulvinar lectus. Duis lectus felis, blandit sit amet iaculis et, fringilla non dolor. Sed quam dui, sagittis quis convallis id, posuere non orci. Nulla sed erat velit, ac vulputate urna. Vivamus velit ipsum, aliquam eu euismod eget, pretium at sapien. Pellentesque semper pellentesque nulla, ut tristique erat volutpat vel. Phasellus pellentesque interdum luctus.</p>

	<p>Pellentesque justo nulla, euismod imperdiet volutpat a, mollis eget dui. In hac habitasse platea dictumst. Cras bibendum orci nunc, nec aliquam lacus. In fermentum, augue et commodo varius, lorem sem accumsan eros, sit amet molestie mauris erat ut est. Vivamus malesuada nibh mauris, vitae viverra eros. Aliquam tellus leo, tempus ac congue ac, vestibulum ut erat. Vestibulum eget tortor sem, eu blandit nisl. Pellentesque congue, leo eget interdum porttitor, urna magna interdum velit, sed rhoncus velit velit in est. Cras ornare elementum enim vel interdum. Aliquam quis erat et tortor rutrum hendrerit. Ut facilisis vestibulum quam, et tincidunt tortor pharetra id. Sed euismod, lorem sed rhoncus euismod, massa dolor consectetur nisl, sed ultrices elit dui fermentum erat. Suspendisse et sapien at magna condimentum bibendum.</p></article></section>
<section class="contact">
	<article>
	<h1>Contact</h1>

	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vel urna vel dolor scelerisque sollicitudin. Nulla dolor risus, sollicitudin non facilisis a, tincidunt luctus dolor. Duis enim nisi, volutpat et tempus vel, aliquet sit amet urna. Sed sem neque, rutrum quis lacinia et, viverra at neque. Cras vel arcu mauris. Praesent vitae arcu dolor, dignissim pulvinar lectus. Duis lectus felis, blandit sit amet iaculis et, fringilla non dolor. Sed quam dui, sagittis quis convallis id, posuere non orci. Nulla sed erat velit, ac vulputate urna. Vivamus velit ipsum, aliquam eu euismod eget, pretium at sapien. Pellentesque semper pellentesque nulla, ut tristique erat volutpat vel. Phasellus pellentesque interdum luctus.</p>

	<p>Pellentesque justo nulla, euismod imperdiet volutpat a, mollis eget dui. In hac habitasse platea dictumst. Cras bibendum orci nunc, nec aliquam lacus. In fermentum, augue et commodo varius, lorem sem accumsan eros, sit amet molestie mauris erat ut est. Vivamus malesuada nibh mauris, vitae viverra eros. Aliquam tellus leo, tempus ac congue ac, vestibulum ut erat. Vestibulum eget tortor sem, eu blandit nisl. Pellentesque congue, leo eget interdum porttitor, urna magna interdum velit, sed rhoncus velit velit in est. Cras ornare elementum enim vel interdum. Aliquam quis erat et tortor rutrum hendrerit. Ut facilisis vestibulum quam, et tincidunt tortor pharetra id. Sed euismod, lorem sed rhoncus euismod, massa dolor consectetur nisl, sed ultrices elit dui fermentum erat. Suspendisse et sapien at magna condimentum bibendum.</p>
</article>
</section>

settings.json

{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}