API tools faq
paste
Advertisement
aprilcodes

our cave’s collapsing | profile text

aprilcodes
Mar 14th, 2022
562
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 12.83 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3. ♥ hi there, friendo! thanks for using my code! the stoof is fairly self explanatory and should be easy to edit (i'm not that smart so i don't want to make my codes rocket science AKIGHYSIDG). it is required to keep the credit otherwise you are stealing my code and i expect to be credited for my mediocre creation, thankyouverymuch. have fun and do something cool! ♥
  4.  
  5. -->
  6.  
  7.  
  8. <!DOCTYPE html>
  9.  
  10.  
  11. <html>
  12.  
  13. <link href="https://fonts.googleapis.com/css2?family=EB+Garamond&display=swap" rel="stylesheet">
  14. <link href="https://fonts.googleapis.com/css2?family=Hubballi&display=swap" rel="stylesheet">
  15.  
  16. <style>
  17.  
  18. .bg{
  19. width:900px;
  20. height:600px;
  21. background-color:#ededed;
  22. padding:25px;
  23. font-family: 'EB Garamond', serif;
  24. font-size:13px;
  25. }
  26.  
  27. .column1 {
  28. float: left;
  29. width:150px;
  30. }
  31.  
  32. .column2{
  33. float:left;
  34. width:400px;
  35. }
  36.  
  37. .column3{
  38. float:right;
  39. width:150px;
  40.  
  41. }
  42.  
  43.  
  44. .row:after {
  45. content: "";
  46. display: table;
  47. clear: both;
  48. }
  49.  
  50. .box1{
  51. background:#fff;
  52. padding:25px;
  53. float:left;
  54. }
  55.  
  56. .box2{
  57. background:#fff;
  58. padding:25px;
  59. float:left;
  60. margin-top:20px;
  61. }
  62.  
  63. .box3{
  64. background:#fff;
  65. overflow:auto;
  66. padding:25px;
  67. margin-left:75px;
  68. width:400px;
  69. height:530px;
  70. }
  71.  
  72. .box4{
  73. float:right;
  74. background:#fff;
  75. padding:25px;
  76. width:150px;
  77. height:315px;
  78. }
  79.  
  80. .header{
  81.  
  82. background-image: linear-gradient(to right, #CED6E0 , #C7BBBC);
  83. font-family: 'Hubballi', cursive;
  84. font-size:15px;
  85. color:#000;
  86. margin-top:-40px;
  87. margin-left:-25px;
  88.  
  89. }
  90.  
  91. .stats1 {
  92. float: left;
  93. width:200px;
  94. }
  95.  
  96. .stats2{
  97. float:right;
  98. width:150px;
  99.  
  100. }
  101.  
  102. .trait{
  103. background:#C7BBBC;
  104. padding:3px;
  105. font-size:13px;
  106. text-align:center;
  107. text-transform:lowercase;
  108. }
  109.  
  110. b,i{
  111. color: #C7BBBC
  112. }
  113.  
  114. </style>
  115.  
  116. <body>
  117.  
  118. <div class="bg">
  119.  
  120. <div class="row">
  121.  
  122. <div class="column1">
  123.  
  124. <div class="box1"style="float:left;width:150px;height:180px">
  125. <div class="header"style="width:200px;height:30px;">
  126. <p style="padding:5px">
  127. navigation
  128.  
  129. <img src="https://cdn-icons-png.flaticon.com/512/1828/1828945.png"style="width:20px;height:20px;float:right;margin-right:5px;">
  130. </p>
  131. </div><br>
  132.  
  133. <img src="https://cdn-icons-png.flaticon.com/512/1946/1946436.png"style="width:20px;height:20px;float:left;margin-top:7px">
  134. <a href="#1" style="border-radius:50%;display:inline-block;padding:10px;color:#000;text-decoration:none">homepage + stats</a><br>
  135.  
  136. <img src="https://cdn-icons-png.flaticon.com/512/2522/2522086.png"style="width:20px;height:20px;float:left;margin-top:7px">
  137. <a href="#2" style="border-radius:50%;display:inline-block;padding:10px;color:#000;text-decoration:none">persona + traits</a><br>
  138.  
  139. <img src="https://cdn-icons-png.flaticon.com/512/83/83574.png"style="width:20px;height:20px;float:left;margin-top:7px">
  140. <a href="#3" style="border-radius:50%;display:inline-block;padding:10px;color:#000;text-decoration:none">gallery + aesthetics</a><br>
  141.  
  142. <img src="https://cdn-icons-png.flaticon.com/512/1534/1534388.png"style="width:20px;height:20px;float:left;margin-top:7px">
  143. <a href="#4" style="border-radius:50%;display:inline-block;padding:10px;color:#000;text-decoration:none">relationships</a>
  144.  
  145. </div><br><br>
  146.  
  147. <div class="box2"style="width:150px;height:280px;overflow:auto;scrollbar-width:0px">
  148.  
  149. <div class="header"style="width:200px;height:30px;">
  150. <p style="padding:5px">
  151. playlist
  152.  
  153. <img src="https://cdn-icons-png.flaticon.com/512/1828/1828945.png"style="width:20px;height:20px;float:right;margin-right:5px;">
  154. </p>
  155. </div><br>
  156.  
  157. <!-- BEGIN SONG -->
  158. <div style="width:110px;padding:20px;border:1px solid #CED6E0;text-align:left">
  159.  
  160. <b><i>♫ Song Title</i></b>
  161. <img src="ALBUM COVER"style="width:20px;height:20px;float:right">
  162. </div>
  163. <br>
  164.  
  165. <!-- BEGIN SONG -->
  166. <div style="width:110px;padding:20px;border:1px solid #CED6E0;text-align:left">
  167.  
  168. <b><i>♫ Song Title</i></b>
  169. <img src="ALBUM COVER"style="width:20px;height:20px;float:right">
  170. </div>
  171. <br>
  172.  
  173. <!-- BEGIN SONG -->
  174. <div style="width:110px;padding:20px;border:1px solid #CED6E0;text-align:left">
  175.  
  176. <b><i>♫ Song Title</i></b>
  177. <img src="ALBUM COVER"style="width:20px;height:20px;float:right">
  178. </div>
  179. <br>
  180.  
  181. <!-- BEGIN SONG -->
  182. <div style="width:110px;padding:20px;border:1px solid #CED6E0;text-align:left">
  183.  
  184. <b><i>♫ Song Title</i></b>
  185. <img src="ALBUM COVER"style="width:20px;height:20px;float:right">
  186. </div>
  187. <br>
  188.  
  189. <!-- BEGIN SONG -->
  190. <div style="width:110px;padding:20px;border:1px solid #CED6E0;text-align:left">
  191.  
  192. <b><i>♫ Song Title</i></b>
  193. <img src="ALBUM COVER"style="width:20px;height:20px;float:right">
  194. </div>
  195. <br>
  196.  
  197. </div>
  198. </div>
  199.  
  200. <div class="column2">
  201.  
  202. <div class="box3">
  203.  
  204. <div class="header"style="width:450px;height:30px;">
  205. <p style="padding:5px">
  206. main box
  207.  
  208. <img src="https://cdn-icons-png.flaticon.com/512/1828/1828945.png"style="width:20px;height:20px;float:right;margin-right:5px;">
  209. </p>
  210. </div><br>
  211.  
  212. <div style="height:500px;text-align:justify;overflow:hidden;">
  213.  
  214. <!-- PAGE ONE -->
  215. <a name="1">
  216. <div style="height:500px;padding:20px;font-size:12px;overflow:auto;scrollbar-width:0px">
  217.  
  218. <div class="row">
  219. <div class="stats1">
  220. <b>name →</b> info <br>
  221. <b>nickname(s) →</b> info<br>
  222. <b>age (years old) →</b> info <br>
  223. <b>birthdate →</b> info<br>
  224. <b>birthplace →</b> info<br>
  225. <b>current residence →</b> info<br>
  226. <b>occupation →</b> info
  227.  
  228. </div>
  229.  
  230.  
  231. <div class="stats2">
  232. <b>orientation →</b> info <br>
  233. <b>relationship status →</b> info<br>
  234. <b>partner name →</b> info <br>
  235. <b>clan/house/whatevs →</b> info<br>
  236. <b>origin/bloodline →</b> info<br>
  237. <b>extra stat →</b> info<br>
  238. <b>extra stat →</b> info
  239.  
  240. </div></div><br><br>
  241.  
  242. <center><img src="https://64.media.tumblr.com/c0f447b8a6a0fd6db2de64d686f15778/eca6fdb3a9010036-f8/s540x810/90c8b1e40a702827208fa3efec1ced03525bca35.jpg"style="height:100px;width:100px;object-fit:cover;border:solid 2px #C7BBBC">
  243.  
  244. <img src="https://pbs.twimg.com/media/E4BOK1DVEAMM0yd.jpg"style="height:100px;width:100px;object-fit:cover;border:solid 2px #C7BBBC">
  245.  
  246. <img src="https://i.pinimg.com/736x/c6/f1/59/c6f159c6ebb474253ae5c6c0b1eed518.jpg"style="height:100px;width:100px;object-fit:cover;border:solid 2px #C7BBBC">
  247.  
  248.  
  249. </center><br><br>
  250.  
  251. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur viverra, magna nec molestie laoreet, nibh sem condimentum odio, non iaculis urna elit vitae urna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Praesent non arcu at dolor blandit aliquet. In scelerisque gravida pretium. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin lacinia velit lectus, sollicitudin consectetur ex vestibulum ut. Etiam congue, libero ut convallis fringilla, enim arcu congue lectus, quis dictum mi tortor eget nibh. Nullam non magna ac nunc tincidunt gravida nec id quam. Morbi non mauris vel risus scelerisque accumsan. Aliquam et augue quis nibh pellentesque consectetur et dictum quam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
  252.  
  253. <br><br><br>
  254.  
  255. </div>
  256. </a>
  257.  
  258. <!-- PAGE TWO -->
  259. <a name="2">
  260. <div style="height:500px;padding:20px;font-size:12px;overflow:auto;scrollbar-width:0px">
  261.  
  262. <div style="background:#eee;width:350px;margin:7px 0;">
  263. <div class="trait" style="width:65%">
  264. trait → 65%
  265. </div>
  266. </div>
  267.  
  268. <div style="background:#eee;width:350px;margin:7px 0;">
  269. <div class="trait" style="width:92%">
  270. trait → 92%
  271. </div>
  272. </div>
  273.  
  274. <div style="background:#eee;width:350px;margin:7px 0;">
  275. <div class="trait" style="width:41%">
  276. trait → 41%
  277. </div>
  278. </div>
  279.  
  280. <div style="background:#eee;width:350px;margin:7px 0;">
  281. <div class="trait" style="width:78%">
  282. trait → 78%
  283. </div>
  284. </div>
  285.  
  286. <br><br>
  287.  
  288. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur viverra, magna nec molestie laoreet, nibh sem condimentum odio, non iaculis urna elit vitae urna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Praesent non arcu at dolor blandit aliquet. In scelerisque gravida pretium. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin lacinia velit lectus, sollicitudin consectetur ex vestibulum ut. Etiam congue, libero ut convallis fringilla, enim arcu congue lectus, quis dictum mi tortor eget nibh. Nullam non magna ac nunc tincidunt gravida nec id quam. Morbi non mauris vel risus scelerisque accumsan. Aliquam et augue quis nibh pellentesque consectetur et dictum quam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. <br><br>
  289.  
  290. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur viverra, magna nec molestie laoreet, nibh sem condimentum odio, non iaculis urna elit vitae urna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Praesent non arcu at dolor blandit aliquet. In scelerisque gravida pretium. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin lacinia velit lectus, sollicitudin consectetur ex vestibulum ut. Etiam congue, libero ut convallis fringilla, enim arcu congue lectus, quis dictum mi tortor eget nibh. Nullam non magna ac nunc tincidunt gravida nec id quam. Morbi non mauris vel risus scelerisque accumsan. Aliquam et augue quis nibh pellentesque consectetur et dictum quam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
  291.  
  292.  
  293. <br><br><br>
  294.  
  295. </div></a>
  296.  
  297. <!-- PAGE THREE -->
  298. <a name="3">
  299. <div style="height:500px;padding:20px;font-size:12px;overflow:auto;scrollbar-width:0px">
  300.  
  301.  
  302. <center>
  303.  
  304. <img src="IMG"style="height:150px;width:150px">
  305. <img src="IMG"style="height:150px;width:150px">
  306. <br>
  307. <img src="IMG"style="height:150px;width:150px">
  308. <img src="IMG"style="height:150px;width:150px">
  309. <br>
  310.  
  311. <img src="IMG"style="height:150px;width:150px">
  312. <img src="IMG"style="height:150px;width:150px">
  313. <br>
  314.  
  315. <img src="IMG"style="height:150px;width:150px">
  316. <img src="IMG"style="height:150px;width:150px">
  317. <br>
  318.  
  319. <img src="IMG"style="height:150px;width:150px">
  320. <img src="IMG"style="height:150px;width:150px">
  321. <br>
  322.  
  323. <img src="IMG"style="height:150px;width:150px">
  324. <img src="IMG"style="height:150px;width:150px">
  325. <br><br><br></center>
  326.  
  327. </div></a>
  328.  
  329. <!-- PAGE FOUR -->
  330. <a name="4">
  331. <div style="height:500px;padding:20px;font-size:12px;overflow:auto;scrollbar-width:0px">
  332.  
  333. <!-- BEGIN RELATION -->
  334. <div style="width:300px;padding:20px;border:1px solid #CED6E0;text-align:left">
  335.  
  336. <img src="https://data.whicdn.com/images/348597138/original.jpg"style="width:100px;height:100px;object-fit:cover;float:right;border-radius:50%;margin-top:25px;">
  337.  
  338. <p style="width:190px;">
  339. <b style="font-size:16px">Cardan Greenbriar</b><br>
  340. <b><i>Relation Type</i></b>
  341. <br><br>
  342.  
  343. "i don't think i love you anymore. that gold mine changed you. you don't have to hold me anymore. our cave's collapsing. i don't wanna be me anymore."
  344. </p>
  345. </div><br>
  346.  
  347. <!-- BEGIN RELATION -->
  348. <div style="width:300px;padding:20px;border:1px solid #CED6E0;text-align:left">
  349.  
  350. <img src="https://64.media.tumblr.com/84da6736d5a815a545d66fbf9bf172db/tumblr_pmxx604yTC1to284to1_400.png"style="width:100px;height:100px;object-fit:cover;float:right;border-radius:50%;margin-top:25px;">
  351.  
  352. <p style="width:190px;">
  353. <b style="font-size:16px">Princess Nicasia</b><br>
  354. <b><i>Relation Type</i></b>
  355. <br><br>
  356.  
  357. "wasn't really dangerous for us. we just catch you coughing. what the hell are we gonna do? a black mile to the surface. i don't wanna be here anymore. it all tastes like poison."
  358. </p>
  359. </div><br>
  360.  
  361. </div></a>
  362.  
  363. </div></div></div>
  364.  
  365. <div class="column3">
  366.  
  367. <div class="box4">
  368.  
  369. <div class="header"style="width:200px;height:30px;">
  370. <p style="padding:5px">
  371. character box
  372.  
  373. <img src="https://cdn-icons-png.flaticon.com/512/1828/1828945.png"style="width:20px;height:20px;float:right;margin-right:5px;">
  374. </p>
  375. </div><br>
  376.  
  377. <center>
  378.  
  379. <img src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/de67722a-fcc9-48d3-b3a7-0a04e1e05a43/den60iz-2c75780c-be29-4130-9682-28f1175ee8e5.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcL2RlNjc3MjJhLWZjYzktNDhkMy1iM2E3LTBhMDRlMWUwNWE0M1wvZGVuNjBpei0yYzc1NzgwYy1iZTI5LTQxMzAtOTY4Mi0yOGYxMTc1ZWU4ZTUuanBnIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.Kxsc7aR0FX3QJLvf5CtaYHStl3BRiSByB55uWb77I3k"style="width:120px;height:120px;object-fit:cover;border:2px solid #C7BBBC">
  380.  
  381. <br><br>
  382.  
  383. <img src="https://fontmeme.com/permalink/220315/1a88f1de1762e3627948d5ccb69aaaa7.png"style="width:150px">
  384.  
  385. <br>
  386.  
  387. "i believed you were crazy. you believed you loved me. you and me, we're a daydream. so lose your faith in me. lose your faith in me."
  388.  
  389. </center>
  390.  
  391. </div></div>
  392.  
  393. </div>
  394.  
  395. </div>
  396.  
  397. </body></html>
  398. <center><a href="https://aprilcodes.tumblr.com/" style="color:#000;font-size:12px;">april codes</a></center>
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!