📁 PHP Dosya Yöneticisi
/
/
home
/
demodesigncom
/
taksiscripti.demodesign.com.tr
/
assets
/
css
📝
elements.css
← Geri Dön
/* =================================================== Table of Contents ===================================================== 1.0 Common Styles 2.0 Input Field Placeholder Color 3.0 Utility Classess 4.0 Scrollbar Style 5.0 Site Preloader 6.0 Custom Cursor 7.0 Default Button 8.0 Section Heading 9.0 Page Header 10.0 Scroll to Top ===================================================== Elements CSS ==================================================== */ @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap'); /*=== 1.0 Common Styles ===*/ * { padding: 0; margin: 0; } body { background-color: #fff; font-family: 'Space Grotesk', sans-serif; font-size: 17px; line-height: 27px; color: #666; font-weight: 400; letter-spacing: -0.2px; position: relative; overflow-x: hidden; } h1, h2, h3, h4, h5, h6 { font-family: 'Space Grotesk', sans-serif; -webkit-font-smoothing: antialiased; color: #222; } h1 { font-size: 45px; font-weight: 600; line-height: 55px; margin: 0 0 10px; color: #222; } h2 { font-size: 32px; line-height: 42px; color: #222; margin: 0 0 10px; font-weight: 600; letter-spacing: -1px; } h3, h4 { margin: 0 0 10px; font-weight: 600; line-height: 1.7; color: #222; letter-spacing: -0.5px; } h3 { font-size: 20px; } h4 { font-size: 16px; } h5, h6 { font-size: 14px; margin: 0 0 10px; } p { font-size: 17px; line-height: 27px; margin-bottom: 15px; } a { color: #222; } a, a:hover { text-decoration: none; } a:focus { outline: 0; text-decoration: none; } img { border: none; outline: none; max-width: 100%; } ul { display: block; list-style: none; padding: 0; margin: 0; } /*=== 2.0 Input Field Placeholder Color ===*/ input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #999 !important; } input:-moz-placeholder, textarea:-moz-placeholder { /* Firefox 18- */ color: #999 !important; } input::-moz-placeholder, textarea::-moz-placeholder { /* Firefox 19+ */ color: #999 !important; } input:-ms-input-placeholder, textarea:-ms-input-placeholder { color: #999 !important; } button { border: none; background: none; } /*=== 3.0 Utility Classess ===*/ /* Padding */ .padding { padding: 100px 0; } .no-padding { padding: 0; } .padding-15 { padding: 15px; } .padding-20 { padding: 20px; } .pos-relative { position: relative; } /* Background Color*/ .bg-white { background-color: #fff; } .bg-grey { background-color: #F4F5F8; } .bg-dark { background-color: #141414 !important; } /* Boder */ .bd-top { border-top: 1px solid #eee; } .bd-bottom { border-bottom: 1px solid #eee; } .bd-left { border-left: 1px solid #eee; } .bd-right { border-right: 1px solid #eee; } /* Margin */ .mt-10 { margin-top: 10px; } .mt-15 { margin-top: 15px; } .mt-20 { margin-top: 20px; } .mt-25 { margin-top: 25px; } .mt-30 { margin-top: 30px; } .mt-35 { margin-top: 35px; } .mt-40 { margin-top: 40px; } .mt-45 { margin-top: 45px; } .mt-50 { margin-top: 50px; } .mb-10 { margin-bottom: 10px; } .mb-15 { margin-bottom: 15px; } .mb-20 { margin-bottom: 20px; } .mb-25 { margin-bottom: 25px; } .mb-30 { margin-bottom: 30px; } .mb-35 { margin-bottom: 35px; } .mb-40 { margin-bottom: 40px; } .mb-45 { margin-bottom: 45px; } .mb-50 { margin-bottom: 50px; } .pb-60 { padding-bottom: 60px; } /* Transition Effect */ a, a:hover, img, .form-control, .form-control:hover, button { -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } /*=== 4.0 Scrollbar Style ===*/ ::-webkit-scrollbar { background-color: #222; width: 8px; height: 8px } ::-webkit-scrollbar-thumb { cursor: pointer; background: #ff9900; } ::selection { background-color: #ff9900; color: #fff } -webkit-::selection { background-color: #ff9900; color: #fff } ::-moz-selection { background-color: #ff9900; color: #fff } /*=== 5.0 Site Preloader ===*/ .loaded .site-preloader { opacity: 0; visibility: hidden; } .site-preloader { position: fixed; z-index: 999; height: 100%; width: 100%; background: #222; top: 0; left: 0; } .car { position: absolute; width: 117px; height: 42px; left: 50%; top: 50%; transform: translate(-50%, -50%); } .car .strike { position: absolute; width: 11px; height: 1px; background: #ffe4e1; animation: strikes 0.2s linear infinite; } .car .strike2 { top: 11px; animation-delay: 0.05s; } .car .strike3 { top: 22px; animation-delay: 0.1s; } .car .strike4 { top: 33px; animation-delay: 0.15s; } .car .strike5 { top: 44px; animation-delay: 0.2s; } .car-detail { position: absolute; display: block; background: #ff9900; animation: speed 0.5s linear infinite; } .car-detail.spoiler { width: 0; height: 0; top: 7px; background: none; border: 20px solid transparent; border-bottom: 8px solid #ff9900; border-left: 20px solid #ff9900; } .car-detail.back { height: 20px; width: 92px; top: 15px; left: 0px; } .car-detail.center { height: 35px; width: 75px; left: 12px; border-top-left-radius: 30px; border-top-right-radius: 45px 40px; border: 4px solid #ff9900; background: none; box-sizing: border-box; } .car-detail.center1 { height: 35px; width: 35px; left: 12px; border-top-left-radius: 30px; } .car-detail.front { height: 20px; width: 50px; top: 15px; left: 67px; border-top-right-radius: 50px 40px; border-bottom-right-radius: 10px; } .car-detail.wheel { height: 20px; width: 20px; border-radius: 50%; top: 20px; left: 12px; border: 3px solid #222; background: linear-gradient(45deg, transparent 45%, #ffe4e1 46%, #ffe4e1 54%, transparent 55%), linear-gradient(-45deg, transparent 45%, #ffe4e1 46%, #ffe4e1 54%, transparent 55%), linear-gradient(90deg, transparent 45%, #ffe4e1 46%, #ffe4e1 54%, transparent 55%), linear-gradient(0deg, transparent 45%, #ffe4e1 46%, #ffe4e1 54%, transparent 55%), radial-gradient(#ffe4e1 29%, transparent 30%, transparent 50%, #ffe4e1 51%), #222; animation-name: spin; } .car-detail.wheel2 { left: 82px; } @keyframes spin { 0% { transform: translate(2px, 1px) rotate(0deg); } 10% { transform: translate(-1px, -3px) rotate(36deg); } 20% { transform: translate(-2px, 0px) rotate(72deg); } 30% { transform: translate(1px, 2px) rotate(108deg); } 40% { transform: translate(1px, -1px) rotate(144deg); } 50% { transform: translate(-1px, 3px) rotate(180deg); } 60% { transform: translate(-1px, 1px) rotate(216deg); } 70% { transform: translate(3px, 1px) rotate(252deg); } 80% { transform: translate(-2px, -1px) rotate(288deg); } 90% { transform: translate(2px, 1px) rotate(324deg); } 100% { transform: translate(1px, -2px) rotate(360deg); } } @keyframes speed { 0% { transform: translate(2px, 1px) rotate(0deg); } 10% { transform: translate(-1px, -3px) rotate(-1deg); } 20% { transform: translate(-2px, 0px) rotate(1deg); } 30% { transform: translate(1px, 2px) rotate(0deg); } 40% { transform: translate(1px, -1px) rotate(1deg); } 50% { transform: translate(-1px, 3px) rotate(-1deg); } 60% { transform: translate(-1px, 1px) rotate(0deg); } 70% { transform: translate(3px, 1px) rotate(-1deg); } 80% { transform: translate(-2px, -1px) rotate(1deg); } 90% { transform: translate(2px, 1px) rotate(0deg); } 100% { transform: translate(1px, -2px) rotate(-1deg); } } @keyframes strikes { from { left: 25px; } to { left: -80px; opacity: 0; } } /*=== 6.0 Custom Cursor ===*/ .dl-cursor { display: block; width: 30px; height: 30px; border-radius: 50%; position: fixed; left: 0; top: 0; user-select: none; pointer-events: none; transform: translate(50%, 50%); visibility: hidden; z-index: 10000; -webkit-transition: all .3s cubic-bezier(.165, .85, .45, 1); transition: all .3s cubic-bezier(.165, .85, .45, 1); } .dl-cursor:before { background: #ff9900; opacity: 0.7; content: ""; width: 100%; height: 100%; border-radius: 50%; position: absolute; left: 0; top: 0; z-index: -1; } .dl-cursor.cursor-grow:before { opacity: 0.7; transform: scale(1.5); transition: all 0.3s ease; } .dl-cursor.hide { opacity: 0; transition: opacity 0.3s ease; transition-delay: 0.4s; } .dl-cursor.hide .inner { transform: scale(0.1); transition: transform 0.3s ease; } .dl-cursor .cursor-icon-holder { display: none; width: 100%; height: 100%; font-size: 25px; color: #fff; } .dl-cursor.cross .cursor-icon-holder { display: flex; align-items: center; justify-content: center; } .dl-cursor.cross:before { opacity: 1; transform: scale(2); transition: all 0.3s ease; } /*=== 7.0 Default Button ===*/ .btn-group a { margin: 5px; } .btn-group-left a { margin-right: 10px; } .default-btn { background-color: #ff9900; border-radius: 2px; height: 45px; font-size: 16px; font-weight: 500; color: #fff; padding: 0 30px; display: inline-flex; align-items: center; justify-content: center; position: relative; z-index: 1; overflow: hidden; } .default-btn:after, .default-btn:before { background-color: #222; content: ""; position: absolute; top: 0; left: 0; height: 50%; width: 0; transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86); z-index: -1; } .default-btn:after { left: auto; right: 0; top: auto; bottom: 0; } .default-btn:focus:before, .default-btn:focus:after, .default-btn:hover:before, .default-btn:hover:after { width: 100%; } .default-btn:hover { color: #fff; } /*=== 8.0 Section Heading ===*/ .section-heading h4 { font-size: 16px; color: #ff9900; text-transform: uppercase; letter-spacing: 1px; display: inline-flex; align-items: center; } .section-heading h4 span { background-color: #ff9900; transform: skew(-20deg, 0deg); display: inline-flex; width: 4px; height: 15px; position: relative; margin-left: 20px; margin-right: 10px; } .section-heading h4 span:after, .section-heading h4 span:before { background-color: #ff9900; content: ""; width: 4px; height: 100%; position: absolute; right: 8px; top: 0; opacity: 0.8; } .section-heading h4 span:after { right: 16px; opacity: 0.5; } .section-heading h2 { font-size: 42px; line-height: 52px; font-weight: 700; letter-spacing: -1.5px; display: block; } .section-heading h4.white span:after, .section-heading h4.white span:before { background-color: #fff; } .section-heading h4.white span { background-color: #fff; } .section-heading h4.white { color: #fff; } .section-heading h2.white { color: #fff; } .section-heading p.white { color: #fafafa; } .section-heading h2 span { color: #ff9900; } .section-heading p { margin-bottom: 0; } /* Check List */ .check-list li { display: flex; align-items: center; } .check-list li i { font-size: 12px; color: #00c16e; margin-right: 10px; } /*=== 9.0 Page Header ===*/ .page-header { background-image: url(../img/bg-1.jpg); background-repeat: no-repeat; background-position: center center; background-size: cover; width: 100%; height: 350px; display: flex; align-items: center; justify-content: center; position: relative; z-index: 1; } .page-header:before { background-color: #222; opacity: 0.8; content: ""; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: -1; } .page-header-shape { width: 50%; height: 100px; position: absolute; right: 0; bottom: 0; z-index: -1; } .page-header-shape:before { background-color: #ff9900; background-image: repeating-linear-gradient(45deg, #f7a20f 0, #f7a20f 2px, transparent 0, transparent 50%); background-size: 10px 10px; clip-path: polygon(10% 0%, 100% 0%, 100% 100%, 0% 100%); content: ""; width: 100%; height: 100%; position: absolute; right: 0; bottom: 0; } .page-header-shape:after { background-color: #222; background-image: url(../img/texture.png); background-repeat: repeat; background-size: cover; clip-path: polygon(10% 0%, 100% 0%, 100% 100%, 0% 100%); content: ""; width: 100%; height: 80px; position: absolute; left: -150px; bottom: 0; z-index: -1; } .page-header-info h4 { background-color: #ff9900; clip-path: polygon(93% 0%, 100% 30%, 100% 100%, 0 100%, 0 0); height: 25px; line-height: 25px; text-align: center; font-family: "Work Sans", sans-serif; font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 1px; color: #fff; padding: 0 15px; display: inline-block; } .page-header-info h2 { color: #fff; font-size: 46px; line-height: 56px; margin-bottom: 15px; } .page-header-info h2 span { color: #ff9900; } .page-header-info p { color: #ddd; font-size: 18px; margin: 0; } .page-header.blog-details { height: 400px; } .page-header.blog-details .page-header-info { padding-top: 30px; } .page-header.blog-details .page-header-info .post-meta li { color: #ddd; } .page-header.gradiant .page-header-info h2 { color: #222; } .page-header.gradiant .page-header-info p { color: #666; } .page-header .post-meta { margin-top: 20px; } .page-header.error { height: 450px; } /* Overlay */ .overlay { background-color: rgba(2, 2, 2, 0.7); width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: -1; } /* Rattings */ .ratting li { display: inline-block; color: #FF9529; font-size: 14px; margin: 0 -2px; } /*=== 10.0 Scroll to Top ===*/ #scrollup { width: 45px; height: 45px; position: fixed; bottom: 30px; right: 30px; overflow: hidden; z-index: 999; } .scroll-to-top { width: 100%; height: 100%; text-align: center; background-color: #ff9900; font-size: 20px; padding: 0; line-height: 40px; color: #fff; border-radius: 50%; outline: none; text-decoration: none; transform: translateY(150%); transition: all 0.3s ease-in-out; } #scrollup.show { opacity: 1; } #scrollup.show .scroll-to-top { transform: translateY(0); transition: all 0.3s ease-in-out; } .scroll-to-top:hover { color: #fff; text-decoration: none; opacity: 0.8; transition: all 0.3s ease-in-out; } /*max-width 992px*/ @media (max-width: 992px) { .padding { padding: 50px 0; } .sm-padding { padding: 15px; } p br { display: none; } span br { display: none; } .default-btn { padding: 0 30px; } .post-card .post-content h3 { font-size: 20px; line-height: 26px; } } /*max-width 768px*/ @media all and (max-width: 768px) { .padding { padding: 50px 0; } .xs-padding { padding: 15px; } p br { display: none; } .page-header-info h2 { font-size: 32px; line-height: 36px; } .post-details p { font-size: 17px; line-height: 27px; } } @media all and (max-width: 580px) { #scrollup { bottom: 20px; right: 20px; } }
💾 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