<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.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 ---------->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<div class="container">
<h1 class="text-center">SIMPLE FLIP SLIDER</h1>
<div class="row text-center" >
<div class="col-md-6 offset-md-3" style="position:relative;min-height:380px;top:50;margin-top:8vh;padding:2%;" >
<div class="" style="">
<div class="arrow-up" id="arrow_up">
<span class="fa fa-chevron-circle-up fa-3x txt-blue"></span>
</div>
<div class="arrow-down" id="arrow_down">
<span class="fa fa-chevron-circle-down fa-3x txt-blue"></span>
</div>
<div class="flexible-default flexible-div flexible-div1">
<div class="row" >
<h4 class="text-center flexible-div-header col-md-12"> Our services</h4>
<p class="col-md-12">
Lorem ipsum dolor sit amet, id sit vidit reque facer. Per solet delectus perfecto ei. Illud omnesque interpretaris no duo, ad aeterno fastidii liberavisse sit, case aliquid in sea. Ne atomorum moderatius argumentum vim.
</p>
<a id="workshop" onmouseover="bigImg('workshop')" onmouseout="bignor('workshop')"
class="btn btn-secondary btn-sm pull-right" href="#">
Read more   <span class="fa fa-angle-double-right"></span>
</a>
</div>
</div>
<div class="flexible-before flexible-div flexible-div2" >
<div class="row" >
<h4 class="flexible-div-header col-md-12"> Our partners </h4>
<div class="col-md-12">
<p>
Lorem ipsum dolor sit amet, id sit vidit reque facer. Per solet delectus perfecto ei. Illud omnesque interpretaris no duo, ad aeterno fastidii liberavisse sit, case aliquid in sea. Ne atomorum moderatius argumentum vim.
</p>
<p>
<a id="faq" onmouseover="bigImg('faq')" class="btn btn-secondary btn-sm pull-right"
onmouseout="bignor('faq')" href="{% url 'faq' %}">
Read more   <span class="fa fa-angle-double-right"></span>
</a>
</p>
</div>
</div>
</div>
<div class="flexible-current flexible-div card flexible-div3" >
<!--
<div class="iconbox-icon">
<span class="fa fa-envelope-open fa-lg"></span>
</div>-->
<div>
<h4 class="text-center flexible-div-header col-md-12"> News & Events</h4>
<p>
Lorem ipsum dolor sit amet, id sit vidit reque facer. Per solet delectus perfecto ei. Illud omnesque interpretaris no duo, ad aeterno fastidii liberavisse sit, case aliquid in sea. Ne atomorum moderatius argumentum vim.
</p>
<p>
<a id="faq" onmouseover="bigImg('faq')" class="btn btn-secondary btn-sm pull-right"
onmouseout="bignor('faq')" href="{% url 'faq' %}">
Read more   <span class="fa fa-angle-double-right"></span>
</a>
</p>
</div>
</div>
<div class="flexible-after flexible-div flexible-div4" >
<div class="row" >
<p class="flexible-div-header col-md-12"> Guidelines </p>
<div class="col-md-12">
<p>
Lorem ipsum dolor sit amet, id sit vidit reque facer. Per solet delectus perfecto ei. Illud omnesque interpretaris no duo, ad aeterno fastidii liberavisse sit, case aliquid in sea. Ne atomorum moderatius argumentum vim.
</p>
<p>
<a id="faq" onmouseover="bigImg('faq')" class="btn btn-secondary btn-sm pull-right"
onmouseout="bignor('faq')" href="{% url 'faq' %}">
Read more   <span class="fa fa-angle-double-right"></span>
</a>
</p>
</div>
</div>
</div>
<!-- style="background:#AEEA00;" -->
<div class="flexible-default2 flexible-div" >
<div class="row" >
<br>
<p class="flexible-div-header col-md-12"> FAQs </p>
<div class="col-md-12">
<p>
Lorem ipsum dolor sit amet, id sit vidit reque facer. Per solet delectus perfecto ei. Illud omnesque interpretaris no duo, ad aeterno fastidii liberavisse sit, case aliquid in sea. Ne atomorum moderatius argumentum vim.
</p>
<p>
<a id="faq" onmouseover="bigImg('faq')" class="btn btn-secondary btn-sm pull-right"
onmouseout="bignor('faq')" href="{% url 'faq' %}">
Read more   <span class="fa fa-angle-double-right"></span>
</a>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
.flexible-div1{background:#d50000;}
.flexible-div2{background:#78909C}
.flexible-div3{background:#D81B60}
.flexible-div4{background:#5C6BC0}
.flexible-div{
position:absolute;
max-height:350px;
width:100%;
/*background: #eee;*/
padding:10% 5%;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.16), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
transition: 0.3s;
font-family: 'Roboto Slab', serif;
font-size:14px;
color:#333;
}
.flexible-div-header{
background: #AEEA00;/*rgba(204, 204, 204,0.3);*/
min-height:40px;
padding:2%;
vertical-align: center;
text-align: center;
font-family: 'Roboto Slab', serif;
font-size: 24px;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
}
.arrow-up{
position:absolute;
top:-10px;
right:-40px;
}
.arrow-down{
position:absolute;
top:-10px;
left:2px;
}
.arrow-down,.arrow-up{
color:blue;
z-index:100;
}
.arrow-down:hover,.arrow-up:hover{
color:red;
font-size:1.2em;
}
.iconbox {
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.16), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
padding: 20px 25px;
text-align: right;
display: block;
}
.iconbox-icon {
background-color: rgba(0, 0, 0,0.5);
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
margin: 0 auto;
width: 60px;
height: 60px;
margin-top: -25px;
}
.iconbox-icon span {
color: #fff;
font-size: 42px;
display: block;
margin-left: auto;
margin-right: auto;
padding-top: 9px;
text-align: center;
vertical-align: middle;
}
.featureinfo h4 {
font-size: 26px;
letter-spacing: 1px;
text-transform: uppercase;
}
.featureinfo > p {
color: #000000;
font-size: 16px;
padding-top: 4px;
text-align: left;
}
/*animation styles*/
.bg-green{background:rgb(207, 223, 130) }
.flexible-default{height:300px;width:80%;margin: 0px 10%;}
.flexible-before{top:7%;z-index:90;height:300px;width:90%;margin: 0px 5%;}
.flexible-current{top:15%;height:300px;z-index:99;width:100%;background:#fff; box-shadow: 0.5px 0.5px 0.5px 0px #333;}
.flexible-after{bottom:7%;z-index:90;height:300px;width:90%;margin: 0px 5%;}
.flexible-default2{bottom:0px;height:300px;width:80%;margin: 0px 10%;}
.flexible-default,.flexible-before,.flexible-default2{
-webkit-transition: all 2s; /* Chrome*/
-moz-transition: all 2s; /* Mozilla*/
-o-transition: all 2s; /* Opera*/
transition: all 2s;
}
.flexible-current,.flexible-after{
-webkit-transition: all 4.2s; /* Chrome*/
-moz-transition: all 4.2s; /* Mozilla*/
-o-transition: all 4.2s; /* Opera*/
transition: all 4.2s;
}
/*
* STYLES FOR EXTRA SMALL (Portrait phones)
*/
@media (max-width: 575px) {
.flexible-div-header{
font-size: 15px;
}
}
/*
* STYLES FOR SMALL devices (landscape phones, 576px and up)
*/
@media (min-width: 576px) and (max-width: 767px) {
.flexible-div-header{
font-size: 15px;
}
}
/*
* STYLES FOR Medium devices (tablets, 768px and up)
*/
@media (min-width: 768px) and (max-width: 991px) {
.flexible-div-header{
font-size: 17px;
}
}
/*
function simple_delay(milliseconds){
var x = 1;
var y = null; // To keep under proper scope
setTimeout(function() {
x = x * 3 + 2;
y = x / 2;
}, milliseconds);
return
}*/
$(function(){
$( "#arrow_up" ).click(function() {
$(".flexible-default2").addClass("hold").removeClass("flexible-default2");
$(".flexible-default").addClass("flexible-default2").removeClass("flexible-default");
$(".flexible-before").addClass("flexible-default").removeClass("flexible-before");
$(".flexible-current").addClass("flexible-before","slow").removeClass("flexible-current card","slow");
$(".flexible-after").addClass("flexible-current card","slow").removeClass("flexible-after","slow");
$(".hold").addClass("flexible-after").removeClass("hold");
});
$( "#arrow_down" ).click(function() {
$(".flexible-default2").addClass("hold").removeClass("flexible-default2");
$(".flexible-after").addClass("flexible-default2").removeClass("flexible-after");
$(".flexible-current").addClass("flexible-after").removeClass("flexible-current card");
$(".flexible-before").addClass("flexible-current card").removeClass("flexible-before");
$(".flexible-default").addClass("flexible-before").removeClass("flexible-default");
$(".hold").addClass("flexible-default").removeClass("hold");
});
setInterval(function(){$('#arrow_up').click(); }, 4800);
});
