The first commented line is your dabblet’s title

dabblet.css

/**
 * The first commented line is your dabblet’s title
 */
 @viewport {
   width: device-width; 
   max-zoom: 3; 
   min-zoom: 0.50; 
}
 @import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300);
 body{
 background-image: url('http://lorempixel.com/g/200/1000/animals/4/'), url('http://lorempixel.com/g/200/1000/animals/2/');
background-position: top left, top right;
background-repeat: no-repeat;
 font-family: 'Open Sans', sans-serif;
 font-weight: 100;
 margin:0 200px;
 transition: margin 0.6s;
 
 }
 h1,h2,h3,h4,h5{
 font-weight:normal;
 }
 a{
 text-decoration:none;
 }
 #header{
 border-left:solid #8bc6ea 10px;
 background-color:#fff;
 }
 #header-logo{font-weight:normal;
 font-size:200%;
 padding:20px;
 color:#333}
 div,article,figure,section,h1,p{padding:0;margin:0;
 }
 h1,p{padding-bottom:10px;
 }
 #carousel,#sponsored-links{
 vertical-align:top;
 display:inline-block;
 margin:0;
 padding:0;
 height:200px;
 
 }
 #carousel{
 width:calc(100% - 200px);
 overflow:hidden;
 }
 #sponsored-links{
 min-width:200px;
 right:0;
 }
 #sponsored-links ul{
 list-style:none;
 padding:0;
 margin:0;
 }
 #sponsored-1,#sponsored-2,#sponsored-3,#sponsored-4{
 background-color:#ddd;
 
 }
 #sponsored-links ul li{
 text-align:center;
 padding:0 10px;
 line-height:49px;
 border-bottom:solid 1px #fff;
 }
 #sponsored-links ul li:last-child{
 line-height:50px;
 border:
 none;
 }
 #trending{
 background-color:#333;
 border-top:solid 1px #fff;
 border-bottom:solid 1px #fff;
 }
 #trending a{
 line-height:30px;
 padding:0 10px;
 color:#fff;
 }
 
 .marquee {
    margin: 0 auto;
    overflow: hidden;
    white-space: nowrap;
    box-sizing: border-box;
    
}
.marquee:hover {
    animation-play-state: paused
}

/* Make it move */
@keyframes marquee {
    0%   { text-indent: 100% }
    100% { text-indent:-100% }
}
 #slide1,#slide2,#slide3,#slide4{
 width:calc(25% - 1px);
 display:inline-block;
 height:100%;
 border-right:solid 1px #fff;
 }
 @keyframes slide {
    0%   { width: calc(25% - 1px) }
    100% { width:calc(60% - 1px) }
}
#slide1:hover,#slide2:hover,#slide3:hover,#slide4:hover{
animation:slide 1s forwards;
}
 #slide1{

 	background-color:#ffc;
 	background-image:url('http://lorempixel.com/800/450/technics/1');
 	background-size:cover;
 }
  #slide2{
 	background-color:#fcf;
 	background-image:url('http://lorempixel.com/800/450/technics/2');
 	background-size:cover
 }
  #slide3{
 	background-color:#cff;
 	background-image:url('http://lorempixel.com/800/450/technics/3');
 	background-size:cover
 }
  #slide4{
 	background-color:#ccc;
 	background-image:url('http://lorempixel.com/800/450/technics/4');
 	background-size:cover
 }
 .news-column>header{
 border-bottom:dotted 1px #000;
 margin-bottom:10px
 }
 #col1,#col2,#col3{
 -vertical-align:top;
 -display:inline-block;
 position:absolute;
 top:0;
 box-sizing:border-box;
 padding:10px;
min-height: inherit;
 }
 
 #content article{
 position:relative;
 border-bottom:solid 1px;
 margin-bottom:10px;
 }
 #content article h1{

top:0;
 }#col3 article h1{
 position:absolute;
 	left:calc(10px + 50%);
 }
 #content article figure{
 margin:0;
 
 padding-bottom:10px
 }
 #col3 article figure{
 width:50%;
 }
 #content article figure img{
 width:100%;
 }
 #content article.top header{
 position:relative;
 }
 #content article.top figure{
 width:100%;
 }
 #content article.top h1{
 width:60%;
 position:absolute;
 left:10px;
 bottom:25px;
 top:initial;
 background-color:rgba(255,255,255,0.7);
 padding:5px;
 }
 
 #content article.no-image h1{
 position:relative;
 display:block;
 left:initial;
 }
 #content{
 position:relative;
 width:100%;
 margin:0 auto;
 vertical-align:top;
 min-height:1000px;
 }
 #col1{
 left:0;
 width:25%;
 background-color:#fff;
 border-left:solid 10px #8bc6ea;
 min-width:300px;
 }
 #col2{
 
 min-left:0;
 width:25%;
 background-color:#fff;
 border-left:solid 10px #f8d63b;
 min-width:300px;
 right:50%;
 -box-shadow: -5px 0 50px 1px rgba(0,0,0,0.3);
 }
 #col2:hover{
 z-index:20;
 
 }
  #col1:hover{
 z-index:20;
 -box-shadow: 5px 0 50px 1px rgba(0,0,0,0.3);
 }
 #col3{
 z-index:30;
 width:50%;
 min-width:600px;
 background-color:#fff;
 border-left:solid 10px #d44338;
 right:0;
 -box-shadow: -5px 0 50px 1px rgba(0,0,0,0.3);
 }
 
 @media (max-width: 1000px) {
 body{
 margin:0;
 }
 .marquee{
animation: marquee 30s linear infinite;
}

}
 @media (max-width: 600px) {
#col1,#col2,#col3{
	min-width:100%;
} 
  #col2 {
  position:absolute;
  	margin-top:30px;
    left: 0;
    transition:margin-top 1s;
  }
  #col3{
  z-index:3;
  margin-top:60px;
  transition:margin-top 1s;
  }
  }
  @media (max-width: 320px){
  #col3{
  margin-top:60px;
  left: 0;
    transition:margin-top 1s;
  }
  }

dabblet.html

<section id="header">
<h1 id="header-logo">TechRadar</h1>
</section>
<div id="top-links">
<section id=carousel><div id="slide1"></div><div id="slide2"></div><div id="slide3"></div><div id="slide4"></div>
</section><section id="sponsored-links">
<ul>
<li id="sponsored-1"><a href="">Xbox One</a></li>
<li id="sponsored-2"><a href="">smart choice</a></li>
<li id="sponsored-3"><a href="">My mobile life</a></li>
<li id="sponsored-4"><a href="">Sponsored Link</a></li>
</ul>
</section>
<section id="trending" class="marquee">
<a href="">Xbox One</a>
<a href="">iPad Air</a>
<a href="">Playstation 4</a>
<a href="">Oculus Rift</a>
<a href="">Windows 8.1</a>
<a href="">Nintendo 64</a>
<a href="">Atari 2600</a>
</section>
</div><section id="content">
<div id="col1" class="news-column">
<header>
<h1>On The Radar</h1>
</header>
<article class="no-image">
<header>
	<h1>This kid's tablet looks and feels right, but it's slow and full of freemium apps</h1>
</header>
<p>What Would Google Do DocumentCloud metered model I saw it on Mediagazer every dog loves food content is king, innovation we will make them pay paywall TweetDeck totally blowing up on Twitter, Politics & Socks page DocumentCloud startups RT. What Would Google Do newspaper strike bloggers in their mother's basement future of narrative dying Google+ the audience knows more than I do people formerly known as the audience, nonprofit I saw it on Mediagazer stream TweetDeck eHow Andy Carvin, Patch gutter natural-born blogger NYT R&D WSJ hackgate.</p>
</article>
<article class="sponsored">
<header><figure><img src="http://lorempixel.com/800/450/technics/"></figure><h1>Headline</h1></header><p>lorum ispum</p></article>
<article class="no-image"><h1>Headline</h1><p>What Would Google Do DocumentCloud metered model I saw it on Mediagazer every dog loves food content is king, innovation we will make them pay paywall TweetDeck totally blowing up on Twitter, Politics & Socks page DocumentCloud startups RT. What Would Google Do newspaper strike bloggers in their mother's basement future of narrative dying Google+ the audience knows more than I do people formerly known as the audience, nonprofit I saw it on Mediagazer stream TweetDeck eHow Andy Carvin, Patch gutter natural-born blogger NYT R&D WSJ hackgate.</p></article>
<article><header><h1>Headline</h1><figure><img src="http://lorempixel.com/800/450/technics/4"></figure></header><p>lorum ispum</p></article>
<article><header><h1>Headline</h1><figure><img src="http://lorempixel.com/800/450/technics/5"></figure></header><p>lorum ispum</p></article>
<article><header><h1>Headline</h1><figure><img src="http://lorempixel.com/800/450/technics/6"></figure></header><p>lorum ispum</p></article>
<article><header><h1>Headline</h1><figure><img src="http://lorempixel.com/800/450/technics/7"></figure></header><p>lorum ispum</p></article>
<article><header><h1>Headline</h1><figure><img src="http://lorempixel.com/800/450/technics/8"></figure></header><p>lorum ispum</p></article>

</div><div id="col2" class="news-column">
<header>
<h1>Incoming</h1>
</header>
<article>
<header>
	<h1>This kid's tablet looks and feels right, but it's slow and full of freemium apps</h1>
	<figure><img src="http://lorempixel.com/800/450/technics/3"></figure>
</header>
<p>What Would Google Do DocumentCloud metered model I saw it on Mediagazer every dog loves food content is king, innovation we will make them pay paywall TweetDeck totally blowing up on Twitter, Politics & Socks page DocumentCloud startups RT. What Would Google Do newspaper strike bloggers in their mother's basement future of narrative dying Google+ the audience knows more than I do people formerly known as the audience, nonprofit I saw it on Mediagazer stream TweetDeck eHow Andy Carvin, Patch gutter natural-born blogger NYT R&D WSJ hackgate.</p>
</article>
<article class="sponsored">
<header><figure><img src="http://lorempixel.com/800/450/technics/"></figure><h1>Headline</h1></header><p>lorum ispum</p></article>
<article class="no-image"><h1>Headline</h1><p>What Would Google Do DocumentCloud metered model I saw it on Mediagazer every dog loves food content is king, innovation we will make them pay paywall TweetDeck totally blowing up on Twitter, Politics & Socks page DocumentCloud startups RT. What Would Google Do newspaper strike bloggers in their mother's basement future of narrative dying Google+ the audience knows more than I do people formerly known as the audience, nonprofit I saw it on Mediagazer stream TweetDeck eHow Andy Carvin, Patch gutter natural-born blogger NYT R&D WSJ hackgate.</p></article>
<article><header><h1>Headline</h1><figure><img src="http://lorempixel.com/800/450/technics/4"></figure></header><p>lorum ispum</p></article>
<article><header><h1>Headline</h1><figure><img src="http://lorempixel.com/800/450/technics/5"></figure></header><p>lorum ispum</p></article>
<article><header><h1>Headline</h1><figure><img src="http://lorempixel.com/800/450/technics/6"></figure></header><p>lorum ispum</p></article>
<article><header><h1>Headline</h1><figure><img src="http://lorempixel.com/800/450/technics/7"></figure></header><p>lorum ispum</p></article>
<article><header><h1>Headline</h1><figure><img src="http://lorempixel.com/800/450/technics/8"></figure></header><p>lorum ispum</p></article>

</div><div id="col3" class="news-column">
<header>
<h1>Hot right now</h1>
</header>
<article class="top">
<header>
	<h1>This kid's tablet looks and feels right, but it's slow and full of freemium apps</h1>
	<figure><img src="http://lorempixel.com/800/450/technics/3"></figure>
</header>
<p>What Would Google Do DocumentCloud metered model I saw it on Mediagazer every dog loves food content is king, innovation we will make them pay paywall TweetDeck totally blowing up on Twitter, Politics & Socks page DocumentCloud startups RT. What Would Google Do newspaper strike bloggers in their mother's basement future of narrative dying Google+ the audience knows more than I do people formerly known as the audience, nonprofit I saw it on Mediagazer stream TweetDeck eHow Andy Carvin, Patch gutter natural-born blogger NYT R&D WSJ hackgate.</p>
</article>
<article class="sponsored">
<header><figure><img src="http://lorempixel.com/800/450/technics/"></figure><h1>Headline</h1></header><p>lorum ispum</p></article>
<article class="no-image"><h1>Headline</h1><p>What Would Google Do DocumentCloud metered model I saw it on Mediagazer every dog loves food content is king, innovation we will make them pay paywall TweetDeck totally blowing up on Twitter, Politics & Socks page DocumentCloud startups RT. What Would Google Do newspaper strike bloggers in their mother's basement future of narrative dying Google+ the audience knows more than I do people formerly known as the audience, nonprofit I saw it on Mediagazer stream TweetDeck eHow Andy Carvin, Patch gutter natural-born blogger NYT R&D WSJ hackgate.</p></article>
<article><header><h1>Headline</h1><figure><img src="http://lorempixel.com/800/450/technics/4"></figure></header><p>lorum ispum</p></article>
<article><header><h1>Headline</h1><figure><img src="http://lorempixel.com/800/450/technics/5"></figure></header><p>lorum ispum</p></article>
<article><header><h1>Headline</h1><figure><img src="http://lorempixel.com/800/450/technics/6"></figure></header><p>lorum ispum</p></article>
<article><header><h1>Headline</h1><figure><img src="http://lorempixel.com/800/450/technics/7"></figure></header><p>lorum ispum</p></article>
<article><header><h1>Headline</h1><figure><img src="http://lorempixel.com/800/450/technics/8"></figure></header><p>lorum ispum</p></article>
</div>
</section>

dabblet.js

// alert('Hello world!');

settings.json

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