API tools faq
paste
tricksterkid

tumblr page // aurora

tricksterkid
Aug 28th, 2020 (edited)
179
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 10.24 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC>
  2.  
  3. <!-- @NUCLEARTHEMES ON TUMBLR || PLEASE DON'T DELETE CREDIT -->
  4.  
  5. <html>
  6.  
  7. <head>
  8.  
  9. <title>{Name} / aurora</title> <!-- add page title here -->
  10.  
  11. <link rel="shortcut icon" href="{Favicon}">
  12.  
  13. <link href="https://fonts.googleapis.com/css?family=Poppins:400,400i,700,700i" rel="stylesheet">
  14.  
  15. <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
  16.  
  17. <style type="text/css">
  18.  
  19. /* custom colors for selection */
  20.  
  21. ::-moz-selection {background: #7459cf; color: #f0f0f0;}
  22. ::selection {background: #7459cf; color: #f0f0f0;}
  23.  
  24. /* custom scrollbar */
  25.  
  26. ::-webkit-scrollbar-thumb {background: #7459cf;}
  27. ::-webkit-scrollbar {background: #f0f0f0; width: 5px;}
  28.  
  29. * {margin:0; padding:0;}
  30.  
  31. body {
  32. background: #f0f0f0; /* change background color */
  33. color: #4a4a4a; /* change text color */
  34. font-family: Poppins; /* change font */
  35. font-size: 13px; /* change font size */
  36. text-align: justify;
  37. }
  38.  
  39. #container {
  40. background: #cbbff3; /* change container background color */
  41. border-radius: 10px;
  42. height: 600px;
  43. left: 50%;
  44. margin-bottom: 40px;
  45. overflow: auto;
  46. padding: 20px;
  47. position: absolute;
  48. top: 50%;
  49. transform: translate(-50%,-50%);
  50. width: 750px;
  51. -ms-overflow-style: none;
  52. }
  53.  
  54. #container::-webkit-scrollbar {
  55. display: none;
  56. }
  57.  
  58. h1 { /* page title */
  59. color: #7459cf;
  60. font-family: Poppins;
  61. font-size: 30px;
  62. margin-bottom: 10px;
  63. padding-bottom: 10px;
  64. text-align: right;
  65. text-transform: uppercase;
  66. }
  67.  
  68. h2 { /* block titles */
  69. color: #b5ffea;
  70. font-family: Poppins;
  71. font-size: 20px;
  72. text-align: right;
  73. text-transform: uppercase;
  74. }
  75.  
  76. h3 { /* bio subtitles */
  77. color: #7459cf;
  78. font-family: Poppins;
  79. font-size: 15px;
  80. text-align: left;
  81. text-transform: uppercase;
  82. }
  83.  
  84. a {
  85. color: #7459cf; /* link color */
  86. text-decoration: none;
  87. }
  88.  
  89. a:hover {
  90. color: #b5ffea; /* link hover color */
  91. transition: 0.4s;
  92. }
  93.  
  94. #contentcontainer { /* bordered container for content */
  95. border: 1px solid #b5ffea;
  96. border-top: none;
  97. height: 470px;
  98. overflow: auto;
  99. padding: 6px 12px;
  100. -ms-overflow-style: none;
  101. }
  102.  
  103. #contentcontainer::-webkit-scrollbar {
  104. display: none;
  105. }
  106.  
  107. #topbanner { /* colored banner above content */
  108. background-color: #ab98e8;
  109. border: 1px solid #b5ffea;
  110. height: 48px;
  111. overflow: hidden;
  112. }
  113.  
  114. img {
  115. border-radius: 20px;
  116. float: left;
  117. height: 240px;
  118. margin-top: 5px;
  119. width: 240px;
  120. }
  121.  
  122. img:hover {
  123. cursor: cell;
  124. transform: scale(1.1);
  125. transition: 0.4s;
  126. }
  127.  
  128. .topblocks { /* top content blocks */
  129. background-color: #ab98e8;
  130. border-radius: 20px;
  131. float: left;
  132. height: 130px;
  133. margin: 5px 0px 5px 10px;
  134. padding: 10px;
  135. width: 210px;
  136. -ms-overflow-style: none;
  137. }
  138.  
  139. .topblocks::-webkit-scrollbar {
  140. display: none;
  141. }
  142.  
  143. #left { /* facts left column */
  144. border-right: 1px solid #b5ffea;
  145. float: left;
  146. font-weight: bold;
  147. text-transform: uppercase;
  148. width: 85px;
  149. }
  150.  
  151. #right { /* facts right column */
  152. float: right;
  153. width: 110px;
  154. }
  155.  
  156. #bio {
  157. background-color: #ab98e8;
  158. border-radius: 20px;
  159. float: right;
  160. height: 280px;
  161. margin: 5px;
  162. overflow: auto;
  163. padding: 10px;
  164. width: 450px;
  165. -ms-overflow-style: none;
  166. }
  167.  
  168. #bio::-webkit-scrollbar {
  169. display: none;
  170. }
  171.  
  172. #colorcontainer {
  173. float: left;
  174. height: 200px;
  175. padding: 10px;
  176. width: 220px;
  177. }
  178.  
  179. .colors { /* COLORS EDITED IN BODY CODE! */
  180. border-radius: 20px;
  181. float: left;
  182. height: 97px;
  183. margin: 5px;
  184. width: 97px;
  185. }
  186.  
  187. .colors:hover {
  188. cursor: cell;
  189. transform: scale(1.1);
  190. transition: 0.4s;
  191. }
  192.  
  193. #home {
  194. background-color: #7459cf;
  195. border-radius: 10px;
  196. color: #cbbff3;
  197. display: inline;
  198. float: left;
  199. margin-right: 5px;
  200. padding: 15px;
  201. }
  202.  
  203. #credit {
  204. background-color: #7459cf;
  205. color: #cbbff3;
  206. border-radius: 12px;
  207. bottom: 0;
  208. display: inline;
  209. margin: 8px;
  210. padding: 8px;
  211. position: fixed;
  212. right: 0;
  213. }
  214.  
  215. #credit:hover, #home:hover {
  216. background-color: #b5ffea;
  217. transition: 0.4s;
  218. }
  219.  
  220. </style>
  221.  
  222. </head>
  223.  
  224. <body>
  225.  
  226. <div id="container">
  227.  
  228. <a href="/">
  229. <div id="home">
  230. <i class="fa fa-home" style="font-size:15px"></i>
  231. </div>
  232. </a>
  233.  
  234. <h1>aurora</h1> <!-- main title -->
  235.  
  236. <div id="topbanner"></div>
  237.  
  238. <div id="contentcontainer">
  239.  
  240. <img src="https://i.imgur.com/0gIzNdE.png">
  241.  
  242. <!-- START FACT BLOCK -->
  243.  
  244. <div class="topblocks">
  245.  
  246. <h2>facts</h2>
  247.  
  248. <div id="left">
  249.  
  250. name <br>
  251. age <br>
  252. gender <br>
  253. sexuality <br>
  254. zodiac
  255.  
  256. </div>
  257.  
  258. <div id="right">
  259.  
  260. name here <br>
  261. age here <br>
  262. gender here <br>
  263. sexuality here <br>
  264. zodiac here
  265.  
  266. </div>
  267.  
  268. </div>
  269.  
  270. <!-- END FACT BLOCK -->
  271.  
  272. <!-- START STAT BLOCK -->
  273.  
  274. <div class="topblocks">
  275.  
  276. <h2>statistics</h2>
  277.  
  278. <div id="left">
  279.  
  280. stat name <br>
  281. stat name <br>
  282. stat name <br>
  283. stat name <br>
  284. stat name
  285.  
  286. </div>
  287.  
  288. <div id="right">
  289.  
  290. <!-- stat 1 -->
  291.  
  292. <i class="fa fa-heart" style="font-size:15px"></i>
  293. <i class="fa fa-heart" style="font-size:15px"></i>
  294. <i class="fa fa-heart-o" style="font-size:15px"></i>
  295. <i class="fa fa-heart-o" style="font-size:15px"></i>
  296. <i class="fa fa-heart-o" style="font-size:15px"></i>
  297.  
  298. <!-- end stat 1 -->
  299.  
  300. <br>
  301.  
  302. <!-- stat 2 -->
  303.  
  304. <i class="fa fa-heart" style="font-size:15px"></i>
  305. <i class="fa fa-heart" style="font-size:15px"></i>
  306. <i class="fa fa-heart" style="font-size:15px"></i>
  307. <i class="fa fa-heart" style="font-size:15px"></i>
  308. <i class="fa fa-heart-o" style="font-size:15px"></i>
  309.  
  310. <!-- end stat 2 -->
  311.  
  312. <br>
  313.  
  314. <!-- stat 3 -->
  315.  
  316. <i class="fa fa-heart" style="font-size:15px"></i>
  317. <i class="fa fa-heart-o" style="font-size:15px"></i>
  318. <i class="fa fa-heart-o" style="font-size:15px"></i>
  319. <i class="fa fa-heart-o" style="font-size:15px"></i>
  320. <i class="fa fa-heart-o" style="font-size:15px"></i>
  321.  
  322. <!-- end stat 3 -->
  323.  
  324. <br>
  325.  
  326. <!-- stat 4 -->
  327.  
  328. <i class="fa fa-heart" style="font-size:15px"></i>
  329. <i class="fa fa-heart" style="font-size:15px"></i>
  330. <i class="fa fa-heart" style="font-size:15px"></i>
  331. <i class="fa fa-heart-o" style="font-size:15px"></i>
  332. <i class="fa fa-heart-o" style="font-size:15px"></i>
  333.  
  334. <!-- end stat 4 -->
  335.  
  336. <br>
  337.  
  338. <!-- stat 5 -->
  339.  
  340. <i class="fa fa-heart" style="font-size:15px"></i>
  341. <i class="fa fa-heart" style="font-size:15px"></i>
  342. <i class="fa fa-heart" style="font-size:15px"></i>
  343. <i class="fa fa-heart" style="font-size:15px"></i>
  344. <i class="fa fa-heart" style="font-size:15px"></i>
  345.  
  346. <!-- end stat 5 -->
  347.  
  348. </div>
  349.  
  350. </div>
  351.  
  352. <!-- END FACT BLOCK -->
  353.  
  354. <!-- START BIO BLOCK -->
  355.  
  356. <div id="bio">
  357.  
  358. <h2>biography</h2>
  359.  
  360. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In ante metus dictum at tempor commodo ullamcorper a lacus.
  361.  
  362. <h3><i class="fa fa-arrow-right" style="font-size:15px"></i> subtitle</h3>
  363.  
  364. Nulla posuere sollicitudin aliquam ultrices sagittis orci a. Egestas congue quisque egestas diam in arcu cursus euismod quis. Scelerisque viverra mauris in aliquam sem. Tellus molestie nunc non blandit massa enim nec. Velit laoreet id donec ultrices tincidunt arcu.
  365.  
  366. <h3><i class="fa fa-arrow-right" style="font-size:15px"></i> subtitle</h3>
  367.  
  368. Elit pellentesque habitant morbi tristique senectus et netus et malesuada. Quisque egestas diam in arcu cursus. Varius duis at consectetur lorem donec massa. Mollis nunc sed id semper risus in hendrerit.
  369.  
  370. <h3><i class="fa fa-arrow-right" style="font-size:15px"></i> subtitle</h3>
  371.  
  372. Nibh tortor id aliquet lectus proin. Ac turpis egestas sed tempus urna et. Egestas congue quisque egestas diam in arcu cursus euismod. Dis parturient montes nascetur ridiculus mus. Enim eu turpis egestas pretium. Nulla aliquet enim tortor at. Odio ut enim blandit volutpat maecenas volutpat. Facilisi morbi tempus iaculis urna id. Pretium lectus quam id leo in vitae turpis massa sed. Diam sit amet nisl suscipit adipiscing bibendum est. Ante in nibh mauris cursus mattis molestie. Orci porta non pulvinar neque laoreet suspendisse interdum. Erat pellentesque adipiscing commodo elit at. Tincidunt vitae semper quis lectus.
  373.  
  374. </div>
  375.  
  376. <!-- END BIO BLOCK -->
  377.  
  378. <!-- START COLORS -->
  379.  
  380. <div id="colorcontainer">
  381.  
  382. <!-- you can change the colors in "background-color"! -->
  383.  
  384. <div class="colors" style="background-color: #f456a1;"></div>
  385.  
  386. <div class="colors" style="background-color: #ff847d;"></div>
  387.  
  388. <div class="colors" style="background-color: #49d0bd;"></div>
  389.  
  390. <div class="colors" style="background-color: #455ba1;"></div>
  391.  
  392. </div>
  393.  
  394. <!-- END COLORS -->
  395.  
  396. </div>
  397.  
  398. </div>
  399.  
  400. <!-- don't edit beyond this point please! colors can be modified in <style> -->
  401.  
  402. <a id="credit" target="blank" href="https://nuclearthemes.tumblr.com/"><i class="fa fa-anchor" style="font-size:15px"></i></a>
  403.  
  404. </body>
  405.  
  406. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
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!