Added a 'Recommended' section
authorReda Lazri <the.red.shortcut@gmail.com>
Tue, 18 Nov 2014 12:18:12 +0000 (13:18 +0100)
committerReda Lazri <the.red.shortcut@gmail.com>
Tue, 18 Nov 2014 12:18:12 +0000 (13:18 +0100)
givingguide.html
stylesheet.css

index b347cc5..53a50b9 100755 (executable)
                                </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-->
 
 
                                                                <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>
 
 
                                                                <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>
 
                                                </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>
 
                                                        <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>
 
                                        </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>
 
index e44d21d..90468c3 100755 (executable)
@@ -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;
+}