<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row overflownone">
<div class="col-md-4 information nopaddingleft nopaddingright hidden-sm hidden-xs">
<h4>Quick menu</h4>
<ul class="information_menu">
<li class="active" data-id="1"><a href="#"><i class="fa fa-calendar-plus-o"></i> Lorem ipsum </a></li>
<li data-id="2"><a href="#"><i class="fa fa-commenting-o"></i> Praesent posuere</a></li>
<li data-id="3"><a href="#"><i class="fa fa-medkit"></i> Phasellus imperdiet</a></li>
<li data-id="4"><a href="#"><i class="fa fa-heartbeat"></i> In accumsan</a></li>
</ul>
<a href="tel:000000000000" class="btn btn-emergency"><span><i class="fa fa-phone"></i> Direct call button</span></a>
</div>
<div class="col-md-8 nopaddingleft nopaddingright">
<div class="slideshow">
<div class="overlay-id1 overlay-item">
<h4>Choose option</h4>
<ul class="quickmenu">
<li><a href="#" title="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a></li>
<li><a href="#" title="#">Praesent posuere tellus a luctus aliquet.</a></li>
<li><a href="#" title="#">Phasellus imperdiet mi eget sollicitudin molestie.</a></li>
<li><a href="#" title="#">In accumsan tortor eget massa bibendum, ut suscipit elit maximus.</a></li>
<li><a href="#" title="#">Nulla sodales turpis vitae dapibus convallis.</a></li>
</ul>
</div>
<div class="overlay-id2 overlay-item">
<h3>Choose option</h3>
<ul class="quickmenu">
<li><a href="#" title="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a></li>
<li><a href="#" title="#">Praesent posuere tellus a luctus aliquet.</a></li>
<li><a href="#" title="#">Phasellus imperdiet mi eget sollicitudin molestie.</a></li>
<li><a href="#" title="#">In accumsan tortor eget massa bibendum, ut suscipit elit maximus.</a></li>
<li><a href="#" title="#">Nulla sodales turpis vitae dapibus convallis.</a></li>
</ul>
</div>
<div class="overlay-id3 overlay-item">
<h3>Choose option</h3>
<ul class="quickmenu">
<li><a href="#" title="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a></li>
<li><a href="#" title="#">Praesent posuere tellus a luctus aliquet.</a></li>
<li><a href="#" title="#">Phasellus imperdiet mi eget sollicitudin molestie.</a></li>
<li><a href="#" title="#">In accumsan tortor eget massa bibendum, ut suscipit elit maximus.</a></li>
<li><a href="#" title="#">Nulla sodales turpis vitae dapibus convallis.</a></li>
</ul>
</div>
<div class="overlay-id4 overlay-item">
<h3>Choose option</h3>
<ul class="quickmenu">
<li><a href="#" title="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a></li>
<li><a href="#" title="#">Praesent posuere tellus a luctus aliquet.</a></li>
<li><a href="#" title="#">Phasellus imperdiet mi eget sollicitudin molestie.</a></li>
<li><a href="#" title="#">In accumsan tortor eget massa bibendum, ut suscipit elit maximus.</a></li>
<li><a href="#" title="#">Nulla sodales turpis vitae dapibus convallis.</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="row visible-xs visible-sm ">
<div class="col-md-12 mobile-menu-bg">
<ul class="information_menu_mobile">
<li class="active"><a href="#"><i class="fa fa-calendar-plus-o"></i> <span class="hidden-xs">Lorem ipsum</span></a></li>
<li><a href="#"><i class="fa fa-commenting-o"></i> <span class="hidden-xs">Praesent posuere</span></a></li>
<li><a href="#"><i class="fa fa-medkit"></i> <span class="hidden-xs">Phasellus imperdiet</span></a></li>
<li><a href="#"><i class="fa fa-heartbeat"></i> <span class="hidden-xs">In accumsan</span></a></li>
</ul>
<div class="clearfix"></div>
</div>
</div>
</div>
@import url('//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css');
html {
font-size: 62.5%;
}
body {
font-size: 14px;
font-size: 14px;
font-size: 1.4rem;
background: #f5f5f5;
padding-top: 30px;
}
h4 {
font-size: 24px;
font-size: 24px;
font-size: 2.4rem;
}
.nopaddingleft {
padding-left: 0;
}
.nopaddingright {
padding-right: 0;
}
.overflownone {
overflow: hidden!important;
}
.information {
background: #2a3d46;
position: relative;
height: 400px;
}
.information h4 {
font-size: 34px;
font-size: 3.4rem;
font-family: "roboto", sans-serif;
font-weight: 500;
color: #FFF;
padding: 0 15px;
}
.information .information_menu {
padding: 0;
}
.information .information_menu li {
list-style: none;
position: relative;
}
.information .information_menu li.active {
background: #0383c5;
}
.information .information_menu li.active:after {
content: "";
width: 0;
height: 0;
border-top: 27px solid transparent;
border-bottom: 27px solid transparent;
border-left: 22px solid #0383c5;
position: absolute;
right: -22px;
z-index: 1000;
top: 0;
}
.information .information_menu li a {
color: #FFF;
display: block;
padding: 16px 20px;
font-size: 15px;
font-size: 1.5rem;
text-decoration: none;
}
.information .btn-emergency {
background: #f89406;
border: none;
margin: 20px;
display: block;
width: 88%;
color: #fff;
text-shadow: none;
padding: 0;
font-size: 20px;
font-size: 2rem;
}
.information .btn-emergency span {
padding: 15px;
display: block;
background-size: 30px 30px;
background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0.25, rgba(255, 255, 255, .15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, .15)), color-stop(0.75, rgba(255, 255, 255, .15)), color-stop(0.75, transparent), to(transparent));
background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
background-image: -o-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
background-image: linear, 135deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent;
-webkit-animation: animate-stripes 3s linear infinite;
-moz-animation: animate-stripes 3s linear infinite;
}
.mobile-menu-bg {
background: #2a3d46;
}
.information_menu_mobile {
margin: 0px;
padding: 0;
}
.information_menu_mobile li {
padding: 0;
float: left;
width: 25%;
list-style: none;
text-align: center;
}
.information_menu_mobile li a {
display: block;
padding: 10px;
color: #FFF;
text-decaration: none;
}
.information_menu_mobile li:hover a {
background: #0383c5;
text-decaration: none;
}
.slideshow {
overflow: hidden;
}
.slideshow .overlay-item {
position: absolute;
top: 0;
z-index: 999;
width: 360px;
background: rgba(248, 148, 6, 0.67);
height: 400px;
padding: 10px 30px;
display: none;
-webkit-animation: opendoor 0.75s ease 0s alternate;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.slideshow .overlay-item.active {
display: block;
-webkit-animation: opendoor 0.75s ease 0s alternate;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.slideshow .overlay-item.inactive {
display: block;
-webkit-animation: closedoor 0.75s ease 0s alternate;
transform-style: preserve-3d;
opacity:0;
}
.slideshow .overlay-item .quickmenu {
padding: 0;
}
.slideshow .overlay-item .quickmenu li {
list-style: none;
}
.slideshow .overlay-item .quickmenu li a {
color: #FFF;
display: block;
padding: 8px 20px;
font-size: 15px;
font-size: 1.5rem;
text-decoration: none;
}
#slider {
padding: 0px;
margin: 0px
}
#slider li {
padding: 0px;
list-style: none;
position: absolute;
}
#carousel-example-generic {
height: 400px
}
.carousel-fade .carousel-inner .item {
-webkit-transition-property: opacity;
transition-property: opacity;
}
.carousel-fade .carousel-inner .item,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
opacity: 0;
filter: alpha(opacity=0);
}
.carousel-fade .carousel-inner .active,
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
opacity: 1;
filter: alpha(opacity=100);
}
.carousel-fade .carousel-inner .next,
.carousel-fade .carousel-inner .prev,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
left: 0;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.carousel-fade .carousel-control {
z-index: 2;
}
html,
body,
.carousel,
.carousel-inner,
.carousel-inner .item {
height: 100%;
}
.item:nth-child(1) {
background: #74C390;
}
.item:nth-child(2) {
background: #51BCE8;
}
.item:nth-child(3) {
background: #E46653;
}
@-webkit-keyframes animate-stripes {
0% {
background-position: 0 0;
}
100% {
background-position: 60px 0;
}
}
@-webkit-keyframes in {
from {
-webkit-transform: scale(1.3);
}
to {
-webkit-transform: scale(1);
}
}
@-webkit-keyframes out {
0% {
-webkit-transform: scale(1);
}
100% {
-webkit-transform: scale(1.3);
}
}
@-webkit-keyframes opendoor {
from {
-webkit-transform: perspective(1000px) rotateY(90deg);
-webkit-transform-origin: 0% 50%;
}
to {
-webkit-transform: perspective(1000px) rotateY(0deg);
-webkit-transform-origin: 0% 50%;
}
}
@-webkit-keyframes closedoor {
from {
opacity:1;
-webkit-transform-origin: 0% 50%;
}
to {
opacity:0;
-webkit-transform-origin: 0% 50%;
}
}
$(document).ready(function() {
$('.information_menu').find('li').hover(function(e) {
$('.information_menu').find('li').removeClass('active');
$(this).addClass('active');
$(".overlay-item").removeClass("active");
$(".overlay-item").removeClass("inactive");
$(".overlay-id"+$(this).data("id")).addClass("active").removeClass("inactive");
$(".overlay-id"+$(this).data("id")).prev().addClass("inactive")
});
$('.slideshow').children().on('mouseleave',function(e) {
$(this).removeClass("active");
});
});
