API tools faq
paste
Advertisement
Maria2312

Untitled

Maria2312
Jan 27th, 2021 (edited)
29
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 28.08 KB | None | 0 0
raw download clone embed print report
  1. <style>
  2. @font-face {font-family: England Signature; src: url(https://cdn.statically.io/gh/Audreyscodes/fonts/43f5ea93/England%20Signature.ttf);}
  3.  
  4.  
  5. /*Scrollbar*/
  6. ::-webkit-scrollbar {width: 4px;}
  7. ::-webkit-scrollbar-track {background:#999;}
  8. ::-webkit-scrollbar-thumb {background: #926DB7;}
  9. ::-webkit-scrollbar-thumb:hover {background: #D3C4E2;}
  10.  
  11. .header {
  12. background:url('https://i.postimg.cc/fR2KLjsS/tumblr-inline-opz7e1u-XYi1slw02g-540.gif')center;
  13. width:500px;
  14. height:175px;
  15. justify-content:center;
  16. align-items:center;
  17. display:flex;
  18. outline:1px solid #FFF;
  19. outline-offset:-5px
  20. }
  21.  
  22. .background {
  23. background:#FFF;
  24. width:498px;
  25. border:1px dotted #000;
  26. font:14px Karla
  27. }
  28.  
  29. .title {
  30. font-family:courier new,monospace;
  31. text-transform:uppercase;
  32. text-align:right;
  33. font-size:11px;
  34. letter-spacing:3px;
  35. margin-right:15px
  36. }
  37.  
  38. /* Style the tab */
  39. .tab {
  40. overflow: hidden;
  41. width:498px;
  42. margin-top:0px;
  43. border-bottom:1px dotted #000;
  44. }
  45.  
  46. /* Style the buttons that are used to open the tab content */
  47. .tab button {
  48. float: center;
  49. border: none;
  50. outline: none;
  51. cursor: pointer;
  52. padding: 10px;
  53. transition: 0.3s;
  54. background-color: rgba(255, 255, 255, 0);
  55. width: 20%;
  56. font-size: 20px;
  57. margin-left:20px;
  58. margin-right:-5px;
  59. }
  60.  
  61. /* Change background color of buttons on hover */
  62. .tab button:hover {
  63. background-color: none;
  64. }
  65.  
  66. /* Create an active/current tablink class */
  67. .tab button.active {
  68. background-color: none;
  69. color: none;
  70. }
  71.  
  72. /* Style the tab content */
  73. .tabcontent {
  74. display: none;
  75. overflow:auto;
  76. background-color:#FFF;
  77. width:100%
  78. }
  79.  
  80. .identity {
  81. -webkit-mask: url(https://i.imgur.com/eqJ13gg.png);
  82. mask: url(https://i.imgur.com/eqJ13gg.png);
  83. -webkit-mask-size:auto 40px;
  84. width: 40px;
  85. height: 40px;
  86. background-color: #d59c45;
  87. transition:0.7s
  88. }
  89.  
  90. .identity:hover {
  91. background-color: #9b461f;
  92. transition:0.7s
  93. }
  94.  
  95. .identity:active {
  96. background-color: #9b461f;
  97. }
  98.  
  99. .perso {
  100. -webkit-mask: url(https://i.imgur.com/rUGTpBa.png);
  101. mask: url(https://i.imgur.com/rUGTpBa.png);
  102. -webkit-mask-size:auto 40px;
  103. width: 40px;
  104. height: 40px;
  105. background-color: #d59c45;
  106. transition:0.7s
  107. }
  108.  
  109. .perso:hover {
  110. background-color: #9b461f;
  111. transition:0.7s
  112. }
  113.  
  114. .physic {
  115. -webkit-mask: url(https://i.imgur.com/Ff3q28e.png);
  116. mask: url(https://i.imgur.com/Ff3q28e.png);
  117. -webkit-mask-size:auto 40px;
  118. width: 40px;
  119. height: 40px;
  120. background-color: #d59c45;
  121. transition:0.7s
  122. }
  123.  
  124. .physic:hover {
  125. background-color: #9b461f;
  126. transition:0.7s
  127. }
  128.  
  129. .relation {
  130. -webkit-mask: url(https://i.imgur.com/myrcvbW.png);
  131. mask: url(https://i.imgur.com/myrcvbW.png);
  132. -webkit-mask-size:auto 40px;
  133. width: 40px;
  134. height: 40px;
  135. background-color: #d59c45;
  136. transition:0.7s
  137. }
  138.  
  139. .relation:hover {
  140. background-color: #9b461f;
  141. transition:0.7s
  142. }
  143.  
  144. .infos {
  145. flex:45%;
  146. }
  147.  
  148. .sideimg {
  149. background:url('https://i.postimg.cc/j21Zwx6Y/tenor.gif')center;
  150. flex:45%;
  151. height:160px;
  152. outline:1px solid #FFF;
  153. outline-offset:-5px
  154. }
  155.  
  156. .flex {
  157. display:flex;
  158. margin:10px
  159. }
  160.  
  161. .img {
  162. width:100%;
  163. height:250px;
  164. outline:1px solid #FFF;
  165. outline-offset:-10px;
  166. flex:30%
  167. }
  168.  
  169. .textright1 {
  170. opacity:0;
  171. transition: all .7s ease-in-out;
  172. -moz-transition: all .7s ease-in-out;
  173. -webkit-transition: all .7s ease-in-out;
  174. -ms-transition: all .7s ease-in-out;
  175. -o-transition: all .7s ease-in-out;
  176. text-align:justify;
  177. padding:10px;
  178. margin-left:100px;
  179. margin-top:0px;
  180. font:13px Karla;
  181. height:40px;
  182. overflow:hidden
  183. }
  184.  
  185. .MHD:hover > .textright1 {
  186. opacity:1;
  187. transition: all .7s ease-in-out;
  188. -moz-transition: all .7s ease-in-out;
  189. -webkit-transition: all .7s ease-in-out;
  190. -ms-transition: all .7s ease-in-out;
  191. -o-transition: all .7s ease-in-out;
  192. margin-left:10px;
  193. }
  194.  
  195. .textright2 {
  196. opacity:0;
  197. transition: all .9s ease-in-out;
  198. -moz-transition: all .9s ease-in-out;
  199. -webkit-transition: all .9s ease-in-out;
  200. -ms-transition: all .9s ease-in-out;
  201. -o-transition: all .9s ease-in-out;
  202. text-align:justify;
  203. padding:10px;
  204. margin-left:100px;
  205. margin-top:0px;
  206. font:13px Karla;
  207. height:40px;
  208. overflow:hidden
  209. }
  210.  
  211. .MHD:hover > .textright2 {
  212. opacity:1;
  213. transition: all .9s ease-in-out;
  214. -moz-transition: all .9s ease-in-out;
  215. -webkit-transition: all .9s ease-in-out;
  216. -ms-transition: all .9s ease-in-out;
  217. -o-transition: all .9s ease-in-out;
  218. margin-left:10px;
  219. }
  220.  
  221. .textright3 {
  222. opacity:0;
  223. transition: all 1.1s ease-in-out;
  224. -moz-transition: all 1.1s ease-in-out;
  225. -webkit-transition: all 1.1s ease-in-out;
  226. -ms-transition: all 1.1s ease-in-out;
  227. -o-transition: all 1.1s ease-in-out;
  228. text-align:justify;
  229. padding:10px;
  230. margin-left:100px;
  231. margin-top:0px;
  232. font:13px Karla;
  233. height:40px;
  234. overflow:hidden
  235. }
  236.  
  237. .MHD:hover > .textright3 {
  238. opacity:1;
  239. transition: all 1.1s ease-in-out;
  240. -moz-transition: all 1.1s ease-in-out;
  241. -webkit-transition: all 1.1s ease-in-out;
  242. -ms-transition: all 1.1s ease-in-out;
  243. -o-transition: all 1.1s ease-in-out;
  244. margin-left:10px;
  245. }
  246.  
  247. .textright4 {
  248. opacity:0;
  249. transition: all 1.3s ease-in-out;
  250. -moz-transition: all 1.3s ease-in-out;
  251. -webkit-transition: all 1.3s ease-in-out;
  252. -ms-transition: all 1.3s ease-in-out;
  253. -o-transition: all 1.3s ease-in-out;
  254. text-align:justify;
  255. padding:10px;
  256. margin-left:100px;
  257. margin-top:0px;
  258. font:13px Karla;
  259. height:40px;
  260. overflow:hidden
  261. }
  262.  
  263. .MHD:hover > .textright4 {
  264. opacity:1;
  265. transition: all 1.3s ease-in-out;
  266. -moz-transition: all 1.3s ease-in-out;
  267. -webkit-transition: all 1.3s ease-in-out;
  268. -ms-transition: all 1.3s ease-in-out;
  269. -o-transition: all 1.3s ease-in-out;
  270. margin-left:10px;
  271. }
  272.  
  273. .textleft1 {
  274. opacity:0;
  275. transition: all .7s ease-in-out;
  276. -moz-transition: all .7s ease-in-out;
  277. -webkit-transition: all .7s ease-in-out;
  278. -ms-transition: all .7s ease-in-out;
  279. -o-transition: all .7s ease-in-out;
  280. text-align:justify;
  281. padding:10px;
  282. margin-right:100px;
  283. font:13px Karla;
  284. height:40px;
  285. overflow:hidden
  286. }
  287.  
  288. .MHD:hover > .textleft1 {
  289. opacity:1;
  290. transition: all .7s ease-in-out;
  291. -moz-transition: all .7s ease-in-out;
  292. -webkit-transition: all .7s ease-in-out;
  293. -ms-transition: all .7s ease-in-out;
  294. -o-transition: all .7s ease-in-out;
  295. margin-right:10px;
  296. }
  297.  
  298. .textleft2 {
  299. opacity:0;
  300. transition: all .9s ease-in-out;
  301. -moz-transition: all .9s ease-in-out;
  302. -webkit-transition: all .9s ease-in-out;
  303. -ms-transition: all .9s ease-in-out;
  304. -o-transition: all .9s ease-in-out;
  305. text-align:justify;
  306. padding:10px;
  307. margin-right:100px;
  308. font:13px Karla;
  309. height:40px;
  310. overflow:hidden
  311. }
  312.  
  313. .MHD:hover > .textleft2 {
  314. opacity:1;
  315. transition: all .9s ease-in-out;
  316. -moz-transition: all .9s ease-in-out;
  317. -webkit-transition: all .9s ease-in-out;
  318. -ms-transition: all .9s ease-in-out;
  319. -o-transition: all .9s ease-in-out;
  320. margin-right:10px;
  321. }
  322.  
  323. .textleft3 {
  324. opacity:0;
  325. transition: all 1.1s ease-in-out;
  326. -moz-transition: all 1.1s ease-in-out;
  327. -webkit-transition: all 1.1s ease-in-out;
  328. -ms-transition: all 1.1s ease-in-out;
  329. -o-transition: all 1.1s ease-in-out;
  330. text-align:justify;
  331. padding:10px;
  332. margin-right:100px;
  333. font:13px Karla;
  334. height:40px;
  335. overflow:hidden
  336. }
  337.  
  338. .MHD:hover > .textleft3 {
  339. opacity:1;
  340. transition: all 1.1s ease-in-out;
  341. -moz-transition: all 1.1s ease-in-out;
  342. -webkit-transition: all 1.1s ease-in-out;
  343. -ms-transition: all 1.1s ease-in-out;
  344. -o-transition: all 1.1s ease-in-out;
  345. margin-right:10px;
  346. }
  347.  
  348. .textleft4 {
  349. opacity:0;
  350. transition: all 1.3s ease-in-out;
  351. -moz-transition: all 1.3s ease-in-out;
  352. -webkit-transition: all 1.3s ease-in-out;
  353. -ms-transition: all 1.3s ease-in-out;
  354. -o-transition: all 1.3s ease-in-out;
  355. text-align:justify;
  356. padding:10px;
  357. margin-right:100px;
  358. font:13px Karla;
  359. height:40px;
  360. overflow:hidden
  361. }
  362.  
  363. .MHD:hover > .textleft4 {
  364. opacity:1;
  365. transition: all 1.3s ease-in-out;
  366. -moz-transition: all 1.3s ease-in-out;
  367. -webkit-transition: all 1.3s ease-in-out;
  368. -ms-transition: all 1.3s ease-in-out;
  369. -o-transition: all 1.3s ease-in-out;
  370. margin-right:10px;
  371. }
  372.  
  373. .trait {
  374. padding:10px;
  375. margin:5px;
  376. background:rgb(0,0,0,0.3);
  377. flex:25%;
  378. transition: all 0.5s ease-in-out;
  379. -moz-transition: all 0.5s ease-in-out;
  380. -webkit-transition: all 0.5s ease-in-out;
  381. -ms-transition: all 0.5s ease-in-out;
  382. -o-transition: all 0.5s ease-in-out;
  383. color:#000;
  384. outline:1px solid;
  385. font-family:courier new,monospace;
  386. text-transform:uppercase
  387. }
  388.  
  389. .trait:hover {
  390. background:rgb(0,0,0,0.5);
  391. transition: all 0.5s ease-in-out;
  392. -moz-transition: all 0.5s ease-in-out;
  393. -webkit-transition: all 0.5s ease-in-out;
  394. -ms-transition: all 0.5s ease-in-out;
  395. -o-transition: all 0.5s ease-in-out;
  396. color: rgb(0,0,0,0)
  397. }
  398.  
  399. .trait > p {
  400. transition: all 0.5s ease-in-out;
  401. -moz-transition: all 0.5s ease-in-out;
  402. -webkit-transition: all 0.5s ease-in-out;
  403. -ms-transition: all 0.5s ease-in-out;
  404. -o-transition: all 0.5s ease-in-out;
  405. opacity:0;
  406. font-size:20px;
  407. margin-top:-20px;
  408. margin-bottom:-5px;
  409. transform:rotate(-380deg);
  410. cursor:pointer
  411. }
  412.  
  413. .trait:hover > p{
  414. opacity:1;
  415. transition: all 0.5s ease-in-out;
  416. -moz-transition: all 0.5s ease-in-out;
  417. -webkit-transition: all 0.5s ease-in-out;
  418. -ms-transition: all 0.5s ease-in-out;
  419. -o-transition: all 0.5s ease-in-out;
  420. color: #FFF;
  421. transform:rotate(0deg)
  422. }
  423.  
  424. .picture, .picture * {
  425. box-sizing: border-box;
  426. transition: .8s;
  427. border-radius:50%;
  428. }
  429.  
  430. .picture {
  431. width: 130px;
  432. height:130px;
  433. box-shadow:1px 1px 10px #000;
  434. border:7px solid #FFF;
  435. border-radius:50%;
  436. }
  437.  
  438. .picture > div > div {
  439. flex: 1;
  440. border: 1px solid #000;
  441. box-shadow: inset 0 0 0 5px #FFF9;
  442. border-radius:50%;
  443. }
  444.  
  445. .picture > div > div:hover {
  446. box-shadow: inset 0 0 0 125px #FFF9;
  447. border-radius:50%;
  448. }
  449.  
  450. .picture > div > div > div {
  451. padding: 5px;
  452. background: rgb(255,255,255,0.8);
  453. font-size: 12px;
  454. font-family:courier new,monospace;
  455. text-transform:uppercase;
  456. text-align: center;
  457. align-items:center;
  458. justify-content:center;
  459. display:flex;
  460. hyphens: auto;
  461. overflow: auto;
  462. transform: scale(0);
  463. height: 115px;
  464. border-radius:50%;
  465. }
  466.  
  467. .picture > div > div:hover > div {
  468. transform: scale(1);
  469. border-radius:50%;
  470. }
  471.  
  472. .type {
  473. margin-top:-30px;
  474. margin-bottom:-10px;
  475. font:40px England Signature;
  476. padding:5px
  477. }
  478.  
  479. .credits:hover {
  480. letter-spacing:3px;
  481. text-shadow: 2px 1px 5px #000;
  482. transition:0.5s;
  483. }
  484.  
  485.  
  486.  
  487. </style>
  488.  
  489. <link href="https://fonts.googleapis.com/css2?family=Karla&display=swap" rel="stylesheet">
  490.  
  491. <center>
  492.  
  493. <div class="header" style="background-size:cover"><div style="background:#fff;padding:3px 10px;font-size:12px;letter-spacing:2px;font-weight:bold;text-transform:uppercase;color:#000;">
  494. Maria Marianova Korfova
  495. </div></div>
  496.  
  497. <div class="background">
  498.  
  499. <div class="tab">
  500. <button class="tablinks" onclick="openCity(event, '1')" id="defaultOpen"><div class="identity"></div></button>
  501.  
  502. <button class="tablinks" onclick="openCity(event, '2')"><div class="perso"></div></button>
  503.  
  504. <button class="tablinks" onclick="openCity(event, '3')"><div class="physic"></div></button>
  505.  
  506. <button class="tablinks" onclick="openCity(event, '4')"><div class="relation"></div></button>
  507. </div>
  508.  
  509. <!--IDENTITY - TAB 1-->
  510. <div id="1" class="tabcontent">
  511. <br>
  512. <div class="title">Identity</div>
  513. <div style="display:flex">
  514. <div class="infos">
  515.  
  516. <center>
  517. <div style="width:225px;border-top:1px solid #666;margin-top:10px;margin-left:6px;margin-bottom:-5px"></div></center>
  518. <div style="display:flex">
  519. <div style="clip-path: polygon(0 10%, 70% 10%, 100% 50%, 70% 90%, 0 90%);width:40px;height:40px;background:#6a1d2f;flex:15%;margin-left:10px"></div>
  520. <div style="flex:85%;justify-content:center;align-items:center;display:flex;">NAME: Maria Korfova</div>
  521. </div>
  522. <center>
  523. <div style="width:225px;border-top:1px solid #666;margin-top:-5px;margin-left:6px;margin-bottom:5px"></div></center>
  524.  
  525. <center>
  526. <div style="width:225px;border-top:1px solid #666;margin-top:10px;margin-left:6px;margin-bottom:-5px"></div></center>
  527. <div style="display:flex">
  528. <div style="clip-path: polygon(0 10%, 70% 10%, 100% 50%, 70% 90%, 0 90%);width:40px;height:40px;background:#6a1d2f;flex:15%;margin-left:10px"></div>
  529. <div style="flex:85%;justify-content:center;align-items:center;display:flex;">NICKNAME: Mimi, Mims</div>
  530. </div>
  531. <center>
  532. <div style="width:225px;border-top:1px solid #666;margin-top:-5px;margin-left:6px;margin-bottom:5px"></div></center>
  533.  
  534. <center>
  535. <div style="width:225px;border-top:1px solid #666;margin-top:10px;margin-left:6px;margin-bottom:-5px"></div></center>
  536. <div style="display:flex">
  537. <div style="clip-path: polygon(0 10%, 70% 10%, 100% 50%, 70% 90%, 0 90%);width:40px;height:40px;background:#6a1d2f;flex:15%;margin-left:10px"></div>
  538. <div style="flex:85%;justify-content:center;align-items:center;display:flex;">BIRTHDAY: December 23th</div>
  539. </div>
  540. <center>
  541. <div style="width:225px;border-top:1px solid #666;margin-top:-5px;margin-left:6px;margin-bottom:5px"></div></center>
  542.  
  543. <center>
  544. <div style="width:225px;border-top:1px solid #666;margin-top:10px;margin-left:6px;margin-bottom:-5px"></div></center>
  545. <div style="display:flex">
  546. <div style="clip-path: polygon(0 10%, 70% 10%, 100% 50%, 70% 90%, 0 90%);width:40px;height:40px;background:#6a1d2f;flex:15%;margin-left:10px"></div>
  547. <div style="flex:85%;justify-content:center;align-items:center;display:flex;">IG BIRTHDAY: Wednesday, week 4</div>
  548. </div>
  549. <center>
  550. <div style="width:225px;border-top:1px solid #666;margin-top:-5px;margin-left:6px;margin-bottom:5px"></div></center>
  551. </div>
  552.  
  553.  
  554. <div class="sideimg" style="background-size:cover;margin:10px"></div>
  555. </div>
  556.  
  557. <div style="background:url('https://i.postimg.cc/5NwPgCV6/2d6fb3a9e8022edec57137222e85a88c.gif')center;width:480;height:150px;background-size:cover;margin:10px;outline:1px solid #FFF;
  558. outline-offset:-5px"></div>
  559.  
  560. <div style="display:flex">
  561. <div class="infos">
  562.  
  563. <center>
  564. <div style="width:225px;border-top:1px solid #666;margin-top:10px;margin-left:6px;margin-bottom:-5px"></div></center>
  565. <div style="display:flex">
  566. <div style="clip-path: polygon(0 10%, 70% 10%, 100% 50%, 70% 90%, 0 90%);width:40px;height:40px;background:#6a1d2f;flex:15%;margin-left:10px"></div>
  567. <div style="flex:85%;justify-content:center;align-items:center;display:flex;">STAR SIGN:Capricorn</div>
  568. </div>
  569. <center>
  570. <div style="width:225px;border-top:1px solid #666;margin-top:-5px;margin-left:6px;margin-bottom:5px"></div></center>
  571.  
  572. <center>
  573. <div style="width:225px;border-top:1px solid #666;margin-top:10px;margin-left:6px;margin-bottom:-5px"></div></center>
  574. <div style="display:flex">
  575. <div style="clip-path: polygon(0 10%, 70% 10%, 100% 50%, 70% 90%, 0 90%);width:40px;height:40px;background:#6a1d2f;flex:15%;margin-left:10px"></div>
  576. <div style="flex:85%;justify-content:center;align-items:center;display:flex;">GENDER:Female</div>
  577. </div>
  578. <center>
  579. <div style="width:225px;border-top:1px solid #666;margin-top:-5px;margin-left:6px;margin-bottom:5px"></div></center>
  580.  
  581. <center>
  582. <div style="width:225px;border-top:1px solid #666;margin-top:10px;margin-left:6px;margin-bottom:-5px"></div></center>
  583. <div style="display:flex">
  584. <div style="clip-path: polygon(0 10%, 70% 10%, 100% 50%, 70% 90%, 0 90%);width:40px;height:40px;background:#6a1d2f;flex:15%;margin-left:10px"></div>
  585. <div style="flex:85%;justify-content:center;align-items:center;display:flex;">ORIENTATION:Straight</div>
  586. </div>
  587. <center>
  588. <div style="width:225px;border-top:1px solid #666;margin-top:-5px;margin-left:6px;margin-bottom:5px"></div></center>
  589.  
  590. <center>
  591. <div style="width:225px;border-top:1px solid #666;margin-top:10px;margin-left:6px;margin-bottom:-5px"></div></center>
  592. <div style="display:flex">
  593. <div style="clip-path: polygon(0 10%, 70% 10%, 100% 50%, 70% 90%, 0 90%);width:40px;height:40px;background:#6a1d2f;flex:15%;margin-left:10px"></div>
  594. <div style="flex:85%;justify-content:center;align-items:center;display:flex;">STATUS:Sadly single</div>
  595. </div>
  596. <center>
  597. <div style="width:225px;border-top:1px solid #666;margin-top:-5px;margin-left:6px;margin-bottom:5px"></div></center>
  598. </div>
  599.  
  600. <div class="infos">
  601.  
  602. <center>
  603. <div style="width:225px;border-top:1px solid #666;margin-top:10px;margin-left:6px;margin-bottom:-5px"></div></center>
  604. <div style="display:flex">
  605. <div style="clip-path: polygon(0 10%, 70% 10%, 100% 50%, 70% 90%, 0 90%);width:40px;height:40px;background:#6a1d2f;flex:15%;margin-left:10px"></div>
  606. <div style="flex:85%;justify-content:center;align-items:center;display:flex;">INSTITUTE:Lightwood</div>
  607. </div>
  608. <center>
  609. <div style="width:225px;border-top:1px solid #666;margin-top:-5px;margin-left:6px;margin-bottom:5px"></div></center>
  610.  
  611. <center>
  612. <div style="width:225px;border-top:1px solid #666;margin-top:10px;margin-left:6px;margin-bottom:-5px"></div></center>
  613. <div style="display:flex">
  614. <div style="clip-path: polygon(0 10%, 70% 10%, 100% 50%, 70% 90%, 0 90%);width:40px;height:40px;background:#6a1d2f;flex:15%;margin-left:10px"></div>
  615. <div style="flex:85%;justify-content:center;align-items:center;display:flex;">JOB:AM-Demonology</div>
  616. </div>
  617. <center>
  618. <div style="width:225px;border-top:1px solid #666;margin-top:-5px;margin-left:6px;margin-bottom:5px"></div></center>
  619.  
  620. <center>
  621. <div style="width:225px;border-top:1px solid #666;margin-top:10px;margin-left:6px;margin-bottom:-5px"></div></center>
  622. <div style="display:flex">
  623. <div style="clip-path: polygon(0 10%, 70% 10%, 100% 50%, 70% 90%, 0 90%);width:40px;height:40px;background:#6a1d2f;flex:15%;margin-left:10px"></div>
  624. <div style="flex:85%;justify-content:center;align-items:center;display:flex;">OCCUPATION:Shadowhunter in training</div>
  625. </div>
  626. <center>
  627. <div style="width:225px;border-top:1px solid #666;margin-top:-5px;margin-left:6px;margin-bottom:5px"></div></center>
  628.  
  629. <center>
  630. <div style="width:225px;border-top:1px solid #666;margin-top:10px;margin-left:6px;margin-bottom:-5px"></div></center>
  631. <div style="display:flex">
  632. <div style="clip-path: polygon(0 10%, 70% 10%, 100% 50%, 70% 90%, 0 90%);width:40px;height:40px;background:#6a1d2f;flex:15%;margin-left:10px"></div>
  633. <div style="flex:85%;justify-content:center;align-items:center;display:flex;">WEAPON BY CHOICE:Whip</div>
  634. </div>
  635. <center>
  636. <div style="width:225px;border-top:1px solid #666;margin-top:-5px;margin-left:6px;margin-bottom:5px"></div></center>
  637. </div>
  638. </div></div>
  639.  
  640. <br>
  641. <!--PERSONALITY - TAB 2-->
  642. <div id="2" class="tabcontent">
  643. <div class="title">Personality</div>
  644.  
  645. <div class="flex">
  646. <div class="trait">SHY
  647. <p>66%</p></div>
  648. <div class="trait">SARCASTIC
  649. <p>100%</p></div>
  650. <div class="trait">KIND
  651. <p>72%</p></div>
  652. <div class="trait">CREATIVE
  653. <p>93%</p></div>
  654. </div>
  655.  
  656. <div class="flex">
  657. <div class="trait">INTELIGENT
  658. <p>84%</p></div>
  659. <div class="trait">TALKATIVE
  660. <p>70%</p></div>
  661. <div class="trait">MOODY
  662. <p>92%</p></div>
  663. <div class="trait">AMBITIOUS
  664. <p>93%</p></div>
  665. </div>
  666.  
  667. </div>
  668.  
  669.  
  670. <!--PHYSIC - TAB 3-->
  671. <div id="3" class="tabcontent">
  672. <div class="title">Appearance</div>
  673.  
  674. <div class="flex">
  675. <div class="img" style="background:url('https://64.media.tumblr.com/c5f8b9774990d9b4dfd5e3cc27507cdd/tumblr_inline_opz7hdL3wc1slw02g_540.gif')center;background-size:cover;"></div>
  676.  
  677. <div class="MHD" style="flex:65%;">
  678. <div class="textright1">
  679. <center>
  680. <div style="width:225px;border-top:1px solid #666;margin-top:10px;margin-left:6px;margin-bottom:-5px"></div></center>
  681. <div style="display:flex">
  682. <div style="clip-path: polygon(0 10%, 70% 10%, 100% 50%, 70% 90%, 0 90%);width:40px;height:40px;background:#6a1d2f;flex:15%;margin-left:10px"></div>
  683. <div style="flex:85%;justify-content:center;align-items:center;display:flex;">HAIR:Brown</div>
  684. </div>
  685. <center>
  686. <div style="width:225px;border-top:1px solid #666;margin-top:-5px;margin-left:6px;margin-bottom:5px"></div></center></div>
  687.  
  688. <div class="textright2">
  689. <center>
  690. <div style="width:225px;border-top:1px solid #666;margin-top:10px;margin-left:6px;margin-bottom:-5px"></div></center>
  691. <div style="display:flex">
  692. <div style="clip-path: polygon(0 10%, 70% 10%, 100% 50%, 70% 90%, 0 90%);width:40px;height:40px;background:#6a1d2f;flex:15%;margin-left:10px"></div>
  693. <div style="flex:85%;justify-content:center;align-items:center;display:flex;">EYES:Dark Brown</div>
  694. </div>
  695. <center>
  696. <div style="width:225px;border-top:1px solid #666;margin-top:-5px;margin-left:6px;margin-bottom:5px"></div></center></div>
  697.  
  698. <div class="textright3">
  699. <center>
  700. <div style="width:225px;border-top:1px solid #666;margin-top:10px;margin-left:6px;margin-bottom:-5px"></div></center>
  701. <div style="display:flex">
  702. <div style="clip-path: polygon(0 10%, 70% 10%, 100% 50%, 70% 90%, 0 90%);width:40px;height:40px;background:#6a1d2f;flex:15%;margin-left:10px"></div>
  703. <div style="flex:85%;justify-content:center;align-items:center;display:flex;">HEIGHT:160 cm</div>
  704. </div>
  705. <center>
  706. <div style="width:225px;border-top:1px solid #666;margin-top:-5px;margin-left:6px;margin-bottom:5px"></div></center>
  707. </div>
  708.  
  709. <div class="textright4">
  710. <center>
  711. <div style="width:225px;border-top:1px solid #666;margin-top:10px;margin-left:6px;margin-bottom:-5px"></div></center>
  712. <div style="display:flex">
  713. <div style="clip-path: polygon(0 10%, 70% 10%, 100% 50%, 70% 90%, 0 90%);width:40px;height:40px;background:#6a1d2f;flex:15%;margin-left:10px"></div>
  714. <div style="flex:85%;justify-content:center;align-items:center;display:flex;">BUILD:Medium</div>
  715. </div>
  716. <center>
  717. <div style="width:225px;border-top:1px solid #666;margin-top:-5px;margin-left:6px;margin-bottom:5px"></div></center>
  718. </div>
  719. </div>
  720. </div>
  721.  
  722. <br>
  723.  
  724. <div class="flex">
  725.  
  726. <div class="MHD" style="flex:65%;">
  727. <div class="textleft1">
  728. <center>
  729. <div style="width:225px;border-top:1px solid #666;margin-top:10px;margin-left:6px;margin-bottom:-5px"></div></center>
  730. <div style="display:flex">
  731. <div style="clip-path: polygon(0 10%, 70% 10%, 100% 50%, 70% 90%, 0 90%);width:40px;height:40px;background:#6a1d2f;flex:15%;margin-left:10px"></div>
  732. <div style="flex:85%;justify-content:center;align-items:center;display:flex;">SKIN:Almond</div>
  733. </div>
  734. <center>
  735. <div style="width:225px;border-top:1px solid #666;margin-top:-5px;margin-left:6px;margin-bottom:5px"></div></center></div>
  736.  
  737. <div class="textleft2">
  738. <center>
  739. <div style="width:225px;border-top:1px solid #666;margin-top:10px;margin-left:6px;margin-bottom:-5px"></div></center>
  740. <div style="display:flex">
  741. <div style="clip-path: polygon(0 10%, 70% 10%, 100% 50%, 70% 90%, 0 90%);width:40px;height:40px;background:#6a1d2f;flex:15%;margin-left:10px"></div>
  742. <div style="flex:85%;justify-content:center;align-items:center;display:flex;">TATTOO:None</div>
  743. </div>
  744. <center>
  745. <div style="width:225px;border-top:1px solid #666;margin-top:-5px;margin-left:6px;margin-bottom:5px"></div></center></div>
  746.  
  747. <div class="textleft3">
  748. <center>
  749. <div style="width:225px;border-top:1px solid #666;margin-top:10px;margin-left:6px;margin-bottom:-5px"></div></center>
  750. <div style="display:flex">
  751. <div style="clip-path: polygon(0 10%, 70% 10%, 100% 50%, 70% 90%, 0 90%);width:40px;height:40px;background:#6a1d2f;flex:15%;margin-left:10px"></div>
  752. <div style="flex:85%;justify-content:center;align-items:center;display:flex;">PIERCING:None</div>
  753. </div>
  754. <center>
  755. <div style="width:225px;border-top:1px solid #666;margin-top:-5px;margin-left:6px;margin-bottom:5px"></div></center>
  756. </div>
  757.  
  758. <div class="textleft4">
  759. <center>
  760. <div style="width:225px;border-top:1px solid #666;margin-top:10px;margin-left:6px;margin-bottom:-5px"></div></center>
  761. <div style="display:flex">
  762. <div style="clip-path: polygon(0 10%, 70% 10%, 100% 50%, 70% 90%, 0 90%);width:40px;height:40px;background:#6a1d2f;flex:15%;margin-left:10px"></div>
  763. <div style="flex:85%;justify-content:center;align-items:center;display:flex;">EAR PIERCING:4(Total)</div>
  764. </div>
  765. <center>
  766. <div style="width:225px;border-top:1px solid #666;margin-top:-5px;margin-left:6px;margin-bottom:5px"></div></center>
  767.  
  768. </div>
  769. </div>
  770.  
  771. <div class="img" style="background:url('https://64.media.tumblr.com/e2d489f94f45d08a1284add4aac6f934/tumblr_inline_opz8d9sCec1slw02g_540.gif')center;background-size:cover;"></div>
  772. </div>
  773. </div>
  774.  
  775. <!--RELATIONS - TAB 4-->
  776. <div id="4" class="tabcontent">
  777. <div class="title">Relations</div>
  778.  
  779. <div class="flex" style="justify-content:space-between">
  780.  
  781. <div class="picture">
  782.  
  783. <div><div style="background: url(https://thumbs.gfycat.com/DemandingOrdinaryGallinule-small.gif)center;background-size:cover">
  784. <div>
  785. Best Friend
  786. </div></div></div>
  787.  
  788. </div>
  789.  
  790. <div class="picture">
  791.  
  792. <div><div style="background: url(https://i.pinimg.com/originals/58/0e/32/580e32f00f55fc847b078aefb580bf8e.gif)center;background-size:cover">
  793. <div>
  794. Best Friend
  795. </div></div></div>
  796.  
  797. </div>
  798.  
  799. <div class="picture">
  800.  
  801. <div><div style="background: url(https://img.wattpad.com/9418df98ac4e9889856ed7c3ce4d0ce6ca63081a/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f776174747061642d6d656469612d736572766963652f53746f7279496d6167652f396947527862773438545a3337513d3d2d3634333235323638392e313535653231333334623738653737323532313535353633363234342e676966?s=fit&w=720&h=720)center;background-size:cover">
  802. <div>
  803. Best Friend
  804. </div></div></div>
  805.  
  806. </div>
  807.  
  808. </div>
  809.  
  810. <div class="flex" style="justify-content:space-between">
  811.  
  812. <div class="type">Rebeca Goldwell</div>
  813.  
  814. <div class="type">Nicole Lightpen</div>
  815.  
  816. <div class="type">Scarlett Moon</div>
  817.  
  818. </div>
  819.  
  820. <div class="flex" style="justify-content:space-between">
  821.  
  822. <div class="picture">
  823.  
  824. <div><div style="background: url(https://media.tumblr.com/26f94d37de3d0cfbb86582680bbe44c2/tumblr_inline_mlh1b49TIz1qz4rgp.gif)center;background-size:cover">
  825. <div>
  826. Friend
  827. </div></div></div>
  828.  
  829. </div>
  830.  
  831. <div class="picture">
  832.  
  833. <div><div style="background: url(https://64.media.tumblr.com/0213d701ad6bb9b3f19e46001d880353/ebd3c64ad0b28e82-7e/s250x400/771c2a6bc81a5d45bfd5ecbd0f69fc71ad92346b.gifv)center;background-size:cover">
  834. <div>
  835. Friend
  836. </div></div></div>
  837.  
  838. </div>
  839.  
  840. <div class="picture">
  841.  
  842. <div><div style="background: url(https://multimodesign.com/wp-content/uploads/2020/03/185_n_COTTODESTE-BLACK-WHITE-black-minimale.jpg)center;background-size:cover">
  843. <div>
  844. Type of relation
  845. </div></div></div>
  846.  
  847. </div>
  848.  
  849. </div>
  850.  
  851. <div class="flex" style="justify-content:space-between">
  852.  
  853. <div class="type">Liberty Jones</div>
  854.  
  855. <div class="type">Angela Bathory</div>
  856.  
  857. <div class="type">Name</div>
  858.  
  859. </div>
  860.  
  861. </div>
  862.  
  863. </div>
  864. <!-- Credits DO NOT REMOVE-->
  865. <a class="credits" href="https://audreyscodes.tumblr.com" style="text-decoration:none;color:#000;transition:0.5s"><div style="display:block;font-size:9px;color:#000;text-transform:uppercase;text-decoration:none;font-family:arial;text-align:center;padding:20px;">© By Audrey's Codes</div></a>
  866. <br><br><br>
  867. </center>
  868.  
  869. <script>
  870. document.getElementsByClassName('tablinks')[0].click()
  871. function openCity(evt, cityName) {
  872. var i,
  873. tabcontent,
  874. tablinks;
  875. tabcontent = document.getElementsByClassName("tabcontent");
  876. for (i = 0; i < tabcontent.length; i++) {
  877. tabcontent[i].style.display = "none";
  878. }
  879. tablinks = document.getElementsByClassName("tablinks");
  880. for (i = 0; i < tablinks.length; i++) {
  881. tablinks[i].className = tablinks[i].className.replace(" active", "");
  882. }
  883. document.getElementById(cityName).style.display = "block";
  884. evt.currentTarget.className += " active";
  885. }
  886. </script>
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!