<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 id="wrapper">
<div class="overlay"></div>
<!-- Sidebar -->
<nav class="navbar navbar-inverse navbar-fixed-top" id="sidebar-wrapper" role="navigation">
<ul class="nav sidebar-nav">
<li class="sidebar-brand">
<a href="#">
travelogue
</a>
</li>
<li>
<a href="#">Home</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Posts <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li class="dropdown-header">Dropdown heading</li>
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>
</nav>
<!-- /#sidebar-wrapper -->
<!-- Page Content -->
<div id="page-content-wrapper">
<button type="button" class="hamburger is-closed" data-toggle="offcanvas">
<span class="hamb-top"></span>
<span class="hamb-middle"></span>
<span class="hamb-bottom"></span>
</button>
<div class="container">
<div class="row">
<div class="container-fluid article-image">
<div class="row">
<div class="col-md-12">
<div class="article-title">
<h1 >Article title goes here</h1>
<h3>February 17, 2015</h3>
</div>
<div class="tint"> <img src="img/post-1200x400.png" alt=""></div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12 clear-top">
<p>12hrs is a very short time to see the best of any city, 12hrs in London is almost ridiculously little. Still, we accepted the challenge, and present to you our 12hrs in London guide!</p>
<p>Some weeks ago, we already explored the wild East End of the city (to read that guide, just click here), so now it’s time to visit some of the more iconic landmarks and places. Still, like always, we had to leave a lot of things out. We won’t visit the Royal Palaces. We are skipping over Big Ben. And we don’t stand in line with the other tourists at the Tower of London. Still, we will manage to see a whole lot of the British capital in this guide. We see great art in some of the world’s best galleries. We visit Hyde Park. There’s a stroll through Notting Hill, and a secret bar in the middle of China Town at the end. And yes, we even managed to sneak in a peek at the Tower Bridge, albeit, from afar.</p>
<p>Some beloved places didn’t make it into the schedule (because, really, how much coffee can you drink in a day?), but we will write about them on our blog. Just head over there and check the London section regularly if you have more time than just a day.</p>
<p>But now, without further ado, let’s spend 12hrs in London together!</p>
</div>
<div class="col-md-12 quote">
<blockquote>Grab a snack and a coffee, and sit down in one of those fancy Eames chairs.</blockquote>
</div>
<div class="col-md-5">
<img src="img/blog-450x450.png" alt="">
</div>
<div class="col-md-7">
<p>To find an affordable hotel in London is hard. Finding an affordable place to stay that also has great beds, beautiful interiors and friendly staff is almost impossible. But still, we managed. The mini design-hotel chain citizenM is one of our best kept secrets. They have hotels in Amsterdam, Glasgow and – you guessed it – London, and are expanding their portfolio right now.</p>
<p>All rooms look the same. And that is a good thing. The bed is a 2×2 Meters square of fluffy linen, movies are free (yes, all kinds of movies…) and the fast Wi-Fi just works. You can even adjust the lighting in the room to your mood with a touch pad. One thing if you are traveling with a friend: The bathroom is made our of opaque glass panels and is in the middle of the room. If you are very shy, you might have to come up with a bathroom schedule in which your temporary roomie takes a stroll through the hotel while you take a shower.</p>
<p>The lounge-y hotel lobby is always busy, and instead of a restaurant it features a self-service counter with pastries, some different meals, and drinks. Grab a snack and a coffee, and sit down in one of those fancy Eames chairs. We have a long day ahead of us, so you better enjoy your breakfast. Afterwards, make your way out on the street.</p>
<p>CitizenM is located Bankside, on the Southern bank of the river Thames. That’s not an area full of tourist, but it’s perfect for us. Our first stop is just a five minute walk away.</p>
</div>
</div>
<div class="row clear-top">
<div class="col-md-6">
<p>To find an affordable hotel in London is hard. Finding an affordable place to stay that also has great beds, beautiful interiors and friendly staff is almost impossible. But still, we managed. The mini design-hotel chain citizenM is one of our best kept secrets. They have hotels in Amsterdam, Glasgow and – you guessed it – London, and are expanding their portfolio right now.</p>
<p>All rooms look the same. And that is a good thing. The bed is a 2×2 Meters square of fluffy linen, movies are free (yes, all kinds of movies…) and the fast Wi-Fi just works. You can even adjust the lighting in the room to your mood with a touch pad. One thing if you are traveling with a friend: The bathroom is made our of opaque glass panels and is in the middle of the room. If you are very shy, you might have to come up with a bathroom schedule in which your temporary roomie takes a stroll through the hotel while you take a shower.</p>
</div>
<div class="col-md-6">
<p>To find an affordable hotel in London is hard. Finding an affordable place to stay that also has great beds, beautiful interiors and friendly staff is almost impossible. But still, we managed. The mini design-hotel chain citizenM is one of our best kept secrets. They have hotels in Amsterdam, Glasgow and – you guessed it – London, and are expanding their portfolio right now.</p>
<p>All rooms look the same. And that is a good thing. The bed is a 2×2 Meters square of fluffy linen, movies are free (yes, all kinds of movies…) and the fast Wi-Fi just works. You can even adjust the lighting in the room to your mood with a touch pad. One thing if you are traveling with a friend: The bathroom is made our of opaque glass panels and is in the middle of the room. If you are very shy, you might have to come up with a bathroom schedule in which your temporary roomie takes a stroll through the hotel while you take a shower.</p>
</div>
</div>
<div class="row clear-top">
<div class="col-md-12">
<h1 class="text-center">The End</h1>
</div>
</div>
</div>
<div class="container">
<div class="row">
<!-- <nav>
<ul class="pager">
<li><a href="#">Previous</a></li>
<li><a href="#">Next</a></li>
</ul>
</nav> -->
<footer class="social">
<ul>
<li>Follow us:</li>
<li><a href="#"><span class="glyphicon glyphicon-heart"></span></a></li>
<li><a href="#"><span class="glyphicon glyphicon-heart"></span></a></li>
<li><a href="#"><span class="glyphicon glyphicon-heart"></span></a></li>
<li><a href="#"><span class="glyphicon glyphicon-envelope"></span></a></li>
</ul>
</footer>
</div>
</div>
</div>
</div>
</div>
<!-- /#page-content-wrapper -->
</div>
<!-- /#wrapper -->
body {
position: relative;
overflow-x: hidden;
}
body,
html { height: 100%;}
.nav .open > a,
.nav .open > a:hover,
.nav .open > a:focus {background-color: transparent;}
/*-------------------------------*/
/* Wrappers */
/*-------------------------------*/
#wrapper {
padding-left: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled {
padding-left: 220px;
}
#sidebar-wrapper {
z-index: 1000;
left: 220px;
width: 0;
height: 100%;
margin-left: -220px;
overflow-y: auto;
overflow-x: hidden;
background: #1a1a1a;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#sidebar-wrapper::-webkit-scrollbar {
display: none;
}
#wrapper.toggled #sidebar-wrapper {
width: 220px;
}
#page-content-wrapper {
width: 100%;
padding-top: 70px;
}
#wrapper.toggled #page-content-wrapper {
position: absolute;
margin-right: -220px;
}
/*-------------------------------*/
/* Sidebar nav styles */
/*-------------------------------*/
.sidebar-nav {
position: absolute;
top: 0;
width: 220px;
margin: 0;
padding: 0;
list-style: none;
}
.sidebar-nav li {
position: relative;
line-height: 20px;
display: inline-block;
width: 100%;
}
.sidebar-nav li:before {
content: '';
position: absolute;
top: 0;
left: 0;
z-index: -1;
height: 100%;
width: 3px;
background-color: #1c1c1c;
-webkit-transition: width .2s ease-in;
-moz-transition: width .2s ease-in;
-ms-transition: width .2s ease-in;
transition: width .2s ease-in;
}
.sidebar-nav li:first-child a {
color: #fff;
background-color: #1a1a1a;
}
.sidebar-nav li:nth-child(2):before {
background-color: #ec1b5a;
}
.sidebar-nav li:nth-child(3):before {
background-color: #79aefe;
}
.sidebar-nav li:nth-child(4):before {
background-color: #314190;
}
.sidebar-nav li:nth-child(5):before {
background-color: #279636;
}
.sidebar-nav li:nth-child(6):before {
background-color: #7d5d81;
}
.sidebar-nav li:nth-child(7):before {
background-color: #ead24c;
}
.sidebar-nav li:nth-child(8):before {
background-color: #2d2366;
}
.sidebar-nav li:nth-child(9):before {
background-color: #35acdf;
}
.sidebar-nav li:hover:before,
.sidebar-nav li.open:hover:before {
width: 100%;
-webkit-transition: width .2s ease-in;
-moz-transition: width .2s ease-in;
-ms-transition: width .2s ease-in;
transition: width .2s ease-in;
}
.sidebar-nav li a {
display: block;
color: #ddd;
text-decoration: none;
padding: 10px 15px 10px 30px;
}
.sidebar-nav li a:hover,
.sidebar-nav li a:active,
.sidebar-nav li a:focus,
.sidebar-nav li.open a:hover,
.sidebar-nav li.open a:active,
.sidebar-nav li.open a:focus{
color: #fff;
text-decoration: none;
background-color: transparent;
}
.sidebar-nav > .sidebar-brand {
height: 65px;
font-size: 20px;
line-height: 44px;
}
.sidebar-nav .dropdown-menu {
position: relative;
width: 100%;
padding: 0;
margin: 0;
border-radius: 0;
border: none;
background-color: #222;
box-shadow: none;
}
/*-------------------------------*/
/* Hamburger-Cross */
/*-------------------------------*/
.hamburger {
position: fixed;
top: 20px;
z-index: 999;
display: block;
width: 32px;
height: 32px;
margin-left: 15px;
background: transparent;
border: none;
}
.hamburger:hover,
.hamburger:focus,
.hamburger:active {
outline: none;
}
.hamburger.is-closed:before {
content: '';
display: block;
width: 100px;
font-size: 14px;
color: #fff;
line-height: 32px;
text-align: center;
opacity: 0;
-webkit-transform: translate3d(0,0,0);
-webkit-transition: all .35s ease-in-out;
}
.hamburger.is-closed:hover:before {
opacity: 1;
display: block;
-webkit-transform: translate3d(-100px,0,0);
-webkit-transition: all .35s ease-in-out;
}
.hamburger.is-closed .hamb-top,
.hamburger.is-closed .hamb-middle,
.hamburger.is-closed .hamb-bottom,
.hamburger.is-open .hamb-top,
.hamburger.is-open .hamb-middle,
.hamburger.is-open .hamb-bottom {
position: absolute;
left: 0;
height: 4px;
width: 100%;
}
.hamburger.is-closed .hamb-top,
.hamburger.is-closed .hamb-middle,
.hamburger.is-closed .hamb-bottom {
background-color: #1a1a1a;
}
.hamburger.is-closed .hamb-top {
top: 5px;
-webkit-transition: all .35s ease-in-out;
}
.hamburger.is-closed .hamb-middle {
top: 50%;
margin-top: -2px;
}
.hamburger.is-closed .hamb-bottom {
bottom: 5px;
-webkit-transition: all .35s ease-in-out;
}
.hamburger.is-closed:hover .hamb-top {
top: 0;
-webkit-transition: all .35s ease-in-out;
}
.hamburger.is-closed:hover .hamb-bottom {
bottom: 0;
-webkit-transition: all .35s ease-in-out;
}
.hamburger.is-open .hamb-top,
.hamburger.is-open .hamb-middle,
.hamburger.is-open .hamb-bottom {
background-color: #1a1a1a;
}
.hamburger.is-open .hamb-top,
.hamburger.is-open .hamb-bottom {
top: 50%;
margin-top: -2px;
}
.hamburger.is-open .hamb-top {
-webkit-transform: rotate(45deg);
-webkit-transition: -webkit-transform .2s cubic-bezier(.73,1,.28,.08);
}
.hamburger.is-open .hamb-middle { display: none; }
.hamburger.is-open .hamb-bottom {
-webkit-transform: rotate(-45deg);
-webkit-transition: -webkit-transform .2s cubic-bezier(.73,1,.28,.08);
}
.hamburger.is-open:before {
content: '';
display: block;
width: 100px;
font-size: 14px;
color: #fff;
line-height: 32px;
text-align: center;
opacity: 0;
-webkit-transform: translate3d(0,0,0);
-webkit-transition: all .35s ease-in-out;
}
.hamburger.is-open:hover:before {
opacity: 1;
display: block;
-webkit-transform: translate3d(-100px,0,0);
-webkit-transition: all .35s ease-in-out;
}
/*-------------------------------*/
/* Overlay */
/*-------------------------------*/
.overlay {
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(250,250,250,.8);
z-index: 1;
}
body {
position: relative;
overflow-x: hidden;
}
body,
html { height: 100%;}
.nav .open > a,
.nav .open > a:hover,
.nav .open > a:focus {background-color: transparent;}
/*-------------------------------*/
/* Wrappers */
/*-------------------------------*/
#wrapper {
padding-left: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled {
padding-left: 220px;
}
#sidebar-wrapper {
z-index: 1000;
left: 220px;
width: 0;
height: 100%;
margin-left: -220px;
overflow-y: auto;
overflow-x: hidden;
background: #1a1a1a;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#sidebar-wrapper::-webkit-scrollbar {
display: none;
}
#wrapper.toggled #sidebar-wrapper {
width: 220px;
}
#page-content-wrapper {
width: 100%;
padding-top: 70px;
}
#wrapper.toggled #page-content-wrapper {
position: absolute;
margin-right: -220px;
}
/*-------------------------------*/
/* Sidebar nav styles */
/*-------------------------------*/
.sidebar-nav {
position: absolute;
top: 0;
width: 220px;
margin: 0;
padding: 0;
list-style: none;
}
.sidebar-nav li {
position: relative;
line-height: 20px;
display: inline-block;
width: 100%;
}
.sidebar-nav li:before {
content: '';
position: absolute;
top: 0;
left: 0;
z-index: -1;
height: 100%;
width: 3px;
background-color: #1c1c1c;
-webkit-transition: width .2s ease-in;
-moz-transition: width .2s ease-in;
-ms-transition: width .2s ease-in;
transition: width .2s ease-in;
}
.sidebar-nav li:first-child a {
color: #fff;
background-color: #1a1a1a;
}
.sidebar-nav li:nth-child(2):before {
background-color: #ec1b5a;
}
.sidebar-nav li:nth-child(3):before {
background-color: #79aefe;
}
.sidebar-nav li:nth-child(4):before {
background-color: #314190;
}
.sidebar-nav li:nth-child(5):before {
background-color: #279636;
}
.sidebar-nav li:nth-child(6):before {
background-color: #7d5d81;
}
.sidebar-nav li:nth-child(7):before {
background-color: #ead24c;
}
.sidebar-nav li:nth-child(8):before {
background-color: #2d2366;
}
.sidebar-nav li:nth-child(9):before {
background-color: #35acdf;
}
.sidebar-nav li:hover:before,
.sidebar-nav li.open:hover:before {
width: 100%;
-webkit-transition: width .2s ease-in;
-moz-transition: width .2s ease-in;
-ms-transition: width .2s ease-in;
transition: width .2s ease-in;
}
.sidebar-nav li a {
display: block;
color: #ddd;
text-decoration: none;
padding: 10px 15px 10px 30px;
}
.sidebar-nav li a:hover,
.sidebar-nav li a:active,
.sidebar-nav li a:focus,
.sidebar-nav li.open a:hover,
.sidebar-nav li.open a:active,
.sidebar-nav li.open a:focus{
color: #fff;
text-decoration: none;
background-color: transparent;
}
.sidebar-nav > .sidebar-brand {
height: 65px;
font-size: 20px;
line-height: 44px;
}
.sidebar-nav .dropdown-menu {
position: relative;
width: 100%;
padding: 0;
margin: 0;
border-radius: 0;
border: none;
background-color: #222;
box-shadow: none;
}
/*-------------------------------*/
/* Hamburger-Cross */
/*-------------------------------*/
.hamburger {
position: fixed;
top: 20px;
z-index: 999;
display: block;
width: 32px;
height: 32px;
margin-left: 15px;
background: transparent;
border: none;
}
.hamburger:hover,
.hamburger:focus,
.hamburger:active {
outline: none;
}
.hamburger.is-closed:before {
content: '';
display: block;
width: 100px;
font-size: 14px;
color: #fff;
line-height: 32px;
text-align: center;
opacity: 0;
-webkit-transform: translate3d(0,0,0);
-webkit-transition: all .35s ease-in-out;
}
.hamburger.is-closed:hover:before {
opacity: 1;
display: block;
-webkit-transform: translate3d(-100px,0,0);
-webkit-transition: all .35s ease-in-out;
}
.hamburger.is-closed .hamb-top,
.hamburger.is-closed .hamb-middle,
.hamburger.is-closed .hamb-bottom,
.hamburger.is-open .hamb-top,
.hamburger.is-open .hamb-middle,
.hamburger.is-open .hamb-bottom {
position: absolute;
left: 0;
height: 4px;
width: 100%;
}
.hamburger.is-closed .hamb-top,
.hamburger.is-closed .hamb-middle,
.hamburger.is-closed .hamb-bottom {
background-color: #1a1a1a;
}
.hamburger.is-closed .hamb-top {
top: 5px;
-webkit-transition: all .35s ease-in-out;
}
.hamburger.is-closed .hamb-middle {
top: 50%;
margin-top: -2px;
}
.hamburger.is-closed .hamb-bottom {
bottom: 5px;
-webkit-transition: all .35s ease-in-out;
}
.hamburger.is-closed:hover .hamb-top {
top: 0;
-webkit-transition: all .35s ease-in-out;
}
.hamburger.is-closed:hover .hamb-bottom {
bottom: 0;
-webkit-transition: all .35s ease-in-out;
}
.hamburger.is-open .hamb-top,
.hamburger.is-open .hamb-middle,
.hamburger.is-open .hamb-bottom {
background-color: #1a1a1a;
}
.hamburger.is-open .hamb-top,
.hamburger.is-open .hamb-bottom {
top: 50%;
margin-top: -2px;
}
.hamburger.is-open .hamb-top {
-webkit-transform: rotate(45deg);
-webkit-transition: -webkit-transform .2s cubic-bezier(.73,1,.28,.08);
}
.hamburger.is-open .hamb-middle { display: none; }
.hamburger.is-open .hamb-bottom {
-webkit-transform: rotate(-45deg);
-webkit-transition: -webkit-transform .2s cubic-bezier(.73,1,.28,.08);
}
.hamburger.is-open:before {
content: '';
display: block;
width: 100px;
font-size: 14px;
color: #fff;
line-height: 32px;
text-align: center;
opacity: 0;
-webkit-transform: translate3d(0,0,0);
-webkit-transition: all .35s ease-in-out;
}
.hamburger.is-open:hover:before {
opacity: 1;
display: block;
-webkit-transform: translate3d(-100px,0,0);
-webkit-transition: all .35s ease-in-out;
}
/*-------------------------------*/
/* Overlay */
/*-------------------------------*/
.overlay {
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(250,250,250,.8);
z-index: 1;
}
body{
letter-spacing: 1px;
}
/*.navbar{
margin-top: 15px;
}
.navbar a{
font-family: sans-serif;
color: #333;
}
.navbar span{
font-size: 20px;
}
.navbar-brand{
letter-spacing: 1.4px;
}
.search{
float: left;
margin-left: 15px;
font-size: 16px;
margin-bottom: 25px;
}*/
.sort{
margin-right: 15px;
font-size: 16px;
float: right;
margin-bottom: 25px;
}
.sort span, .search span{
color: #C8C8C8;
}
.tint {
position: relative;
/*float: left;*/
height: auto;
cursor: pointer;
}
.tint:before {
background: rgba(0,0,0,0.25);
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.list{
padding: 0;
}
.article-image{
padding: 0;
}
.quote{
margin: 85px;
width: 90%;
}
blockquote{
font-size: 36px;
}
.share{
margin-top: 15px;
}
.share span{
padding-right: 10px;
}
.article-title{
text-align: center;
color: #fff;
z-index: 100;
position: absolute;
margin: 10% auto 0 -4%;
font-size: 46px;
width: 100%;
}
.post:hover{
background-color: #eee;
/*background-color: #58bdc2;*/
/*color: #fff;*/
}
.post{
margin-bottom: 35px;
padding: 25px;
}
.post p{
width: 50%;
margin: 0 auto;
}
.clear-top{
margin-top: 50px;
}
img{
width: 100%;
}
.grid img{
margin-bottom: 30px;
}
.social ul{
float: right;
}
.social li{
float: left;
padding-right: 10px;
list-style: none;
margin-bottom: 50px;
}
.pager{
margin-top: 100px;
}
footer{
margin-top: 200px;
}
$(document).ready(function () {
var trigger = $('.hamburger'),
overlay = $('.overlay'),
isClosed = false;
trigger.click(function () {
hamburger_cross();
});
function hamburger_cross() {
if (isClosed == true) {
overlay.hide();
trigger.removeClass('is-open');
trigger.addClass('is-closed');
isClosed = false;
} else {
overlay.show();
trigger.removeClass('is-closed');
trigger.addClass('is-open');
isClosed = true;
}
}
$('[data-toggle="offcanvas"]').click(function () {
$('#wrapper').toggleClass('toggled');
});
});
