<title> 2014 Holiday Giving Guide | Free Software Foundation | Working together for free software</title>
- <meta charset="UTF-8">
-
+ <meta charset="UTF-8">
+
<!--FIXME: Is this necessary?-->
<link rel="copyright" title="Copyright information" href="http://creativecommons.org/licenses/by-nd/3.0/rdf">
<link rel="author" title="Author information" href="http://www.fsf.org/about/staff/">
<body>
<div class="header">
- <div class="top">
- <span class="logo_wrapper">
+ <div class="navbar">
+ <span class="logo_wrapper">
<a href="https://www.fsf.org/"><img class="logo" src="images/logo.png" alt="Logo" /></a>
</span>
- <span class="join_wrapper">
- <a href="http://fsf.org/jfb"><img class="join" src="images/join.png" alt="Logo" /></a>
- </span>
- </div>
- <div class="navbar">
+
<div class="nav_wrapper">
<ul>
<li><a href="https://www.fsf.org/about/">About the FSF</a></li>
<li><a href="http://shop.fsf.org/">Shop</a></li>
</ul>
</div>
+
+ <span class="join_wrapper">
+ <a href="http://fsf.org/jfb"><img class="join" src="images/join.png" alt="Logo" /></a>
+ </span>
+ </div>
+ </div>
+
+ <!-- <div class="header">
+ <div class="top">
+ <span class="logo_wrapper">
+ <a href="https://www.fsf.org/"><img class="logo" src="images/logo.png" alt="Logo" /></a>
+ </span>
+ <span class="join_wrapper">
+ <a href="http://fsf.org/jfb"><img class="join" src="images/join.png" alt="Logo" /></a>
+ </span>
+ </div>
+ <div class="navbar">
+ <div class="nav_wrapper">
+ <ul>
+ <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/licensing/">Software Licensing</a></li>
+ <li><a href="http://shop.fsf.org/">Shop</a></li>
+ </ul>
</div>
</div>
+ </div> -->
<div class="wrapper">
<div>
<!--We compare different products from here-->
- <!-- <div id="comparisons">
+ <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"/>
/*Typography*/
+@font-face {
+ font-family: 'Signika Regular';
+ src: local('Signika Regular'), url('fonts/Signika-Regular.ttf') format('truetype');
+}
+
@font-face {
font-family: 'Signika Light';
src: local('Signika Light'), url('fonts/Signika-Light.ttf') format('truetype');
html {
font-family: 'Open Sans', 'DejaVu Sans', Arial, sans-serif;
font-size: 14px;
- line-height: 1.4em;
+ line-height: 1.4;
color: #363636;
background-color: #fffefb;
width: 100%;
/* Type something: */
-a { color: #1F8A70; border-bottom: 1px solid #dbd145; text-decoration: none;}
+a { color: #1F8A70; border-bottom: 1px solid #dbd145; text-decoration: none; }
-p { line-height: 1.4em; margin-bottom: 1.5em; font-size: 1em;}
+p { line-height: 1.4; margin-bottom: 1.5em; font-size: 1em; }
i { font-style: italic; }
b { font-style: oblique; }
-li {list-style-type: circle; padding: 0.4em 0.2em; line-height: 1.4em; }
+li {list-style-type: circle; padding: 0.4em 0.2em; line-height: 1.4; }
/* ul {margin: 1em 2em 0em 4em;} */
br {margin-bottom: 20em; margin-top: 20em;}
h1 { font-size: 2.75em; font-family: 'Signika Light'; margin-bottom: 0.5em; margin-top: 1em; }
h2 { font-size: 1.75em; font-family: 'Signika Light'; color: #2CAF8F; margin-bottom: 0.5em; margin-top: 2em; }
-h3 { font-size: 1.625em; font-family: 'Signika Light'; color: #b495d3; margin-bottom: 0.5em; margin-top: 2em; }
+h3 { font-size: 1.625em; font-family: 'Signika Bold'; color: #484848; margin-bottom: 0.5em; margin-top: 2em; }
h4 { font-size: 1.375em; font-family: 'Signika Light'; color: #4d4d4d; margin-bottom: 0.5em; margin-top: 2em; }
h5 { font-size: 1.25em; font-family: 'Signika Light'; color: #4d4d4d; margin-bottom: 0.5em; margin-top: 2em; }
h6 { font-size: 1.125em; font-family: 'Signika Light'; color: #4d4d4d; margin-bottom: 0.5em; margin-top: 2em; }
background-image: url("images/banner.png");
background-color: #2CAF8F;
background-repeat: no-repeat;
- height: 776px;
+ height: 710px;
background-size: 1200px;
background-position: bottom;
}
-.logo {
- width: 247px;
- height: 29px;
- padding: 1.3em;
+.header a {
+ border-bottom: 0;
}
.logo_wrapper {
-}
-
-.join {
- width: 172px;
- height: 29px;
padding: 1.3em;
- float: right;
+ float: left
}
-.top {
- position: relative;
+.join_wrapper {
+ padding: 1.2em;
+ float: right;
}
-.top a {
- border-bottom: 0;
+.logo, .join {
+ width: 210px;
}
-.navbar ul {
- background-color: white;
- border-radius: 100px;
- text-align: center;
- width: 663px;
+.nav_wrapper {
+ padding: 1em 5em 1em 9em;
height: 2.55556em;
- margin: auto;
+ float: left;
}
.navbar li {
- font-size: 0.9em;
- font-weight: bold;
+ font-family: 'Signika Regular';
+ font-size: 1em;
+ background-color: white;
list-style-type: none;
border-right: 1px #9BD2BF solid;
- padding: 0 45px 0 45px;
- line-height: 2.9;
+ padding: 0 30px 0 30px;
+ line-height: 2.6;
float: left;
-/* width: 170px; */
- height: 2.85556em;
}
.navbar li:first-child {
border-radius: 100px 0 0 100px;
-/* width: 160px; */
}
.navbar li:last-child {
border-right: 0;
border-radius: 0 100px 100px 0;
-/* width: 92px; */
}
+
.navbar li:hover {
background-color: #FFDD55;
-
}
.navbar li a {
display: block;
text-decoration: none;
- border: 0;
-
}
.navbar li a:hover {
color: #4B423B;
}
-.wrapper {
- width: 700px;
+.wrapper,
+.section_wrapper {
+ width: 750px;
margin: auto;
}
+.main_title {
+ text-align: center;
+}
+
.wrapper .intro_phrase {
width: 450px;
text-align: center;
font-family: Signika Bold;
margin: 1.2em auto;
color: #bababa;
-
}
-
-/* #comparisons {
- padding-top: 100px;
- background-color: #fbfbfb;
- background-size: cover;
- position: absolute;
- width: 100%;
- max-width: 1150px;
-}
-
-.main_title {
- margin-left: 2em;
- margin-bottom: 3em;
-}
-
-.section_wrapper {
- margin-bottom: 4em;
-}
-
-.title {
- text-align: center;
- font-size: 1.5em;
-}
-
-#free {
- position: relative;
- background-color: red;
- float: left;
- width: 45%;
- max-width: 450px;
-}
-
-#sign {
- position: relative;
- background-color: green;
- width: 240px;
- float: left;
- margin-top: 3em;
-}
-
-#proprietary {
- position: relative;
- background-color: blue;
- width: 45%;
- max-width: 450px;
- float: right;
-}
-
-.product {
- display: block;
- margin: auto;
- width: 250px;
- height: 250px;
-}
-
-.sign {
- display: block;
- margin: auto;
- width: 149px;
- height: 149px;
-}
-
-.separator {
- width: 1px;
- height: 324px;
- margin: auto;
- margin-left: 7.5em;
- margin-top: 3em;}
-
-#section_wrapper {
- position: relative;
-} */