Added a 'Recommended' section
[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
73f66771
RL
36 <span class="share_wrapper">
37 <a href="https://fsf.org/share"><img class="share" src="images/share.png" alt="share" /></a>
38 </span>
39
32d56408 40 <span class="join_wrapper">
73f66771 41 <a href="http://fsf.org/jfb"><img class="join" src="images/join.png" alt="join" /></a>
32d56408
RL
42 </span>
43 </div>
4b239f9e 44
82460b03
RL
45 <div class="intro">
46
47 <div class="intro_img">
48 <img src="images/banner.png" alt="Giving Guide" />
49 </div>
50 <div class="intro_wrapper">
5889c064 51 <h2>Are you giving your loved ones holiday gifts they can use freely?</h2>
82460b03
RL
52 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae nisl
53 et lacus vestibulum scelerisque. Fusce vitae vestibulum mauris, quis
54 eleifend turpis. Mauris placerat laoreet nisi, nec pellentesque magna
55 gravida id. Nulla nisi est, auctor in arcu eu, sodales condimentum elit.
56 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel
57 gravida risus, non porttitor nibh. Suspendisse mattis maximus mauris,
58 ut ullamcorper turpis commodo non. Aenean a condimentum quam, ac finibus
59 erat. Duis iaculis iaculis diam, sit amet rutrum nisl lobortis ut.
60 Sed accumsan dolor id lectus pretium, at semper tellus dictum. Proin
61 fringilla efficitur justo, et posuere metus aliquam vestibulum.
62 Vivamus ullamcorper nulla in urna mollis, a bibendum erat tempus.
63 Integer luctus neque non magna aliquam congue. Nullam gravida
64 lectus urna, ut vulputate elit lobortis non.
65 </p>
32d56408 66
82460b03
RL
67 </div>
68 </div>
4b239f9e
RL
69 </div>
70 </div>
afb35b89 71
08daf010 72 <!--We compare different products from here-->
afb35b89 73
b190b1f5
RL
74 <div class="comparisons">
75 <div class="section_wrapper">
76 <h3 class="main_title">Operating System: Give the gift of free, flexible, and ethical computing</h3>
afb35b89 77
b190b1f5
RL
78 <div class="free">
79 <div class="product">
73f66771 80 <img class="good" src="images/good.png" alt="good"/>
b190b1f5
RL
81 <img class="product_img" src="images/linux.png" alt="Linux"/>
82 </div>
afb35b89 83
b190b1f5
RL
84 <h4 class="title">Fedora</h4>
85 <ul>
86 <li>Completely free operating system: transparent and modifiable</li>
87 <li>Break the cycle of forced upgrades and planned obsolescence</li>
88 <li>Comes with all the software you need and an easy software manager to find more.</li>
89 </ul>
c8033ceb 90
b190b1f5 91 <div class="buy">
c8033ceb 92
f5810b45 93 <a href="http://fedoraproject.org/"><img src="images/download.png" alt="Download" /></a>
c8033ceb 94
b190b1f5 95 </div>
c8033ceb 96
c8033ceb
RL
97 </div>
98
b190b1f5
RL
99 <div class="proprietary">
100 <div class="product">
101 <img class="bad" src="images/bad.png" alt="bad"/>
102 <img class="product_img" src="images/windows.png" alt="Windows"/>
103 </div>
c8033ceb 104
b190b1f5
RL
105 <h4 class="title">Windows</h4>
106 <ul>
107 <li>Proprietary software that profits from controlling how you use your computer</li>
108 <li>Invades privacy and exposes personal data to Microsoft, <a href="http://www.theguardian.com/world/2013/sep/05/nsa-how-to-remain-secure-surveillance">the NSA</a>, and other malicious attackers</li>
109 <li>Dependent on mandatory upgrades and devices that don't support older versions of Windows</li>
110 </ul>
c8033ceb 111
b190b1f5
RL
112 <div class="avoid">
113
114 <img src="images/avoid.png" alt="avoid" />
c8033ceb 115
b190b1f5 116 </div>
c8033ceb
RL
117 </div>
118 </div>
b190b1f5 119 </div>
c8033ceb 120
b190b1f5
RL
121 <div class="comparisons">
122 <div class="section_wrapper">
123 <h3 class="main_title">Operating System: Give the gift of free, flexible, and ethical computing</h3>
c8033ceb 124
b190b1f5
RL
125 <div class="free">
126 <div class="product">
73f66771 127 <img class="good" src="images/good.png" alt="good"/>
b190b1f5
RL
128 <img class="product_img" src="images/linux.png" alt="Linux"/>
129 </div>
c8033ceb 130
b190b1f5
RL
131 <h4 class="title">Fedora</h4>
132 <ul>
133 <li>Completely free operating system: transparent and modifiable</li>
134 <li>Break the cycle of forced upgrades and planned obsolescence</li>
135 <li>Comes with all the software you need and an easy software manager to find more.</li>
136 </ul>
c8033ceb 137
b190b1f5 138 <div class="buy">
c8033ceb 139
f5810b45 140 <a href="http://fedoraproject.org/"><img src="images/buy.png" alt="Buy" /></a>
c8033ceb 141
b190b1f5 142 </div>
c8033ceb
RL
143
144 </div>
145
b190b1f5
RL
146 <div class="proprietary">
147 <div class="product">
148 <img class="bad" src="images/bad.png" alt="bad"/>
149 <img class="product_img" src="images/windows.png" alt="Windows"/>
150 </div>
c8033ceb 151
b190b1f5
RL
152 <h4 class="title">Windows</h4>
153 <ul>
154 <li>Proprietary software that profits from controlling how you use your computer</li>
155 <li>Invades privacy and exposes personal data to Microsoft, <a href="http://www.theguardian.com/world/2013/sep/05/nsa-how-to-remain-secure-surveillance">the NSA</a>, and other malicious attackers</li>
156 <li>Dependent on mandatory upgrades and devices that don't support older versions of Windows</li>
157 </ul>
c8033ceb 158
b190b1f5 159 <div class="avoid">
c8033ceb 160
b190b1f5 161 <img src="images/avoid.png" alt="avoid" />
c8033ceb 162
b190b1f5 163 </div>
c8033ceb
RL
164 </div>
165 </div>
b190b1f5 166 </div>
c8033ceb 167
b190b1f5
RL
168 <div class="comparisons">
169 <div class="section_wrapper">
c8033ceb
RL
170 <h3 class="main_title">Operating System: Give the gift of free, flexible, and ethical computing</h3>
171
172 <div class="free">
173 <div class="product">
73f66771 174 <img class="good" src="images/good.png" alt="good"/>
c8033ceb
RL
175 <img class="product_img" src="images/linux.png" alt="Linux"/>
176 </div>
177
178 <h4 class="title">Fedora</h4>
179 <ul>
180 <li>Completely free operating system: transparent and modifiable</li>
181 <li>Break the cycle of forced upgrades and planned obsolescence</li>
182 <li>Comes with all the software you need and an easy software manager to find more.</li>
183 </ul>
184
185 <div class="buy">
186
f5810b45 187 <a href="http://fedoraproject.org/"><img src="images/download.png" alt="Download" /></a>
c8033ceb
RL
188
189 </div>
190
191 </div>
192
193 <div class="proprietary">
194 <div class="product">
195 <img class="bad" src="images/bad.png" alt="bad"/>
196 <img class="product_img" src="images/windows.png" alt="Windows"/>
197 </div>
198
199 <h4 class="title">Windows</h4>
200 <ul>
201 <li>Proprietary software that profits from controlling how you use your computer</li>
202 <li>Invades privacy and exposes personal data to Microsoft, <a href="http://www.theguardian.com/world/2013/sep/05/nsa-how-to-remain-secure-surveillance">the NSA</a>, and other malicious attackers</li>
203 <li>Dependent on mandatory upgrades and devices that don't support older versions of Windows</li>
204 </ul>
205
206 <div class="avoid">
207
208 <img src="images/avoid.png" alt="avoid" />
209
210 </div>
211 </div>
b190b1f5
RL
212 </div>
213 </div>
73f66771 214
f5810b45
RL
215 <div class="recommended">
216 <h3 class="recommend_title">Recomended Products</h3>
217
218 <div class="recommend_wrapper">
219 <div class="recommended_product">
220 <img class="recommended_product_img" src="images/Linux.png" alt="Linux"/>
221 <h4 class="title">Fedora</h4>
222 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
223 <div class="buy">
224 <a href="http://fedoraproject.org/"><img src="images/buy.png" alt="Buy" /></a>
225 </div>
226 </div>
227
228 <div class="recommended_product">
229 <img class="recommended_product_img" src="images/Linux.png" alt="Linux"/>
230 <h4 class="title">Fedora</h4>
231 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
232 <div class="buy">
233 <a href="http://fedoraproject.org/"><img src="images/download.png" alt="Download" /></a>
234 </div>
235 </div>
236
237 <div class="recommended_product">
238 <img class="recommended_product_img" src="images/Linux.png" alt="Linux"/>
239 <h4 class="title">Fedora</h4>
240 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
241 <div class="buy">
242 <a href="http://fedoraproject.org/"><img src="images/buy.png" alt="Buy" /></a>
243 </div>
244 </div>
245 </div>
246
247 <div class="recommend_wrapper">
248 <div class="recommended_product">
249 <img class="recommended_product_img" src="images/Linux.png" alt="Linux"/>
250 <h4 class="title">Fedora</h4>
251 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
252 <div class="buy">
253 <a href="http://fedoraproject.org/"><img src="images/buy.png" alt="Buy" /></a>
254 </div>
255 </div>
256
257 <div class="recommended_product">
258 <img class="recommended_product_img" src="images/Linux.png" alt="Linux"/>
259 <h4 class="title">Fedora</h4>
260 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
261 <div class="buy">
262 <a href="http://fedoraproject.org/"><img src="images/download.png" alt="Download" /></a>
263 </div>
264 </div>
265
266 <div class="recommended_product">
267 <img class="recommended_product_img" src="images/Linux.png" alt="Linux"/>
268 <h4 class="title">Fedora</h4>
269 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
270 <div class="buy">
271 <a href="http://fedoraproject.org/"><img src="images/buy.png" alt="Buy" /></a>
272 </div>
273 </div>
274 </div>
275 </div>
73f66771 276
d5121665 277 </body>
afb35b89 278
73f66771
RL
279 <footer>
280
281
282 </footer>
d5121665 283</html>