<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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 ---------->
<section >
<div class="container">
<div class="row">
<div class="col-md-4" style="max-width:220px; min-heigth:120px; background-color:#000000"></div>
<div class="col-md-8" style="min-heigth:180px; background-color:#000000">
<div class="board-inner">
<ul class="nav nav-tabs" id="myTab">
<div class="liner"></div>
<li class="active">
<a href="#home" data-toggle="tab" title="User Data">
<span class="round-tabs one">
<i class="glyphicon glyphicon-list-alt"></i>
</span>
</a></li>
<li><a href="#profile" data-toggle="tab" title="Events result">
<span class="round-tabs two">
<i class="glyphicon glyphicon-stats"></i>
</span>
</a>
</li>
<li><a href="#messages" data-toggle="tab" title="Messages">
<span class="round-tabs three">
<i class="glyphicon glyphicon-envelope"></i>
</span> </a>
</li>
<li><a href="#settings" data-toggle="tab" title="About">
<span class="round-tabs four">
<i class="glyphicon glyphicon-info-sign"></i>
</span>
</a></li>
<li><a href="#doner" data-toggle="tab" title="Leave a message">
<span class="round-tabs five">
<i class="glyphicon glyphicon-comment"></i>
</span> </a>
</li>
</ul></div></div>
<div class="spacer"></div>
<div class="col-md-4" style="max-width:220px">.col-md-4</div>
<div class="col-md-8">
<div class="board">
<div class="tab-content">
<div class="tab-pane active" id="home">
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">User Data</h3>
</div>
<div class="panel-body">
<div class="row">
<div class=" col-md-9 col-lg-6 ">
<table class="table table-user-information">
<tbody>
<tr>
<td>Sport:</td>
<td>Soccer</td>
</tr>
<tr>
<td>Age:</td>
<td>23</td>
</tr>
<tr>
<td>Gender:</td>
<td>Male</td>
</tr>
<tr>
<tr>
<td>Team:</td>
<td>The Crusaders</td>
</tr>
<tr>
<td>Position:</td>
<td>Forward</td>
</tr>
<tr>
<td>Height:</td>
<td>5'11</td>
</tr>
<td>Weight:</td>
<td>178
</td>
</tr>
</tbody>
</table>
</div>
<div class=" col-md-9 col-lg-6 ">
<table class="table table-user-information">
<tbody>
<tr>
<td>Flexibility:</td>
<td>4</td>
</tr>
<tr>
<td>Right Hand Grip Strength:</td>
<td>26.32</td>
</tr>
<tr>
<td>Left Hand Grip Strength:</td>
<td>23.31</td>
</tr>
<tr>
<tr>
<td>Wingspan:</td>
<td>40</td>
</tr>
<tr>
<td>Vertical Reach:</td>
<td>8'09</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="panel-footer">
<a data-original-title="Send Message" data-toggle="tooltip" type="button" class="btn btn-sm btn-primary"><i class="glyphicon glyphicon-envelope"></i></a>
</div>
</div>
</div>
<div class="tab-pane" id="profile">
GRAPHIC
</div>
<div class="tab-pane" id="messages">
<div class="panel panel-default widget">
<div class="panel-heading">
<span class="glyphicon glyphicon-comment"></span>
<h3 class="panel-title">
Messages</h3>
<!--<span class="label label-info">
78</span>-->
</div>
<div class="panel-body">
<ul class="list-group">
<li class="list-group-item">
<div class="row">
<div class="col-xs-2 col-md-1">
<img src="http://placehold.it/80" class="img-circle img-responsive" alt="" /></div>
<div class="col-xs-10 col-md-11">
<div>
<a href="#">
Congratulations</a>
<div class="mic-info">
By: <a href="#">Check My Athletics</a> on 12 Jun 2014
</div>
</div>
<div class="comment-text">
We would like to congratulate John on his achievement...
</div>
</div>
</div>
</li>
<li class="list-group-item">
<div class="row">
<div class="col-xs-2 col-md-1">
<img src="http://placehold.it/80" class="img-circle img-responsive" alt="" /></div>
<div class="col-xs-10 col-md-11">
<div>
<a href="#">Great Job</a>
<div class="mic-info">
By: <a href="#">Coacher</a> on 11 May 2014
</div>
</div>
<div class="comment-text">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim
</div>
</div>
</div>
</li>
</ul>
<a href="#" class="btn btn-primary btn-sm btn-block" role="button"><span class="glyphicon glyphicon-refresh"></span> More</a>
</div>
</div>
</div>
<div class="tab-pane" id="settings">
<h3 class="head text-center">About Me</h3>
<p class="narrow text-center">
Lorem ipsum dolor sit amet, his ea mollis fabellas principes. Quo mazim facilis tincidunt ut, utinam saperet facilisi an vim.
</p>
<p class="text-center">
<a href="" class="btn btn-success btn-outline-rounded green"> Edit <span style="margin-left:10px;" class="glyphicon glyphicon-pencil"></span></a>
</p>
</div>
<div class="tab-pane" id="doner">
<div class="form-group">
<label class="col-md-3 control-label" for="message">Your message</label>
<div class="col-md-9">
<textarea class="form-control" id="message" name="message" placeholder="Please enter your message here..." rows="5"></textarea>
</div>
</div>
<!-- Form actions -->
<div class="form-group">
<div class="col-md-12 text-right">
<button type="submit" class="btn btn-primary btn-lg">Submit</button>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</section>
@import url(http://fonts.googleapis.com/css?family=Roboto+Condensed:400,700);
/* written by riliwan balogun http://www.facebook.com/riliwan.rabo*/
.board{
width: 55%;
margin: 60px auto;
height: 500px;
background: #fff;
/*box-shadow: 10px 10px #ccc,-10px 20px #ddd;*/
}
.board .nav-tabs {
position: relative;
/* border-bottom: 0; */
/* width: 80%; */
margin: 40px auto;
margin-bottom: 0;
box-sizing: border-box;
}
.board > div.board-inner{
background: #fafafa url(http://subtlepatterns.com/patterns/shattered.png;)
background-size: 30%;
}
p.narrow{
width: 60%;
margin: 10px auto;
}
.liner{
height: 2px;
background: #ddd;
position: absolute;
width: 80%;
margin: 0 auto;
left: 0;
right: 0;
top: 50%;
z-index: 1;
}
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
color: #555555;
cursor: default;
/* background-color: #ffffff; */
border: 0;
border-bottom-color: transparent;
}
span.round-tabs{
width: 70px;
height: 70px;
line-height: 70px;
display: inline-block;
border-radius: 100px;
background: white;
z-index: 2;
position: absolute;
left: 0;
text-align: center;
font-size: 25px;
}
span.round-tabs.one{
color: rgb(161, 23, 11);border: 2px solid rgb(161, 23, 11);
}
li.active span.round-tabs.one{
background: #fff !important;
border: 2px solid #ddd;
color: rgb(161, 23, 11);
}
span.round-tabs.two{
color: rgb(161, 23, 11);border: 2px solid rgb(161, 23, 11);
}
li.active span.round-tabs.two{
background: #fff !important;
border: 2px solid #ddd;
color: rgb(161, 23, 11);
}
span.round-tabs.three{
color: rgb(161, 23, 11);border: 2px solid rgb(161, 23, 11);
}
li.active span.round-tabs.three{
background: #fff !important;
border: 2px solid #ddd;
color: rgb(161, 23, 11);
}
span.round-tabs.four{
color: rgb(161, 23, 11);border: 2px solid rgb(161, 23, 11);
}
li.active span.round-tabs.four{
background: #fff !important;
border: 2px solid #ddd;
color: rgb(161, 23, 11);
}
span.round-tabs.five{
color: rgb(161, 23, 11);border: 2px solid rgb(161, 23, 11);
}
li.active span.round-tabs.five{
background: #fff !important;
border: 2px solid #ddd;
color: rgb(161, 23, 11);
}
.nav-tabs > li.active > a span.round-tabs{
background: #fafafa;
}
.nav-tabs > li {
width: 20%;
}
li.active:before {
content: " ";
position: absolute;
left: 45%;
/* right: 0; */
margin: 0 auto;
bottom: -2px;
border: 10px solid transparent;
border-bottom-color: #fff;
z-index: 1;
}
li.active:after {
content: " ";
position: absolute;
left: 45%;
/* right: 0; */
margin: 0 auto;
bottom: 0px;
border: 10px solid transparent;
border-bottom-color: #ddd;
}
.nav-tabs > li a{
width: 70px;
height: 70px;
margin: 20px auto;
border-radius: 100%;
padding: 0;
}
.nav-tabs > li a:hover{
background: transparent;
}
.tab-content{
}
.tab-pane{
position: relative;
padding-top: 50px;
}
.tab-content .head{
font-family: 'Roboto Condensed', sans-serif;
font-size: 25px;
text-transform: uppercase;
padding-bottom: 10px;
}
.btn-outline-rounded{
padding: 10px 40px;
margin: 20px 0;
border: 2px solid transparent;
border-radius: 25px;
}
.btn.green{
background-color:#5cb85c;
/*border: 2px solid #5cb85c;*/
color: #ffffff;
}
/*HOME CSS*/
.user-row {
margin-bottom: 14px;
}
.user-row:last-child {
margin-bottom: 0;
}
.dropdown-user {
margin: 13px 0;
padding: 5px;
height: 100%;
}
.dropdown-user:hover {
cursor: pointer;
}
.table-user-information > tbody > tr {
border-top: 1px solid rgb(221, 221, 221);
}
.table-user-information > tbody > tr:first-child {
border-top: 0;
}
.table-user-information > tbody > tr > td {
border-top: 0;
}
.toppad
{margin-top:20px;
}
.shape{
border-style: solid; border-width: 0 70px 40px 0; float:right; height: 0px; width: 0px;
-ms-transform:rotate(360deg); /* IE 9 */
-o-transform: rotate(360deg); /* Opera 10.5 */
-webkit-transform:rotate(360deg); /* Safari and Chrome */
transform:rotate(360deg);
}
.offer{
background:#fff; border:1px solid #ddd; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); margin: 15px 0; overflow:hidden;
}
.offer-radius{
border-radius:7px;
}
.offer-danger { border-color: #d9534f; }
.offer-danger .shape{
border-color: transparent #d9534f transparent transparent;
border-color: rgba(255,255,255,0) #d9534f rgba(255,255,255,0) rgba(255,255,255,0);
}
.offer-success { border-color: #5cb85c; }
.offer-success .shape{
border-color: transparent #5cb85c transparent transparent;
border-color: rgba(255,255,255,0) #5cb85c rgba(255,255,255,0) rgba(255,255,255,0);
}
.offer-default { border-color: #999999; }
.offer-default .shape{
border-color: transparent #999999 transparent transparent;
border-color: rgba(255,255,255,0) #999999 rgba(255,255,255,0) rgba(255,255,255,0);
}
.offer-primary { border-color: #428bca; }
.offer-primary .shape{
border-color: transparent #428bca transparent transparent;
border-color: rgba(255,255,255,0) #428bca rgba(255,255,255,0) rgba(255,255,255,0);
}
.offer-info { border-color: #5bc0de; }
.offer-info .shape{
border-color: transparent #5bc0de transparent transparent;
border-color: rgba(255,255,255,0) #5bc0de rgba(255,255,255,0) rgba(255,255,255,0);
}
.offer-warning { border-color: #f0ad4e; }
.offer-warning .shape{
border-color: transparent #f0ad4e transparent transparent;
border-color: rgba(255,255,255,0) #f0ad4e rgba(255,255,255,0) rgba(255,255,255,0);
}
.shape-text{
color:#fff; font-size:12px; font-weight:bold; position:relative; right:-40px; top:2px; white-space: nowrap;
-ms-transform:rotate(30deg); /* IE 9 */
-o-transform: rotate(360deg); /* Opera 10.5 */
-webkit-transform:rotate(30deg); /* Safari and Chrome */
transform:rotate(30deg);
}
.offer-content{
padding:0 20px 10px;
}
/*MESSAGES*/
.widget .panel-body { padding:0px; }
.widget .list-group { margin-bottom: 0; }
.widget .panel-title { display:inline }
.widget .label-info { float: right; }
.widget li.list-group-item {border-radius: 0;border: 0;border-top: 1px solid #ddd;}
.widget li.list-group-item:hover { background-color: rgba(86,61,124,.1); }
.widget .mic-info { color: #666666;font-size: 11px; }
.widget .action { margin-top:5px; }
.widget .comment-text { font-size: 12px; }
.widget .btn-block { border-top-left-radius:0px;border-top-right-radius:0px; }
$(function(){
$('a[title]').tooltip();
})
$(document).ready(function() {
var panels = $('.user-infos');
var panelsButton = $('.dropdown-user');
panels.hide();
//Click dropdown
panelsButton.click(function() {
//get data-for attribute
var dataFor = $(this).attr('data-for');
var idFor = $(dataFor);
//current button
var currentButton = $(this);
idFor.slideToggle(400, function() {
//Completed slidetoggle
if(idFor.is(':visible'))
{
currentButton.html('<i class="glyphicon glyphicon-chevron-up text-muted"></i>');
}
else
{
currentButton.html('<i class="glyphicon glyphicon-chevron-down text-muted"></i>');
}
})
});
$('[data-toggle="tooltip"]').tooltip();
$('button').click(function(e) {
e.preventDefault();
alert("This is a demo.\n :-)");
});
});
