/
engineering.html
246 lines (244 loc) · 10 KB
/
engineering.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
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>Engineering - Igloo Refrigerator Parts Inc</title>
<meta name="description" content="Igloo Refrigerator Parts Inc – Engineering" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="shortcut icon" href="favicon.ico" />
<link rel="stylesheet" href="css/all.css" />
<link rel="stylesheet" media="print" href="css/print.css" />
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body id="pageEngineering" class="iglooRefrigeratorSite en-us"><!-- ID (page-specific) and class (site-wide) for easier creation of user style sheets. Also a class for language/country combination for localization edge case. -->
<a id="skip" href="#main">Skip to content</a>
<header>
<nav>
<div class="wrapper">
<h1 class="fLeft"><a title="Igloo Homepage" href="index.html"><img alt="Igloo Homepage" src="i/logo.png" width="132" height="46" /></a></h1>
<ul class="fRight">
<li class="fLeft"><a href="index.html">Home</a></li>
<li class="active fLeft"><a href="engineering.html">Engineering Services</a></li>
<li class="fLeft"><a href="#">Giving Back</a></li>
<li class="fLeft"><a href="#">Press Centre</a></li>
<li class="fLeft"><a href="#">Customer Services</a></li>
<li class="fLeft"><a href="#">Careers</a></li>
<li class="fLeft"><a href="#">Store</a></li>
</ul>
</div><!-- end .wrapper -->
</nav>
</header>
<div class="wrapper">
<section id="top" class="clearfix">
<div class="intro span-12 fLeft">
<h1>About Our Engineering Services</h1>
<p>We've repaired more refrigerators than you've had cold dinners, and then some. Whether it's the cooling requirements of your home, boat, caravan or business we'll never leave you out in the cold, or give you a frosty reception. Our cool engineers will melt your hearts.</p>
</div>
<div class="cta fRight">
<h2>Book an engineer</h2>
<p>Having freezer problems? Book online to have an engineer come over your house or business.</p>
<a class="button" href="#">Book an engineer now</a>
</div>
</section>
<div id="main" class="span-18 fLeft">
<section class="clearfix">
<h2>The Services</h2>
<div class="span-6 fLeft">
<div class="box serviceBox">
<h3><a href="#">Energy efficiency assessment</a></h3>
<p>We'll come to your house and give you some handy tips on how to save money, and the planet. We' ll say yes to a cup of tea.</p>
<ul>
<li class="fLeft"><a href="#">Home assessment</a></li>
<li class="fLeft"><a href="#">Business assessment</a></li>
</ul>
</div>
</div><!-- end .box.service-box -->
<div class="span-6 fLeft">
<div class="box serviceBox">
<h3><a href="#">Your private engineer</a></h3>
<p>Do you have a company with lots of refrigerators? Have an on-call engineer, ready to pop in any time to fix your icy problems.</p>
<ul>
<li class="fLeft"><a href="#">Engineer for your home</a></li>
<li class="fLeft"><a href="#">Engineer for your business</a></li>
</ul>
</div>
</div><!-- end .box.service-box -->
<div class="span-6 fLeft last">
<div class="box serviceBox">
<h3><a href="#">Build an igloo</a></h3>
<p>Have you ever dreamed of having your own igloo? We'll build you your very own customized igloo, whether you're 8 or 80.</p>
<ul>
<li class="fLeft"><a href="#">An igloo for you</a></li>
<li class="fLeft"><a href="#">An igloo for your business</a></li>
</ul>
</div>
</div><!-- end .box.service-box -->
</section>
<section class="clearfix">
<h2>Other Services</h2>
<div class="span-6 fLeft">
<div class="box serviceBox">
<h3><a href="#">Igloo architecture</a></h3>
<p>Planning an ambitious igloo project? We've done it all before, and would be only too happy to share our experiences with you.</p>
<ul>
<li class="fLeft"><a href="#">Igloo architect</a></li>
<li class="fLeft"><a href="#">Igloo architect & builders</a></li>
</ul>
</div>
</div><!-- end .box.service-box -->
<div class="span-6 fLeft">
<div class="box serviceBox">
<h3><a href="#">Zoo environments</a></h3>
<p>Panicking about exactly where you're going to put that polar bear? We can be with you in 24 hours, anywhere in the world.</p>
<ul>
<li class="fLeft"><a href="#">Polar bear pens</a></li>
<li class="fLeft"><a href="#">Penguin shelter</a></li>
</ul>
</div>
</div><!-- end .box.service-box -->
<div class="span-6 fLeft last">
<div class="box serviceBox">
<h3><a href="#">Ice hotels</a></h3>
<p>Fed up with boring holiday destinations? We guarantee you've definitely never stayed anywhere cooler than this.</p>
<ul>
<li class="fLeft"><a href="#">Book a room now</a></li>
<li class="fLeft"><a href="#">Build your own ice hotel</a></li>
</ul>
</div>
</div><!-- end .box.service-box -->
</section>
<section class="clearfix">
<h2>Engineering Services Packages</h2>
<table>
<thead>
<tr>
<td></td>
<th scope="col">Snowflake</th>
<th scope="col">Icicle</th>
<th scope="col">Snowball</th>
<th scope="col">Avalanche</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Price</th>
<td><b>$29</b>/month</td>
<td><b>$49</b>/month</td>
<td><b>$99</b>/month</td>
<td><b>$199</b>/month</td>
</tr>
<tr>
<td></td>
<td><a class="button" href="#">Sign up<span class="accessibility"> for our Snowflake engineering services package</span></a></td>
<td><a class="button" href="#">Sign up<span class="accessibility"> for our Snowflake engineering services package</span></a></td>
<td><a class="button" href="#">Sign up<span class="accessibility"> for our Snowflake engineering services package</span></a></td>
<td><a class="button" href="#">Sign up<span class="accessibility"> for our Snowflake engineering services package</span></a></td>
</tr>
</tfoot>
<tbody>
<tr>
<th>Cover</th>
<td>Basic</td>
<td>Basic + Accidental</td>
<td>Everything</td>
<td>Everything</td>
</tr>
<tr>
<th>Leadtime</th>
<td>48 hours</td>
<td>24 hours</td>
<td>12 hours</td>
<td>6 hours</td>
</tr>
<tr>
<th>Refrigerators</th>
<td><img src="i/tick.png" width="17" height="16" alt="Included" /></td>
<td><img src="i/tick.png" width="17" height="16" alt="Included" /></td>
<td><img src="i/tick.png" width="17" height="16" alt="Included" /></td>
<td><img src="i/tick.png" width="17" height="16" alt="Included" /></td>
</tr>
<tr>
<th>Freezers</th>
<td> </td>
<td><img src="i/tick.png" width="17" height="16" alt="Included" /></td>
<td><img src="i/tick.png" width="17" height="16" alt="Included" /></td>
<td><img src="i/tick.png" width="17" height="16" alt="Included" /></td>
</tr>
<tr>
<th>Igloos</th>
<td> </td>
<td> </td>
<td><img src="i/tick.png" width="17" height="16" alt="Included" /></td>
<td><img src="i/tick.png" width="17" height="16" alt="Included" /></td>
</tr>
<tr>
<th>Ice Hotels</th>
<td> </td>
<td> </td>
<td> </td>
<td><img src="i/tick.png" width="17" height="16" alt="Included" /></td>
</tr>
<tr>
<th>Polar Bear Pens</th>
<td> </td>
<td> </td>
<td> </td>
<td><img src="i/tick.png" width="17" height="16" alt="Included" /></td>
</tr>
<tr>
<th>Penguin Shelters</th>
<td> </td>
<td> </td>
<td> </td>
<td><img src="i/tick.png" width="17" height="16" alt="Included" /></td>
</tr>
</tbody>
</table>
</section><!-- end .col3 -->
</div><!-- end #main -->
<div id="sec" class="span-6 fRight last">
<div id="search" class="box">
<form action="http://example.org/search">
<label class="accessibility" for="searchInput">Search</label>
<input id="searchInput" type="search" placeholder="Search" />
</form>
</div><!-- end #search -->
<section>
<div class="box">
<h2>Get in Touch!</h2>
<p>You can give us a call at: <br />
<span class="tel">0800-IGLOO-PARTS</span></p>
<p>Email us at: <br />
<a href="mailto:hi@igloorefrigeratorparts.com">hi@igloorefrigeratorparts.com</a></p>
<p>Or visit our offices at: <br />
<span class="fn">Igloo Refrigerator Parts Inc</span> <br />
<span class="adr">
<span class="street-address">1 High Street</span><br />
<span class="region">Reykjavík</span> <span class="postal-code">1000</span><br />
<span class="country-name">Iceland</span>
</span>
</p>
</div><!-- .box -->
</section>
</div><!-- end #sec -->
</div><!-- end .wrapper -->
<footer>
<div class="wrapper">
<ul class="fRight">
<li><a href="#">Help</a></li>
<li><a href="#">Terms of Service</a></li>
<li><a href="#">Privacy Policy</a></li>
</ul>
<p class="copy">© 2011 Igloo Refrigerator Parts Inc</p>
<p id="book">This is a fictitious company. This website was created to accompany the book <a href="http://www.procssforhightrafficwebsites.com">“Pro CSS for High Traffic Websites”</a>.<br />
© 2011 Antony Kennedy and Inayaili de León.<br />
Photography: <a href="http://www.flickr.com/photos/paddydonnelly/sets/72157624787579407/">Paddy Donnelly</a>.</p>
</div><!-- end .wrapper -->
</footer>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>