<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 ---------->
<nav class="navbar navbar-static">
<div class="container">
<a class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
<span class="glyphicon glyphicon-chevron-down"></span>
</a>
<div class="nav-collapse collase">
<ul class="nav navbar-nav">
<li><a href="#">BeerCoasters</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Fakes</a></li>
<li><a href="#">e-Shop</a></li>
<li><a href="#">Rules</a></li>
<li><a href="#">Supporters</a></li>
<li><a href="#">Contacts</a></li>
</ul>
<ul class="nav navbar-right navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="glyphicon glyphicon-search"></i></a>
<ul class="dropdown-menu" style="padding:12px;">
<form class="form-inline">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search">
<div class="input-group-btn">
<button type="submit" class="btn btn-default"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="glyphicon glyphicon-user"></i> <i class="glyphicon glyphicon-chevron-down"></i></a>
<ul class="dropdown-menu">
<li><a href="#">Login</a></li>
<li><a href="#">Profile</a></li>
<li class="divider"></li>
<li><a href="#">About</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav><!-- /.navbar -->
<header class="masthead">
<div class="container">
<div class="row">
<div class="col col-sm-6">
<h1><a href="#" title="scroll down for your viewing pleasure">BNW Template</a>
<p class="lead">2-column Layout + Theme for Bootstrap 3</p></h1>
</div>
<div class="col col-sm-6">
<div class="well pull-right">
<img src="//placehold.it/280x100/E7E7E7">
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col col-sm-12">
<div class="panel">
<div class="panel-body">
https://sachinchoolur.github.io/lightGallery/docs/<br>
You may want to put some news here <span class="glyphicon glyphicon-heart-empty"></span>
</div>
</div>
</div>
</div>
</div>
</header>
<!-- Begin Body -->
<div class="container">
<div class="row">
<div class="col col-sm-3">
<div id="sidebar">
<ul class="nav nav-stacked">
<li><h3 class="highlight">Turkey <i class="glyphicon glyphicon-dashboard pull-right"></i></h3></li>
<li><a href="#">Efes</a></li>
<li><a href="#">Tuborg</a></li>
</ul>
<div class="accordion" id="accordion2">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
Accordion
</a>
</div>
<div id="collapseOne" class="accordion-body collapse">
<div class="accordion-inner">
<p>There is a lot to be said about RWD.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col col-sm-9">
<div class="panel">
<h1>The Top Stories from Around</h1>
<div class="row">
<div class="col-md-4">
<div class="box">
<a href="galeri/img.jpg" class="gall_item" >
<img src="//placehold.it/150x150/EEEEEE" alt="" title=""><span></span></a>
<div class="box_bot">
<div class="box_bot_title"> Efes Pilsen</div>
<i class="fa fa-lg fa-calendar"></i><i class="fa-ul-new">07/05/1980</i>
<i class="fa fa-lg fa-info-circle"></i>
<i class="fa-ul-new"> İnfo</i>
</div>
</div>
</div>
<div class="col-md-4">
<div class="box">
<a href="galeri/img.jpg" class="gall_item" >
<img src="//placehold.it/150x150/EEEEEE" alt="" title=""><span></span></a>
<div class="box_bot">
<div class="box_bot_title"> Efes Pilsen</div>
<i class="fa fa-lg fa-calendar"></i><i class="fa-ul-new">07/05/1980</i>
<i class="fa fa-lg fa-info-circle"></i>
<i class="fa-ul-new"> İnfo</i>
</div>
</div>
</div>
<div class="col-md-4">
<div class="box">
<a href="galeri/img.jpg" class="gall_item" >
<img src="//placehold.it/150x150/EEEEEE" alt="" title=""><span></span></a>
<div class="box_bot">
<div class="box_bot_title"> Efes Pilsen</div>
<i class="fa fa-lg fa-calendar"></i><i class="fa-ul-new">07/05/1980</i>
<i class="fa fa-lg fa-info-circle"></i>
<i class="fa-ul-new"> İnfo</i>
</div>
</div>
</div>
</div>
<h2>Content</h2>
Totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae
dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia cor magni dolores
eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit,
sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?
<h2>Content</h2>
Rrem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae
dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia cor magni dolores
eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit,
sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut
<br><br>
<button class="btn btn-default">More</button>
<hr>
<h2>Content</h2>
<img src="//placehold.it/150x100/EEEEEE" class="img-responsive pull-right"> Farmhand ida quae ab illo inventore veritatis et quasi architecto beatae vitae x
dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia cor magni dolores
eos qui ratione voluptatem sequi nesciunt. I met him on the Internet. He's a French model. Qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit,
sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut
<br><br>
<button class="btn btn-default">More</button>
<hr>
<div class="row">
<div class="col col-sm-6">
<img src="/assets/example/bg_smartphones.jpg" class="img-responsive">
</div>
<div class="col col-sm-6">
<h1>There is still a lot to be said about the Responsive Web.</h1>
</div>
</div>
<hr>
<h2>Responsive Text</h2>
Eeaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae
dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia cor magni dolores
eos qui ratione voluptatem sequi nesciunt. Bootply is this awesomeness. Editor, prototype tool, adipisci velit,
sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut
<hr>
<h2>Responsive Images</h2>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae
dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia cor magni dolores
eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit,
sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut
<hr>
<h2>Media Queries</h2>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae
dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia cor magni dolores
eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit,
sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut
<h1><a href="#"><i class="glyphicon glyphicon-user"></i> <i class="glyphicon glyphicon-chevron-down"></i></a></h1>
<hr>
<h4><a href="http://bootply.com/">Bootply</a></h4>
<hr>
</div>
</div>
</div>
</div>
/* bootstrap 3 helpers */
@import url(//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css);
.navbar-form input, .form-inline input {
width:auto;
}
/* end */
/* custom theme */
header {
min-height:230px;
margin-bottom:5px;
}
@media (min-width: 979px) {
#sidebar.affix-top {
position: static;
}
#sidebar.affix {
position: fixed;
top: 0;
width:21.2%;
}
}
.affix,.affix-top {
position:static;
}
/* theme */
/* body OKey*/
body {
color:#000;
background-color:#69d2e7;
}
a,a:hover {
color:#fa6900;
text-decoration:none;
}
.highlight-bk {
background-color:#000;
padding:1px;
width:100%;
}
.highlight {
color:#000;
}
h3.highlight {
padding-top:13px;
padding-bottom:14px;
border-bottom:2px solid #000;
}
.navbar {
background-color:#E0E4CC;
color:#FA6900;
border:0;
border-radius:0;
}
.navbar-nav > li > a {
color:#FA6900;
padding-left:20px;
padding-right:20px;
border-left:1px solid #72C1BA;
}
.navbar-nav > li > a:hover, .navbar-nav > li > a:focus {
color:#666666;
}
.navbar-nav > li:last-child > a {
border-right:1px solid #72C1BA;
}
.navbar-nav > .active > a, .navbar-nav > .active > a:hover, .navbar-nav > .active > a:focus {
color: #ffffff;
background-color:transparent;
}
.navbar-nav > .open > a, .navbar-nav > .open > a:hover, .navbar-nav > .open > a:focus {
color: #f0f0f0;
background-color:transparent;
opacity:.9;
border-color:#6CDCF4;
}
.nav .open > a {
border-color:#777777;
border-width:0;
}
.accordion-group {
border-width:0;
}
.dropdown-menu {
min-width: 250px;
}
.accordion-heading .accordion-toggle, .accordion-inner, .nav-stacked li > a {
padding-left:1px;
}
.caret {
color:#fff;
}
.navbar-toggle {
color:#fff;
border-width:0;
}
.navbar-toggle:hover {
background-color:#fff;
}
.navbar-nav > li > a:hover,
.navbar-nav > li > a:focus {
background-color:#69D2E7;
}
.nav>li>a:hover,
.nav>li>a:focus {
background-color:#A7DBD8;
}
.panel {
background-color:#fff;
padding-left:27px;
padding-right:27px;
}
/* end theme */
/****Gallery****/
.box {
position: relative;
margin-top: 2px;
margin-bottom: 31px;
padding-bottom: 68px;
overflow: hidden;
}
.box .gall_item {
position: relative;
display: block;
}
.box .gall_item img {
width: 100%;
}
.box .gall_item span {
-webkit-transition: background-position 0.5s ease;
transition: background-position 0.5s ease;
position: absolute;
display: block;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: url(../images/magnifyerb.png) center -100px no-repeat;
}
.box .gall_item:hover span {
background-position: center center;
}
.box .box_bot {
background-color: #69D2E7;
color: #ffffff;
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 7px 26px;
top: 207px;
-webkit-transition: 0.5s ease;
transition: 0.5s ease;
}
.box .box_bot .box_bot_title {
padding-left: 18px;
font-size: 24px;
line-height: 48px;
font-weight: 300;
letter-spacing: -1px;
margin-bottom: 19px;
}
.box .box_bot .btn {
margin-top: 0;
border-color: #e8e6b9;
color: #e8e6b9;
}
.box .box_bot .btn:hover {
color: #323045;
border-color: #ffffff;
}
.box .box_bot:hover {
top: 0;
}
.box .box_bot:hover .box_bot_title {
color: #FA6900;
}
.blog .btn {
margin-top: 28px;
margin-bottom: 31px;
}
$('#sidebar').affix({
offset: {
top: 240
}
});
