📁 PHP Dosya Yöneticisi
/
/
home
/
demodesigncom
/
e-ticaretv3.demodesign.com.tr
/
css
📝
slit-slider.css
← Geri Dön
/*================================================================= Home Slider ==================================================================*/ #home-slider { position: relative; padding: 0; } .sl-slider-wrapper { width: 100%; 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; } .slide-caption { color: #fff; display: table; height: 100%; left: 0; min-height: 100%; position: absolute; text-align: center; top: 0; width: 100%; z-index: 11; } .slide-caption .caption-content { vertical-align: middle; display: table-cell; } .caption-content h2 { color: #fff; font-size: 60px; font-weight: 900; margin-bottom: 25px; text-transform: uppercase; } .caption-content > span { display: block; font-size: 20px; margin-bottom: 45px; text-transform: capitalize; } .caption-content p { font-size: 29px; margin-bottom: 65px; } /* 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%; } /* Sweep To Right */ .btn-effect { vertical-align: middle; box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; display: inline-block; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition-property: color; -moz-transition-property: color; -ms-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -ms-transition-duration: 0.3s; transition-duration: 0.3s; -moz-osx-font-smoothing: grayscale; } .btn-effect:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #fff; -webkit-transform: scaleX(0); -moz-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: 0 50%; -moz-transform-origin: 0 50%; -ms-transform-origin: 0 50%; transform-origin: 0 50%; -webkit-transition-property: transform; -moz-transition-property: transform; -ms-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -ms-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; -moz-transition-timing-function: ease-out; -ms-transition-timing-function: ease-out; transition-timing-function: ease-out; } .btn-effect:hover, .btn-effect:focus, .btn-effect:active { color: #db3838; } .btn-effect:hover:before, .btn-effect:focus:before, .btn-effect:active:before { -webkit-transform: scaleX(1); -moz-transform: scaleX(1); -ms-transform: scaleX(1); transform: scaleX(1); } .btn { border-radius: 0; border: 0; position: relative; text-transform: uppercase; } .btn-blue { background-color: #db3838; box-shadow: 0 -2px 0 rgba(0, 0, 0, 0.15) inset; padding: 15px 55px; color: #fff; } .btn-border { border: 2px solid #fff; color: #fff; padding: 12px 35px; } .bg-blue { background-color: #db3838; } .sl-slide, .sl-slides-wrapper, .sl-slide-inner { position: absolute; width: 100%; height: 100%; top: 0; left: 0; } .sl-slider-wrapper { width: 100%; height: 730px; overflow: hidden; position: relative; } .bg-img { background-position: center center; background-repeat: no-repeat; background-size: cover; height: 100%; width: 100%; } /* 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; } #nav-arrows > a { border: 1px solid #fff; color: #fff; display: block; height: 60px; line-height: 76px; position: absolute; text-align: center; top: 50%; width: 60px; z-index: 20; margin-top: -30px; -webkit-transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; -ms-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; transition: all 0.5s ease 0s; } #nav-arrows > a.sl-prev { left: 50px; } #nav-arrows > a.sl-next { right: 50px; } #nav-arrows > a.sl-next:hover { background-color: #db3838; border-color: #db3838; color: #fff; } #nav-arrows > a.sl-prev:hover { background-color: #db3838; border-color: #db3838; color: #fff; } /* 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); } .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); } .nav-dots span.nav-dot-current, .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); } .bg-img-1 { background-image: url(../images/slider/h7_img1.jpeg); } .bg-img-2 { background-image: url(../images/slider/h7_img2.jpeg); } .bg-img-3 { background-image: url(../images/slider/h7_img3.jpeg); } /* Animations for content elements */ .sl-trans-elems .caption-content 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 .caption-content span, .sl-trans-elems .caption-content a { -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 .caption-content 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 .caption-content span,, .sl-trans-back-elems .caption-content a { -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 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 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 only screen and (min-width: 300px) and (max-width: 479px) { .bg-img-1, .bg-img-2, .bg-img-3 { background-size: contain; } .sl-slider-wrapper { height: 120px; } .caption-content h2 { font-size: 14px; } .btn-blue { padding: 5px 15px; font-size: 12px; } .nav-dots { display: none !important; } } @media only screen and (min-width: 480px) and (max-width: 767px) { .bg-img-1, .bg-img-2, .bg-img-3 { background-size: contain; } .sl-slider-wrapper { height: 180px; } .caption-content h2 { font-size: 24px; } .btn-blue { padding: 5px 15px; font-size: 12px; } .nav-dots { display: none !important; } } @media only screen and (min-width: 768px) and (max-width: 1023px) { .caption-content h2 { font-size: 50px; } }
💾 Kaydet
İptal
📝 Yeniden Adlandır
İptal
Kaydet
🔐 Dosya İzinleri (chmod)
İzin Değeri:
Hızlı Seçim:
777
755
644
600
777
= Herkes okur/yazar/çalıştırır
755
= Sahip tam, diğerleri okur/çalıştırır
644
= Sahip okur/yazar, diğerleri okur
600
= Sadece sahip okur/yazar
İptal
Uygula