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
  76 .navbar {
  77   background-color: #2CAF8F;
  78   height: 500px;
  79 }
  80
  81 .header a {
  82   border-bottom: 0;
  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 }
  94
  95 .logo, .join {
  96   width: 210px;
  97 }
  98
  99 .nav_wrapper {
 100   padding: 1em 5em 1em 9em;
 101   height: 2.55556em;
 102   float: left;
 103 }
 104
 105 .navbar li {
 106   font-family: 'Signika Regular';
 107   font-size: 1em;
 108   background-color: white;
 109   list-style-type: none;
 110   border-right: 1px #9BD2BF solid;
 111   padding: 0 30px 0 30px;
 112   line-height: 2.6;
 113   float: left;
 114 }
 115
 116 .navbar li:first-child {
 117   border-radius: 100px 0 0 100px;
 118 }
 119
 120 .navbar li:last-child {
 121   border-right: 0;
 122   border-radius: 0 100px 100px 0;
 123 }
 124
 125 .navbar li:hover {
 126   background-color: #FFDD55;
 127 }
 128
 129 .navbar li a {
 130   display: block;
 131   text-decoration: none;
 132 }
 133
 134 .navbar li a:hover {
 135   color: #4B423B;
 136 }
 137
 138 /* Comparisons */
 139
 140 .wrapper,
 141 .section_wrapper {
 142   width: 750px;
 143   margin: auto;
 144 }
 145
 146 .main_title {
 147   text-align: center;
 148   margin-top: 3em;
 149   display: inline-block;
 150 }
 151
 152 .wrapper .intro_phrase {
 153   width: 450px;
 154   text-align: center;
 155   font-family: 'Signika Bold';
 156   margin: 1.2em auto;
 157   color: #bababa;
 158 }
 159
 160 .intro_wrapper {
 161   width: 40%;
 162   float: right;
 163   color: white !important;
 164   padding-top: 2em;
 165   padding-right: 6em;
 166 }
 167
 168 .intro_wrapper h2 {
 169   color: #FFDD55;
 170 }
 171
 172 .intro_img img{
 173   width: 40%;
 174   float: left;
 175   padding: 2em;
 176   padding-left: 6em;
 177
 178 }
 179 .buy a {
 180   border-bottom: none;
 181 }
 182
 183 .product_img,
 184 .product {
 185   margin: auto;
 186   width: 168px;
 187 }
 188
 189 .good,
 190 .bad {
 191   position: relative;
 192   top: 175px;
 193   left: 84px;
 194   width: 60px;
 195 }
 196
 197 .buy, .avoid,
 198 .free, .proprietary {
 199   text-align: center;
 200 }
 201
 202 .free li,
 203 .proprietary li {
 204   text-align: left;
 205 }
 206
 207 .buy img,
 208 .avoid img {
 209   margin-top: 2em;
 210   max-width: 151px;
 211   height: 42px;
 212 }
 213
 214 .free {
 215   float: left;
 216   width: 45%;
 217 }
 218
 219 .proprietary {
 220   float: right;
 221   width: 45%;
 222 }