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 .section_wrapper {
 137   width: 750px;
 138   margin: auto;
 139 }
 140
 141 .main_title {
 142   text-align: center;
 143   margin-top: 3em;
 144   display: inline-block;
 145 }
 146
 147 .wrapper .intro_phrase {
 148   width: 450px;
 149   text-align: center;
 150   font-family: Signika Bold;
 151   margin: 1.2em auto;
 152   color: #bababa;
 153 }
 154
 155 .buy a {
 156   border-bottom: none;
 157 }
 158
 159 .product_img,
 160 .product {
 161   margin: auto;
 162   width: 168px;
 163 }
 164
 165 .good,
 166 .bad {
 167   position: relative;
 168   top: 175px;
 169   left: 84px;
 170   width: 60px;
 171 }
 172
 173 .buy, .avoid,
 174 .free, .proprietary {
 175   text-align: center;
 176 }
 177
 178 .free li,
 179 .proprietary li {
 180   text-align: left;
 181 }
 182
 183 .buy img,
 184 .avoid img {
 185   margin-top: 2em;
 186   max-width: 151px;
 187   height: 42px;
 188 }
 189
 190 .free {
 191   float: left;
 192   width: 45%;
 193 }
 194
 195 .proprietary {
 196   float: right;
 197   width: 45%;
 198 }
 199
 200 section {
 201   padding: 3em;
 202 }