|
|
* { |
|
|
margin: 0; |
|
|
padding: 0; |
|
|
box-sizing: border-box; |
|
|
font-family: Arial, sans-serif; |
|
|
} |
|
|
|
|
|
body { |
|
|
overflow-x: hidden; |
|
|
max-width: 1200px; |
|
|
margin: 0 auto; |
|
|
padding: 5px; |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
justify-content: center; |
|
|
align-content: center; |
|
|
gap: 20px; |
|
|
margin-bottom: 20px; |
|
|
} |
|
|
|
|
|
.hero-section, .models-carousel, .fsd-carousel, .solar-carousel, .offers, .charging { |
|
|
position: relative; |
|
|
height: 589px; |
|
|
width: auto; |
|
|
margin-bottom: 20px; |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
justify-content: center; |
|
|
align-items: center; |
|
|
} |
|
|
|
|
|
.hero-section { |
|
|
border-radius: 0 0 20px 20px; |
|
|
} |
|
|
|
|
|
.models-carousel, .fsd-carousel, .solar-carousel, .offers, .charging { |
|
|
border-radius: 20px; |
|
|
background-color: #f9f9f9; |
|
|
} |
|
|
|
|
|
.logo-link { |
|
|
position: absolute; |
|
|
top: 20px; |
|
|
left: 20px; |
|
|
z-index: 10; |
|
|
} |
|
|
|
|
|
.logo { |
|
|
width: 50px; |
|
|
height: auto; |
|
|
} |
|
|
|
|
|
.hero-carousel, .carousel { |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.hero-slide, .slide { |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
opacity: 0; |
|
|
transition: opacity 0.5s ease; |
|
|
} |
|
|
|
|
|
.hero-slide.active, .slide.active { |
|
|
opacity: 1; |
|
|
} |
|
|
|
|
|
.hero-slide img, .slide img { |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
object-fit: cover; |
|
|
} |
|
|
|
|
|
.hero-content, .caption { |
|
|
position: absolute; |
|
|
top: 50%; |
|
|
left: 50%; |
|
|
transform: translate(-50%, -50%); |
|
|
text-align: center; |
|
|
color: white; |
|
|
z-index: 5; |
|
|
} |
|
|
|
|
|
.charging-content { |
|
|
position: absolute; |
|
|
top: 50%; |
|
|
left: 50%; |
|
|
transform: translate(-50%, -50%); |
|
|
text-align: center; |
|
|
color: black; |
|
|
z-index: 5; |
|
|
} |
|
|
|
|
|
.hero-content h1, .caption h2 { |
|
|
font-size: 32px; |
|
|
margin-bottom: 10px; |
|
|
} |
|
|
|
|
|
.hero-content p, .caption p { |
|
|
font-size: 16px; |
|
|
margin-bottom: 20px; |
|
|
} |
|
|
|
|
|
.buttons { |
|
|
display: flex; |
|
|
gap: 10px; |
|
|
justify-content: center; |
|
|
} |
|
|
|
|
|
button { |
|
|
width: 200px; |
|
|
padding: 10px; |
|
|
background-color: #007bff; |
|
|
color: white; |
|
|
border: none; |
|
|
cursor: pointer; |
|
|
border-radius: 4px; |
|
|
font-size: 14px; |
|
|
} |
|
|
|
|
|
.offers { |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
justify-content: center; |
|
|
align-content: center; |
|
|
gap: 20px; |
|
|
} |
|
|
|
|
|
.offer-card { |
|
|
background: #f4f4f4; |
|
|
padding: 20px; |
|
|
border-radius: 4px; |
|
|
height: 100%; |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
justify-content: center; |
|
|
align-items: center; |
|
|
} |
|
|
|
|
|
.offer-images { |
|
|
display: flex; |
|
|
gap: 10px; |
|
|
margin: 10px 0; |
|
|
} |
|
|
|
|
|
.offer-images img { |
|
|
width: 100%; |
|
|
height: auto; |
|
|
} |
|
|
|
|
|
.charging iframe { |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
border: 0; |
|
|
} |
|
|
|
|
|
.solar-carousel .caption { |
|
|
color: black; |
|
|
} |
|
|
|
|
|
footer { |
|
|
text-align: center; |
|
|
padding: 20px; |
|
|
font-size: 12px; |
|
|
color: gray; |
|
|
} |
|
|
|
|
|
@media (max-width: 768px) { |
|
|
.hero-section, .models-carousel, .fsd-carousel, .solar-carousel, .offers, .charging { |
|
|
height: 60vh; |
|
|
} |
|
|
|
|
|
.buttons { |
|
|
flex-direction: column; |
|
|
} |
|
|
|
|
|
button { |
|
|
width: 200px; |
|
|
} |
|
|
} |