"Help Center Layout"
Bootstrap 4.1.1 Snippet by sparkktv

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div id="sp-component" class="col-sm-12 col-md-12"><div class="sp-column "> </div> <div class="row"> <div class="col-sm-4"> <div class="documentation-index"> <a href="/documentation/sp-page-builder/sp-page-builder-2-x"> <img src="//www.joomshaper.com/images/2017/01/27/page-builder.png" alt="SP Page Builder"> </a> <h2>SP Page Builder</h2> <div class="documentation-shortdesc"> The complete knowledge base and best crafted guide to SP Page Builder you will ever need. </div> <a class="btn btn-doc-outline" href="/documentation/sp-page-builder/sp-page-builder-2-x">View Documentation</a> </div> </div> <div class="col-sm-4"> <div class="documentation-index"> <a href="/documentation/joomla-templates/rhino"> <img src="//www.joomshaper.com/images/2017/01/27/template.png" alt="Joomla Templates"> </a> <h2>Joomla Templates</h2> <div class="documentation-shortdesc"> Explore our extensive resources to get an in-depth understanding on our Joomla templates. </div> <a class="btn btn-doc-outline" href="/documentation/joomla-templates/rhino">View Documentation</a> </div> </div> <div class="col-sm-4"> <div class="documentation-index"> <a href="/documentation/joomla-extensions/sp-easyimagegallery"> <img src="//www.joomshaper.com/images/2017/01/27/extensions.png" alt="Joomla Extensions"> </a> <h2>Joomla Extensions</h2> <div class="documentation-shortdesc"> Learn ins and outs of our powerful, innovative and world wide used extensions for Joomla. </div> <a class="btn btn-doc-outline" href="/documentation/joomla-extensions/sp-easyimagegallery">View Documentation</a> </div> </div> <div class="col-sm-4"> <div class="documentation-index"> <a href="/documentation/helix-framework/helix3"> <img src="//www.joomshaper.com/images/2017/01/27/helix.png" alt="Helix Framework"> </a> <h2>Helix Framework</h2> <div class="documentation-shortdesc"> Learn everything about the Helix Framework. What’s Helix, how to use it and much more. </div> <a class="btn btn-doc-outline" href="/documentation/helix-framework/helix3">View Documentation</a> </div> </div> <div class="col-sm-4"> <div class="documentation-index"> <a href="https://www.joomshaper.com/faqs"> <img src="//www.joomshaper.com/images/2017/01/27/faq.png" alt="Faqs"> </a> <h2>Faqs</h2> <div class="documentation-shortdesc"> A set of ready answers to the most common questions asked by the users and members. </div> <a class="btn btn-doc-outline" href="https://www.joomshaper.com/faqs">View Faqs</a> </div> </div> <div class="col-sm-4"> <div class="documentation-index"> <a href="https://www.joomshaper.com/forums"> <img src="//www.joomshaper.com/images/2017/01/27/forums.png" alt="Forums"> </a> <h2>Forums</h2> <div class="documentation-shortdesc"> Share your experience and get solutions to any issue you may face with our products. </div> <a class="btn btn-doc-outline" href="https://www.joomshaper.com/forums">Access Forums</a> </div> </div> </div> </div></div>
.documentation-index {background: #fff;color: #818080;font-size: 16px;line-height: 1.8;padding: 80px 40px;margin-bottom: 30px;text-align: center;border-radius: 10px;border: 1px solid #e6f0f5;-webkit-transition: all 300ms;transition: all 300ms;} .documentation-index h2 {font-size: 22px;font-weight: 600;margin: 0 0 20px;} .documentation-index .btn-doc-outline {margin-top: 45px;padding: 15px 25px;font-size: 12px;text-transform: uppercase;line-height: 1;letter-spacing: 1px;color: #9b9b9b;border: 1px solid rgba(0, 0, 0, .1);} .documentation-index img {width: 108px;display: inline-block;margin-bottom: 70px;} .documentation-index:hover {-webkit-box-shadow: 0px 23px 25px 0px rgba(8, 47, 119, 0.1);box-shadow: 0px 23px 25px 0px rgba(8, 47, 119, 0.1);} .documentation-index .btn-doc-outline:hover{color:#333;border:1px solid #333;}

Related: See More


Questions / Comments: