<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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 rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" media="screen">
<div class="container">
<div class="row user-menu-container square">
<div class="col-md-7 user-details">
<div class="row coralbg white">
<div class="col-md-6 no-pad">
<div class="user-pad">
<h3>Welcome back, Jessica</h3>
<h4 class="white"><i class="fa fa-check-circle-o"></i> San Antonio, TX</h4>
<h4 class="white"><i class="fa fa-twitter"></i> CoolesOCool</h4>
<button type="button" class="btn btn-labeled btn-info" href="#">
<span class="btn-label"><i class="fa fa-pencil"></i></span>Update</button>
</div>
</div>
<div class="col-md-6 no-pad">
<div class="user-image">
<img src="https://farm7.staticflickr.com/6163/6195546981_200e87ddaf_b.jpg" class="img-responsive thumbnail">
</div>
</div>
</div>
<div class="row overview">
<div class="col-md-2 user-pad text-center">
<h3>POSTS</h3>
<h4>40</h4>
</div>
<div class="col-md-3 user-pad text-center">
<h3>FOLLOWERS</h3>
<h4>200</h4>
</div>
<div class="col-md-3 user-pad text-center">
<h3>RESPONSE TIME</h3>
<h4>1 DAY</h4>
</div>
<div class="col-md-4 user-pad text-center">
<h3>RATING</h3>
<span class="rating">
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
</span>
<!--
<fieldset class="rating">
<input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
<input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
<input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
<input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
<input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
<input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
<input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
<input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
<input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
<input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
</fieldset>
-->
</div>
</div>
</div>
<div class="col-md-1 user-menu-btns">
<div class="btn-group-vertical square" id="responsive">
<a href="#" class="btn btn-block btn-default active">
<i class="fa fa-bell-o fa-3x"></i>
</a>
<a href="#" class="btn btn-default">
<i class="fa fa-envelope-o fa-3x"></i>
</a>
<a href="#" class="btn btn-default">
<i class="fa fa-laptop fa-3x"></i>
</a>
<a href="#" class="btn btn-default">
<i class="fa fa-cloud-upload fa-3x"></i>
</a>
</div>
</div>
<div class="col-md-4 user-menu user-pad">
<div class="user-menu-content active">
<h3>
Recent Interactions
</h3>
<ul class="user-menu-list">
<li>
<h4><i class="fa fa-user coral"></i> Roselynn Smith followed you.</h4>
</li>
<li>
<h4><i class="fa fa-heart-o coral"></i> Jonathan Hawkins followed you.</h4>
</li>
<li>
<h4><i class="fa fa-paper-plane-o coral"></i> Gracie Jenkins followed you.</h4>
</li>
<li>
<button type="button" class="btn btn-labeled btn-success" href="#">
<span class="btn-label"><i class="fa fa-bell-o"></i></span>View all activity</button>
</li>
</ul>
</div>
<div class="user-menu-content">
<h3>
Your Inbox
</h3>
<ul class="user-menu-list">
<li>
<h4>From Roselyn Smith <small class="coral"><strong>NEW</strong> <i class="fa fa-clock-o"></i> 7:42 A.M.</small></h4>
</li>
<li>
<h4>From Jonathan Hawkins <small class="coral"><i class="fa fa-clock-o"></i> 10:42 A.M.</small></h4>
</li>
<li>
<h4>From Georgia Jennings <small class="coral"><i class="fa fa-clock-o"></i> 10:42 A.M.</small></h4>
</li>
<li>
<button type="button" class="btn btn-labeled btn-danger" href="#">
<span class="btn-label"><i class="fa fa-envelope-o"></i></span>View All Messages</button>
</li>
</ul>
</div>
<div class="user-menu-content">
<h3>
Trending
</h3>
<div class="row">
<div class="col-md-6">
<div class="view">
<div class="caption">
<p>47LabsDesign</p>
<a href="" rel="tooltip" title="Appreciate"><span class="fa fa-heart-o fa-2x"></span></a>
<a href="" rel="tooltip" title="View"><span class="fa fa-search fa-2x"></span></a>
</div>
<img src="http://24.media.tumblr.com/273167b30c7af4437dcf14ed894b0768/tumblr_n5waxesawa1st5lhmo1_1280.jpg" class="img-responsive">
</div>
<div class="info">
<p class="small" style="text-overflow: ellipsis">An Awesome Title</p>
<p class="small coral text-right"><i class="fa fa-clock-o"></i> Posted Today | 10:42 A.M.</small>
</div>
<div class="stats turqbg">
<span class="fa fa-heart-o"> <strong>47</strong></span>
<span class="fa fa-eye pull-right"> <strong>137</strong></span>
</div>
</div>
<div class="col-md-6">
<div class="view">
<div class="caption">
<p>47LabsDesign</p>
<a href="" rel="tooltip" title="Appreciate"><span class="fa fa-heart-o fa-2x"></span></a>
<a href="" rel="tooltip" title="View"><span class="fa fa-search fa-2x"></span></a>
</div>
<img src="http://24.media.tumblr.com/282fadab7d782edce9debf3872c00ef1/tumblr_n3tswomqPS1st5lhmo1_1280.jpg" class="img-responsive">
</div>
<div class="info">
<p class="small" style="text-overflow: ellipsis">An Awesome Title</p>
<p class="small coral text-right"><i class="fa fa-clock-o"></i> Posted Today | 10:42 A.M.</small>
</div>
<div class="stats turqbg">
<span class="fa fa-heart-o"> <strong>47</strong></span>
<span class="fa fa-eye pull-right"> <strong>137</strong></span>
</div>
</div>
</div>
</div>
<div class="user-menu-content">
<h2 class="text-center">
START SHARING
</h2>
<center><i class="fa fa-cloud-upload fa-4x"></i></center>
<div class="share-links">
<center><button type="button" class="btn btn-lg btn-labeled btn-success" href="#" style="margin-bottom: 15px;">
<span class="btn-label"><i class="fa fa-bell-o"></i></span>A FINISHED PROJECT
</button></center>
<center><button type="button" class="btn btn-lg btn-labeled btn-warning" href="#">
<span class="btn-label"><i class="fa fa-bell-o"></i></span>A WORK IN PROGRESS
</button></center>
</div>
</div>
</div>
</div>
<div class="row user-menu-container square">
<div class="card hovercard">
<div class="card-background">
<!-- http://lorempixel.com/850/280/people/9/ -->
</div>
<div class="card-info"> <span class="card-title">YOUR DASHBOARD</span>
</div>
</div>
<div class="btn-pref btn-group btn-group-justified btn-group-lg" role="group" aria-label="...">
<div class="btn-group" role="group">
<button type="button" id="stars" class="btn btn-default" href="#tab1" data-toggle="tab"><span class="glyphicon glyphicon-star" aria-hidden="true"></span>
<div class="hidden-xs">MY ADS</div>
</button>
</div>
<div class="btn-group " role="group">
<button type="button" id="favorites" class="btn btn-primary " href="#tab2" data-toggle="tab"><span class="glyphicon glyphicon-heart" aria-hidden="true"></span>
<div class="hidden-xs">MESSAGES</div>
</button>
</div>
<div class="btn-group" role="group">
<button type="button" id="following" class="btn btn-default" href="#tab3" data-toggle="tab"><span class="glyphicon glyphicon-user" aria-hidden="true"></span>
<div class="hidden-xs">FAQs</div>
</button>
</div>
<div class="btn-group" role="group">
<button type="button" id="following" class="btn btn-default" href="#tab4" data-toggle="tab"><span class="glyphicon glyphicon-user" aria-hidden="true"></span>
<div class="hidden-xs">ALL NOTIFICATIONS</div>
</button>
</div>
</div>
<div class="well">
<div class="tab-content">
<div class="tab-pane fade in" id="tab1">
<h3>This is 1</h3>
</div>
<div class="tab-pane fade in active " id="tab2">
<h3>This is tab 2</h3>
</div>
<div class="tab-pane fade in" id="tab3">
<h3>This is tab 3</h3>
</div>
<div class="tab-pane fade in" id="tab4">
<h3>This is tab 4</h3>
</div>
</div>
</div>
</div>
</div>
.square, .btn {
border-radius: 0px!important;
}
/* -- color classes -- */
.coralbg {
background-color: #FA396F;
}
.coral {
color: #FA396f;
}
.turqbg {
background-color: #46D8D2;
}
.turq {
color: #46D8D2;
}
.white {
color: #fff!important;
}
/* -- The "User's Menu Container" specific elements. Custom container for the snippet -- */
div.user-menu-container {
z-index: 10;
background-color: #fff;
margin-top: 20px;
background-clip: padding-box;
opacity: 0.97;
filter: alpha(opacity=97);
-webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
}
div.user-menu-container .btn-lg {
padding: 0px 12px;
}
div.user-menu-container h4 {
font-weight: 300;
color: #8b8b8b;
}
div.user-menu-container a, div.user-menu-container .btn {
transition: 1s ease;
}
div.user-menu-container .thumbnail {
width:100%;
min-height:200px;
border: 0px!important;
padding: 0px;
border-radius: 0;
border: 0px!important;
}
/* -- Vertical Button Group -- */
div.user-menu-container .btn-group-vertical {
display: block;
}
div.user-menu-container .btn-group-vertical>a {
padding: 20px 25px;
background-color: #46D8D2;
color: white;
border-color: #fff;
}
div.btn-group-vertical>a:hover {
color: white;
border-color: white;
}
div.btn-group-vertical>a.active {
background: #FA396F;
box-shadow: none;
color: white;
}
/* -- Individual button styles of vertical btn group -- */
div.user-menu-btns {
padding-right: 0;
padding-left: 0;
padding-bottom: 0;
}
div.user-menu-btns div.btn-group-vertical>a.active:after{
content: '';
position: absolute;
left: 100%;
top: 50%;
margin-top: -13px;
border-left: 0;
border-bottom: 13px solid transparent;
border-top: 13px solid transparent;
border-left: 10px solid #46D8D2;
}
/* -- The main tab & content styling of the vertical buttons info-- */
div.user-menu-content {
color: #323232;
}
ul.user-menu-list {
list-style: none;
margin-top: 20px;
margin-bottom: 0;
padding: 10px;
border: 1px solid #eee;
}
ul.user-menu-list>li {
padding-bottom: 8px;
text-align: center;
}
div.user-menu div.user-menu-content:not(.active){
display: none;
}
/* -- The btn stylings for the btn icons -- */
.btn-label {position: relative;left: -12px;display: inline-block;padding: 6px 12px;background: rgba(0,0,0,0.15);border-radius: 3px 0 0 3px;}
.btn-labeled {padding-top: 0;padding-bottom: 0;}
/* -- Custom classes for the snippet, won't effect any existing bootstrap classes of your site, but can be reused. -- */
.user-pad {
padding: 20px 25px;
}
.no-pad {
padding-right: 0;
padding-left: 0;
padding-bottom: 0;
}
.user-details {
background: #eee;
min-height: 333px;
}
.user-image {
max-height:200px;
overflow:hidden;
}
.overview h3 {
font-weight: 300;
margin-top: 15px;
margin: 10px 0 0 0;
font-size: 15px;
}
.overview h4 {
font-weight: bold!important;
font-size: 30px;
margin-top: 4px;
}
.overview .user-pad {
padding: 20px 0px;
}
.view {
position:relative;
overflow:hidden;
margin-top: 10px;
}
.view p {
margin-top: 20px;
margin-bottom: 0;
}
.caption {
position:absolute;
top:0;
right:0;
background: rgba(70, 216, 210, 0.44);
width:100%;
height:100%;
padding:2%;
display: none;
text-align:center;
color:#fff !important;
z-index:2;
}
.caption a {
padding-right: 10px;
color: #fff;
}
.info {
display: block;
padding: 10px;
background: #eee;
text-transform: uppercase;
font-weight: 300;
text-align: right;
}
.info p, .stats p {
margin-bottom: 0;
}
.stats {
display: block;
padding: 10px;
color: white;
}
.share-links {
border: 1px solid #eee;
padding: 15px;
margin-top: 15px;
}
.square, .btn {
border-radius: 0px!important;
}
.rating .fa-star {
font-size: 30px;
color: goldenrod;
margin-top: 4px;
}
@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);
fieldset, label { margin: 0; padding: 0; }
body{ margin: 20px; }
h1 { font-size: 1.5em; margin: 10px; }
/****** Style Star Rating Widget *****/
.rating > input { display: none; }
.rating > label:before {
margin: 5px;
font-size: 2.25em;
font-family: FontAwesome;
display: inline-block;
content: "\f005";
}
.rating > .half:before {
content: "\f089";
position: absolute;
}
.rating > label {
color: #ddd;
float: right;
}
/***** CSS Magic to Highlight Stars on Hover *****/
.rating > input:checked ~ label, /* show gold star when clicked */
.rating:not(:checked) > label:hover, /* hover current star */
.rating:not(:checked) > label:hover ~ label { color: #FFD700; } /* hover previous stars in list */
.rating > input:checked + label:hover, /* hover current star when changing rating */
.rating > input:checked ~ label:hover,
.rating > label:hover ~ input:checked ~ label, /* lighten current selection */
.rating > input:checked ~ label:hover ~ label { color: #FFED85; }
/* USER PROFILE PAGE */
.card {
margin-top: 5px;
padding: 10px;
background-color:#DDDDDD;
-webkit-border-top-left-radius:5px;
-moz-border-top-left-radius:5px;
border-top-left-radius:5px;
-webkit-border-top-right-radius:5px;
-moz-border-top-right-radius:5px;
border-top-right-radius:5px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.card.hovercard {
position: relative;
padding-top: 0;
overflow: hidden;
text-align: center;
background-color: #EEEEEE;
}
.card.hovercard .card-background {
height:40px;
}
.card-background img {
-webkit-filter: blur(25px);
-moz-filter: blur(25px);
-o-filter: blur(25px);
-ms-filter: blur(25px);
filter: blur(25px);
margin-left: -100px;
margin-top: -200px;
min-width: 130%;
}
.card.hovercard .useravatar {
position: absolute;
top: 15px;
left: 0;
right: 0;
}
.card.hovercard .useravatar img {
width: 100px;
height: 100px;
max-width: 100px;
max-height: 100px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
border: 5px solid rgba(255, 255, 255, 0.5);
}
.card.hovercard .card-info {
position: absolute;
bottom: 14px;
left: 0;
right: 0;
}
.card.hovercard .card-info .card-title {
padding:0 5px;
font-size: 20px;
line-height: 1;
color: #262626;
background-color: rgba(255, 255, 255, 0.1);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.card.hovercard .card-info {
overflow: hidden;
font-size: 12px;
line-height: 20px;
color: #737373;
text-overflow: ellipsis;
}
.card.hovercard .bottom {
padding: 0 20px;
margin-bottom: 17px;
}
.btn-pref .btn {
-webkit-border-radius:0 !important;
}
.btn-primary {
color: #fff;
background-color: #FA3F73;
border-color: #fff;
border-right-color: #FA3F73;
border-bottom-color: #FA3F73;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open>.dropdown-toggle.btn-primary {
color: #fff;
background-color: #FA3F73;
border-color: #fff;
border-right-color: #FA3F73;
border-bottom-color: #FA3F73;
}
.btn-primary:after {
content: '';
position: absolute;
left: 50%;
top: 102%;
margin-left: -13px;
border-bottom: 0;
border-top: 20px solid #46D8D2;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
}
.btn-default {
color: #fff;
background-color: #4bd9d3;
border-color: #fff;
border-right-color: #4bd9d3;
}
.btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default.active, .open>.dropdown-toggle.btn-default {
color: #fff;
background-color: #4BD9D3;
border-color: #fff;
border-right-color: #4bd9d3;
}
/* -- media query for user profile image -- */
@media (max-width: 767px) {
.user-image {
max-height: 400px;
}
}
$(document).ready(function() {
var $btnSets = $('#responsive'),
$btnLinks = $btnSets.find('a');
$btnLinks.click(function(e) {
e.preventDefault();
$(this).siblings('a.active').removeClass("active");
$(this).addClass("active");
var index = $(this).index();
$("div.user-menu>div.user-menu-content").removeClass("active");
$("div.user-menu>div.user-menu-content").eq(index).addClass("active");
});
});
$( document ).ready(function() {
$("[rel='tooltip']").tooltip();
$('.view').hover(
function(){
$(this).find('.caption').slideDown(250); //.fadeIn(250)
},
function(){
$(this).find('.caption').slideUp(250); //.fadeOut(205)
}
);
});
$(document).ready(function() {
$(".btn-pref .btn").click(function () {
$(".btn-pref .btn").removeClass("btn-primary").addClass("btn-default");
// $(".tab").addClass("active"); // instead of this do the below
$(this).removeClass("btn-default").addClass("btn-primary");
});
});
