<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="dashboard">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<ul class="dashboard-tabs">
<li class="active">
<a href="#profile" class="btn" aria-controls="profile" role="tab" data-toggle="tab">
<span class="glyphicon glyphicon-user"></span>
<h4>Profile</h4>
</a>
</li>
<li>
<a href="#statistics" class="btn" aria-controls="statistics" role="tab" data-toggle="tab">
<span class="glyphicon glyphicon-time"></span>
<h4>Statistics</h4>
</a>
</li>
<li>
<a href="#donate" class="btn" aria-controls="donate" role="tab" data-toggle="tab">
<span class="glyphicon glyphicon-usd"></span>
<h4>Donate</h4>
</a>
</li>
<li>
<a href="#settings" class="btn" aria-controls="settings" role="tab" data-toggle="tab">
<span class="glyphicon glyphicon-cog"></span>
<h4>Settings</h4>
</a>
</li>
<li>
<a href="#help" class="btn" aria-controls="help" role="tab" data-toggle="tab">
<span class="glyphicon glyphicon-question-sign"></span>
<h4>Help</h4>
</a>
</li>
</ul>
</div>
<div class="tab-content col-md-12">
<div role="tabpanel" class="tab-pane profile-pane active" id="profile">
<div>
<div>
<div class="header">
<h4>Profile Information</h4>
</div>
<div class="content">
<div class="row">
<img class="col-sm-3 col-sm-offset-1" src="http://lorempixel.com/420/420/city">
<div class="col-sm-4">
<h4>[Name]</h4>
<h4>[Type]</h4>
</div>
<div class="col-sm-3">
<button class="btn btn-lg btn-primary pull-right"><span class="glyphicon glyphicon-edit"></span></button>
</div>
</div>
<div class="row">
<h4 class="col-sm-3 col-sm-offset-1 col">[X] Followers</h4>
<h4 class="col-sm-4 col">[X] Votes</h4>
<button class="col-sm-3 btn btn-primary col"><h4>[X] Requests</h4></button>
<h3 class="col-sm-10 col-sm-offset-1 title">Supported Causes</h3>
<div id="supportedCauses" class="col-sm-10 col-sm-offset-1">
<div id="pane1" class="cause-info">
<div>
<img src="http://lorempixel.com/420/420/people">
<div>
<h4>[Name]</h4>
<h4>[Type]</h4>
</div>
<div>
<h4>[X] Votes</h4>
</div>
</div>
<div>
<h4>About:</h4>
<div>
<p>Nam ex ullum assum apeirian, facilisi splendide quo ex. Sea et nonumy accusata, in utinam vocent facilis vix. Cu vix eripuit temporibus mediocritatem, denique theophrastus ne mel, et graecis maiorum mediocritatem per. Magna tacimates sed eu, sit no graeco latine referrentur. Id sed assum quaerendum, apeirian erroribus ut his. Ex mei mazim minimum.</p>
<h5>More at <a>[Website]</a></h5>
</div>
<button class="btn btn-primary pull-right">Give</button>
</div>
<div>
<h2><a class="toggle-handle" href="#pane1" data-area="pane1"><span class="glyphicon glyphicon-chevron-down"></span></a></h2>
</div>
</div>
</div>
</div>
</div>
</div>
<div>
<div class="header">
<h4>Account Information</h4>
</div>
<div class="content">
<div class="row">
<h3 class="col-sm-10 col-sm-offset-1 title">Dwolla</h3>
<article class="col-sm-10 col-sm-offset-1">
<p>Esse nostro pertinacia nam te. Erant omnes semper ex has, qui at illum dolor vivendum. Utinam phaedrum expetendis mel ex, purto maluisset et est. Assum labores mea te, ut patrioque liberavisse nec, nec ad inani simul.</p>
<p>In eos insolens partiendo rationibus, te nostrud accusam sapientem quo. Sit semper vivendo corpora in, facilis recusabo has id. Ut vis molestiae intellegebat. An eam etiam essent. Sit in saepe dicam.</p>
</article>
<h3 class="col-sm-10 col-sm-offset-1 title">Donation Reciepts</h3>
<div class="col-sm-5 col-sm-offset-4 search-bar">
<input type="text">
<span class="input-group-btn">
<button class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button>
</span>
</div>
<select class="col-sm-2 search-select">
<option>Year</option>
<option>Month</option>
<option>Recent</option>
</select>
<div class="col-sm-10 col-sm-offset-1 reciept-infos">
<div>
<img src="http://lorempixel.com/420/420/people">
<div>
<h4>[Name]</h4>
<h4>[Type]</h4>
</div>
</div>
<div>
<img src="http://lorempixel.com/420/420/people">
<div>
<h4>[Name]</h4>
<h4>[Type]</h4>
</div>
</div>
<div>
<img src="http://lorempixel.com/420/420/people">
<div>
<h4>[Name]</h4>
<h4>[Type]</h4>
</div>
</div>
</div>
<h3 class="col-sm-10 col-sm-offset-1 title">Membership</h3>
<div class="col-sm-4 col-sm-offset-1 membership-info">
<h4>Membership Info</h4>
</div>
<div class="col-sm-6">
<h4>Change Membership</h4>
</div>
</div>
</div>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="statistics">
Statistics
</div>
<div role="tabpanel" class="tab-pane" id="donate">
Donate
</div>
<div role="tabpanel" class="tab-pane" id="settings">
Settings
</div>
<div role="tabpanel" class="tab-pane help-pane" id="help">
<!-- Begin Help -->
<div class="jumbotron jumbotron-sm">
<div class="container">
<div class="row">
<div class="col-sm-12 col-lg-12">
<h1 class="h1">Contact us <small>Feel free to contact us</small></h1>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="well well-sm">
<form>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="name">Company Name</label>
<input type="text" class="form-control" id="name" placeholder="Enter name" required="required" />
</div>
<div class="form-group">
<label for="email">Email Address</label>
<div class="input-group">
<span class="input-group-addon">
<span class="glyphicon glyphicon-envelope"></span>
</span>
<input type="email" class="form-control" id="email" placeholder="Enter email" required="required" />
</div>
</div>
<div class="form-group">
<label for="subject">Subject</label>
<select id="subject" name="subject" class="form-control" required="required">
<option value="na" selected="">Choose One:</option>
<option value="service">General Customer Service</option>
<option value="suggestions">Suggestions</option>
<option value="product">Product Support</option>
</select>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="name">Message</label>
<textarea name="message" id="message" class="form-control" rows="9" cols="25" required="required" placeholder="Message"></textarea>
</div>
</div>
<div class="col-md-12">
<button type="submit" class="btn btn-primary pull-right" id="btnContactUs">Send Message</button>
</div>
</div>
</form>
</div>
</div>
<div class="col-md-4">
<form>
<legend><span class="glyphicon glyphicon-globe"></span>Our office</legend>
<address>
<strong>Givingest</strong><br>
795 Folsom Ave, Suite 600<br>
San Francisco, CA 94107<br>
<abbr title="Phone">P:</abbr>
(123) 456-7890
</address>
<address>
<strong>Full Name</strong><br>
<a href="mailto:#">first.last@example.com</a>
</address>
</form>
</div>
</div>
</div>
<!-- End Help -->
</div>
</div>
</div>
</div>
body {
background: #16a085;
font-family: 'Roboto', sans-serif;
padding-top: 40px;
}
.dashboard {
padding: 0 30px;
}
.dashboard-tabs {
background-color: #ecf0f1;
padding: 0;
border: 0 solid #ecf0f1;
border-radius: 5px;
}
.dashboard-tabs:after {
content: '';
display: block;
clear: both;
}
.dashboard-tabs > li {
list-style: none;
display: inline-block;
width: 20%;
float: left;
padding: 0;
}
.dashboard-tabs > li:first-of-type {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.dashboard-tabs > li:last-of-type {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
.dashboard-tabs > li > a {
vertical-align: middle;
text-align: center;
background-color: #ecf0f1;
width: 100%;
text-decoration: none;
color: #333;
border: 0 solid #8e44ad;
border-radius: 0;
padding: 10px 0 4px 0;
}
.dashboard-tabs > li.active > a {
color: #8e44ad;
border-width: 8px 0;
padding: 0;
margin: -4px 0;
}
.dashboard-tabs > li:first-of-type > a {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.dashboard-tabs > li:last-of-type > a {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
.dashboard-tabs > li.active > a:before {
content: '';
position: relative;
border-style: solid;
border-width: 6px 6px 0;
border-color: #8E44AD transparent;
display: block;
width: 0;
z-index: 1;
margin-left: -6px;
top: 0;
left: 50%;
}
.dashboard-tabs > li > a .glyphicon {
color: #1abc9c;
padding-top: 16px;
font-size: 40px;
}
.dashboard .tab-content {
margin: 40px 0;
}
.dashboard .jumbotron {
margin-top: 0px;
background: #8e44ad;
color: #fff;
border-radius: 5px 5px 0 0;
}
.dashboard .jumbotron small {
color: #fff;
}
.dashboard .jumbotron-sm {
padding-top: 24px;
padding-bottom: 24px;
}
.help-pane {
background: #ecf0f1;
border-radius: 5px;
}
.profile-pane {
width: 100%;
display: table;
border-spacing: 10px;
}
.profile-pane > div {
display: table-row;
}
.profile-pane > div > div {
width: 50%;
display: table-cell;
}
.profile-pane .header {
background: #8e44ad;
color: #fff;
padding: 5px 15px;
border-radius: 10px 10px 0 0;
}
.profile-pane .content {
background: #ecf0f1;
border-radius: 0 0 10px 10px;
padding: 5px 15px;
}
.profile-pane h4.col {
text-align: center;
margin-bottom: 40px;
}
.profile-pane button.col {
text-align: center;
padding: 0;
}
.profile-pane .title {
margin-top: 0;
padding: 10px;
border-bottom: 1px solid #aaa;
}
#supportedCauses {
padding: 0;
}
.cause-info {
margin-bottom: 5px;
padding: 5px;
background: #fff;
border-radius: 5px;
display: inline-block;
}
.cause-info a:hover {
cursor: pointer;
}
.cause-info > div:nth-of-type(3) {
width: 16.66666666%;
float: left;
}
.cause-info > div:nth-of-type(3) > * {
padding: 0 15px;
float: right;
}
.cause-info > div:nth-of-type(3) a > .glyphicon {
transition: transform .5s;
}
.cause-info:not(.expanded) > div:nth-of-type(1) {
width: 83.33333333%;
float: left;
display: inline-block;
}
.cause-info:not(.expanded) > div:nth-of-type(1) > img {
width: 20%;
float: left;
}
.cause-info:not(.expanded) > div:nth-of-type(1) > div {
width: 40%;
float: left;
padding: 0 15px;
}
.cause-info:not(.expanded) > div:nth-of-type(1) > div:nth-of-type(2):before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
.cause-info:not(.expanded) > div:nth-of-type(2) {
display: none;
}
.cause-info.expanded > div:nth-of-type(1) {
width: 25%;
float: left;
}
.cause-info.expanded > div:nth-of-type(1) > img {
width: 66.66666667%;
}
.cause-info.expanded > div:nth-of-type(2) {
width: 58.33333333%;
float: left;
}
.cause-info.expanded > div:nth-of-type(3) a > .glyphicon {
transform: rotate(180deg);
}
.profile-pane article {
background: #fff;
border-radius: 5px;
padding: 5px;
margin-bottom: 40px;
}
.search-bar {
position: relative;
display: table;
border-collapse: collapse;
}
.search-bar > input {
display: block;
width: 100%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px 0 0 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
.search-select {
border-radius: 4px;
border-color: #ccc;
height: 34px;
font-size: 14px;
color: #555;
background: #fff;
padding-right: 0;
}
.reciept-infos {
border: 1px solid #000;
padding: 0;
margin-top: 20px;
margin-bottom: 20px;
border-radius: 5px;
background: #fff;
}
.reciept-infos > div:last-of-type {
border-bottom: none;
}
.reciept-infos > div {
display: inline-block;
border-bottom: 1px solid #000;
}
.reciept-infos > div > * {
float: left;
}
.reciept-infos > div > img {
width: 18%;
margin: 1%;
}
.reciept-infos > div > div {
width: 80%;
padding: 0 15px;
}
$(function() {
var toggleFunction;
$('.toggle-handle').click(toggleFunction = function() {
var area = $('#' + $(this).attr('data-area'));
if(area.hasClass('expanded')) {
area.removeClass('expanded');
} else {
area.addClass('expanded');
}
$(this).blur();
return false;
});
$('#supportedCauses').append(
$(document.createElement('div')).attr('id', 'pane4').addClass('cause-info').append(
$(document.createElement('div')).append(
$(document.createElement('img')).attr('src', 'http://lorempixel.com/420/420/people'),
$(document.createElement('div')).append(
$(document.createElement('h4')).text('[Name]'),
$(document.createElement('h4')).text('[Cause]')
),
$(document.createElement('div')).append(
$(document.createElement('h4')).text('[X] Votes')
)
),
$(document.createElement('div')).append(
$(document.createElement('h4')).text('About:'),
$(document.createElement('div')).append(
$(document.createElement('p')).text(
'Nam ex ullum assum apeirian, facilisi splendide quo ex. Sea et nonumy accusata, in utinam vocent facilis vix. \
Cu vix eripuit temporibus mediocritatem, denique theophrastus ne mel, et graecis maiorum mediocritatem per. \
Magna tacimates sed eu, sit no graeco latine referrentur. Id sed assum quaerendum, apeirian erroribus ut his. Ex mei mazim minimum.'
),
$(document.createElement('h5')).html('More at <a>[Website]</a>')
),
$(document.createElement('button')).addClass('btn btn-primary pull-right').text('Give')
),
$(document.createElement('div')).append(
$(document.createElement('h2')).append(
$(document.createElement('a')).append(
$(document.createElement('span')).addClass('glyphicon glyphicon-chevron-down')
).attr('href', '#pane4').attr('data-area', 'pane4').click(toggleFunction)
)
)
)
);
});
