"Interactive Resume"
Bootstrap 3.3.0 Snippet by GeeksRock

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <link data-require="bootstrap@3.3.1" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" /> <script data-require="bootstrap@3.3.1" data-semver="3.3.1" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container container-fluid"> <div class="panel panel-default<p></p>"> <div class="page-header"> <h1 id="page-header">Michelle M. Edmondson<br> <small>Software Design and Development Professional</small> </h1> </div> </div> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4"> <div class="card bs-callout" id="contact-card"> <h2 data-toggle="tooltip" data-placement="right" title="View my contact details"> <span class="glyphicon glyphicon-envelope"></span> Contact Me <span class="label label-default"></span> </h2> </div> </div> <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4"> <div class="card bs-callout" id="about-card"> <h2 data-toggle="tooltip" data-placement="right" title="Learn more about me"> <span class="glyphicon glyphicon-user"></span> About Me <span class="label label-default"></span> </h2> </div> </div> <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4"> <div class="card bs-callout" id="moniker-card"> <h2 data-toggle="tooltip" data-placement="right" title="Online moniker usage"> <span class="glyphicon glyphicon-log-in"></span> Geeks Rock <span class="label label-default"></span> </h2> </div> </div> </div> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6"> <div class="card bs-callout" id="contact-card"> <h2 data-toggle="tooltip" data-placement="right" title="Employment Details"> <span class="glyphicon glyphicon-tasks"></span> Employment <span class="label label-default"></span> </h2> </div> </div> <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6"> <div class="card bs-callout" id="about-card"> <h2 data-toggle="tooltip" data-placement="right" title="Education Details"> <span class="glyphicon glyphicon-book"></span> Education <span class="label label-default"></span> </h2> </div> </div> </div> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6"> <div class="card bs-callout" id="contact-card"> <h2 data-toggle="tooltip" data-placement="right" title="Programming Languages"> <span class="glyphicon glyphicon-list"></span> Languages <span class="label label-default"></span> </h2> </div> </div> <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6"> <div class="card bs-callout" id="about-card"> <h2 data-toggle="tooltip" data-placement="right" title="Information Technology"> <span class="glyphicon glyphicon-wrench"></span> Technology <span class="label label-default"></span> </h2> </div> </div> </div> </div> </body> </html>
/*COLOR SCHEME --> http://www.colorcombos.com/color-schemes/6622/ColorCombo6622.html*/ #page-header { text-align: center; } .card { padding: 20px; padding-top: 20px; padding-left: 20px; padding-rigt: 20px; padding-bottom: 20px; border: 1px solid green; margin-top: 20px; margin-bottom: 20px; margin-left: 0px; margin-right: 0px; border-left-width: 40px; border-radius: 3px; height: 100px; }
$(function() { $('[data-toggle="tooltip"]').tooltip(); });

Related: See More

Vue Argon Design System
Simple Resume template

Questions / Comments: