diff --git a/src/app/pages/typography/_typography.scss b/src/app/pages/typography/_typography.scss
index 3eb2d76..94db7aa 100644
--- a/src/app/pages/typography/_typography.scss
+++ b/src/app/pages/typography/_typography.scss
@@ -18,44 +18,276 @@ a {
 }
 
 h1 {
-  font-size: 36px;
-  line-height: 38px;
+  font-size: 32px;
+  line-height: 40px;
   margin-bottom: 14px;
   font-weight: 100;
 }
 
 h2 {
-  font-size: 26px;
-  line-height: 38px;
+  font-size: 24px;
+  line-height: 40px;
   margin-bottom: 10px;
   font-weight: 200;
 }
 
 h3 {
-  font-size: 22px;
-  line-height: 42px;
+  font-size: 20px;
+  line-height: 40px;
   margin-bottom: 6px;
   font-weight: 300;
 }
 
 h4 {
-  font-size: 19px;
-  line-height: 43px;
+  font-size: 18px;
+  line-height: 38px;
   margin-bottom: 5px;
 }
 
 h5 {
-  font-size: 16px;
-  line-height: 45px;
+  font-size: 15px;
+  line-height: 35px;
   margin-bottom: 3px;
 }
 
+.typography-document-samples {
+
+
+  .typography-document{
+  }
+
+  p {
+    margin: 0;
+  }
+
+  .typography-widget {
+
+    div.panel{
+      height: 620px;
+    }
+    height: 100%;
+    .panel-body {
+      padding: 15px 30px 0 30px;
+    }
+
+    .typography-widget-header {
+      text-align: center;
+      margin: 0;
+      width: 100%;
+      font-weight: 100;
+    }
+
+    .heading-widget {
+      text-align: center;
+
+      h1, h2, h3, h4, h5, h6 {
+        width: 100%;
+        font-weight: 100;
+      }
+
+      p {
+        line-height: 16px;
+        font-weight: 100;
+      }
+    }
+
+    .more-text-widget {
+      text-align: center;
+      font-size: 14px;
+
+      p {
+        line-height: 17px;
+      }
+
+      .gray {
+        color: #767676;
+      }
+
+      .black {
+        color: #585858;
+      }
+
+      .light-text {
+        font-weight: 100;
+      }
+
+      .regular-text {
+        font-weight: 600;
+      }
+
+      .upper-text {
+        text-transform: uppercase;
+      }
+
+      .bold-text {
+        font-weight: 900;
+      }
+
+      .small-text {
+        padding: 5px 0 24px 0;
+        p {
+          font-size: 9px;
+          font-weight: 100;
+          line-height: 10px;
+        }
+      }
+    }
+
+
+
+    .color-widget {
+      text-align: center;
+      font-size: 14px;
+      font-weight: 300;
+      p {
+        line-height: 17px;
+      }
+
+      .section-block{
+        margin: 14px 0;
+      }
+
+      .red-text p{
+        color: $dribble-color;
+      }
+
+      .blue-text p{
+        color: $primary;
+      }
+
+      .links {
+        h3 {
+          margin-bottom: 10px;
+        }
+        p {
+          margin-bottom: 0;
+          &.hovered {
+            a {
+              color: $danger;
+            }
+          }
+        }
+      }
+
+    }
+
+    .lists-widget{
+
+
+      font-weight: 100;
+      .list-header{
+        width: 100%;
+        font-weight: 100;
+        text-align: center;
+      }
+
+      .accent {
+        margin-top: 44px;
+        color: $dribble-color;
+        line-height: 14px;
+        font-size: 14px;
+        margin-bottom: 36px;
+        padding-left: 11px;
+        border-left: 4px solid $dribble-color;
+        margin-left: 13px;
+      }
+
+      ul.blur, ol.blur {
+        padding-left: 13px;
+        margin-bottom: 19px;
+        list-style: none;
+        padding-top: 1px;
+        li {
+          margin-top: 5px;
+          color: $default-text;
+          font-size: 14px;
+          ul, ol {
+            padding-left: 20px;
+            margin-bottom: 0;
+            list-style: none;
+          }
+        }
+      }
+
+      ul.blur {
+        li {
+          &:before {
+            content: "• ";
+            color: $dribble-color;
+            width: 10px;
+            display: inline-block;
+          }
+        }
+      }
+
+      ol.blur {
+        counter-reset: section;
+        li {
+          color: $dribble-color;
+          padding-left: 0;
+          line-height: 14px;
+          position: relative;
+          span {
+            color: $default-text;
+            display: block;
+          }
+          ol {
+            padding-left: 0;
+            margin-left: 12px;
+          }
+          &:before {
+            content: counters(section, ".") ".";
+            counter-increment: section;
+            width: 19px;
+            position: absolute;
+            left: 0;
+            top: 0;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+          }
+        }
+        & > li {
+          span {
+            padding-left: 14px;
+          }
+        }
+        ol {
+          counter-reset: section;
+          & > li {
+            &:before {
+              width: 30px;
+            }
+            span {
+              padding-left: 27px
+            }
+          }
+          ol {
+            & > li {
+              &:before {
+                width: 40px;
+              }
+              span {
+                padding-left: 40px;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+}
+
+.columns-section{
+  background-color: white;
+}
+
 p {
   margin-bottom: 12px;
   color: $default-text;
   font-family: $font-family;
   font-size: 14px;
-  line-height: 24px;
 }
 
 p.small-text {
@@ -65,16 +297,7 @@ p.small-text {
   margin-bottom: 8px;
 }
 
-.accent {
-  margin-top: 5px;
-  color: $danger;
-  line-height: 24px;
-  font-size: 16px;
-  margin-bottom: 36px;
-  padding-left: 24px;
-  border-left: 6px solid $danger;
-  margin-left: 36px;
-}
+
 
 .cols-two {
   margin-bottom: 50px;
@@ -121,114 +344,30 @@ a.learn-more {
   margin-bottom: 10px;
 }
 
-ul.blur, ol.blur {
-  padding-left: 32px;
-  margin-bottom: 19px;
-  list-style: none;
-  padding-top: 1px;
-  li {
-    line-height: 22px;
-    color: $default-text;
-    font-size: 14px;
-    margin-bottom: 8px;
-    ul, ol {
-      padding-left: 20px;
-      margin-bottom: 0;
-      margin-top: 8px;
-      list-style: none;
-    }
-  }
-}
 
-ul.blur {
-  li {
-    &:before {
-      content: "• ";
-      color: $danger;
-      width: 15px;
-      display: inline-block;
-    }
-  }
-}
-
-ol.blur {
-  counter-reset: section;
-  li {
-    color: $danger;
-    font-weight: bold;
-    padding-left: 0;
-    position: relative;
-    span {
-      color: $default-text;
-      font-weight: normal;
-      display: block;
-    }
-    ol {
-      padding-left: 0;
-      margin-left: 34px;
-    }
-    &:before {
-      content: counters(section, ".") ".";
-      counter-increment: section;
-      width: 19px;
-      position: absolute;
-      left: 0;
-      top: 0;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-  }
-  & > li {
-    span {
-      padding-left: 19px;
-    }
-  }
-  ol {
-    counter-reset: section;
-    & > li {
-      &:before {
-        width: 30px;
-      }
-      span {
-        padding-left: 30px
-      }
-    }
-    ol {
-      & > li {
-        &:before {
-          width: 40px;
-        }
-        span {
-          padding-left: 40px;
-        }
-      }
-    }
-  }
-}
 
 .banner {
   position: relative;
-  padding-top: 17px;
-  margin-bottom: 27px;
+  margin-bottom: 20px;
 }
 
 .large-banner-wrapper {
   overflow: hidden;
-  height: 252px;
+  height: 400px;
   img {
+    height: 100%;
     display: block
   }
 }
 
 .banner-text-wrapper {
-  margin-top: -261px;
-  height: 261px;
+  margin-top: -400px;
+  height: 400px;
   text-align: center;
 }
 
 .banner-text {
-  padding: 30px 20px;
+  padding: 85px 90px 60px;
   display: inline-block;
   margin: 67px auto;
   background: #fff;
@@ -237,19 +376,32 @@ ol.blur {
   background: rgba(0, 0, 0, 0.75);
   color: #ffffff;
 
-  h3 {
+  h1 {
+    font-weight: bold;
     width: 100%;
     color: #ffffff;
+    margin-bottom: 10px;
   }
   p {
-    color: $warning;
+    font-size: 24px;
+    line-height: 30px;
+    font-weight: 300;
+    color: $primary;
     margin-bottom: 0px;
   }
 }
 
 @media (max-width: 600px) {
   .banner-text {
-    min-width: 0px;
+    padding: 55px 60px 30px;
+    min-width: 0;
+    h1{
+      font-size: 24px;
+    }
+
+    p{
+      font-size: 16px;
+    }
   }
 }
 
@@ -274,19 +426,7 @@ ol.blur {
   }
 }
 
-.links {
-  h2 {
-    margin-bottom: 10px;
-  }
-  p {
-    margin-bottom: 0;
-    &.hovered {
-      a {
-        color: $danger;
-      }
-    }
-  }
-}
+
 
 .section-block {
   padding-bottom: 12px;
@@ -301,7 +441,11 @@ ol.blur {
 }
 
 .section {
-  padding-top: 7px;
-  padding-bottom: 12px;
+  padding: 0 20px 50px 20px;
+}
+
+div.banner-column-panel{
+  padding: 0;
+  margin-bottom: 50px;
 }
 
diff --git a/src/app/pages/typography/typography.html b/src/app/pages/typography/typography.html
index 8d0d389..ea52e66 100644
--- a/src/app/pages/typography/typography.html
+++ b/src/app/pages/typography/typography.html
@@ -1,180 +1,272 @@
 <div class="widgets">
-  <div class="widgets-block">
-    <div class="panel panel-default invisible" zoom-in>
-      <div class="panel-body content-panel">
-        <div class="section-block">
-          <h1>H1. Blur Admin Heading</h1>
-
-          <p>Lorem ipsum dolor sit amet, id mollis iaculis mi nisl pulvinar, lacinia scelerisque pharetra, placerat
-            vestibulum eleifend pellentesque, mi nam. Odio amet viverra rutrum quisque, dolor elit, dolor mauris integer
-            ut non at sed. Quisque neque metus sit montes diam. Eiusmod id id volutpat gravida, eleifend consequat at,
-            id dolor sollicitudin. Ut id et libero mauris id. Dolor eget vel non aenean arcu, sociis neque molestie
-            fusce.</p>
-        </div>
-        <div class="section-block">
-          <h2>H2. Blur Admin Heading</h2>
-
-          <p>Lorem ipsum dolor sit amet, id mollis iaculis mi nisl pulvinar, lacinia scelerisque pharetra, placerat
-            vestibulum eleifend pellentesque, mi nam. Odio amet viverra rutrum quisque, dolor elit, dolor mauris integer
-            ut non at sed. Quisque neque metus sit montes diam. Eiusmod id id volutpat gravida, eleifend consequat at,
-            id dolor sollicitudin. </p>
-        </div>
-        <div class="section-block">
-          <h3>H3. Blur Admin Heading</h3>
-
-          <p>Lorem ipsum dolor sit amet, id mollis iaculis mi nisl pulvinar, lacinia scelerisque pharetra, placerat
-            vestibulum eleifend pellentesque, mi nam. Odio amet viverra rutrum quisque, dolor elit, dolor mauris integer
-            ut non at sed. Quisque neque metus sit montes diam. Eiusmod id id volutpat gravida, eleifend consequat at,
-            id dolor sollicitudin. Ut id et libero mauris id. Dolor eget vel non aenean arcu, sociis neque molestie
-            fusce.</p>
-        </div>
-        <div class="section-block">
-          <h4 class="color">H4. Color Blur Admin Heading</h4>
-
-          <p>Lorem ipsum dolor sit amet, id mollis iaculis mi nisl pulvinar, lacinia scelerisque pharetra, placerat
-            vestibulum eleifend pellentesque, mi nam. Odio amet viverra rutrum quisque, dolor elit, dolor mauris integer
-            ut non at sed. Quisque neque metus sit montes diam. Eiusmod id id volutpat gravida, eleifend consequat at,
-            id dolor sollicitudin. Ut id et libero mauris id. Dolor eget vel non aenean arcu, sociis neque molestie
-            fusce.</p>
-        </div>
-        <div class="section-block">
-          <h5 class="color">H5. Color Blur Admin Heading</h5>
-
-          <p>Lorem ipsum dolor sit amet, id mollis iaculis mi nisl pulvinar, lacinia scelerisque pharetra, placerat
-            vestibulum eleifend pellentesque, mi nam. Odio amet viverra rutrum quisque, dolor elit, dolor mauris integer
-            ut non at sed. Quisque neque metus sit montes diam. Eiusmod id id volutpat gravida, eleifend consequat at,
-            id dolor sollicitudin. Ut id et libero mauris id. Dolor eget vel non aenean arcu, sociis neque molestie
-            fusce.</p>
-        </div>
-
-        <div class="accent">Important text fragment. Lorem ipsum dolor sit amet, id mollis iaculis mi nisl pulvinar,
-          lacinia scelerisque pharetra, placerat vestibulum eleifend pellentesque, mi nam. Lorem ipsum dolor sit amet,
-          id mollis iaculis mi nisl pulvinar, lacinia scelerisque pharetra, placerat vestibulum eleifend pellentesque,
-          mi nam.
-        </div>
-
-        <div class="section-block">
-          <p class="small-text">Secondary text. Lorem ipsum dolor sit amet, id mollis iaculis mi nisl pulvinar, lacinia
-            scelerisque pharetra, placerat vestibulum eleifend pellentesque, mi nam.</p>
-
-          <p class="small-text">Lorem ipsum dolor sit amet, id mollis iaculis mi nisl pulvinar, lacinia scelerisque
-            pharetra, placerat vestibulum eleifend pellentesque, mi nam.</p>
-        </div>
-
-        <div class="section">
-          <h2>Columns</h2>
-
-          <div class="row">
-            <div class="col-sm-6">
-              <div class="img-wrapper"><img src="img/typo03.png" alt="" title=""/></div>
-              <p>Vel elit, eros elementum, id lacinia, duis non ut ut tortor blandit. Mauris <a
-                  href>dapibus</a> magna rutrum. Ornare neque suspendisse <a
-                  href>phasellus wisi</a>, quam cras pede rutrum suspendisse, <a
-                  href>felis amet eu</a>. Congue magna elit quisque quia, nullam justo sagittis,
-                ante erat libero placerat, proin condimentum consectetuer lacus. Velit condimentum velit, sed penatibus
-                arcu nulla.</p>
+  <div class="typography-document-samples row-fluid">
+    <div class="col-md-6 col-lg-3 col-sm-6 col-xs-12 typography-document">
+      <div class="widgets-block typography-widget">
+        <div class="panel panel-default invisible with-scroll" zoom-in>
+          <div class="panel-body content-panel heading-widget">
+            <div class="section-block">
+              <h2 class="typography-widget-header">Text Size</h2>
             </div>
-            <div class="col-sm-6">
-              <div class="img-wrapper"><img src="img/typo01.png" alt="" title=""/></div>
-              <p>Et suspendisse, adipiscing fringilla ornare sit ligula sed, vel nam. Interdum et justo nulla, fermentum
-                lobortis purus ut eu, duis nibh dolor massa tristique elementum, nibh iste potenti risus fusce aliquet
-                fusce, ullamcorper debitis primis arcu tellus vestibulum ac.</p>
-            </div>
-          </div>
+            <div class="section-block">
+              <h1>H1. Heading 1</h1>
 
-          <div class="separator"></div>
+              <p>Lorem ipsum dolor sit amet, id mollis iaculis mi nisl </p>
 
-          <div class="row">
-            <div class="col-sm-4">
-              <h4>Column heading example</h4>
+              <p>pulvinar, lacinia scelerisque pharetra, placerat
+                vestibulum eleifend pellentesque, mi nam.</p>
             </div>
-            <div class="col-sm-4">
-              <h4>Yet another column heading example</h4>
+            <div class="section-block">
+              <h2>H2. Heading 2</h2>
+
+              <p>Lorem ipsum dolor sit amet, id mollis iaculis mi nisl pulvinar, lacinia scelerisque pharetra, placerat
+                vestibulum eleifend pellentesque, mi nam.</p>
             </div>
-            <div class="col-sm-4">
-              <h4>Third column heading example</h4>
+            <div class="section-block">
+              <h3>H3. Heading 3</h3>
+
+              <p>Lorem ipsum dolor sit amet, id mollis iaculis mi nisl pulvinar, lacinia scelerisque pharetra, placerat
+                vestibulum eleifend pellentesque, mi nam.</p>
             </div>
-          </div>
-          <div class="row">
-            <div class="col-sm-4">
-              <div class="img-wrapper"><img src="img/typo04.png" alt=""/></div>
-              <p>Eget augue, lacus erat ante egestas scelerisque aliquam, metus molestie leo in habitasse magna
-                maecenas</p>
-              <a href class="learn-more">Lean more</a>
+            <div class="section-block">
+              <h4>H4. Heading 4</h4>
+
+              <p>Lorem ipsum dolor sit amet, id mollis iaculis mi nisl pulvinar, lacinia scelerisque pharetra, placerat
+                vestibulum eleifend pellentesque, mi nam.</p>
             </div>
-            <div class="col-sm-4">
-              <div class="img-wrapper"><img src="img/typo05.png" alt=""/></div>
-              <p>Augue massa et parturient, suspendisse orci nec scelerisque sit, integer nam mauris pede consequat in
-                velit</p>
-              <a href class="learn-more">Lean more</a>
-            </div>
-            <div class="col-sm-4">
-              <div class="img-wrapper"><img src="img/typo06.png" alt=""/></div>
-              <p>Eget turpis, tortor lobortis porttitor, vestibulum nullam vehicula aliquam</p>
-              <a href class="learn-more">Lean more</a>
+            <div class="section-block">
+              <h5>H5. Heading 5</h5>
+
+              <p>Lorem ipsum dolor sit amet, id mollis iaculis mi nisl pulvinar, lacinia scelerisque pharetra.</p>
             </div>
           </div>
         </div>
+      </div>
+    </div>
+    <div class="col-md-6 col-lg-3 col-sm-6 col-xs-12 typography-document">
+      <div class="widgets-block typography-widget">
+        <div class="panel panel-default invisible with-scroll" zoom-in>
+          <div class="panel-body content-panel more-text-widget">
+            <div class="section-block">
+              <h2 class="typography-widget-header">Some more text</h2>
+            </div>
+            <div class="section-block light-text">
+              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor, quis
+                ullamcorper ligula sodales at. Nulla tellus elit, varius non commodo eget, mattis vel eros. In sed
+                ornare
+                nulla. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis
+                parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.
+              </p>
+            </div>
 
-        <div class="separator"></div>
+            <div class="section-block regular-text">
+              <p>Curabitur bibendum ornare dolor, quis ullamcorper ligula dfgz`zzsodales at. Nullam quis risus eget urna
+                mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
+                ridiculus
+                mus. Nullam id dolor id nibh ultricies vehicula ut id elit. In sed ornare nulla
+              </p>
+            </div>
+            <div class="section-block upper-text bold-text">
+              <p class="black">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor,
+                quis
+                ullamcorper ligula sodales at. Nulla tellus elit, varius non commodo eget, mattis vel eros. In sed
+                ornare
+                nulla. </p>
+            </div>
+            <div class="section-block bold-text">
+              <p class="black">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor,
+                quis
+                ullam-corper ligula sodales at. Nulla tellus elit, varius non commodo eget, mattis vel eros. In sed
+                ornare
+                nulla.
+              </p>
+            </div>
+            <div class="section-block small-text">
+              <p>Secondary text. Lorem ipsum dolor sit amet, id mollis iaculis mi nisl pulvinar,</p>
 
-        <h5>Unordered list:</h5>
-        <ul class="blur">
-          <li>Lorem ipsum dolor sit amet</li>
-          <li>Сlacinia scelerisque pharetra
-            <ul>
-              <li>Dui rhoncus quisque integer lorem
-                <ul>
-                  <li>Libero iaculis vestibulum eu vitae phasellus enim</li>
-                </ul>
-              </li>
-            </ul>
-          </li>
-          <li>Nisl lectus nibh habitasse suspendisse ut</li>
-          <li>Posuere cursus hac, vestibulum wisi nulla bibendum fames, magna vel turpis dis nibh</li>
-        </ul>
+              <p>lacinia scelerisque pharetra, placerat vestibulum eleifend</p>
 
-        <h5>Ordered Lists:</h5>
-        <ol class="blur">
-          <li><span>Eu non nec cursus quis mollis, amet quam nec quam</span></li>
-          <li><span>Et suspendisse, adipiscing fringilla ornare sit ligula sed</span>
-            <ol>
-              <li><span>Interdum et justo nulla</span>
-                <ol>
-                  <li><span>Magna amet, suscipit suscipit non amet fames sed erat</span></li>
-                </ol>
-              </li>
-            </ol>
-          </li>
-          <li><span>Metus duis eu non eu ridiculus turpis</span></li>
-          <li><span>Neque egestas id fringilla consectetuer justo curabitur, wisi magna neque commodo volutpat</span>
-          </li>
-        </ol>
+              <p> pellentesque, mi nam.</p>
+            </div>
 
-        <div class="banner">
-          <div class="large-banner-wrapper">
-            <img src="img/banner.png" alt=""/>
           </div>
-
-          <div class="banner-text-wrapper">
-            <div class="banner-text">
-              <h3>Sample Banner Text</h3>
-
-              <p>Lorem ipsum dolor sit amet</p>
-
-              <p>Odio amet viverra rutrum</p>
+        </div>
+      </div>
+    </div>
+    <div class="col-md-6 col-lg-3 col-sm-6 col-xs-12 typography-document">
+      <div class="widgets-block typography-widget">
+        <div class="panel panel-default invisible with-scroll" zoom-in>
+          <div class="panel-body content-panel lists-widget">
+            <div class="section-block">
+              <h2 class="typography-widget-header">Lists</h2>
+            </div>
+            <div class="section-block">
+              <h5 class="list-header">Unordered list:</h5>
+              <ul class="blur">
+                <li>Lorem ipsum dolor sit amet</li>
+                <li>Сlacinia scelerisque pharetra
+                  <ul>
+                    <li>Dui rhoncus quisque integer lorem
+                      <ul>
+                        <li>Libero iaculis vestibulum eu vitae</li>
+                      </ul>
+                    </li>
+                  </ul>
+                </li>
+                <li>Nisl lectus nibh habitasse suspendisse ut</li>
+                <li><span>Posuere cursus hac, vestibulum wisi nulla bibendum</span></li>
+              </ul>
+              <h5 class="list-header">Ordered Lists:</h5>
+              <ol class="blur">
+                <li><span>Eu non nec cursus quis mollis, amet quam nec</span></li>
+                <li><span>Et suspendisse, adipiscing fringilla ornare sit ligula sed</span>
+                  <ol>
+                    <li><span>Interdum et justo nulla</span>
+                      <ol>
+                        <li><span>Magna amet, suscipit suscipit non amet</span></li>
+                      </ol>
+                    </li>
+                  </ol>
+                </li>
+                <li><span>Metus duis eu non eu ridiculus turpis</span></li>
+                <li>
+                  <span>Neque egestas id fringilla consectetuer justo curabitur, wisi magna neque commodo volutpat</span>
+                </li>
+              </ol>
+              <div class="accent">Important text fragment. Lorem ipsum dolor sit amet, id mollis iaculis mi nisl
+                pulvinar,
+                lacinia scelerisque pharetra.
+              </div>
             </div>
           </div>
-
-          <div class="photo-desc"><p class="small-text">Banner Description Text</p></div>
         </div>
+      </div>
+    </div>
+    <div class="col-md-6 col-lg-3 col-sm-6 col-xs-12 typography-document">
+      <div class="widgets-block typography-widget">
+        <div class="panel panel-default invisible with-scroll" zoom-in>
+          <div class="panel-body content-panel color-widget">
+            <div class="section-block">
+              <h2 class="typography-widget-header">Text Color</h2>
+            </div>
 
-        <div class="links">
-          <h2>Links</h2>
+            <div class="section-block red-text ">
+              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor, quis
+                ullamcorper ligula sodales at. Nulla tellus elit, varius non commodo eget, mattis vel eros. In sed
+                ornare
+                nulla. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis
+                dis
+                parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.
+              </p>
+            </div>
 
-          <p><a href>Active link — #41bee9</a></p>
+            <div class="section-block blue-text ">
+              <p>Curabitur bibendum ornare dolor, quis ullamcorper ligula dfgz`zzsodales at. Nullam quis risus eget
+                urna
+                mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
+                ridiculus
+                mus. Nullam id dolor id nibh ultricies vehicula ut id elit. In sed ornare nulla
+              </p>
+            </div>
 
-          <p class="hovered"><a href>Hover link — #9d498c</a></p>
+            <div class="section-block links">
+              <p>Lorem ipsum <a href>dolor</a> sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor,
+                quis
+                <a href>ullamcorper</a> ligula sodales at. Nulla tellus elit, varius non commodo eget, <a
+                    href>mattis</a> vel eros. In sed ornare
+                nulla.
+              </p>
+            </div>
+
+            <div class="section-block links">
+              <p><a href>Active link — #41bee9</a></p>
+
+              <p class="hovered"><a href>Hover link — #9d498c</a></p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="row-fluid">
+    <div class="col-lg-12 col-sm-12 col-xs-12">
+      <div class="widgets-block">
+        <div class="panel panel-default invisible with-scroll" zoom-in>
+          <div class="panel-body content-panel banner-column-panel">
+            <div class="banner">
+              <div class="large-banner-wrapper">
+                <img src="img/banner.png" alt=""/>
+              </div>
+              <div class="banner-text-wrapper">
+                <div class="banner-text">
+                  <h1>Simple Banner Text</h1>
+
+                  <p>Lorem ipsum dolor sit amet</p>
+
+                  <p>Odio amet viverra rutrum</p>
+                </div>
+              </div>
+            </div>
+            <div class="section">
+              <h2>Columns</h2>
+
+              <div class="row">
+                <div class="col-sm-6">
+                  <div class="img-wrapper"><img src="img/typo03.png" alt="" title=""/></div>
+                  <p>Vel elit, eros elementum, id lacinia, duis non ut ut tortor blandit. Mauris <a
+                      href>dapibus</a> magna rutrum. Ornare neque suspendisse <a
+                      href>phasellus wisi</a>, quam cras pede rutrum suspendisse, <a
+                      href>felis amet eu</a>. Congue magna elit quisque quia, nullam justo sagittis,
+                    ante erat libero placerat, proin condimentum consectetuer lacus. Velit condimentum velit, sed
+                    penatibus
+                    arcu nulla.</p>
+                </div>
+                <div class="col-sm-6">
+                  <div class="img-wrapper"><img src="img/typo01.png" alt="" title=""/></div>
+                  <p>Et suspendisse, adipiscing fringilla ornare sit ligula sed, vel nam. Interdum et justo nulla,
+                    fermentum
+                    lobortis purus ut eu, duis nibh dolor massa tristique elementum, nibh iste potenti risus fusce
+                    aliquet
+                    fusce, ullamcorper debitis primis arcu tellus vestibulum ac.</p>
+                </div>
+              </div>
+
+              <div class="separator"></div>
+
+              <div class="row">
+                <div class="col-sm-4">
+                  <h4>Column heading example</h4>
+                </div>
+                <div class="col-sm-4">
+                  <h4>Yet another column heading example</h4>
+                </div>
+                <div class="col-sm-4">
+                  <h4>Third column heading example</h4>
+                </div>
+              </div>
+              <div class="row">
+                <div class="col-sm-4">
+                  <div class="img-wrapper"><img src="img/typo04.png" alt=""/></div>
+                  <p>Eget augue, lacus erat ante egestas scelerisque aliquam, metus molestie leo in habitasse magna
+                    maecenas</p>
+                  <a href class="learn-more">Lean more</a>
+                </div>
+                <div class="col-sm-4">
+                  <div class="img-wrapper"><img src="img/typo05.png" alt=""/></div>
+                  <p>Augue massa et parturient, suspendisse orci nec scelerisque sit, integer nam mauris pede consequat
+                    in
+                    velit</p>
+                  <a href class="learn-more">Lean more</a>
+                </div>
+                <div class="col-sm-4">
+                  <div class="img-wrapper"><img src="img/typo06.png" alt=""/></div>
+                  <p>Eget turpis, tortor lobortis porttitor, vestibulum nullam vehicula aliquam</p>
+                  <a href class="learn-more">Lean more</a>
+                </div>
+              </div>
+              <div class="separator"></div>
+            </div>
+          </div>
         </div>
       </div>
     </div>
diff --git a/src/assets/pictures/banner.png b/src/assets/pictures/banner.png
index 0281ab7..f49b8f4 100644
Binary files a/src/assets/pictures/banner.png and b/src/assets/pictures/banner.png differ