"Communication banner using FontAwesome"
Bootstrap 4.1.1 Snippet by Giobanno

<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous"> <style> .com-circle-container { border-radius: 100%; background: white; width: 100px; height: 100px; } .com-circle { margin: 0 auto; color: dodgerblue; padding-top: 25px; } .com-icon { font-size: 50px; } .com-title { font-size: 40px; padding-top: 5px; } .background-block { background-color: lavender; } </style> <div class="background-block"> <div class="container text-center py-5"> <div class="com-top"> <h1>No Communication Limits</h1> <div class="text w-75 mx-auto">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vitae feugiat orci. Aenean tempus erat eu sollicitudin venenatis. </div> </div> <div class="row pt-5"> <div class="col-lg-4 "> <div class="com-circle-container com-circle"> <i class="fas fa-phone com-icon"></i> </div> <div class="pb-5"> <div class="com-title">Phone Calls</div> <div class="w-75 m-auto">Nulla facilisi. Cras molestie felis id eleifend pharetra. Quisque tristique purus sed luctus posuere. </div> </div> </div> <div class="col-lg-4 "> <div class="com-circle-container com-circle"> <i class="fas fa-comment com-icon"></i> </div> <div class="pb-5"> <div class="com-title">Messages</div> <div class="w-75 m-auto">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vitae feugiat orci. Aenean tempus erat eu sollicitudin venenatis. </div> </div> </div> <div class="col-lg-4 "> <div class="com-circle-container com-circle"> <i class="fas fa-envelope com-icon"></i> </div> <div class="pb-5"> <div class="com-title">Mailing</div> <div class="w-75 m-auto">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vitae feugiat orci. Aenean tempus erat eu sollicitudin venenatis. </div> </div> </div> </div> </div> </div>

Related: See More


Questions / Comments: