Skip to content

Instantly share code, notes, and snippets.

@PowerMugen

PowerMugen/dabblet.css

Created August 30, 2012 12:40
Show Gist options
  • Save PowerMugen/3527702 to your computer and use it in GitHub Desktop.
Save PowerMugen/3527702 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 {
background: #dedede;
background: linear-gradient(153deg, #dedede, #d8d8f6);
min-height: 100%;
font-family:arial;
}
p {border:1px dotted #333}
.para {width:700px; overflow:hidden;margin:10px auto 15px auto; background:#dfdfdf}
.para p { text-align:justify; margin:0;width:698px; overflow:hidden;}
.table {display:table;}
.table .tablecell {display:table-cell; width:100%;
vertical-align:top; float:left;
}
.table .imgbotright {display:table-cell; float:right;vertical-align:bottom;}
.botRight {margin:-150px 0 0; }
.alignLeft {margin:0 10px 10px 0}
.flleft {float:left;}
.alignRight {margin:0 0 10px 10px}
.flright {float:right;}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div class="para">
<p><img class="flleft alignLeft" src="http://placehold.it/350x150">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In varius odio et justo bibendum ullamcorper. Integer a dui neque. Cras mattis magna ac lacus ullamcorper elementum. Suspendisse potenti. Aliquam sit amet purus sem. Vestibulum id lectus quis mi ullamcorper ultricies. Sed sit amet tortor libero, et aliquet erat. Ut nec ipsum augue, nec convallis elit. Morbi quis quam sem, nec sagittis leo. Proin tristique nulla vel nisi bibendum at consectetur nibh egestas. Curabitur in purus ut neque ultrices lacinia in et eros. Phasellus quis pellentesque enim. Etiam volutpat egestas lacus ut dictum. In sed ipsum vestibulum diam euismod tempor eget adipiscing augue.
</p>
</div>
<div class="para">
<p><img class="flright alignRight" src="http://placehold.it/350x150">
Vivamus ac lacus ut leo tincidunt lobortis. Nunc ornare ullamcorper libero, ut venenatis enim egestas ut. Cras quam urna, cursus id pretium ut, vestibulum eu tellus. Vestibulum sed vehicula est. Vestibulum molestie viverra sollicitudin. Mauris convallis ultrices magna. Curabitur faucibus tincidunt diam at mattis.s ac lacus ut leo tincidunt lobortis. Nunc ornare ullamcorper libero, ut venenatis enim egestas ut. Cras quam urna, cursus id pretium ut, vestibulum eu tellus. Vestibulum sed vehicula est. Vestibulum molestie viverra sollicitudin. Mauris convallis ultrices magna. Curabitur faucibus tincidunt diam at mattis.
</p>
</div>
<div class="para">
<p>
Cras dicqdqsdqsdqsdqsdqsdtum molestie dui ac posuere. Fusce suscipit auctor lectus nec vehicula. Proin euismod, ligula suscipit sodales ultricies, metus nulla condimentum urna, et aliquet mauris libero quis mi. Sed eu facilisis enim. Quisque in laoreet sem. Nam eu neque ligula. Sed non tempor magna. Mauris placerat odio non velit eleifend vel ullamcorper magna pellentesque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.dictum molestie dui ac posuere. Fusce suscipit auctor lectus nec vehicula. Proin euismod, ligula suscipit sodales ultricies, metus nulla condimentum urna, et aliquet mauris libero quis mi. Sed eu facilisis enim. Quisque in laoreet sem. Nam eu neque ligula. Sed non tempor magna. Mauris placerat odio non velit eleifend vel ullamcorper magna pellentesque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.tum molestie dui ac posuere. Fusce suscipit auctor lectus nec vehicula. Proin euismod, ligula suscipit sodales ultricies, metus nulla condimentum urna, et aliquet mauris libero quis mi. Sed eu facilisis enim. Quisque in laoreet sem. Nam eu neque ligula. Sed non tempor magna. Mauris placerat odio non velit eleifend vel ullamcorper magna pellentesque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.dictum molestie dui ac posuere. Fusce suscipit auctor lectus nec vehicula. Proin euismod, ligula suscipit sodales ultricies, metus nulla condimentum urna, et aliquet mauris libero quis mi. Sed eu facilisis enim. Quisque in laoreet sem. Nam eu neque ligula. Sed non tempor magna. Mauris placerat odio non velit eleifend vel ullamcorper magna pellentesque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas
<img class="flleft alignLeft" src="http://placehold.it/350x150">
</p>
</div>
<div class="para">
<p>
Phasellus et ipsum augue, ut aliquet dui. Morbi suscipit eros id turpis consectetur rhoncus. Pellentesque blandit egestas massa quis blandit. Donec venenatis, ligula ut hendrerit pretium, risus eros tincidunt velit, at posuere purus felis a magna. Phasellus vitae convallis mauris. Duis et mi a lectus hendrerit ultricies. Aenean eget consequat libero. Aliquam sit amet molestie velit. Phasellus blandit ornare orci eget gravida. Quisque at ligula non ante commodo laoreet sed vel libero. Quisque feugiat elementum volutpat. Suspendisse sit amet hendrerit purus. Sed vel leo in lacus ultricies convallis non a turpis. Morbi et orci urna. Duis magna neque, pulvinar a aliquet nec, ullamcorper nec felis. Vivamus ut libero massa, nec feugiat arcu.
<img class="flright alignRight" src="http://placehold.it/350x150">
</p>
</div>
<div class="para table">
<div class="tablecell text">
Vivamus tincidunt ullamcorper mollis. Praesent eget risus quam, vitae blandit massa. Phasellus pretium dui sit amet ligula consectetur commodo. Morbi rutrum lorem nec purus posuere faucibus. Curabitur facilisis est quis nulla mollis at posuere magna placerat. Morbi vestibulum adipiscing ligula sodales bibendum. Fusce euismod suscipit dictum. Donec blandit interdum lorem sit amet venenatis. Phasellus non orci congue nisi mattis condimentum vel sed eros. Quisque purus massa, faucibus vel porta quis, aliquet ac elit. Nulla ante odio, condimentum ac malesuada sed, dignissim vitae nulla. Cras tellus neque, rhoncus ut facilisis eget, condimentum semper augue. Nunc eget nisi nisi, ullamcorper porttitor orci. Aliquam erat volutpat.</span>
</div>
<div class="imgbotright">
<img class="botRight" src="http://placehold.it/350x150">
</div>
</div>
Raw
settings.json
{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment