<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/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="carouselExampleIndicators" class="carousels slide features_tab_inner" data-ride="carousel">
<div class="features_tab_left">
<ol class="carousel-indicators nav nav-tabs features_tab">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active">
<img class="tab_icon" src="http://wethemez.com/demo/startupkit/img/tab-icon.png" alt="">
<span class="heading">Main Homepage</span>
<span class="summary">A well organized dashboard containing statistics, infographics.....</span>
</li>
<li data-target="#carouselExampleIndicators" data-slide-to="1" class="">
<img class="tab_icon" src="http://wethemez.com/demo/startupkit/img/tab-icon3.png" alt="">
<span class="heading">Employees</span>
<span class="summary">View, Add and Manage current employees</span>
</li>
<li data-target="#carouselExampleIndicators" data-slide-to="2" class="">
<img class="tab_icon" src="http://wethemez.com/demo/startupkit/img/tab-icon8.png" alt="">
<span class="heading">Holidays</span>
<span class="summary">View, Add and Manage holidays</span>
</li>
<li data-target="#carouselExampleIndicators" data-slide-to="3" class="">
<img class="tab_icon" src="http://wethemez.com/demo/startupkit/img/tab-icon3.png" alt="">
<span class="heading">Sick leaves</span>
<span class="summary">Manage sick leaves</span>
</li>
<li data-target="#carouselExampleIndicators" data-slide-to="4" class="">
<img class="tab_icon" src="http://wethemez.com/demo/startupkit/img/tab-icon3.png" alt="">
<span class="heading">Tools</span>
<span class="summary">QR Code Generator, CMR Generator</span>
</li>
</ol>
</div>
<div class="features_tab_right">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="http://wethemez.com/demo/startupkit/img/features_two6.jpg" alt="">
</div>
<div class="carousel-item">
<img src="http://wethemez.com/demo/startupkit/img/features_two6.jpg" alt="">
</div>
<div class="carousel-item">
<img src="http://wethemez.com/demo/startupkit/img/features_two6.jpg" alt="">
</div>
<div class="carousel-item">
<img src="http://wethemez.com/demo/startupkit/img/features_two6.jpg" alt="">
</div>
<div class="carousel-item">
<div class="container text-center" style='margin-top:5%'>
<div class="row">
<div class="col">
<a href="qr.php">
<img src="https://lowl.alexhoss86.com/cmr.png" class="img-fluid" alt="QR Codes generator">
<h2>QR Code generator</h2>
</a>
</div>
<div class="col">
<a href="createcmr.php">
<img src="https://lowl.alexhoss86.com/cmr.png" class="img-fluid" alt="CMR Generator">
<h2>CMR Generator</h2>
</a>
</div>
<div class="col">
<a href="calendar.php">
<img src="https://lowl.alexhoss86.com/cmr.png" class="img-fluid" alt="CMR Generator">
<h2>LOWL Holiday Calendar</h2>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
body{ background-image:url("https://hdwallsource.com/img/2014/9/blur-26347-27038-hd-wallpapers.jpg"); background-repeat:no-repeat; background-size:cover; }
/*================ features area two css ==============*/
a, a:link
{
text-decoration:none;
}
.features_tab_inner {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.features_tab_inner .features_tab_left {
width: 40%;
float: left;
}
.features_tab_inner .features_tab_left .features_tab {
max-width: 620px;
margin-left: auto;
margin-right: 70px;
padding-top: 20px;
border: 0px;
position: relative;
width: auto;
left: 0;
bottom: 0;
text-align: left;
display: block;
}
.features_tab_inner .features_tab_left .features_tab li {
margin: 0px 0px 10px;
display: block;
width: 100%;
max-width: 100%;
padding: 25px 50px 25px 80px;
height: 100%;
text-indent: inherit;
border-radius: 5px;
-webkit-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
transition: all 0.2s linear;
border: 1px solid #eee;
position: relative;
}
.features_tab_inner .features_tab_left .features_tab li .tab_icon {
position: absolute;
left: 30px;
top: 30px;
}
.features_tab_inner .features_tab_left .features_tab li .heading {
font-size: 18px;
line-height: 28px;
color: #555555;
font-weight: 600;
display: block;
position: relative;
padding-bottom: 5px;
}
.features_tab_inner .features_tab_left .features_tab li .summary {
font-size: 15px;
line-height: 25px;
color: #555555;
}
.features_tab_inner .features_tab_left .features_tab li.active, .features_tab_inner .features_tab_left .features_tab li:hover, .features_tab_inner .features_tab_left .features_tab li:focus {
background-color: white;
-webkit-box-shadow: 0px 8px 26px 2px rgba(0, 0, 0, 0.05);
box-shadow: 0px 8px 26px 2px rgba(0, 0, 0, 0.05);
}
.features_tab_inner .features_tab_right {
width: 50%;
float: left;
}
.features_tab_inner .features_tab_right .carousel-inner {
padding-right: 10px;
text-align: center;
-webkit-transition: all 0.625s cubic-bezier(0, 0, 0.2, 1);
-o-transition: all 0.625s cubic-bezier(0, 0, 0.2, 1);
transition: all 0.625s cubic-bezier(0, 0, 0.2, 1);
position: relative;
padding-left: 10px;
height: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.features_tab_inner .features_tab_right .carousel-inner .carousel-item {
opacity: 0;
left: 30px;
-webkit-transition: all 0.625s cubic-bezier(0, 0, 0.2, 1);
-o-transition: all 0.625s cubic-bezier(0, 0, 0.2, 1);
transition: all 0.625s cubic-bezier(0, 0, 0.2, 1);
padding-bottom: 23px;
padding-top: 10px;
}
.features_tab_inner .features_tab_right .carousel-inner img {
-webkit-box-shadow: 0px 0px 23px -4px rgba(0, 0, 0, 0.25);
box-shadow: 0px 0px 23px -4px rgba(0, 0, 0, 0.25);
position: relative;
-webkit-transition: all 0.625s cubic-bezier(0, 0, 0.2, 1);
-o-transition: all 0.625s cubic-bezier(0, 0, 0.2, 1);
transition: all 0.625s cubic-bezier(0, 0, 0.2, 1);
max-width: 100%;
}
.features_tab_inner .features_tab_right .carousel-inner .active {
opacity: 1;
visibility: visible;
display: block;
left: 0;
-webkit-transition: all 0.6s linear;
-o-transition: all 0.6s linear;
transition: all 0.6s linear;
}
.features_tab_inner .features_tab_right .carousel-inner .active img {
left: 0;
opacity: 1;
}
