API tools faq
paste
Advertisement
Guest User

persons

a guest
Jul 19th, 2019
170
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 30.02 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5. <title>Imanuel Cunninghan</title>
  6. <meta charset="utf-8">
  7.  
  8. <script src="https://codepen.io/bexdin/pen/NzJgJW.js"></script>
  9.  
  10. <style>
  11. @import url("https://fonts.googleapis.com/css?family=DM+Serif+Display|Playfair+Display|Raleway&display=swap");
  12.  
  13. @import url("https://fonts.googleapis.com/css?family=Muli&display=swap");
  14.  
  15. @import url("//dl.dropbox.com/s/50g6fbds3rh4m0j/saturnicons.css");
  16.  
  17. @import url("//dl.dropbox.com/s/vpi3f9s7nhpe7v7/honeybee.css");
  18.  
  19. ::-webkit-scrollbar {
  20. width: 5px;
  21. }
  22. ::-webkit-scrollbar-track {
  23. background-color: #bac97d;
  24. width: 2px;
  25. border: 2px solid #fff;
  26. }
  27. ::-webkit-scrollbar-thumb {
  28. background-color: #fff;
  29. }
  30.  
  31. #header {
  32. width: 100%;
  33. height: 700px;
  34. background-color: #bac97d;
  35. }
  36.  
  37. .hone {
  38. width: 50%;
  39. height: 100%;
  40. float: left;
  41. }
  42.  
  43. .htwo {
  44. width: 50%;
  45. height: 100%;
  46. float: right;
  47. }
  48.  
  49. .hname {
  50. padding: 50px;
  51. font-family: "DM Serif Display", serif;
  52. font-size: 55px;
  53. text-align: right;
  54. letter-spacing: 1px;
  55. line-height: 45px;
  56. }
  57.  
  58. .hname b {
  59. letter-spacing: 2px;
  60. }
  61.  
  62. .hdivisor {
  63. width: 60px;
  64. height: 20px;
  65. background-color: #000;
  66. float: right;
  67. margin-right: 50px;
  68. }
  69.  
  70. .himage {
  71. width: 600px;
  72. height: 400px;
  73. float: right;
  74. margin-top: 50px;
  75. margin-right: -60px;
  76. background-position: center;
  77. background-size: cover;
  78. background-color: #bac97d;
  79. background-blend-mode: multiply;
  80. }
  81.  
  82. .hone1 {
  83. width: 300px;
  84. height: 200px;
  85. background-color: transparent;
  86. float: left;
  87. border-left: 3px solid #000;
  88. border-top: 3px solid #000;
  89. margin-top: 25px;
  90. margin-left: 25px;
  91. }
  92.  
  93. .hone2 {
  94. width: 300px;
  95. height: 200px;
  96. background-color: transparent;
  97. float: left;
  98. border-left: 3px solid #000;
  99. border-bottom: 3px solid #000;
  100. margin-top: 470px;
  101. margin-left: 25px;
  102. position: absolute;
  103. }
  104.  
  105. #header .th {
  106. font-size: 45px;
  107. color: #000;
  108. position: absolute;
  109. margin-left: -315px;
  110. margin-top: 325px;
  111. }
  112.  
  113. .hquote {
  114. width: 500px;
  115. height: auto;
  116. position: absolute;
  117. margin-top: 310px;
  118. margin-left: 100px;
  119. font-family: "Playfair Display", serif;
  120. font-size: 25px;
  121. text-align: justify;
  122. }
  123.  
  124. #content1 {
  125. width: 100%;
  126. height: auto;
  127. margin-top: 10px;
  128. display: grid;
  129. grid-template-columns: 1fr 1fr;
  130. }
  131.  
  132. h1 {
  133. font-family: "Playfair Display", serif;
  134. font-size: 25px;
  135. letter-spacing: 1px;
  136. }
  137.  
  138. h1:after {
  139. content: "";
  140. display: inline-block;
  141. vertical-align: middle;
  142. margin: 0px 0px 0px 15px;
  143. width: 80%;
  144. height: 1px;
  145. background: #bac97d;
  146. }
  147.  
  148. .cbasic {
  149. padding-left: 20px;
  150. font-family: "Muli", sans-serif;
  151. font-size: 13px;
  152. text-transform: lowercase;
  153. line-height: 25px;
  154. }
  155.  
  156. .info1 {
  157. font-family: "Raleway", sans-serif;
  158. font-size: 14px;
  159. letter-spacing: 2px;
  160. font-weight: 700;
  161. padding: 20px;
  162. text-align: center;
  163. }
  164.  
  165. .info2 {
  166. width: 1px;
  167. height: 40px;
  168. background-color: #bac97d;
  169. margin: 0px 5px 0px 5px;
  170. }
  171.  
  172. .info3 {
  173. padding: 20px;
  174. font-size: 13px;
  175. }
  176.  
  177. .cbasic table {
  178. margin: auto;
  179. }
  180.  
  181. .cpoints {
  182. padding-left: 20px;
  183. font-family: "Muli", sans-serif;
  184. font-size: 13px;
  185. text-transform: lowercase;
  186. line-height: 25px;
  187. background-color: transparent;
  188. }
  189.  
  190. .cpoints table {
  191. margin: auto;
  192. }
  193.  
  194. .points1 {
  195. width: 20%;
  196. font-family: 'Raleway', sans-serif;
  197. font-size: 15px;
  198. font-weight: 700;
  199. letter-spacing: 1px;
  200. text-align: center;
  201. margin: auto;
  202. margin-top: 25px;
  203. }
  204.  
  205. .points2 {
  206. width: 50%;
  207. text-align: center;
  208. margin: auto;
  209. }
  210.  
  211. .points2 .th {
  212. color: #bac97d;
  213. font-size: 15px;
  214. padding: 2px;
  215. }
  216.  
  217. #content2 {
  218. width: 100%;
  219. height: 240px;
  220. margin-top: 10px;
  221. margin: auto;
  222. display: grid;
  223. grid-template-columns: 1fr 1fr 1fr;
  224. background-color: transparent;
  225. }
  226.  
  227. #content2 h1 {
  228. font-family: "Playfair Display", serif;
  229. font-size: 25px;
  230. letter-spacing: 1px;
  231. }
  232.  
  233. #content2 h1:after {
  234. content: "";
  235. display: inline-block;
  236. vertical-align: middle;
  237. margin: 0px 0px 0px 15px;
  238. width: 70%;
  239. height: 1px;
  240. background: #bac97d;
  241. }
  242.  
  243. #content2 ul {
  244. padding: 0px;
  245. margin: 0px;
  246. margin-top: 10px;
  247. list-style: none;
  248. }
  249.  
  250. #content2 li {
  251. padding-top: 16px;
  252. }
  253.  
  254. #content2 li::before {
  255. content: "\ebc6";
  256. font-family: honeybee;
  257. padding-right: 7px;
  258. font-size: 6px;
  259. color: #bac97d;
  260. }
  261.  
  262. .cheadc{
  263. padding: 0px 20px;
  264. font-family: "Muli", sans-serif;
  265. font-size: 13px;
  266. text-transform: lowercase;
  267. text-align: justify;
  268. line-height: 13px;
  269. overflow: auto;
  270. }
  271.  
  272. #content3 {
  273. width: 100%;
  274. height: 600px;
  275. margin: 20px auto auto auto;
  276. display: grid;
  277. grid-template-columns: 1fr 1fr;
  278. }
  279.  
  280. #content3 h1:after {
  281. content: "";
  282. display: inline-block;
  283. vertical-align: middle;
  284. margin: 0px 0px 0px 15px;
  285. width: 70%;
  286. height: 1px;
  287. background: #bac97d;
  288. }
  289.  
  290. .cbio {
  291. font-family: 'Muli', sans-serif;
  292. font-size: 13px;
  293. padding: 0px 20px;
  294. overflow: auto;
  295. text-align: justify;
  296. }
  297.  
  298. .cbio h3 {
  299. text-align: center;
  300. color: #bac97d;
  301. font-family: 'Raleway', sans-serif;
  302. letter-spacing: 0.5px;
  303. font-weight: 700;
  304. }
  305.  
  306. .cbio ul {
  307. margin: 0px;
  308. list-style: none;
  309. }
  310.  
  311. .cbio li {
  312. padding: 0 10px;
  313. margin-left: -40px;
  314. margin-top: 10px;
  315. }
  316.  
  317. .cbio li::before {
  318. content: "\e1e1";
  319. font-family: saturnicons;
  320. padding-right: 7px;
  321. font-size: 11px;
  322. color: #bac97d;
  323. }
  324.  
  325. .crelations {
  326. padding: 0px 20px;
  327. overflow: auto;
  328. }
  329.  
  330. /* ---- MUSES BAR ---- */
  331.  
  332. .crelations .musebar {
  333. float: left;
  334. background: transparent;
  335. width: 300px;
  336. height: 520px;
  337. overflow-y: auto;
  338.  
  339. }
  340.  
  341. /* ---- CHAR PAGE ---- */
  342.  
  343. .crelations .charcontainer {
  344. background: transparent;
  345. margin-left: 320px;
  346. width: 520px;
  347. }
  348.  
  349. .crelations .chardesc {
  350. position: absolute;
  351. background: transparent;
  352. color: #555;
  353. font-family: muli;
  354. width: 390px;
  355. height: 500px;
  356. overflow-y: auto;
  357. text-align: justify;
  358. padding: 10px;
  359. }
  360.  
  361. .crelations .char1 {
  362. font-family: muli;
  363. font-size: 16px;
  364. color: #555;
  365. border-bottom: 1px solid #bac97d;
  366. }
  367.  
  368. .crelations .sf {
  369. font-size: 20px;
  370. color: #bac97d;
  371. padding: 0px 2px;
  372. }
  373.  
  374. .crelations .th {
  375. font-size: 20px;
  376. color: #bac97d;
  377. padding: 0px 2px;
  378. }
  379.  
  380. .crelations .char2 {
  381. font-family: muli;
  382. font-size: 10px;
  383. color: #b6b6b6;
  384. padding-top: 2px;
  385. }
  386.  
  387. .crelations .char2 .sf {
  388. font-size: 5px;
  389. }
  390.  
  391. .crelations .char2 .th {
  392. font-size: 5px;
  393. }
  394.  
  395. .crelations .char3 {
  396. font-family: muli;
  397. font-size: 11px;
  398. color: #555;
  399. margin-top: 10px;
  400. }
  401.  
  402. .crelations .char4 {
  403. margin-top: 10px;
  404. height: 120px;
  405. font-family: muli;
  406. font-size: 10px;
  407. color: #555;
  408. padding-right: 20px;
  409. overflow-y: auto;
  410. }
  411.  
  412. .crelations .char4 ul {
  413. list-style: none;
  414. margin-right: 20px;
  415. }
  416.  
  417. .crelations .char4 li::before {
  418. content: "\e08f";
  419. font-family: saturnicons;
  420. font-size: 6px;
  421. padding-right: 5px;
  422. color: #bac97d;
  423. }
  424.  
  425. .crelations .char5 {
  426. height: 100px;
  427. margin-top: 20px;
  428. background-color: transparent;
  429. font-family: muli;
  430. font-size: 11px;
  431. color: #bac97d;
  432. overflow: auto;
  433. }
  434.  
  435. .crelations .char5 a {
  436. color: #555;
  437. text-decoration: none;
  438. }
  439.  
  440.  
  441.  
  442. /* ---- isotope ---- */
  443.  
  444. .grid {
  445. background: transparent;
  446. }
  447.  
  448. /* clear fix */
  449. .grid:after {
  450. content: '';
  451. display: block;
  452. clear: both;
  453. }
  454.  
  455. /* ---- ELEMENT ITEM ---- */
  456.  
  457. .element-item {
  458. width: 75px;
  459. height: 75px;
  460. margin: 5px;
  461. float: left;
  462. overflow: hidden;
  463. border: 5px solid #f8f8f8;
  464. background-size: cover;
  465. background-position: center;
  466. }
  467.  
  468. /* ----- TAB ----- */
  469.  
  470. ul.tab {
  471. list-style-type: none;
  472. text-decoration: none;
  473. margin: 0;
  474. padding: 0;
  475. overflow: hidden;
  476. }
  477.  
  478. /* Float the list items side by side */
  479. ul.tab li {float: left;
  480. padding: 0px;
  481. margin: 0x;}
  482.  
  483. /* Style the links inside the list items */
  484. ul.tab li a {
  485. display: inline-block;
  486.  
  487. }
  488.  
  489. /* Create an active/current tablink class */
  490. ul.tab li a:focus, .active {
  491.  
  492. }
  493.  
  494. /* Style the tab content */
  495. .tabcontent {
  496. display: none;
  497. -webkit-animation: fadeEffect 1s;
  498. animation: fadeEffect 1s;
  499. }
  500.  
  501.  
  502. .tablinks {cursor: pointer;}
  503.  
  504. @-webkit-keyframes fadeEffect {
  505. from {opacity: 0;}
  506. to {opacity: 1;}
  507. }
  508.  
  509. @keyframes fadeEffect {
  510. from {opacity: 0;}
  511. to {opacity: 1;}
  512. }
  513.  
  514. </style>
  515.  
  516. </head>
  517.  
  518. <body>
  519.  
  520. <div id="header">
  521. <div class="hone">
  522. <div class="hquote">Dont be fooled by the aesthetic theme, I still love memes.</div>
  523. <div class="hone1"></div>
  524. <span class="th th-mapple-leaf-o"></span>
  525. <div class="hone2"></div>
  526. </div>
  527. <div class="htwo">
  528. <div class="hname"><b>Imanuel</b><br> Cunninghan</div>
  529. <div class="hdivisor"></div>
  530. <div class="himage" style="background-image: url(https://static1.squarespace.com/static/5a94a8a9c3c16a87c24903b3/5b3a698b8a922d1d8b29bed3/5b3a6ef670a6add143c5f1a3/1530556156412/IMG_0439.jpg);"></div>
  531. </div>
  532. </div>
  533.  
  534. <div id="content1">
  535.  
  536. <div class="cbasic">
  537. <h1>basics</h1>
  538.  
  539. <table>
  540. <tr>
  541. <td>
  542. <div class="info1">nome completo</div>
  543. </td>
  544. <td>
  545. <div class="info2"></div>
  546. </td>
  547. <td>
  548. <div class="info3">imanuel cunninghan</div>
  549. </td>
  550. </tr>
  551.  
  552. <tr>
  553. <td>
  554. <div class="info1">apelidos</div>
  555. </td>
  556. <td>
  557. <div class="info2"></div>
  558. </td>
  559. <td>
  560. <div class="info3">manu, manu bro</div>
  561. </td>
  562. </tr>
  563.  
  564. <tr>
  565. <td>
  566. <div class="info1">idade</div>
  567. </td>
  568. <td>
  569. <div class="info2"></div>
  570. </td>
  571. <td>
  572. <div class="info3">vinte e dois anos</div>
  573. </td>
  574. </tr>
  575.  
  576. <tr>
  577. <td>
  578. <div class="info1">data de nascimento</div>
  579. </td>
  580. <td>
  581. <div class="info2"></div>
  582. </td>
  583. <td>
  584. <div class="info3">28 de dezembro</div>
  585. </td>
  586. </tr>
  587.  
  588. <tr>
  589. <td>
  590. <div class="info1">cidade natal</div>
  591. </td>
  592. <td>
  593. <div class="info2"></div>
  594. </td>
  595. <td>
  596. <div class="info3">aberdeen, escócia</div>
  597. </td>
  598. </tr>
  599.  
  600. <tr>
  601. <td>
  602. <div class="info1">cidade atual</div>
  603. </td>
  604. <td>
  605. <div class="info2"></div>
  606. </td>
  607. <td>
  608. <div class="info3">glasgow, escócia</div>
  609. </td>
  610. </tr>
  611.  
  612. <tr>
  613. <td>
  614. <div class="info1">ocupação</div>
  615. </td>
  616. <td>
  617. <div class="info2"></div>
  618. </td>
  619. <td>
  620. <div class="info3">balconista e barman</div>
  621. </td>
  622. </tr>
  623.  
  624. <tr>
  625. <td>
  626. <div class="info1">sexualidade</div>
  627. </td>
  628. <td>
  629. <div class="info2"></div>
  630. </td>
  631. <td>
  632. <div class="info3">heterosexual</div>
  633. </td>
  634. </tr>
  635.  
  636. <tr>
  637. <td>
  638. <div class="info1">financeiro</div>
  639. </td>
  640. <td>
  641. <div class="info2"></div>
  642. </td>
  643. <td>
  644. <div class="info3">classe média ($$$)</div>
  645. </td>
  646. </tr>
  647.  
  648. <tr>
  649. <td>
  650. <div class="info1">raça</div>
  651. </td>
  652. <td>
  653. <div class="info2"></div>
  654. </td>
  655. <td>
  656. <div class="info3">humano</div>
  657. </td>
  658. </tr>
  659.  
  660. <tr>
  661. <td>
  662. <div class="info1">faceclaim</div>
  663. </td>
  664. <td>
  665. <div class="info2"></div>
  666. </td>
  667. <td>
  668. <div class="info3">brian imanuel</div>
  669. </td>
  670. </tr>
  671. </table>
  672.  
  673. </div>
  674. <div class="cpoints">
  675. <h1>points</h1>
  676.  
  677. <div class="points1">Força</div>
  678. <div class="points2">
  679.  
  680. <span class="th th-circle"></span>
  681. <span class="th th-circle"></span>
  682. <span class="th th-circle"></span>
  683. <span class="th th-circle"></span>
  684. <span class="th th-circle"></span>
  685. <span class="th th-circle"></span>
  686. <span class="th th-circle"></span>
  687. <span class="th th-circle-o"></span>
  688. <span class="th th-circle-o"></span>
  689. <span class="th th-circle-o"></span>
  690.  
  691. </div>
  692.  
  693. <div class="points1">Destreza</div>
  694. <div class="points2">
  695.  
  696. <span class="th th-circle"></span>
  697. <span class="th th-circle"></span>
  698. <span class="th th-circle"></span>
  699. <span class="th th-circle"></span>
  700. <span class="th th-circle"></span>
  701. <span class="th th-circle-o"></span>
  702. <span class="th th-circle-o"></span>
  703. <span class="th th-circle-o"></span>
  704. <span class="th th-circle-o"></span>
  705. <span class="th th-circle-o"></span>
  706.  
  707. </div>
  708.  
  709. <div class="points1">Vigor</div>
  710. <div class="points2">
  711.  
  712. <span class="th th-circle"></span>
  713. <span class="th th-circle"></span>
  714. <span class="th th-circle"></span>
  715. <span class="th th-circle"></span>
  716. <span class="th th-circle"></span>
  717. <span class="th th-circle"></span>
  718. <span class="th th-circle-o"></span>
  719. <span class="th th-circle-o"></span>
  720. <span class="th th-circle-o"></span>
  721. <span class="th th-circle-o"></span>
  722.  
  723. </div>
  724.  
  725. <div class="points1">Inteligência</div>
  726. <div class="points2">
  727.  
  728. <span class="th th-circle"></span>
  729. <span class="th th-circle"></span>
  730. <span class="th th-circle"></span>
  731. <span class="th th-circle"></span>
  732. <span class="th th-circle"></span>
  733. <span class="th th-circle-o"></span>
  734. <span class="th th-circle-o"></span>
  735. <span class="th th-circle-o"></span>
  736. <span class="th th-circle-o"></span>
  737. <span class="th th-circle-o"></span>
  738.  
  739. </div>
  740.  
  741. <div class="points1">Percepção</div>
  742. <div class="points2">
  743.  
  744. <span class="th th-circle"></span>
  745. <span class="th th-circle"></span>
  746. <span class="th th-circle"></span>
  747. <span class="th th-circle"></span>
  748. <span class="th th-circle"></span>
  749. <span class="th th-circle"></span>
  750. <span class="th th-circle-o"></span>
  751. <span class="th th-circle-o"></span>
  752. <span class="th th-circle-o"></span>
  753. <span class="th th-circle-o"></span>
  754.  
  755. </div>
  756.  
  757. <div class="points1">Concentração</div>
  758. <div class="points2">
  759.  
  760. <span class="th th-circle"></span>
  761. <span class="th th-circle"></span>
  762. <span class="th th-circle"></span>
  763. <span class="th th-circle"></span>
  764. <span class="th th-circle"></span>
  765. <span class="th th-circle-o"></span>
  766. <span class="th th-circle-o"></span>
  767. <span class="th th-circle-o"></span>
  768. <span class="th th-circle-o"></span>
  769. <span class="th th-circle-o"></span>
  770.  
  771. </div>
  772.  
  773. <div class="points1">Carisma</div>
  774. <div class="points2">
  775.  
  776. <span class="th th-circle"></span>
  777. <span class="th th-circle"></span>
  778. <span class="th th-circle"></span>
  779. <span class="th th-circle"></span>
  780. <span class="th th-circle"></span>
  781. <span class="th th-circle"></span>
  782. <span class="th th-circle-o"></span>
  783. <span class="th th-circle-o"></span>
  784. <span class="th th-circle-o"></span>
  785. <span class="th th-circle-o"></span>
  786.  
  787. </div>
  788.  
  789. <div class="points1">Auto-Confiança</div>
  790. <div class="points2">
  791.  
  792. <span class="th th-circle"></span>
  793. <span class="th th-circle"></span>
  794. <span class="th th-circle"></span>
  795. <span class="th th-circle"></span>
  796. <span class="th th-circle"></span>
  797. <span class="th th-circle"></span>
  798. <span class="th th-circle"></span>
  799. <span class="th th-circle"></span>
  800. <span class="th th-circle-o"></span>
  801. <span class="th th-circle-o"></span>
  802.  
  803. </div>
  804.  
  805. </div>
  806.  
  807. </div>
  808.  
  809. <div id="content2">
  810.  
  811. <div class="cheadc">
  812. <h1>likes</h1>
  813. <ul>
  814. <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque malesuada</li>
  815. <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque malesuada</li>
  816. <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque malesuada</li>
  817. <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque malesuada</li>
  818. <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque malesuada</li>
  819. <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque malesuada</li>
  820. </ul>
  821. </div>
  822. <div class="cheadc">
  823. <h1>dislikes</h1>
  824. <ul>
  825. <li>Coffee</li>
  826. <li>Tea</li>
  827. <li>Milk</li>
  828. <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque malesuada</li>
  829. <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque malesuada</li>
  830. <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque malesuada</li>
  831. </ul>
  832. </div>
  833. <div class="cheadc">
  834. <h1>persona</h1>
  835. <ul>
  836. <li>Coffee</li>
  837. <li>Tea</li>
  838. <li>Milk</li>
  839. <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque malesuada</li>
  840. <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque malesuada</li>
  841. <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque malesuada</li>
  842. </ul>
  843. </div>
  844.  
  845. </div>
  846.  
  847. <div id="content3">
  848.  
  849. <div class="cbio">
  850.  
  851. <h1>biography</h1>
  852.  
  853. <ul>
  854.  
  855. <li>Nasceu três dias após a noite de Natal e a família Cunninghan não poderia ter ficado mais feliz em receber Imanuel no mundo. Seus olhos puxados encantavam todos ao seu redor e o sorriso banguela sempre presente em seu rosto só contagiava ainda mais a família.</li>
  856.  
  857. <li>Em um todo, Imanuel tivera uma infância normal na cidade de Aberdeen. Sempre foi uma criança alegre e cheio de piadas, arrancando dos vizinhos e amigos da escola altas risadas, sempre deixando o seu humor predominar qualquer tipo de sentimento negativo que o mesmo estivesse a sentir. Seu alto astral era pegadiço e os mais velhos sempre brincavam com o mesmo o perguntando se não estava abusando muito do açúcar, pois o jovem Manu parecia que estava sempre ligado em 220V.</li>
  858.  
  859. <li>Christoffer é o seu amigo mais antigo e, também foi, o seu primeiro amigo da vida. Acostumados a fazerem tudo juntos desde muito novos por morarem um ao lado do outro, Manu acabou por desenvolver uma ligação de irmandade com o garoto da casa ao lado e são inseparáveis desde então.</li>
  860.  
  861. <li>Quando criança gostava muito de explorar os lugares de Aberdeen com a sua bicicleta e o seu fiel companheiro e melhor amigo, tendo se acidentado um dia em uma das florestas da cidade e batido o queixo no galho de uma árvore caída, tendo que levar alguns pontos nos lugares. Até os dias atuais ainda dá para notar a pequena cicatriz que o garoto ganhou nesse dia.</li>
  862.  
  863. <li>Quando os pais de Christoffer sofreram o trágico acidente que acabou por tirar suas vidas, Imanuel não saiu do lado do amigo nem por um segundo e, quando a notícia de que o melhor amigo talvez precisasse se mudar para morar com algum tio, Manu não pensou duas vezes antes de correr até os pais e implorar para que Chris morasse com eles e os pais, ainda chocados com tudo o que aconteceu, acabaram por ceder adotando o garoto que agora virava seu irmão.</li>
  864.  
  865. <li>Por mais incrível que possa parecer, os dois jamais brigaram feio e isso é quase um milagre levando em consideração a convivência e os mal momentos.</li>
  866.  
  867. <li>Imanuel era um aluno exemplar em relação à notas, no entanto, um verdadeiro furacão quando o assunto era pregar peças na escola, sendo levado à detenção diversas vezes.</li>
  868.  
  869. <li>Ele e Chris costumavam usar o porão da casa para receber os amigos e fumar maconha, uma vez sendo pegos pelos pais no ato e os dois tendo de ficar de castigo por uma semana inteira, no entanto, o consumo não parou por aí e com o passar do tempo os pais apenas aceitaram e se acostumaram com aquilo ao ver que os dois garotos não acabariam fazendo nenhuma idiotice.</li>
  870.  
  871. <li>Se mudou para Glasgow, juntamente do irmão adotivo, um ano após terminarem o ensino médio pois os pais acreditavam que ambos deveriam ter mais responsabilidade e morar sozinhos poderia ajudar com isso. Dessa forma, trabalharam por algum tempo em empregos de meio periodo enquanto estudavam administração na universidade de Glasgow.</li>
  872.  
  873. </ul>
  874.  
  875. </div>
  876. <div class="crelations">
  877.  
  878. <h1>relationships</h1>
  879.  
  880. <div class="musebar">
  881.  
  882. <div class="grid">
  883.  
  884. <ul class="tab">
  885. <!-- ITEM BEGIN HERE--->
  886.  
  887. <li>
  888. <div class="tablinks" onclick="openCity(event, 'ONE')">
  889. <div class="element-item" style="background-image: url(https://i.imgur.com/bP2kOsr.png)">
  890.  
  891. </div>
  892. </a>
  893. </li>
  894.  
  895.  
  896. <!-- ITEM BEGIN HERE--->
  897.  
  898. <li>
  899. <div class="tablinks" onclick="openCity(event, 'TWO')">
  900. <div class="element-item" style="background-image: url(https://i.imgur.com/ORbOT5E.png)">
  901.  
  902.  
  903.  
  904. </div>
  905. </a>
  906. </li>
  907.  
  908. <!-- ITEM BEGIN HERE--->
  909.  
  910. <li>
  911. <div class="tablinks" onclick="openCity(event, 'THREE')">
  912. <div class="element-item" style="background-image: url(https://i.imgur.com/hRGaiXN.png)">
  913.  
  914.  
  915.  
  916. </div>
  917. </a>
  918. </li>
  919.  
  920. <!-- ITEM BEGIN HERE--->
  921.  
  922. <li>
  923. <div class="tablinks" onclick="openCity(event, 'FOUR')">
  924. <div class="element-item" style="background-image: url(https://i.imgur.com/H4wfc6r.png)">
  925.  
  926.  
  927.  
  928. </div>
  929. </a>
  930. </li>
  931.  
  932. <!-- ITEM BEGIN HERE--->
  933.  
  934. <li>
  935. <div class="tablinks" onclick="openCity(event, 'FIVE')">
  936. <div class="element-item" style="background-image: url(https://i.imgur.com/ZdcoGo2.png)">
  937.  
  938.  
  939.  
  940. </div>
  941. </a>
  942. </li>
  943.  
  944.  
  945.  
  946. </div>
  947.  
  948. </div>
  949.  
  950. </ul>
  951.  
  952. <!--- CHAR CONTAINER --->
  953. <div class="charcontainer">
  954.  
  955. <!---- CHAR INFO ---->
  956. <div id="ONE" class="tabcontent">
  957.  
  958. <div class="chardesc">
  959. <div class="char1"><span class="sf sf-anchor-o"></span> <b>Christoffer Pollock</b></div>
  960. <div class="char2">adoptive brother/best friend <span class="sf sf-chevron-right"></span> joe fahy <span class="sf sf-chevron-right"></span> 22 <span class="sf sf-chevron-right"></span> nat</div>
  961.  
  962. <div class="char3">A frase "amigos por acaso, irmãos por opção" nunca fizera tanto sentido. Amigos desde sempre e inseparáveis desde o primeiro momento, a amizade dos dois é algo a ser exposto em um museu por ser tão raro duas pessoas se entenderem de tal forma e não dividirem o mesmo sangue, era como se o destino já tivesse reservado essas duas pessoas para passarem o resto de suas vidas juntos, sendo assim como melhores amigos à princípio e como irmãos para a eternidade.</div>
  963.  
  964. <div class="char4"><ul>
  965. <li>ideias topes para rp pleasuuuuuu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec neque enim. Mauris lorem dui, ullamcorper in euismod sed, dignissim a magna. Suspendisse commodo elementum magna sed mollis. Donec eget dui nec eros tristique pharetra at vel felis.</li>
  966. <li>ideias topes para rp pleasuuuuuu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec neque enim. Mauris lorem dui, ullamcorper in euismod sed, dignissim a magna. Suspendisse commodo elementum magna sed mollis. Donec eget dui nec eros tristique pharetra at vel felis.</li>
  967. <li>ideias topes para rp pleasuuuuuu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec neque enim. Mauris lorem dui, ullamcorper in euismod sed, dignissim a magna. Suspendisse commodo elementum magna sed mollis. Donec eget dui nec eros tristique pharetra at vel felis.</li>
  968. </ul></div>
  969.  
  970. <div class="char5">
  971. [comm] <a href="http://skinny-love.net/index.php?showtopic=53012">watafak r u doing, bro?</a><br>
  972. [rp] <a href="http://skinny-love.net/index.php?showtopic=55143">bro... we are fucked up</a><br>
  973.  
  974. </div>
  975.  
  976. </div>
  977.  
  978. </div>
  979.  
  980. </div>
  981.  
  982.  
  983. <!--- CHAR CONTAINER --->
  984. <div class="charcontainer">
  985.  
  986. <!---- CHAR INFO ---->
  987. <div id="TWO" class="tabcontent">
  988.  
  989. <div class="chardesc">
  990. <div class="char1"><span class="th th-heart-1-o"></span> <b>Jayde Kölsch</b></div>
  991. <div class="char2">soulmate<span class="sf sf-chevron-right"></span> billie eilish <span class="sf sf-chevron-right"></span> 20 <span class="sf sf-chevron-right"></span> nat</div>
  992.  
  993. <div class="char3">Aos olhos dele a garota se tornava uma deusa, o ser mais maravilhoso e brilhante que poderia existir na Terra, e o jovem caiu no encantamento da garota antes mesmo de conhecê-la enquanto a observava de longe no local em que trabalhava. E nesse caso, o amor não fora um sentimento difícil de ser cultivado por ambos, tornando os mesmos como um só, como se tivessem nascido um para o outro e ninguém conseguia explicar a forma como ambos combinam tanto, nem mesmo os próprios. E estar apaixonado por ela é como um cego enxergar pela primeira vez: cativante e prazeroso, sendo assim incapaz de deixar tal sentimento de lado depois que prova de sua fonte.</div>
  994.  
  995. <div class="char4"><ul>
  996. <li>ideias topes para rp pleasuuuuuu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec neque enim. Mauris lorem dui, ullamcorper in euismod sed, dignissim a magna. Suspendisse commodo elementum magna sed mollis. Donec eget dui nec eros tristique pharetra at vel felis.</li>
  997. <li>ideias topes para rp pleasuuuuuu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec neque enim. Mauris lorem dui, ullamcorper in euismod sed, dignissim a magna. Suspendisse commodo elementum magna sed mollis. Donec eget dui nec eros tristique pharetra at vel felis.</li>
  998. <li>ideias topes para rp pleasuuuuuu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec neque enim. Mauris lorem dui, ullamcorper in euismod sed, dignissim a magna. Suspendisse commodo elementum magna sed mollis. Donec eget dui nec eros tristique pharetra at vel felis.</li>
  999. </ul></div>
  1000.  
  1001. <div class="char5">
  1002. [rp] <a href="http://skinny-love.net/index.php?showtopic=53229">you go through my mind all day</a><br>
  1003. [comm] <a href="http://skinny-love.net/index.php?showtopic=53815">don't ever leave my sight again</a><br>
  1004. [rp] <a href="http://skinny-love.net/index.php?showtopic=54003">you feel right so stay a sec</a><br>
  1005.  
  1006. </div>
  1007.  
  1008. </div>
  1009.  
  1010. </div>
  1011.  
  1012. </div>
  1013.  
  1014.  
  1015. <!--- CHAR CONTAINER --->
  1016. <div class="charcontainer">
  1017.  
  1018. <!---- CHAR INFO ---->
  1019. <div id="THREE" class="tabcontent">
  1020.  
  1021. <div class="chardesc">
  1022. <div class="char1"><span class="sf sf-crown-o"></span> <b>Brona Spitzner</b></div>
  1023. <div class="char2">best friend<span class="sf sf-chevron-right"></span> lilli pitz <span class="sf sf-chevron-right"></span> 20 <span class="sf sf-chevron-right"></span> bex</div>
  1024.  
  1025. <div class="char3">Uma amizade que foi florescendo com o passar dos dias e da convivência um com o outro. Acabaram por se tornarem entre eles alguém com quem os mesmos poderiam contar em relação a qualquer problema. Se transformaram em alguém que estava ali sempre pronto para lhe estender a mão quando precisassem ou para lhe animar quando estivessem se sentindo triste, independente do problema no qual havia se metido ou o que está a lhe perturbar.</div>
  1026.  
  1027.  
  1028. </div>
  1029.  
  1030. </div>
  1031.  
  1032. </div>
  1033.  
  1034. <!--- CHAR CONTAINER --->
  1035. <div class="charcontainer">
  1036.  
  1037. <!---- CHAR INFO ---->
  1038. <div id="FOUR" class="tabcontent">
  1039.  
  1040. <div class="chardesc">
  1041. <div class="char1"><span class="th th-flower-1-o"></span> <b>Adora Menhält</b></div>
  1042. <div class="char2">friend<span class="sf sf-chevron-right"></span> joanna kuchta <span class="sf sf-chevron-right"></span> 21 <span class="sf sf-chevron-right"></span> bex</div>
  1043.  
  1044. <div class="char3">Apesar de serem conviverem por bastante tempo desde que se mudara, não é uma amiga tão próxima quanto podem imaginar. Possuem um relacionamento divertido e descontraído, sempre tirando brincadeiras um com o outro ou tendo conversas estranhas e diferentes.</div>
  1045.  
  1046.  
  1047. </div>
  1048.  
  1049. </div>
  1050.  
  1051. </div>
  1052.  
  1053. <!--- CHAR CONTAINER --->
  1054. <div class="charcontainer">
  1055.  
  1056. <!---- CHAR INFO ---->
  1057. <div id="FIVE" class="tabcontent">
  1058.  
  1059. <div class="chardesc">
  1060. <div class="char1"><span class="th th-flower-1-o"></span> <b>Hannah Schmütz</b></div>
  1061. <div class="char2">friend<span class="sf sf-chevron-right"></span> elizabeth jane bishop <span class="sf sf-chevron-right"></span> 21 <span class="sf sf-chevron-right"></span> nat</div>
  1062.  
  1063. <div class="char3">Conhecera a garota devido ao seu contato com Adora e possuem um relacionamento de consideração, não tendo conversado muitas vezes mesmo sendo alguém que por acaso pertence ao seu círculo de amizade.</div>
  1064.  
  1065. <div class="char4"><ul>
  1066. <li>ideias topes para rp pleasuuuuuu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec neque enim. Mauris lorem dui, ullamcorper in euismod sed, dignissim a magna. Suspendisse commodo elementum magna sed mollis. Donec eget dui nec eros tristique pharetra at vel felis.</li>
  1067. <li>ideias topes para rp pleasuuuuuu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec neque enim. Mauris lorem dui, ullamcorper in euismod sed, dignissim a magna. Suspendisse commodo elementum magna sed mollis. Donec eget dui nec eros tristique pharetra at vel felis.</li>
  1068. <li>ideias topes para rp pleasuuuuuu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec neque enim. Mauris lorem dui, ullamcorper in euismod sed, dignissim a magna. Suspendisse commodo elementum magna sed mollis. Donec eget dui nec eros tristique pharetra at vel felis.</li>
  1069. </ul></div>
  1070.  
  1071. <div class="char5">
  1072. [rp/comm] <a href="linkaqui">titulo da rp aqui</a><br>
  1073. [rp/comm] <a href="linkaqui">titulo da rp aqui</a><br>
  1074. [rp/comm] <a href="linkaqui">titulo da rp aqui</a><br>
  1075. [rp/comm] <a href="linkaqui">titulo da rp aqui</a><br>
  1076. </div>
  1077.  
  1078. </div>
  1079.  
  1080. </div>
  1081.  
  1082. </div>
  1083.  
  1084. </div>
  1085.  
  1086. </body>
  1087.  
  1088. </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!