<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 rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://bootswatch.com/cosmo/bootstrap.min.css">
<div class="mainbody container-fluid">
<div class="row">
<div class="navbar-wrapper">
<div class="container-fluid">
<div class="navbar navbar-default navbar-static-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span><span
class="icon-bar"></span><span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="./ORqmj" style="margin-right:-8px; margin-top:-5px;">
<img alt="Brand" src="https://s-media-cache-ak0.pinimg.com/736x/0c/ae/07/0cae07a431b0bf81f0eb3eb6d144275c.jpg" width="30px" height="30px">
</a>
<a class="navbar-brand" href="./ORqmj">Project*</a>
<i class="brand_network"><small><small>diaspora* Network</small></small></i>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="./ORqmj">Stream</a></li>
<li><a href="#">My Activity</a></li>
<li><span class="badge badge-important">2</span><a href="#"><i class="fa fa-bell-o fa-lg" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-envelope-o fa-lg" aria-hidden="true"></i></a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">
<span class="user-avatar pull-left" style="margin-right:8px; margin-top:-5px;">
<img src="https://s-media-cache-ak0.pinimg.com/736x/0c/ae/07/0cae07a431b0bf81f0eb3eb6d144275c.jpg" class="img-responsive img-circle" title="John Doe" alt="John Doe" width="30px" height="30px">
</span>
<span class="user-name">
Jean-Michel Basquiat
</span>
<b class="caret"></b></a>
<ul class="dropdown-menu">
<li>
<div class="navbar-content">
<div class="row">
<div class="col-md-5">
<img src="https://lut.im/7JCpw12uUT/mY0Mb78SvSIcjvkf.png" alt="Alternate Text" class="img-responsive" width="120px" height="120px" />
<p class="text-center small">
<a href="./3X6zm">Change Photo</a></p>
</div>
<div class="col-md-7">
<span>Jean-Michel Basquiat</span>
<p class="text-muted small">
example@pods.tld</p>
<div class="divider">
</div>
<a href="./56ExR" class="btn btn-default btn-xs"><i class="fa fa-user-o" aria-hidden="true"></i> Profile</a>
<a href="#" class="btn btn-default btn-xs"><i class="fa fa-address-card-o" aria-hidden="true"></i> Contacts</a>
<a href="#" class="btn btn-default btn-xs"><i class="fa fa-cogs" aria-hidden="true"></i> Settings</a>
<a href="#" class="btn btn-default btn-xs"><i class="fa fa-question-circle-o" aria-hidden="true"></i> Help!</a>
</div>
</div>
</div>
<div class="navbar-footer">
<div class="navbar-footer-content">
<div class="row">
<div class="col-md-6">
<a href="#" class="btn btn-default btn-sm"><i class="fa fa-unlock-alt" aria-hidden="true"></i> Change Passowrd</a>
</div>
<div class="col-md-6">
<a href="#" class="btn btn-default btn-sm pull-right"><i class="fa fa-power-off" aria-hidden="true"></i> Sign Out</a>
</div>
</div>
</div>
</div>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div style="padding-top:50px;"> </div>
<div class="col-lg-3 col-md-3 hidden-sm hidden-xs">
<div class="panel panel-default">
<div class="panel-body">
<div class="media">
<div align="center">
<img class="thumbnail img-responsive" src="https://s-media-cache-ak0.pinimg.com/736x/0c/ae/07/0cae07a431b0bf81f0eb3eb6d144275c.jpg" width="300px" height="300px">
</div>
<div class="media-body">
<hr>
<h3><strong>Bio</strong></h3>
<p>Jean-Michel Basquiat was born on December 22, 1960, in Brooklyn, New York.
He first attracted attention for his graffiti under the name "SAMO" in New York City.
He sold sweatshirts and postcards featuring his artwork on the streets before his painting career took off.
He collaborated with Andy Warhol in the mid-1980s, which resulted in a show of their work.
Basquiat died on August 12, 1988, in New York City.</p>
<hr>
<h3><strong>Location</strong></h3>
<p>Brooklyn, New York</p>
<hr>
<h3><strong>Gender</strong></h3>
<p>Male</p>
<hr>
<h3><strong>Birthday</strong></h3>
<p>December 22, 1960</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-9 col-md-9 col-sm-12 col-xs-12">
<div class="panel panel-default">
<div class="panel-body">
<span>
<h1 class="panel-title pull-left" style="font-size:30px;">Jean-Michel Basquiat <small>example@pods.tld</small> <i class="fa fa-check text-success" aria-hidden="true" data-toggle="tooltip" data-placement="bottom" title="John Doe is sharing with you"></i></h1>
<div class="dropdown pull-right">
<button class="btn btn-success dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Friends
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a href="#">Familly</a></li>
<li><a href="#"><i class="fa fa-fw fa-check" aria-hidden="true"></i> Friends</a></li>
<li><a href="#">Work</a></li>
<li role="separator" class="divider"></li>
<li><a href="#"><i class="fa fa-fw fa-plus" aria-hidden="true"></i> Add a new aspect</a></li>
</ul>
</div>
</span>
<br><br>
<i class="fa fa-tags" aria-hidden="true"></i> <a href="/tags/diaspora" class="tag">#diaspora</a> <a href="/tags/hashtag" class="tag">#hashtag</a> <a href="/tags/caturday" class="tag">#caturday</a>
<br><br><hr>
<span class="pull-left">
<a href="#" class="btn btn-link" style="text-decoration:none;"><i class="fa fa-fw fa-files-o" aria-hidden="true"></i> Posts</a>
<a href="#" class="btn btn-link" style="text-decoration:none;"><i class="fa fa-fw fa-picture-o" aria-hidden="true"></i> Photos <span class="badge">42</span></a>
<a href="#" class="btn btn-link" style="text-decoration:none;"><i class="fa fa-fw fa-users" aria-hidden="true"></i> Contacts <span class="badge">42</span></a>
</span>
<span class="pull-right">
<a href="#" class="btn btn-link" style="text-decoration:none;"><i class="fa fa-lg fa-at" aria-hidden="true" data-toggle="tooltip" data-placement="bottom" title="Mention"></i></a>
<a href="#" class="btn btn-link" style="text-decoration:none;"><i class="fa fa-lg fa-envelope-o" aria-hidden="true" data-toggle="tooltip" data-placement="bottom" title="Message"></i></a>
<a href="#" class="btn btn-link" style="text-decoration:none;"><i class="fa fa-lg fa-ban" aria-hidden="true" data-toggle="tooltip" data-placement="bottom" title="Ignore"></i></a>
</span>
</div>
</div>
<hr>
<!-- Simple post content example. -->
<!-- carousel -->
<div class="container">
<div id="main_area">
<!-- Slider -->
<div class="row">
<div class="col-sm-6" id="slider-thumbs">
<!-- Bottom switcher of slider -->
<ul class="hide-bullets">
<li class="col-sm-3">
<a class="thumbnail" id="carousel-selector-0">
<img src="http://basquiat.com/images/backgrounds/enlarge/fallen_angel-orig.jpg">
</a>
</li>
<li class="col-sm-3">
<a class="thumbnail" id="carousel-selector-1"><img src="http://www.americansuburbx.com/wp-content/uploads/2016/02/leeches.jpgHD-Custom.jpg"></a>
</li>
<li class="col-sm-3">
<a class="thumbnail" id="carousel-selector-2"><img src="https://d1lfxha3ugu3d4.cloudfront.net/exhibitions/images/2015_Basquiat_EL135.58_4000W.jpg"></a>
</li>
<li class="col-sm-3">
<a class="thumbnail" id="carousel-selector-3"><img src="http://robbreport.com/sites/default/files/images/articles/2016May/2220026//01-basquiat-painting.jpg"></a>
</li>
<li class="col-sm-3">
<a class="thumbnail" id="carousel-selector-4"><img src="https://s-media-cache-ak0.pinimg.com/originals/04/4d/0f/044d0f3d2b869a47ff8cf168d4d9c5ed.jpg"></a>
</li>
<li class="col-sm-3">
<a class="thumbnail" id="carousel-selector-5"><img src="http://www.thebroad.org/sites/default/files/art/basquait_beef_ribs_longhorn.jpg"></a>
</li>
<li class="col-sm-3">
<a class="thumbnail" id="carousel-selector-6"><img src="https://nyogalleristny.files.wordpress.com/2014/06/basquiat-untitled1127092.jpg?quality=80"></a>
</li>
<li class="col-sm-3">
<a class="thumbnail" id="carousel-selector-7"><img src="http://hyperallergic.com/wp-content/uploads/2015/05/A-panel-of-experts.jpg"></a>
</li>
<li class="col-sm-3">
<a class="thumbnail" id="carousel-selector-8"><img src="http://3.bp.blogspot.com/-b1TXBP6RZiA/Ut-Gh1pgrxI/AAAAAAAAAvY/LogV5K6BWFw/s1600/eyes-and-eggs.jpg"></a>
</li>
<li class="col-sm-3">
<a class="thumbnail" id="carousel-selector-9"><img src="https://s-media-cache-ak0.pinimg.com/originals/89/c7/37/89c7379ba70dc0859c96f94779bb2b68.jpg"></a>
</li>
<li class="col-sm-3">
<a class="thumbnail" id="carousel-selector-10"><img src="https://i0.wp.com/i.huffpost.com/gen/979600/thumbs/o-BASQUIAT-GAGOSIAN-facebook.jpg"></a>
</li>
<li class="col-sm-3">
<a class="thumbnail" id="carousel-selector-11"><img src="http://4.bp.blogspot.com/-JaX8a4Emlks/UQA8B6C582I/AAAAAAAADKE/vKTzlJJLcNc/s1600/06.jpg"></a>
</li>
<li class="col-sm-3">
<a class="thumbnail" id="carousel-selector-12"><img src="http://www.dailyartfixx.com/wp-content/uploads/2009/12/tenor-basquiat-1985.jpg"></a>
</li>
</ul>
</div>
<div class="col-sm-6">
<div class="col-xs-12" id="slider">
<!-- Top part of the slider -->
<div class="row">
<div class="col-sm-12" id="carousel-bounding-box">
<div class="carousel slide" id="myCarousel">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item" data-slide-number="0">
<img src="http://basquiat.com/images/backgrounds/enlarge/fallen_angel-orig.jpg"></div>
<div class="item" data-slide-number="1">
<img src="http://www.americansuburbx.com/wp-content/uploads/2016/02/leeches.jpgHD-Custom.jpg"></div>
<div class="item" data-slide-number="2">
<img src="https://d1lfxha3ugu3d4.cloudfront.net/exhibitions/images/2015_Basquiat_EL135.58_4000W.jpg"></div>
<div class="item" data-slide-number="3">
<img src="http://robbreport.com/sites/default/files/images/articles/2016May/2220026//01-basquiat-painting.jpg"></div>
<div class="item" data-slide-number="4">
<img src="https://s-media-cache-ak0.pinimg.com/originals/04/4d/0f/044d0f3d2b869a47ff8cf168d4d9c5ed.jpg"></div>
<div class="item" data-slide-number="5">
<img src="http://www.thebroad.org/sites/default/files/art/basquait_beef_ribs_longhorn.jpg"></div>
<div class="item" data-slide-number="6">
<img src="https://nyogalleristny.files.wordpress.com/2014/06/basquiat-untitled1127092.jpg?quality=80"></div>
<div class="item" data-slide-number="7">
<img src="http://hyperallergic.com/wp-content/uploads/2015/05/A-panel-of-experts.jpg"></div>
<div class="item" data-slide-number="8">
<img src="http://3.bp.blogspot.com/-b1TXBP6RZiA/Ut-Gh1pgrxI/AAAAAAAAAvY/LogV5K6BWFw/s1600/eyes-and-eggs.jpg"></div>
<div class="item" data-slide-number="9">
<img src="https://s-media-cache-ak0.pinimg.com/originals/89/c7/37/89c7379ba70dc0859c96f94779bb2b68.jpg"></div>
<div class="item" data-slide-number="10">
<img src="https://i0.wp.com/i.huffpost.com/gen/979600/thumbs/o-BASQUIAT-GAGOSIAN-facebook.jpg"></div>
<div class="item" data-slide-number="11">
<img src="http://4.bp.blogspot.com/-JaX8a4Emlks/UQA8B6C582I/AAAAAAAADKE/vKTzlJJLcNc/s1600/06.jpg"></div>
<div class="item" data-slide-number="12">
<img src="http://www.dailyartfixx.com/wp-content/uploads/2009/12/tenor-basquiat-1985.jpg"></div>
</div>
<!-- Carousel nav -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
</div>
</div>
</div>
<!--/Slider-->
</div>
</div>
</div>
</div>
</div>
</div>
.mainbody {
background:white;
}
/* Special class on .container surrounding .navbar, used for positioning it into place. */
.navbar-wrapper {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 20;
margin-left: -15px;
margin-right: -15px;
}
/* Flip around the padding for proper display in narrow viewports */
.navbar-wrapper .container {
padding-left: 0;
padding-right: 0;
}
.navbar-wrapper .navbar {
padding-left: 15px;
padding-right: 15px;
}
.navbar-content
{
width:320px;
padding: 15px;
padding-bottom:0px;
}
.navbar-content:before, .navbar-content:after
{
display: table;
content: "";
line-height: 0;
}
.navbar-nav.navbar-right:last-child {
margin-right: 15px !important;
}
.navbar-footer
{
background-color:#DDD;
}
.navbar-footer-content { padding:15px 15px 15px 15px; }
.dropdown-menu {
padding: 0px;
overflow: hidden;
}
.brand_network {
color: #9D9D9D;
float: left;
position: absolute;
left: 70px;
top: 30px;
font-size: smaller;
}
.post-content {
margin-left:58px;
}
.badge-important {
margin-top: 3px;
margin-left: 25px;
position: absolute;
}
body {
background-color: #e8e8e8;
}
.hide-bullets {
list-style:none;
margin-left: -40px;
margin-top:20px;
}
.thumbnail {
padding: 0;
}
.carousel-inner>.item>img, .carousel-inner>.item>a>img {
width: 100%;
}
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
$(function () {
$('[data-toggle="popover"]').popover()
})
jQuery(document).ready(function($) {
$('#myCarousel').carousel({
interval: 5000
});
//Handles the carousel thumbnails
$('[id^=carousel-selector-]').click(function () {
var id_selector = $(this).attr("id");
try {
var id = /-(\d+)$/.exec(id_selector)[1];
console.log(id_selector, id);
jQuery('#myCarousel').carousel(parseInt(id));
} catch (e) {
console.log('Regex failed!', e);
}
});
// When the carousel slides, auto update the text
$('#myCarousel').on('slid.bs.carousel', function (e) {
var id = $('.item.active').data('slide-number');
$('#carousel-text').html($('#slide-content-'+id).html());
});
});
