Added 'Share' button, fixed 'Buy/avoid' buttons, added img template, removed old img
[fsf-giving-guide.git] / givingguide.html
CommitLineData
d5121665 1<!DOCTYPE html>
afb35b89 2<html>
d5121665
RL
3 <head>
4
b190b1f5 5 <title> 2014 Holiday Giving Guide | Free Software Foundation | Working together for free software </title>
d5121665 6
4b239f9e
RL
7 <meta charset="UTF-8">
8
d5121665
RL
9 <!--FIXME: Is this necessary?-->
10 <link rel="copyright" title="Copyright information" href="http://creativecommons.org/licenses/by-nd/3.0/rdf">
b190b1f5 11 <link rel="author" title="Author information" href="http://www.fsf.org/about/staff">
afb35b89 12
d5121665
RL
13 <!--Stylesheets-->
14 <link rel="stylesheet" type="text/css" href="reset.css">
15 <link rel="stylesheet" type="text/css" href="stylesheet.css">
16
17 </head>
afb35b89 18
d5121665 19 <body>
08daf010 20 <div class="header">
32d56408
RL
21 <div class="header_wrapper">
22 <div class="navbar_wrapper">
23 <span class="logo_wrapper">
73f66771 24 <a href="https://www.fsf.org/"><img class="logo" src="images/logo.png" alt="logo" /></a>
32d56408 25 </span>
4b239f9e 26
32d56408
RL
27 <div class="navbar">
28 <ul>
29 <li><a href="https://www.fsf.org/about/">About the FSF</a></li>
30 <li><a href="https://www.fsf.org/campaigns/">Campaigns</a></li>
31 <li><a href="https://www.fsf.org/licensing/">Software Licensing</a></li>
32 <li><a href="http://shop.fsf.org/">Shop</a></li>
33 </ul>
34 </div>
35
36 <span class="join_wrapper">
73f66771 37 <a href="http://fsf.org/jfb"><img class="join" src="images/join.png" alt="join" /></a>
32d56408
RL
38 </span>
39 </div>
4b239f9e 40
82460b03
RL
41 <div class="intro">
42
43 <div class="intro_img">
44 <img src="images/banner.png" alt="Giving Guide" />
45 </div>
46 <div class="intro_wrapper">
5889c064 47 <h2>Are you giving your loved ones holiday gifts they can use freely?</h2>
82460b03
RL
48 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae nisl
49 et lacus vestibulum scelerisque. Fusce vitae vestibulum mauris, quis
50 eleifend turpis. Mauris placerat laoreet nisi, nec pellentesque magna
51 gravida id. Nulla nisi est, auctor in arcu eu, sodales condimentum elit.
52 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel
53 gravida risus, non porttitor nibh. Suspendisse mattis maximus mauris,
54 ut ullamcorper turpis commodo non. Aenean a condimentum quam, ac finibus
55 erat. Duis iaculis iaculis diam, sit amet rutrum nisl lobortis ut.
56 Sed accumsan dolor id lectus pretium, at semper tellus dictum. Proin
57 fringilla efficitur justo, et posuere metus aliquam vestibulum.
58 Vivamus ullamcorper nulla in urna mollis, a bibendum erat tempus.
59 Integer luctus neque non magna aliquam congue. Nullam gravida
60 lectus urna, ut vulputate elit lobortis non.
61 </p>
32d56408 62
82460b03
RL
63 </div>
64 </div>
4b239f9e
RL
65 </div>
66 </div>
afb35b89 67
dd0353ce
RL
68 <div class="share">
69 <span class="share_wrapper">
70 <a href="https://fsf.org/share">Share</a>
71 </span>
72 </div>
73
08daf010 74 <!--We compare different products from here-->
afb35b89 75
dd0353ce
RL
76 <div class="comparisons">
77 <div class="section_wrapper">
78 <h3 class="main_title">Operating System</h3>
79
80 <div class="free">
81 <div class="product">
82 <img class="good" src="images/good.png" alt="good"/>
83 <img class="product_img" src="images/linux.png" alt="Linux"/>
84 </div>
85
86 <h4 class="title">Trisquel</h4>
87 <ul>
88 <li>
89 Completely free operating system:
90 transparent and modifiable
91 </li>
92
93 <li>
94 Break the cycle of forced upgrades and
95 planned obsolescence
96 </li>
97
98 <li>
99 Comes with all the software you need and an
100 easy software manager to find more.
101 </li>
102 <li>Works great with the Wi-Fi adapters in this guide.</li>
103 </ul>
104
105
106
107 </div>
108
109 <div class="proprietary">
110 <div class="product">
111 <img class="bad" src="images/bad.png" alt="bad"/>
112 <img class="product_img" src="images/windows.png" alt="Windows"/>
113 </div>
114
115 <h4 class="title">Windows</h4>
116 <ul>
117 <li>
118 Proprietary software that profits from
119 controlling how you use your computer
120 </li>
121
122 <li>
123 Invades privacy and exposes personal data to
124 Microsoft,
125 <a href="http://www.theguardian.com/world/2013/sep/05/nsa-how-to-remain-secure-surveillance">
126 the NSA,
127 </a> and other malicious attackers
128 </li>
129
130 <li>
131 Dependent on mandatory upgrades and devices
132 that don't support older versions of Windows
133 </li>
134 </ul>
135
136
137 </div>
138
139 <div class="buy_avoid">
140 <div class="buy_avoid_wrapper">
141 <div class="buy">
142 <a href="http://fedoraproject.org/"><img src="images/download.png" alt="Download" /></a>
143 </div>
144
145 <div class="avoid">
146 <img src="images/avoid.png" alt="avoid" />
c8033ceb 147 </div>
dd0353ce
RL
148 </div>
149 </div>
c8033ceb 150
dd0353ce 151 </div>
cecbfd9a
ZR
152
153
c8033ceb 154
dd0353ce
RL
155 <div class="section_wrapper">
156 <h3 class="main_title">3D Printers</h3>
c8033ceb 157
dd0353ce
RL
158 <div class="free">
159 <div class="product">
160 <img class="good" src="images/good.png" alt="good"/>
161 <img class="product_img" src="//static.fsf.org/nosvn/images/taz4.png" alt="TAZ 4.0"/>
162 </div>
cecbfd9a 163
dd0353ce
RL
164 <h4 class="title">Lulzbot TAZ 4.0</h4>
165 <ul>
166 <li>
167 <a href="https://www.fsf.org/resources/hw/endorsement/respects-your-freedom">
168 Respects Your Freedom
169 </a>
170
171 certified by the Free Software Foundation
172 </li>
173
174 <li>
175 Powered by free software, making 3D printing
176 more accessible and encouraging innovation
177 </li>
178
179 <li>
180 Learn more about the Lulzbot at
181 <a href="http://www.lulzbot.com/">
182 www.lulzbot.com
183 </a>
184 </li>
185 </ul>
186
187 </div>
188
189 <div class="proprietary">
190 <div class="product">
191 <img class="bad" src="images/bad.png" alt="bad"/>
192 <img class="product_img" src="//static.fsf.org/fsforg/img/MakerbotPrepped.png" alt="Makerbot Replicator 2"/>
193 </div>
194
195 <h4 class="title">Makerbot Replicator 2</h4>
196 <ul>
197 <li>
198 MakerWare software is proprietary,
199 restricting freedom and stifling innovation
200 </li>
201
202 <li>
203 Hardware patents threaten free printers like
204 the Lulzbot
205 </li>
206
207 <li>
208 Recently announced an increasingly
209 proprietary approach, further distancing
210 itself from the free software community
211 </li>
212 </ul>
213
214 </div>
215
216 <div class="buy_avoid">
217 <div class="buy_avoid_wrapper">
218 <div class="buy">
219 <a href="http://fedoraproject.org/"><img src="images/download.png" alt="Download" /></a>
220 </div>
cecbfd9a 221
dd0353ce
RL
222 <div class="avoid">
223 <img src="images/avoid.png" alt="avoid" />
224 </div>
225 </div>
226 </div>
227 </div>
cecbfd9a 228
c8033ceb 229
c8033ceb 230
c8033ceb 231
dd0353ce
RL
232 <div class="section_wrapper">
233 <h3 class="main_title">Ebooks</h3>
c8033ceb 234
dd0353ce
RL
235 <div class="free">
236 <div class="product">
237 <img class="good" src="images/good.png" alt="good"/>
238 <img class="product_img" src="//static.fsf.org/fsforg/img/ProjectGutenbergPrepped.png" alt="Project Gutenberg"/>
239 </div>
c8033ceb 240
dd0353ce
RL
241 <h4 class="title">Project Gutenberg</h4>
242
243 <ul>
244 <li>
245 The original purveyor of DRM-free eBooks
246 </li>
247
248 <li>
249 Enjoy the freedom to read your ebooks on any
250 device
251 </li>
252
253 <li>
254 All of the ebooks on Project Gutenberg,
255 including classics like Peter Pan and Huck
256 Finn, are gratis
257 </li>
258
259 <li>
260 Pick out the perfect books for the whole
261 family at
262 <a href="http://www.gutenberg.org/">
263 www.gutenberg.org
264 </a>
265 or from other
266 <a href="http://www.defectivebydesign.org/guide/ebooks">
267 DRM-free ebooks sites
268 </a>
269 </li>
270 </ul>
c8033ceb 271
dd0353ce 272 </div>
cecbfd9a 273
dd0353ce
RL
274 <div class="proprietary">
275 <div class="product">
276 <img class="bad" src="images/bad.png" alt="bad"/>
277 <img class="product_img" src="//static.fsf.org/fsforg/img/amazon.jpg" alt="Amazon"/>
278 </div>
cecbfd9a 279
dd0353ce
RL
280 <h4 class="title">Amazon</h4>
281 <ul>
282 <li>
283 Amazon can remotely block or delete
284 individual ebooks or your entire library
285 with no warning or explanation (they've done
286 it before--read about it
287 <a href="http://www.defectivebydesign.org/node/2250">
288 here
289 </a>).
290 </li>
291
292 <li>
293 DRM prevents you from sharing your favorite
294 books with friends, and Amazon uses DRM to
295 <a href="http://www.defectivebydesign.org/faq#harm">
296 maintain their monopoly
297 </a>
298 </li>
299
300 <li>
301 Amazon claims
302 <a href="http://www.defectivebydesign.org/amazon-kindle-swindle">
303 you don't actually own or control your
304 ebooks
305 </a>
306 </li>
307
308 <li>
309 Thanks to DRM, you won't be able to transfer
310 your books to any other reader
311 </li>
312 </ul>
c8033ceb 313
dd0353ce 314 </div>
c8033ceb 315
dd0353ce
RL
316 <div class="buy_avoid">
317 <div class="buy_avoid_wrapper">
318 <div class="buy">
319 <a href="http://fedoraproject.org/"><img src="images/download.png" alt="Download" /></a>
320 </div>
c8033ceb 321
dd0353ce
RL
322 <div class="avoid">
323 <img src="images/avoid.png" alt="avoid" />
324 </div>
325 </div>
b190b1f5 326 </div>
dd0353ce 327 </div>
c8033ceb 328
dd0353ce
RL
329 <div class="section_wrapper">
330 <h3 class="main_title">Mobile OS</h3>
c8033ceb 331
dd0353ce
RL
332 <div class="free">
333 <div class="product">
334 <img class="good" src="images/good.png" alt="good"/>
335 <img class="product_img" src="http://static.fsf.org/nosvn/images/Replicant_logo.png" alt="Replicant"/>
336 </div>
337
338 <h4 class="title">Replicant</h4>
339 <ul>
340 <li>
341 Fully free software mobile OS based on
342 Android
343 </li>
344
345 <li>
346 <a href="http://redmine.replicant.us/projects/replicant/wiki/ReplicantImages">
347 Supported devices
348 </a>
349 include both phones and tablets
350 </li>
c8033ceb 351
dd0353ce
RL
352 <li>
353 Used devices can be purchased, so your
354 dollars won't go to proprietary OS
355 companies.
356 </li>
357 </ul>
c8033ceb 358
dd0353ce
RL
359
360 </div>
361
362 <div class="proprietary">
363 <div class="product">
364 <img class="bad" src="images/bad.png" alt="bad"/>
365 <img class="product_img" src="http://static.fsf.org/nosvn/images/iOS.png" alt="Apple iPhone, iPad and Watch"/>
366 </div>
367
368 <h4 class="title">Apple iPhone, iPad and Watch</h4>
369 <ul>
370 <li>
371 iOS is a fully proprietary operating system,
372 giving Apple ultimate control over devices
373 running it
374 </li>
375
376 <li>
377 Apple uses DRM to block competing software.
378 </li>
379
380 <li>
381 The company claims to take away your freedom
382 <a href="http://www.defectivebydesign.org/blog/1256">
383 for your own good
384 </a>.
385 </li>
386 </ul>
387 </div>
388
389 <div class="buy_avoid">
390 <div class="buy_avoid_wrapper">
391 <div class="buy">
392 <a href="http://fedoraproject.org/"><img src="images/download.png" alt="Download" /></a>
c8033ceb 393 </div>
dd0353ce
RL
394
395 <div class="avoid">
396 <img src="images/avoid.png" alt="avoid" />
c8033ceb 397 </div>
dd0353ce
RL
398 </div>
399 </div>
400 </div>
401 </div>
402
403 <!-- Recommended Section -->
404
f5810b45 405 <div class="recommended">
dd0353ce 406 <h1 class="topic_title">Recomended Products</h1>
f5810b45
RL
407
408 <div class="recommend_wrapper">
409 <div class="recommended_product">
410 <img class="recommended_product_img" src="images/Linux.png" alt="Linux"/>
411 <h4 class="title">Fedora</h4>
412 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
413 <div class="buy">
414 <a href="http://fedoraproject.org/"><img src="images/buy.png" alt="Buy" /></a>
415 </div>
416 </div>
417
418 <div class="recommended_product">
419 <img class="recommended_product_img" src="images/Linux.png" alt="Linux"/>
420 <h4 class="title">Fedora</h4>
421 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
422 <div class="buy">
423 <a href="http://fedoraproject.org/"><img src="images/download.png" alt="Download" /></a>
424 </div>
425 </div>
426
427 <div class="recommended_product">
428 <img class="recommended_product_img" src="images/Linux.png" alt="Linux"/>
429 <h4 class="title">Fedora</h4>
430 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
431 <div class="buy">
432 <a href="http://fedoraproject.org/"><img src="images/buy.png" alt="Buy" /></a>
433 </div>
434 </div>
435 </div>
436
437 <div class="recommend_wrapper">
438 <div class="recommended_product">
439 <img class="recommended_product_img" src="images/Linux.png" alt="Linux"/>
440 <h4 class="title">Fedora</h4>
441 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
442 <div class="buy">
443 <a href="http://fedoraproject.org/"><img src="images/buy.png" alt="Buy" /></a>
444 </div>
445 </div>
446
447 <div class="recommended_product">
448 <img class="recommended_product_img" src="images/Linux.png" alt="Linux"/>
449 <h4 class="title">Fedora</h4>
450 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
451 <div class="buy">
452 <a href="http://fedoraproject.org/"><img src="images/download.png" alt="Download" /></a>
453 </div>
454 </div>
455
456 <div class="recommended_product">
457 <img class="recommended_product_img" src="images/Linux.png" alt="Linux"/>
458 <h4 class="title">Fedora</h4>
459 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
460 <div class="buy">
461 <a href="http://fedoraproject.org/"><img src="images/buy.png" alt="Buy" /></a>
462 </div>
463 </div>
464 </div>
dd0353ce
RL
465 <div class="licenses">
466 <h1 class="topic_title">Licenses</h1>
73f66771 467
dd0353ce
RL
468 </div>
469 </div>
d5121665
RL
470 </body>
471</html>