/
index.html
165 lines (126 loc) · 6.25 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
<!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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="Author" content="Todd Croak-Falen">
<meta name="Description" content="2019 Acura landing pages for Acura of Tempe">
<!-- Favicon -->
<link rel="apple-touch-icon" sizes="180x180" href="assets/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="assets/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="assets/favicon/favicon-16x16.png">
<link rel="manifest" href="assets/favicon/site.webmanifest">
<link rel="mask-icon" href="assets/favicon/safari-pinned-tab.svg" color="#e6231e">
<meta name="msapplication-TileColor" content="#e6231e">
<meta name="theme-color" content="#ffffff">
<title>2019 Acura Models | Acura of Tempe</title>
<!-- FONT AWESOME -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<!-- FOUNDATION CSS -->
<link rel="stylesheet" type="text/css" href="assets/foundation-5.5.3/css/normalize.css">
<link rel="stylesheet" type="text/css" href="assets/foundation-5.5.3/css/foundation.css">
<!-- CUSTOM CSS FOR THIS PAGE ONLY -->
<link rel="stylesheet" type="text/css" href="assets/css/index.css">
</head>
<body>
<main id="project-container">
<!-- Intro Section -->
<section id="intro-section">
<div class="row">
<div class="column small-12">
<!-- <div id="header-img-lg"> -->
<!-- Background image is passed into this container via CSS -->
<div id="h1-container">
<div class="intro-text-box">
<h1 class="acura-headline">Acura of Tempe Landing Pages</h1>
<p>I originally designed and coded the following six landing pages at <a href="https://www.fzautomotive.com/" target="_blank" class="acura-link">fusionZONE Automotive, LLC</a> for Acura of Tempe when the new 2019 models were coming out. Each page has passed an Acura compliance check.</p>
<p>I have recreated and hosted them here for my <a href="https://www.tcf-web-development.com/" target="_blank" class="acura-link">web development portfolio</a> to ensure that what you see is the work I did — and not any changes that may or may not be made to these pages later.</p>
<p>Click any model to view. GitHub code can be viewed <a href="https://github.com/toddcf/acura-of-tempe" target="_blank" class="acura-link">here</a>. Enjoy!</p>
</div> <!-- Close .shaded-box -->
</div> <!-- Close #h1-container -->
<!-- </div> --> <!-- Close #header-img-lg -->
</div> <!-- Close .column -->
</div> <!-- Close .row -->
</section> <!-- Close #intro-section -->
<!-- Hub Section -->
<section id="hub-section">
<div class="row">
<div class="column small-12 medium-6 large-4">
<a href="ilx.html">
<div class="card">
<div class="card-section card-image">
<img src="assets/img/2019-acura-ilx/header-img/640x360-compressed.jpg" alt="2019 Acura ILX driving across bridge over water">
</div>
<div class="card-section card-title">
<h2>2019 Acura ILX</h2>
</div>
</div>
</a>
</div> <!-- Close .column -->
<div class="column small-12 medium-6 large-4">
<a href="tlx.html">
<div class="card">
<div class="card-section card-image">
<img src="assets/img/2019-acura-tlx/header-img/640x360-compressed.jpg" alt="2019 Acura TLX driving under freeway overpass">
</div>
<div class="card-section card-title">
<h2>2019 Acura TLX</h2>
</div>
</div>
</a>
</div> <!-- Close .column -->
<div class="column small-12 medium-6 large-4">
<a href="rlx.html">
<div class="card">
<div class="card-section card-image">
<img src="assets/img/2019-acura-rlx/header-img/640x360-compressed.jpg" alt="2019 Acura TLX driving under freeway overpass">
</div>
<div class="card-section card-title">
<h2>2019 Acura RLX</h2>
</div>
</div>
</a>
</div> <!-- Close .column -->
<div class="column small-12 medium-6 large-4">
<a href="rdx.html">
<div class="card">
<div class="card-section card-image">
<img src="assets/img/2019-acura-rdx/header-img/640x360-compressed.jpg" alt="2019 Acura RDX driving in mountain snow">
</div>
<div class="card-section card-title">
<h2>2019 Acura RDX</h2>
</div>
</div>
</a>
</div> <!-- Close .column -->
<div class="column small-12 medium-6 large-4">
<a href="mdx.html">
<div class="card">
<div class="card-section card-image">
<img src="assets/img/2019-acura-mdx/header-img/640x360-compressed.jpg" alt="2019 Acura MDX in mountain driveway">
</div>
<div class="card-section card-title">
<h2>2019 Acura MDX</h2>
</div>
</div>
</a>
</div> <!-- Close .column -->
<div class="column small-12 medium-6 large-4">
<a href="nsx.html">
<div class="card">
<div class="card-section card-image">
<img src="assets/img/2019-acura-nsx/front-white/640x360-compressed.jpg" alt="2019 Acura NSX">
</div>
<div class="card-section card-title">
<h2>2019 Acura NSX</h2>
</div>
</div>
</a>
</div> <!-- Close .column -->
</div> <!-- Close .row -->
</section> <!-- Close #hub-section -->
</main> <!-- Close #project-container -->
</body>
</html>