-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
269 lines (250 loc) · 11 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
<!doctype html>
<html class="no-js" lang="en" dir="ltr">
<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>Cedar Works Deck Builders</title>
<link rel="stylesheet" href="./assets/css/foundation.css">
<link rel="stylesheet" href="./assets/css/app.css">
</head>
<body>
<header class="grid-container card-section padding-bottom-0">
<div class="grid-x align-spaced">
<div class="large-4 align-top align-center cell grid-x">
<img class="" src="./assets/images/logo.png" alt="Cedar Works Deck builders logo">
</div>
<div class="large-3 cell card-section text-brown font-italic text-center">
<p>
Creating Southeast Michigan’s
<wbr>
Dream Outdoor Spaces Since
<wbr>
1990
</p>
</div>
<div class="large-3 cell text-center">
<small class="m-font text-blue">
Start Your Outdoor Project Today!
</small>
<p class="lead m-font font-bold">
<img class="h-icon" src="./assets/images/hammer-header.png" alt="Hammer Icon">
<span class="lead font-bold">(248) 363-1113</span>
</p>
</div>
</div>
</header>
<main class="grid-container-fluid">
<div id="top-hero" class="grid-x">
<div class="large-12 grid-container grid-padding-y">
<div class="grid-x align-center">
<div class="small-12 cell">
<div class="card-section">
<h1 class="text-white m-font text-center">
Relax and Enjoy Summer with a <wbr>
<strong>
<em>Custom-Made</em>
</strong>
Deck or Patio
</h1>
</div>
<p class="lead font-bold text-center text-gold">
There’s no better way to spend the warm weather months with friends and family than on <wbr>a custom designed deck or under the pergola or gazebo you’ve always wanted
</p>
<div class="card-section">
<hr class="border-dark-gold">
</div>
</div>
</div>
<div class="grid-x">
<div class="cell text-center">
<a class="button secondary align-bottom hollow font-bold text-white" href="#">View our Portfolio <img src="./assets/images/play-icon.png" alt="Play Arrow"></a>
</div>
</div>
<div class="grid-x grid-padding-y align-right">
<img class="align-right" src="./assets/images/banner-trex-pro-logo.png" alt="TexPro Platinum banner">
</div>
</div>
</div>
<div id="center-hero" class="grid-x">
<div class="large-12 grid-container">
<div class="grid-x align-center grid-padding-x border-dark-gold">
<div class="large-12 cell">
<div class="text-center card-section">
<h3 class="font-bold card-section">Our Passion is Creating a Comfortable and Functional <wbr>Outdoor Living Space for You</h3>
</div>
<hr class="border-brown">
</div>
</div>
<div class="grid-x card-section grid-padding-x text-dark-brown font-bold font-italic text-center">
<div class="large-6 cell">
<div class="grid-x grid-padding-x grid-padding-y">
<div class="large-12 cell">
<p class="lead">
“We had such a POSITIVE experience!”
</p>
<p>
“A crew of five came out and tore out my old deck in no time at all.
The cleanup was impeccable.
The same morning the lumber was delivered so Pat and Mike could start building our new cedar deck that afternoon.
Pat has been with Cedar Works over 20 years and he and Mike did such quality work during their few days here.
They were hard working, genuinely nice guys.
All my neighbors and friends are pleasantly surprised what a fantastic job they did.
We are two very happy customers! We recommend them highly - a 10 plus in our book!”
</p>
<div class="card-section">
<img src="./assets/images/gold-star.png" alt="Gold star">
<img src="./assets/images/gold-star.png" alt="Gold star">
<img src="./assets/images/gold-star.png" alt="Gold star">
<img src="./assets/images/gold-star.png" alt="Gold star">
<img src="./assets/images/gold-star.png" alt="Gold star">
</div>
<div class="card-section">
<img src="./assets/images/google-logo.png" alt="Google">
</div>
</div>
</div>
</div>
<div class="large-6 cell">
<div class="grid-x grid-padding-x grid-padding-y">
<div class="large-12 cell">
<p class="lead">
“Everything was handled well.”
</p>
<p>
“My wife and I would highly recommend Cedar Works if you are considering a deck for your home.
They installed a Trex deck for us and did a great job with the project.
Conversations with the owner of Cedar Works and his advice really helped with our design considerations and led to a design we are very happy with.
The Cedar Works crew was very efficient and professional.
Everything from managing the building materials to keeping our yard clear of debris was handled well.
It’s great to work with people who know what they are doing.”
</p>
<div class="card-section">
<img src="./assets/images/gold-star.png" alt="Gold star">
<img src="./assets/images/gold-star.png" alt="Gold star">
<img src="./assets/images/gold-star.png" alt="Gold star">
<img src="./assets/images/gold-star.png" alt="Gold star">
<img src="./assets/images/gold-star.png" alt="Gold star">
</div>
<div class="card-section">
<img src="./assets/images/google-logo.png" alt="Google">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="leads-form" class="grid-x">
<div class="large-12 grid-x grid-container">
<div class="large-7 card-section cell text-white">
<div class="grid-x">
<div class="large-12 cell">
<h4 class="font-bold">Our Deck and Outdoor Living Experts Strive to Exceed Your Expectations</h4>
<p>
Throughout the entire process, we are here to provide you with the highest levels of quality, reliability, attention to detail, and professionalism.
</p>
</div>
</div>
<div class="grid-x">
<div class="large-12 cell font-bold font-italic">
<ul class="no-bullet grid-x">
<div class="large-6">
<li class="check">Over 20 Years of Experience</li>
<li class="check">Work Year Round</li>
<li class="check">Owner Operated</li>
</div>
<div class="large-6">
<li class="check">5-Year Guarantee</li>
<li class="check">TrexPro® Platinum Contractors</li>
<li class="check">Fully Licensed and Insured</li>
</div>
</ul>
</div>
<div class="large-12 cell">
<h5 class="font-bold">We’ll build you the deck of your dreams!</h5>
</div>
</div>
</div>
<div class="large-5 card-section cell text-center">
<div id="form-card">
<div class="card-section">
<div class="card-section ">
<h5 id="form-heading">Ready to Start Your Outdoor Project?</h5>
<small class="text-blue">* Indicates Required Questions</small>
</div>
<form class="card-section">
<div class="grid-x grid-margin-x">
<div class="medium-6 cell input-group">
<input class="input-group-field" type="text" t placeholder="First Name*" />
</div>
<div class="medium-6 cell input-group">
<input class="input-group-field" type="text" placeholder="Last Name*" />
</div>
<div class="large-12 cell">
<div class="grid-x">
<div class="input-group">
<input type="email" placeholder="Email*" class="input-group-field" />
</div>
</div>
</div>
<div class="large-12 cell">
<div class="grid-x">
<div class="input-group">
<input type="tel" placeholder="Phone Number*" class="input-group-field" />
</div>
</div>
</div>
</div>
<div class="grid-x">
<div class="large-12 cell input-group">
<textarea rows="3" placeholder="Address*" class="input-group-field"></textarea>
</div>
</div>
<div class="grid-x">
<div class="large-12 cell">
<textarea rows="3" placeholder="Tell us about your project"></textarea>
</div>
</div>
<div class="grid-x">
<div class="large-12 cell">
<button class="button bg-blue expanded">GET STARTED</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<div class="grid-x bg-blue text-center">
<div class="grid-container">
<div class="grid-x">
<div class="large-12 cell card-section">
<h4>Contact Cedar Works Today to Get Started on<br> Your Next Deck or Outdoor Living Project!</h4>
</div>
<div class="large-12 cell card-section">
<h5 class="font-bold">(248) 365-7738</h5>
</div>
</div>
</div>
</div>
<footer id="footer" class="grid-x text-center card-section">
<div class="large-12">
<div class="cell">
<p>
<small>
The contents of this webpage are Copyright © 2020 Cedar Works Deck Builders. All Rights Reserved.
</small>
</p>
<p>
<small>
<a class="text-underline" href="#">Web Design</a> - <a class="text-underline" href="#">Manage</a> - <a class="text-underline" href="#">Privacy</a>
</small>
</p>
</div>
</div>
</footer>
</main>
</body>
</html>