Website templates

This commit is contained in:
Dawid Olko
2023-07-26 19:33:39 +02:00
commit 0d2d73a034
10339 changed files with 2002333 additions and 0 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,170 @@
div.pp_default .pp_top,div.pp_default .pp_top .pp_middle,div.pp_default .pp_top .pp_left,div.pp_default .pp_top .pp_right,div.pp_default .pp_bottom,div.pp_default .pp_bottom .pp_left,div.pp_default .pp_bottom .pp_middle,div.pp_default .pp_bottom .pp_right{height:13px}
div.pp_default .pp_top .pp_left{background:url(../images/prettyPhoto/default/sprite.png) -78px -93px no-repeat}
div.pp_default .pp_top .pp_middle{background:url(../images/prettyPhoto/default/sprite_x.png) top left repeat-x}
div.pp_default .pp_top .pp_right{background:url(../images/prettyPhoto/default/sprite.png) -112px -93px no-repeat}
div.pp_default .pp_content .ppt{color:#f8f8f8}
div.pp_default .pp_content_container .pp_left{background:url(../images/prettyPhoto/default/sprite_y.png) -7px 0 repeat-y;padding-left:13px}
div.pp_default .pp_content_container .pp_right{background:url(../images/prettyPhoto/default/sprite_y.png) top right repeat-y;padding-right:13px}
div.pp_default .pp_next:hover{background:url(../images/prettyPhoto/default/sprite_next.png) center right no-repeat;cursor:pointer}
div.pp_default .pp_previous:hover{background:url(../images/prettyPhoto/default/sprite_prev.png) center left no-repeat;cursor:pointer}
div.pp_default .pp_expand{background:url(../images/prettyPhoto/default/sprite.png) 0 -29px no-repeat;cursor:pointer;width:28px;height:28px}
div.pp_default .pp_expand:hover{background:url(../images/prettyPhoto/default/sprite.png) 0 -56px no-repeat;cursor:pointer}
div.pp_default .pp_contract{background:url(../images/prettyPhoto/default/sprite.png) 0 -84px no-repeat;cursor:pointer;width:28px;height:28px}
div.pp_default .pp_contract:hover{background:url(../images/prettyPhoto/default/sprite.png) 0 -113px no-repeat;cursor:pointer}
div.pp_default .pp_close{width:30px;height:30px;background:url(../images/prettyPhoto/default/sprite.png) 2px 1px no-repeat;cursor:pointer}
div.pp_default .pp_gallery ul li a{background:url(../images/prettyPhoto/default/default_thumb.png) center center #f8f8f8;border:1px solid #aaa}
div.pp_default .pp_social{margin-top:7px}
div.pp_default .pp_gallery a.pp_arrow_previous,div.pp_default .pp_gallery a.pp_arrow_next{position:static;left:auto}
div.pp_default .pp_nav .pp_play,div.pp_default .pp_nav .pp_pause{background:url(../images/prettyPhoto/default/sprite.png) -51px 1px no-repeat;height:30px;width:30px}
div.pp_default .pp_nav .pp_pause{background-position:-51px -29px}
div.pp_default a.pp_arrow_previous,div.pp_default a.pp_arrow_next{background:url(../images/prettyPhoto/default/sprite.png) -31px -3px no-repeat;height:20px;width:20px;margin:4px 0 0}
div.pp_default a.pp_arrow_next{left:52px;background-position:-82px -3px}
div.pp_default .pp_content_container .pp_details{margin-top:5px}
div.pp_default .pp_nav{clear:none;height:30px;width:110px;position:relative}
div.pp_default .pp_nav .currentTextHolder{font-family:Georgia;font-style:italic;color:#999;font-size:11px;left:75px;line-height:25px;position:absolute;top:2px;margin:0;padding:0 0 0 10px}
div.pp_default .pp_close:hover,div.pp_default .pp_nav .pp_play:hover,div.pp_default .pp_nav .pp_pause:hover,div.pp_default .pp_arrow_next:hover,div.pp_default .pp_arrow_previous:hover{opacity:0.7}
div.pp_default .pp_description{font-size:11px;font-weight:700;line-height:14px;margin:5px 50px 5px 0}
div.pp_default .pp_bottom .pp_left{background:url(../images/prettyPhoto/default/sprite.png) -78px -127px no-repeat}
div.pp_default .pp_bottom .pp_middle{background:url(../images/prettyPhoto/default/sprite_x.png) bottom left repeat-x}
div.pp_default .pp_bottom .pp_right{background:url(../images/prettyPhoto/default/sprite.png) -112px -127px no-repeat}
div.pp_default .pp_loaderIcon{background:url(../images/prettyPhoto/default/loader.gif) center center no-repeat}
div.light_rounded .pp_top .pp_left{background:url(../images/prettyPhoto/light_rounded/sprite.png) -88px -53px no-repeat}
div.light_rounded .pp_top .pp_right{background:url(../images/prettyPhoto/light_rounded/sprite.png) -110px -53px no-repeat}
div.light_rounded .pp_next:hover{background:url(../images/prettyPhoto/light_rounded/btnNext.png) center right no-repeat;cursor:pointer}
div.light_rounded .pp_previous:hover{background:url(../images/prettyPhoto/light_rounded/btnPrevious.png) center left no-repeat;cursor:pointer}
div.light_rounded .pp_expand{background:url(../images/prettyPhoto/light_rounded/sprite.png) -31px -26px no-repeat;cursor:pointer}
div.light_rounded .pp_expand:hover{background:url(../images/prettyPhoto/light_rounded/sprite.png) -31px -47px no-repeat;cursor:pointer}
div.light_rounded .pp_contract{background:url(../images/prettyPhoto/light_rounded/sprite.png) 0 -26px no-repeat;cursor:pointer}
div.light_rounded .pp_contract:hover{background:url(../images/prettyPhoto/light_rounded/sprite.png) 0 -47px no-repeat;cursor:pointer}
div.light_rounded .pp_close{width:75px;height:22px;background:url(../images/prettyPhoto/light_rounded/sprite.png) -1px -1px no-repeat;cursor:pointer}
div.light_rounded .pp_nav .pp_play{background:url(../images/prettyPhoto/light_rounded/sprite.png) -1px -100px no-repeat;height:15px;width:14px}
div.light_rounded .pp_nav .pp_pause{background:url(../images/prettyPhoto/light_rounded/sprite.png) -24px -100px no-repeat;height:15px;width:14px}
div.light_rounded .pp_arrow_previous{background:url(../images/prettyPhoto/light_rounded/sprite.png) 0 -71px no-repeat}
div.light_rounded .pp_arrow_next{background:url(../images/prettyPhoto/light_rounded/sprite.png) -22px -71px no-repeat}
div.light_rounded .pp_bottom .pp_left{background:url(../images/prettyPhoto/light_rounded/sprite.png) -88px -80px no-repeat}
div.light_rounded .pp_bottom .pp_right{background:url(../images/prettyPhoto/light_rounded/sprite.png) -110px -80px no-repeat}
div.dark_rounded .pp_top .pp_left{background:url(../images/prettyPhoto/dark_rounded/sprite.png) -88px -53px no-repeat}
div.dark_rounded .pp_top .pp_right{background:url(../images/prettyPhoto/dark_rounded/sprite.png) -110px -53px no-repeat}
div.dark_rounded .pp_content_container .pp_left{background:url(../images/prettyPhoto/dark_rounded/contentPattern.png) top left repeat-y}
div.dark_rounded .pp_content_container .pp_right{background:url(../images/prettyPhoto/dark_rounded/contentPattern.png) top right repeat-y}
div.dark_rounded .pp_next:hover{background:url(../images/prettyPhoto/dark_rounded/btnNext.png) center right no-repeat;cursor:pointer}
div.dark_rounded .pp_previous:hover{background:url(../images/prettyPhoto/dark_rounded/btnPrevious.png) center left no-repeat;cursor:pointer}
div.dark_rounded .pp_expand{background:url(../images/prettyPhoto/dark_rounded/sprite.png) -31px -26px no-repeat;cursor:pointer}
div.dark_rounded .pp_expand:hover{background:url(../images/prettyPhoto/dark_rounded/sprite.png) -31px -47px no-repeat;cursor:pointer}
div.dark_rounded .pp_contract{background:url(../images/prettyPhoto/dark_rounded/sprite.png) 0 -26px no-repeat;cursor:pointer}
div.dark_rounded .pp_contract:hover{background:url(../images/prettyPhoto/dark_rounded/sprite.png) 0 -47px no-repeat;cursor:pointer}
div.dark_rounded .pp_close{width:75px;height:22px;background:url(../images/prettyPhoto/dark_rounded/sprite.png) -1px -1px no-repeat;cursor:pointer}
div.dark_rounded .pp_description{margin-right:85px;color:#fff}
div.dark_rounded .pp_nav .pp_play{background:url(../images/prettyPhoto/dark_rounded/sprite.png) -1px -100px no-repeat;height:15px;width:14px}
div.dark_rounded .pp_nav .pp_pause{background:url(../images/prettyPhoto/dark_rounded/sprite.png) -24px -100px no-repeat;height:15px;width:14px}
div.dark_rounded .pp_arrow_previous{background:url(../images/prettyPhoto/dark_rounded/sprite.png) 0 -71px no-repeat}
div.dark_rounded .pp_arrow_next{background:url(../images/prettyPhoto/dark_rounded/sprite.png) -22px -71px no-repeat}
div.dark_rounded .pp_bottom .pp_left{background:url(../images/prettyPhoto/dark_rounded/sprite.png) -88px -80px no-repeat}
div.dark_rounded .pp_bottom .pp_right{background:url(../images/prettyPhoto/dark_rounded/sprite.png) -110px -80px no-repeat}
div.dark_rounded .pp_loaderIcon{background:url(../images/prettyPhoto/dark_rounded/loader.gif) center center no-repeat}
div.dark_square .pp_left,div.dark_square .pp_middle,div.dark_square .pp_right,div.dark_square .pp_content{background:#000}
div.dark_square .pp_description{color:#fff;margin:0 85px 0 0}
div.dark_square .pp_loaderIcon{background:url(../images/prettyPhoto/dark_square/loader.gif) center center no-repeat}
div.dark_square .pp_expand{background:url(../images/prettyPhoto/dark_square/sprite.png) -31px -26px no-repeat;cursor:pointer}
div.dark_square .pp_expand:hover{background:url(../images/prettyPhoto/dark_square/sprite.png) -31px -47px no-repeat;cursor:pointer}
div.dark_square .pp_contract{background:url(../images/prettyPhoto/dark_square/sprite.png) 0 -26px no-repeat;cursor:pointer}
div.dark_square .pp_contract:hover{background:url(../images/prettyPhoto/dark_square/sprite.png) 0 -47px no-repeat;cursor:pointer}
div.dark_square .pp_close{width:75px;height:22px;background:url(../images/prettyPhoto/dark_square/sprite.png) -1px -1px no-repeat;cursor:pointer}
div.dark_square .pp_nav{clear:none}
div.dark_square .pp_nav .pp_play{background:url(../images/prettyPhoto/dark_square/sprite.png) -1px -100px no-repeat;height:15px;width:14px}
div.dark_square .pp_nav .pp_pause{background:url(../images/prettyPhoto/dark_square/sprite.png) -24px -100px no-repeat;height:15px;width:14px}
div.dark_square .pp_arrow_previous{background:url(../images/prettyPhoto/dark_square/sprite.png) 0 -71px no-repeat}
div.dark_square .pp_arrow_next{background:url(../images/prettyPhoto/dark_square/sprite.png) -22px -71px no-repeat}
div.dark_square .pp_next:hover{background:url(../images/prettyPhoto/dark_square/btnNext.png) center right no-repeat;cursor:pointer}
div.dark_square .pp_previous:hover{background:url(../images/prettyPhoto/dark_square/btnPrevious.png) center left no-repeat;cursor:pointer}
div.light_square .pp_expand{background:url(../images/prettyPhoto/light_square/sprite.png) -31px -26px no-repeat;cursor:pointer}
div.light_square .pp_expand:hover{background:url(../images/prettyPhoto/light_square/sprite.png) -31px -47px no-repeat;cursor:pointer}
div.light_square .pp_contract{background:url(../images/prettyPhoto/light_square/sprite.png) 0 -26px no-repeat;cursor:pointer}
div.light_square .pp_contract:hover{background:url(../images/prettyPhoto/light_square/sprite.png) 0 -47px no-repeat;cursor:pointer}
div.light_square .pp_close{width:75px;height:22px;background:url(../images/prettyPhoto/light_square/sprite.png) -1px -1px no-repeat;cursor:pointer}
div.light_square .pp_nav .pp_play{background:url(../images/prettyPhoto/light_square/sprite.png) -1px -100px no-repeat;height:15px;width:14px}
div.light_square .pp_nav .pp_pause{background:url(../images/prettyPhoto/light_square/sprite.png) -24px -100px no-repeat;height:15px;width:14px}
div.light_square .pp_arrow_previous{background:url(../images/prettyPhoto/light_square/sprite.png) 0 -71px no-repeat}
div.light_square .pp_arrow_next{background:url(../images/prettyPhoto/light_square/sprite.png) -22px -71px no-repeat}
div.light_square .pp_next:hover{background:url(../images/prettyPhoto/light_square/btnNext.png) center right no-repeat;cursor:pointer}
div.light_square .pp_previous:hover{background:url(../images/prettyPhoto/light_square/btnPrevious.png) center left no-repeat;cursor:pointer}
div.facebook .pp_top .pp_left{background:url(../images/prettyPhoto/facebook/sprite.png) -88px -53px no-repeat}
div.facebook .pp_top .pp_middle{background:url(../images/prettyPhoto/facebook/contentPatternTop.png) top left repeat-x}
div.facebook .pp_top .pp_right{background:url(../images/prettyPhoto/facebook/sprite.png) -110px -53px no-repeat}
div.facebook .pp_content_container .pp_left{background:url(../images/prettyPhoto/facebook/contentPatternLeft.png) top left repeat-y}
div.facebook .pp_content_container .pp_right{background:url(../images/prettyPhoto/facebook/contentPatternRight.png) top right repeat-y}
div.facebook .pp_expand{background:url(../images/prettyPhoto/facebook/sprite.png) -31px -26px no-repeat;cursor:pointer}
div.facebook .pp_expand:hover{background:url(../images/prettyPhoto/facebook/sprite.png) -31px -47px no-repeat;cursor:pointer}
div.facebook .pp_contract{background:url(../images/prettyPhoto/facebook/sprite.png) 0 -26px no-repeat;cursor:pointer}
div.facebook .pp_contract:hover{background:url(../images/prettyPhoto/facebook/sprite.png) 0 -47px no-repeat;cursor:pointer}
div.facebook .pp_close{width:22px;height:22px;background:url(../images/prettyPhoto/facebook/sprite.png) -1px -1px no-repeat;cursor:pointer}
div.facebook .pp_description{margin:0 37px 0 0}
div.facebook .pp_loaderIcon{background:url(../images/prettyPhoto/facebook/loader.gif) center center no-repeat}
div.facebook .pp_arrow_previous{background:url(../images/prettyPhoto/facebook/sprite.png) 0 -71px no-repeat;height:22px;margin-top:0;width:22px}
div.facebook .pp_arrow_previous.disabled{background-position:0 -96px;cursor:default}
div.facebook .pp_arrow_next{background:url(../images/prettyPhoto/facebook/sprite.png) -32px -71px no-repeat;height:22px;margin-top:0;width:22px}
div.facebook .pp_arrow_next.disabled{background-position:-32px -96px;cursor:default}
div.facebook .pp_nav{margin-top:0}
div.facebook .pp_nav p{font-size:15px;padding:0 3px 0 4px}
div.facebook .pp_nav .pp_play{background:url(../images/prettyPhoto/facebook/sprite.png) -1px -123px no-repeat;height:22px;width:22px}
div.facebook .pp_nav .pp_pause{background:url(../images/prettyPhoto/facebook/sprite.png) -32px -123px no-repeat;height:22px;width:22px}
div.facebook .pp_next:hover{background:url(../images/prettyPhoto/facebook/btnNext.png) center right no-repeat;cursor:pointer}
div.facebook .pp_previous:hover{background:url(../images/prettyPhoto/facebook/btnPrevious.png) center left no-repeat;cursor:pointer}
div.facebook .pp_bottom .pp_left{background:url(../images/prettyPhoto/facebook/sprite.png) -88px -80px no-repeat}
div.facebook .pp_bottom .pp_middle{background:url(../images/prettyPhoto/facebook/contentPatternBottom.png) top left repeat-x}
div.facebook .pp_bottom .pp_right{background:url(../images/prettyPhoto/facebook/sprite.png) -110px -80px no-repeat}
div.pp_pic_holder a:focus{outline:none}
div.pp_overlay{background:#000;display:none;left:0;position:absolute;top:0;width:100%;z-index:9500}
div.pp_pic_holder{display:none;position:absolute;width:100px;z-index:10000}
.pp_content{height:40px;min-width:40px}
* html .pp_content{width:40px}
.pp_content_container{position:relative;text-align:left;width:100%}
.pp_content_container .pp_left{padding-left:20px}
.pp_content_container .pp_right{padding-right:20px}
.pp_content_container .pp_details{float:left;margin:10px 0 2px}
.pp_description{display:none;margin:0}
.pp_social{float:left;margin:0}
.pp_social .facebook{float:left;margin-left:5px;width:55px;overflow:hidden}
.pp_social .twitter{float:left}
.pp_nav{clear:right;float:left;margin:3px 10px 0 0}
.pp_nav p{float:left;white-space:nowrap;margin:2px 4px}
.pp_nav .pp_play,.pp_nav .pp_pause{float:left;margin-right:4px;text-indent:-10000px}
a.pp_arrow_previous,a.pp_arrow_next{display:block;float:left;height:15px;margin-top:3px;overflow:hidden;text-indent:-10000px;width:14px}
.pp_hoverContainer{position:absolute;top:0;width:100%;z-index:2000}
.pp_gallery{display:none;left:50%;margin-top:-50px;position:absolute;z-index:10000}
.pp_gallery div{float:left;overflow:hidden;position:relative}
.pp_gallery ul{float:left;height:35px;position:relative;white-space:nowrap;margin:0 0 0 5px;padding:0}
.pp_gallery ul a{border:1px rgba(0,0,0,0.5) solid;display:block;float:left;height:33px;overflow:hidden}
.pp_gallery ul a img{border:0}
.pp_gallery li{display:block;float:left;margin:0 5px 0 0;padding:0}
.pp_gallery li.default a{background:url(../images/prettyPhoto/facebook/default_thumbnail.gif) 0 0 no-repeat;display:block;height:33px;width:50px}
.pp_gallery .pp_arrow_previous,.pp_gallery .pp_arrow_next{margin-top:7px!important}
a.pp_next{background:url(../images/prettyPhoto/light_rounded/btnNext.png) 10000px 10000px no-repeat;display:block;float:right;height:100%;text-indent:-10000px;width:49%}
a.pp_previous{background:url(../images/prettyPhoto/light_rounded/btnNext.png) 10000px 10000px no-repeat;display:block;float:left;height:100%;text-indent:-10000px;width:49%}
a.pp_expand,a.pp_contract{cursor:pointer;display:none;height:20px;position:absolute;right:30px;text-indent:-10000px;top:10px;width:20px;z-index:20000}
a.pp_close{position:absolute;right:0;top:0;display:block;line-height:22px;text-indent:-10000px}
.pp_loaderIcon{display:block;height:24px;left:50%;position:absolute;top:50%;width:24px;margin:-12px 0 0 -12px}
#pp_full_res{line-height:1!important}
#pp_full_res .pp_inline{text-align:left}
#pp_full_res .pp_inline p{margin:0 0 15px}
div.ppt{color:#fff;display:none;font-size:17px;z-index:9999;margin:0 0 5px 15px}
div.pp_default .pp_content,div.light_rounded .pp_content{background-color:#fff}
div.pp_default #pp_full_res .pp_inline,div.light_rounded .pp_content .ppt,div.light_rounded #pp_full_res .pp_inline,div.light_square .pp_content .ppt,div.light_square #pp_full_res .pp_inline,div.facebook .pp_content .ppt,div.facebook #pp_full_res .pp_inline{color:#000}
div.pp_default .pp_gallery ul li a:hover,div.pp_default .pp_gallery ul li.selected a,.pp_gallery ul a:hover,.pp_gallery li.selected a{border-color:#fff}
div.pp_default .pp_details,div.light_rounded .pp_details,div.dark_rounded .pp_details,div.dark_square .pp_details,div.light_square .pp_details,div.facebook .pp_details{position:relative}
div.light_rounded .pp_top .pp_middle,div.light_rounded .pp_content_container .pp_left,div.light_rounded .pp_content_container .pp_right,div.light_rounded .pp_bottom .pp_middle,div.light_square .pp_left,div.light_square .pp_middle,div.light_square .pp_right,div.light_square .pp_content,div.facebook .pp_content{background:#fff}
div.light_rounded .pp_description,div.light_square .pp_description{margin-right:85px}
div.light_rounded .pp_gallery a.pp_arrow_previous,div.light_rounded .pp_gallery a.pp_arrow_next,div.dark_rounded .pp_gallery a.pp_arrow_previous,div.dark_rounded .pp_gallery a.pp_arrow_next,div.dark_square .pp_gallery a.pp_arrow_previous,div.dark_square .pp_gallery a.pp_arrow_next,div.light_square .pp_gallery a.pp_arrow_previous,div.light_square .pp_gallery a.pp_arrow_next{margin-top:12px!important}
div.light_rounded .pp_arrow_previous.disabled,div.dark_rounded .pp_arrow_previous.disabled,div.dark_square .pp_arrow_previous.disabled,div.light_square .pp_arrow_previous.disabled{background-position:0 -87px;cursor:default}
div.light_rounded .pp_arrow_next.disabled,div.dark_rounded .pp_arrow_next.disabled,div.dark_square .pp_arrow_next.disabled,div.light_square .pp_arrow_next.disabled{background-position:-22px -87px;cursor:default}
div.light_rounded .pp_loaderIcon,div.light_square .pp_loaderIcon{background:url(../images/prettyPhoto/light_rounded/loader.gif) center center no-repeat}
div.dark_rounded .pp_top .pp_middle,div.dark_rounded .pp_content,div.dark_rounded .pp_bottom .pp_middle{background:url(../images/prettyPhoto/dark_rounded/contentPattern.png) top left repeat}
div.dark_rounded .currentTextHolder,div.dark_square .currentTextHolder{color:#c4c4c4}
div.dark_rounded #pp_full_res .pp_inline,div.dark_square #pp_full_res .pp_inline{color:#fff}
.pp_top,.pp_bottom{height:20px;position:relative}
* html .pp_top,* html .pp_bottom{padding:0 20px}
.pp_top .pp_left,.pp_bottom .pp_left{height:20px;left:0;position:absolute;width:20px}
.pp_top .pp_middle,.pp_bottom .pp_middle{height:20px;left:20px;position:absolute;right:20px}
* html .pp_top .pp_middle,* html .pp_bottom .pp_middle{left:0;position:static}
.pp_top .pp_right,.pp_bottom .pp_right{height:20px;left:auto;position:absolute;right:0;top:0;width:20px}
.pp_fade,.pp_gallery li.default a img{display:none}

View File

@@ -0,0 +1,571 @@
.demo-1 .sl-slider-wrapper {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.demo-2 {
margin-top: 102px;
}
.demo-2 .sl-slider-wrapper {
width: 100%;
height: 600px;
overflow: hidden;
position: relative;
}
.demo-2 .sl-slider h2,
.demo-2 .sl-slider blockquote {
padding: 100px 30px 10px 30px;
width: 80%;
max-width: 960px;
color: #fff;
margin: 0 auto;
position: relative;
z-index: 100;
}
.demo-2 .sl-slider h2 {
font-size: 100px;
text-shadow: 0 -1px 0 rgba(0,0,0,0.2);
}
.demo-2 .sl-slider blockquote {
font-size: 28px;
padding-top: 10px;
font-weight: 300;
text-shadow: 0 -1px 0 rgba(0,0,0,0.2);
}
.demo-2 .sl-slider blockquote cite {
font-size: 16px;
font-weight: 700;
font-style: normal;
text-transform: uppercase;
letter-spacing: 5px;
padding-top: 30px;
display: inline-block;
}
.demo-2 .bg-img {
padding: 200px;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
position: absolute;
top: -200px;
left: -200px;
width: 100%;
height: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
background-position: center center;
}
/* Custom navigation arrows */
.nav-arrows span {
position: absolute;
z-index: 2000;
top: 50%;
width: 40px;
height: 40px;
border: 8px solid #ddd;
border: 8px solid rgba(150,150,150,0.4);
text-indent: -90000px;
margin-top: -40px;
cursor: pointer;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.nav-arrows span:hover {
border-color: rgba(150,150,150,0.9);
}
.nav-arrows span.nav-arrow-prev {
left: 5%;
border-right: none;
border-top: none;
}
.nav-arrows span.nav-arrow-next {
right: 5%;
border-left: none;
border-bottom: none;
}
/* Custom navigation dots */
.nav-dots {
text-align: center;
position: absolute;
bottom: 2%;
height: 30px;
width: 100%;
left: 0;
z-index: 1000;
}
.nav-dots span {
display: inline-block;
position: relative;
width: 16px;
height: 16px;
border-radius: 50%;
margin: 3px;
background: #ddd;
background: rgba(150,150,150,0.4);
cursor: pointer;
box-shadow:
0 1px 1px rgba(255,255,255,0.4),
inset 0 1px 1px rgba(0,0,0,0.1);
}
.demo-2 .nav-dots span {
background: rgba(150,150,150,0.1);
margin: 6px;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
box-shadow:
0 1px 1px rgba(255,255,255,0.4),
inset 0 1px 1px rgba(0,0,0,0.1),
0 0 0 2px rgba(255,255,255,0.5);
}
.demo-2 .nav-dots span.nav-dot-current,
.demo-2 .nav-dots span:hover {
box-shadow:
0 1px 1px rgba(255,255,255,0.4),
inset 0 1px 1px rgba(0,0,0,0.1),
0 0 0 5px rgba(255,255,255,0.5);
}
.nav-dots span.nav-dot-current:after {
content: "";
position: absolute;
width: 10px;
height: 10px;
top: 3px;
left: 3px;
border-radius: 50%;
background: rgba(255,255,255,0.8);
}
/* Content elements */
.demo-1 .deco {
width: 260px;
height: 260px;
border: 2px dashed #ddd;
border: 2px dashed rgba(150,150,150,0.4);
border-radius: 50%;
position: absolute;
bottom: 50%;
left: 50%;
margin: 0 0 0 -130px;
}
.demo-1 [data-icon]:after {
content: attr(data-icon);
font-family: 'AnimalsNormal';
color: #999;
text-shadow: 0 0 1px #999;
position: absolute;
width: 220px;
height: 220px;
line-height: 220px;
text-align: center;
font-size: 100px;
top: 50%;
left: 50%;
margin: -110px 0 0 -110px;
box-shadow: inset 0 0 0 10px #f7f7f7;
border-radius: 50%;
}
.demo-1 .sl-slide h2 {
color: #000;
text-shadow: 0 0 1px #000;
padding: 20px;
position: absolute;
font-size: 34px;
font-weight: 700;
letter-spacing: 13px;
text-transform: uppercase;
width: 80%;
left: 10%;
text-align: center;
line-height: 50px;
bottom: 50%;
margin: 0 0 -120px 0;
}
.demo-1 .sl-slide blockquote {
position: absolute;
width: 100%;
text-align: center;
left: 0;
font-weight: 400;
font-size: 14px;
line-height: 20px;
height: 70px;
color: #8b8b8b;
z-index: 2;
bottom: 50%;
margin: 0 0 -200px 0;
padding: 0;
}
.demo-1 .sl-slide blockquote p{
margin: 0 auto;
width: 60%;
max-width: 400px;
position: relative;
}
.demo-1 .sl-slide blockquote p:before {
color: #f0f0f0;
color: rgba(244,244,244,0.65);
font-family: "Bookman Old Style", Bookman, Garamond, serif;
position: absolute;
line-height: 60px;
width: 75px;
height: 75px;
font-size: 200px;
z-index: -1;
left: -80px;
top: 35px;
content: '\201C';
}
.demo-1 .sl-slide blockquote cite {
font-size: 10px;
padding-top: 10px;
display: inline-block;
font-style: normal;
text-transform: uppercase;
letter-spacing: 4px;
}
/* Custom background colors for slides in first demo */
/* First Slide */
.demo-1 .bg-1 .sl-slide-inner,
.demo-1 .bg-1 .sl-content-slice {
background: #fff;
}
/* Second Slide */
.demo-1 .bg-2 .sl-slide-inner,
.demo-1 .bg-2 .sl-content-slice {
background: #000;
}
.demo-1 .bg-2 [data-icon]:after,
.demo-1 .bg-2 h2 {
color: #fff;
}
.demo-1 .bg-2 blockquote:before {
color: #222;
}
/* Third Slide */
.demo-1 .bg-3 .sl-slide-inner,
.demo-1 .bg-3 .sl-content-slice {
background: #db84ad;
}
.demo-1 .bg-3 .deco {
border-color: #fff;
border-color: rgba(255,255,255,0.5);
}
.demo-1 .bg-3 [data-icon]:after {
color: #fff;
text-shadow: 0 0 1px #fff;
box-shadow: inset 0 0 0 10px #b55381;
}
.demo-1 .bg-3 h2,
.demo-1 .bg-3 blockquote{
color: #fff;
text-shadow: 0px 1px 1px rgba(0,0,0,0.3);
}
.demo-1 .bg-3 blockquote:before {
color: #c46c96;
}
/* Forth Slide */
.demo-1 .bg-4 .sl-slide-inner,
.demo-1 .bg-4 .sl-content-slice {
background: #5bc2ce;
}
.demo-1 .bg-4 .deco {
border-color: #379eaa;
}
.demo-1 .bg-4 [data-icon]:after {
text-shadow: 0 0 1px #277d87;
color: #277d87;
}
.demo-1 .bg-4 h2,
.demo-1 .bg-4 blockquote{
color: #fff;
text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
}
.demo-1 .bg-4 blockquote:before {
color: #379eaa;
}
/* Fifth Slide */
.demo-1 .bg-5 .sl-slide-inner,
.demo-1 .bg-5 .sl-content-slice {
background: #ffeb41;
}
.demo-1 .bg-5 .deco {
border-color: #ECD82C;
}
.demo-1 .bg-5 .deco:after {
color: #000;
text-shadow: 0 0 1px #000;
}
.demo-1 .bg-5 h2,
.demo-1 .bg-5 blockquote{
color: #000;
text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
}
.demo-1 .bg-5 blockquote:before {
color: #ecd82c;
}
.demo-2 .bg-img-1 {
background-image: url(../images/banner/1.jpg);
}
.demo-2 .bg-img-2 {
background-image: url(../images/banner/2.jpg);
}
.demo-2 .bg-img-3 {
background-image: url(../images/banner/3.jpg);
}
.demo-2 .bg-img-4 {
background-image: url(../images/banner/4.jpg);
}
.demo-2 .bg-img-5 {
background-image: url(../images/banner/5.jpg);
}
/* Animations for content elements */
.sl-trans-elems .deco{
-webkit-animation: roll 1s ease-out both, fadeIn 1s ease-out both;
-moz-animation: roll 1s ease-out both, fadeIn 1s ease-out both;
-o-animation: roll 1s ease-out both, fadeIn 1s ease-out both;
-ms-animation: roll 1s ease-out both, fadeIn 1s ease-out both;
animation: roll 1s ease-out both, fadeIn 1s ease-out both;
}
.sl-trans-elems h2{
-webkit-animation: moveUp 1s ease-in-out both;
-moz-animation: moveUp 1s ease-in-out both;
-o-animation: moveUp 1s ease-in-out both;
-ms-animation: moveUp 1s ease-in-out both;
animation: moveUp 1s ease-in-out both;
}
.sl-trans-elems blockquote{
-webkit-animation: fadeIn 0.5s linear 0.5s both;
-moz-animation: fadeIn 0.5s linear 0.5s both;
-o-animation: fadeIn 0.5s linear 0.5s both;
-ms-animation: fadeIn 0.5s linear 0.5s both;
animation: fadeIn 0.5s linear 0.5s both;
}
.sl-trans-back-elems .deco{
-webkit-animation: scaleDown 1s ease-in-out both;
-moz-animation: scaleDown 1s ease-in-out both;
-o-animation: scaleDown 1s ease-in-out both;
-ms-animation: scaleDown 1s ease-in-out both;
animation: scaleDown 1s ease-in-out both;
}
.sl-trans-back-elems h2{
-webkit-animation: fadeOut 1s ease-in-out both;
-moz-animation: fadeOut 1s ease-in-out both;
-o-animation: fadeOut 1s ease-in-out both;
-ms-animation: fadeOut 1s ease-in-out both;
animation: fadeOut 1s ease-in-out both;
}
.sl-trans-back-elems blockquote{
-webkit-animation: fadeOut 1s linear both;
-moz-animation: fadeOut 1s linear both;
-o-animation: fadeOut 1s linear both;
-ms-animation: fadeOut 1s linear both;
animation: fadeOut 1s linear both;
}
@-webkit-keyframes roll{
0% {-webkit-transform: translateX(500px) rotate(360deg);}
100% {-webkit-transform: translateX(0px) rotate(0deg);}
}
@-moz-keyframes roll{
0% {-moz-transform: translateX(500px) rotate(360deg); opacity: 0;}
100% {-moz-transform: translateX(0px) rotate(0deg); opacity: 1;}
}
@-o-keyframes roll{
0% {-o-transform: translateX(500px) rotate(360deg); opacity: 0;}
100% {-o-transform: translateX(0px) rotate(0deg); opacity: 1;}
}
@-ms-keyframes roll{
0% {-ms-transform: translateX(500px) rotate(360deg); opacity: 0;}
100% {-ms-transform: translateX(0px) rotate(0deg); opacity: 1;}
}
@keyframes roll{
0% {transform: translateX(500px) rotate(360deg); opacity: 0;}
100% {transform: translateX(0px) rotate(0deg); opacity: 1;}
}
@-webkit-keyframes moveUp{
0% {-webkit-transform: translateY(40px);}
100% {-webkit-transform: translateY(0px);}
}
@-moz-keyframes moveUp{
0% {-moz-transform: translateY(40px);}
100% {-moz-transform: translateY(0px);}
}
@-o-keyframes moveUp{
0% {-o-transform: translateY(40px);}
100% {-o-transform: translateY(0px);}
}
@-ms-keyframes moveUp{
0% {-ms-transform: translateY(40px);}
100% {-ms-transform: translateY(0px);}
}
@keyframes moveUp{
0% {transform: translateY(40px);}
100% {transform: translateY(0px);}
}
@-webkit-keyframes fadeIn{
0% {opacity: 0;}
100% {opacity: 1;}
}
@-moz-keyframes fadeIn{
0% {opacity: 0;}
100% {opacity: 1;}
}
@-o-keyframes fadeIn{
0% {opacity: 0;}
100% {opacity: 1;}
}
@-ms-keyframes fadeIn{
0% {opacity: 0;}
100% {opacity: 1;}
}
@keyframes fadeIn{
0% {opacity: 0;}
100% {opacity: 1;}
}
@-webkit-keyframes scaleDown{
0% {-webkit-transform: scale(1);}
100% {-webkit-transform: scale(0.5);}
}
@-moz-keyframes scaleDown{
0% {-moz-transform: scale(1);}
100% {-moz-transform: scale(0.5);}
}
@-o-keyframes scaleDown{
0% {-o-transform: scale(1);}
100% {-o-transform: scale(0.5);}
}
@-ms-keyframes scaleDown{
0% {-ms-transform: scale(1);}
100% {-ms-transform: scale(0.5);}
}
@keyframes scaleDown{
0% {transform: scale(1);}
100% {transform: scale(0.5);}
}
@-webkit-keyframes fadeOut{
0% {opacity: 1;}
100% {opacity: 0;}
}
@-moz-keyframes fadeOut{
0% {opacity: 1;}
100% {opacity: 0;}
}
@-o-keyframes fadeOut{
0% {opacity: 1;}
100% {opacity: 0;}
}
@-ms-keyframes fadeOut{
0% {opacity: 1;}
100% {opacity: 0;}
}
@keyframes fadeOut{
0% {opacity: 1;}
100% {opacity: 0;}
}
/* Media Queries for custom slider */
@media screen and (max-width: 660px) {
.demo-1 .deco {
width: 130px;
height: 130px;
margin-left: -65px;
margin-bottom: 50px;
}
.demo-1 [data-icon]:after {
width: 110px;
height: 110px;
line-height: 110px;
font-size: 40px;
margin: -55px 0 0 -55px;
}
.demo-1 .sl-slide blockquote {
margin-bottom: -120px;
}
.demo-1 .sl-slide h2 {
line-height: 22px;
font-size: 18px;
margin-bottom: -40px;
letter-spacing: 8px;
}
.demo-1 .sl-slide blockquote p:before {
line-height: 10px;
width: 40px;
height: 40px;
font-size: 120px;
left: -45px;
}
.demo-2 .sl-slider-wrapper {
height: 500px;
}
.demo-2 .sl-slider h2 {
font-size: 36px;
}
.demo-2 .sl-slider blockquote {
font-size: 16px;
}
}

View File

@@ -0,0 +1,582 @@
.demo-1 .sl-slider-wrapper {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.slide-caption{
width:100%;
position:absolute;
bottom: 0px;
background-color: rgba(38, 29, 20, 0.27);
padding: 44px 0 80px;
}
.demo-2 {
margin-top:88px;
}
.demo-2 .sl-slider-wrapper {
width: 100%;
height: 800px;
overflow: hidden;
position: relative;
}
.demo-2 .sl-slider h2,
.demo-2 .sl-slider blockquote {
padding: 00px 30px 10px 30px;
width: 80%;
max-width: 960px;
color: #fff;
margin: 0 auto;
position: relative;
z-index: 100;
}
.demo-2 .sl-slider h2 {
font-size: 50px;
text-shadow: 0 -1px 0 rgba(0,0,0,0.2);
}
.demo-2 .sl-slider blockquote {
font-size: 28px;
padding-top: 10px;
font-weight: 300;
text-shadow: 0 -1px 0 rgba(0,0,0,0.2);
}
.demo-2 .sl-slider blockquote cite {
font-size: 16px;
font-weight: 700;
font-style: normal;
text-transform: uppercase;
letter-spacing: 5px;
padding-top: 30px;
display: inline-block;
}
.demo-2 .bg-img {
/* padding: 200px; */
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
position: absolute;
/* top: -200px; */
/* left: -200px; */
width: 100%;
height: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
background-position: center center;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
/* Custom navigation arrows */
.nav-arrows span {
position: absolute;
z-index: 2000;
top: 50%;
width: 40px;
height: 40px;
border: 8px solid #ddd;
border: 8px solid rgba(150,150,150,0.4);
text-indent: -90000px;
margin-top: -40px;
cursor: pointer;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.nav-arrows span:hover {
border-color: rgba(150,150,150,0.9);
}
.nav-arrows span.nav-arrow-prev {
left: 5%;
border-right: none;
border-top: none;
}
.nav-arrows span.nav-arrow-next {
right: 5%;
border-left: none;
border-bottom: none;
}
/* Custom navigation dots */
.nav-dots {
text-align: center;
position: absolute;
bottom: 2%;
height: 30px;
width: 100%;
left: 0;
z-index: 1000;
}
.nav-dots span {
display: inline-block;
position: relative;
width: 16px;
height: 16px;
border-radius: 50%;
margin: 3px;
background: #ddd;
background: rgba(150,150,150,0.4);
cursor: pointer;
box-shadow:
0 1px 1px rgba(255,255,255,0.4),
inset 0 1px 1px rgba(0,0,0,0.1);
}
.demo-2 .nav-dots span {
background: rgba(150,150,150,0.1);
margin: 6px;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
box-shadow:
0 1px 1px rgba(255,255,255,0.4),
inset 0 1px 1px rgba(0,0,0,0.1),
0 0 0 2px rgba(255,255,255,0.5);
}
.demo-2 .nav-dots span.nav-dot-current,
.demo-2 .nav-dots span:hover {
box-shadow:
0 1px 1px rgba(255,255,255,0.4),
inset 0 1px 1px rgba(0,0,0,0.1),
0 0 0 5px rgba(255,255,255,0.5);
}
.nav-dots span.nav-dot-current:after {
content: "";
position: absolute;
width: 10px;
height: 10px;
top: 3px;
left: 3px;
border-radius: 50%;
background: rgba(255,255,255,0.8);
}
/* Content elements */
.demo-1 .deco {
width: 260px;
height: 260px;
border: 2px dashed #ddd;
border: 2px dashed rgba(150,150,150,0.4);
border-radius: 50%;
position: absolute;
bottom: 50%;
left: 50%;
margin: 0 0 0 -130px;
}
.demo-1 [data-icon]:after {
content: attr(data-icon);
font-family: 'AnimalsNormal';
color: #999;
text-shadow: 0 0 1px #999;
position: absolute;
width: 220px;
height: 220px;
line-height: 220px;
text-align: center;
font-size: 100px;
top: 50%;
left: 50%;
margin: -110px 0 0 -110px;
box-shadow: inset 0 0 0 10px #f7f7f7;
border-radius: 50%;
}
.demo-1 .sl-slide h2 {
color: #000;
text-shadow: 0 0 1px #000;
padding: 20px;
position: absolute;
font-size: 34px;
font-weight: 700;
letter-spacing: 13px;
text-transform: uppercase;
width: 80%;
left: 10%;
text-align: center;
line-height: 50px;
bottom: 50%;
margin: 0 0 -120px 0;
}
.demo-1 .sl-slide blockquote {
position: absolute;
width: 100%;
text-align: center;
left: 0;
font-weight: 400;
font-size: 14px;
line-height: 20px;
height: 70px;
color: #8b8b8b;
z-index: 2;
bottom: 50%;
margin: 0 0 -200px 0;
padding: 0;
}
.demo-1 .sl-slide blockquote p{
margin: 0 auto;
width: 60%;
max-width: 400px;
position: relative;
}
.demo-1 .sl-slide blockquote p:before {
color: #f0f0f0;
color: rgba(244,244,244,0.65);
font-family: "Bookman Old Style", Bookman, Garamond, serif;
position: absolute;
line-height: 60px;
width: 75px;
height: 75px;
font-size: 200px;
z-index: -1;
left: -80px;
top: 35px;
content: '\201C';
}
.demo-1 .sl-slide blockquote cite {
font-size: 10px;
padding-top: 10px;
display: inline-block;
font-style: normal;
text-transform: uppercase;
letter-spacing: 4px;
}
/* Custom background colors for slides in first demo */
/* First Slide */
.demo-1 .bg-1 .sl-slide-inner,
.demo-1 .bg-1 .sl-content-slice {
background: #fff;
}
/* Second Slide */
.demo-1 .bg-2 .sl-slide-inner,
.demo-1 .bg-2 .sl-content-slice {
background: #000;
}
.demo-1 .bg-2 [data-icon]:after,
.demo-1 .bg-2 h2 {
color: #fff;
}
.demo-1 .bg-2 blockquote:before {
color: #222;
}
/* Third Slide */
.demo-1 .bg-3 .sl-slide-inner,
.demo-1 .bg-3 .sl-content-slice {
background: #db84ad;
}
.demo-1 .bg-3 .deco {
border-color: #fff;
border-color: rgba(255,255,255,0.5);
}
.demo-1 .bg-3 [data-icon]:after {
color: #fff;
text-shadow: 0 0 1px #fff;
box-shadow: inset 0 0 0 10px #b55381;
}
.demo-1 .bg-3 h2,
.demo-1 .bg-3 blockquote{
color: #fff;
text-shadow: 0px 1px 1px rgba(0,0,0,0.3);
}
.demo-1 .bg-3 blockquote:before {
color: #c46c96;
}
/* Forth Slide */
.demo-1 .bg-4 .sl-slide-inner,
.demo-1 .bg-4 .sl-content-slice {
background: #5bc2ce;
}
.demo-1 .bg-4 .deco {
border-color: #379eaa;
}
.demo-1 .bg-4 [data-icon]:after {
text-shadow: 0 0 1px #277d87;
color: #277d87;
}
.demo-1 .bg-4 h2,
.demo-1 .bg-4 blockquote{
color: #fff;
text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
}
.demo-1 .bg-4 blockquote:before {
color: #379eaa;
}
/* Fifth Slide */
.demo-1 .bg-5 .sl-slide-inner,
.demo-1 .bg-5 .sl-content-slice {
background: #ffeb41;
}
.demo-1 .bg-5 .deco {
border-color: #ECD82C;
}
.demo-1 .bg-5 .deco:after {
color: #000;
text-shadow: 0 0 1px #000;
}
.demo-1 .bg-5 h2,
.demo-1 .bg-5 blockquote{
color: #000;
text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
}
.demo-1 .bg-5 blockquote:before {
color: #ecd82c;
}
.demo-2 .bg-img-1 {
background-image: url(../images/banner/1.jpg);
}
.demo-2 .bg-img-2 {
background-image: url(../images/banner/2.jpg);
}
.demo-2 .bg-img-3 {
background-image: url(../images/banner/3.jpg);
}
.demo-2 .bg-img-4 {
background-image: url(../images/banner/4.jpg);
}
.demo-2 .bg-img-5 {
background-image: url(../images/banner/5.jpg);
}
/* Animations for content elements */
.sl-trans-elems .deco{
-webkit-animation: roll 1s ease-out both, fadeIn 1s ease-out both;
-moz-animation: roll 1s ease-out both, fadeIn 1s ease-out both;
-o-animation: roll 1s ease-out both, fadeIn 1s ease-out both;
-ms-animation: roll 1s ease-out both, fadeIn 1s ease-out both;
animation: roll 1s ease-out both, fadeIn 1s ease-out both;
}
.sl-trans-elems h2{
-webkit-animation: moveUp 1s ease-in-out both;
-moz-animation: moveUp 1s ease-in-out both;
-o-animation: moveUp 1s ease-in-out both;
-ms-animation: moveUp 1s ease-in-out both;
animation: moveUp 1s ease-in-out both;
}
.sl-trans-elems blockquote{
-webkit-animation: fadeIn 0.5s linear 0.5s both;
-moz-animation: fadeIn 0.5s linear 0.5s both;
-o-animation: fadeIn 0.5s linear 0.5s both;
-ms-animation: fadeIn 0.5s linear 0.5s both;
animation: fadeIn 0.5s linear 0.5s both;
}
.sl-trans-back-elems .deco{
-webkit-animation: scaleDown 1s ease-in-out both;
-moz-animation: scaleDown 1s ease-in-out both;
-o-animation: scaleDown 1s ease-in-out both;
-ms-animation: scaleDown 1s ease-in-out both;
animation: scaleDown 1s ease-in-out both;
}
.sl-trans-back-elems h2{
-webkit-animation: fadeOut 1s ease-in-out both;
-moz-animation: fadeOut 1s ease-in-out both;
-o-animation: fadeOut 1s ease-in-out both;
-ms-animation: fadeOut 1s ease-in-out both;
animation: fadeOut 1s ease-in-out both;
}
.sl-trans-back-elems blockquote{
-webkit-animation: fadeOut 1s linear both;
-moz-animation: fadeOut 1s linear both;
-o-animation: fadeOut 1s linear both;
-ms-animation: fadeOut 1s linear both;
animation: fadeOut 1s linear both;
}
@-webkit-keyframes roll{
0% {-webkit-transform: translateX(500px) rotate(360deg);}
100% {-webkit-transform: translateX(0px) rotate(0deg);}
}
@-moz-keyframes roll{
0% {-moz-transform: translateX(500px) rotate(360deg); opacity: 0;}
100% {-moz-transform: translateX(0px) rotate(0deg); opacity: 1;}
}
@-o-keyframes roll{
0% {-o-transform: translateX(500px) rotate(360deg); opacity: 0;}
100% {-o-transform: translateX(0px) rotate(0deg); opacity: 1;}
}
@-ms-keyframes roll{
0% {-ms-transform: translateX(500px) rotate(360deg); opacity: 0;}
100% {-ms-transform: translateX(0px) rotate(0deg); opacity: 1;}
}
@keyframes roll{
0% {transform: translateX(500px) rotate(360deg); opacity: 0;}
100% {transform: translateX(0px) rotate(0deg); opacity: 1;}
}
@-webkit-keyframes moveUp{
0% {-webkit-transform: translateY(40px);}
100% {-webkit-transform: translateY(0px);}
}
@-moz-keyframes moveUp{
0% {-moz-transform: translateY(40px);}
100% {-moz-transform: translateY(0px);}
}
@-o-keyframes moveUp{
0% {-o-transform: translateY(40px);}
100% {-o-transform: translateY(0px);}
}
@-ms-keyframes moveUp{
0% {-ms-transform: translateY(40px);}
100% {-ms-transform: translateY(0px);}
}
@keyframes moveUp{
0% {transform: translateY(40px);}
100% {transform: translateY(0px);}
}
@-webkit-keyframes fadeIn{
0% {opacity: 0;}
100% {opacity: 1;}
}
@-moz-keyframes fadeIn{
0% {opacity: 0;}
100% {opacity: 1;}
}
@-o-keyframes fadeIn{
0% {opacity: 0;}
100% {opacity: 1;}
}
@-ms-keyframes fadeIn{
0% {opacity: 0;}
100% {opacity: 1;}
}
@keyframes fadeIn{
0% {opacity: 0;}
100% {opacity: 1;}
}
@-webkit-keyframes scaleDown{
0% {-webkit-transform: scale(1);}
100% {-webkit-transform: scale(0.5);}
}
@-moz-keyframes scaleDown{
0% {-moz-transform: scale(1);}
100% {-moz-transform: scale(0.5);}
}
@-o-keyframes scaleDown{
0% {-o-transform: scale(1);}
100% {-o-transform: scale(0.5);}
}
@-ms-keyframes scaleDown{
0% {-ms-transform: scale(1);}
100% {-ms-transform: scale(0.5);}
}
@keyframes scaleDown{
0% {transform: scale(1);}
100% {transform: scale(0.5);}
}
@-webkit-keyframes fadeOut{
0% {opacity: 1;}
100% {opacity: 0;}
}
@-moz-keyframes fadeOut{
0% {opacity: 1;}
100% {opacity: 0;}
}
@-o-keyframes fadeOut{
0% {opacity: 1;}
100% {opacity: 0;}
}
@-ms-keyframes fadeOut{
0% {opacity: 1;}
100% {opacity: 0;}
}
@keyframes fadeOut{
0% {opacity: 1;}
100% {opacity: 0;}
}
/* Media Queries for custom slider */
@media screen and (max-width: 660px) {
.demo-1 .deco {
width: 130px;
height: 130px;
margin-left: -65px;
margin-bottom: 50px;
}
.demo-1 [data-icon]:after {
width: 110px;
height: 110px;
line-height: 110px;
font-size: 40px;
margin: -55px 0 0 -55px;
}
.demo-1 .sl-slide blockquote {
margin-bottom: -120px;
}
.demo-1 .sl-slide h2 {
line-height: 22px;
font-size: 18px;
margin-bottom: -40px;
letter-spacing: 8px;
}
.demo-1 .sl-slide blockquote p:before {
line-height: 10px;
width: 40px;
height: 40px;
font-size: 120px;
left: -45px;
}
.demo-2 .sl-slider-wrapper {
height: 500px;
}
.demo-2 .sl-slider h2 {
font-size: 36px;
}
.demo-2 .sl-slider blockquote {
font-size: 16px;
}
}

View File

@@ -0,0 +1,114 @@
.sl-slider-wrapper {
width: 800px;
height: 400px;
margin: 0 auto;
position: relative;
overflow: hidden;
}
.sl-slider {
position: absolute;
top: 0;
left: 0;
}
/* Slide wrapper and slides */
.sl-slide,
.sl-slides-wrapper,
.sl-slide-inner {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.sl-slide {
z-index: 1;
}
/* The duplicate parts/slices */
.sl-content-slice {
overflow: hidden;
position: absolute;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
background: #fff;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
opacity : 1;
}
/* Horizontal slice */
.sl-slide-horizontal .sl-content-slice {
width: 100%;
height: 50%;
left: -200px;
-webkit-transform: translateY(0%) scale(1);
-moz-transform: translateY(0%) scale(1);
-o-transform: translateY(0%) scale(1);
-ms-transform: translateY(0%) scale(1);
transform: translateY(0%) scale(1);
}
.sl-slide-horizontal .sl-content-slice:first-child {
top: -200px;
padding: 200px 200px 0px 200px;
}
.sl-slide-horizontal .sl-content-slice:nth-child(2) {
top: 50%;
padding: 0px 200px 200px 200px;
}
/* Vertical slice */
.sl-slide-vertical .sl-content-slice {
width: 50%;
height: 100%;
top: -200px;
-webkit-transform: translateX(0%) scale(1);
-moz-transform: translateX(0%) scale(1);
-o-transform: translateX(0%) scale(1);
-ms-transform: translateX(0%) scale(1);
transform: translateX(0%) scale(1);
}
.sl-slide-vertical .sl-content-slice:first-child {
left: -200px;
padding: 200px 0px 200px 200px;
}
.sl-slide-vertical .sl-content-slice:nth-child(2) {
left: 50%;
padding: 200px 200px 200px 0px;
}
/* Content wrapper */
/* Width and height is set dynamically */
.sl-content-wrapper {
position: absolute;
}
.sl-content {
width: 100%;
height: 100%;
background: #fff;
}
/* Default styles for background colors */
.sl-slide-horizontal .sl-slide-inner {
background: #ddd;
}
.sl-slide-vertical .sl-slide-inner {
background: #ccc;
}

View File

@@ -0,0 +1,32 @@
.sl-slider-wrapper {
overflow: visible !important;
margin: 0 auto;
}
/* Slide wrapper and slides */
.sl-slider,
.sl-slide,
.sl-slides-wrapper,
.sl-slide-inner {
position: relative;
width: 100%;
height: 100%;
background: #fff;
}
.demo-1 .sl-slide blockquote {
width: 50%;
left: 25%;
}
.demo-2 .bg-img {
padding: 0;
top: 0;
left: 0;
}
.nav-arrows,
.nav-dots {
display: none;
}

File diff suppressed because it is too large Load Diff