API tools faq
paste
Advertisement
RageQxeen

Crafty

RageQxeen
Jun 24th, 2020
79
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 20.18 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2. <body>
  3. <script defer>
  4. // Oil Painting
  5. // Ported from flash project - http://wonderfl.net/c/92Ul
  6. //
  7. //
  8. function OilPainting(){
  9.  
  10. var canvas;
  11. var context;
  12.  
  13. var width;
  14. var height;
  15.  
  16. var startPos = {x: window.innerWidth/2, y: window.innerHeight/2};
  17. var prevPos = {x: window.innerWidth/2, y: 0};
  18. var dist = {x: 0, y: 0};
  19. var colour = '#'+Math.floor(Math.random()*16777215).toString(16);
  20.  
  21.  
  22. this.initialize = function(){
  23. canvas = document.getElementById("canvas");
  24. context = canvas.getContext('2d');
  25.  
  26. width = window.innerWidth
  27. height = window.innerHeight
  28.  
  29. canvas.width = width;
  30. canvas.height = height;
  31.  
  32. canvas.addEventListener('mousemove', MouseMove, false);
  33. canvas.addEventListener('click', MouseDown, false);
  34. canvas.addEventListener('dblclick', MouseDbl, false);
  35. }
  36.  
  37.  
  38. var MouseMove = function(e) {
  39. var distance = Math.sqrt(Math.pow(prevPos.x - startPos.x, 2) +
  40. Math.pow(prevPos.y - startPos.y, 2));
  41.  
  42. var a = distance * 10 * (Math.pow(Math.random(), 2) - 0.5);
  43.  
  44. var r = Math.random() - 0.5;
  45.  
  46. var size = (Math.random() * 15) / distance;
  47.  
  48. dist.x = (prevPos.x - startPos.x) * Math.sin(0.5) + startPos.x;
  49. dist.y = (prevPos.y - startPos.y) * Math.cos(0.5) + startPos.y;
  50.  
  51. startPos.x = prevPos.x;
  52. startPos.y = prevPos.y;
  53.  
  54. prevPos.x = (e.layerX);
  55. prevPos.y = (e.layerY);
  56.  
  57. // ------- Draw -------
  58. var lWidth = (Math.random()+20/10-0.5)*size+(1-Math.random()+30/20-0.5)*size;
  59. context.lineWidth = lWidth;
  60. context.strokeWidth = lWidth;
  61.  
  62. context.lineCap = 'round';
  63. context.lineJoin = 'round';
  64.  
  65. context.beginPath();
  66. context.moveTo(startPos.x, startPos.y);
  67. context.quadraticCurveTo(dist.x, dist.y, prevPos.x, prevPos.y);
  68.  
  69. context.fillStyle = colour;
  70. context.strokeStyle = colour;
  71.  
  72. context.moveTo(startPos.x + a, startPos.y + a);
  73. context.lineTo(startPos.x + r + a, startPos.y + r + a);
  74.  
  75. context.stroke();
  76. context.fill();
  77.  
  78. context.closePath();
  79. }
  80.  
  81. var MouseDown = function(e) {
  82. e.preventDefault();
  83. colour = '#'+Math.floor(Math.random()*16777215).toString(16);
  84. context.fillStyle = colour;
  85. context.strokeStyle = colour;
  86. }
  87.  
  88. var MouseDbl = function(e) {
  89. e.preventDefault();
  90. context.clearRect(0, 0, width, height);
  91. }
  92.  
  93. }
  94.  
  95. var app = new OilPainting();
  96. app.initialize();
  97. </script>
  98. <style type="text/css">
  99.  
  100. @import url(https://fonts.googleapis.com/css?family=Architects+Daughter|Crafty+Girls|Bangers|Cinzel);
  101.  
  102. @import "compass/css3";
  103.  
  104. body {
  105. margin:0px;
  106. overflow: hidden;
  107. font-family: 'Give You Glory', cursive;
  108. font-size: 40px;
  109. background-color: #ddd6cd;
  110.  
  111. &:hover {
  112. span {
  113. display: none;
  114. }
  115. }
  116. }
  117.  
  118. span {
  119. position: fixed;
  120. top: 100%;
  121. left: 100%;
  122. color: #000;
  123. margin-top: -40px;
  124. margin-left: -227px;
  125. }
  126.  
  127. ::-webkit-scrollbar-button:vertical:{
  128. background-color: #transparent;}
  129.  
  130. ::-webkit-scrollbar-thumb:vertical {
  131. background-color:#transparent;
  132. height:150px;}
  133.  
  134. ::-webkit-scrollbar-thumb:horizontal {
  135. background-color:#transparent;
  136. height:60px;}
  137.  
  138.  
  139. ::-webkit-scrollbar {
  140. height:60px;
  141. width:5px;
  142. background-color:#transparent;}
  143.  
  144. #image {
  145. display: block;
  146. width: 22vw;
  147. margin: 0px;
  148. border: none;
  149. height: 40vw;
  150. background-color:transparent;
  151. left: 38vw;
  152. bottom: 0vw;
  153. position: fixed;
  154. background-image:url("http://i.picpar.com/9QAe.png");
  155. background-repeat:no-repeat;
  156. background-position: bottom;
  157. background-size: 100%;
  158. filter: drop-shadow(30px 10px 4px #000);
  159. }
  160.  
  161. .name {position: absolute;
  162. font-family: 'Crafty Girls';
  163. color: #fff;
  164. font-size: 5vw;
  165. bottom: 5vw;
  166. left: 41vw;
  167. width: 43vw;
  168. height: 6.2vw;
  169. border: 0px solid #000;
  170. text-align: justify;
  171. text-shadow: -2px 0 #c0c0c0, 0 2px #000,2px 0 #000, 0 -2px #c0c0c0;
  172. overflow: auto;
  173. padding:5px 5px 5px 5px;
  174. z-index: 2;
  175. }
  176.  
  177. .title { background: transparent;
  178. background:url('https://i.makeagif.com/media/10-20-2015/6A0Ftx.gif') 50px 50px repeat;
  179. background-position: center;
  180. position: absolute;
  181. font-family: 'Crafty Girls';
  182. font-size: 5vw;
  183. bottom: 5vw;
  184. left: 41vw;
  185. width: 43vw;
  186. height: 6.2vw;
  187. text-align: justify;
  188. padding:5px 5px 5px 5px;
  189. -webkit-text-fill-color: transparent;
  190. -webkit-background-clip: text;
  191. z-index: 3;
  192. }
  193.  
  194. .alias {position: absolute;
  195. font-family: 'Bangers';
  196. color: #DAA520;
  197. font-size: 3vw;
  198. bottom: 2vw;
  199. left: 35vw;
  200. width: 30vw;
  201. height: 4vw;
  202. text-align: center;
  203. text-shadow: -1px 0 #c0c0c0, 0 1px #000,1px 0 #000, 0 -1px #c0c0c0;
  204. overflow: auto;
  205. padding:5px 5px 5px 5px;
  206. z-index: 1;}
  207.  
  208. #string {
  209. background-color: #ff0000;
  210. width: .7vw;
  211. height: 15vw;
  212. position: absolute;
  213. left: 10vw;
  214. top: 0vw;
  215. z-index: 1;
  216. filter: drop-shadow(30px 10px 4px #000);
  217. -webkit-transition: 1s ease-in-out;
  218. -moz-transition: 1s ease-in-out;
  219. -o-transition: 1s ease-in-out;
  220. -ms-transition: 1s ease-in-out;
  221. transition: 1s ease-in-out;
  222. }
  223.  
  224. #string:hover {
  225. left: 15vw;
  226. top: 0vw;
  227. height: 20vw;
  228. background-color: #00ffff;
  229. }
  230.  
  231. #icon1 {
  232. width: 10vw;
  233. margin: 0px;
  234. border: none;
  235. height: 10vw;
  236. background-color:transparent;
  237. position: absolute;
  238. right: -5vw;
  239. bottom: -5vw;
  240. padding: 5px;
  241. background-image:url("http://i.picpar.com/QQAe.jpg");
  242. background-repeat:no-repeat;
  243. background-position: bottom;
  244. background-size: cover;
  245. border: 3px solid #ff0000;
  246. -moz-border-radius: 100%;
  247. -webkit-border-radius: 100%;
  248. border-radius: 100%;
  249. }
  250.  
  251. #string1 {
  252. background-color: #0000ff;
  253. width: .7vw;
  254. height: 30vw;
  255. position: absolute;
  256. left: 30vw;
  257. top: 0vw;
  258. z-index: 1;
  259. filter: drop-shadow(30px 10px 4px #000);
  260. -webkit-transition: 1s ease-in-out;
  261. -moz-transition: 1s ease-in-out;
  262. -o-transition: 1s ease-in-out;
  263. -ms-transition: 1s ease-in-out;
  264. transition: 1s ease-in-out;
  265. }
  266.  
  267. #string1:hover {
  268. left: 25vw;
  269. top: 0vw;
  270. height: 25vw;
  271. background-color: #ffff00;
  272. }
  273.  
  274. #icon2 {
  275. width: 10vw;
  276. margin: 0px;
  277. border: none;
  278. height: 10vw;
  279. background-color:transparent;
  280. position: absolute;
  281. right: -5vw;
  282. bottom: -5vw;
  283. padding: 5px;
  284. background-image:url("http://i.picpar.com/SQAe.jpg");
  285. background-repeat:no-repeat;
  286. background-position: top;
  287. background-size: cover;
  288. border: 3px solid #0000ff;
  289. -moz-border-radius: 100%;
  290. -webkit-border-radius: 100%;
  291. border-radius: 100%;
  292. }
  293.  
  294. #string2 {
  295. background-color: #00ff00;
  296. width: .7vw;
  297. height: 30vw;
  298. position: absolute;
  299. right: 30vw;
  300. top: 0vw;
  301. z-index: 1;
  302. filter: drop-shadow(30px 10px 4px #000);
  303. -webkit-transition: 1s ease-in-out;
  304. -moz-transition: 1s ease-in-out;
  305. -o-transition: 1s ease-in-out;
  306. -ms-transition: 1s ease-in-out;
  307. transition: 1s ease-in-out;
  308. }
  309.  
  310. #string2:hover {
  311. right: 25vw;
  312. top: 0vw;
  313. height: 25vw;
  314. background-color: #ff00ff;
  315. }
  316.  
  317. #icon3 {
  318. width: 10vw;
  319. margin: 0px;
  320. border: none;
  321. height: 10vw;
  322. background-color:transparent;
  323. position: absolute;
  324. right: -5vw;
  325. bottom: -5vw;
  326. padding: 5px;
  327. background-image:url("http://i.picpar.com/TQAe.jpg");
  328. background-repeat:no-repeat;
  329. background-position: center;
  330. background-size: cover;
  331. border: 3px solid #00ff00;
  332. -moz-border-radius: 100%;
  333. -webkit-border-radius: 100%;
  334. border-radius: 100%;
  335. }
  336.  
  337. #string3 {
  338. background-color: #ff00e1;
  339. width: .7vw;
  340. height: 15vw;
  341. position: absolute;
  342. right: 10vw;
  343. top: 0vw;
  344. z-index: 1;
  345. filter: drop-shadow(30px 10px 4px #000);
  346. -webkit-transition: 1s ease-in-out;
  347. -moz-transition: 1s ease-in-out;
  348. -o-transition: 1s ease-in-out;
  349. -ms-transition: 1s ease-in-out;
  350. transition: 1s ease-in-out;
  351. }
  352.  
  353. #string3:hover {
  354. right: 15vw;
  355. top: 0vw;
  356. height: 20vw;
  357. background-color: #00ff1e;
  358. }
  359.  
  360. #icon4 {
  361. width: 10vw;
  362. margin: 0px;
  363. border: none;
  364. height: 10vw;
  365. background-color:transparent;
  366. position: absolute;
  367. right: -5vw;
  368. bottom: -5vw;
  369. padding: 5px;
  370. background-image:url("http://i.picpar.com/UQAe.jpg");
  371. background-repeat:no-repeat;
  372. background-position: top;
  373. background-size: cover;
  374. border: 3px solid #ff00e1;
  375. -moz-border-radius: 100%;
  376. -webkit-border-radius: 100%;
  377. border-radius: 100%;
  378. }
  379.  
  380. .fade {
  381. opacity: 0;
  382. -webkit-transition: opacity 1s ease-in-out;
  383. -moz-transition: opacity 1s ease-in-out;
  384. -o-transition: opacity 1s ease-in-out;
  385. -ms-transition: opacity 1s ease-in-out;
  386. transition: opacity 1s ease-in-out;
  387. }
  388.  
  389. .fade:hover {
  390. opacity: 1;
  391. }
  392.  
  393. #container {
  394. background-color:#afbeca;
  395. width: 20vw;
  396. height: 20vw;
  397. margin:auto;
  398. position: absolute;
  399. padding: 5px;
  400. right: -10vw;
  401. bottom: -10vw;
  402. z-index:1;
  403. border: 3px solid #00ffff;
  404. -moz-border-radius: 100%;
  405. -webkit-border-radius: 100%;
  406. border-radius: 100%;
  407. -webkit-animation: puff-in-center 1s cubic-bezier(0.470, 0.000, 0.745, 0.715) 3s both;
  408. animation: puff-in-center 1s cubic-bezier(0.470, 0.000, 0.745, 0.715) 3s both;
  409. }
  410.  
  411. #content {
  412. background-color: transparent;
  413. width: 15vw;
  414. height: 14vw;
  415. margin:auto;
  416. position: absolute;
  417. padding: 10px;
  418. font-size: 15px;
  419. font-family: 'Architects Daughter', cursive;
  420. color:#000;
  421. opacity: 0.98;
  422. right: 2vw;
  423. bottom: 3vw;
  424. z-index:1;
  425. }
  426.  
  427. #container1 {
  428. background-color:#afbeca;
  429. width: 20vw;
  430. height: 20vw;
  431. margin:auto;
  432. position: absolute;
  433. padding: 5px;
  434. right: -10vw;
  435. bottom: -10vw;
  436. z-index:1;
  437. border: 3px solid #ffff00;
  438. -moz-border-radius: 100%;
  439. -webkit-border-radius: 100%;
  440. border-radius: 100%;
  441. -webkit-animation: puff-in-center 1s cubic-bezier(0.470, 0.000, 0.745, 0.715) 3s both;
  442. animation: puff-in-center 1s cubic-bezier(0.470, 0.000, 0.745, 0.715) 3s both;
  443. }
  444.  
  445. #content1 {
  446. background-color: transparent;
  447. width: 15vw;
  448. height: 14vw;
  449. margin:auto;
  450. position: absolute;
  451. padding: 10px;
  452. font-size: 15px;
  453. font-family: 'Architects Daughter', cursive;
  454. color:#000;
  455. opacity: 0.98;
  456. right: 2vw;
  457. bottom: 3vw;
  458. z-index:1;
  459. }
  460.  
  461. #container2 {
  462. background-color:#afbeca;
  463. width: 20vw;
  464. height: 20vw;
  465. margin:auto;
  466. position: absolute;
  467. padding: 5px;
  468. right: -10vw;
  469. bottom: -10vw;
  470. z-index:1;
  471. border: 3px solid #ffff00;
  472. -moz-border-radius: 100%;
  473. -webkit-border-radius: 100%;
  474. border-radius: 100%;
  475. -webkit-animation: puff-in-center 1s cubic-bezier(0.470, 0.000, 0.745, 0.715) 3s both;
  476. animation: puff-in-center 1s cubic-bezier(0.470, 0.000, 0.745, 0.715) 3s both;
  477. }
  478.  
  479. #content2 {
  480. background-color: transparent;
  481. width: 15vw;
  482. height: 14vw;
  483. margin:auto;
  484. position: absolute;
  485. padding: 10px;
  486. font-size: 15px;
  487. font-family: 'Architects Daughter', cursive;
  488. color:#000;
  489. opacity: 0.98;
  490. right: 2vw;
  491. bottom: 3vw;
  492. z-index:1;
  493. }
  494.  
  495. #container3 {
  496. background-color:#afbeca;
  497. width: 20vw;
  498. height: 20vw;
  499. margin:auto;
  500. position: absolute;
  501. padding: 5px;
  502. right: -10vw;
  503. bottom: -10vw;
  504. z-index:1;
  505. border: 3px solid #ffff00;
  506. -moz-border-radius: 100%;
  507. -webkit-border-radius: 100%;
  508. border-radius: 100%;
  509. -webkit-animation: puff-in-center 1s cubic-bezier(0.470, 0.000, 0.745, 0.715) 3s both;
  510. animation: puff-in-center 1s cubic-bezier(0.470, 0.000, 0.745, 0.715) 3s both;
  511. }
  512.  
  513. #content3 {
  514. background-color: transparent;
  515. width: 15vw;
  516. height: 14vw;
  517. margin:auto;
  518. position: absolute;
  519. padding: 10px;
  520. font-size: 15px;
  521. font-family: 'Architects Daughter', cursive;
  522. color:#000;
  523. opacity: 0.98;
  524. right: 2vw;
  525. bottom: 3vw;
  526. z-index:1;
  527. }
  528.  
  529. i{color: #443a59;}
  530. b{color: #000;}
  531. a{color: #444; text-decoration: none;}
  532. h1{
  533. background: url('https://66.media.tumblr.com/1c977c831efa3bc4168e19016fa67b69/tumblr_nu3c85zFnP1ufwwv5o1_400.gif');
  534. background-size: cover;
  535. background-position: center;
  536. text-align: center;
  537. border: 2px solid #000;
  538. border-radius: 15px;
  539. font-size: 30px;
  540. font-family: 'Cinzel', cursive;
  541. color: #000;
  542. text-shadow: 1px 1px 0 #c0c0c0, -1px -1px 0 #c0c0c0, -1px 1px 0 #c0c0c0, 1px -1px 0 #c0c0c0;
  543. line-height: 1.5;
  544. }
  545. h2{
  546. background: url('https://data.whicdn.com/images/331447615/original.gif');
  547. background-size: cover;
  548. background-position: center;
  549. text-align: center;
  550. border: 2px solid #000;
  551. border-radius: 15px;
  552. font-size: 30px;
  553. font-family: 'Cinzel', cursive;
  554. color: #000;
  555. text-shadow: 1px 1px 0 #c0c0c0, -1px -1px 0 #c0c0c0, -1px 1px 0 #c0c0c0, 1px -1px 0 #c0c0c0;
  556. line-height: 1.5;}
  557. h3{
  558. background: url('https://data.whicdn.com/images/298049071/original.gif');
  559. background-size: cover;
  560. background-position: center;
  561. text-align: center;
  562. border: 2px solid #000;
  563. border-radius: 15px;
  564. font-size: 30px;
  565. font-family: 'Cinzel', cursive;
  566. color: #000;
  567. text-shadow: 1px 1px 0 #c0c0c0, -1px -1px 0 #c0c0c0, -1px 1px 0 #c0c0c0, 1px -1px 0 #c0c0c0;
  568. line-height: 1.5;}
  569. h4{
  570. background: url('https://i.pinimg.com/originals/d4/e0/66/d4e06664e1e5373736b17d9d3138bf94.gif');
  571. background-size: cover;
  572. background-position: center;
  573. text-align: center;
  574. border: 2px solid #000;
  575. border-radius: 15px;
  576. font-size: 30px;
  577. font-family: 'Cinzel', cursive;
  578. color: #000;
  579. text-shadow: 1px 1px 0 #c0c0c0, -1px -1px 0 #c0c0c0, -1px 1px 0 #c0c0c0, 1px -1px 0 #c0c0c0;
  580. line-height: 1.5;}
  581.  
  582. h5{
  583. background: url('https://data.whicdn.com/images/109944593/original.gif');
  584. background-size: cover;
  585. background-position: center;
  586. text-align: center;
  587. border: 2px solid #000;
  588. border-radius: 15px;
  589. font-size: 30px;
  590. font-family: 'Cinzel', cursive;
  591. color: #000;
  592. text-shadow: 1px 1px 0 #c0c0c0, -1px -1px 0 #c0c0c0, -1px 1px 0 #c0c0c0, 1px -1px 0 #c0c0c0;
  593. line-height: 1.5;}
  594.  
  595. <!--If you're wondering why I decided on the wording for the 'alias', it's to show you that you're not alone in this fight, and that I'm here for you if you need me. I may not be a phone call or text away just yet, but don't be afraid to let me know if you're hurting. It's what sisters are for, remember? Love you, Sunshine.-->
  596.  
  597. </style>
  598. <canvas id='canvas'></canvas>
  599. <div id="image"></div>
  600.  
  601.  
  602. <div class="name">Crafty</div>
  603. <div class="title">Crafty</div>
  604. <div class="alias">My story isn't done yet</div>
  605.  
  606. <div id="string">
  607. <div id="icon1"></div>
  608. <div id="container" class="fade">
  609. <div id="content">
  610.  
  611.  
  612. <div style="width: 15vw; height: 14vw; overflow-y: hidden;">
  613.  
  614. <a name="one"></a>
  615. <div style="width: 15vw; height: 14vw; overflow: auto;" align="left">
  616. <h1>Dossier</h1>
  617. <font style=float:left><b>Name</b></font> <font style=float:right>Hamae Suki</font><br>
  618. <font style=float:left><b>Moniker</b></font> <font style=float:right>Little artist. Splatts</font><br>
  619. <font style=float:left><b>Gender</b></font> <font style=float:right>Female</font><br>
  620. <font style=float:left><b>Age</b></font> <font style=float:right>17</font><br>
  621. <font style=float:left><b>Date of birth</b></font> <font style=float:right>Feb 20</font><br>
  622. <font style=float:left><b>Height</b></font> <font style=float:right>5'0"</font><br>
  623. <font style=float:left><b>Weight</b></font> <font style=float:right>100 lbs</font><br>
  624. <font style=float:left><b>Tresses</b></font> <font style=float:right>Dark Brown</font><br>
  625. <font style=float:left><b>Irises</b></font> <font style=float:right>Brown</font><br>
  626. <font style=float:left><b>Marital</b></font> <font style=float:right><a href="https://roleplay.chat/profile.php?user=Koro" target="_blank">Colorful Feelings</a></font><br>
  627. <font style=float:left><b>Orientation</b></font> <font style=float:right>Straight</font><br><br>
  628. <font style=float:left><b>Voice</b></font> <font style=float:right><a href="https://www.youtube.com/watch?v=kof-kHZH5uc" target="_blank">Tohru Honda</a></font><br>
  629. <font style=float:left><b>Theme</b></font> <font style=float:right><a href="https://www.youtube.com/watch?v=OvRbhoiLGK0" target="_blank">StopRewind</a></font><br>
  630. <br><br><br><br>
  631.  
  632. </div>
  633. </div>
  634. </div>
  635. </div>
  636. </div>
  637.  
  638. <div id="string1">
  639. <div id="icon2"></div>
  640. <div id="container1" class="fade">
  641. <div id="content1">
  642.  
  643.  
  644. <div style="width: 15vw; height: 14vw; overflow-y: hidden;">
  645.  
  646. <a name="one"></a>
  647. <div style="width: 15vw; height: 14vw; overflow: auto;" align="left">
  648. <h2>Quirk</h2>
  649. <b>Quirk Name</b>: Pigmentation<br>
  650. <b>Quirk Type</b>: Emitter/Accumulation <br>
  651. <br>
  652. <b>Quirk Description</b>: The ability to absorb or obtain any color by touching. With her quirk she is able to draw or create only lifeless or unanimated objects. Can use different artistic techniques (watercolors, pointillism, mosaic, acrylics, etc.) However, it doesn’t give any extra strength to the object. Still has to apply to the laws of physics and what the real object is meant to do. Her fingers (or even her whole hands) can encapsulate said colors. She can absorb a limit of 5 colors each time, can mix them either in her fingers (hands) or once she creates something.
  653. <br>
  654. <b>Quirk Drawbacks/ Weaknesses</b>:
  655. <ul>
  656. <li>Drawn objects have a limit of time while being ‘used’, depending on her physical condition can go from 10 minutes to half an hour.
  657. <li>Water is her worst enemy…obvious reasons.
  658. <li>The more time she keeps the pigment inside her skin, it sickens her. All due to the toxins of the change of melanin in her body. Can cause nausea, dizziness, fever, or faint. Has to keep in check how long she keeps the colors absorbed.
  659. </ul>
  660.  
  661. <h5>Combat Stats</h5>
  662. <font style=float:left><b>Cooperation</b></font> <font style=float:right>●●●●○</font><br>
  663. <font style=float:left><b>Power</b></font> <font style=float:right>●●○○○</font><br>
  664. <font style=float:left><b>Speed</b></font> <font style=float:right>●○○○○</font><br>
  665. <font style=float:left><b>Intelligence</b></font> <font style=float:right>●●●●●</font><br>
  666. <font style=float:left><b>Technique</b></font> <font style=float:right>●●●○○</font><br>
  667.  
  668.  
  669. </div>
  670. </div>
  671. </div>
  672. </div>
  673. </div>
  674.  
  675. <div id="string2">
  676. <div id="icon3"></div>
  677. <div id="container2" class="fade">
  678. <div id="content2">
  679.  
  680.  
  681. <div style="width: 15vw; height: 14vw; overflow-y: hidden;">
  682.  
  683. <a name="one"></a>
  684. <div style="width: 15vw; height: 14vw; overflow: auto;" align="left">
  685. <h3>Headcanons</h3>
  686. ☀Her name means : [Beloved Sketch]<br>
  687. ☀Has a <b>Beloved</b> Brother. Hasn't seen him since she was a young child. Misses him dearly.<br>
  688. ☀ Has a traumatic childhood, but it only gives her fuel to improve her quirk and abilities. <br>
  689. ☀ Tends to smile a lot, has a positive attitude even when things go south. (Is an ‘All Might’ fan).<br>
  690. ☀ Loves any type of arts; musicals, performance, painting, sculpture, literature, etc. Living with her grandparents had impacted her in a good way. She had been going to museums, opera and such because of them.<br>
  691. ☀ Knows how to play the piano because of her mother.<br>
  692. ☀ Teaches arts and crafts in an elementary school on Fridays afternoon. <br>
  693. ☀ Most of the times she uses gloves to cover her fingertips. Does know how to use and control her quirk, but prefers to prevent another accident. <br>
  694. ☀ Loves sweets and treats. Her grandmother would make some sweets for her when little; because of her she tends to buy sweets from time to time or anytime she gets a job well done. <br>
  695. ☀ Due to the different intakes of pigments and incrementation of toxins due to the absorption of the colors; carries different medicines and pills that help her deal with the side effects of her quirk.<br>
  696. ☀ Does love to take care of her skin, has many creams and facial products. <br>
  697. ☀ Besides of being a hero, wishes to become an artist without using her quirk. She has shown on galleries her watercolor and acrylic techniques featuring gardens and flowers.<br>
  698. ☀ She does know how to play certain instruments. Her favorite is the piano, especially because she can play it with her gloves on.<br>
  699. ☀ Enjoys playing video games from time to time. Specially RPG/adventure – cool characters and graphics; inspire her drawings- and horror-based games -music and the opaque colors schemes…<br>
  700. </div>
  701. </div>
  702. </div>
  703. </div>
  704. </div>
  705.  
  706. <div id="string3">
  707. <div id="icon4"></div>
  708. <div id="container3" class="fade">
  709. <div id="content3">
  710.  
  711.  
  712. <div style="width: 15vw; height: 14vw; overflow-y: hidden;">
  713.  
  714. <a name="one"></a>
  715. <div style="width: 15vw; height: 14vw; overflow: auto;" align="left">
  716. <h4>Out of Paint</h4>
  717. <center><b>00</b>. Code painstakingly worked on by <a href="/profile.php?user=RageQxeen" target="_blank">RageQxeen</a>, DM for Commissions!<br><br></center>
  718. <b>01</b>. OOC.<br>
  719. <b>02</b>. OOC.<br>
  720. <b>03</b>. OOC.<br>
  721. <b>04</b>. OOC.<br>
  722. <b>05</b>. OOC.<br>
  723.  
  724. </div>
  725. </div>
  726. </div>
  727. </div>
  728. </div>
  729. </body>
  730. </html>
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!