API tools faq
paste
Advertisement
MrCipher

ABOUT ME #01

MrCipher
May 17th, 2020
80
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 5.79 KB | None | 0 0
raw download clone embed print report
  1. <head>
  2. <title>{title}</title> <!--YOU CAN CHANGE THE TITLE OF THE PAGE HERE. PUEDES CAMBIAR EL TITULO AQUÍ-->
  3. <link rel="shortcut icon" href="{Favicon}">
  4. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
  5.  
  6. <style type="text/css">
  7. @import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@500;700;900&display=swap");
  8. ::-webkit-scrollbar {
  9. height: 32px;
  10. width: 5px;
  11. }
  12.  
  13. /*PARA CAMBIAR LOS COLORES. CHANGE COLORS HERE.*/
  14. * {
  15. --fondo: #f9f9f9; /*FONDO GENERAL - BODY BACKGROUND */
  16. --fondo1: #fffff2; /*FONDO DE LA TABLA - CARD BACKGROUND */
  17. --txt: #7d7b7a; /*COLOR DEL TEXTO - TEXT COLOR */
  18. --color: #9e4d4d; /*COLOR DE ACENTO - ACENT COLOR */
  19. --borde: #f9f1f1; /*BORDES - BORDERS */
  20. }
  21. body {
  22. background: var(--fondo);
  23. font-family: montserrat; /*PARA CAMBIAR LA FONT - CHANGE FONT HERE*/
  24. position: relative;
  25. }
  26. #card {
  27. width: 500px;
  28. height: 415px;
  29. margin: 0 auto;
  30. background: var(--fondo1);
  31. margin-top: 10%;
  32. border-radius: 10px;
  33. border: 1px solid var(--borde);
  34. position: relative;
  35. }
  36. .picture {
  37. position: absolute;
  38. top: 10px;
  39. left: 10px;
  40. border: 1px solid var(--borde);
  41. padding: 5px;
  42. }
  43. .picture img {
  44. width: 75px;
  45. height: 75px;
  46. border: 1px solid var(--borde);
  47. }
  48. .text {
  49. width: 350px;
  50. text-align: justify;
  51. font-size: 10px;
  52. padding: 10px;
  53. height: 300px;
  54. overflow: auto;
  55. color: var(--txt);
  56. border: 10px solid var(--fondo1);
  57. outline: 1px solid var(--borde);
  58. outline-offset: -2px;
  59. position: absolute;
  60. right: 10px;
  61. top: 35px;
  62. }
  63. .data {
  64. width: 387px;
  65. border: 1px solid var(--borde);
  66. position: absolute;
  67. top: 10px;
  68. right: 10px;
  69. text-align: center;
  70. }
  71. .data d {
  72. display: inline-block;
  73. font-size: 10px;
  74. text-transform: uppercase;
  75. font-weight: 700;
  76. color: var(--txt);
  77. margin-right: 10px;
  78. }
  79. .name {
  80. font-size: 12px;
  81. text-transform: uppercase;
  82. font-weight: 900;
  83. color: var(--color);
  84. position: absolute;
  85. left: 10px;
  86. top: 105px;
  87. width: 88px;
  88. border: 1px solid var(--borde);
  89. text-align: center;
  90. padding: 5px 0px;
  91. }
  92. .links {
  93. width: 88px;
  94. position: absolute;
  95. left: 10px;
  96. top: 150px;
  97. border: 1px solid var(--borde);
  98. height: 222px;
  99. overflow: auto;
  100. }
  101. .links a {
  102. display: block;
  103. font-size: 10px;
  104. text-transform: uppercase;
  105. text-align: center;
  106. border: 1px solid var(--borde);
  107. margin: 5px;
  108. transition: ease 0.8s;
  109. background: var(--fondo1);
  110. text-decoration: none;
  111. color: var(--txt);
  112. }
  113. .nav {
  114. position: absolute;
  115. bottom: 10px;
  116. width: 477px;
  117. left: 10px;
  118. border: 1px solid var(--borde);
  119. text-align: center;
  120. }
  121. .nav a {
  122. display: inline-block;
  123. text-decoration: none;
  124. color: var(--color);
  125. text-transform: uppercase;
  126. font-weight: 900;
  127. font-size: 10px;
  128. margin: 5px 10px;
  129. }
  130. .nav i {
  131. margin-right: 5px;
  132. font-size: 11px;
  133. }
  134. #credit {
  135. position: absolute;
  136. bottom: 5px;
  137. right: 5px;
  138. }
  139. #credit a {
  140. font-size: 10px;
  141. color: var(--color);
  142. }
  143.  
  144. </style>
  145. </head>
  146.  
  147. <body>
  148. <div id="card">
  149. <div class="picture"><img src="https://66.media.tumblr.com/bbefe56e4dc44923f52dcb428fd94cf8/93047149ff2f62b5-9f/s128x128u_c1/158714128ed676bdd1fd7f29c712c5483d2c59af.jpg"></div> <!-- CHANGE IMAGE HERE -->
  150. <div class="name">YOUR NAME HERE</div>
  151. <div class="nav">
  152. <a href="/"><i class="fas fa-home"></i>Home</a>
  153. <a href="/ask"><i class="fas fa-comments"></i> Ask</a>
  154. <a href="/archive"><i class="fas fa-folder-open"></i> Archive</a>
  155. </div>
  156. <div class="links">
  157. <a href="">Twitter</a>
  158. <a href="">Instagram</a>
  159. <a href="">Ko-Fi</a>
  160. <a href="">Link</a>
  161. <a href="">Link</a>
  162. <a href="">Link</a>
  163. <a href="">Link</a>
  164. <a href="">Link</a>
  165. <a href="">Link</a>
  166. <a href="">Link</a>
  167. <a href="">Link</a>
  168. <!--PUEDES PONER MÁS LINKS. YOU CAN ADD MORE LINKS-->
  169. </div>
  170. <div class="data">
  171. <d>DATO</d>
  172. <d>DATO</d>
  173. <d>DATO</d>
  174. </div>
  175. <div class="text">
  176. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus nec nisi justo. Cras porta sed diam interdum pulvinar. Vivamus id molestie sapien. Proin egestas sem quis felis pellentesque luctus tempus nec mauris. Nunc neque justo, viverra eget ligula vitae, facilisis rhoncus justo. Curabitur vehicula nunc quis hendrerit congue. Vestibulum posuere at metus sit amet commodo. Nulla facilisi. Cras eu enim eu augue vehicula ornare. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse potenti. Aenean sagittis a nunc et ultrices.
  177. <br><br>
  178. Mauris rutrum vehicula augue dictum elementum. Nullam tincidunt dapibus mauris eu tempus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Vivamus feugiat ligula at enim consequat condimentum. In hac habitasse platea dictumst. Fusce efficitur suscipit leo, condimentum cursus diam. Quisque et sem commodo felis tempor dignissim.
  179. <br><br>
  180. Sed quis tortor tortor. Vestibulum rhoncus, justo quis tempor tristique, ligula nunc posuere nisl, sed finibus ex mi nec lacus. Morbi tincidunt enim purus, at gravida risus vestibulum vitae. Suspendisse finibus varius sapien, at elementum dolor feugiat nec. Nam congue, eros eget varius aliquet, risus mi euismod tortor, vehicula maximus ipsum felis eget risus. Duis suscipit dolor augue, vel lobortis ante dignissim nec. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;
  181.  
  182. </div>
  183. </div>
  184.  
  185. <!--NO QUITES EL CRÉDITO - CREDIT DON'T REMOVE-->
  186. <div id="credit"><a class="fas fa-dragon" href="https://betweenironetsilver.tumblr.com" title="by Dr. Watson"></a></div>
  187. </body>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!