From: Reda Lazri <the.red.shortcut@gmail.com>
Date: Sat, 15 Nov 2014 15:27:59 +0000 (+0100)
Subject: Added comparisons; broken header, again.
X-Git-Url: https://vcs.fsf.org/?a=commitdiff_plain;h=c8033ceb5bbe5964ff5e25d63df7cc9d3bbbdea6;p=fsf-giving-guide.git

Added comparisons; broken header, again.
---

diff --git a/givingguide.html b/givingguide.html
index d54eb2c..f7aea8c 100755
--- a/givingguide.html
+++ b/givingguide.html
@@ -131,75 +131,148 @@
 
 		<!--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 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 class="comparisons">
+					<div class="section_wrapper_1">
+						<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="Windows"/>
+								<img class="product_img" src="images/linux.png" alt="Linux"/>
+							</div>
 
-				<div id="sign">
-					<img class="sign" src="images/sign.png" alt="compared"/>
-					<img class="separator" src="images/separator.png" alt="separator"/>
-				</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="#"><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>
+					</div>
+
+					<br> <!-- SEPARATOR -->
+
+					<div class="section_wrapper_2">
+						<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="#"><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>
+					</div>
+
+
+					<br> <!-- SEPARATOR -->
+
+					<div class="section_wrapper_2">
+						<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="#"><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>
+					</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 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>
diff --git a/images/avoid.png b/images/avoid.png
new file mode 100644
index 0000000..3c69c6f
Binary files /dev/null and b/images/avoid.png differ
diff --git a/images/bad.png b/images/bad.png
new file mode 100644
index 0000000..883ad38
Binary files /dev/null and b/images/bad.png differ
diff --git a/images/download.png b/images/download.png
new file mode 100644
index 0000000..bdc2f74
Binary files /dev/null and b/images/download.png differ
diff --git a/images/good.png b/images/good.png
new file mode 100644
index 0000000..451c817
Binary files /dev/null and b/images/good.png differ
diff --git a/images/join.png b/images/join.png
index 9eb26a4..f5a5996 100644
Binary files a/images/join.png and b/images/join.png differ
diff --git a/images/linux.png b/images/linux.png
index b6cd96e..1312a6b 100644
Binary files a/images/linux.png and b/images/linux.png differ
diff --git a/stylesheet.css b/stylesheet.css
index 98e7467..76a9373 100755
--- a/stylesheet.css
+++ b/stylesheet.css
@@ -64,13 +64,17 @@ h6 {  font-size: 1.125em; font-family: 'Signika Light'; color: #4d4d4d; margin-b
 
 .header {
   background-image: url("images/banner.png");
-  background-color: #2CAF8F;
+/*   background-color: #2CAF8F; */
   background-repeat: no-repeat;
   height: 710px;
-  background-size: 800px;
-  background-position: center;
+  background-size: 550px;
+  background-position: 5% 30%;
 }
 
+.navbar {
+  background-color: #2CAF8F;
+  height: 64px;
+}
 .header a {
   border-bottom: 0;
 }
@@ -128,8 +132,7 @@ h6 {  font-size: 1.125em; font-family: 'Signika Light'; color: #4d4d4d; margin-b
   color: #4B423B;
 }
 
-.wrapper,
-.section_wrapper {
+.wrapper {
   width: 750px;
   margin: auto;
 }
@@ -145,3 +148,64 @@ h6 {  font-size: 1.125em; font-family: 'Signika Light'; color: #4d4d4d; margin-b
   margin: 1.2em auto;
   color: #bababa;
 }
+
+.comparisons {
+}
+
+.section_wrapper_1,
+.section_wrapper_2{
+  display: block;
+  position: relative;
+/*   float: right; */
+  width: 750px;
+  margin: auto;
+}
+
+.section_wrapper_1 h3 {
+  margin-top: 3em;
+}
+
+.buy a {
+  border-bottom: none;
+}
+
+.product_img,
+.product {
+  margin: auto;
+  width: 168px;
+}
+
+.good,
+.bad {
+  position: relative;
+  top: 175px;
+  left: 84px;
+  width: 60px;
+}
+
+.buy, .avoid,
+.free, .proprietary {
+  text-align: center;
+}
+
+.free li,
+.proprietary li {
+  text-align: left;
+}
+
+.buy img,
+.avoid img {
+  margin-top: 2em;
+  max-width: 151px;
+  height: 42px;
+}
+
+.free {
+  float: left;
+  width: 45%;
+}
+
+.proprietary {
+  float: right;
+  width: 45%;
+}