<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 ---------->
<div class="col-lg-6 col-sm-6">
<div class="card hovercard">
<div class="card-background">
<img class="card-bkimg" alt="" src="https://scontent-yyz1-1.xx.fbcdn.net/v/t1.0-9/386993_4003857588256_687108977_n.jpg?oh=9db72edaed6b0dc698b912ef761c4b76&oe=590135AF">
<!-- http://lorempixel.com/850/280/people/9/ -->
</div>
<div class="useravatar">
<img alt="" src="https://scontent-yyz1-1.xx.fbcdn.net/v/t1.0-9/14332936_10208878499193177_425094855539545754_n.jpg?oh=102f9cf34e678328bb3e9a08ccb2809f&oe=5921A08A">
</div>
<div class="card-info"> <span class="card-title">Courtney S. Chondon</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-primary" href="#tab1" data-toggle="tab"><span class="glyphicon glyphicon-star" aria-hidden="true"></span>
<div class="hidden-xs">About</div>
</button>
</div>
<div class="btn-group" role="group">
<button type="button" id="favorites" class="btn btn-default" href="#tab2" data-toggle="tab"><span class="glyphicon glyphicon-heart" aria-hidden="true"></span>
<div class="hidden-xs">Portfolio</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">Contact</div>
</button>
</div>
<div class="btn-group" role="group">
<button type="button" id="favorites" class="btn btn-default" href="#tab4" data-toggle="tab"><span class="glyphicon glyphicon-heart" aria-hidden="true"></span>
<div class="hidden-xs">Blog</div>
</button>
</div>
</div>
<div class="well">
<div class="tab-content">
<div class="tab-pane fade in active" id="tab1">
<h3>Hello, My name is Courtney. I am born/raised in Canada and I am currently in the Interactive Media Development Program at Confederation College.</h3>
</div>
<div class="tab-pane fade in" id="tab2">
<h3>Here is some of my work!</h3>
<img alt="An artwork showing a female fadding into the fire as it surrounds her and she holds it in her hands." class="img-responsive" src="https://courtneychondon.files.wordpress.com/2016/04/tracing-artwork1.jpg">
<div class="para">
<h3>This is an artwork I made to represent 'The Fire Within Ourselves'.
<br><br>This artwork is part of a collage, this piece stands in the bottem right hand corner. Air, Water and Wind were in the other sides. Spirit (the element that binds all these elements together) was in the middle of all the artworks in a pure white circle.
<br><br> Fire is my favourite element and I have a strong belief that fire can be a symbol of almost anything (our desires, love for another, etc.). </h3>
</div>
</div>
<div class="tab-pane fade in" id="tab3">
<h3>Content Currently Unavailable</h3>
</div>
<div class="tab-pane fade in" id="tab4">
<h3>Hello, just currently in my Portfolio Development 1 class!</h3>
</div>
</div>
</div>
</div>
/* USER PROFILE PAGE */
.card {
margin-top: 20px;
padding: 30px;
background-color: rgba(214, 224, 226, 0.2);
-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: #fff;
background-color: rgba(255, 255, 255, 1);
}
.card.hovercard .card-background {
height: 130px;
}
.card-background img {
-webkit-filter: blur(0px);
-moz-filter: blur(0px);
-o-filter: blur(0px);
-ms-filter: blur(0px);
filter: blur(0px);
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: 30px;
line-height: 1;
color: white;
font-family: Apple Chancery;
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;
}
#stars, #favorites, #following, #favorites {
font-family: Herculanum;
color: white;
background-color: black;
}
.well {
font-size: 12px;
color: white;
font-family: Marion;
}
img {
border-style: solid;
border-width: 5px;
border-color: black;
}
.well {
background-color: #54009E;
}
.para {
background-color: black;
padding: 10px;
text-align: center;
color: #e14c26;
font-family: Luminari;
}
$(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");
});
});
