<style type="text/css">
/*<![CDATA[*/
/*box*/
.box {
width:auto;
margin:0 auto;
}
/* Step 1: Build the Animation */
@-webkit-keyframes aniload {
from {-webkit-transform:translate(0px, 1000px)}
to {-webkit-transform:translate(0px, 0px)}
}
@-moz-keyframes aniload {
from {-moz-transform:translate(0px, 1000px)}
to {-moz-transform:translate(0px, 0px)}
}
@-ms-keyframes aniload {
from {-ms-transform:translate(0px, 1000px)}
to {-ms-transform:translate(0px, 0px)}
}
@-o-keyframes aniload {
from {-o-transform:translate(0px, 1000px)}
to {-o-transform:translate(0px, 0px)}
}
@keyframes aniload {
from {transform:translate(0px, 1000px)}
to {transform:translate(0px, 0px)}
}
/* Step 2: Call the Animation */
#box1 {
-webkit-animation:aniload 4s;
-moz-animation:aniload 4s;
-ms-animation:aniload 4s;
-o-animation:aniload 4s;
animation:aniload 4s;
}
#box2 {
-webkit-animation:aniload 1s;
-moz-animation:aniload 1s;
-ms-animation:aniload 1s;
-o-animation:aniload 1s;
animation:aniload 1s;
}
#box3 {
-webkit-animation:aniload 4s;
-moz-animation:aniload 4s;
-ms-animation:aniload 4s;
-o-animation:aniload 4s;
animation:aniload 4s;
}
#box4 {
-webkit-animation:aniload 3s;
-moz-animation:aniload 3s;
-ms-animation:aniload 3s;
-o-animation:aniload 3s;
animation:aniload 3s;
}
#box5 {
-webkit-animation:aniload 3s;
-moz-animation:aniload 3s;
-ms-animation:aniload 3s;
-o-animation:aniload 3s;
animation:aniload 3s;
}
/*<![**************************arrow*******************************[*/
.line-arrow {
position: absolute;
overflow: hidden;
display: inline-block;
font-size: 12px; /*set the size for arrow*/
width: 4em;
height: 4em;
margin-top: -2em;
top: 50%;
}
.line-arrow.left {
border-top: 1px solid #a9a9a9;
border-left: 1px solid #a9a9a9;
transform: rotate(-54deg) skew(-20deg);
left: 20px;
}
.line-arrow.right {
border-top: 1px solid #a9a9a9;
border-right: 1px solid #a9a9a9;
transform: rotate(54deg) skew(20deg);
right: 20px;
}
.line-arrow:active,
.line-arrow.active {
border-width: 2px;
}
.square {
top: auto;
bottom: 10px;
}
.square.left {
transform: rotate(-45deg);
}
.square.right {
transform: rotate(45deg);
}
.carousel-control.left, .carousel-control.right {
background: none;
color: @red;
border: none;
}
.carousel-control.left {
background-image: linear-gradient(to right,rgba(0, 0, 0, 0) 0,rgba(0,0,0,.0001) 100%);
}
.carousel-control.left {margin-left: -0px; color: black;width: 35vh;font-size: 60px; margin-top: 20%;}
.carousel-control.right {margin-right: -0px; color: black;width: 35vh;font-size: 60px; margin-top: 20%;}
.j-module a:link, .j-module a:visited, .j-static-page a:link, .j-static-page a:visited, .jtpl-footer a:link, .jtpl-footer a:visited {
color: white;
}
/*<![**************************custom1*******************************[*/
.jtpl-header--image {
height: 0px;
}
#cc-m-13335564278 {
width: 100vw;
left: calc(-50vw + 50%);
position: relative;
padding: 0px;
}
.jtpl-content {
padding: 0px 0px;
}
.jtpl-breadcrumb, .jtpl-content, .jtpl-footer__inner, .jtpl-header__inner, .jtpl-sidebar__inner {
margin: 0 auto;
}
/*<![*****************MOBILE VIEW**********************[*/
@media (max-width:499){
#cc-m-10701149021 { display:none; }
h2 { font-size: 24px; }
// add as much or as little CSS as you like here
}
/*<![**************************slider2*******************************[*/
.jk-slider{
width:100%;
}
.content-options-inner h1:not(.cc-within-single-module-element):not(.j-blog-headline) {
padding: 20px;
}
/* Hero Headers */
/********************************/
.hero {
position: absolute;
top: 50%;
left: 50%;
z-index: 3;
color: #fff;
text-align: center;
text-transform: uppercase;
text-shadow: 1px 1px 0 rgba(0,0,0,.75);
-webkit-transform: translate3d(-50%,-50%,0);
-moz-transform: translate3d(-50%,-50%,0);
-ms-transform: translate3d(-50%,-50%,0);
-o-transform: translate3d(-50%,-50%,0);
transform: translate3d(-50%,-50%,0);
}
.hero h1 {
font-size: 6em;
font-weight: bold;
margin: 0;
padding: 0;
}
.fade-carousel .carousel-inner .item .hero {
opacity: 0;
-webkit-transition: 1s all ease-in-out .1s;
-moz-transition: 1s all ease-in-out .1s;
-ms-transition: 1s all ease-in-out .1s;
-o-transition: 1s all ease-in-out .1s;
transition: 1s all ease-in-out .1s;
}
.fade-carousel .carousel-inner .item.active .hero {
opacity: 1;
-webkit-transition: 1s all ease-in-out .1s;
-moz-transition: 1s all ease-in-out .1s;
-ms-transition: 1s all ease-in-out .1s;
-o-transition: 2s all ease-in-out .1s;
transition: 2s all ease-in-out .1s;
}
/********************************/
/* Overlay */
/********************************/
.overlay {
position: absolute;
width: 100%;
height: 100%;
z-index: 2;
background-color: #;
opacity: .7;
}
/**/
/*]]>*/
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript">
</script>
<script type="text/javascript">
//<![CDATA[
//slide rtidak pakai JS
//]]>
</script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous" type="text/css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous" type="text/css" />
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous" type="text/javascript">
</script>
den Code auch als solchen sichtbar zu machen.
