696 lines
16 KiB
CSS
696 lines
16 KiB
CSS
/*==================================
|
|
font-family: 'Poppins', sans-serif;
|
|
font-family: 'Rufina', serif;
|
|
==================================== */
|
|
|
|
|
|
/*=========== TABLE OF CONTENTS ===========
|
|
1. General css (Reset code)
|
|
2. Top-area
|
|
3. Welcome-hero
|
|
4. Model-search
|
|
6. New-cars
|
|
7. Featured-cars
|
|
8. Client-say
|
|
9. Brand
|
|
10. Blog
|
|
11. Contact
|
|
==========================================*/
|
|
|
|
/*-------------------------------------
|
|
1.General css (Reset code)
|
|
--------------------------------------*/
|
|
*{
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
*{
|
|
-webkit-box-sizing:border-box;
|
|
-moz-box-sizing:border-box;
|
|
-o-box-sizing:border-box;
|
|
-ms-box-sizing:border-box;
|
|
box-sizing:border-box;
|
|
}
|
|
body{
|
|
font-family: 'Poppins', sans-serif;
|
|
font-size:16px;
|
|
color:#818998;
|
|
text-transform:initial;
|
|
max-width:1920px;
|
|
margin:0 auto;
|
|
overflow-x:hidden;
|
|
}
|
|
|
|
a,a:hover,a:active,a:focus {
|
|
display:inline-block;
|
|
text-decoration:none;
|
|
color: #444a57;
|
|
font-size:20px;
|
|
padding:0;
|
|
font-weight: 500;
|
|
text-transform: capitalize;
|
|
}
|
|
h1,h2,h3,h4,h5,h6 {
|
|
margin: 0;
|
|
color:#444a57;
|
|
font-size: 20px;
|
|
font-weight: 500;
|
|
text-transform: capitalize;
|
|
}
|
|
p {
|
|
margin: 0;
|
|
color:#818998;
|
|
font-size:16px;
|
|
line-height: 1.8;
|
|
text-transform: initial;
|
|
}
|
|
img{border:none;max-width:100%; height:auto;}
|
|
ul{
|
|
padding: 0;
|
|
margin: 0 auto;
|
|
list-style: none;
|
|
}
|
|
ul li {
|
|
list-style: none;
|
|
display: inline-block;
|
|
|
|
}
|
|
select,input,textarea,button,.form-control{box-shadow:none;outline:0!important;}
|
|
button {background: transparent;border: 0;font-size: 16px;text-transform: capitalize;}
|
|
|
|
html,body{height: 100%;}
|
|
|
|
[placeholder]:focus::-webkit-input-placeholder {
|
|
-webkit-transition: opacity 0.3s 0.3s ease;
|
|
-moz-transition: opacity 0.3s 0.3s ease;
|
|
-ms-transition: opacity 0.3s 0.3s ease;
|
|
-o-transition: opacity 0.3s 0.3s ease;
|
|
transition: opacity 0.3s 0.3s ease;
|
|
opacity: 0;
|
|
}
|
|
.owl-carousel {z-index: 0;}
|
|
/* section-header */
|
|
.section-header{
|
|
position: relative;
|
|
text-align: center;
|
|
}
|
|
.section-header h2{
|
|
position: relative;
|
|
font-size: 36px;
|
|
font-weight: 500;
|
|
padding-bottom: 35px;
|
|
}
|
|
.section-header h2:before {
|
|
position: absolute;
|
|
content: "";
|
|
width: 80px;
|
|
height: 2px;
|
|
bottom: 0;
|
|
left: 50%;
|
|
margin-left: -42px;
|
|
background: #4e4ffa;
|
|
}
|
|
.section-header p{color: #444a57;text-transform: capitalize;margin-bottom:10px;}
|
|
.section-header h2 span,.section-header p span{text-transform: lowercase;}
|
|
|
|
/* section-header */
|
|
|
|
/*=============Style css=========*/
|
|
|
|
|
|
/*-------------------------------------
|
|
2. Top-area
|
|
--------------------------------------*/
|
|
nav.navbar.bootsnav {
|
|
background-color: transparent;
|
|
border-bottom: transparent;
|
|
}
|
|
.wrap-sticky nav.navbar.bootsnav.sticked {background-color: #000;box-shadow: 0 2px 5px rgba(0,0,0,.2);}
|
|
|
|
/*.navbar-brand*/
|
|
.navbar-header a.navbar-brand,.navbar-header a.navbar-brand:hover,.navbar-header a.navbar-brand:focus{
|
|
display: inline-block;
|
|
color: #fff;
|
|
font-size: 24px;
|
|
letter-spacing: 3px;
|
|
font-family: 'Bebas', sans-serif;
|
|
font-weight: 700;
|
|
padding: 45px 0px;
|
|
}
|
|
.navbar-header a.navbar-brand span{display: inline-block;color:#4e4ffa;text-transform:capitalize;}
|
|
|
|
.wrap-sticky nav.navbar.bootsnav.sticked .navbar-header a.navbar-brand,.wrap-sticky nav.navbar.bootsnav.sticked .navbar-header a.navbar-brand:hover,.wrap-sticky nav.navbar.bootsnav.sticked .navbar-header a.navbar-brand:focus {padding:30px 0px;}
|
|
/*.navbar-brand*/
|
|
|
|
/*.nav li*/
|
|
nav.navbar.bootsnav ul.nav > li > a {
|
|
color: #f5f7fa;
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
text-transform:uppercase;
|
|
-webkit-transition: 0.3s linear;
|
|
-moz-transition: 0.3s linear;
|
|
-ms-transition: 0.3s linear;
|
|
-o-transition: 0.3s linear;
|
|
transition: 0.3s linear;
|
|
}
|
|
nav.navbar.bootsnav ul.nav > li > a {padding: 48px 21px;}
|
|
nav.navbar.bootsnav ul.nav > li > a:hover,nav.navbar.bootsnav ul.nav > li > a:focus{color:#4e4ffa;}
|
|
nav.navbar.bootsnav ul.nav > li.active>a {color: #4e4ffa;}
|
|
|
|
nav.navbar.bootsnav ul.nav > li.dropdown > a.dropdown-toggle:after {
|
|
content: "";
|
|
}
|
|
nav.navbar.bootsnav ul.nav > li.dropdown span {
|
|
font-size: 8px;
|
|
margin-left: 15px;
|
|
}
|
|
.wrap-sticky nav.navbar.bootsnav.sticked ul.nav > li > a{padding:30px 25px;}
|
|
/*.nav li*/
|
|
|
|
/*.menu-ui-design*/
|
|
.menu-ui-design{overflow-y:scroll;height: 350px;}
|
|
.menu-ui-design::-webkit-scrollbar {
|
|
width:5px;
|
|
}
|
|
.menu-ui-design::-webkit-scrollbar-track {
|
|
-webkit-box-shadow: inset 0 0 8px #000;
|
|
}
|
|
.menu-ui-design::-webkit-scrollbar-thumb {
|
|
background-color: #4e4ffa;
|
|
}
|
|
/*.menu-ui-design*/
|
|
|
|
/*.navbar-toggle */
|
|
nav.navbar.bootsnav .navbar-toggle {
|
|
position: relative;
|
|
background-color: transparent;
|
|
border: 1px solid #4e4ffa;
|
|
padding: 10px;
|
|
top: 0;
|
|
}
|
|
nav.navbar.bootsnav .navbar-toggle i{color: #4e4ffa;}
|
|
/*.navbar-toggle */
|
|
|
|
/*-------------------------------------
|
|
3. Welcome-hero
|
|
--------------------------------------*/
|
|
.welcome-hero {
|
|
position: relative;
|
|
background:url('../images/lem/face1.JPG')no-repeat;
|
|
background-position: center;
|
|
background-size: cover;
|
|
z-index: 1;
|
|
}
|
|
.welcome-hero:before {
|
|
position: absolute;
|
|
content: "";
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(42,45,84,.60);
|
|
}
|
|
.header-area{position: absolute;top:0;left:0;width: 100%;z-index: 99;}
|
|
|
|
/*.welcome-hero-txt*/
|
|
.welcome-hero-txt{text-align: center;padding:290px 0 372px;}
|
|
.welcome-hero-txt h2 {
|
|
font-size: 42px;
|
|
color: #fff;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
margin-bottom: 45px;
|
|
}
|
|
.welcome-hero-txt p {
|
|
font-size: 18px;
|
|
text-transform: initial;
|
|
color: #fff;
|
|
font-weight: 500;
|
|
max-width: 735px;
|
|
margin: 0 auto;
|
|
}
|
|
.welcome-btn {
|
|
display: inline-block;
|
|
width: 230px;
|
|
height: 60px;
|
|
background: #4e4ffa;
|
|
color: #fff;
|
|
border-radius: 3px;
|
|
margin-top: 55px;
|
|
-webkit-transition: .3s linear;
|
|
-moz-transition:.3s linear;
|
|
-ms-transition:.3s linear;
|
|
-o-transition:.3s linear;
|
|
transition: .3s linear;
|
|
}
|
|
.welcome-btn:hover{
|
|
background: #0102fa;
|
|
}
|
|
/*.welcome-hero-txt*/
|
|
|
|
/*-------------------------------------
|
|
4. Model-Search
|
|
--------------------------------------*/
|
|
.model-search-content .col-sm-12 {padding: 0;}
|
|
.model-search-content {
|
|
padding: 40px 0;
|
|
background: #fff;
|
|
box-shadow:0 10px 40px 0px rgba(38,40,64,.2);
|
|
position: absolute;
|
|
bottom: -150px;
|
|
width: 100%;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
/*.single-model-search*/
|
|
.single-model-search{margin-bottom: 30px;}
|
|
.single-model-search:last-child {margin-bottom: 0;}
|
|
|
|
.single-model-search h2 {
|
|
font-size: 16px;
|
|
font-weight: 400;
|
|
text-transform: capitalize;
|
|
margin-bottom: 20px;
|
|
}
|
|
/*model-select-icon*/
|
|
.model-select-icon{
|
|
position:relative;
|
|
}
|
|
.model-select-icon .form-control {
|
|
outline: 0!important;
|
|
box-shadow: none;
|
|
border: 1px solid #f8f8f8;
|
|
background: #f8f8f8;
|
|
height: 60px;
|
|
}
|
|
.model-select-icon select {
|
|
font-size: 16px;
|
|
color: #888f9d;
|
|
text-transform: capitalize;
|
|
}
|
|
.model-select-icon:after{
|
|
position: absolute;
|
|
content: "\f103";
|
|
right: 0px;
|
|
top: 0;
|
|
font-size: 10px;
|
|
color: #888f9d;
|
|
background: #f8f8f8;
|
|
height: 60px;
|
|
line-height: 60px;
|
|
width: 50px;
|
|
text-align: center;
|
|
font-family: "Flaticon";
|
|
pointer-events: none;
|
|
border: transparent;
|
|
}/*model-select-icon*/
|
|
.welcome-btn.model-search-btn {
|
|
width: 160px;
|
|
margin-top: 80px;
|
|
margin-left: 53px;
|
|
}
|
|
|
|
/*-------------------------------------
|
|
6. New-cars
|
|
--------------------------------------*/
|
|
.new-cars{
|
|
background: #f8f9fb;
|
|
padding:100px 0 50px 0;
|
|
}
|
|
.new-cars-content{padding-top:96px;}
|
|
/*.new-cars-txt*/
|
|
.new-cars-txt {margin-left: 29px;margin-bottom: 30px;}
|
|
.new-cars-txt h2 a {
|
|
font-size: 30px;
|
|
font-weight: 500;
|
|
margin-bottom: 26px;
|
|
}
|
|
.new-cars-txt h2 a span {text-transform: uppercase;}
|
|
.new-cars-para2 {margin-top: 30px;}
|
|
.welcome-btn.new-cars-btn {
|
|
width: 176px;
|
|
margin-top: 32px;
|
|
}
|
|
/*.new-cars-txt*/
|
|
|
|
/*.owl-dots */
|
|
.new-cars .owl-theme .owl-dots .owl-dot span {
|
|
width: 8px;
|
|
height: 8px;
|
|
margin: 0px 4px;
|
|
background: transparent;
|
|
border: 1px solid #6a7781;
|
|
border-radius: 50%;
|
|
}
|
|
.new-cars .owl-theme .owl-dots .owl-dot.active span,.new-cars .owl-theme .owl-dots .owl-dot:hover span {background: #6a7781;}
|
|
.new-cars .owl-theme .owl-nav.disabled+.owl-dots {margin-top: 62px;}
|
|
/*.owl-dots */
|
|
|
|
/*-------------------------------------
|
|
7. Featured-cars
|
|
--------------------------------------*/
|
|
.featured-cars{
|
|
padding:100px 0 50px;
|
|
}
|
|
.featured-cars-content{padding-top:96px;}
|
|
|
|
/*.single-featured-cars*/
|
|
.featured-img-box {
|
|
border: 1px solid #dadfe9;
|
|
}
|
|
.featured-cars-img {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0 30px;
|
|
height: 220px;
|
|
border-bottom: 1px solid #dadfe9;
|
|
}
|
|
.featured-model-info{padding:12px 7px;}
|
|
.featured-model-info p {
|
|
font-size: 12px;
|
|
color: #8c92a0;
|
|
text-transform: capitalize;
|
|
}
|
|
.featured-mi-span{display: inline-block;margin:0 10px;}
|
|
.featured-hp-span{display: inline-block;margin-right: 10px;}
|
|
.featured-cars-txt{margin:21px 0 47px;}
|
|
.featured-cars-txt h2 a{font-size: 16px;margin-bottom: 15px;}
|
|
.featured-cars-txt h2 a span{text-transform: uppercase;}
|
|
.featured-cars-txt h3{margin-bottom: 10px;}
|
|
.featured-cars-txt h3,.featured-cars-txt p{font-size: 13px;}
|
|
/*.single-featured-cars*/
|
|
|
|
/*-------------------------------------
|
|
8. Clients-say
|
|
--------------------------------------*/
|
|
.clients-say{padding:100px 0 50px;background: #f8f9fb;}
|
|
|
|
/*single-testimonial-box */
|
|
.single-testimonial-box {
|
|
padding: 50px 30px 57px;
|
|
text-align: center;
|
|
border: 1px solid #dadfe9;
|
|
overflow-x: hidden;
|
|
-webkit-transition: .3s;
|
|
-moz-transition:.3s;
|
|
-ms-transition:.3s;
|
|
-o-transition:.3s;
|
|
transition: .3s;
|
|
}
|
|
|
|
/*testimonial-description*/
|
|
.clients-say .testimonial-carousel .col-sm-3,
|
|
.clients-say .testimonial-carousel .col-xs-12{
|
|
width:100%;
|
|
height:auto;
|
|
}
|
|
/* testimonial-info */
|
|
.testimonial-img {
|
|
margin-right: 5px;
|
|
border-radius:50%;
|
|
-webkit-transition: .3s;
|
|
-moz-transition:.3s;
|
|
-ms-transition:.3s;
|
|
-o-transition:.3s;
|
|
transition: .3s;
|
|
}
|
|
.testimonial-person h2 a,.testimonial-person h4 {
|
|
font-size: 16px;
|
|
color: #5e6778;
|
|
font-weight: 600;
|
|
}
|
|
.testimonial-person h4{
|
|
margin-top: 10px;
|
|
}/* testimonial-info */
|
|
|
|
|
|
/* testimonial-comment */
|
|
.testimonial-comment p {
|
|
font-size: 16px;
|
|
color: #5e6778;
|
|
margin-top: 30px;
|
|
margin-bottom: 25px;
|
|
}/* testimonial-comment */
|
|
|
|
|
|
/*testimonial-description*/
|
|
.single-testimonial-box:hover h2 a,.single-testimonial-box:hover h4, .single-testimonial-box:hover p{color: #fff;}
|
|
.single-testimonial-box:hover{
|
|
background: #4e4ffa;
|
|
border: 1px solid #4e4ffa;
|
|
box-shadow: 0 12px 30px 0px rgba(0,1,193,.2);
|
|
}
|
|
|
|
/*owl carousel*/
|
|
.clients-say .owl-carousel .owl-stage {
|
|
position: relative;
|
|
padding: 100px 0 40px;
|
|
}
|
|
.clients-say .owl-carousel .owl-item img {
|
|
display: block;
|
|
width: 70px;
|
|
height: 70px;
|
|
border-radius:50%;
|
|
margin:0 auto;
|
|
}
|
|
/*owl carousel*/
|
|
|
|
/*-------------------------------------
|
|
9. Brand
|
|
--------------------------------------*/
|
|
.brand{
|
|
padding: 120px 0;
|
|
}
|
|
.brand-area {
|
|
position:relative;
|
|
}
|
|
.brand-area .item {
|
|
padding: 0 40px 0;
|
|
}
|
|
|
|
.brand .brand-area .owl-carousel .owl-item img {
|
|
display: block;
|
|
width: 100%;
|
|
height:72px;
|
|
border-radius:0;
|
|
}
|
|
/*-------------------------------------
|
|
10. Blog
|
|
--------------------------------------*/
|
|
|
|
/*-------------------------------------
|
|
12. Contact
|
|
--------------------------------------*/
|
|
.contact {
|
|
background: #2a2d54;
|
|
}
|
|
.footer-top {padding: 50px 0 72px;}
|
|
|
|
/*.footer-logo*/
|
|
.footer-logo a,.footer-logo a:hover,.footer-logo a:focus{
|
|
display: inline-block;
|
|
color: #fff;
|
|
font-size: 24px;
|
|
letter-spacing: 3px;
|
|
font-family: 'Bebas', sans-serif;
|
|
font-weight: 700;
|
|
text-transform:uppercase;
|
|
}
|
|
.single-footer-widget p {
|
|
font-size: 14px;
|
|
color: #eeeff6;
|
|
max-width: 300px;
|
|
margin:40px 0 20px;
|
|
}
|
|
.footer-contact p {
|
|
margin: 0;
|
|
color: #d1d7e9;
|
|
}
|
|
/*.footer-logo*/
|
|
|
|
.single-footer-widget {margin-bottom: 40px;}
|
|
.single-footer-widget h2 {
|
|
font-size: 14px;
|
|
color: #fff;
|
|
text-transform: uppercase;
|
|
margin-bottom: 43px;
|
|
}
|
|
.single-footer-widget ul li {
|
|
display: inherit;
|
|
-webkit-transition: .5s;
|
|
-moz-transition:.5s;
|
|
-ms-transition:.5s;
|
|
-o-transition:.5s;
|
|
transition: .5s;
|
|
}
|
|
.single-footer-widget ul li:hover{
|
|
-webkit-transform:translateX(10px);
|
|
-moz-transform:translateX(10px);
|
|
-ms-transform:translateX(10px);
|
|
-o-transform:translateX(10px);
|
|
transform:translateX(10px);
|
|
}
|
|
.single-footer-widget ul li a {
|
|
font-size: 14px;
|
|
color: #cfd0e3;
|
|
font-weight: 300;
|
|
padding-bottom: 13px;
|
|
}
|
|
.single-footer-widget ul li a span {text-transform: lowercase;}
|
|
.footer-newsletter p{
|
|
color: #aeafc2;
|
|
font-size: 14px;
|
|
font-weight: 300;
|
|
margin: 0 0 15px;
|
|
}
|
|
/*hm-foot-email*/
|
|
.hm-foot-email{position: relative;}
|
|
.foot-email-box .form-control {
|
|
background:#26294d;
|
|
display: block;
|
|
padding: 15px 20px;
|
|
outline:0!important;
|
|
box-shadow:0 5px 15px rgba(0,0,0,.2);
|
|
border:0;
|
|
}
|
|
.foot-email-box input[type="text"]{
|
|
font-size: 12px;
|
|
color: #666c81;
|
|
font-weight: 300;
|
|
}
|
|
.foot-email-subscribe {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
width: 50px;
|
|
height: 100%;
|
|
background: transparent;
|
|
color: #666c81;
|
|
font-size: 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.foot-email-box .form-control:hover{
|
|
box-shadow:0 5px 15px rgba(0,0,0,.4);
|
|
}
|
|
/*hm-foot-email*/
|
|
/*.footer-copyright */
|
|
.footer-copyright {
|
|
padding: 20px 0 17px;
|
|
border-top: 1px solid #434859;
|
|
}
|
|
.footer-copyright p,.footer-copyright p a {
|
|
color: #a8a9bf;
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
text-transform: capitalize;
|
|
}
|
|
.footer-social{text-align: right;}
|
|
.footer-social a i {
|
|
color: #fff;
|
|
opacity: .40;
|
|
font-size: 14px;
|
|
margin-left: 16px;
|
|
-webkit-transition: .3s;
|
|
-moz-transition:.3s;
|
|
-ms-transition:.3s;
|
|
-o-transition:.3s;
|
|
transition: .3s;
|
|
}
|
|
.footer-social i:hover{opacity: .70;}
|
|
/*.footer-copyright */
|
|
|
|
/*===============================
|
|
Scroll Top
|
|
===============================*/
|
|
#scroll-Top .return-to-top {
|
|
position: fixed;
|
|
right: 30px;
|
|
bottom: 30px;
|
|
display: none;
|
|
width: 40px;
|
|
line-height: 40px;
|
|
height: 40px;
|
|
text-align: center;
|
|
font-size: 20px;
|
|
cursor: pointer;
|
|
color: #fff;
|
|
background:#4e4ffa;
|
|
border:1px solid #4e4ffa;
|
|
border-radius:50%;
|
|
-webkit-transition: .5s;
|
|
-moz-transition:.5s;
|
|
-ms-transition:.5s;
|
|
-o-transition:.5s;
|
|
transition: .5s;
|
|
z-index: 2;
|
|
}
|
|
#scroll-Top .return-to-top:hover {
|
|
background:#fff;
|
|
color: #4e4ffa;
|
|
border:1px solid #4e4ffa;
|
|
}
|
|
|
|
#scroll-Top .return-to-top i{
|
|
position:relative;
|
|
bottom:0;
|
|
|
|
}
|
|
|
|
#scroll-Top .return-to-top i{
|
|
position: relative;
|
|
animation-name: example;
|
|
animation-direction: alternate;
|
|
animation-iteration-count: infinite;
|
|
animation-duration:1s;
|
|
}
|
|
@keyframes example {
|
|
0% {bottom:0px;}
|
|
100% {bottom:7px;}
|
|
}
|
|
|
|
|
|
/* Form Styling */
|
|
.form-group {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
label {
|
|
font-size: 18px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
input[type="text"],
|
|
textarea {
|
|
width: 100%;
|
|
padding: 10px;
|
|
border: 1px solid #ccc;
|
|
border-radius: 5px;
|
|
font-size: 16px;
|
|
color: #444a57;
|
|
margin-top: 5px;
|
|
}
|
|
|
|
textarea {
|
|
resize: vertical;
|
|
}
|
|
|
|
button[type="submit"] {
|
|
background-color: #4e4ffa;
|
|
color: #fff;
|
|
padding: 10px 20px;
|
|
border: none;
|
|
border-radius: 5px;
|
|
font-size: 18px;
|
|
cursor: pointer;
|
|
transition: background-color 0.3s ease;
|
|
}
|
|
|
|
button[type="submit"]:hover {
|
|
background-color: #0102fa;
|
|
}
|