-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathabout.html
More file actions
300 lines (273 loc) · 12.9 KB
/
Copy pathabout.html
File metadata and controls
300 lines (273 loc) · 12.9 KB
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
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
<link rel="apple-touch-icon" sizes="114x114" href="images/splash/splash-icon.png">
<link rel="apple-touch-startup-image" href="images/splash/splash-screen.png" media="screen and (max-device-width: 320px)" />
<link rel="apple-touch-startup-image" href="images/splash/splash-screen@2x.png" media="(max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2)" />
<meta name="apple-mobile-web-app-capable" content="yes"/>
<title>CeeVee | Mobile Template</title>
<link href="styles/style.css" rel="stylesheet" type="text/css">
<link href="styles/buttons.css" rel="stylesheet" type="text/css">
<link href="styles/retina.css" media="only screen and (-webkit-min-device-pixel-ratio: 2)" rel="stylesheet" />
<link href="styles/slider.css" rel="stylesheet" type="text/css">
<link href="styles/photoswipe.css" rel="stylesheet" type="text/css">
<script src="scripts/jquery-1.7.2.min.js"></script>
<script src="scripts/contact.js"></script>
<script src="scripts/swipe.js"></script>
<script src="scripts/klass.min.js"></script>
<script src="scripts/photoswipe.js"></script>
<script src="scripts/retina.js"></script>
<script src="scripts/custom.js"></script>
</head>
<body>
<div class="header">
<div class="logo">
<a href="index.html"><img class="replace-2x" src="images/logo.png" width="44" alt="img"></a>
<p>CeeVee</p>
<em>Amsterdam, Europe</em>
</div>
<div class="logo-contact">
<a href="tel:+123 456 7890" class="logo-contact-icon"><img src="images/phone.png" width="13" alt="img" class="replace-2x"></a>
<a href="sms:+123 456 7890" class="logo-contact-icon"><img src="images/mail.png" width="13" alt="img" class="replace-2x"></a>
</div>
</div>
<div class="clear"></div>
<div class="decoration first-decoration"></div>
<img class="aspect-ratio" src="images/slider/2.jpg" alt="img">
<div class="container">
<h3 class="container-title">Retina lists? Sure! We have those too!</h3>
<p class="container-text">Lists are amazingly important to show off different things. So, these lists are retina too! Something for everything!</p>
<ul class="icon-lists">
<li class="list-add">Add List</li>
<li class="list-chart">Chart List</li>
<li class="list-chartflip">Chart Flipped List</li>
<li class="list-close">Close List</li>
<li class="list-down">Down List</li>
<li class="list-error">Error List</li>
<li class="list-heart">Heart List</li>
<li class="list-info">Information List</li>
<li class="list-left">Left List</li>
<li class="list-page">Page List</li>
<li class="list-right">Right List</li>
<li class="list-rss">RSS List</li>
<li class="list-search">Search List</li>
<li class="list-staroff">Star Off List</li>
<li class="list-staron">Star On List</li>
<li class="list-twitter">Twitter List</li>
<li class="list-facebook">Facebook List</li>
<li class="list-up">Up List</li>
<li class="list-warning">Warning List</li>
<li class="list-add">Add List</li>
</ul>
</div>
<div class="decoration"></div>
<div class="container">
<h3 class="container-title">Highlights! We have those too!</h3>
<p class="container-text">They are pretty useful when you really want to emphesize something with style!</p>
<p class="highlight shadow"><span class="highlight-orange">Donec vehiculas</span> aliqet justi roncs. Proin sagittis mauris mauris maleda.</p>
<p class="highlight shadow"><span class="highlight-green">Donec vehiculas</span> aliqet justi roncs. Proin sagittis mauris mauris maleda.</p>
<p class="highlight shadow"><span class="highlight-yellow">Donec vehiculas</span> aliqet justi roncs. Proin sagittis mauris mauris maleda.</p>
<p class="highlight last-item shadow"><span class="highlight-gray">Donec vehiculas</span> aliqet justi roncs. Proin sagittis mauris mauris maleda.</p>
</div>
<div class="decoration"></div>
<div class="container last-item">
<a href="#" class="button grey">But</a>
<a href="#" class="button yellow">But</a>
<a href="#" class="button green">But</a>
<a href="#" class="button black">But</a>
<a href="#" class="button red">But</a>
<a href="#" class="button blue">But</a>
<a href="#" class="button gblue">But</a>
<a href="#" class="button purple">But</a>
<a href="#" class="button grey">But</a>
<a href="#" class="button yellow">But</a>
</div>
<div class="decoration"></div>
<div class="container">
<div class="toggle-container">
<a href="#" class="toggle-plus">Click here to expand the toggle!</a>
<div class="toggle-content">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
</div>
</div>
<div class="toggle-container">
<a href="#" class="toggle-arrow">Click here to expand the toggle!</a>
<div class="toggle-content">
<p>
The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested.
Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced
in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.
</p>
</div>
</div>
</div>
<div class="decoration"></div>
<div class="container">
<h3 class="container-title">Full Width Text</h3>
<p class="full-width">
An example of text that expands to the full width of your devices screen. Rotate it and see. Of course, all text does this,
but this paragraph is special!
</p>
</div>
<div class="decoration"></div>
<div class="container">
<h3 class="container-title">Two columns of text</h3>
<p class="column-two-one">Two columns of text? Not a problem! Easy peasy! Meet column one!</p>
<p class="column-two-two">And of course, this is column two! They are floated, and lyquid!</p>
<div class="clear"></div>
</div>
<div class="decoration"></div>
<div class="container">
<h3 class="container-title">Three columns of text</h3>
<p class="column-three-one">Three columns of text? Not a problem! Easy peasy! Meet column one!</p>
<p class="column-three-two">And of course, this is column two! They are floated, and lyquid!</p>
<p class="column-three-three">last but not least, column three! They are floated, and lyquid!</p>
<div class="clear"></div>
</div>
<div class="decoration"></div>
<div class="container">
<div class="notification-box-green">
<a href="#" class="notification-quit-green">x</a>
<img class="notification-icon replace-2x" width="16" src="images/lists/add.png" alt="">
<p class="notification-text">Yes, green is good!</p>
</div>
<div class="notification-box-yellow">
<a href="#" class="notification-quit-yellow">x</a>
<img class="notification-icon replace-2x" width="16" src="images/lists/warning.png" alt="">
<p class="notification-text">Something requires attention!</p>
</div>
<div class="notification-box-blue">
<a href="#" class="notification-quit-blue">x</a>
<img class="notification-icon replace-2x" width="16" src="images/lists/info.png" alt="">
<p class="notification-text">Something interesting!</p>
</div>
<div class="notification-box-red">
<a href="#" class="notification-quit-red">x</a>
<img class="notification-icon replace-2x" width="16" src="images/lists/close.png" alt="">
<p class="notification-text">Attention! Bad things here!</p>
</div>
</div>
<div class="decoration"></div>
<div class="container">
<h3 class="container-title">Icons? Sure! Retina ready!</h3>
<p class="container-text">Icons are awesome, especially since they are made to look even better on retina displays. Yeap! They work on every possible phone, but for the iPhone, they are retina ready!</p>
<span class="icon demo android"></span>
<span class="icon demo addressbook"></span>
<span class="icon demo alert2"></span>
<span class="icon demo alert3"></span>
<span class="icon demo android"></span>
<span class="icon demo arrow-down"></span>
<span class="icon demo arrow-left"></span>
<span class="icon demo arrow-right"></span>
<span class="icon demo arrow-up"></span>
<span class="icon demo bberry"></span>
<span class="icon demo bluetooth"></span>
<span class="icon demo cameras"></span>
<span class="icon demo cart"></span>
<span class="icon demo chalendar"></span>
<span class="icon demo chart"></span>
<span class="icon demo clip"></span>
<span class="icon demo clocks"></span>
<span class="icon demo cloud-down"></span>
<span class="icon demo cloud-up"></span>
<span class="icon demo cog1"></span>
<span class="icon demo cog2"></span>
<span class="icon demo columns"></span>
<span class="icon demo comment"></span>
<span class="icon demo delicious"></span>
<span class="icon demo digg"></span>
<span class="icon demo documents"></span>
<span class="icon demo download"></span>
<span class="icon demo dribble"></span>
<span class="icon demo dropbox"></span>
<span class="icon demo facebook"></span>
<span class="icon demo female"></span>
<span class="icon demo film-strip"></span>
<span class="icon demo fullscreen"></span>
<span class="icon demo go-full"></span>
<span class="icon demo go-normal"></span>
<span class="icon demo graph"></span>
<span class="icon demo headset"></span>
<span class="icon demo highdef"></span>
<span class="icon demo highdef2"></span>
<span class="icon demo home"></span>
<span class="icon demo href"></span>
<span class="icon demo imac"></span>
<span class="icon demo img"></span>
<span class="icon demo img2"></span>
<span class="icon demo ipad"></span>
<span class="icon demo iphone"></span>
<span class="icon demo ipodc"></span>
<span class="icon demo ipodn"></span>
<span class="icon demo laptop"></span>
<span class="icon demo linux"></span>
<span class="icon demo list"></span>
<span class="icon demo list-image"></span>
<span class="icon demo lists"></span>
<span class="icon demo location"></span>
<span class="icon demo lowdef"></span>
<span class="icon demo lowdef2"></span>
<span class="icon demo magnifier"></span>
<span class="icon demo mail"></span>
<span class="icon demo male"></span>
<span class="icon demo mic"></span>
<span class="icon demo mobile"></span>
<span class="icon demo money"></span>
<span class="icon demo mouse"></span>
<span class="icon demo myspace"></span>
<span class="icon demo osx"></span>
<span class="icon demo paypal"></span>
<span class="icon demo pdf-doc"></span>
<span class="icon demo pdf-docs"></span>
<span class="icon demo phone"></span>
<span class="icon demo price"></span>
<span class="icon demo refresh"></span>
<span class="icon demo refresh2"></span>
<span class="icon demo settings"></span>
<span class="icon demo shuffle"></span>
<span class="icon demo sign"></span>
<span class="icon demo skype"></span>
<span class="icon demo speach"></span>
<span class="icon demo speach2"></span>
<span class="icon demo stumble"></span>
<span class="icon demo tags"></span>
<span class="icon demo tumblr"></span>
<span class="icon demo twitter"></span>
<span class="icon demo upload"></span>
<span class="icon demo user"></span>
<span class="icon demo users"></span>
<span class="icon demo vimeo"></span>
<span class="icon demo volume"></span>
<span class="icon demo wifi"></span>
<span class="icon demo win"></span>
<span class="icon demo wp"></span>
<span class="icon demo youtube"></span>
</div>
<div class="decoration"></div>
<p class="copyright">Copyright 2012. All rights reserved!</p>
<div class="navigation">
<div class="navigation-wrapper">
<a href="index.html" class="navigation-item">
<img src="images/nav/info.png" width="21" class="replace-2x" alt="img">
</a>
<a href="about.html" class="navigation-item">
<img class="selected replace-2x" width="9" src="images/nav/selected.png" alt="img">
<img src="images/nav/about.png" width="21" class="replace-2x" alt="img">
</a>
<a href="portfolio.html" class="navigation-item">
<img src="images/nav/portfolio.png" width="21" class="replace-2x" alt="img">
</a>
<a href="contact.html" class="navigation-item">
<img src="images/nav/message.png" width="21" class="replace-2x" alt="img">
</a>
</div>
</div>
<div style="height:50px;"></div>
</body>
</html>