Fixed the section titles for Webkit for good.
[fsf-giving-guide.git] / givingguide.html
index c1a372370cb6ed42bf21cf52ddb5892d0f10ce9d..b0b544065dddcebd51086bb7ba75a7375688394e 100755 (executable)
@@ -4,6 +4,8 @@
 
                <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/">
 
        <body>
                <div class="header">
-                       <div class="top">
-                               <span class="logo_wrapper">
+                       <div class="navbar">
+                                       <span class="logo_wrapper">
                                        <a href="https://www.fsf.org/"><img class="logo" src="images/logo.png" alt="Logo" /></a>
                                </span>
-                       </div>
-                       <div class="navbar">
+
                                <div class="nav_wrapper">
                                        <ul>
-                                               <li><a href="https://www.fsf.org/about/">About</a></li>
+                                               <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/">Licensing</a></li>
-                                               <li><a href="https://www.fsf.org/associate/">Membership</a></li>
-                                               <li><a href="https://www.fsf.org/resources/">Resources</a></li>
-                                               <li><a href="https://www.fsf.org/community/">Community</a></li>
-                                               <li><a href="https://www.fsf.org/donate/">Donate</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>
+
+       <!--    <div class="header">
+               <div class="top">
+                       <span class="logo_wrapper">
+                               <a href="https://www.fsf.org/"><img class="logo" src="images/logo.png" alt="Logo" /></a>
+                       </span>
+                       <span class="join_wrapper">
+                               <a href="http://fsf.org/jfb"><img class="join" src="images/join.png" alt="Logo" /></a>
+                       </span>
+               </div>
+               <div class="navbar">
+                       <div class="nav_wrapper">
+                               <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>
+               </div>
+       </div> -->
                <div class="wrapper">
 
                        <div>
 
                <!--We compare different products from here-->
 
-               <!--                    <div id="comparisons">
-                       <div class="section_wrapper">
-                               <h3 class="main_title">Operating System: Give the gift of free, flexible, and ethical computing</h3>
+                       <div class="comparisons">
+                                       <section class="section_wrapper">
+                                               <h3 class="main_title">Operating System: Give the gift of free, flexible, and ethical computing</h3>
 
-                               <div id="free">
-                                       <img class="product" src="images/linux.png" alt="Windows"/>
+                                               <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>
 
-                                       <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">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>
+                                                       <div class="buy">
 
-                               <div id="sign">
-                                       <img class="sign" src="images/sign.png" alt="compared"/>
-                                       <img class="separator" src="images/separator.png" alt="separator"/>
-                               </div>
+                                                               <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>
+                                       </section>
+
+
+                                       <section 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>
+
+                                                       <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>
+                                       </section>
+
+
+                                       <section 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>
+
+                                                       <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>
+                                       </section>
 
-                               <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>
-                               </div>
-                       </div> -->
-
-               <!--                            <div id="test">
-                       <hr>
-               </div> -->
-
-<!--                                           <div class="section_wrapper">
-       <h3 class="main_title">Operating System: Give the gift of free, flexible, and ethical computing</h3>
-
-       <div id="free">
-               <img class="product" src="images/linux.png" alt="Windows"/>
-
-               <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 id="sign">
-               <img class="sign" src="images/sign.png" alt="compared"/>
-               <img class="separator" src="images/separator.png" alt="separator"/>
-       </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>
-       </div>
-</div>
-                                       </div> -->
        </body>
 
 </html>