callout-box

A callout box is an effective way to display a call-to-action on your website in between blocks of content in a way that draws your viewer in. In this tutorial, Solodev provides you with a highly effective callout box design that is mobile responsive and allows room for your logo, call-to-action, additional messaging, and a CTA button.

Tutorial

For detailed instructions, view Solodev's Adding a Callout Box to your Website article.

Demo

Check out a working example on JSFiddle.

HTML

The callout box design has the following basic HTML markup.

<div class="container">
   <div class="callout">
      <h5>Brought to you by <img class="by-webcorpco" src="https://www.solodev.com/assets/side-nav/logo.png" alt="webcorpco logo"></h5>
      <h4>Decide with Data.</h4>
      <p>The world's leading big data and business intelligence platform.</p>
      <a class="btn" href="">Get Started</a>
   </div>
</div>

CSS

All necessary CSS is included in callout-box.css

External Includes

This tutorial includes the following third-party resources.

<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="callout-box.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>