Hugging Face's logo

Spaces:
ElonMuskTeslaMarketingDepartment
/
FanClub
Running

App Files Community
1
ElonMuskTeslaMarketingDepartment commited on
Commit
b58cb62
·
verified ·
1 Parent(s): 7617675

Update styles.css

Browse files
Files changed (1) hide show
  1. styles.css +103 -45
styles.css CHANGED
@@ -7,33 +7,51 @@
7
 
8
  body {
9
  overflow-x: hidden;
10
- max-width: calc(100% - 60px);
11
- margin: 50px auto 0;
12
- padding: 30px;
13
  }
14
 
15
- .hero {
 
16
  height: 100vh;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
17
  position: relative;
18
- border-radius: 20px;
19
  overflow: hidden;
20
  }
21
 
22
- .hero-carousel .hero-slide {
23
  position: absolute;
24
  top: 0;
25
  left: 0;
26
  width: 100%;
27
  height: 100%;
28
  opacity: 0;
29
- transition: opacity 0.5s;
30
  }
31
 
32
- .hero-carousel .hero-slide.active {
33
  opacity: 1;
34
  }
35
 
36
- .hero-carousel img {
37
  width: 100%;
38
  height: 100%;
39
  object-fit: cover;
@@ -41,62 +59,87 @@ body {
41
 
42
  .hero-content {
43
  position: absolute;
44
- top: 20%;
45
  left: 50%;
46
- transform: translateX(-50%);
47
  text-align: center;
48
  color: white;
 
49
  }
50
 
51
  .hero-content h1 {
52
- font-size: 40px;
 
53
  }
54
 
55
  .hero-content p {
56
- font-size: 18px;
 
57
  }
58
 
59
- .hero-content .cta {
60
- background-color: #3e6ae1;
 
 
 
 
 
 
 
 
61
  color: white;
62
  border: none;
63
- padding: 10px 20px;
64
- margin: 5px;
65
  cursor: pointer;
 
 
66
  }
67
 
68
- .models-carousel, .fsd .carousel, .solar .carousel {
69
- margin: 20px 0;
70
- border-radius: 20px;
 
71
  overflow: hidden;
 
 
72
  }
73
 
74
- .carousel .slide {
75
- position: relative;
 
 
 
 
76
  opacity: 0;
77
- transition: opacity 0.5s;
78
  }
79
 
80
- .carousel .slide.active {
81
  opacity: 1;
82
  }
83
 
84
- .carousel img {
85
  width: 100%;
86
- height: auto;
87
  object-fit: contain;
88
  }
89
 
90
- .slide-caption {
91
  position: absolute;
92
- bottom: 20px;
93
- left: 20px;
94
  color: white;
 
 
 
 
 
 
95
  }
96
 
97
  .offers {
98
  display: flex;
99
  gap: 20px;
 
100
  }
101
 
102
  .offer-card {
@@ -109,38 +152,53 @@ body {
109
  .offer-images {
110
  display: flex;
111
  gap: 10px;
 
112
  }
113
 
114
  .offer-images img {
115
- width: 33%;
 
116
  }
117
 
118
- .fsd, .solar {
119
- gap: 20px;
120
  }
121
 
122
- .charging img {
123
  width: 100%;
124
- height: auto;
 
125
  }
126
 
127
- @media (hover: hover) {
128
- .offers, .fsd, .solar {
129
- flex-direction: row;
130
- }
131
  }
132
 
133
- @media (max-width: 768px) {
134
- body {
135
- padding: 15px;
136
- margin: 25px auto 0;
137
- }
 
138
 
139
- .hero {
140
- height: 80vh;
 
141
  }
142
 
143
  .carousel {
144
  height: 200px;
145
  }
 
 
 
 
 
 
 
 
 
 
 
 
146
  }
 
7
 
8
  body {
9
  overflow-x: hidden;
10
+ max-width: 1200px;
11
+ margin: 0 auto;
12
+ padding: 0 30px;
13
  }
14
 
15
+ .hero-section {
16
+ position: relative;
17
  height: 100vh;
18
+ margin-bottom: 20px;
19
+ }
20
+
21
+ .logo-link {
22
+ position: absolute;
23
+ top: 20px;
24
+ left: 20px;
25
+ z-index: 10;
26
+ }
27
+
28
+ .logo {
29
+ width: 50px;
30
+ height: auto;
31
+ }
32
+
33
+ .hero-carousel {
34
+ width: 100%;
35
+ height: 100%;
36
  position: relative;
 
37
  overflow: hidden;
38
  }
39
 
40
+ .hero-slide {
41
  position: absolute;
42
  top: 0;
43
  left: 0;
44
  width: 100%;
45
  height: 100%;
46
  opacity: 0;
47
+ transition: opacity 0.5s ease;
48
  }
49
 
50
+ .hero-slide.active {
51
  opacity: 1;
52
  }
53
 
54
+ .hero-slide img {
55
  width: 100%;
56
  height: 100%;
57
  object-fit: cover;
 
59
 
60
  .hero-content {
61
  position: absolute;
62
+ top: 50%;
63
  left: 50%;
64
+ transform: translate(-50%, -50%);
65
  text-align: center;
66
  color: white;
67
+ z-index: 5;
68
  }
69
 
70
  .hero-content h1 {
71
+ font-size: 32px;
72
+ margin-bottom: 10px;
73
  }
74
 
75
  .hero-content p {
76
+ font-size: 16px;
77
+ margin-bottom: 20px;
78
  }
79
 
80
+ .buttons {
81
+ display: flex;
82
+ gap: 10px;
83
+ justify-content: center;
84
+ }
85
+
86
+ button {
87
+ width: 200px;
88
+ padding: 10px;
89
+ background-color: #007bff;
90
  color: white;
91
  border: none;
 
 
92
  cursor: pointer;
93
+ border-radius: 4px;
94
+ font-size: 14px;
95
  }
96
 
97
+ .carousel {
98
+ width: 100%;
99
+ height: 300px;
100
+ position: relative;
101
  overflow: hidden;
102
+ border-radius: 20px;
103
+ margin-bottom: 20px;
104
  }
105
 
106
+ .slide {
107
+ width: 100%;
108
+ height: 100%;
109
+ position: absolute;
110
+ top: 0;
111
+ left: 0;
112
  opacity: 0;
113
+ transition: opacity 0.5s ease;
114
  }
115
 
116
+ .slide.active {
117
  opacity: 1;
118
  }
119
 
120
+ .slide img {
121
  width: 100%;
122
+ height: 100%;
123
  object-fit: contain;
124
  }
125
 
126
+ .caption {
127
  position: absolute;
128
+ bottom: 10px;
129
+ left: 10px;
130
  color: white;
131
+ text-align: left;
132
+ }
133
+
134
+ .caption h2 {
135
+ font-size: 24px;
136
+ margin-bottom: 5px;
137
  }
138
 
139
  .offers {
140
  display: flex;
141
  gap: 20px;
142
+ margin-bottom: 20px;
143
  }
144
 
145
  .offer-card {
 
152
  .offer-images {
153
  display: flex;
154
  gap: 10px;
155
+ margin: 10px 0;
156
  }
157
 
158
  .offer-images img {
159
+ width: 100%;
160
+ height: auto;
161
  }
162
 
163
+ .charging {
164
+ margin-bottom: 20px;
165
  }
166
 
167
+ .charging iframe {
168
  width: 100%;
169
+ height: 300px;
170
+ border: 0;
171
  }
172
 
173
+ .solar-carousel .caption {
174
+ color: black;
 
 
175
  }
176
 
177
+ footer {
178
+ text-align: center;
179
+ padding: 20px;
180
+ font-size: 12px;
181
+ color: gray;
182
+ }
183
 
184
+ @media (max-width: 768px) {
185
+ .hero-section {
186
+ height: 60vh;
187
  }
188
 
189
  .carousel {
190
  height: 200px;
191
  }
192
+
193
+ .offers {
194
+ flex-direction: column;
195
+ }
196
+
197
+ .buttons {
198
+ flex-direction: column;
199
+ }
200
+
201
+ button {
202
+ width: 100%;
203
+ }
204
  }