API tools faq
paste
HellaBlind

holy butterfly code

HellaBlind
Dec 10th, 2019 (edited)
360
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.89 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <head>
  3.  
  4. <!--
  5.  
  6.  
  7. COAL COAST
  8. ----------
  9. a page theme by anna
  10. RULES:
  11. - don't steal
  12. - don't remove credit
  13. - u can modify for personal use but no redistribution w/o asking pls
  14. - all code is technically protected by copyright so u take this and i'll come @ u with the power of the law on my side.
  15. - creative commons attribution-noncommercial-sharealike ft. u gotta ask before redistributing if anyone was curious
  16. CREDIT:
  17. - not my images. script font hosted by @dohertys. background from @honeylcve's backgrounds page. inspired by @minseokwrites' character psd 013
  18. -->
  19.  
  20. <title>{Title}</title>
  21. <link rel="shortcut icon" href="{Favicon}">
  22. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  23. <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600|Pragati+Narrow" rel="stylesheet">
  24. <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans" />
  25. <link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i,900,900i" rel="stylesheet">
  26. <link href="https://fonts.googleapis.com/css?family=Montserrat:300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
  27. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  28. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
  29. <link href="https://fonts.googleapis.com/css?family=Libre+Baskerville:400,400i,700&subset=latin-ext" rel="stylesheet">
  30.  
  31. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  32. <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  33.  
  34. <script>
  35. (function($){
  36. $(document).ready(function() {
  37. $("a[title]").style_my_tooltips({
  38. tip_follows_cursor:true,
  39. tip_delay_time:90,
  40. tip_fade_speed:600,
  41. attribute:"title"
  42. });
  43. });
  44. })(jQuery);
  45. </script>
  46.  
  47. <style>
  48.  
  49.  
  50.  
  51. ::-webkit-scrollbar {
  52. display:none;
  53. }
  54.  
  55. body{
  56. font-family:roboto;
  57. font-size:14px;
  58. background:#d60b5c;
  59. background-image:url(''); /*if you want a background.*/
  60. background-size:cover;
  61. }
  62.  
  63. #container{
  64. width:440px;
  65. height:550px;
  66. background:#fff;
  67. overflow-y:scroll;
  68. position:absolute;
  69. top:0;
  70. left:0;
  71. bottom:0;
  72. right:0;
  73. margin:auto;
  74. overflow-x:hidden;
  75. }
  76.  
  77. .bigimg{
  78. width:440px;
  79. height:550px;
  80. overflow:hidden;
  81. background:url('https://cdn.discordapp.com/attachments/376215349718155267/579668170089037824/2463ad3270c65ffa1827183fbdcefbc7.png'); /*big image at the top. don't need to change image's size/shape just adjust background-size as necessary and make sure the image was larger than 440x550 to start with*/
  82. background-size:440px;
  83. position:absolute;
  84. top:0;
  85. left:0;
  86. }
  87.  
  88.  
  89. @font-face { font-family: paduka; src: url('https://dl.dropboxusercontent.com/s/17sjbqt7xfnor93/Paduka%20Script%20free.ttf') ; }
  90.  
  91. .bigimg h1{
  92. font-family:paduka;
  93. font-size:150px;
  94. text-decoration:none;
  95. font-weight:normal;
  96. width:340px;
  97. height:340px;
  98. position:absolute;
  99. left:50px;
  100. top:70px;
  101. text-align:center;
  102. color:#fff; /* colour of title */
  103. text-shadow:2px 2px #000; /* shadow colour */
  104. }
  105.  
  106. .bigimg h2{
  107. font-family:roboto;
  108. font-size:12px;
  109. letter-spacing:2px;
  110. text-decoration:none;
  111. font-weight:400;
  112. width:170px;
  113. text-align:center;
  114. height:30px;
  115. position:absolute;
  116. top:300px;
  117. left:135px;
  118. color:#fff; /* colour of subtitle */
  119. text-transform:uppercase;
  120. text-shadow:2px 2px #000; /* shadow colour */
  121. }
  122.  
  123. .yoink{
  124. width:140px;
  125. height:140px;
  126. border-radius:140px;
  127. overflow:hidden;
  128. background:url('https://media.giphy.com/media/5R2TCZK5cjQh7r18j3/giphy.gif'); /* icon. should be square but it's not the end of the world if it isn't. */
  129. background-size:140px;
  130. position:absolute;
  131. top:570px;
  132. left:150px;
  133. margin-bottom:40px;
  134. }
  135.  
  136. .yoinkleft{
  137. width:120px;
  138. height:140px;
  139. padding-left:20px;
  140. padding-right:10px;
  141. position:absolute;
  142. top:570px;
  143. left:0px;
  144. font-family:roboto;
  145. font-size:12px;
  146. text-align:right;
  147. text-transform:uppercase;
  148. }
  149.  
  150. .yoinkleft #a{
  151. position:absolute;
  152. top:-10px;
  153. left:20px;
  154. padding-top:30px;
  155. height:30px;
  156. width:120px;
  157. padding-bottom:15px;
  158. border-bottom:1px #cacaca solid;
  159. }
  160.  
  161. .yoinkleft #b{
  162. position:absolute;
  163. top:50px;
  164. left:20px;
  165. padding-top:30px;
  166. height:30px;
  167. width:120px;
  168. padding-bottom:15px;
  169. border-bottom:1px #cacaca solid;
  170. }
  171.  
  172.  
  173. .yoinkright{
  174. width:120px;
  175. height:140px;
  176. padding-left:20px;
  177. padding-right:10px;
  178. position:absolute;
  179. top:570px;
  180. right:0px;
  181. font-family:roboto;
  182. font-size:12px;
  183. text-align:left;
  184. text-transform:uppercase;
  185. }
  186.  
  187. .yoinkright #a{
  188. position:absolute;
  189. top:-10px;
  190. left:10px;
  191. padding-top:30px;
  192. height:30px;
  193. width:120px;
  194. padding-bottom:15px;
  195. border-bottom:1px #cacaca solid;
  196. }
  197.  
  198. .yoinkright #b{
  199. position:absolute;
  200. top:50px;
  201. left:10px;
  202. padding-top:30px;
  203. height:30px;
  204. width:120px;
  205. padding-bottom:15px;
  206. border-bottom:1px #cacaca solid;
  207. }
  208.  
  209. .bio{
  210. width:230px;
  211. height:230px;
  212. position:absolute;
  213. top:750px;
  214. left:20px;
  215. padding:5px;
  216. overflow-y:scroll;
  217. font-family:roboto;
  218. font-size:12px;
  219. text-align:justify;
  220. margin-bottom:20px;
  221. }
  222.  
  223. .biotitle{
  224. width:220px;
  225. height:20px;
  226. font-family:roboto;
  227. text-transform:uppercase;
  228. font-size:20px;
  229. letter-spacing:2px;
  230. position:absolute;
  231. top:720px;
  232. left:30px;
  233. font-weight:600;
  234. color:#000;
  235. }
  236.  
  237. #line{
  238. width:1px;
  239. height:265px;
  240. position:absolute;
  241. top:725px;
  242. left:272px;
  243. background:#cacaca;
  244. }
  245.  
  246. .extrastatstitle{
  247. font-family:roboto;
  248. text-transform:uppercase;
  249. font-size:20px;
  250. letter-spacing:2px;
  251. font-weight:600;
  252. color:#000;
  253. position:absolute;
  254. top:720px;
  255. left:290px;
  256. width:160px;
  257. height:20px;
  258. }
  259.  
  260. .extrastats{
  261. width:160px;
  262. height:230px;
  263. position:absolute;
  264. top:750px;
  265. left:290px;
  266. font-family:roboto;
  267. font-size:12px;
  268. overflow:hidden;
  269. padding-top:5px;
  270. padding-bottom:5px;
  271. }
  272.  
  273. .extrastats b{
  274. font-size:13px;
  275. }
  276.  
  277. .extrastats p{
  278. margin-top:5px;
  279. margin-bottom:5px;
  280. }
  281.  
  282. #circles{
  283. width:400px;
  284. height:225px;
  285. padding-top:20px;
  286. border-top:1px #cacaca solid;
  287. position:absolute;
  288. top:1010px;
  289. left:20px;
  290. margin-bottom:20px;
  291. overflow:hidden;
  292. }
  293.  
  294. .yoikstitle{
  295. font-family:roboto;
  296. text-transform:uppercase;
  297. font-size:20px;
  298. letter-spacing:2px;
  299. font-weight:600;
  300. color:#000;
  301. position:absolute;
  302. top:20px;
  303. right:0px;
  304. width:180px;
  305. padding-left:20px;
  306. height:25px;
  307. border-left:1px #cacaca solid;
  308. }
  309.  
  310. .yoiks{
  311. width:180px;
  312. height:200px;
  313. position:absolute;
  314. top:45px;
  315. right:0px;
  316. border-left:1px #cacaca solid;
  317. padding-left:20px;
  318. }
  319.  
  320. .yoiks b{
  321. font-size:12px;
  322. }
  323.  
  324.  
  325. #uno{
  326. position: relative;
  327. width:180px;
  328. height:10px;
  329. border-radius:1px;
  330. background:#e4e4e4;
  331. margin-top:3px;
  332. }
  333.  
  334. #uno span{
  335. position:absolute;
  336. top:0;
  337. left:0;
  338. line-height: 10px;
  339. height:10px;
  340. background:#7e7e7e; /* change this to a colour constant in all your images */
  341. }
  342.  
  343. .noicenoicetitle{
  344. font-family:roboto;
  345. text-transform:uppercase;
  346. font-size:12px;
  347. letter-spacing:2px;
  348. font-weight:600;
  349. color:#fff; /* text colour */
  350. text-shadow:2px 2px #000; /* shadow colour */
  351. position:absolute;
  352. text-align:center;
  353. top:110px;
  354. left:0px;
  355. width:180px;
  356. height:20px;
  357. }
  358.  
  359. .noicenoice{
  360. width:180px;
  361. height:245px;
  362. position:absolute;
  363. top:20px;
  364. left:0px;
  365. background:url(''); /* resizes itself, adjust background-size as necessary */
  366. background-size:180px;
  367. }
  368.  
  369.  
  370. /* credit styling (don't delete because then the credit won't be pretty and unobtrusive) */
  371.  
  372. .credit{
  373. padding:5px;
  374. width:10px;
  375. height:10px;
  376. background:#f5f5f5;
  377. font-size:10px;
  378. color:#000;
  379. position:fixed;
  380. bottom:5px;
  381. left:5px;
  382. border-radius:10px;
  383. text-align:center;
  384. line-height:0px;
  385. }
  386.  
  387. .credit a, .credit i{
  388. color:#000;
  389. }
  390.  
  391.  
  392. #s-m-t-tooltip {
  393. max-width:300px;
  394. border-radius: 10px;
  395. padding:0px 5px;
  396. margin:25px 20px 5px 0px;
  397. color:#000;
  398. background:#fff;
  399. border:1px solid #eaeaea;
  400. z-index:99999;
  401. font-size:10px;
  402. text-transform:uppercase;
  403. font-family:montserrat;
  404. font-weight:400;
  405. z-index:999999999999999;
  406. }
  407.  
  408. </style>
  409.  
  410. </head>
  411.  
  412. <body>
  413.  
  414. <div id="container">
  415. <div class="bigimg">
  416. <h1></h1>
  417. <h2></h2>
  418. </div>
  419. <div class="yoink"></div>
  420. <div class="yoinkleft">
  421. <div id="a"><b>date of birth</b><br><i>14 January ????</i></div>
  422. <div id="b"><b>species</b><br><i>Tapu Lele</i></div>
  423. </div>
  424. <div class="yoinkright">
  425. <div id="a"><b>pronouns</b><br><i>he/she/they</i></div>
  426. <div id="b"><b>orientation</b><br><i>any hole is a goal.</i></div>
  427. </div>
  428.  
  429. <div id="line"></div>
  430.  
  431. <div class="biotitle">about.</div>
  432. <div class="bio">
  433. <center>This guardian deity of Akala is guilelessly cruel. The fragrant aroma of flowers is the source of its energy.
  434. <p>
  435. Problem child of the reef. Has an identity crisis once a week. Won’t hesitate to slay on or off the runway. Serving up pure fish 24/7.<p>
  436. Skill Swap - Moonblast - Psywave - Aromatic Mist - Nature's Madness - Energy Ball<p>
  437. <u>Out of the Closet</u><br>
  438. Huge WIP. Shitposting for now. Bewear snowballs. T1 battles on a good day. Lip sync battles erryday. Back rolls? Not here hunty. Sashay away.
  439. </div>
  440.  
  441. <div class="extrastatstitle">stats.</div>
  442. <div class="extrastats">
  443. <b>NAME</b><br>
  444. TOKO PIYON
  445. <p><b>OCCUPATION</b><br>
  446. GUARDIAN DEITY</p>
  447. <p><b>TYPING</b><br>
  448. PSYCHIC/FAIRY</p>
  449. <p><b>ABILITY</b><br>
  450. PSYCHIC SURGE</p>
  451. <p><b>H.I.</b><br>
  452. TAPUNIUM Z</p>
  453. <p><b>NATURE</b><br>
  454. SASSY [+SP.DEF./-SPD.]</p>
  455. <p><b>CHARACTERISTIC</b><br>
  456. SOMEWHAT VAIN</p>
  457. </div>
  458.  
  459.  
  460.  
  461. <div class="noicenoice"><div class="noicenoicetitle"></div></div>
  462.  
  463.  
  464.  
  465.  
  466. </div>
  467.  
  468.  
  469. </div>
  470.  
  471. <!-- credit: don't delete this, man. that's just rude. i made it extra small on purpose -->
  472. <div class="credit"><a title="code by anna" href="http://sprfluous.tumblr.com"><i style="font-size:9px;" class="far fa-star"></i></a></div>
  473.  
  474. </body>
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!