<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 ---------->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- This file has been downloaded from Bootsnipp.com. Enjoy! -->
<title>Member Profile</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet">
<style type="text/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;
}
</style>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-5 toppad pull-right col-md-offset-3 ">
<A href="edit.html" >Edit Profile</A>
<A href="Logout.html" >Logout</A>
<br>
<p class=" text-info">May 05,2014,03:00 pm </p>
</div>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 col-xs-offset-0 col-sm-offset-0 col-md-offset-3 col-lg-offset-3 toppad" >
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">Aung Myo Ko Ko</h3>
</div>
<div class="panel-body">
<div class="row">
<div class="col-md-3 col-lg-3 " align="center"> <img alt="User Pic" src="http://scontent-sit4-1.xx.fbcdn.net/v/t1.0-9/12643032_1734716853425356_1376632425557228556_n.jpg?oh=a621e137fe37cda2ca1c6210b7d7ee5d&oe=58CACC25" class="img-circle img-responsive"> </div>
<div class=" col-md-9 col-lg-9 ">
<table class="table table-user-information">
<tbody>
<tr>
<td>Department:</td>
<td>Advisor</td>
</tr>
<tr>
<td>Member date:</td>
<td>06/23/2013</td>
</tr>
<tr>
<td>Date of Birth</td>
<td>10/09/1988</td>
</tr>
<tr>
<tr>
<td>Gender</td>
<td>Hidden</td>
</tr>
<tr>
<td>Home Address</td>
<td>No.10,Pan Hlaing rd,San Chaung tsp</td>
</tr>
<tr>
<td>Email</td>
<td><a href="mailto:nikkonicky@icloud.com">nikkonicky@icloud.com</a></td>
</tr>
<td>Phone Number</td>
<td>09-974562080<br><br>09-450702160</td>
</tr>
</tbody>
</table>
<a href="#" class="btn btn-primary">My Credit</a>
<a href="#" class="btn btn-primary">My Debit</a>
</div>
</div>
</div>
<div class="panel-footer">
<a data-original-title="Message" data-toggle="tooltip" type="button" class="btn btn-sm btn-primary"><i class="glyphicon glyphicon-envelope"></i></a>
<span class="pull-right">
<a href="edit.html" data-original-title="Edit user Profile" data-toggle="tooltip" type="button" class="btn btn-sm btn-warning"><i class="glyphicon glyphicon-edit"></i></a>
<a data-original-title="Remove this user" data-toggle="tooltip" type="button" class="btn btn-sm btn-danger"><i class="glyphicon glyphicon-remove"></i></a>
</span>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(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 :-)");
});
});
</script>
</body>
</html>
.btn3d {
position:relative;
top: -6px;
border:0;
transition: all 40ms linear;
margin-top:10px;
margin-bottom:10px;
margin-left:2px;
margin-right:2px;
}
.btn3d:active:focus,
.btn3d:focus:hover,
.btn3d:focus {
-moz-outline-style:none;
outline:medium none;
}
.btn3d:active, .btn3d.active {
top:2px;
}
.btn3d.btn-white {
color: #666666;
box-shadow:0 0 0 1px #ebebeb inset, 0 0 0 2px rgba(255,255,255,0.10) inset, 0 8px 0 0 #f5f5f5, 0 8px 8px 1px rgba(0,0,0,.2);
background-color:#fff;
}
.btn3d.btn-white:active, .btn3d.btn-white.active {
color: #666666;
box-shadow:0 0 0 1px #ebebeb inset, 0 0 0 1px rgba(255,255,255,0.15) inset, 0 1px 3px 1px rgba(0,0,0,.1);
background-color:#fff;
}
.btn3d.btn-default {
color: #666666;
box-shadow:0 0 0 1px #ebebeb inset, 0 0 0 2px rgba(255,255,255,0.10) inset, 0 8px 0 0 #BEBEBE, 0 8px 8px 1px rgba(0,0,0,.2);
background-color:#f9f9f9;
}
.btn3d.btn-default:active, .btn3d.btn-default.active {
color: #666666;
box-shadow:0 0 0 1px #ebebeb inset, 0 0 0 1px rgba(255,255,255,0.15) inset, 0 1px 3px 1px rgba(0,0,0,.1);
background-color:#f9f9f9;
}
.btn3d.btn-primary {
box-shadow:0 0 0 1px #417fbd inset, 0 0 0 2px rgba(255,255,255,0.15) inset, 0 8px 0 0 #4D5BBE, 0 8px 8px 1px rgba(0,0,0,0.5);
background-color:#4274D7;
}
.btn3d.btn-primary:active, .btn3d.btn-primary.active {
box-shadow:0 0 0 1px #417fbd inset, 0 0 0 1px rgba(255,255,255,0.15) inset, 0 1px 3px 1px rgba(0,0,0,0.3);
background-color:#4274D7;
}
.btn3d.btn-success {
box-shadow:0 0 0 1px #31c300 inset, 0 0 0 2px rgba(255,255,255,0.15) inset, 0 8px 0 0 #5eb924, 0 8px 8px 1px rgba(0,0,0,0.5);
background-color:#78d739;
}
.btn3d.btn-success:active, .btn3d.btn-success.active {
box-shadow:0 0 0 1px #30cd00 inset, 0 0 0 1px rgba(255,255,255,0.15) inset, 0 1px 3px 1px rgba(0,0,0,0.3);
background-color: #78d739;
}
.btn3d.btn-info {
box-shadow:0 0 0 1px #00a5c3 inset, 0 0 0 2px rgba(255,255,255,0.15) inset, 0 8px 0 0 #348FD2, 0 8px 8px 1px rgba(0,0,0,0.5);
background-color:#39B3D7;
}
.btn3d.btn-info:active, .btn3d.btn-info.active {
box-shadow:0 0 0 1px #00a5c3 inset, 0 0 0 1px rgba(255,255,255,0.15) inset, 0 1px 3px 1px rgba(0,0,0,0.3);
background-color: #39B3D7;
}
.btn3d.btn-warning {
box-shadow:0 0 0 1px #d79a47 inset, 0 0 0 2px rgba(255,255,255,0.15) inset, 0 8px 0 0 #D79A34, 0 8px 8px 1px rgba(0,0,0,0.5);
background-color:#FEAF20;
}
.btn3d.btn-warning:active, .btn3d.btn-warning.active {
box-shadow:0 0 0 1px #d79a47 inset, 0 0 0 1px rgba(255,255,255,0.15) inset, 0 1px 3px 1px rgba(0,0,0,0.3);
background-color: #FEAF20;
}
.btn3d.btn-danger {
box-shadow:0 0 0 1px #b93802 inset, 0 0 0 2px rgba(255,255,255,0.15) inset, 0 8px 0 0 #AA0000, 0 8px 8px 1px rgba(0,0,0,0.5);
background-color:#D73814;
}
.btn3d.btn-danger:active, .btn3d.btn-danger.active {
box-shadow:0 0 0 1px #b93802 inset, 0 0 0 1px rgba(255,255,255,0.15) inset, 0 1px 3px 1px rgba(0,0,0,0.3);
background-color: #D73814;
}
.btn3d.btn-magick {
color: #fff;
box-shadow:0 0 0 1px #9a00cd inset, 0 0 0 2px rgba(255,255,255,0.15) inset, 0 8px 0 0 #9823d5, 0 8px 8px 1px rgba(0,0,0,0.5);
background-color:#bb39d7;
}
.btn3d.btn-magick:active, .btn3d.btn-magick.active {
box-shadow:0 0 0 1px #9a00cd inset, 0 0 0 1px rgba(255,255,255,0.15) inset, 0 1px 3px 1px rgba(0,0,0,0.3);
background-color: #bb39d7;
}
