/
index.html
162 lines (162 loc) · 7.9 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
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>Igloo Refrigerator Parts Inc</title>
<meta name="description" content="Igloo Refrigerator Parts Inc – Igloo is the best for the planet" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="shortcut icon" href="favicon.ico" />
<link rel="stylesheet" type="text/css" 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="pageHome" 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>
<div class="planet" id="masthead">
<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="active fLeft"><a href="index.html">Home</a></li>
<li class="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">
<div class="banner">
<h2><img src="i/text/igloo-is-the-best-for-the-planet.png" width="453" height="51" alt="Igloo is the best for the planet" /></h2>
<p>By working with Igloo, not only are you saving money, you will also be <br />saving the planet. One duck at a time.</p>
<a class="button" href="#">How are we helping?</a>
</div><!-- end .banner -->
</div>
</div>
<div class="wrapper">
<div id="main" class="span-18 fLeft">
<section>
<div id="bestEngAward" class="clearfix">
<blockquote class="fRight">
<p>Igloo is great: it keeps innovating and clients love it. We had no problem giving it the award for the 13th consecutive year.</p>
<cite>Mr Johnson, President of the Engineering Committee</cite>
</blockquote>
<h2 class="fLeft">Best Engineering <br />Service 2010</h2>
<p class="fLeft"><a href="#">See the photos of the celebratory cake!</a></p>
</div>
</section>
<section class="clearfix">
<h2>Featured 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>
<div class="col3 clearfix hfeed">
<h2>From the Press Center</h2>
<article class="firstArt fLeft hentry">
<img src="i/press-01.jpg" width="203" height="132" alt="John, from sales, trying to climb down a hole" />
<h3 class="entry-title"><a rel="bookmark" href="#">Notes from Iceland</a></h3>
<p class="entry-content">Our marketing team travelled to the Kerling mountains in February, with hilarious consequences…</p>
<time class="published" datetime="2011-03-10T12:43:00Z" pubdate>March 10, 2011</time>
</article>
<article class="fLeft hentry">
<img src="i/press-02.jpg" width="203" height="131" alt="Miriam's sharp boot piercing the ice" />
<h3 class="entry-title"><a href="#">Charity Ice Trek</a></h3>
<p class="entry-content">Igloo employees were challenged to go trekking through the ice for charity. See how we got on.</p>
<time class="published" datetime="2011-02-28T19:07:15Z" pubdate>February 28, 2011</time>
</article>
<article class="fLeft lastArt hentry">
<img src="i/press-03.jpg" width="203" height="131" alt="The icy landscape of Iceland" />
<h3 class="entry-title"><a href="#">Our Home</a></h3>
<p class="entry-content">Iceland is home to Igloo, but many other wonders too. Let us introduce you to the marvels of Reykjavík.</p>
<time class="published" datetime="2011-02-28T05:20:11Z" pubdate>December 28, 2010</time>
</article>
</div>
</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 vcard">
<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>
</section>
<section>
<div class="box" id="aboutBox">
<h2>About Igloo</h2>
<p>Igloo Refrigerator Parts Inc came from humble beginnings. Our founder, Mr Snowy, started repairing abandoned freezers and refrigerators at the age of 9, in his daddy's barn. It was the only way he could afford to keep his bottles of soda cold.</p>
<p>Today Igloo gives back to the community that helped it grow.</p>
<p><a href="#">Read Mr Snowy's story</a></p>
</div>
</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>