"FB-like profile box-mdi"
Bootstrap 3.3.0 Snippet by mdimannyit

<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 ----------> <link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'> <div class="container"> <div class="fb-profile"> <img align="left" class="fb-image-lg" src="https://pbs.twimg.com/profile_banners/19086518/1406629801/1500x500" alt="Profile image example"/> <img align="left" class="fb-image-profile thumbnail" src="https://pbs.twimg.com/profile_images/494048868930056192/bUSZV-oa_400x400.jpeg" alt="Profile image example"/> <div class="fb-profile-text"> <h1>Manny Designed It</h1> <p>Making Words Into a Brand.</p> </div> </div> </div> <!-- /container -->
/* ========================================================================== Author's custom styles ========================================================================== */ body { font-family: 'Roboto', sans-serif; } h1 {font-weight:900;} .fb-profile img.fb-image-lg{ z-index: 0; width: 100%; margin-bottom: 10px; } .fb-image-profile { margin: -80px 10px 0px 50px; z-index: 9; width: 20%; border-radius:50%; } @media (max-width:768px) { .fb-profile-text>h1{ font-weight: 700; font-size:16px; } .fb-image-profile { margin: -35px 10px 0px 25px; z-index: 9; width: 20%; border-radius:50%; } }

Related: See More


Questions / Comments: