Added 'Share' button, fixed 'Buy/avoid' buttons, added img template, removed old img
[fsf-giving-guide.git] / givingguide.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4
5 <title> 2014 Holiday Giving Guide | Free Software Foundation | Working together for free software </title>
6
7 <meta charset="UTF-8">
8
9 <!--FIXME: Is this necessary?-->
10 <link rel="copyright" title="Copyright information" href="http://creativecommons.org/licenses/by-nd/3.0/rdf">
11 <link rel="author" title="Author information" href="http://www.fsf.org/about/staff">
12
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>
18
19 <body>
20 <div class="header">
21 <div class="header_wrapper">
22 <div class="navbar_wrapper">
23 <span class="logo_wrapper">
24 <a href="https://www.fsf.org/"><img class="logo" src="images/logo.png" alt="logo" /></a>
25 </span>
26
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">
37 <a href="http://fsf.org/jfb"><img class="join" src="images/join.png" alt="join" /></a>
38 </span>
39 </div>
40
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">
47 <h2>Are you giving your loved ones holiday gifts they can use freely?</h2>
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>
62
63 </div>
64 </div>
65 </div>
66 </div>
67
68 <div class="share">
69 <span class="share_wrapper">
70 <a href="https://fsf.org/share">Share</a>
71 </span>
72 </div>
73
74 <!--We compare different products from here-->
75
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" />
147 </div>
148 </div>
149 </div>
150
151 </div>
152
153
154
155 <div class="section_wrapper">
156 <h3 class="main_title">3D Printers</h3>
157
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>
163
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>
221
222 <div class="avoid">
223 <img src="images/avoid.png" alt="avoid" />
224 </div>
225 </div>
226 </div>
227 </div>
228
229
230
231
232 <div class="section_wrapper">
233 <h3 class="main_title">Ebooks</h3>
234
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>
240
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>
271
272 </div>
273
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>
279
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>
313
314 </div>
315
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>
321
322 <div class="avoid">
323 <img src="images/avoid.png" alt="avoid" />
324 </div>
325 </div>
326 </div>
327 </div>
328
329 <div class="section_wrapper">
330 <h3 class="main_title">Mobile OS</h3>
331
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>
351
352 <li>
353 Used devices can be purchased, so your
354 dollars won't go to proprietary OS
355 companies.
356 </li>
357 </ul>
358
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>
393 </div>
394
395 <div class="avoid">
396 <img src="images/avoid.png" alt="avoid" />
397 </div>
398 </div>
399 </div>
400 </div>
401 </div>
402
403 <!-- Recommended Section -->
404
405 <div class="recommended">
406 <h1 class="topic_title">Recomended Products</h1>
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>
465 <div class="licenses">
466 <h1 class="topic_title">Licenses</h1>
467
468 </div>
469 </div>
470 </body>
471 </html>