Added 'Share' button, fixed 'Buy/avoid' buttons, added img template, removed old img
[fsf-giving-guide.git] / givingguide.html
index b347cc554b91b14d7da7abea94956f2e0698da5b..86d371d37b1c1009547c36df85760637e8ed1b50 100755 (executable)
                                                        </ul>
                                                </div>
 
-                                               <span class="share_wrapper">
-                                                       <a href="https://fsf.org/share"><img class="share" src="images/share.png" alt="share" /></a>
-                                               </span>
-
                                                <span class="join_wrapper">
                                                        <a href="http://fsf.org/jfb"><img class="join" src="images/join.png" alt="join" /></a>
                                                </span>
                                </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>
+               <div class="share">
+                       <span class="share_wrapper">
+                               <a href="https://fsf.org/share">Share</a>
+                       </span>
+               </div>
 
-</div> -->
+               <!--We compare different products from here-->
 
+               <div class="comparisons">
+                       <div class="section_wrapper">
+                               <h3 class="main_title">Operating System</h3>
 
-               <!--We compare different products from here-->
+                               <div class="free">
+                                       <div class="product">
+                                               <img class="good" src="images/good.png" alt="good"/>
+                                               <img class="product_img" src="images/linux.png" alt="Linux"/>
+                                       </div>
+
+                                       <h4 class="title">Trisquel</h4>
+                                       <ul>
+                                               <li>
+                         Completely free operating system:
+                         transparent and modifiable
+                       </li>
+
+                       <li>
+                         Break the cycle of forced upgrades and
+                         planned obsolescence
+                       </li>
 
-                               <div class="comparisons">
-                                               <div class="section_wrapper">
-                                                       <h3 class="main_title">Operating System: Give the gift of free, flexible, and ethical computing</h3>
+                       <li>
+                         Comes with all the software you need and an
+                         easy software manager to find more.
+                       </li>
+                       <li>Works great with the Wi-Fi adapters in this guide.</li>
+                                       </ul>
 
-                                                       <div class="free">
-                                                               <div class="product">
-                                                                       <img class="good" src="images/good.png" alt="good"/>
-                                                                       <img class="product_img" src="images/linux.png" alt="Linux"/>
-                                                               </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">
+                               </div>
 
-                                                                       <a href="http://fedoraproject.org/"><img src="images/download.png" alt="download" /></a>
+                               <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>
+                                       <h4 class="title">Windows</h4>
+                                       <ul>
+                       <li>
+                         Proprietary software that profits from
+                         controlling how you use your computer
+                       </li>
 
-                                                       </div>
+                       <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>
 
-                                                       <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>
+                       <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 class="avoid">
+                               </div>
 
-                                                                       <img src="images/avoid.png" alt="avoid" />
+                               <div class="buy_avoid">
+                                       <div class="buy_avoid_wrapper">
+                                               <div class="buy">
+                                                       <a href="http://fedoraproject.org/"><img src="images/download.png" alt="Download" /></a>
+                                               </div>
 
-                                                               </div>
-                                                       </div>
+                                               <div class="avoid">
+                                                       <img src="images/avoid.png" alt="avoid" />
                                                </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>
 
-                                                       <div class="free">
-                                                               <div class="product">
-                                                                       <img class="good" src="images/good.png" alt="good"/>
-                                                                       <img class="product_img" src="images/linux.png" alt="Linux"/>
-                                                               </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">
+                       <div class="section_wrapper">
+                               <h3 class="main_title">3D Printers</h3>
 
-                                                                       <a href="http://fedoraproject.org/"><img src="images/buy.png" alt="download" /></a>
+                               <div class="free">
+                                       <div class="product">
+                                               <img class="good" src="images/good.png" alt="good"/>
+                                               <img class="product_img" src="//static.fsf.org/nosvn/images/taz4.png" alt="TAZ 4.0"/>
+                                       </div>
 
-                                                               </div>
+                                       <h4 class="title">Lulzbot TAZ 4.0</h4>
+                                       <ul>
+                       <li>
+                         <a href="https://www.fsf.org/resources/hw/endorsement/respects-your-freedom">
+                           Respects Your Freedom
+                         </a>
+
+                         certified by the Free Software Foundation
+                       </li>
+
+                       <li>
+                         Powered by free software, making 3D printing
+                         more accessible and encouraging innovation
+                       </li>
+
+                       <li>
+                         Learn more about the Lulzbot at
+                         <a href="http://www.lulzbot.com/">
+                           www.lulzbot.com
+                         </a>
+                       </li>
+                     </ul>
 
-                                                       </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>
+                               <div class="proprietary">
+                                       <div class="product">
+                                               <img class="bad" src="images/bad.png" alt="bad"/>
+                                               <img class="product_img" src="//static.fsf.org/fsforg/img/MakerbotPrepped.png" alt="Makerbot Replicator 2"/>
+                                       </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>
+                                       <h4 class="title">Makerbot Replicator 2</h4>
+                                       <ul>
+                       <li>
+                         MakerWare software is proprietary,
+                         restricting freedom and stifling innovation
+                       </li>
+
+                       <li>
+                         Hardware patents threaten free printers like
+                         the Lulzbot
+                       </li>
+
+                       <li>
+                         Recently announced an increasingly
+                         proprietary approach, further distancing
+                         itself from the free software community
+                       </li>
+                     </ul>
 
-                                                               <div class="avoid">
+                               </div>
 
-                                                                       <img src="images/avoid.png" alt="avoid" />
+                               <div class="buy_avoid">
+                                       <div class="buy_avoid_wrapper">
+                                               <div class="buy">
+                                                       <a href="http://fedoraproject.org/"><img src="images/download.png" alt="Download" /></a>
+                                               </div>
 
-                                                               </div>
-                                                       </div>
+                                               <div class="avoid">
+                                                       <img src="images/avoid.png" alt="avoid" />
                                                </div>
+                                       </div>
                                </div>
+       </div>
+
 
-                               <div class="recomended">
-                                       <div class="recomend_wrapper">
-                                               <h3 class="main_title">Recomended Products</h3>
 
 
+                       <div class="section_wrapper">
+                               <h3 class="main_title">Ebooks</h3>
+
+                               <div class="free">
+                                       <div class="product">
+                                               <img class="good" src="images/good.png" alt="good"/>
+                                               <img class="product_img" src="//static.fsf.org/fsforg/img/ProjectGutenbergPrepped.png" alt="Project Gutenberg"/>
                                        </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>
+                                       <h4 class="title">Project Gutenberg</h4>
+
+                     <ul>
+                       <li>
+                         The original purveyor of DRM-free eBooks
+                       </li>
+
+                       <li>
+                         Enjoy the freedom to read your ebooks on any
+                         device
+                       </li>
+
+                       <li>
+                         All of the ebooks on Project Gutenberg,
+                         including classics like Peter Pan and Huck
+                         Finn, are gratis
+                       </li>
+
+                       <li>
+                         Pick out the perfect books for the whole
+                         family at
+                         <a href="http://www.gutenberg.org/">
+                           www.gutenberg.org
+                         </a>
+                         or from other
+                         <a href="http://www.defectivebydesign.org/guide/ebooks">
+                           DRM-free ebooks sites
+                         </a>
+                       </li>
+                     </ul>
 
-                                               <div class="free">
-                                                       <div class="product">
-                                                               <img class="good" src="images/good.png" alt="good"/>
-                                                               <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="proprietary">
+                                       <div class="product">
+                                               <img class="bad" src="images/bad.png" alt="bad"/>
+                                               <img class="product_img" src="//static.fsf.org/fsforg/img/amazon.jpg" alt="Amazon"/>
+                                       </div>
 
-                                                       <div class="buy">
+                                       <h4 class="title">Amazon</h4>
+                                       <ul>
+                       <li>
+                         Amazon can remotely block or delete
+                         individual ebooks or your entire library
+                         with no warning or explanation (they've done
+                         it before--read about it
+                         <a href="http://www.defectivebydesign.org/node/2250">
+                           here
+                         </a>).
+                       </li>
+
+                       <li>
+                         DRM prevents you from sharing your favorite
+                         books with friends, and Amazon uses DRM to
+                         <a href="http://www.defectivebydesign.org/faq#harm">
+                           maintain their monopoly
+                         </a>
+                       </li>
+
+                       <li>
+                         Amazon claims
+                         <a href="http://www.defectivebydesign.org/amazon-kindle-swindle">
+                           you don't actually own or control your
+                           ebooks
+                         </a>
+                       </li>
+
+                       <li>
+                         Thanks to DRM, you won't be able to transfer
+                         your books to any other reader
+                       </li>
+                     </ul>
 
-                                                               <a href="http://fedoraproject.org/"><img src="images/download.png" alt="download" /></a>
+                               </div>
 
-                                                       </div>
+                               <div class="buy_avoid">
+                                       <div class="buy_avoid_wrapper">
+                                               <div class="buy">
+                                                       <a href="http://fedoraproject.org/"><img src="images/download.png" alt="Download" /></a>
+                                               </div>
 
+                                               <div class="avoid">
+                                                       <img src="images/avoid.png" alt="avoid" />
                                                </div>
+                                       </div>
+                               </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>
+                       <div class="section_wrapper">
+                               <h3 class="main_title">Mobile OS</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 class="free">
+                                       <div class="product">
+                                               <img class="good" src="images/good.png" alt="good"/>
+                                               <img class="product_img" src="http://static.fsf.org/nosvn/images/Replicant_logo.png" alt="Replicant"/>
+                                       </div>
+
+                                       <h4 class="title">Replicant</h4>
+                                       <ul>
+                       <li>
+                         Fully free software mobile OS based on
+                         Android
+                       </li>
+
+                       <li>
+                         <a href="http://redmine.replicant.us/projects/replicant/wiki/ReplicantImages">
+                           Supported devices
+                         </a>
+                         include both phones and tablets
+                       </li>
+
+                       <li>
+                         Used devices can be purchased, so your
+                         dollars won't go to proprietary OS
+                         companies.
+                       </li>
+                     </ul>
+
+
+                               </div>
+
+                               <div class="proprietary">
+                                       <div class="product">
+                                               <img class="bad" src="images/bad.png" alt="bad"/>
+                                               <img class="product_img" src="http://static.fsf.org/nosvn/images/iOS.png" alt="Apple iPhone, iPad and Watch"/>
+                                       </div>
 
-                                                       <div class="avoid">
+                                       <h4 class="title">Apple iPhone, iPad and Watch</h4>
+                                       <ul>
+                       <li>
+                         iOS is a fully proprietary operating system,
+                         giving Apple ultimate control over devices
+                         running it
+                       </li>
+
+                       <li>
+                         Apple uses DRM to block competing software.
+                       </li>
+
+                       <li>
+                         The company claims to take away your freedom
+                         <a href="http://www.defectivebydesign.org/blog/1256">
+                           for your own good
+                         </a>.
+                       </li>
+                     </ul>
+                               </div>
 
-                                                               <img src="images/avoid.png" alt="avoid" />
+                               <div class="buy_avoid">
+                                       <div class="buy_avoid_wrapper">
+                                               <div class="buy">
+                                                       <a href="http://fedoraproject.org/"><img src="images/download.png" alt="Download" /></a>
+                                               </div>
 
-                                                       </div>
+                                               <div class="avoid">
+                                                       <img src="images/avoid.png" alt="avoid" />
                                                </div>
                                        </div>
+                               </div>
                        </div>
+       </div>
 
+                       <!-- Recommended Section -->
 
-       </body>
+                       <div class="recommended">
+                               <h1 class="topic_title">Recomended Products</h1>
 
-       <footer>
+                               <div class="recommend_wrapper">
+                                       <div class="recommended_product">
+                                               <img class="recommended_product_img" src="images/Linux.png" alt="Linux"/>
+                                               <h4 class="title">Fedora</h4>
+                                               <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+                                               <div class="buy">
+                                                       <a href="http://fedoraproject.org/"><img src="images/buy.png" alt="Buy" /></a>
+                                               </div>
+                                       </div>
 
+                                       <div class="recommended_product">
+                                               <img class="recommended_product_img" src="images/Linux.png" alt="Linux"/>
+                                               <h4 class="title">Fedora</h4>
+                                               <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+                                               <div class="buy">
+                                                       <a href="http://fedoraproject.org/"><img src="images/download.png" alt="Download" /></a>
+                                               </div>
+                                       </div>
 
-       </footer>
+                                       <div class="recommended_product">
+                                               <img class="recommended_product_img" src="images/Linux.png" alt="Linux"/>
+                                               <h4 class="title">Fedora</h4>
+                                               <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+                                               <div class="buy">
+                                                       <a href="http://fedoraproject.org/"><img src="images/buy.png" alt="Buy" /></a>
+                                               </div>
+                                       </div>
+                               </div>
+
+                               <div class="recommend_wrapper">
+                                       <div class="recommended_product">
+                                               <img class="recommended_product_img" src="images/Linux.png" alt="Linux"/>
+                                               <h4 class="title">Fedora</h4>
+                                               <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+                                               <div class="buy">
+                                                       <a href="http://fedoraproject.org/"><img src="images/buy.png" alt="Buy" /></a>
+                                               </div>
+                                       </div>
+
+                                       <div class="recommended_product">
+                                               <img class="recommended_product_img" src="images/Linux.png" alt="Linux"/>
+                                               <h4 class="title">Fedora</h4>
+                                               <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+                                               <div class="buy">
+                                                       <a href="http://fedoraproject.org/"><img src="images/download.png" alt="Download" /></a>
+                                               </div>
+                                       </div>
+
+                                       <div class="recommended_product">
+                                               <img class="recommended_product_img" src="images/Linux.png" alt="Linux"/>
+                                               <h4 class="title">Fedora</h4>
+                                               <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+                                               <div class="buy">
+                                                       <a href="http://fedoraproject.org/"><img src="images/buy.png" alt="Buy" /></a>
+                                               </div>
+                                       </div>
+                               </div>
+                               <div class="licenses">
+                                       <h1 class="topic_title">Licenses</h1>
+
+                               </div>
+                       </div>
+       </body>
 </html>