[ Mini Kiebo ]
Server: Windows NT AKFAR_SERVER 10.0 build 26200 (Windows 10) AMD64
Path:
D:
/
xampp
/
htdocs
/
akademi
/
template
/
company-satu
/
vendor
/
slider-bootstrap
/
[
Home
]
File: slider-bootstrap.css
.main-container { padding: 10px 15px; } .skyblue { background-color: #22c8ff; } .deepskyblue { background-color: #00bfff; } .darkerskyblue { background-color: #00a6dd; } .carousel-indicators { bottom: 0; } .carousel-control.right, .carousel-control.left { background-image: none; } .carousel .item { height: 100%; width:100%; } .carousel-caption { padding : 1em; top: 0; left: 0; height: 100%; position: absolute; width: 40%; } .carousel-caption:after{ content: " "; position: absolute; display: block; width: 150%; height: 100%; top: 0; left: -400px; z-index: -1; background: rgba(255,0,0,0.4); transform-origin: bottom left; -ms-transform: skew(-30deg, 0deg); -webkit-transform: skew(-30deg, 0deg); transform: skew(-30deg, 0deg); } .carousel-caption h2{ line-height: 100px; margin-top:150px; } .carousel-caption h4{ color:#fff; } .carousel .icon-container { display: inline-block; font-size: 25px; line-height: 25px; padding: 1em; text-align: center; border-radius: 50%; } .carousel-caption button { border-color: #00bfff; margin-top: 1em; } .slide-text-heading { font-family: "Polar", Helvetica, Arial, sans-serif; font-size: 5rem; margin-bottom: 2rem; color : #fff; } .slide-text-desc { font-family: "Open Sans", Helvetica, Arial, sans-serif; font-size: 1.5rem; margin-bottom: 1.5rem; color : #fff; } /* Animation delays */ .carousel-caption h2:first-child { animation-delay: 1s; } .carousel-caption h2:nth-child(2) { animation-delay: 2s; } .carousel-caption h4:first-child { animation-delay: 1s; } .carousel-caption h4:nth-child(2) { animation-delay: 2s; } .carousel-caption button { animation-delay: 3s; } .carousel .carousel-control { visibility: hidden; } .carousel:hover .carousel-control { visibility: visible; } /* ##Device = Tablets, Ipads (portrait) ##Screen = B/w 768px to 1024px */ @media (min-width: 768px) and (max-width: 1024px) { .carousel-caption:after{ left:-220px; } .carousel-caption h4 { font-size:1em; } .carousel-caption h2{ margin-top:30px; font-size:30px; } } /* ##Device = Tablets, Ipads (landscape) ##Screen = B/w 768px to 1024px */ @media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) { .carousel-caption:after{ left:-220px; } .carousel-caption h4 { visibility:hidden; } .carousel-caption h2{ margin-top:60px; font-size:2.5em; } } /* ##Device = Low Resolution Tablets, Mobiles (Landscape) ##Screen = B/w 481px to 767px */ @media (min-width: 481px) and (max-width: 767px) { .carousel-caption:after{ left:-140px; } .carousel-caption h4 { visibility:hidden; } .carousel-caption h2{ margin-top:30px; font-size:30px; line-height: 30px; } } /* ##Device = Most of the Smartphones Mobiles (Portrait) ##Screen = B/w 320px to 479px */ @media (min-width: 320px) and (max-width: 480px) { .carousel-caption:after{ left:-100px; } .carousel-caption h4 { visibility:hidden; } .carousel-caption h2{ margin-top:10px; font-size:1.6em; line-height: 30px; } }