home.css 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154
  1. @import url('https://fonts.googleapis.com/css?family=Inconsolata');
  2. @import url(https://db.onlinewebfonts.com/c/e9a92ef234e726ff17913d77b956d3e0?family=Vermin+Vibes+1989);
  3. #porra{
  4. font-family: "Vermin Vibes 1989";
  5. font-size:50px;
  6. text-align:left;
  7. margin-top:0;
  8. color:#fff;
  9. animation:load 0.4s;z-index:2;
  10. }
  11. body{
  12. overflow-y:hidden;
  13. height:100%;
  14. bottom:0;
  15. background-color:#000;
  16. margin-top:0px;
  17. }
  18. body, html{
  19. margin-left:0;
  20. right:0;
  21. top:0px;
  22. width:100%;
  23. overflow-x:hidden;
  24. }
  25. menu#bar>img{
  26. display:inline;
  27. }
  28. menu#bar>div{
  29. display:inline;
  30. position: fixed;
  31. top:10px;
  32. right:10px;
  33. }menu#bar>div>a{
  34. color:#060;
  35. font-size:23px;
  36. padding:0px 5px;
  37. font-family: 'Inconsolata', sans-serif;
  38. text-decoration:none;
  39. }menu#bar>div>a:hover{
  40. text-decoration:none;
  41. }
  42. menu#bar{
  43. z-index: 3;
  44. position:fixed;
  45. background-color: #000;
  46. margin-top:0;
  47. right:0;
  48. left:0;
  49. }
  50. header#inicio{
  51. height:600px;
  52. z-index:2;
  53. position:relative;
  54. background-image: url(../assets/new.jpg);
  55. background-size:100%;
  56. background-repeat: no-repeat;
  57. background-position: center top;
  58. background-attachment: fixed;
  59. background-color: rgba(0,0,0,0.8);
  60. padding-top: 280px;
  61. }header#inicio>div>p{
  62. text-align:center;
  63. margin:auto;
  64. font-size:50px;
  65. position:relative;
  66. color:#060;
  67. text-shadow:-2px 0px 0px #000;
  68. font-family: 'Inconsolata', monospace;
  69. }
  70. header#fundo{
  71. height:600px;
  72. background-color: #000;
  73. position:absolute;
  74. top:0;
  75. left:0;
  76. right:0;
  77. text-align:center;
  78. z-index:1;
  79. }header#fundo>video{
  80. width:100%;
  81. margin-top:100px;
  82. }section{
  83. width:100%;
  84. }
  85. section>div{
  86. width:80%;
  87. font-size: 20px;
  88. text-align: justify;
  89. margin:auto auto 100px auto;
  90. }section>div>p{
  91. font-family: 'Source Code Pro', monospace;
  92. }
  93. a.subscription,a.subscription:hover{
  94. text-align: center;
  95. font-size: 40px;
  96. font-family: 'Cutive Mono', monospace;
  97. color: #206a0d;
  98. }
  99. .write{
  100. font-family: 'Cutive Mono', monospace;
  101. font-size: 2.0em;
  102. color: #317b1e;
  103. background:#000;
  104. width: 55ch;
  105. border-right: 0px solid;
  106. animation: type 5s steps(55, end);
  107. white-space:nowrap;
  108. overflow:hidden;
  109. width:90%;
  110. }
  111. td{
  112. color:#0f0;
  113. font-family: 'Source Code Pro', monospace;
  114. font-weight: lighter;
  115. border-bottom:2px solid #333;
  116. }
  117. .main{
  118. background-color: #0f0;
  119. color:#000;
  120. font-family: 'Source Code Pro', monospace;
  121. text-align: center;
  122. }
  123. @keyframes type{
  124. 0%{width: 0%;
  125. border-right: 5px solid #317b1e;
  126. }
  127. }
  128. .cursor{
  129. animation: cursor 1s infinite;
  130. border-bottom: 3px solid #317b1e;
  131. height:60px;
  132. padding-left: 5px;
  133. }
  134. @keyframes cursor {
  135. 0%{opacity: 0;}
  136. }
  137. @keyframes appareace{
  138. 0%{
  139. margin-left:-30px
  140. }100%{
  141. margin-left:0
  142. }
  143. }@keyframes in{
  144. 0%{
  145. opacity:0.3
  146. }100%{
  147. opacity:1
  148. }