-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
308 lines (239 loc) · 8.59 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Clone Cadillac Website</title>
<link rel="stylesheet" href="styles.css">
</head>
<header id="header">
<nav id="nav-bar">
<!-- Burger Menu on the Right side -->
<!-- links -->
<ul>
<li>ownership</li>
<ul>
<li><a href="#" class="nav-link">service</a></li>
<li>support</li>
<li>My<a href="#" class="nav-link">My Cadillac Rewards</a></li>
<li>OnStar</li>
</ul>
<li><a href="#" class="nav-link">Discover Cadillac</a></li>
<ul>
<li><a href="#" class="nav-link">Our Values</a></li>
<li><a href="#" class="nav-link">EV Life</a></li>
<li><a href="#" class="nav-link">Concepts</a></li>
<li><a href="#" class="nav-link">Technologies</a></li>
<li><a href="#" class="nav-link">Racing</a></li>
</ul>
</ul>
<ul>
<li><a href="#" class="nav-link">Vehicles</a></li>
<li><a href="#" class="nav-link">Shop</a></li>
<li><a href="#" class="nav-link">Cadillac Rewards</a><a href="#" class="nav-link">logoImage. (alt="Cadillac Logo")</a></li>
<li><a href="#" class="nav-link">Help</a></li>
</ul>
</nav>
</header>
<main>
<!--
- backgroundImage with ("")
Title and
Link (Video (external link))
Addditional info at bottom of bgImage
-->
<hr>
<section class="section1">
<img src="" alt="" width="1268px" height="634px">
<h1>ALL-ELECTRIC <br>
ESCALADE IQ</h1>
<button>Watch Video Preview</button>
<p class="finePrint">Addditional info at bottom of bgImage</p>
</section>
<hr>
<!--
- (next Info down as one scrolls)
Title
Link to ofers
(within surrounding box)
- all words - no image
- advertisement with a link at the bottom
-->
<!-- border box line surrounding the whole ad -->
<p>
CURRENT OFFER <br>
<a href="#">View all Cadillac offers</a>
</p>
<p>
2023 <br>
MADE TO MOVE <br>
SALES EVENT <br>
CADILLAC XT5 AND XT6 <br>
1.9% APR* <br>
36 months for well-qualified buyers <br><br>
-PLUS- <br><br>
$1,500* <br>
purchase allowance <br><br>
WHEN YOU FINANCE THROUGH CADILLAC FINANCIAL <br> <b>
VIEW OFFERS ->
</p>
<hr>
<!-- RIGHT side -->
<h3>EXPLORE THE CADILLAC LINEUP</h3>
<!-- left side images side by side -->
<figure>
<img src="" alt="SUVS">
<figcaption>SUVs</figcaption>
<img src="" alt="SEDANS">
<figcaption>SEDANS</figcaption>
<img src="" alt="ELECTRIC">
<figcaption>ELECTRIC</figcaption>
</figure>
<hr>
<!-- background image (video repeat)
h2 Title on top and centered -->
<img src="" alt="Background Video Images">
<h2>METICULOUSLY CRAFTED <br>
EFFORTLESSLY ICONIC</h2>
<!-- same on top of image
(at the bottom )
-->
<button>DISCOVER CELESTIQ</button>
<!-- small fine print below button -->
<p class="finePrint">Preproduction model shown throughout. But inquiry only.</p>
<hr><hr><hr>
<!-- - Title on the right -->
<h3>
TRIUMPHANT RETURN <br>
TO LE MANS
</h3>
<p>
Cadillac Racing breaks 21-year hiatus and captures the podium in grueling 24 Hours of Le Mans.
<br><br>
<a href="#">FOLLOW V-SERIES.R</a>
</p>
<!-- - image(s) with Links on the left -->
<img src="" alt="Sports Cadillac Car">
<hr>
<!-- - (NEXT INFO)
- (same as above created two more times)
- image on the left and details on the right
- 3rd time create the same as the first (this current is the second) -->
<!-- - image(s) with Links on the RIGHT -->
<img src="" alt="img 3/4 View CJeep Left side">
<!-- - Title on the LEFT (centered) -->
<h3>
MEET THE NEW CADILAC <br>
LIVE
</h3>
<p>
Experience more on the new Cadillac LIVE studio.
<br><br>
<a href="#">SCHEDULE YOUR TOUR</a>
</p>
<hr>
<!-- - Title on the right -->
<h3>
ALL-ELECTRIC 2024 LYRIQ
</h3>
<h4>Magnificence electrified</h4>
<p>
<a href="#">FOLLOW V-SERIES.R</a>
</p>
<!-- - image(s) with Links on the left -->
<img src="" alt="3/4 View CJeep Right Side">
<!-- at the bottom of image (words in fine print (smaller than normal)) -->
<p class="finePrint">Simulated model shown. Actual production model will vary. See dealer for 2024 LYRIQ availability details.</p>
<hr> <hr>
<hr>
<!-- - (NEXT INFO)
TITLE LIKE NO OTHER (2 Liner in it's own space) -->
<h2>CADILLAC OWNERSHIP HAS <br> ITS BENEFITS</h2>
<hr>
<!-- - (NEXT INFO)
- background image
- top - (non, but then the above title may be connected to it)
- bottom/centered - Financial Info
- "" link to financial -->
<!-- with a background image (words at the bottom centered) -->
<img src="" alt="img Jeep Female Male">
<h3>
CADILLAC FINANCIAL <br>
<strong>EXCLUSIVELY YOURS</strong>
</h3>
<p>
Concierge-style financing at your fingertips. <br>
Prequalify with no credit impact while you shop.
</p>
<a href="#">DISOVER YOUR OPTIONS</a>
<hr> <hr>
<hr>
<hr>
<!-- - (NEXT INFO)
- 4 Columns
- Title, Paragraph and link
- this and prior are to be blended together (bottom blended towards black and this one is black (for example)) -->
<!-- 1st Column -->
<h4>MY CADILLAC <br> REWARDS</h4>
<p>
Get in, move up, drive on-sign <br> up+- today and unlock a world of <br> appreciation.
</p>
<br>
<a href="#">GET REWARDED</a>
<hr>
<!-- 2 -->
<h4>ONSTAR INSURANCE TM *- </h4>
<p>
By leveraging embedded in-vehicle <br> technology. OnStar insurance offers <br> personalized rates that reward you for safe <br> driving and are tailored to the way you <br> drive. *-
</p>
<br>
<a href="#">LEARN MORE</a>
<hr>
<!-- 3 -->
<h4>MY CADILLAC APP*-</h4>
<p>
Unlock the potential of your Cadillac by <br> managing your vehicle right from your <br> smartphone.
</p>
<br>
<a href="#">DOWNLOAD TODAY</a>
<hr>
<!-- 4 -->
<h4>CERTIFIED SERVICE</h4>
<p>
Our expert Cadillac Certified Service <br>technicians are ready to meet your <br> vehicles needs.
</p>
<br>
<a href="#">SCHEDULE SERVICE</a>
</main>
<hr> <hr>
<hr>
<footer>
<!-- 1 -->
Cadillac Logo <br>
<button>GET UPDATED</button> <br>
<a href="#">SEARCH</a>
<br><br>
<p class="finePrint">Download the myCadillac App* for Apple or Android</p>
<img src="" alt="Apple Store">
<img src="" alt="Google Play">
<hr>
<!-- 2nd Column -->
<a href="#">120TH ANNIVERSARY</a> <br>
<a href="#">EQUITY & JUSTICE</a> <br>
<a href="#">SUSTAINABILITY</a> <br>
<a href="#">SUPER CRUISE</a>
<br>
<p>FOLLOW US</p>
<img src="#" alt="icon">
<img src="#" alt="icon">
<img src="#" alt="icon">
<img src="#" alt="icon">
<hr>
<!-- 3rd Column -->
<a href="#">DIGITAL BROCHURES</a> <br>
<a href="#">CADILLAC FINANCIAL</a> <br>
<a href="#">CONTACT US</a>
</footer>
</body>
</html>