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: #fff;
  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: 0.5em; margin-top: 0.5em;}
  52
  53 h1 {  font-size: 2.20em;  font-family: 'Signika Light'; color: #2CAF8F; 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 }
  66
  67 /* Navbar */
  68
  69 .header_wrapper {
  70   background-color: #2CAF8F;
  71   height: 486px;
  72 }
  73
  74 .header a {
  75   border-bottom: 0;
  76 }
  77
  78 .navbar_wrapper {
  79   max-width: 1300px;
  80   min-width: 1110px;
  81   margin: auto;
  82   text-align: center;
  83 }
  84
  85 .logo_wrapper {
  86   padding: 1.3em;
  87   float: left;
  88 }
  89
  90 .join_wrapper {
  91   padding: 1.2em;
  92   float: right;
  93   display: inline-block;
  94 }
  95
  96 .logo, .join {
  97   max-width: 200px;
  98   min-width: 200px;
  99 }
 100
 101 .share_wrapper {
 102 }
 103
 104 .share {
 105   position: relative;
 106   bottom: 0.8em;
 107   text-align: center;
 108 }
 109
 110 .share a{
 111   background-color: #FDD53A;
 112   border-bottom: 0;
 113   padding: .6em 2em;
 114   font-family: 'Signika Bold';
 115   font-size: 1.4em;
 116   color: #2CAF8F;
 117   border-radius: 50em;
 118 }
 119
 120 .share a:hover {
 121   background-color: #FDDE56;
 122 }
 123
 124 .navbar {
 125   width: 537px;
 126   padding: 1em;
 127   height: 2.55556em;
 128   display: inline-block;
 129 /*   float: left; */
 130 }
 131
 132 .navbar li {
 133   font-family: 'Signika Regular';
 134   font-size: 1em;
 135   background-color: white;
 136   list-style-type: none;
 137   border-right: 1px #9BD2BF solid;
 138   padding: 0 30px 0 30px;
 139   line-height: 2.6;
 140   float: left;
 141 }
 142
 143 .navbar li:first-child {
 144   border-radius: 100px 0 0 100px;
 145 }
 146
 147 .navbar li:last-child {
 148   border-right: 0;
 149   border-radius: 0 100px 100px 0;
 150 }
 151
 152 .navbar li:hover {
 153   background-color: #FFDD55;
 154 }
 155
 156 .navbar li a {
 157   display: block;
 158   text-decoration: none;
 159 }
 160
 161 .navbar li a:hover {
 162   color: #4B423B;
 163 }
 164
 165 .intro,
 166 .share {
 167   max-width: 1300px;
 168   min-width: 1170px;
 169   margin: auto;
 170 }
 171
 172 .intro_wrapper,
 173 .intro_img {
 174   max-width: 500px;
 175   min-width: 00px;
 176 }
 177
 178 .intro_wrapper {
 179   float: right;
 180   color: white;
 181   padding-right: 4em;
 182 }
 183
 184 .intro_img{
 185   float: left;
 186   padding-left: 4em;
 187 }
 188
 189 .intro_wrapper h2 {
 190   color: #FFDD55;
 191 }
 192
 193 .intro_wrapper a {
 194   border-bottom: 1px solid #FDD53A;
 195   color: #FDD53A;
 196 }
 197
 198 .intro_img img{
 199   padding-top: 1.7em;
 200   width: 100%;
 201 }
 202
 203 /* Comparisons */
 204
 205 .wrapper,
 206 .section_wrapper,
 207 .buy_avoid,
 208 .recommended,
 209 .licenses {
 210   max-width: 750px;
 211   min-width: 750px;
 212   margin: auto;
 213 }
 214
 215 .main_title {
 216   width: 100%;
 217   text-align: left;
 218   border-bottom: 1px solid lightgray;
 219   margin-top: 3em;
 220   margin-bottom: 2em;
 221   display: inline-block;
 222 }
 223
 224 .buy a {
 225   border-bottom: none;
 226 }
 227
 228 .product_img {
 229   margin: auto;
 230   max-width: 168px;
 231   max-height: 168px;
 232   position: relative;
 233 }
 234
 235 .product {
 236   text-align: center;
 237   position: relative;
 238   margin: auto;
 239   display: block;
 240   height: 168px;
 241   width: 168px;
 242   /* margin-bottom: 8em; */
 243 /*   max-height: 168px; */
 244 }
 245 /*
 246  .proprietary .product_img:after {
 247   content: "";
 248   background-image: url("images/bad.png");
 249   background-size: 25px;
 250   background-repeat: no-repeat;
 251   width: 25px;
 252   height: 25px;
 253   position: absolute;
 254 }
 255
 256  .free h4:after {
 257   content: "";
 258   background-image: url("images/good.png");
 259   background-size: 25px;
 260   background-repeat: no-repeat;
 261   width: 25px;
 262   height: 25px;
 263   position: absolute;
 264 }
 265  */
 266
 267
 268 .good,
 269 .bad {
 270   z-index: 999;
 271   width: 65px;
 272   top: 8em;
 273   left: 9em;
 274   position: absolute;
 275
 276 }
 277
 278
 279 .free, .proprietary {
 280   text-align: center;
 281 }
 282
 283 .free li,
 284 .proprietary li {
 285   text-align: left;
 286 }
 287
 288 .buy img,
 289 .avoid img {
 290   max-width: 151px;
 291   height: 42px;
 292 }
 293
 294 .buy_avoid_wrapper {
 295   margin-top: 2em;
 296   min-width: 100%;
 297   max-width: 100%;
 298   display: inline-block;
 299 }
 300
 301 .buy {
 302   text-align: center;
 303   margin: auto;
 304   width: 45.555555%;
 305   float: left;
 306
 307 }
 308
 309 .avoid {
 310   text-align: center;
 311   margin: auto;
 312   width: 45.555555%;
 313   float: right;
 314 }
 315
 316 .free {
 317   float: left;
 318   width: 45.555555%;
 319 }
 320
 321 .proprietary {
 322   float: right;
 323   width: 45.555555%;
 324 }
 325
 326 /* Recommended Section */
 327
 328 .topic_title {
 329   border-bottom: 1px solid #2CAF8F;
 330   width: 100%;
 331   text-align: left;
 332   margin-top: 3em;
 333   display: inline-block;
 334 }
 335
 336 .recommend_wrapper {
 337   padding-top: 1em;
 338   margin: auto;
 339   width: 750px;
 340 }
 341
 342 .recommended_product {
 343   text-align: center;
 344   width: 29%;
 345   margin: 1em;
 346   display: inline-block
 347 }
 348
 349 .recommended_product_img {
 350   width: 120px;
 351 }
 352
 353 .recommend_wrapper .buy {
 354   float: none;
 355   text-align: center;
 356   width: 100%;
 357 }
 358
 359 .remark {
 360   margin-top: 3em;
 361   font-weight: bold;
 362 }
 363
 364 /* Licenses */
 365
 366 .licenses h1 {
 367   margin-top: 0.6em;
 368 }
 369
 370 /* Footer */
 371
 372 footer {
 373   display: block;
 374   background-color: #1a1a1a;
 375 }
 376
 377 .footer_wrapper {
 378   width: 750px;
 379   margin: auto;
 380   padding: 2em;
 381   color: white;
 382 }