A Pen by Emmanuel B..

Gabarit-de-page-#1.markdown

Gabarit de page #1

A Pen by Emmanuel B. on CodePen.

License.

index.html

<div id="page">
  <header id="header">
    <h1>Mon site</h1>
    <nav class="main-nav">
      <ul>
        <li><a href="#">Lien 1</a></li>
        <li><a href="#">Lien 2</a></li>
        <li><a href="#">Lien 3</a></li>
        <li><a href="#">Lien 4</a></li>
        <li><a href="#">Lien 5</a></li>
        <li><a href="#">Lien 6</a></li>
      </ul>
    </nav>
  </header>

  <div id="main">
    <aside class="sidebar left">
      <h1>Sidebar gauche</h1>
      <ul>
        <li>Lorem ipsum dolor</li>
        <li>Recusandae, sint</li>
        <li>Natus, deleniti</li>
        <li>Officia, nesciunt</li>
      </ul>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, nulla, ipsum, tempora dolorum temporibus eaque vel ab voluptatem vero ullam sequi porro blanditiis nesciunt. Nostrum in veritatis quam unde maiores?</p>
    </aside>
    <!-- /sidebar left -->
    
    <aside class="sidebar right">
      <h1>Sidebar droite</h1>
      <ul>
        <li>Iste hic et</li>
        <li>Facere, fuga</li>
        <li>Quae, amet, ad ut a aut</li>
        <li>Corrupti, nostrum</li>
        <li>Veniam, mollitia</li>
        <li>Ut, architecto</li>
      </ul>
    </aside>
    <!-- /sidebar right -->
    
    <div class="content">
      <h2>Une liste d'articles !</h2>

      <article class="post">
        <header class="post-header">
          <h1>Le titre !</h1>
          <div class="date">tel jour, telle heure</div>  
        </header>
        
        <section class="post-content">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui, provident, suscipit nemo eveniet autem voluptate doloremque minima commodi ab illo neque nulla officia iste quod reprehenderit ea unde ratione vel!</p>
          <p>Numquam, molestias, rem nam ipsam tenetur quaerat explicabo pariatur reiciendis provident dolor autem temporibus est enim dolores aspernatur libero fugiat laborum perferendis iusto officiis commodi voluptatibus animi placeat. Illo, ipsum.</p>
        </section>
        
        <footer class="post-footer">
          Tags : #pouet, #hop, #haha
        </footer> 
      </article>
      
      <article class="post">
        <header class="post-header">
          <h1>Le titre !</h1>
          <div class="date">tel jour, telle heure</div>  
        </header>
        
        <section class="post-content">          
          <p>Dolor, sapiente, voluptates, iure autem fugiat maxime nobis modi tempore odit quibusdam in eaque explicabo sed eligendi est nulla aspernatur architecto doloribus labore atque ab ea quam iusto asperiores molestias.</p>
          <p>Corporis, asperiores, quae aspernatur esse deleniti delectus laborum nostrum cumque sint quisquam eos labore animi ipsam assumenda quaerat eius illo nemo. Delectus id quos dolore modi laboriosam molestias numquam voluptas!</p>
        </section>
        
        <footer class="post-footer">
          Tags : #pouet, #hop, #haha
        </footer> 
      </article>

    </div>
  </div>

  <footer id="footer">
    Mon site !
  </footer>
</div>

style.css

body {
  margin: 0;
  font: 400 14px/1.5em "Segoe UI", Verdana, serif;
  background: #f6e2dc;
  color: #2b2b2b;
  text-align: justify;
}

a {
  color: #2b2b2b;
}

#page {
  width: 960px;
  margin: 20px auto;
  padding: 10px;
  background: #dacf92;
}

h1, h2, h3 { font-weight: 400; margin-top: 0; font-size: 1.6em }

/** header
**/
#header {
  background: #cab060;
  padding: 10px;
  overflow: auto;
}

#header h1 {
  float: left;
  margin: 0;
}

.main-nav {
  float: right;
}

.main-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.main-nav li {
  display: inline-block;
}

.main-nav a {
  display: block;
  text-decoration: none;
  padding: 10px 20px;
  background: #50af98;
}

.main-nav a:hover {
  background: #71a736;
}

/** contenu
**/
#main {
  overflow: auto;
  margin: 10px 0;
}

.sidebar {
  width: 200px;
  padding: 10px;
  background: #71a736;
}

.sidebar.left {
  float: left;
  margin-right: 10px;
}

.sidebar.right {
  float: right;
  margin-left: 10px;
}

.content, .sidebar ~ .content {
  overflow: auto;
  padding: 10px;
  background: #50af98;
}

/** articles
**/
.post {
  background: #91cfc0;
  padding: 10px;
}

.post + .post {
  margin-top: 10px;
}

.post-header {
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #50af98;
}

.post-header h1 {
  margin-top: 0;
  color: #fff;
}

.post-header .date {
  font-style: italic;
}

.post-footer {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #50af98;
}

/** footer
**/
#footer {
  background: #cab060;
  padding: 20px;
  text-align: center;
}