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: 0.9em;
  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: 110%;
  66   background-position: bottom;
  67 }
  68
  69 .logo {
  70   width: 180px;
  71   height: 21px;
  72   padding: 1.3em;
  73
  74 }
  75
  76 .logo_wrapper {
  77 }
  78
  79 .top {
  80   position: relative;
  81 }
  82
  83 .top a {
  84   border-bottom: 0;
  85   color: white;
  86 }
  87
  88 .upper_links {
  89   position: absolute;
  90   text-align: center;
  91   margin-left: 23%;
  92 }
  93
  94 .upper_links li {
  95   list-style: none;
  96   display: inline-block;
  97   padding: 1em;
  98   float: left;
  99 }
 100
 101 .navbar ul {
 102   background-color: white;
 103   border-radius: 100px;
 104   text-align: center;
 105   width: 875px;
 106   height: 3.55556em;
 107   margin: auto;
 108   -webkit-transition: background 3s;
 109   transition:  background-color 3s;
 110 }
 111
 112  .navbar li {
 113   font-weight: bold;
 114   list-style-type: none;
 115   border-right: 1px #9BD2BF solid;
 116   padding: 0 10px 0 10px;
 117   line-height: 3.7;
 118   float: left;
 119   width: 91px;
 120   height: 3.55556em;
 121 }
 122
 123 .navbar li:first-child {
 124   border-radius: 100px 0 0 100px;
 125   width: 81px;
 126 }
 127
 128 .navbar li:last-child {
 129   border-right: 0;
 130   border-radius: 0 100px 100px 0;
 131   width: 81px;
 132 }
 133 .navbar li:hover {
 134   background-color: #FFDD55;
 135
 136 }
 137
 138 .navbar li a {
 139   display: block;
 140   text-decoration: none;
 141   border: 0;
 142
 143 }
 144
 145 .navbar li a:hover {
 146   color: #4B423B;
 147 }
 148
 149 .wrapper {
 150   width: 700px;
 151   margin: auto;
 152 }
 153
 154 .wrapper .intro_phrase {
 155   width: 450px;
 156   text-align: center;
 157   font-family: Signika Bold;
 158   margin: 1.2em auto;
 159   color: #bababa;
 160
 161 }
 162
 163 /* #comparisons {
 164   padding-top: 100px;
 165   background-color: #fbfbfb;
 166   background-size: cover;
 167   position: absolute;
 168   width: 100%;
 169   max-width: 1150px;
 170 }
 171
 172 .main_title {
 173   margin-left: 2em;
 174   margin-bottom: 3em;
 175 }
 176
 177 .section_wrapper {
 178   margin-bottom: 4em;
 179 }
 180
 181 .title {
 182   text-align: center;
 183   font-size: 1.5em;
 184 }
 185
 186 #free {
 187   position: relative;
 188   background-color: red;
 189   float: left;
 190   width: 45%;
 191   max-width: 450px;
 192 }
 193
 194 #sign {
 195   position: relative;
 196   background-color: green;
 197   width: 240px;
 198   float: left;
 199   margin-top: 3em;
 200 }
 201
 202 #proprietary {
 203   position: relative;
 204   background-color: blue;
 205   width: 45%;
 206   max-width: 450px;
 207   float: right;
 208 }
 209
 210 .product {
 211   display: block;
 212   margin: auto;
 213   width: 250px;
 214   height: 250px;
 215 }
 216
 217 .sign  {
 218   display: block;
 219   margin: auto;
 220   width: 149px;
 221   height: 149px;
 222 }
 223
 224 .separator {
 225   width: 1px;
 226   height: 324px;
 227   margin: auto;
 228   margin-left: 7.5em;
 229   margin-top: 3em;}
 230
 231 #section_wrapper {
 232   position: relative;
 233 } */