Papillard

<nav class="navbar navbar-fixed-top">
  <div class="navbar-inner" id="custom-nav">
    <a class="brand" href="#">
      <img src="logo.png" id="logo">
    </a>
    <ul class="nav pull-right">
      <li>
        <a href="http://www.facebook.com/lewagonformation" target="_blank">
          <i class="icon-facebook-sign icon-4x social_icon"></i>
        </a>

Papillard

#custom-nav{
  background: white;
  height: 100px;
  padding-left: 40px;
  padding-right: 40px;
  border-bottom: 2px solid lightgrey;
}
.navbar .brand{
  line-height: 80px;
}

Papillard

<div class="my-container narrow josefin">
  <div class="row-fluid">
    <div class="span6">
      <img src="html.png">
    </div>
    <div class="span6">
	<h1 class="big">
	  Hot & Tasty Markup Learning..
	</h1>
    </div>

Papillard

/* narrow container */
.narrow{
  padding-left: 200px;
  padding-right: 200px;
}

/* custom font */
.josefin{
  font-family: 'Josefin Slab', serif;
}

Papillard

<div class="my-container narrow grey">
  <div class="row-fluid">
    <div class="span4 step center">
      <img src="img1.png">
      <h3>Choose your markup</h3>
      <p>Pick them in our templates : a navbar, a footer section..</p>
    </div>
    <div class="span4 step center">
      <img src="img2.png">
      <h3>Add some spicy CSS</h3>

Papillard

/* narrow container */
.narrow{
  padding-left: 200px;
  padding-right: 200px;
}

/* grey container */
.grey{
  background: rgb(228,227,212);
}

Papillard

<div class="my-container narrow white">
  <div class="row-fluid">
    <div class="span6">
      <div class="row-fluid">
        <div class="span12">
          <img src="css.png">
	</div>
      </div>
    </div>
    <div class="span6">

Papillard

/* narrow container */
.narrow{
  padding-left: 200px;
  padding-right: 200px;
}
 
/* white container */
.white{
  background: white;
}

Papillard

<div class="my-container with_background">
  <div class="row-fluid">
    <div class="span6 offset3">
      <div class="row-fluid">
        <div class="span6 step center">
          <h2>1</h2> 
	  <h3>Design goes first. Before any code.</h3>
	</div>
        <div class="span6 step center">
	  <h2>2</h2> 

Papillard

/* set container background image */
.with_background{
	background-image: url("peppers.jpg");
	background-repeat: no-repeat;
	background-size: 100%;
}

/* step block */
.step{
  background: rgb(255,255,255);