From: Reda Lazri <the.red.shortcut@gmail.com>
Date: Fri, 2 Sep 2016 18:09:59 +0000 (+0100)
Subject: Added the 'Recommended Template'
X-Git-Url: https://vcs.fsf.org/?a=commitdiff_plain;h=77c767cbacd44f5676ea70a3c2d386aba3e6386c;p=fsf-giving-guide.git

Added the 'Recommended Template'
---

diff --git a/css/master.css b/css/master.css
index 7bb2eaf..ed5b250 100644
--- a/css/master.css
+++ b/css/master.css
@@ -460,6 +460,25 @@ li.neutral {
   text-align: center;
 }
 
+/*Recommended Lines*/
+
+.recommended-section {
+  padding-top: 30px;
+  padding-bottom: 30px;
+}
+
+/*.recommended-img {
+  position: relative;
+}
+
+.recommended-img > img {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%, -50%);
+          transform: translate(-50%, -50%);
+}*/
+
 /*Charities*/
 
 .charities {
diff --git a/givingguide.html b/givingguide.html
index 44ab55e..2b17fd6 100644
--- a/givingguide.html
+++ b/givingguide.html
@@ -196,6 +196,26 @@
     </div>
     <!--End Container-->
 
+    <!-- Begin Recommended Template -->
+    <div class="container recommended-section">
+      <div class="row">
+        <div class="col-md-6 col-sm-6 recommended-img">
+          <img src="https://static.fsf.org/nosvn/images/givingguide/images/minifree-t400.png" alt="t400" class="center-block" width="250" />
+        </div>
+        <div class="col-md-6 col-sm-6">
+          <h5 class="text-center">Minifree T400 with GNU/Linux</h5>
+          <ul class="pros">
+            <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>
+        </div>
+      </div>
+      <!-- End Row -->
+    </div>
+    <!-- End Container -->
+
+
     <!--Full-sized Laptops-->
     <div class="container">
       <h3 class="title text-center">Full-sized Laptops</h3>