TheGuide, Online Documentation

 Copy<h3>Brilliant code view</h3>
<p>This code window is amazing! You almost can put <strong>any HTML code</strong> inside it to show an example, or add any number of code tabs to top of this window in a very easy way.</p>

<hr>

<div class="row">
  <div class="col-md-6 list-view-item">
    <span>Code</span>
    <h5>Check our code viewers</h5>
    <p>You have a plenty of options to demonstrate your code and result in your documentation. You can pick the one that fits better in your context.</p>
    <a class="read-more" href="components.html#sec-code">Continue reading...</a>
  </div>

  <div class="col-md-6 list-view-item">
    <span>Content</span>
    <h5>Check our content viewers</h5>
    <p>Views are another way to display several related information together. Mostly you can use them to list the articles which is available in your documentation.</p>
    <a class="read-more" href="components.html#sec-content">Continue reading...</a>
  </div>
</div>

 Copy/*
== General
*/

.code-preview .btn {
  margin-bottom: 6px;
  margin-right: 2px;
}

/*
== Background images
*/
.bg-img-banner1 {
  background-image: url(../img/banner1.jpg);
}

.bg-img-banner2 {
  background-image: url(../img/banner2.jpg);
}

.bg-img-banner3 {
  background-image: url(../img/banner3.jpg);
}

 Copy// Back to top
$('#scroll-up').on( 'click', function() {
  $('html, body').animate({scrollTop : 0}, 900);
  return false;
});

//
// Offcanvas
//
$('[data-toggle="offcanvas"]').on('click', function (e) {

  e.preventDefault();

  $('body').toggleClass('offcanvas-show');
  
  if ($('body').hasClass('offcanvas-show')) {
    $('html').css('overflow', 'hidden');
  }
  else {
    $('html').css('overflow', 'visible');
  }
  
});