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