Fix the navbar once and for all
[fsf-giving-guide.git] / givingguide.html
index 8ba7ca6e55dd58474ce59280e835ab0435e824ba..00382baefdcbce78187c3c460093fa62365db5c3 100755 (executable)
@@ -2,11 +2,13 @@
 <html>
        <head>
 
-               <title> 2014 Holiday Giving Guide | Free Software Foundation | Working together for free software</title>
+               <title> 2014 Holiday Giving Guide | Free Software Foundation | Working together for free software </title>
+
+               <meta charset="UTF-8">
 
                <!--FIXME: Is this necessary?-->
                <link rel="copyright" title="Copyright information" href="http://creativecommons.org/licenses/by-nd/3.0/rdf">
-               <link rel="author" title="Author information" href="http://www.fsf.org/about/staff/">
+               <link rel="author" title="Author information" href="http://www.fsf.org/about/staff">
 
                <!--Stylesheets-->
                <link rel="stylesheet" type="text/css" href="reset.css">
        </head>
 
        <body>
-               <div id="wrapper">
+               <div class="header">
+                       <div class="header_wrapper">
+                                       <div class="navbar_wrapper">
+                                               <span class="logo_wrapper">
+                                                       <a href="https://www.fsf.org/"><img class="logo" src="images/logo.png" alt="Logo" /></a>
+                                               </span>
+
+                                               <div class="navbar">
+                                                       <ul>
+                                                               <li><a href="https://www.fsf.org/about/">About the FSF</a></li>
+                                                               <li><a href="https://www.fsf.org/campaigns/">Campaigns</a></li>
+                                                               <li><a href="https://www.fsf.org/licensing/">Software Licensing</a></li>
+                                                               <li><a href="http://shop.fsf.org/">Shop</a></li>
+                                                       </ul>
+                                               </div>
+
+                                               <span class="join_wrapper">
+                                                       <a href="http://fsf.org/jfb"><img class="join" src="images/join.png" alt="Logo" /></a>
+                                               </span>
+                                       </div>
 
-                       <div>
-                               Top banner
-                               <div id="banner">
-                                       <img src="images/banner.png" alt="Main Banner">
+                               <div class="intro">
+
+                                       <div class="intro_img">
+                                               <img src="images/banner.png" alt="Giving Guide" />
+                                       </div>
+                                       <div class="intro_wrapper">
+                                               <h2>Are you giving your loved ones holiday gifts they can use freely,
+                                                       or gifts which put someone else in control?</h2>
+                                               <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae nisl
+                                                       et lacus vestibulum scelerisque. Fusce vitae vestibulum mauris, quis
+                                                       eleifend turpis. Mauris placerat laoreet nisi, nec pellentesque magna
+                                                       gravida id. Nulla nisi est, auctor in arcu eu, sodales condimentum elit.
+                                                       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel
+                                                       gravida risus, non porttitor nibh. Suspendisse mattis maximus mauris,
+                                                       ut ullamcorper turpis commodo non. Aenean a condimentum quam, ac finibus
+                                                       erat. Duis iaculis iaculis diam, sit amet rutrum nisl lobortis ut.
+                                                       Sed accumsan dolor id lectus pretium, at semper tellus dictum. Proin
+                                                       fringilla efficitur justo, et posuere metus aliquam vestibulum.
+                                                       Vivamus ullamcorper nulla in urna mollis, a bibendum erat tempus.
+                                                       Integer luctus neque non magna aliquam congue. Nullam gravida
+                                                       lectus urna, ut vulputate elit lobortis non.
+                                               </p>
+
+                                               </div>
                                </div>
+                       </div>
+               </div>
+<!--           <div class="wrapper">
+
+       <div>
+               <h1 class="intro_phrase">SAY SOMETHING CLEVER ABOUT GIVING GUIDE 2014</h1>
+
+               <h2>Are you giving your loved ones holiday gifts they can use freely, or
+                       gifts which put someone else in control?</h2>
+
+               <p>
+                       Electronics are popular gifts for the holidays, but people often overlook
+                       the restrictions that manufacturers slip under the wrapping paper.
+                       Companies like Microsoft and Apple can and will use Digital
+                       Restrictions Management (DRM) to prevent your loved ones from
+                       sharing apps on the laptop you got them or remixing the songs on
+                       their expensive new iPad. If the recipient of your gift is as
+                       unlucky as one woman last year,
+                       <a href="http://www.defectivebydesign.org/node/2250">
+                               Amazon might even block all the books on their Kindle and refuse to explain why</a>.
+                               Companies want us to accept this kind of intrusive control,
+                               but when you think about, it's unethical (and annoying!).
+               </p>
+
+               <h2>Give freely</h2>
+
+               <p>
+                       The good news is, for every device that uses DRM or has a remote
+                       "kill switch" like the Kindle, ethical companies have made a better
+                       one that doesn't, one that your loved ones will be free to enjoy however
+                        they wish. Here's a list of these smarter gifts, compared with their
+                        more well-known, but more restrictive alternatives. While you're
+                       reading, please remember that donating to a charity in your friend
+                       or family member's name is at least as meaningful as buying them
+                       an electronic device. Some of our favorite charities are the
+                       <a href="http://www.eff.org/">Electronic Frontier Foundation</a>,
+                       <a href="http://www.creativecommons.org/">Creative Commons</a>,
+                       <a href="http://wikimedia.org/">Wikimedia Foundation</a>,
+                       <a href="http://www.sfconservancy.org/">Software Freedom Conservancy</a>,
+                       <a href="http://www.softwarefreedom.org/">Software Freedom Law Center</a>,
+                       <a href="http://www.gnome.org/">GNOME Foundation</a>
+                       and Free Software Foundation.
+               </p>
+               <h2>The Free Software Foundation's Holiday Giving Guide</h2>
+
+               <p>
+                       The gifts in the left column respect your freedom much more than those in the right column.
+               </p>
+
+               <p>
+                       <i>
+                               Please share <a href="#">the Giving Guide</a>
+                               with your friends and family members, especially those that might give you
+                                presents! (We're using the hashtag #givefreely.)
+                       </i>
+               </p>
+
+               <p>
+               To make a really big splash, get some friends together, print the PDF
+               version of the Giving Guide and hand it out near a local store that
+               sells DRM-encumbered products. Be sure to take photos! Send us photos
+               and any questions at <a href="mailto:campaigns@fsf.org">campaigns@fsf.org</a>.
+               </p>
+
+       </div>
 
-                               <h2>Are you giving your loved ones holiday gifts they can use freely, or gifts which put someone else in control?</h2>
+</div> -->
 
-                               <p>
-                                       Electronics are popular gifts for the holidays, but people often overlook the restrictions that manufacturers slip under the wrapping paper. Companies like Microsoft and Apple can and will use Digital Restrictions Management (DRM) to prevent your loved ones from sharing apps on the laptop you got them or remixing the songs on their expensive new iPad. If the recipient of your gift is as unlucky as one woman last year, <a href="http://www.defectivebydesign.org/node/2250">Amazon might even block all the books on their Kindle and refuse to explain why</a>. Companies want us to accept this kind of intrusive control, but when you think about, it's unethical (and annoying!).
-                               </p>
 
-                               <h2>Give freely</h2>
+               <!--We compare different products from here-->
 
-                               <p>
-                                       The good news is, for every device that uses DRM or has a remote "kill switch" like the Kindle, ethical companies have made a better one that doesn't, one that your loved ones will be free to enjoy however they wish. Here's a list of these smarter gifts, compared with their more well-known, but more restrictive alternatives. While you're reading, please remember that donating to a charity in your friend or family member's name is at least as meaningful as buying them an electronic device. Some of our favorite charities are the <a href="http://www.eff.org/">Electronic Frontier Foundation</a>, <a href="http://www.creativecommons.org/">Creative Commons</a>, <a href="http://wikimedia.org/">Wikimedia Foundation</a>, <a href="http://www.sfconservancy.org/">Software Freedom Conservancy</a>, <a href="http://www.softwarefreedom.org/">Software Freedom Law Center</a>, <a href="http://www.gnome.org/">GNOME Foundation</a> and Free Software Foundation.
-                               </p>
-                               <h2>The Free Software Foundation's Holiday Giving Guide
-       </h2>
+                               <div class="comparisons">
+                                               <div class="section_wrapper">
+                                                       <h3 class="main_title">Operating System: Give the gift of free, flexible, and ethical computing</h3>
 
-                               <p>
-                                       The gifts in the left column respect your freedom much more than those in the right column.
-                               </p>
+                                                       <div class="free">
+                                                               <div class="product">
+                                                                       <img class="good" src="images/good.png" alt="Windows"/>
+                                                                       <img class="product_img" src="images/linux.png" alt="Linux"/>
+                                                               </div>
 
-                               <p>
-                                       <i>
-                                               Please share <a href="http://www.fsf.org/share?u=http://www.fsf.org/givingguide&t=Give%20tech%20gifts%20that%20support%20user%20freedom%20">the Giving Guide</a> with your friends and family members, especially those that might give you presents! (We're using the hashtag #givefreely.)
-                                       </i>
-                               </p>
+                                                               <h4 class="title">Fedora</h4>
+                                                               <ul>
+                                                                       <li>Completely free operating system: transparent and modifiable</li>
+                                                                       <li>Break the cycle of forced upgrades and planned obsolescence</li>
+                                                                       <li>Comes with all the software you need and an easy software manager to find more.</li>
+                                                               </ul>
 
-                               <p>
-                               To make a really big splash, get some friends together, print the PDF version of the Giving Guide and hand it out near a local store that sells DRM-encumbered products. Be sure to take photos! Send us photos and any questions at <a href="mailto:campaigns@fsf.org">campaigns@fsf.org</a>.
-                               </p>
+                                                               <div class="buy">
 
-                       </div>
+                                                                       <a href="http://fedoraproject.org/"><img src="images/download.png" alt="download" /></a>
 
-<!--We compare different products from here-->
+                                                               </div>
 
-                       <div id="comparisons">
-                               <div class="section_wrapper">
-                                       <h3 class="main_title">Operating System: Give the gift of free, flexible, and ethical computing</h3>
+                                                       </div>
 
-                                       <div id="free">
-                                               <img class="product" src="images/linux.png" alt="Windows"/>
+                                                       <div class="proprietary">
+                                                               <div class="product">
+                                                                       <img class="bad" src="images/bad.png" alt="bad"/>
+                                                                       <img class="product_img" src="images/windows.png" alt="Windows"/>
+                                                               </div>
 
-                                               <h4 class="title">Linux</h4>
-                                               <ul>
-                                                       <li>Completely free operating system: transparent and modifiable</li>
-                                                       <li>Break the cycle of forced upgrades and planned obsolescence</li>
-                                                       <li>Comes with all the software you need and an easy software manager to find more.</li>
-                                               </ul>
+                                                               <h4 class="title">Windows</h4>
+                                                               <ul>
+                                                                       <li>Proprietary software that profits from controlling how you use your computer</li>
+                                                                       <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>
+                                                                       <li>Dependent on mandatory upgrades and devices that don't support older versions of Windows</li>
+                                                               </ul>
 
-                                       </div>
+                                                               <div class="avoid">
+
+                                                                       <img src="images/avoid.png" alt="avoid" />
 
-                                       <div id="sign">
-                                               <img class="sign" src="images/sign.png" alt="compared"/>
-                                               <img class="separator" src="images/separator.png" alt="separator"/>
+                                                               </div>
+                                                       </div>
+                                               </div>
                                        </div>
 
-                                       <div id="proprietary">
-                                               <img class="product" src="images/windows.png" alt="Windows"/>
+                                       <div class="comparisons">
+                                               <div class="section_wrapper">
+                                                       <h3 class="main_title">Operating System: Give the gift of free, flexible, and ethical computing</h3>
 
-                                               <h4 class="title">Windows</h4>
-                                               <ul>
-                                                       <li>Proprietary software that profits from controlling how you use your computer</li>
-                                                       <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>
-                                                       <li>Dependent on mandatory upgrades and devices that don't support older versions of Windows</li>
-                                               </ul>
-                                       </div>
-                               </div>
+                                                       <div class="free">
+                                                               <div class="product">
+                                                                       <img class="good" src="images/good.png" alt="Windows"/>
+                                                                       <img class="product_img" src="images/linux.png" alt="Linux"/>
+                                                               </div>
 
-<!--                           <div id="test">
-       <hr>
-</div> -->
+                                                               <h4 class="title">Fedora</h4>
+                                                               <ul>
+                                                                       <li>Completely free operating system: transparent and modifiable</li>
+                                                                       <li>Break the cycle of forced upgrades and planned obsolescence</li>
+                                                                       <li>Comes with all the software you need and an easy software manager to find more.</li>
+                                                               </ul>
 
-                               <div class="section_wrapper">
-                                       <h3 class="main_title">Operating System: Give the gift of free, flexible, and ethical computing</h3>
+                                                               <div class="buy">
 
-                                       <div id="free">
-                                               <img class="product" src="images/linux.png" alt="Windows"/>
+                                                                       <a href="http://fedoraproject.org/"><img src="images/download.png" alt="download" /></a>
 
-                                               <h4 class="title">Linux</h4>
-                                               <ul>
-                                                       <li>Completely free operating system: transparent and modifiable</li>
-                                                       <li>Break the cycle of forced upgrades and planned obsolescence</li>
-                                                       <li>Comes with all the software you need and an easy software manager to find more.</li>
-                                               </ul>
+                                                               </div>
 
-                                       </div>
+                                                       </div>
 
-                                       <div id="sign">
-                                               <img class="sign" src="images/sign.png" alt="compared"/>
-                                               <img class="separator" src="images/separator.png" alt="separator"/>
-                                       </div>
+                                                       <div class="proprietary">
+                                                               <div class="product">
+                                                                       <img class="bad" src="images/bad.png" alt="bad"/>
+                                                                       <img class="product_img" src="images/windows.png" alt="Windows"/>
+                                                               </div>
 
-                                       <div id="proprietary">
-                                               <img class="product" src="images/windows.png" alt="Windows"/>
+                                                               <h4 class="title">Windows</h4>
+                                                               <ul>
+                                                                       <li>Proprietary software that profits from controlling how you use your computer</li>
+                                                                       <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>
+                                                                       <li>Dependent on mandatory upgrades and devices that don't support older versions of Windows</li>
+                                                               </ul>
 
-                                               <h4 class="title">Windows</h4>
-                                               <ul>
-                                                       <li>Proprietary software that profits from controlling how you use your computer</li>
-                                                       <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>
-                                                       <li>Dependent on mandatory upgrades and devices that don't support older versions of Windows</li>
-                                               </ul>
-                                       </div>
+                                                               <div class="avoid">
+
+                                                                       <img src="images/avoid.png" alt="avoid" />
+
+                                                               </div>
+                                                       </div>
+                                               </div>
                                </div>
-                       </div>
 
+                               <div class="comparisons">
+                                       <div class="section_wrapper">
+                                               <h3 class="main_title">Operating System: Give the gift of free, flexible, and ethical computing</h3>
 
+                                               <div class="free">
+                                                       <div class="product">
+                                                               <img class="good" src="images/good.png" alt="Windows"/>
+                                                               <img class="product_img" src="images/linux.png" alt="Linux"/>
+                                                       </div>
 
-               </div>
+                                                       <h4 class="title">Fedora</h4>
+                                                       <ul>
+                                                               <li>Completely free operating system: transparent and modifiable</li>
+                                                               <li>Break the cycle of forced upgrades and planned obsolescence</li>
+                                                               <li>Comes with all the software you need and an easy software manager to find more.</li>
+                                                       </ul>
+
+                                                       <div class="buy">
+
+                                                               <a href="http://fedoraproject.org/"><img src="images/download.png" alt="download" /></a>
+
+                                                       </div>
+
+                                               </div>
+
+                                               <div class="proprietary">
+                                                       <div class="product">
+                                                               <img class="bad" src="images/bad.png" alt="bad"/>
+                                                               <img class="product_img" src="images/windows.png" alt="Windows"/>
+                                                       </div>
+
+                                                       <h4 class="title">Windows</h4>
+                                                       <ul>
+                                                               <li>Proprietary software that profits from controlling how you use your computer</li>
+                                                               <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>
+                                                               <li>Dependent on mandatory upgrades and devices that don't support older versions of Windows</li>
+                                                       </ul>
+
+                                                       <div class="avoid">
+
+                                                               <img src="images/avoid.png" alt="avoid" />
+
+                                                       </div>
+                                               </div>
+                                       </div>
+                       </div>
        </body>
 
 </html>