home.css 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194
  1. /* FONTS */
  2. @font-face{
  3. font-family:'raleway';
  4. src: url('../fonts/Raleway-Thin.otf');
  5. -webkit-font-smoothing: antialiased;
  6. }
  7. @font-face{
  8. font-family:'openSans-light';
  9. src: url('../fonts/OpenSans-Light.ttf');
  10. -webkit-font-smoothing: antialiased;
  11. }
  12. @font-face{
  13. font-family:'openSans-regular';
  14. src: url('../fonts/OpenSans-Regular.ttf');
  15. -webkit-font-smoothing: antialiased;
  16. }
  17. @font-face{
  18. font-family:'openSans-bold';
  19. src: url('../fonts/OpenSans-Bold.ttf');
  20. -webkit-font-smoothing: antialiased;
  21. }
  22. html, body{
  23. font-family:'openSans-regular';
  24. font-size: 16px;
  25. text-align: justify;
  26. margin: 0;
  27. padding: 0;
  28. height: 100%;
  29. }
  30. /* NAV */
  31. .home{
  32. width: 100%;
  33. height: 80%;
  34. background-size: cover;
  35. background-image: url('../images/home.jpg');
  36. margin-left: 0;
  37. margin-top:0;
  38. font-family:'openSans-light';
  39. -webkit-text-stroke: 0.3px;
  40. }
  41. .navbar{
  42. margin: 0;
  43. background-color: white;
  44. width: 100%;
  45. height: 50px;
  46. text-align: right;
  47. -webkit-box-shadow: 0 2px 10px 8px rgba(0,0,0,0.2);
  48. box-shadow: 0 2px 10px 8px rgba(0,0,0,0.2);
  49. }
  50. .navlist{
  51. padding-top: 9px;
  52. font-size: 16px;
  53. margin:0;
  54. list-style-type: none;
  55. vertical-align: middle;
  56. }
  57. .navlist a{
  58. text-decoration: none;
  59. text-transform: uppercase;
  60. color: #6E7679;
  61. }
  62. .navlist li{
  63. vertical-align: middle;
  64. display : inline;
  65. margin: 0 30px;
  66. }
  67. /* HOME */
  68. #logo{
  69. width: 100%;
  70. margin: 5% auto;
  71. text-align: center;
  72. }
  73. /* SECCION */
  74. .seccion{
  75. width: 100%;
  76. }
  77. .content{
  78. width: 80%;
  79. margin: 0 auto;
  80. padding: 40px 0;
  81. }
  82. /* SECCIONES*/
  83. #us{
  84. background-color: #6E7679;
  85. color: #F8F1E9;
  86. height: 700px;
  87. background-image: url('../images/shitti.png');
  88. background-repeat: no-repeat;
  89. background-position: center bottom;
  90. }
  91. .left{
  92. float: left;
  93. width: 40%;
  94. margin: 0 auto;
  95. }
  96. .rigth{
  97. float: right;
  98. width: 40%;
  99. margin: 0 auto;
  100. }
  101. #tati{
  102. background-color: #F7C9B8;
  103. }
  104. #deiv{
  105. background-color: #BBD2F4;
  106. }
  107. #whatdowedo{
  108. background-color: #8D7966;
  109. color: #F8F1E9;
  110. }
  111. /* ANIMACIONES */
  112. .coffee-deiv{
  113. width: 100px;
  114. height: 100px;
  115. background-image: url('../images/deivcup.png');
  116. background-repeat: no-repeat;
  117. background-position: center center;
  118. position: relative;
  119. top: 66%;
  120. display: none;
  121. }
  122. .slidein-right{
  123. display: block;
  124. left: 50%;
  125. animation: slidein-right 2s;
  126. -webkit-animation: slidein-right 2s;
  127. }
  128. @-webkit-keyframes slidein-right {
  129. from {right: 10%;}
  130. to {right: 40%;}
  131. }
  132. @keyframes slidein-right {
  133. from {left: 80%;}
  134. to {left: 50%;}
  135. }
  136. .coffee-tati{
  137. width: 100px;
  138. height: 100px;
  139. background-image: url('../images/taticup.png');
  140. background-repeat: no-repeat;
  141. background-position: center center;
  142. position: relative;
  143. top: 80%;
  144. display:none;
  145. }
  146. @-webkit-keyframes slidein-left {
  147. from {left: 10%;}
  148. to {left: 40%;}
  149. }
  150. @keyframes slidein-left {
  151. from {left: 10%;}
  152. to {left: 40%;}
  153. }
  154. .slidein-left{
  155. display: block;
  156. left: 40%;
  157. animation: slidein-left 2s;
  158. -webkit-animation: slidein-left 2s;
  159. }
  160. /* HEADERS */
  161. h1{
  162. font-family: 'openSans-bold';
  163. text-transform: uppercase;
  164. text-align: left;
  165. border-bottom: 1px solid white;
  166. text-decoration: none;
  167. font-size: 30px;
  168. padding: 0px;
  169. }