stylesheet.css

   1 /*Typography*/
   2
   3 @font-face {
   4     font-family: 'Signika Regular';
   5     src: local('Signika Regular'), url('fonts/Signika-Regular.ttf') format('truetype');
   6 }
   7
   8 @font-face {
   9     font-family: 'Signika Light';
  10     src: local('Signika Light'), url('fonts/Signika-Light.ttf') format('truetype');
  11 }
  12
  13 @font-face {
  14     font-family: 'Signika Bold';
  15     src: local('Signika Bold'), url('fonts/Signika-Bold.ttf') format('truetype');
  16 }
  17
  18 @font-face {
  19     font-family: 'Open Sans';
  20     src: local('Open Sans'), url('fonts/OpenSans-Regular.ttf') format('truetype');
  21 }
  22
  23 @font-face {
  24     font-family: 'Open Sans Bold';
  25     src: local('Open Sans Bold'), url('fonts/OpenSans-Bold.ttf') format('truetype');
  26 }
  27
  28 /*Style common HTML tags*/
  29
  30 html {
  31     font-family: 'Open Sans', 'DejaVu Sans', Arial, sans-serif;
  32     font-size: 14px;
  33     line-height: 1.4;
  34     color: #363636;
  35     background-color: #fffefb;
  36     width: 100%;
  37 }
  38
  39 /* Type something: */
  40
  41 a { color: #1F8A70; border-bottom: 1px solid #dbd145; text-decoration: none; }
  42
  43 p { line-height: 1.4; margin-bottom: 1.5em; font-size: 1em; }
  44
  45 i { font-style: italic; }
  46 b { font-style: oblique; }
  47
  48 li {list-style-type: circle; padding: 0.4em 0.2em; line-height: 1.4; }
  49 /* ul {margin: 1em 2em 0em 4em;} */
  50
  51 br {margin-bottom: 20em; margin-top: 20em;}
  52
  53 h1 {  font-size: 2.75em;  font-family: 'Signika Light'; margin-bottom: 0.5em; margin-top: 1em; }
  54 h2 {  font-size: 1.75em;  font-family: 'Signika Light'; color: #2CAF8F; margin-bottom: 0.5em; margin-top: 2em; }
  55 h3 {  font-size: 1.625em; font-family: 'Signika Bold';  color: #484848; margin-bottom: 0.5em; margin-top: 2em; }
  56 h4 {  font-size: 1.375em; font-family: 'Signika Light'; color: #4d4d4d; margin-bottom: 0.5em; margin-top: 2em; }
  57 h5 {  font-size: 1.25em;  font-family: 'Signika Light'; color: #4d4d4d; margin-bottom: 0.5em; margin-top: 2em; }
  58 h6 {  font-size: 1.125em; font-family: 'Signika Light'; color: #4d4d4d; margin-bottom: 0.5em; margin-top: 2em; }
  59
  60 /*Site-specific*/
  61
  62   /* Header */
  63
  64 .header {
  65 /*   background-image: url("images/banner.png"); */
  66 /*   background-color: #2CAF8F; */
  67 /*   background-repeat: no-repeat; */
  68 /*   height: 710px; */
  69 /*   background-size: 550px; */
  70 /*   background-position: 5% 30%; */
  71 }
  72
  73 /* Navbar */
  74
  75 .header_wrapper {
  76   background-color: #2CAF8F;
  77   height: 500px;
  78 }
  79
  80 .header a {
  81   border-bottom: 0;
  82 }
  83
  84 .navbar_wrapper {
  85   max-width: 1300px;
  86   min-width: 1110px;
  87   margin: auto;
  88   text-align: center;
  89 }
  90
  91 .logo_wrapper {
  92   padding: 1.3em;
  93   float: left;
  94 }
  95
  96 .join_wrapper {
  97   padding: 1.2em;
  98   float: right;
  99   display: inline-block;
 100 }
 101
 102 .logo, .join {
 103   max-width: 200px;
 104   min-width: 200px;
 105 }
 106
 107 .share_wrapper {
 108   padding: 1.2em;
 109   float: right;
 110   display: inline-block;
 111 }
 112
 113 .share {
 114   max-width: 36px;
 115   min-width: 36px;
 116 }
 117
 118 .navbar {
 119   width: 537px;
 120   padding: 1em;
 121   height: 2.55556em;
 122   display: inline-block;
 123 /*   float: left; */
 124 }
 125
 126 .navbar li {
 127   font-family: 'Signika Regular';
 128   font-size: 1em;
 129   background-color: white;
 130   list-style-type: none;
 131   border-right: 1px #9BD2BF solid;
 132   padding: 0 30px 0 30px;
 133   line-height: 2.6;
 134   float: left;
 135 }
 136
 137 .navbar li:first-child {
 138   border-radius: 100px 0 0 100px;
 139 }
 140
 141 .navbar li:last-child {
 142   border-right: 0;
 143   border-radius: 0 100px 100px 0;
 144 }
 145
 146 .navbar li:hover {
 147   background-color: #FFDD55;
 148 }
 149
 150 .navbar li a {
 151   display: block;
 152   text-decoration: none;
 153 }
 154
 155 .navbar li a:hover {
 156   color: #4B423B;
 157 }
 158
 159 .intro {
 160   margin: auto;
 161   max-width: 1300px;
 162   min-width: 1170px;
 163 }
 164
 165 .intro_wrapper {
 166 /*   width: 40%; */
 167   max-width: 500px;
 168   min-width: 500px;
 169   float: right;
 170   color: white !important;
 171 /*   padding-right: 3em; */
 172 }
 173
 174 .intro_wrapper h2 {
 175   color: #FFDD55;
 176 }
 177
 178 .intro_img img{
 179   width: 40%;
 180   max-width: 500px;
 181   float: left;
 182   padding: 2em;
 183   padding-left: 3em;
 184
 185 }
 186
 187 /* Comparisons */
 188
 189 .wrapper,
 190 .section_wrapper {
 191   width: 750px;
 192   min-width: 750px;
 193   margin: auto;
 194 }
 195
 196 .main_title {
 197   text-align: center;
 198   margin-top: 3em;
 199   display: inline-block;
 200 }
 201
 202 .buy a {
 203   border-bottom: none;
 204 }
 205
 206 .product_img,
 207 .product {
 208   margin: auto;
 209   width: 168px;
 210 }
 211
 212 .good,
 213 .bad {
 214   position: relative;
 215   top: 175px;
 216   left: 84px;
 217   width: 60px;
 218 }
 219
 220 .buy, .avoid,
 221 .free, .proprietary {
 222   text-align: center;
 223 }
 224
 225 .free li,
 226 .proprietary li {
 227   text-align: left;
 228 }
 229
 230 .buy img,
 231 .avoid img {
 232   margin-top: 2em;
 233   max-width: 151px;
 234   height: 42px;
 235 }
 236
 237 .free {
 238   float: left;
 239   width: 45%;
 240 }
 241
 242 .proprietary {
 243   float: right;
 244   width: 45%;
 245 }