<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 ----------> <!-- Edited User Profile Sidebar by @keenthemes for base.html A component of Metronic Theme - #1 Selling Bootstrap 3 Admin Theme in Themeforest: http://j.mp/metronictheme Licensed under MIT --> <div id="fb-root"></div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.7"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script> <div class="container"> <div class="row profile"> <div class="col-md-3"> <div class="profile-sidebar"> <!-- SIDEBAR USERPIC --> <div class="profile-userpic"> <img src="https://scontent-dft4-2.xx.fbcdn.net/v/t1.0-9/13887011_995565660557110_1567915088465375555_n.jpg?oh=38aec68d920a9d9779500edb6625b7d5&oe=5880FBF1" class="img-responsive" alt=""> </div> <!-- END SIDEBAR USERPIC --> <!-- SIDEBAR USER TITLE --> <div class="profile-usertitle"> <div class="profile-usertitle-name"> Your Name </div> <div class="profile-usertitle-job"> username </div> </div> <!-- END SIDEBAR USER TITLE --> <!-- SIDEBAR BUTTONS --> <div class="profile-userbuttons"> <button type="button" class="btn btn-success btn-sm">Follow</button> <button type="button" class="btn btn-danger btn-sm">Message</button> </div> <!-- END SIDEBAR BUTTONS --> <!-- SIDEBAR MENU --> <div class="profile-usermenu"> <ul class="nav"> <li class="active"> <a href="#"> <i class="glyphicon glyphicon-home"></i> My Dash</a> </li> <li> <a href="#"> <i class="glyphicon glyphicon-user"></i> Account Settings </a> </li> <li> <a href="#"> <i class="glyphicon glyphicon-flag"></i> Logout </a> </li> </ul> </div> <!-- END MENU --> </div> </div> <div class="col-md-9"> <div class="profile-content col-sm-6"> <div class="fb-page" data-href="https://www.facebook.com/FourOClockFive/" data-tabs="timeline, messages " data-small-header="true" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><blockquote cite="https://www.facebook.com/FourOClockFive/" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/FourOClockFive/">The Four O'Clock Five</a></blockquote></div> </div> <div class="profile-content col-sm-6"> <a class="twitter-timeline" href="https://twitter.com/FourOClockFive" height="500">Tweets by FourOClockFive</a> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script> </div> <div class="profile-content col-sm-6"> <iframe src="https://embed.spotify.com/?uri=spotify:track:2TpxZ7JUBn3uw46aR7qd6V" width="300" height="380" frameborder="0" allowtransparency="true"></iframe> </div> <div class="profile-content col-sm-6"> <iframe src="https://www.thefouroclockfive.com" width="300" height="380" frameborder="1" allowtransparency="true"></iframe> </div> </div> </div> </div> <center> <strong>Powered by <a href="http://j.mp/metronictheme" target="_blank">KeenThemes</a></strong> </center> <br> <br>

/*** User Profile Sidebar by @keenthemes A component of Metronic Theme - #1 Selling Bootstrap 3 Admin Theme in Themeforest: http://j.mp/metronictheme Licensed under MIT ***/ body { background: #F1F3FA; } /* Profile container */ .profile { margin: 20px 0; } /* Profile sidebar */ .profile-sidebar { padding: 20px 0 10px 0; background: #fff; } .profile-userpic img { float: none; margin: 0 auto; width: 50%; height: 70%; -webkit-border-radius: 20% !important; -moz-border-radius: 20% !important; border-radius: 20% !important; } .profile-usertitle { text-align: center; margin-top: 20px; } .profile-usertitle-name { color: #5a7391; font-size: 16px; font-weight: 600; margin-bottom: 7px; } .profile-usertitle-job { text-transform: uppercase; color: #5b9bd1; font-size: 12px; font-weight: 600; margin-bottom: 15px; } .profile-userbuttons { text-align: center; margin-top: 10px; } .profile-userbuttons .btn { text-transform: uppercase; font-size: 11px; font-weight: 600; padding: 6px 15px; margin-right: 5px; } .profile-userbuttons .btn:last-child { margin-right: 0px; } .profile-usermenu { margin-top: 30px; } .profile-usermenu ul li { border-bottom: 1px solid #f0f4f7; } .profile-usermenu ul li:last-child { border-bottom: none; } .profile-usermenu ul li a { color: #93a3b5; font-size: 14px; font-weight: 400; } .profile-usermenu ul li a i { margin-right: 8px; font-size: 14px; } .profile-usermenu ul li a:hover { background-color: #fafcfd; color: #5b9bd1; } .profile-usermenu ul li.active { border-bottom: none; } .profile-usermenu ul li.active a { color: #5b9bd1; background-color: #f6f9fb; border-left: 2px solid #5b9bd1; margin-left: -2px; } /* Profile Content */ .profile-content { padding: 20px; background: #fff; min-height: 460px; }