stylesheet.css

   1 /*Typography*/
   2
   3 @font-face {
   4     font-family: 'Signika Light';
   5     src: local('Signika Light'), url('fonts/Signika-Light.ttf') format('truetype');
   6 }
   7
   8 @font-face {
   9     font-family: 'Signika Bold';
  10     src: local('Signika Bold'), url('fonts/Signika-Bold.ttf') format('truetype');
  11 }
  12
  13 @font-face {
  14     font-family: 'Open Sans';
  15     src: local('Open Sans'), url('fonts/OpenSans-Regular.ttf') format('truetype');
  16 }
  17
  18 @font-face {
  19     font-family: 'Open Sans Bold';
  20     src: local('Open Sans Bold'), url('fonts/OpenSans-Bold.ttf') format('truetype');
  21 }
  22
  23 /*Style common HTML tags*/
  24
  25 html {
  26     font-family: 'Open Sans', 'DejaVu Sans', Arial, sans-serif;
  27     font-size: 14px;
  28     line-height: 1.4em;
  29     color: #363636;
  30     background-color: #fffefb;
  31     width: 100%;
  32 }
  33
  34
  35 /* Type something: */
  36
  37 a { color: #1F8A70; border-bottom: 1px solid #dbd145; text-decoration: none;}
  38
  39 p { line-height: 1.4em; margin-bottom: 1.5em; font-size: 1em;}
  40
  41 i { font-style: italic; }
  42 b { font-style: oblique; }
  43
  44 li {list-style-type: circle; padding: 0.4em 0.2em; line-height: 1.4em; }
  45 /* ul {margin: 1em 2em 0em 4em;} */
  46
  47 br {margin-bottom: 20em; margin-top: 20em;}
  48
  49 h1 {  font-size: 2.75em;  font-family: 'Signika Light'; margin-bottom: 0.5em; margin-top: 1em; }
  50 h2 {  font-size: 1.75em;  font-family: 'Signika Light'; color: #2CAF8F; margin-bottom: 0.5em; margin-top: 2em; }
  51 h3 {  font-size: 1.625em; font-family: 'Signika Light'; color: #b495d3; margin-bottom: 0.5em; margin-top: 2em; }
  52 h4 {  font-size: 1.375em; font-family: 'Signika Light'; color: #4d4d4d; margin-bottom: 0.5em; margin-top: 2em; }
  53 h5 {  font-size: 1.25em;  font-family: 'Signika Light'; color: #4d4d4d; margin-bottom: 0.5em; margin-top: 2em; }
  54 h6 {  font-size: 1.125em; font-family: 'Signika Light'; color: #4d4d4d; margin-bottom: 0.5em; margin-top: 2em; }
  55
  56 /*Site-specific*/
  57
  58   /* Header */
  59
  60 .header {
  61   background-image: url("images/banner.png");
  62   background-color: #2CAF8F;
  63   background-repeat: no-repeat;
  64   height: 776px;
  65   background-size: 1200px;
  66   background-position: bottom;
  67 }
  68
  69 .logo {
  70   width: 247px;
  71   height: 29px;
  72   padding: 1.3em;
  73 }
  74
  75 .logo_wrapper {
  76 }
  77
  78 .join {
  79   width: 172px;
  80   height: 29px;
  81   padding: 1.3em;
  82   float: right;
  83 }
  84
  85 .top {
  86   position: relative;
  87 }
  88
  89 .top a {
  90   border-bottom: 0;
  91 }
  92
  93 .navbar ul {
  94   background-color: white;
  95   border-radius: 100px;
  96   text-align: center;
  97   width: 663px;
  98   height: 2.55556em;
  99   margin: auto;
 100 }
 101
 102  .navbar li {
 103   font-size: 0.9em;
 104   font-weight: bold;
 105   list-style-type: none;
 106   border-right: 1px #9BD2BF solid;
 107   padding: 0 45px 0 45px;
 108   line-height: 2.9;
 109   float: left;
 110 /*   width: 170px; */
 111   height: 2.85556em;
 112 }
 113
 114 .navbar li:first-child {
 115   border-radius: 100px 0 0 100px;
 116 /*   width: 160px; */
 117 }
 118
 119 .navbar li:last-child {
 120   border-right: 0;
 121   border-radius: 0 100px 100px 0;
 122 /*   width: 92px; */
 123 }
 124 .navbar li:hover {
 125   background-color: #FFDD55;
 126
 127 }
 128
 129 .navbar li a {
 130   display: block;
 131   text-decoration: none;
 132   border: 0;
 133
 134 }
 135
 136 .navbar li a:hover {
 137   color: #4B423B;
 138 }
 139
 140 .wrapper {
 141   width: 700px;
 142   margin: auto;
 143 }
 144
 145 .wrapper .intro_phrase {
 146   width: 450px;
 147   text-align: center;
 148   font-family: Signika Bold;
 149   margin: 1.2em auto;
 150   color: #bababa;
 151
 152 }
 153
 154 /* #comparisons {
 155   padding-top: 100px;
 156   background-color: #fbfbfb;
 157   background-size: cover;
 158   position: absolute;
 159   width: 100%;
 160   max-width: 1150px;
 161 }
 162
 163 .main_title {
 164   margin-left: 2em;
 165   margin-bottom: 3em;
 166 }
 167
 168 .section_wrapper {
 169   margin-bottom: 4em;
 170 }
 171
 172 .title {
 173   text-align: center;
 174   font-size: 1.5em;
 175 }
 176
 177 #free {
 178   position: relative;
 179   background-color: red;
 180   float: left;
 181   width: 45%;
 182   max-width: 450px;
 183 }
 184
 185 #sign {
 186   position: relative;
 187   background-color: green;
 188   width: 240px;
 189   float: left;
 190   margin-top: 3em;
 191 }
 192
 193 #proprietary {
 194   position: relative;
 195   background-color: blue;
 196   width: 45%;
 197   max-width: 450px;
 198   float: right;
 199 }
 200
 201 .product {
 202   display: block;
 203   margin: auto;
 204   width: 250px;
 205   height: 250px;
 206 }
 207
 208 .sign  {
 209   display: block;
 210   margin: auto;
 211   width: 149px;
 212   height: 149px;
 213 }
 214
 215 .separator {
 216   width: 1px;
 217   height: 324px;
 218   margin: auto;
 219   margin-left: 7.5em;
 220   margin-top: 3em;}
 221
 222 #section_wrapper {
 223   position: relative;
 224 } */