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