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
  40 /* Type something: */
  41
  42 a { color: #1F8A70; border-bottom: 1px solid #dbd145; text-decoration: none; }
  43
  44 p { line-height: 1.4; margin-bottom: 1.5em; font-size: 1em; }
  45
  46 i { font-style: italic; }
  47 b { font-style: oblique; }
  48
  49 li {list-style-type: circle; padding: 0.4em 0.2em; line-height: 1.4; }
  50 /* ul {margin: 1em 2em 0em 4em;} */
  51
  52 br {margin-bottom: 20em; margin-top: 20em;}
  53
  54 h1 {  font-size: 2.75em;  font-family: 'Signika Light'; margin-bottom: 0.5em; margin-top: 1em; }
  55 h2 {  font-size: 1.75em;  font-family: 'Signika Light'; color: #2CAF8F; margin-bottom: 0.5em; margin-top: 2em; }
  56 h3 {  font-size: 1.625em; font-family: 'Signika Bold';  color: #484848; margin-bottom: 0.5em; margin-top: 2em; }
  57 h4 {  font-size: 1.375em; font-family: 'Signika Light'; color: #4d4d4d; margin-bottom: 0.5em; margin-top: 2em; }
  58 h5 {  font-size: 1.25em;  font-family: 'Signika Light'; color: #4d4d4d; margin-bottom: 0.5em; margin-top: 2em; }
  59 h6 {  font-size: 1.125em; font-family: 'Signika Light'; color: #4d4d4d; margin-bottom: 0.5em; margin-top: 2em; }
  60
  61 /*Site-specific*/
  62
  63   /* Header */
  64
  65 .header {
  66   background-image: url("images/banner.png");
  67 /*   background-color: #2CAF8F; */
  68   background-repeat: no-repeat;
  69   height: 710px;
  70   background-size: 550px;
  71   background-position: 5% 30%;
  72 }
  73
  74 .navbar {
  75   background-color: #2CAF8F;
  76   height: 64px;
  77 }
  78 .header a {
  79   border-bottom: 0;
  80 }
  81
  82 .logo_wrapper {
  83   padding: 1.3em;
  84   float: left
  85 }
  86
  87 .join_wrapper {
  88   padding: 1.2em;
  89   float: right;
  90 }
  91
  92 .logo, .join {
  93   width: 210px;
  94 }
  95
  96 .nav_wrapper {
  97   padding: 1em 5em 1em 9em;
  98   height: 2.55556em;
  99   float: left;
 100 }
 101
 102  .navbar li {
 103   font-family: 'Signika Regular';
 104   font-size: 1em;
 105   background-color: white;
 106   list-style-type: none;
 107   border-right: 1px #9BD2BF solid;
 108   padding: 0 30px 0 30px;
 109   line-height: 2.6;
 110   float: left;
 111 }
 112
 113 .navbar li:first-child {
 114   border-radius: 100px 0 0 100px;
 115 }
 116
 117 .navbar li:last-child {
 118   border-right: 0;
 119   border-radius: 0 100px 100px 0;
 120 }
 121
 122 .navbar li:hover {
 123   background-color: #FFDD55;
 124 }
 125
 126 .navbar li a {
 127   display: block;
 128   text-decoration: none;
 129 }
 130
 131 .navbar li a:hover {
 132   color: #4B423B;
 133 }
 134
 135 .wrapper {
 136   width: 750px;
 137   margin: auto;
 138 }
 139
 140 .main_title {
 141   text-align: center;
 142 }
 143
 144 .wrapper .intro_phrase {
 145   width: 450px;
 146   text-align: center;
 147   font-family: Signika Bold;
 148   margin: 1.2em auto;
 149   color: #bababa;
 150 }
 151
 152 .comparisons {
 153 }
 154
 155 .section_wrapper_1,
 156 .section_wrapper_2{
 157   display: block;
 158   position: relative;
 159 /*   float: right; */
 160   width: 750px;
 161   margin: auto;
 162 }
 163
 164 .section_wrapper_1 h3 {
 165   margin-top: 3em;
 166 }
 167
 168 .buy a {
 169   border-bottom: none;
 170 }
 171
 172 .product_img,
 173 .product {
 174   margin: auto;
 175   width: 168px;
 176 }
 177
 178 .good,
 179 .bad {
 180   position: relative;
 181   top: 175px;
 182   left: 84px;
 183   width: 60px;
 184 }
 185
 186 .buy, .avoid,
 187 .free, .proprietary {
 188   text-align: center;
 189 }
 190
 191 .free li,
 192 .proprietary li {
 193   text-align: left;
 194 }
 195
 196 .buy img,
 197 .avoid img {
 198   margin-top: 2em;
 199   max-width: 151px;
 200   height: 42px;
 201 }
 202
 203 .free {
 204   float: left;
 205   width: 45%;
 206 }
 207
 208 .proprietary {
 209   float: right;
 210   width: 45%;
 211 }