Skip to content

Instantly share code, notes, and snippets.

@piersroberts

piersroberts/dabblet.css

Created January 9, 2014 16:39
Show Gist options
  • Save piersroberts/8337344 to your computer and use it in GitHub Desktop.
Save piersroberts/8337344 to your computer and use it in GitHub Desktop.
Download ZIP
The first commented line is your dabblet’s title
Raw
dabblet.css
/**
* The first commented line is your dabblet’s title
*/
body{
margin:0 210px;
font-family:sans-serif;
}
#header{
background-color:silver;
}
div,article,section,h1,p{padding:0;margin:0;
}
h1,p{padding-bottom:10px;
}
#slide1,#slide2,#slide3,#slide4{
width:25%;
display:inline-block;
height:30px;
}
#slide1{
background-color:#ffc;
}
#slide2{
background-color:#fcf;
}
#slide3{
background-color:#cff;
}
#slide4{
background-color:#ccc;
}
#col1,#col2,#col3{
overflow-x:hidden;
display:inline-block;
position:absolute;
top:0;
box-sizing:border-box;
padding:10px
}
#col2{
right:50%;
}
#col3{
right:0
}
#content{
position:relative;
width:100%;
margin:0 auto;
}
#col1{
width:25%;
background-color:#fcc;
}
#col2{
width:25%;
background-color:#cfc;
}
#col3{
width:50%;
min-width:300px;
background-color:#ccf;
}
Raw
dabblet.html
<section id=header>
<h1>Techradar.com
</section>
<section id=carousel>
<div id="slide1"></div><div id="slide2"></div><div id="slide3"></div><div id="slide4"></div>
</section><section id="content">
<div id="col1">
<article><h1>Headline</h1><p>lorum ispum</p></article>
<article><h1>Headline</h1><p>lorum ispumlorum ispumlorum ispumlorum ispumlorum ispumlorum ispumlorum ispumlorum ispumlorum ispumlorum ispumlorum ispumlorum ispumlorum ispumlorum ispumlorum ispum</p></article>
<article><h1>Headline</h1><p>lorum ispum</p></article>
<article><h1>Headline</h1><p>lorum ispum</p></article>
</div><div id="col2">
<article><h1>Headline</h1><p>lorum ispum</p></article>
<article><h1>Headline</h1><p>lorum ispum</p></article>
<article><h1>Headline</h1><p>lorum ispumlorum ispumlorum ispumlorum ispumlorum ispumlorum ispumlorum ispumlorum ispumlorum ispumlorum ispumlorum ispumlorum ispumlorum ispum</p></article>
<article><h1>Headline</h1><p>lorum ispum</p></article>
<article><h1>Headline</h1><p>lorum ispum</p></article>
<article><h1>Headline</h1><p>lorum ispum</p></article>
</div><div id="col3">
<article><h1>Headline</h1><p>lorum ispumlorum ispumlorum ispumlorum ispumlorum ispumlorum ispumlorum ispumlorum ispumlorum ispumlorum ispumlorum ispumlorum ispumlorum ispumlorum ispumlorum ispumlorum ispumlorum ispumlorum ispumlorum ispum</p></article>
<article><h1>Headline</h1><p>lorum ispum</p></article>
<article><h1>Headline</h1><p>lorum ispum</p></article>
<article><h1>Headline</h1><p>lorum ispum</p></article>
<article><h1>Headline</h1><p>lorum ispum</p></article>
<article><h1>Headline</h1><p>lorum ispum</p></article>
<article><h1>Headline</h1><p>lorum ispum</p></article>
<article><h1>Headline</h1><p>lorum ispum</p></article>
</div>
</section>
Raw
dabblet.js
// alert('Hello world!');
Raw
settings.json
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"html"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment