<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 ----------> <!-- 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 --> <div class="container"> <div class="row profile"> <div class="col-md-3"> <div class="profile-sidebar"> <!-- SIDEBAR USERPIC --> <div class="profile-userpic"> <img src="http://keenthemes.com/preview/metronic/theme/assets/admin/pages/media/profile/profile_user.jpg" class="img-responsive" alt=""> </div> <!-- END SIDEBAR USERPIC --> <!-- SIDEBAR USER TITLE --> <div class="profile-usertitle"> <div class="profile-usertitle-name"> Marcus Doe </div> <div class="profile-usertitle-job"> Developer </div> </div> <!-- END SIDEBAR USER TITLE --> <!-- SIDEBAR MENU --> <div class="profile-usermenu"> <ul class="nav"> <li class="active"> <a href="#"> <i class="glyphicon glyphicon-home"></i> Overview </a> </li> <li> <a href="#"> <i class="glyphicon glyphicon-user"></i> Account Settings </a> </li> <!-- GROUPS --> <li data-toggle="collapse" data-target="#products" class="collapsed"> <a href="#"><i class="glyphicon glyphicon-glass"></i> Groups <span class="glyphicon glyphicon-menu-down"></span></a> </li> <ul class="sub-menu collapse" id="products"> <li class="active"><a href="#">CSS3 Animation</a></li> <li><a href="#">General</a></li> <li><a href="#">Buttons</a></li> <li><a href="#">Tabs & Accordions</a></li> <li><a href="#">Typography</a></li> <li><a href="#">FontAwesome</a></li> <li><a href="#">Slider</a></li> <li><a href="#">Panels</a></li> <li><a href="#">Widgets</a></li> <li><a href="#">Bootstrap Model</a></li> </ul> <li> <a href="#"> <i class="glyphicon glyphicon-flag"></i> Help </a> </li> <li> <a href = "#"> <i class = "glyphicon glyphicon-log-out"></i> Log Out </a> </li> </ul> </div> <!-- END MENU --> </div> </div> <div class = "col-md-9"> <form action=""> <div class="form-group has-feedback"> <label for="search" class="sr-only">Search</label> <input type="text" class="form-control" name="search" id="search" placeholder="search"> <span class="glyphicon glyphicon-search form-control-feedback"></span> </div> </form> </div> <div class="col-md-9"> <div class="profile-content"> <h1> Search Results for <%=query%> </h1> <div> </div> </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: #e54741; } /* 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: 50%; -webkit-border-radius: 50% !important; -moz-border-radius: 50% !important; border-radius: 50% !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: #d5443f; 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: #d5443f; 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: #ffe1e0; color: #bb3b36; } .profile-usermenu ul li.active { border-bottom: none; } .profile-usermenu ul li.active a { color: #bb3b36; background-color: #ffe1e0; border-left: 2px solid #ff7a75; margin-left: -2px; } /* Profile Content */ .profile-content { padding: 20px; background: #fff; min-height: 460px; } .search-form .form-group { float: right !important; transition: all 0.35s, border-radius 0s; width: 32px; height: 32px; background-color: #fff; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset; border-radius: 25px; border: 1px solid #ccc; } .search-form .form-group input.form-control { padding-right: 20px; border: 0 none; background: transparent; box-shadow: none; display:block; } .search-form .form-group input.form-control::-webkit-input-placeholder { display: none; } .search-form .form-group input.form-control:-moz-placeholder { /* Firefox 18- */ display: none; } .search-form .form-group input.form-control::-moz-placeholder { /* Firefox 19+ */ display: none; } .search-form .form-group input.form-control:-ms-input-placeholder { display: none; } .search-form .form-group:hover, .search-form .form-group.hover { width: 100%; border-radius: 4px 25px 25px 4px; } .search-form .form-group span.form-control-feedback { position: absolute; top: -1px; right: -2px; z-index: 2; display: block; width: 34px; height: 34px; line-height: 34px; text-align: center; color: #3596e0; left: initial; font-size: 14px; } .group-account { text-align: center; } .group-name-header { }