From f5810b4582ebc5efcb8e14991e2884cb009c5ba5 Mon Sep 17 00:00:00 2001
From: Reda Lazri <the.red.shortcut@gmail.com>
Date: Tue, 18 Nov 2014 13:18:12 +0100
Subject: [PATCH] Added a 'Recommended' section

---
 givingguide.html | 141 +++++++++++++++++++++--------------------------
 stylesheet.css   |  32 ++++++++++-
 2 files changed, 94 insertions(+), 79 deletions(-)

diff --git a/givingguide.html b/givingguide.html
index b347cc5..53a50b9 100755
--- a/givingguide.html
+++ b/givingguide.html
@@ -68,72 +68,6 @@
 				</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> -->
-
 
 		<!--We compare different products from here-->
 
@@ -156,7 +90,7 @@
 
 								<div class="buy">
 
-									<a href="http://fedoraproject.org/"><img src="images/download.png" alt="download" /></a>
+									<a href="http://fedoraproject.org/"><img src="images/download.png" alt="Download" /></a>
 
 								</div>
 
@@ -203,7 +137,7 @@
 
 								<div class="buy">
 
-									<a href="http://fedoraproject.org/"><img src="images/buy.png" alt="download" /></a>
+									<a href="http://fedoraproject.org/"><img src="images/buy.png" alt="Buy" /></a>
 
 								</div>
 
@@ -231,14 +165,6 @@
 						</div>
 				</div>
 
-				<div class="recomended">
-					<div class="recomend_wrapper">
-						<h3 class="main_title">Recomended Products</h3>
-
-
-					</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>
@@ -258,7 +184,7 @@
 
 							<div class="buy">
 
-								<a href="http://fedoraproject.org/"><img src="images/download.png" alt="download" /></a>
+								<a href="http://fedoraproject.org/"><img src="images/download.png" alt="Download" /></a>
 
 							</div>
 
@@ -286,6 +212,67 @@
 					</div>
 			</div>
 
+			<div class="recommended">
+				<h3 class="recommend_title">Recomended Products</h3>
+
+				<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="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>
 
 	</body>
 
diff --git a/stylesheet.css b/stylesheet.css
index e44d21d..90468c3 100755
--- a/stylesheet.css
+++ b/stylesheet.css
@@ -74,7 +74,7 @@ h6 {  font-size: 1.125em; font-family: 'Signika Light'; color: #4d4d4d; margin-b
 
 .header_wrapper {
   background-color: #2CAF8F;
-  height: 500px;
+  height: 450px;
 }
 
 .header a {
@@ -187,7 +187,8 @@ h6 {  font-size: 1.125em; font-family: 'Signika Light'; color: #4d4d4d; margin-b
 /* Comparisons */
 
 .wrapper,
-.section_wrapper {
+.section_wrapper,
+.recommended {
   width: 750px;
   min-width: 750px;
   margin: auto;
@@ -243,3 +244,30 @@ h6 {  font-size: 1.125em; font-family: 'Signika Light'; color: #4d4d4d; margin-b
   float: right;
   width: 45%;
 }
+
+/* Recommended Section */
+
+.recommend_title {
+  border-bottom: 1px solid #2CAF8F;
+  width: 100%;
+  text-align: left;
+  margin-top: 3em;
+  display: inline-block;
+}
+
+.recommend_wrapper {
+  padding-top: 1em;
+  margin: auto;
+  width: 750px;
+}
+
+.recommended_product {
+  text-align: center;
+  width: 29%;
+  margin: 1em;
+  display: inline-block
+}
+
+.recommended_product_img {
+  width: 120px;
+}
-- 
2.25.1