A Pen by Hervé.

index.jade

doctype html
html
  head
    title Curios
    script(src="../bower_components/jquery/dist/jquery.js")
    script(src="../bower_components/bootstrap/dist/js/bootstrap.js")
    link(rel="stylesheet", type="text/css", href="../bower_components/bootstrap/dist/css/bootstrap.css")
    link(rel="stylesheet", type="text/css", href="main.css")
      
  body
    .container
      .row
        .col-xs-12.col-md-2
          .row
            .col-xs-4.col-md-12
              .logo-container
                img(src="http://s10.postimg.org/plvzn2qq1/logo_03.png")              
            .col-xs-8.col-md-12
              .quote
                | _bones practiques per la sostenibilitat        
                |  en serveis de disseny grafic, interiorisme
                |  i decoracio per negocis i vivendes_          
              .main-menu  
                ul.list-unstyled
                  li filosofia
                  li nosaltres
                  li serveis
                  li projectes
                  li premsa

        .col-xs-6.col-md-3
          nav.navbar.navbar-default(role='navigation')
            .container-fluid
              // Brand and toggle get grouped for better mobile display 
              .navbar-header
                button.navbar-toggle(type='button', data-toggle='collapse', data-target='#bs-example-navbar-collapse-1')
                  span.sr-only Toggle navigation
                  span.icon-bar
                  span.icon-bar
                  span.icon-bar
              // Collect the nav links, forms, and other content for toggling 
              #bs-example-navbar-collapse-1.collapse.navbar-collapse
                h3 Negoci
                ul.list-unstyled
                  li Editorial Llibres del delicte
                  li Sala Ramona
                  li Cafeteria Dots
                  li FLoresteria pol.logo-container
                  li Aparador abril aigues mil                    
        .col-xs-6.col-md-7
          .content      
            .client
              | Client: Tactum perruquers Any: 2013
            .briefing
              | Briefing: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
            .solucio
              | Solucio: Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, elementumifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue.

lCxFg.markdown

lCxFg

A Pen by Hervé on CodePen.

License.

style.sass

@import "compass"
.content > div
	margin-bottom: 10px

.quote
	color: #B2B2B2	
	font-style: italic