<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 ---------->
<link href="http://fontawesome.io/assets/font-awesome/css/font-awesome.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>Alex Grey</h3>
<h4 class="white"><i class="fa fa-check-circle-o"></i> Los Angeles, CA</h4>
<h4 class="white"><i class="fa fa-twitter"></i>OfficialAlexGrey</h4>
</div>
</div>
<div class="col-md-6 no-pad"> <p class="text-right">
<a href="http://bootsnipp.com/iframe/45rMm" target="_blank">Best viewed full screen</a><br>
<a href="http://validator.w3.org/check?uri=http%3A%2F%2Fbootsnipp.com%2Fiframe%2F45rMm" target="_blank"><small>HTML</small><sup>5</sup></a>
</p>
<div class="user-image">
<img src="http://i67.tinypic.com/2e1sxts.jpg" class="img-responsive thumbnail" alt="img">
</div>
</div>
</div>
<div class="row overview">
<div class="col-md-4 user-pad text-center">
<h3>Famous</h3>
<h4>PAINTER</h4>
</div>
<div class="col-md-4 user-pad text-center">
<h3>Skiled</h3>
<h4>SCULPTER</h4>
</div>
<div class="col-md-4 user-pad text-center">
<h3>Talented</h3>
<h4>ARTIST</h4>
</div>
</div>
</div>
<div class="col-md-1 user-menu-btns">
<div class="btn-group-vertical square" id="responsive">
<a class="btn btn-block btn-default active">
<i class="fa fa-bell-o fa-3x"></i>
</a>
<a class="btn btn-default">
<i class="fa fa-envelope-o fa-3x"></i>
</a>
<a class="btn btn-default">
<i class="fa fa-laptop fa-3x"></i>
</a>
<a 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>
About
</h3>
<p>Alex Grey (born November 29, 1953) is an American visionary artist, author, teacher, and Vajrayana practitioner. His body of work spans a variety of forms including performance art, process art, installation art, sculpture, visionary art, and painting. Grey is a member of the Integral Institute. </p>
<button type="button" class="btn btn-labeled btn-success">
<span class="btn-label"><i class="fa fa-bell-o"></i></span>View all activity</button>
</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">
<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 title="Appreciate"><span class="fa fa-heart-o fa-2x"></span></a>
<a title="View"><span class="fa fa-search fa-2x"></span></a>
</div>
<img src="http://i64.tinypic.com/12574nd.jpg" class="img-responsive" alt="alex">
</div>
<div class="info">
<p class="small" style="text-overflow: ellipsis">Body, Mind, Spirit</p>
<p class="small coral text-right"><i class="fa fa-clock-o"></i> Posted Today | 10:42 A.M.</p>
</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 title="Appreciate"><span class="fa fa-heart-o fa-2x"></span></a>
<a title="View"><span class="fa fa-search fa-2x"></span></a>
</div>
<img src="http://i68.tinypic.com/2ywsf2v.jpg" class="img-responsive" alt="img">
</div>
<div class="info">
<p class="small" style="text-overflow: ellipsis">Visionary</p>
<p class="small coral text-right"><i class="fa fa-clock-o"></i> Posted Today | 10:42 A.M.
</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>
<i class="fa fa-cloud-upload fa-4x"></i>
<div class="share-links">
<button type="button" class="btn btn-lg btn-labeled btn-success" style="margin-bottom: 15px;">
<span class="btn-label"><i class="fa fa-bell-o"></i></span>A FINISHED PROJECT
</button>
<button type="button" class="btn btn-lg btn-labeled btn-warning">
<span class="btn-label"><i class="fa fa-bell-o"></i></span>A WORK IN PROGRESS
</button>
</div>
</div>
</div>
</div>
</div>
<link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<div class="container">
<div class="row">
<div class="col-md-4">
<!-- begin panel group -->
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<!-- panel 1 -->
<div class="panel panel-default">
<!--wrap panel heading in span to trigger image change as well as collapse -->
<span class="side-tab" data-target="#tab1" data-toggle="tab" role="tab" aria-expanded="false">
<div class="panel-heading" role="tab" id="headingOne" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<h4 class="panel-title">Dissectional</h4>
</div>
</span>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<!-- Tab content goes here -->
Dissectional Art for Tool’s Lateralus CD
2001, Ink on Paper, Acrylic on Acetate
</div>
</div>
</div>
<!-- / panel 1 -->
<!-- panel 3 -->
<div class="panel panel-default">
<!--wrap panel heading in span to trigger image change as well as collapse -->
<span class="side-tab" data-target="#tab3" data-toggle="tab" role="tab" aria-expanded="false">
<div class="panel-heading" role="tab" id="headingThree" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
<h4 class="panel-title">Critique </h4>
</div>
</span>
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body">
<!-- tab content goes here -->
1. I first came across your art from the TOOL album you did and then later Nirvana’s album and the Beastie Boys, at once becoming an admirer of your art forever. Could you tell us a bit about that experience and explain what transpired creatively between you and the bands? <br>
Nirvana’s manager requested the use of one of my paintings entitled “Pregnant Female” for the “In Utero” album. I never met Kurt Cobain but heard that he admired my art and promised to come to the studio the next time he was in New York. Then he died.
Adam Yauch called asking to use the “Gaia” painting on the “Ill Communications” album. We spoke a few times on the phone and had lovely conversations when we ran into each other at Buddhist ceremonies and speaking engagements of His Holiness the Dalai Lama.
I had a solo exhibition in Santa Monica and Adam Jones, lead guitar and founder of Tool, inquired with the gallery about my artwork and started talking immediately about album art. He described his concept of the dissectional art for the Lateralus album. He asked me to conceptualize a stage setting using my work to travel with the band on 90 city tours of stadiums throughout the world. It was astonishing the exposure that my work received through our interaction for the past two albums. I also had the opportunity to create and co-create my first two animation projects.
</div>
</div>
</div>
</div> <!-- / panel-group -->
</div> <!-- /col-md-4 -->
<div class="col-md-8">
<!-- begin macbook pro mockup -->
<div class="md-macbook-pro md-glare">
<div class="md-lid">
<div class="md-camera"></div>
<div class="md-screen">
<!-- content goes here -->
<div class="tab-featured-image">
<div class="tab-content">
<div class="tab-pane in active" id="tab1">
<img src="http://alexgrey.com/wp-content/uploads/2012/07/Alex_Grey_Tool_Dissectional.jpg" alt="tab1" class="img img-responsive">
</div>
<div class="tab-pane fade" id="tab3">
<img src="http://alexgrey.com/wp-content/uploads/2012/07/Alex_Grey_Tool_Dissectional.jpg" alt="tab1" class="img img-responsive">
</div>
</div>
</div>
</div>
</div>
<div class="md-base"></div>
</div> <!-- end macbook pro mockup -->
</div> <!-- / .col-md-8 -->
</div> <!--/ .row -->
</div> <!-- end sidetab container -->
.btn-primary {
background-color: #FF8463;
color: #ffffff;
border: 2px solid #E7A331;
text-transform: uppercase;
border-radius: 4px;
}
.btn-primary:hover {
background-color: #d6962c;
border-color: #d6962c;
color: #fff;
}
.portfolio{
background:url(assets/images/portfoliobg.jpg) center top no-repeat;
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
width: 100%;
overflow: hidden;
}
.portfolio_content{
padding-bottom:120px;
display:inline-block;
}
.portfolio .portfolio_content .head_title h3{
color:#000000;
}
.portfolio .portfolio_content .head_title h4{
color:#000000;
}
.single_portfolio_text{
display:inline-block;
padding:0;
position:relative;
overflow:hidden;
}
.single_portfolio_text img{
width:100%;
}
.single_portfolio_text:hover .portfolio_images_overlay{
top:5%;
left: 5%;
}
.portfolio_images_overlay{
width: 90%;
height: 90%;
background: rgba(0, 0, 0, .5);
padding: 20px;
margin: 0 auto;
top:-100%;
left: 5%;
position: absolute;
transition:.6s;
}
.portfolio_images_overlay h6{
text-transform:uppercase;
color:#fff;
font-size:2rem;
line-height:2.575rem;
font-weight: 500;
margin-bottom: 1rem;
margin-top: 1rem;
}
.portfolio_images_overlay p.product_price{
font-size:2.5725rem;
color:#fff;
line-height:3rem;
}
.portfolio_images_overlay .btn{
margin-top: 25px;
}
@media (min-width:769px) and (max-width:991px) {
.portfolio_images_overlay {
padding: 0px;
}
}
@media (max-width:768px) {
.portfolio_images_overlay{
padding: 170px 20px;
}
}
@media (max-width:580px) {
.portfolio_images_overlay{
padding: 100px 20px;
}
}
@media (max-width:480px) {
.portfolio_images_overlay{
padding: 40px 20px;
}
}
@media (max-width:320px) {
.portfolio_images_overlay{
padding: 20px;
}
}
.square, .btn {
border-radius: 0px!important;
}
/* -- color classes -- */
.coralbg {
background-color: #F54A00;
}
.coral {
color: #F54A00;
}
.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: #717475;
color: white;
border-color: #fff;
}
div.btn-group-vertical>a:hover {
color: white;
border-color: white;
}
div.btn-group-vertical>a.active {
background: #F54A00;
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: #F54A00;
}
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;
}
.overview h4 {
font-weight: bold!important;
font-size: 40px;
margin-top: 0;
}
.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;
}
/* -- media query for user profile image -- */
@media (max-width: 767px) {
.user-image {
max-height: 400px;
}
}
h3 {
color: #431F75;
}
body {
background-color: #343536;
}
$(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)
}
);
});
