diff --git a/index.html b/index.html
index 1c7184e..6306bb0 100644
--- a/index.html
+++ b/index.html
@@ -70,7 +70,7 @@
   <ol class="breadcrumb">
     <li class="breadcrumb-item"><a href="#">Accueil</a></li>
     <li class="breadcrumb-item"><a href="#">Contenus</a></li>
-    <li class="breadcrumb-item active" aria-current="page">#Inktober2017 - Day 29. Masked</li>
+    <li class="breadcrumb-item active" aria-current="page">Article exemple</li>
   </ol>
 </nav>
 
@@ -139,6 +139,74 @@ In id suscipit elit.</code></pre>
 
 </article>
 
+<div class="previews-section prev-col-3">
+
+  <div class="preview-container">
+  <article class="card card-preview">
+      <a href="#" class="preview-link">
+        <div class="preview-item">
+		        <div class="preview-content"><p class="p-img"><img src="img/wmap.png" alt="Card image cap"></p></div>
+		      <div class="preview-overlay"><h1>Image Exemple</h1></div>
+		    </div>
+		  </a>
+    <aside class="card-body">
+      <div class="align-right"><time><small>Le 27/02/2017</small></time></div>
+      <div class="align-left"><i class="fa fa-tags"></i>&nbsp; <a href="" class="badge badge-primary">categorie</a> <a href="" class="badge badge-primary">categorie</a> <a href="" class="badge badge-primary">categorie</a> <a href="" class="badge badge-info">mot-clef</a> <a href="" class="badge badge-info">mot-clef</a> <a href="" class="badge badge-info">mot-clef</a> <a href="" class="badge badge-info">mot-clef</a> </div>
+      <div class="align-center comment-text"><a href="#">3 commentaires</a></div>
+    </aside>
+  </article>
+  </div>
+
+<div class="preview-container">
+  <article class="card card-preview">
+      <a href="#" class="preview-link">
+        <div class="preview-item">
+		        <div class="preview-content"><p>Proin bibendum felis sit amet nisl iaculis, <strong>vel blandit purus dictum</strong>. Maecenas ullamcorper tortor ac dolor pulvinar, id imperdiet arcu suscipit. Sed posuere lectus eu orci tristique maximus. Nulla facilisi. Aenean sed fermentum nisl. Donec sodales ligula eu est finibus, eu posuere ligula condimentum. Morbi arcu magna, varius id justo ac, aliquam luctus magna. Pellentesque a velit et ipsum euismod congue eget eu sem. <del>Nulla luctus est nec arcu volutpat blandit.</del> Quisque egestas, elit eu tempus tincidunt, mi libero porta purus, eget lobortis metus erat a dolor. Integer ac turpis lacinia, interdum nisl non, feugiat libero.</p></div>
+		      <div class="preview-overlay"><h1>Text Exemple</h1></div>
+		    </div>
+		  </a>
+    <aside class="card-body">
+      <div class="align-right"><time><small>Le 27/02/2017</small></time></div>
+      <div class="align-left"><i class="fa fa-tags"></i>&nbsp; <a href="" class="badge badge-primary">categorie</a> <a href="" class="badge badge-primary">categorie</a> <a href="" class="badge badge-primary">categorie</a> <a href="" class="badge badge-info">mot-clef</a> <a href="" class="badge badge-info">mot-clef</a> <a href="" class="badge badge-info">mot-clef</a> <a href="" class="badge badge-info">mot-clef</a> </div>
+      <div class="align-center comment-text"><a href="#">3 commentaires</a></div>
+    </aside>
+  </article>
+  </div>
+  
+  <div class="preview-container">
+  <article class="card card-preview">
+      <a href="#" class="preview-link">
+        <div class="preview-item">
+		        <div class="preview-content"><p>Proin bibendum felis sit amet nisl iaculis, <strong>vel blandit purus dictum</strong>. Maecenas ullamcorper tortor ac dolor pulvinar, id imperdiet arcu suscipit. Sed posuere lectus eu orci tristique maximus. Nulla facilisi. Aenean sed fermentum nisl. Donec sodales ligula eu est finibus, eu posuere ligula condimentum. Morbi arcu magna, varius id justo ac, aliquam luctus magna. Pellentesque a velit et ipsum euismod congue eget eu sem. <del>Nulla luctus est nec arcu volutpat blandit.</del> Quisque egestas, elit eu tempus tincidunt, mi libero porta purus, eget lobortis metus erat a dolor. Integer ac turpis lacinia, interdum nisl non, feugiat libero.</p></div>
+		      <div class="preview-overlay"><h1>Text Exemple</h1></div>
+		    </div>
+		  </a>
+    <aside class="card-body">
+      <div class="align-right"><time><small>Le 27/02/2017</small></time></div>
+      <div class="align-left"><i class="fa fa-tags"></i>&nbsp; <a href="" class="badge badge-primary">categorie</a> <a href="" class="badge badge-primary">categorie</a> <a href="" class="badge badge-primary">categorie</a> <a href="" class="badge badge-info">mot-clef</a> <a href="" class="badge badge-info">mot-clef</a> <a href="" class="badge badge-info">mot-clef</a> <a href="" class="badge badge-info">mot-clef</a> </div>
+      <div class="align-center comment-text"><a href="#">3 commentaires</a></div>
+    </aside>
+  </article>
+  </div>
+
+  <div class="preview-container">
+  <article class="card card-preview">
+      <a href="#" class="preview-link">
+        <div class="preview-item">
+		        <div class="preview-content"><p>Proin bibendum felis sit amet nisl iaculis, <strong>vel blandit purus dictum</strong>. Maecenas ullamcorper tortor ac dolor pulvinar, id imperdiet arcu suscipit. Sed posuere lectus eu orci tristique maximus. Nulla facilisi. Aenean sed fermentum nisl. Donec sodales ligula eu est finibus, eu posuere ligula condimentum. Morbi arcu magna, varius id justo ac, aliquam luctus magna. Pellentesque a velit et ipsum euismod congue eget eu sem. <del>Nulla luctus est nec arcu volutpat blandit.</del> Quisque egestas, elit eu tempus tincidunt, mi libero porta purus, eget lobortis metus erat a dolor. Integer ac turpis lacinia, interdum nisl non, feugiat libero.</p></div>
+		      <div class="preview-overlay"><h1>Text Exemple</h1></div>
+		    </div>
+		  </a>
+    <aside class="card-body">
+      <div class="align-right"><time><small>Le 27/02/2017</small></time></div>
+      <div class="align-left"><i class="fa fa-tags"></i>&nbsp; <a href="" class="badge badge-primary">categorie</a> <a href="" class="badge badge-primary">categorie</a> <a href="" class="badge badge-primary">categorie</a> <a href="" class="badge badge-info">mot-clef</a> <a href="" class="badge badge-info">mot-clef</a> <a href="" class="badge badge-info">mot-clef</a> <a href="" class="badge badge-info">mot-clef</a> </div>
+      <div class="align-center comment-text"><a href="#">3 commentaires</a></div>
+    </aside>
+  </article>
+  </div>
+
+</div>
+
 <section class="commentaires">
 <h3>Commentaires :</h3>