Hilighted articles 1 on top, with an image, two at the bottom

dabblet.css

/**
 * Hilighted articles 1 on top, with an image, two at the bottom
 */
.articles-hilighted h2,.articles-secondary h2,.articles-hilighted h3,.articles-secondary h3,.articles-hilighted h4,.articles-secondary h4{font-size:1.2em;line-height:1.3em}
.articles-hilighted{overflow:hidden}.articles-hilighted .hentry-body{min-height:280px;padding:25px;background-color:#f1f1f1}.articles-hilighted .hentry .hilighted-figure{height:280px;margin:0}.articles-hilighted .hentry .hilighted-figure b{display:block}.articles-hilighted .hilighted-figure{display:none}.articles-hilighted .hilighted-alfa,.articles-hilighted .tag-favourites:first-child{margin-bottom:20px;overflow:hidden}.articles-hilighted .hilighted-alfa .hilighted-figure,.articles-hilighted .tag-favourites:first-child .hilighted-figure{display:block;float:left;width:50%}.articles-hilighted .hilighted-alfa .hilighted-figure img,.articles-hilighted .tag-favourites:first-child .hilighted-figure img{width:100%}.articles-hilighted .hilighted-alfa .hentry-body,.articles-hilighted .tag-favourites:first-child .hentry-body{overflow:hidden}.articles-hilighted .hilighted-bravo,.articles-hilighted .hilighted-charlie,.articles-hilighted .tag-favourites:nth-child(2n),.articles-hilighted .tag-favourites:nth-child(3n){float:left;width:50%;border-top:0}.articles-hilighted .hilighted-bravo .hentry-body{margin-right:14px}.articles-hilighted .hilighted-charlie .hentry-body{margin-left:14px}
.boxes header{margin-bottom:20px}.boxes header h1{font-size:1.7em;font-weight:normal;font-color:#c3c3c3}.boxes article{margin-bottom:20px}.boxes article+article{padding-top:20px;border-top:1px solid #c3c3c3}
.boxes .box+.box{padding-top:20px;margin-top:20px;border-top:1px solid #cc5200}.boxes header{margin-bottom:20px}.boxes header h1{font-size:1.7em;font-weight:normal;font-color:#c3c3c3}.boxes article{margin-bottom:20px}.boxes article+article{padding-top:20px;border-top:3px solid #c3c3c3}
.box header h2,.hentry h2,.box header h3,.hentry h3,.box header h4,.hentry h4{margin:0;font-weight:400}
body>header .behavior-fade,body .hentry{-webkit-transition:all .2s ease-out;-moz-transition:all .2s ease-out;transition:all .2s ease-out}
.hentry .hentry-body{box-sizing:border-box}.hentry header{margin-bottom:10px;overflow:hidden}.hentry .more{white-space:nowrap}.hentry .more:after{color:#cc5200;content:"\00bb"}.hentry aside{margin-top:25px}.hentry aside ul{margin:0;overflow:hidden;list-style:none}.hentry aside ul li{float:left;margin-bottom:5px;font-weight:bold}.hentry aside ul li+li{margin-left:5px}.hentry aside ul li:first-child{margin-left:5px}.hentry aside ul a{display:block;padding:0 5px;font-size:.75em;font-weight:normal;color:#FFF!important;text-transform:uppercase;background-color:#9d9d9d;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box}
.mixin-calendar{float:left;width:50px;margin:0;margin-top:5px;margin-right:15px;font-size:.75em;line-height:2em;color:#FFF;text-align:center;background-color:#767676;-webkit-border-top-right-radius:0;border-top-right-radius:0;-webkit-border-bottom-right-radius:5px;border-bottom-right-radius:5px;-webkit-border-bottom-left-radius:5px;border-bottom-left-radius:5px;-webkit-border-top-left-radius:0;border-top-left-radius:0;-moz-border-radius-topright:0;-moz-border-radius-bottomright:5px;-moz-border-radius-bottomleft:5px;-moz-border-radius-topleft:0;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box}.mixin-calendar .calendar-day{display:block;padding:10px 3%;font-size:2.5em;background-color:#aaa}
.calendar{float:left;width:50px;margin:0;margin-top:5px;margin-right:15px;font-size:.75em;line-height:2em;color:#FFF;text-align:center;background-color:#767676;-webkit-border-top-right-radius:0;border-top-right-radius:0;-webkit-border-bottom-right-radius:5px;border-bottom-right-radius:5px;-webkit-border-bottom-left-radius:5px;border-bottom-left-radius:5px;-webkit-border-top-left-radius:0;border-top-left-radius:0;-moz-border-radius-topright:0;-moz-border-radius-bottomright:5px;-moz-border-radius-bottomleft:5px;-moz-border-radius-topleft:0;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box}.calendar .calendar-day{display:block;padding:10px 3%;font-size:2.5em;background-color:#aaa}

dabblet.html

<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
<div class="boxes container test">
<div class="row-fluid">
	<div class="span6 offset3 sdf">
<section class="articles-hilighted box">
  <article itemscope="" itemtype="http://schema.org/BlogPosting" class="hentry hilighted-alfa">
        <figure class="hilighted-figure">
        <b><img src="http://placekitten.com/300/400" /></b>
    </figure>
        <div class="hentry-body">
      <header>
        <time class="calendar updated" itemprop="datePublished" datetime="2013-02-21T22:21:10+00:00" title="Thursday, February 21, 2013" pubdate="">
    		<span class="calendar-day">21</span>
    		<span class="calendar-month">FEB</span>  
		</time>
		<h2><a href="/#" itemprop="name">Lorem ipsum dolor sit amet conseq</a></h2>
      </header>
      <div class="hentry-content">
        <p>La façon de concevoir des sites Web a beaucoup évolué au cours des deux dernières années. Concevez-vous encore vos sites comme en 2009? Trouvez-vous vos sites lents? Êtes-vous web-responsable? Comment pouvez-vous être certain que votre pigiste, employé ou fournisseur fait un travail de qualité?</p>
      </div>
      <aside>
        <ul class="entry-tags"><li>Tags</li><li><a href="/blog/tag/favourites/" rel="tag">Favourites</a></li><li><a href="/blog/tag/good-practices/" rel="tag">good-practices</a></li><li><a href="/blog/tag/integration/" rel="tag">Integration</a></li><li><a href="/blog/tag/slides/" rel="tag">Slides</a></li><li><a href="/blog/tag/talk/" rel="tag">Talk</a></li></ul>      </aside>
    </div>   
  </article>
  <article itemscope="" itemtype="http://schema.org/BlogPosting" class="post-2652 post type-post status-publish format-aside hentry category-web-integration-review tag-architecture tag-favourites tag-frameworks tag-php tag-symfony2 hentry hilighted-bravo">
        <div class="hentry-body">
      <header>
        <time class="calendar updated" itemprop="datePublished" datetime="2012-07-23T13:37:51+01:00" title="Monday, July 23, 2012" pubdate="">
    <span class="calendar-day">23</span>
    <span class="calendar-month">JUL</span>  
</time>        <h2><a href="/blog/2012/07/choosing-a-framework-how-i-personally-define-what-is-hot-about-them-an-evaluation-process/" itemprop="name">Choosing a framework, how I personally define what is “hot” about them, an evaluation process (part 1)</a></h2>
      </header>
      <div class="hentry-content">
        <p>I do not want to say that I am an expert in programming languages, nor a PHP guru. But with my experience in web development and discussions with other community leaders from the Java, Ruby, Python, Javascript communities and with my own working in team, I learned stuff and here’s some of what I consider “hot”, in the PHP world, right now.</p>
      </div>
      <aside>
        <ul class="entry-tags"><li>Tags</li><li><a href="/blog/tag/architecture/" rel="tag">architecture</a></li><li><a href="/blog/tag/favourites/" rel="tag">Favourites</a></li><li><a href="/blog/tag/frameworks/" rel="tag">frameworks</a></li><li><a href="/blog/tag/php/" rel="tag">php</a></li><li><a href="/blog/tag/symfony2/" rel="tag">symfony2</a></li></ul>      </aside>
    </div>   
  </article>
  <article itemscope="" itemtype="http://schema.org/BlogPosting" class="post-2562 post type-post status-publish format-standard hentry category-programmation tag-favourites tag-patterns tag-twitter-bootstrap hentry hilighted-charlie">
        <div class="hentry-body">
      <header>
        <time class="calendar updated" itemprop="datePublished" datetime="2012-05-28T17:42:37+01:00" title="Monday, May 28, 2012" pubdate="">
    <span class="calendar-day">28</span>
    <span class="calendar-month">MAY</span>  
</time>        <h2><a href="/blog/2012/05/snippet-confirm-form-before-submitting-using-twitter-bootstrap-in-a-modal-window/" itemprop="name">Confirm form before submitting using Twitter Bootstrap in a Modal window [Snippet]</a></h2>
      </header>
      <div class="hentry-content">
        <p>Idea Have you ever wanted to create a way to confirm input before actually submitting the form. Automatically. My snippet’s goal is exactly for that purpose. The idea is that it reads the form inputs and labels, and generates a … <a href="https://renoirboulanger.com/blog/2012/05/snippet-confirm-form-before-submitting-using-twitter-bootstrap-in-a-modal-window/">Continued</a></p>
      </div>
      <aside>
        <ul class="entry-tags"><li>Tags</li><li><a href="/blog/tag/favourites/" rel="tag">Favourites</a></li><li><a href="/blog/tag/patterns/" rel="tag">patterns</a></li><li><a href="/blog/tag/twitter-bootstrap/" rel="tag">twitter-bootstrap</a></li></ul>      </aside>
    </div>   
  </article>
</section>
	</div>
</div>
</div>

settings.json

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