New sections, fixed issues...

diff --git a/css/master.css b/css/master.css
index e5267407d51926b6c8f856e4a5da36ea58394f2a..b210a0efe63896ec59ce8b98b7ded2def5e5ab80 100644 (file)
--- a/css/master.css
+++ b/css/master.css
@@ -1,176 +1,236 @@
-/*Default Bootstrap overrides*/
-
-.navbar {
+/*Bootstrap overrides*/
+.navbar
+{
     margin-bottom: 0;
+
     border: 0;
 }
-.navbar-header {
-    background: #2CAF8F;
+.navbar-header
+{
     border: 0;
+    background: #2caf8f;
     box-shadow: none;
 }
-.navbar-toggle {
+.navbar-toggle
+{
     border: 0;
 }
-.navbar-default .navbar-toggle .icon-bar {
+.navbar-default .navbar-toggle .icon-bar
+{
     background-color: #fff;
 }
-.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover {
+.navbar-default .navbar-toggle:focus,
+.navbar-default .navbar-toggle:hover
+{
     background-color: transparent;
 }
-.navbar-default .navbar-collapse, .navbar-default .navbar-form {
+.navbar-default .navbar-collapse,
+.navbar-default .navbar-form
+{
     border: 0;
 }
-.navbar-collapse {
-    background: #2CAF8F;
+.navbar-collapse
+{
+    background: #2caf8f;
 }
-.navbar-default .navbar-nav>li>a {
+.navbar-default .navbar-nav > li > a
+{
     color: white;
 }
-
 /*Typography*/
-
-@font-face {
+@font-face
+{
     font-family: 'Signika Regular';
+
     src: local('Signika Regular'), url('fonts/Signika-Regular.ttf') format('truetype');
 }
-@font-face {
+@font-face
+{
     font-family: 'Signika Light';
+
     src: local('Signika Light'), url('fonts/Signika-Light.ttf') format('truetype');
 }
-@font-face {
+@font-face
+{
     font-family: 'Signika Bold';
+
     src: local('Signika Bold'), url('fonts/Signika-Bold.ttf') format('truetype');
 }
-@font-face {
+@font-face
+{
     font-family: 'Open Sans';
+
     src: local('Open Sans'), url('fonts/OpenSans-Regular.ttf') format('truetype');
 }
-@font-face {
+@font-face
+{
     font-family: 'Open Sans Bold';
+
     src: local('Open Sans Bold'), url('fonts/OpenSans-Bold.ttf') format('truetype');
 }
-
 /*Text Styles*/
-
-h2 {
+h2
+{
     font-family: Signika-Regular;
     font-size: 22px;
-    color: #2CAF8F;
+
+    color: #2caf8f;
 }
-h3 {
+h3
+{
     font-family: Signika-Regular;
     font-size: 22px;
-    color: #333333;
+
+    color: #333;
 }
-h4 {
+h4
+{
     font-family: Signika-Light;
     font-size: 20px;
-    color: #9B9B9B;
+
     padding-top: 20px;
+
+    color: #9b9b9b;
 }
-h5 {
-  font-family: Signika-Regular;
-  font-size: 19px;
-  color: #4A4A4A;
-  line-height: 20px;
+h5
+{
+    font-family: Signika-Regular;
+    font-size: 19px;
+    line-height: 20px;
+
+    color: #4a4a4a;
 }
-p, li {
+li,
+p
+{
     font-family: OpenSans;
     font-size: 16px;
-    color: #333333;
+
+    color: #333;
 }
-li {
-  margin-bottom: 20px;
+li
+{
+    margin-bottom: 20px;
 }
-
 /*Header*/
-
-.intro, .intro-text {
-    background: #2CAF8F;
+.intro,
+.intro-text
+{
     padding-top: 20px;
-    padding-bottom: 0px;
+    padding-bottom: 0;
+
+    background: #2caf8f;
 }
-.illustration {
+.illustration
+{
     padding-bottom: 60px;
 }
-.intro-text {
-    background: #FFFFFF;
+.intro-text
+{
     padding-bottom: 40px;
-}
 
-.intro p {
+    background: #fff;
+}
+.intro p
+{
     /*margin: 0;*/
 }
-
 /*Actions*/
-
-.actions {
-    background: #FFFAE5;
+.actions
+{
     padding-top: 30px;
     padding-bottom: 30px;
+
+    background: #fffae5;
 }
-.icon {
+.icon
+{
     width: 140px;
     height: 140px;
-    background: #FFD429;
-}
 
-.share > .icon > img {
-  margin-top: 29%;
+    background: #ffd429;
 }
-
-.print > .icon > img {
-  margin-top: 30%;
+.share > .icon > img
+{
+    margin-top: 29%;
 }
-
-.donate > .icon > img {
-  margin-top: 34%;
+.print > .icon > img
+{
+    margin-top: 30%;
+}
+.donate > .icon > img
+{
+    margin-top: 34%;
 }
-
 /*Comparisons*/
-
-.good,
-.bad {
-  padding-top: 30px;
-  padding-bottom: 30px;
+.title
+{
+    padding-bottom: 8px;
+    margin-top: 40px;
+
+    background-image: url('../img/underline.svg');
+    background-repeat: no-repeat;
+    background-position: center bottom;
+}
+.bad,
+.good
+{
+    padding-top: 30px;
+    padding-bottom: 30px;
+    margin-top: 30px;
 }
-
-.bad {
-  background-image: url('../img/bad-pattern.png');
-  background-repeat: repeat;
-  background-size: 55px;
-  background-color: transparent;
+.bad
+{
+    background-color: transparent;
+    background-image: url('../img/bad-pattern.png');
+    background-repeat: repeat;
+    background-size: 50px;
 }
-
-.good li {
-    background-image: url(../img/good.svg);
+.good li
+{
+    background-image: url('../img/good.svg');
 }
-.bad li {
-    background-image: url(../img/bad.svg);
+.bad li
+{
+    background-image: url('../img/bad.svg');
 }
-
-.good li,
-.bad li {
-  background-repeat: no-repeat;
-  padding-left: 30px;
-  line-height: 20px;
-  list-style: none;
+.bad li.neutral
+{
+    background-image: url('../img/neutral.svg');
+}
+.bad ul,
+.good ul
+{
+    padding-left: 15px;
 }
+.bad li,
+.good li
+{
+    line-height: 20px;
 
-.good ul,
-.bad ul {
-  padding-left: 15px;
+    padding-left: 30px;
+
+    list-style: none;
+
+    background-repeat: no-repeat;
+}
+.bad h5,
+.bad img,
+.good h5,
+.good img
+{
+    margin-bottom: 25px;
 }
+.buy
+{
+    /*box-shadow: 0 4px 0 0 #1D65B7;*/
+    font-family: Signika-Regular;
+    font-size: 24px;
 
-.buy {
-  background: #2B81E3;
-  box-shadow: 0 4px 0 0 #1D65B7;
-  border: 0;
-  border-radius: 100px;
-  padding: 6px 80px;
+    padding: 4px 50px;
 
-  font-family: Signika-Regular;
-  font-size: 30px;
-  color: #FFFFFF;
+    color: #fff;
+    border: 0;
+    border-radius: 100px;
+    background: #2b81e3;
 }

diff --git a/givingguide.html b/givingguide.html
index ec0efc87456abd2615b7f83720918e409809cfe8..a330148ff443b9e9e4ade3b38a768e54d5f32a13 100644 (file)
--- a/givingguide.html
+++ b/givingguide.html
@@ -1,150 +1,378 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>Ethical Tech | Giving Guide</title>
 
-    <!-- Bootstrap -->
-    <link rel="stylesheet" href="css/bootstrap.min.css">
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Ethical Tech | Giving Guide</title>
 
-    <!-- Animate CSS -->
-    <link rel="stylesheet" href="css/animate.css">
+  <!-- Bootstrap -->
+  <link rel="stylesheet" href="css/bootstrap.min.css">
 
-    <!-- Our CSS -->
-    <link rel="stylesheet" href="css/master.css">
+  <!-- Animate CSS -->
+  <link rel="stylesheet" href="css/animate.css">
 
-    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
-    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
-    <!--[if lt IE 9]>
+  <!-- Our CSS -->
+  <link rel="stylesheet" href="css/master.css">
+
+  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
+  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
+  <!--[if lt IE 9]>
       <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.2/html5shiv.js"></script>
       <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
     <![endif]-->
-  </head>
-  <body>
-    <nav class="navbar navbar-default">
+</head>
+
+<body>
+  <nav class="navbar navbar-default">
     <div class="container-fluid">
-        <!-- Brand and toggle get grouped for better mobile display -->
-        <div class="navbar-header">
-            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-links" aria-expanded="false">
-                <span class="sr-only">Toggle navigation</span>
-                <span class="icon-bar"></span>
-                <span class="icon-bar"></span>
-                <span class="icon-bar"></span>
-            </button>
-            <a class="navbar-brand" href="#"><img class="brand" src="img/logo.png" alt="FSF" width="130px" /></a>
-        </div>
-
-        <!-- Collect the nav links, forms, and other content for toggling -->
-        <div class="collapse navbar-collapse" id="navbar-links">
-            <ul class="nav navbar-nav">
-              <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/donate/">Donate</a></li>
-              <li><a href="http://shop.fsf.org/">Shop</a>
-              <li role="separator" class="divider"></li>
-            </ul>
-            <span class="join_wrapper">
-              <a href="http://fsf.org/jfb"><img class="join" src="//static.fsf.org/nosvn/images/givingguide/images/join.png" alt="join" /></a>
-            </span>
-        </div>
-        <!-- /.navbar-collapse -->
+      <!-- Brand and toggle get grouped for better mobile display -->
+      <div class="navbar-header">
+        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-links" aria-expanded="false">
+          <span class="sr-only">Toggle navigation</span>
+          <span class="icon-bar"></span>
+          <span class="icon-bar"></span>
+          <span class="icon-bar"></span>
+        </button>
+        <a class="navbar-brand" href="#"><img class="brand" src="img/logo.png" alt="FSF" width="130px" /></a>
+      </div>
+
+      <!-- Collect the nav links, forms, and other content for toggling -->
+      <div class="collapse navbar-collapse" id="navbar-links">
+        <ul class="nav navbar-nav">
+          <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/donate/">Donate</a></li>
+          <li><a href="http://shop.fsf.org/">Shop</a>
+            <li role="separator" class="divider"></li>
+        </ul>
+        <span class="join_wrapper">
+                <a href="http://fsf.org/jfb"><img class="join" src="//static.fsf.org/nosvn/images/givingguide/images/join.png" alt="join" /></a>
+              </span>
+      </div>
+      <!-- /.navbar-collapse -->
     </div>
     <!-- /.container-fluid -->
-</nav>
-<div class="intro">
-  <div class="container">
-    <div class="row">
-      <div class="illustration col-md-6">
-        <img src="img/Illustration.svg" alt="" class="img-responsive" />
+  </nav>
+  <div class="intro">
+    <!--Begin Intro-->
+    <div class="container">
+      <div class="row">
+        <div class="illustration col-md-6">
+          <img src="img/Illustration.png" alt="" class="img-responsive" />
+        </div>
+        <div class="intro-text col-md-6">
+          <h2>Are you giving your loved ones tech gifts they can use freely?</h2>
+          <h4>Or gifts which put someone else in control?</h4>
+          <p>
+            Electronics are popular gifts, but people often overlook the restrictions that manufacturers slip under the wrapping paper. From remote deletion of files to harsh rules about copying and sharing, some gifts take more than they give.
+          </p>
+
+          <h4>The good news</h4>
+          <p>
+            The good news is that there are ethical companies making better devices that your loved ones can enjoy with freedom and privacy. This is the Free Software Foundation (FSF) guide to smarter gifts, compared with their restrictive counterparts.
+          </p>
+        </div>
       </div>
-      <div class="intro-text col-md-6">
-        <h2>Are you giving your loved ones tech gifts they can use freely?</h2>
-        <h4>Or gifts which put someone else in control?</h4>
-        <p>
-          Electronics are popular gifts, but people often overlook the restrictions that manufacturers slip under the wrapping paper. From remote deletion of files to harsh rules about copying and sharing, some gifts take more than they give.
-        </p>
-
-        <h4>The good news</h4>
-        <p>
-          The good news is that there are ethical companies making better devices that your loved ones can enjoy with freedom and privacy. This is the Free Software Foundation (FSF) guide to smarter gifts, compared with their restrictive counterparts.
-        </p>
+    </div>
+  </div>
+  <!--End Intro-->
+
+  <div class="actions">
+    <!--Begin Actions-->
+    <div class="container">
+      <div class="row">
+        <div class="share col-md-4 text-center">
+          <div class="icon center-block img-circle">
+            <img src="img/icon-share.png" alt="sharing icon" width="60px" class="text-center" />
+          </div>
+          <h3>Share</h3>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
+          </p>
+        </div>
+        <div class="print col-md-4 text-center">
+          <div class="icon center-block img-circle">
+            <img src="img/icon-print.png" alt="print icon" width="60px" class="text-center" />
+          </div>
+          <h3>Print the guide</h3>
+          <p>
+            Download the printable version and organize a Giving Guide Giveaway to share it with your community
+          </p>
+        </div>
+        <div class="donate col-md-4 text-center">
+          <div class="icon center-block img-circle">
+            <img src="img/icon-donate.png" alt="donate icon" width="60px" class="text-center" />
+          </div>
+          <h3>Donate</h3>
+          <p>
+            Remember that donating to a nonprofit in someone's name is at least as meaningful as buying them an electronic device.
+          </p>
+        </div>
       </div>
     </div>
   </div>
-</div>
-
-<div class="actions">
-  <div class="container">
-    <div class="row">
-      <div class="share col-md-4 text-center">
-        <div class="icon center-block img-circle">
-          <img src="img/icon-share.png" alt="sharing icon" width="60px" class="text-center"/>
-        </div>
-        <h3>Share</h3>
-        <p>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
-        </p>
+  <!--End Actions-->
+
+  <div class="comparisons">
+    <!--Begin Comparisons-->
+    <!--Smartphones-->
+    <div class="container">
+      <h3 class="title text-center">Smartphones</h3>
+      <div class="row">
+        <div class="good col-md-6">
+          <img src="https://static.fsf.org/nosvn/images/givingguide/images/tehnoetic-s2.png" alt="replicant phone" class="center-block" width="80px" />
+          <h5 class="text-center">Tehnoetic S2 with Replicant</h5>
+          <ul>
+            <li>Fully free software, based on Android.</li>
+            <li><a href="http://redmine.replicant.us/projects/replicant/wiki/ReplicantStatus#Replicant-42">Supported devices</a> include both phones and tablets.</li>
+            <li>Works on used devices, so your dollars won't go to proprietary OS companies. (All commercially available Android devices ship with some proprietary software.)</li>
+          </ul>
+          <button type="button" name="buy" class="buy center-block">Buy</button>
+        </div>
+        <!--End Good-->
+
+        <div class="bad col-md-6">
+          <img src="img/products/iphone-blocked.png" alt="iphone" class="center-block" width="80px" />
+          <h5 class="text-center">iPhone</h5>
+          <ul>
+            <li>Comes with no shortage of <a href="https://www.gnu.org/philosophy/proprietary-surveillance.html#SpywareIniThings">spyware</a>.</li>
+            <li>
+              iOS is a fully proprietary operating system, giving Apple control over the software on the devices.
+            </li>
+            <li>
+              Apple uses <a href="http://www.defectivebydesign.org/what_is_drm_digital_restrictions_management">DRM</a> to block competing software.
+            </li>
+          </ul>
+        </div>
+        <!--End Bad-->
       </div>
-      <div class="print col-md-4 text-center">
-        <div class="icon center-block img-circle">
-          <img src="img/icon-print.png" alt="print icon" width="60px" class="text-center"/>
-        </div>
-        <h3>Print the guide</h3>
-        <p>
-          Download the printable version and organize a Giving Guide Giveaway to share it with your community
-        </p>
+      <!--End Row-->
+    </div>
+    <!--End Container-->
+
+    <!--Full-sized Laptops-->
+    <div class="container">
+      <h3 class="title text-center">Full-sized Laptops</h3>
+      <div class="row">
+        <div class="good col-md-6">
+          <img src="https://static.fsf.org/nosvn/images/givingguide/images/minifree-t400.png" alt="t400" class="center-block" width="250px" />
+          <h5 class="text-center">Minifree T400 with GNU/Linux</h5>
+          <ul>
+            <li>As free as can be: runs the <a href="https://www.gnu.org/distros/free-distros.en.html">FSF-endorsed</a> Trisquel operating system and libreboot firmware on hardware that is <a href="https://www.fsf.org/ryf">certified to Respect Your Freedom</a>.</li>
+            <li>Durable hardware is meant to last and easy to repair.</li>
+            <li>Created by a small business that replaces all restrictive components from a stock laptop.</li>
+          </ul>
+          <button type="button" name="buy" class="buy center-block">Buy</button>
+        </div>
+        <!--End Good-->
+
+        <div class="bad col-md-6">
+          <img src="img/products/macbook-blocked.png" alt="macbook" class="center-block" width="250px" />
+          <h5 class="text-center">Apple Macbook Pro with macOS</h5>
+          <ul>
+            <li>Runs on proprietary software that restricts the user's freedoms.</li>
+            <li>
+              Apple's App Store uses <a href="https://www.defectivebydesign.org/what_is_drm_digital_restrictions_management">DRM</a> to restrict what you can do with your purchases.
+            </li>
+            <li>Comes crawling with <a href="https://www.gnu.org/philosophy/proprietary-surveillance.html#SpywareInMacOS">spyware</a>.</li>
+          </ul>
+        </div>
+        <!--End Bad-->
       </div>
-      <div class="donate col-md-4 text-center">
-        <div class="icon center-block img-circle">
-          <img src="img/icon-donate.png" alt="donate icon" width="60px" class="text-center"/>
-        </div>
-        <h3>Donate</h3>
-        <p>
-          Remember that donating to a nonprofit in someone's name is at least as meaningful as buying them an electronic device.
-        </p>
+      <!--End Row-->
+    </div>
+    <!--End Container-->
+
+    <!--Compact Laptops-->
+    <div class="container">
+      <h3 class="title text-center">Compact Laptops</h3>
+      <div class="row">
+        <div class="good col-md-6">
+          <img src="https://static.fsf.org/nosvn/images/givingguide/images/libiquity-x200.png" alt="replicant phone" class="center-block" width="250px" />
+          <h5 class="text-center">Libiquity Taurinus X200 with GNU/Linux</h5>
+          <ul>
+            <li>As free as can be: runs the <a href="https://www.gnu.org/distros/free-distros.en.html">FSF-endorsed</a> Trisquel operating system and libreboot firmware on hardware that is certified to Respect Your Freedom.</li>
+            <li>Durable hardware is meant to last and easy to repair.</li>
+            <li>Created by a small business that replaces all restrictive components from a stock laptop.</li>
+          </ul>
+          <button type="button" name="buy" class="buy center-block">Buy</button>
+        </div>
+        <!--End Good-->
+
+        <div class="bad col-md-6">
+          <img src="img/products/lenovo-blocked.png" alt="lenovo" class="center-block" height="150px" />
+          <h5 class="text-center">Lenovo U31 with Windows</h5>
+          <ul>
+            <li>Runs on proprietary software that profits from treating the user as a product -- <a href="https://edri.org/microsofts-new-small-print-how-your-personal-data-abused/">each account is assigned an advertising ID</a> to help Microsoft sell user
+              data.
+            </li>
+            <!-- Commented out pending citation or confirmation <li>Includes Management Engine, a hardware-based backdoor that gives Intel a permanent backdoor into your computer.</li>-->
+            <li>Mandatory Windows updates force users to test potentially unstable new versions. <a href="https://www.fsf.org/campaigns/windows">Read more about Windows's abuses.</a></li>
+          </ul>
+        </div>
+        <!--End Bad-->
       </div>
+      <!--End Row-->
     </div>
-  </div>
-</div>
-
-<div class="comparisons">
-  <div class="container">
-    <h3 class="text-center">Smartphones</h3>
-    <div class="row">
-      <div class="good col-md-6">
-        <img src="img/products/replicant.jpg" alt="replicant phone" class="center-block" width="80px"/>
-        <h5 class="text-center">Tehnoetic S2 with Replicant</h5>
-        <ul>
-          <li>Fully free software, based on Android.</li>
-          <li><a href="http://redmine.replicant.us/projects/replicant/wiki/ReplicantStatus#Replicant-42">Supported devices</a> include both phones and tablets.</li>
-          <li>Works on used devices, so your dollars won't go to proprietary OS companies. (All commercially available Android devices ship with some proprietary software.)</li>
-        </ul>
-        <button type="button" name="buy" class="buy center-block">Buy</button>
+    <!--End Container-->
+
+    <!--3D Printers-->
+    <div class="container">
+      <h3 class="title text-center">3D Printers</h3>
+      <div class="row">
+        <div class="good col-md-6">
+          <img src="https://static.fsf.org/nosvn/images/givingguide/images/lulzbot-mini.png" alt="replicant phone" class="center-block" width="250px" />
+          <h5 class="text-center">Lulzbot Mini</h5>
+          <ul>
+            <li><a href="https://www.fsf.org/ryf">Respects Your Freedom-certified</a> by the FSF to run with all free software, making 3D printing more accessible and encouraging innovation.</li>
+            <li>Ease of use features like self-leveling and self-cleaning.</li>
+            <li>Hardware designs available to make modification and improvement easy. Standardized material format allows 3D printing with plastics, wood-, stone-, bamboo-, rubber-, and metal-like materials.</li>
+          </ul>
+          <button type="button" name="buy" class="buy center-block">Buy</button>
+        </div>
+        <!--End Good-->
+
+        <div class="bad col-md-6">
+          <img src="img/products/printer-blocked.png" alt="printer" class="center-block" height="250px" />
+          <h5 class="text-center">Makerbot Replicator Mini</h5>
+          <ul>
+            <li>
+              MakerWare software is proprietary, restricting freedom and stifling innovation.
+            </li>
+
+            <li>
+              MakerBot was founded with a more freedom-respecting philosophy, but has since announced an increasingly proprietary approach and distanced itself from the community that formed around it.
+            </li>
+          </ul>
+        </div>
+        <!--End Bad-->
       </div>
+      <!--End Row-->
+    </div>
+    <!--End Container-->
 
-      <div class="bad col-md-6">
-        <img src="img/products/iphone-blocked.png" alt="iphone" class="center-block" width="80px"/>
-        <h5 class="text-center">iPhone</h5>
-        <ul>
-          <li>Comes with no shortage of <a href="https://www.gnu.org/philosophy/proprietary-surveillance.html#SpywareIniThings">spyware</a>.</li>
-          <li>
-          iOS is a fully proprietary operating system, giving Apple control over the software on the devices.
-          </li>
-          <li>
-          Apple uses <a href="http://www.defectivebydesign.org/what_is_drm_digital_restrictions_management">DRM</a> to block competing software.
-          </li>
-        </ul>
+    <!--Wi-Fi Routers-->
+    <div class="container">
+      <h3 class="title text-center">Wi-Fi Routers</h3>
+      <div class="row">
+        <div class="good col-md-6">
+          <img src="https://static.fsf.org/nosvn/images/givingguide/images/librecmc-router.jpg" alt="replicant phone" class="center-block" width="250px" />
+          <h5 class="text-center">ThinkPenguin Router</h5>
+          <ul>
+            <li>
+              Easily separate privacy-sensitive network traffic from Internet traffic to improve security.
+            </li>
+            <li>As free as can be: runs the <a href="https://www.gnu.org/distros/free-distros.en.html">FSF-endorsed</a> LibreCMC operating system on hardware that is certified to Respect Your Freedom.</li>
+          </ul>
+          <button type="button" name="buy" class="buy center-block">Buy</button>
+        </div>
+        <!--End Good-->
+
+        <div class="bad col-md-6">
+          <img src="img/products/router-blocked.png" alt="printer" class="center-block" height="150px" />
+          <h5 class="text-center">ISP-provided Routers</h5>
+          <ul>
+            <li>
+              Proprietary firmware means that there's no way for you to know whether it's spying on you -- and it handles all your Internet traffic as well as local print jobs and file transfers.
+            </li>
+            <li>
+              Many models are subject to remote firmware updates from your Internet Service Provider, which probably does not have your best interests in mind -- these same companies fight net neutrality.
+            </li>
+          </ul>
+        </div>
+        <!--End Bad-->
       </div>
+      <!--End Row-->
+    </div>
+    <!--End Container-->
 
+    <!--eBooks-->
+    <div class="container">
+      <h3 class="title text-center">eBooks</h3>
+      <div class="row">
+        <div class="good col-md-6">
+          <img src="https://static.fsf.org/fsforg/img/ProjectGutenbergPrepped.png" alt="replicant phone" class="center-block" width="250px" />
+          <h5 class="text-center">Project Gutenberg</h5>
+          <ul>
+            <li>All of the ebooks are gratis, including classics like Peter Pan and Huck Finn.</li>
+            <li>The original purveyor of eBooks free of <a href="http://www.defectivebydesign.org/what_is_drm_digital_restrictions_management">DRM</a> (Digital Restrictions Management), <a href="https://www.defectivebydesign.org/guide/ebooks">inspiring many others</a>.</li>
+            <li>Enjoy the freedom to read your ebooks on any device.</li>
+          </ul>
+          <button type="button" name="buy" class="buy center-block">Buy</button>
+        </div>
+        <!--End Good-->
+
+        <div class="bad col-md-6">
+          <img src="img/products/amazon-blocked.png" alt="printer" class="center-block" height="70px" />
+          <h5 class="text-center">Amazon.com</h5>
+          <ul>
+            <li>
+              Amazon can remotely block or delete individual ebooks or your entire library with no warning or explanation (<a href="http://www.defectivebydesign.org/node/2250">they've done
+                                it before</a>).
+            </li>
+            <li>
+              Amazon uses <a href="http://www.defectivebydesign.org/what_is_drm_digital_restrictions_management">DRM</a> to prevent you from sharing your favorite books with friends or moving them between readers.
+            </li>
+            <li>
+              Amazon openly claims
+              <a href="http://www.defectivebydesign.org/amazon-kindle-swindle">
+                                    you don't actually own or control your
+                                    ebooks.
+                                </a>
+            </li>
+            <li class="neutral">If you insist on purchasing from Amazon, at least designate a charity like the Free Software Foundation at <a href="https://smile.amazon.com">smile.amazon.com</a> to receive some of the money.</li>
+          </ul>
+        </div>
+        <!--End Bad-->
+      </div>
+      <!--End Row-->
     </div>
+    <!--End Container-->
+
+    <!--3D Printers-->
+    <div class="container">
+      <h3 class="title text-center">3D Printers</h3>
+      <div class="row">
+        <div class="good col-md-6">
+          <img src="https://static.fsf.org/nosvn/images/givingguide/images/lulzbot-mini.png" alt="replicant phone" class="center-block" width="250px" />
+          <h5 class="text-center">Lulzbot Mini</h5>
+          <ul>
+            <li><a href="https://www.fsf.org/ryf">Respects Your Freedom-certified</a> by the FSF to run with all free software, making 3D printing more accessible and encouraging innovation.</li>
+            <li>Ease of use features like self-leveling and self-cleaning.</li>
+            <li>Hardware designs available to make modification and improvement easy. Standardized material format allows 3D printing with plastics, wood-, stone-, bamboo-, rubber-, and metal-like materials.</li>
+          </ul>
+          <button type="button" name="buy" class="buy center-block">Buy</button>
+        </div>
+        <!--End Good-->
+
+        <div class="bad col-md-6">
+          <img src="img/products/printer-blocked.png" alt="printer" class="center-block" height="250px" />
+          <h5 class="text-center">Makerbot Replicator Mini</h5>
+          <ul>
+            <li>
+              MakerWare software is proprietary, restricting freedom and stifling innovation.
+            </li>
+
+            <li>
+              MakerBot was founded with a more freedom-respecting philosophy, but has since announced an increasingly proprietary approach and distanced itself from the community that formed around it.
+            </li>
+          </ul>
+        </div>
+        <!--End Bad-->
+      </div>
+      <!--End Row-->
+    </div>
+    <!--End Container-->
   </div>
-</div>
-    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
-    <script src="js/jquery-2.2.2.min.js" charset="utf-8"></script>
-    <!-- Include all compiled plugins (below), or include individual files as needed -->
-    <script src="js/bootstrap.min.js" charset="utf-8"></script>
-    <script src="js/magic.js" charset="utf-8"></script>
-  </body>
+  <!--End comparisons-->
+
+  <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
+  <script src="js/jquery-2.2.2.min.js" charset="utf-8"></script>
+  <!-- Include all compiled plugins (below), or include individual files as needed -->
+  <script src="js/bootstrap.min.js" charset="utf-8"></script>
+  <script src="js/magic.js" charset="utf-8"></script>
+</body>
+
 </html>

diff --git a/img/Line.svg b/img/Line.svg
new file mode 100644 (file)
index 0000000..6801f6b
--- /dev/null
+++ b/img/Line.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="141px" height="3px" viewBox="0 0 141 3" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
+    <title>Line</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
+        <g id="Mobile-Copy-2" transform="translate(-90.000000, -1527.000000)" stroke="#FFD429" stroke-width="3">
+            <path d="M91.5,1528.5 L229.503616,1528.5" id="Line"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file

diff --git a/img/bad-pattern.png b/img/bad-pattern.png
index d8b04d148b2e52938531e4e260f21bde825151c7..49e2e17dab54e8b26a06486a7a5d8a2ee7196a7d 100644 (file)
Binary files a/img/bad-pattern.png and b/img/bad-pattern.png differ

diff --git a/img/neutral.svg b/img/neutral.svg
new file mode 100644 (file)
index 0000000..b2e197a
--- /dev/null
+++ b/img/neutral.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="19px" height="19px" viewBox="0 0 19 19" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
+    <title>neutral copy</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <circle id="path-1" cx="9.5" cy="9.5" r="6.5"></circle>
+        <mask id="mask-2" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="-3" y="-3" width="19" height="19">
+            <rect x="0" y="0" width="19" height="19" fill="white"></rect>
+            <use xlink:href="#path-1" fill="black"></use>
+        </mask>
+    </defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="neutral-copy" stroke="#FFD429" stroke-width="6">
+            <use id="Oval-2" mask="url(#mask-2)" xlink:href="#path-1"></use>
+        </g>
+    </g>
+</svg>
\ No newline at end of file

diff --git a/img/products/amazon-blocked.png b/img/products/amazon-blocked.png
new file mode 100644 (file)
index 0000000..c060940
Binary files /dev/null and b/img/products/amazon-blocked.png differ

diff --git a/img/products/lenovo-blocked.png b/img/products/lenovo-blocked.png
new file mode 100644 (file)
index 0000000..76f6916
Binary files /dev/null and b/img/products/lenovo-blocked.png differ

diff --git a/img/products/macbook-blocked.png b/img/products/macbook-blocked.png
new file mode 100644 (file)
index 0000000..8b7ae46
Binary files /dev/null and b/img/products/macbook-blocked.png differ

diff --git a/img/products/printer-blocked.png b/img/products/printer-blocked.png
new file mode 100644 (file)
index 0000000..1611b09
Binary files /dev/null and b/img/products/printer-blocked.png differ

diff --git a/img/products/router-blocked.png b/img/products/router-blocked.png
new file mode 100644 (file)
index 0000000..50d0da0
Binary files /dev/null and b/img/products/router-blocked.png differ

diff --git a/img/underline.svg b/img/underline.svg
new file mode 100644 (file)
index 0000000..305f2ec
--- /dev/null
+++ b/img/underline.svg
@@ -0,0 +1,3 @@
+<svg width="141px" height="3px" viewBox="0 0 141 3" xmlns="http://www.w3.org/2000/svg">
+    <g fill="none" fill-rule="evenodd" stroke-linecap="round"><path d="m91.5 1528.5h138" transform="translate(-90-1527)" stroke="#ffd429" stroke-width="3"/></g>
+</svg>