<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 ---------->
<div class="wrapper">
<div class="sidebar-hotel">
<div class="side-in">
<figure class="logo">
<img src="http://www.qinside.biz/portals/0/images/google.png" alt="image view" class="img-responsive">
</figure>
<div class="side-menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Service</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Login</a></li>
</ul>
</div>
<div class="social-icon">
<a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-vimeo" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-google-plus" aria-hidden="true"></i></a>
</div>
</div>
</div>
<div class="content-hotel">
<h1>ABOUT US</h1>
<h2>WE DON'T PREACH ABOUT COFFEE WE MAKE COFFEE. WE HAVE EIGHT VENUES ACROSS THIS CELESTIAL ROCK.</h2>
<div class="post-list">
<div class="left-right">
<div class="left">
<a href="#"><img src="https://avada.theme-fusion.com/cafe/wp-content/uploads/sites/17/2015/02/about-11.jpg" alt="Logo"/></a>
</div>
<div class="right">
<H3>EAT DIFFERENTLY</H3>
<H4>VADA FOOD AT UNBEATABLE PRICES.</H4>
<P>Aged single origin dark coffee ristretto qui caffeine, body half and half kopi-luwak affogato cultivar. Wings ut single origin, medium decaffeinated, skinny arabica carajillo macchiato con panna caffeine arabica. Cinnamon, irish mazagran espresso beans caramelization americano. Foam sugar, cream cappuccino id macchiato whipped con panna. Id irish dark, sweet single shot, sweet, strong breve lungo half and half body.</P>
</div>
</div>
<div class="left-right">
<div class="left">
<a href="#"><img src="https://avada.theme-fusion.com/cafe/wp-content/uploads/sites/17/2015/02/about-11.jpg" alt="Logo"/></a>
</div>
<div class="right">
<H3>EAT DIFFERENTLY</H3>
<H4>VADA FOOD AT UNBEATABLE PRICES.</H4>
<P>Aged single origin dark coffee ristretto qui caffeine, body half and half kopi-luwak affogato cultivar. Wings ut single origin, medium decaffeinated, skinny arabica carajillo macchiato con panna caffeine arabica. Cinnamon, irish mazagran espresso beans caramelization americano. Foam sugar, cream cappuccino id macchiato whipped con panna. Id irish dark, sweet single shot, sweet, strong breve lungo half and half body.</P>
</div>
</div>
<div class="left-right">
<div class="left">
<a href="#"><img src="https://avada.theme-fusion.com/cafe/wp-content/uploads/sites/17/2015/02/about-11.jpg" alt="Logo"/></a>
</div>
<div class="right">
<H3>EAT DIFFERENTLY</H3>
<H4>VADA FOOD AT UNBEATABLE PRICES.</H4>
<P>Aged single origin dark coffee ristretto qui caffeine, body half and half kopi-luwak affogato cultivar. Wings ut single origin, medium decaffeinated, skinny arabica carajillo macchiato con panna caffeine arabica. Cinnamon, irish mazagran espresso beans caramelization americano. Foam sugar, cream cappuccino id macchiato whipped con panna. Id irish dark, sweet single shot, sweet, strong breve lungo half and half body.</P>
</div>
</div>
<div class="left-right">
<div class="left">
<a href="#"><img src="https://avada.theme-fusion.com/cafe/wp-content/uploads/sites/17/2015/02/about-11.jpg" alt="Logo"/></a>
</div>
<div class="right">
<H3>EAT DIFFERENTLY</H3>
<H4>VADA FOOD AT UNBEATABLE PRICES.</H4>
<P>Aged single origin dark coffee ristretto qui caffeine, body half and half kopi-luwak affogato cultivar. Wings ut single origin, medium decaffeinated, skinny arabica carajillo macchiato con panna caffeine arabica. Cinnamon, irish mazagran espresso beans caramelization americano. Foam sugar, cream cappuccino id macchiato whipped con panna. Id irish dark, sweet single shot, sweet, strong breve lungo half and half body.</P>
</div>
</div>
<div class="left-right">
<div class="left">
<a href="#"><img src="https://avada.theme-fusion.com/cafe/wp-content/uploads/sites/17/2015/02/about-11.jpg" alt="Logo"/></a>
</div>
<div class="right">
<H3>EAT DIFFERENTLY</H3>
<H4>VADA FOOD AT UNBEATABLE PRICES.</H4>
<P>Aged single origin dark coffee ristretto qui caffeine, body half and half kopi-luwak affogato cultivar. Wings ut single origin, medium decaffeinated, skinny arabica carajillo macchiato con panna caffeine arabica. Cinnamon, irish mazagran espresso beans caramelization americano. Foam sugar, cream cappuccino id macchiato whipped con panna. Id irish dark, sweet single shot, sweet, strong breve lungo half and half body.</P>
</div>
</div>
</div>
</div>
</div>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
html, body{height: 100%;
background-attachment: fixed;}
.wrapper {
width: 100%;
float: left;
background: url(../images/bg.jpg) no-repeat left center;
height: 100%;
}
.sidebar-hotel {
width: 20%;
height: 100%;
float: left;
background: #313539;
position:fixed;
top:0px;
left:0px;
}
.content-hotel{width:80%;padding:0px; margin-left: 20%;color:#fff;}
.side-in {
width: 100%;
float: left;
text-align: center;
padding: 25px 0;
}
.side-in .logo{margin:50px 0}
.side-menu{
width: 100%;
float: left;
margin: 15px 0;
}
.side-menu ul{
list-style: none;
margin: 0;
padding: 0;
text-align: center;
}
.side-menu ul li{
display: block;
}
.side-menu ul li a{
padding: 10px 0;
display: block;
border-bottom: 1px solid #96745e;
text-decoration: none;
font-size: 21px;
color: #ccc;
position:relative;
transition: all .5s ease;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
}
.side-menu ul li:first-child a{ border-top: 1px solid #96745e;}
.side-menu ul li a:after{position:absolute;right:0px;width:2px;height:100%; background:#fff;content:"";top:0px;display:none; transition: all .5s ease;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;}
.side-menu ul li a:hover{color:#fff;}
.side-menu ul li a:hover:after{display:block;}
.social-icon{width:100%;float:left;margin-top:15px;}
.social-icon a{margin:5px;}
.content-hotel h1{margin:0px;padding:0px 20px;font:400 50px/60px "Arial"; text-transform:uppercase;color:#fff;text-align:center;padding:50px 0 0 0}
.content-hotel img{max-width:100%;}
.content-hotel h2{margin:0px;padding:0px 20px;font:400 30px/40px "Arial"; text-transform:capitalize;color:#fff;text-align:center;}
.post-list{width:100%; float:left;margin-top:200px; background:#fff;padding:0px 0px;}
.left-right{width:100%;float:left;background: #313539;}
.left-right:nth-child(even) .left{float:right;}
.left-right .left{width:50%; float:left;}
.left-right .right{width:50%;float:left;padding:3%;color:#000;background: #313539;color: #fff;}
