API tools faq
paste
Advertisement
aprilcodes

you just have to listen | pt

aprilcodes
Feb 12th, 2022
395
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 11.38 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3. ♥ hi there, friendo! thanks for using my code! the images are 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 teach some wonderful, wacky course! ♥
  4.  
  5. -->
  6.  
  7. <!DOCTYPE html>
  8.  
  9. <link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@200&display=swap" rel="stylesheet">
  10.  
  11. <html>
  12. <style>
  13.  
  14.  
  15. .body{
  16.  
  17. width:800px;
  18. height:655px;
  19. border:solid 5px #889C79;
  20. background:;
  21.  
  22. }
  23. .column1 {
  24. float: left;
  25. width:400px;
  26. height:655px;
  27. background:url(https://i.pinimg.com/736x/9c/18/17/9c1817ba76e7375f7c118c914527c710.jpg);
  28. object-fit:cover;
  29. border-right:solid 5px #889C79;
  30. }
  31.  
  32. .column2{
  33. float:right;
  34. width:395px;
  35. height:655px;
  36.  
  37. }
  38.  
  39. .row:after {
  40. content: "";
  41. display: table;
  42. clear: both;
  43. }
  44.  
  45. .border{
  46. background:url(https://i.ibb.co/fN2J2xc/d44f48b5-55c9-48fd-a4f8-d4ce39aadbcc.png);
  47. height:150px;
  48. width:150px;
  49. object-fit:cover;
  50. margin-top:-20px;
  51. margin-left:50px;
  52. float:left;
  53. position:relative;
  54. }
  55.  
  56.  
  57. b, i{
  58. color:#889C79;
  59. }
  60.  
  61. .trait{
  62. background:#F3CFC6;
  63. padding:3px;
  64. font-family: 'Source Code Pro', monospace;
  65. font-size:13px;
  66. text-align:center;
  67. text-transform:lowercase;
  68. }
  69.  
  70. .per1{
  71. width:35%;
  72. float:left;
  73. border:solid 2px #889C79;
  74. padding:15px;
  75. }
  76.  
  77. .per2{
  78. width:35%;
  79. float:right;
  80. border:solid 2px #889C79;
  81. padding:15px;
  82. margin-right:30px;
  83. }
  84.  
  85. </style>
  86. <body>
  87.  
  88. <div class="body">
  89. <div class="row">
  90.  
  91. <div class="column1">
  92. <center>
  93. <div style="background:#fff;width:300px;height:550px;margin-top:50px;border:solid 5px #889C79;">
  94.  
  95. <div style="font-size:12px;margin-top:50px;padding:20px">
  96.  
  97. <div class="border">
  98. <img src="https://64.media.tumblr.com/69d05f4575e4d8853b1764c304efc50d/b736052a94c7ac9e-a0/s540x810/bc051c0d2e61d564ee8a4374622821bf3e9da864.gifv"style="width:100px;height:100px;object-fit:cover;border-radius:50%;margin-top:22px">
  99. </div><br><br>
  100.  
  101. <img src="https://fontmeme.com/permalink/220212/a7e3472cb2d1f083dd7ea92a9cfee508.png"style="width:250px"><br><br>
  102.  
  103. "i don't know why all the trees change in the fall but i know you weren't scared of anything at all... now i known why all the trees change in the fall. i know you were on my side even if i was wrong."<br><br>
  104.  
  105. <a href="#1" style="width:200px;height:40px;border-radius:25px;display:block;background:#718355;center;background-size:cover;color:#fff;">
  106. <img src="https://fontmeme.com/permalink/220212/ba9ef617c88c6f8a1f6e8bd939d8ae03.png"style="width:60px;margin-top:10px">
  107. </a>
  108. <br>
  109.  
  110. <a href="#2" style="width:200px;height:40px;border-radius:25px;display:block;background:#87986A;center;background-size:cover;color:#fff">
  111. <img src="https://fontmeme.com/permalink/220212/742d368a97bdbf098140039bc6a26de0.png"style="width:100px;margin-top:10px">
  112. </a>
  113. <br>
  114.  
  115. <a href="#3" style="width:200px;height:40px;border-radius:25px;display:block;background:#97A97C;center;background-size:cover;color:#fff">
  116. <img src="https://fontmeme.com/permalink/220212/7ea63f850ee74329910a82174ecaefda.png"style="width:100px;margin-top:10px">
  117. </a>
  118. <br>
  119.  
  120. <a href="#4" style="width:200px;height:40px;border-radius:25px;display:block;background:#B5C99A;center;background-size:cover;color:#fff">
  121. <img src="https://fontmeme.com/permalink/220212/46f7b4878fd068cfef7d57521c5468d2.png"style="width:100px;margin-top:10px">
  122. </a>
  123.  
  124.  
  125. </div>
  126.  
  127. </div></div>
  128.  
  129.  
  130.  
  131. <div class="column2">
  132. <div style="width:395px;height:655px;text-align:justify;overflow:hidden;">
  133.  
  134. <!-- PAGE ONE -->
  135. <a name="1">
  136.  
  137. <div style="background:#fff;width:335px;height:655px;padding:50px;font-size:12px;overflow:auto;">
  138. <center><img src="https://fontmeme.com/permalink/220212/3772973f609e6fd1be9af353e7560ec2.png"style="width:140px;margin-left:160px"></center>
  139.  
  140. <br><br>
  141.  
  142.  
  143. <img src="https://64.media.tumblr.com/cb8c31a0541896af5ed210783240397c/2bd7d91ed04f8a4e-95/s500x750/ea5d52ee8681e1bf0fd977e47329f243da1fd72f.gif"style="float:right;width:120px;height:120px;border-radius:50%;border: solid 3px #889C79;margin-right:30px"><br>
  144.  
  145.  
  146. <b>name →</b> info <br>
  147. <b>nickname(s) →</b> info<br>
  148. <b>age (years old) →</b> info <br>
  149. <b>birthdate →</b> info<br>
  150. <b>birthplace →</b> info<br>
  151. <b>current residence →</b> info<br>
  152. <b>occupation →</b> info<br>
  153.  
  154. <br><br>
  155.  
  156. <img src="https://c.tenor.com/R9krRW9goSMAAAAd/eternals-gilgamesh.gif"style="float:left;width:120px;height:120px;border-radius:50%;border: solid 3px #889C79;"><br>
  157. <div style="margin-left:150px">
  158.  
  159. <b>orientation →</b> info <br>
  160. <b>relationship status →</b> info<br>
  161. <b>partner →</b> info <br>
  162. <b>clan/house/whatevs →</b> info<br>
  163. <b>origin/bloodline →</b> info<br>
  164. <b>extra stat →</b> info<br>
  165. <b>extra stat →</b> info<br>
  166. </div>
  167. <br><br>
  168.  
  169. <div style="width:265px;border:solid 2px #889C79;padding:15px">
  170. <center><b><i> appearance </i></b></center><br>
  171. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  172. </div><br>
  173.  
  174. <div style="width:265px;border:solid 2px #889C79;padding:15px">
  175. <center><b><i> first impression </i></b></center><br>
  176. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  177. </div>
  178.  
  179. <br><br><br><br>
  180.  
  181. </div></a>
  182.  
  183.  
  184.  
  185. <!-- PAGE TWO-->
  186. <a name="2">
  187. <div class="text">
  188. <div style="background:#fff;width:335px;height:655px;padding:50px;font-size:12px;overflow:auto;">
  189.  
  190. <center><img src="https://fontmeme.com/permalink/220212/0e0151ebc61b63813002d3ecb1431ab8.png"style="width:200px;margin-left:95px"></center>
  191. <br><br>
  192.  
  193.  
  194. <div style="background:#eee;width:300px;margin:7px 0;">
  195. <div class="trait" style="width:65%">
  196. trait → 65%
  197. </div>
  198. </div>
  199.  
  200. <div style="background:#eee;width:300px;margin:7px 0;">
  201. <div class="trait" style="width:92%">
  202. trait → 92%
  203. </div>
  204. </div>
  205.  
  206. <div style="background:#eee;width:300px;margin:7px 0;">
  207. <div class="trait" style="width:41%">
  208. trait → 41%
  209. </div>
  210. </div>
  211.  
  212. <div style="background:#eee;width:300px;margin:7px 0;">
  213. <div class="trait" style="width:78%">
  214. trait → 78%
  215. </div>
  216. </div><br><br>
  217.  
  218. <div class="row">
  219. <div class="per1">
  220.  
  221. <center><b><i>positive traits</i></b></center><br>
  222. ✓ positive trait<br>
  223. ✓ positive trait<br>
  224. ✓ positive trait<br>
  225. ✓ positive trait
  226. </div>
  227.  
  228. <div class="per2">
  229. <center><b><i>negative traits</i></b></center><br>
  230. ✕ negative trait<br>
  231. ✕ negative trait<br>
  232. ✕ negative trait<br>
  233. ✕ negative trait
  234. </div></div>
  235. <br><br>
  236.  
  237. <div style="width:271px;border:solid 2px #889C79;padding:15px">
  238. <center><b><i> personality info </i></b></center><br>
  239. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br><br>
  240. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  241. </div>
  242.  
  243. <br><br><br><br>
  244.  
  245. </div></div></a>
  246.  
  247. <!-- PAGE THREE -->
  248. <a name="3">
  249. <div class="text">
  250. <div style="background:#fff;width:395px;height:655px;padding:50px;font-size:12px;overflow:auto;">
  251. <center><img src="https://fontmeme.com/permalink/220212/2e5968bbf884568a818da3792422ba3b.png"style="width:180px;margin-left:80px"></center>
  252. <br><br>
  253.  
  254. <img src="IMG"style="height:150px;width:150px">
  255. <img src="IMG"style="height:150px;width:150px">
  256. <br>
  257. <img src="IMG"style="height:150px;width:150px">
  258. <img src="IMG"style="height:150px;width:150px">
  259. <br>
  260.  
  261. <img src="IMG"style="height:150px;width:150px">
  262. <img src="IMG"style="height:150px;width:150px">
  263. <br>
  264.  
  265. <img src="IMG"style="height:150px;width:150px">
  266. <img src="IMG"style="height:150px;width:150px">
  267. <br>
  268.  
  269. <img src="IMG"style="height:150px;width:150px">
  270. <img src="IMG"style="height:150px;width:150px">
  271. <br>
  272.  
  273. <img src="IMG"style="height:150px;width:150px">
  274. <img src="IMG"style="height:150px;width:150px">
  275. <br><br><br><br><br>
  276.  
  277.  
  278. </div></div></a>
  279.  
  280. <!-- PAGE FOUR -->
  281. <a name="4">
  282. <div class="text">
  283. <div style="background:#fff;width:395px;height:655px;padding:50px;font-size:12px;overflow:auto;">
  284. <center><img src="https://fontmeme.com/permalink/220213/d4c82abd50c114f0345b29764b733283.png"style="width:180px;margin-left:80px"></center>
  285. <br><br>
  286.  
  287.  
  288. <!-- START RELATION-->
  289. <div style="background:#eee;width:271px;height:100px;overflow:auto;padding:15px;border:2px solid #889C79">
  290.  
  291. <img src="https://64.media.tumblr.com/14a1e6fad8dd7e77bef18bea73a80b5e/cbab797f7863adf2-5f/s540x810/d28df41bdd660dc7f50635a273a7c3e354812739.gifv"style="width:80px;height:80px;border-radius:50%;border: 2px solid #889C79;float:left;object-fit:cover;">
  292.  
  293.  
  294. <div style="margin-left:100px">
  295. <b style="font-family: 'Source Code Pro', monospace;">Makkari & Druig
  296. <br><i>Relation</i></b>
  297. <br>
  298.  
  299. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
  300. </div>
  301. </div>
  302.  
  303. <br><br>
  304.  
  305. <!-- START RELATION-->
  306. <div style="background:#eee;width:271px;height:100px;overflow:auto;padding:15px;border:2px solid #889C79">
  307.  
  308. <img src="https://64.media.tumblr.com/3561e3a06e852dc5bb4dda6204f5d0f9/f6a9607192beff26-0f/s540x810/530d136f12e8051fe228b592b2eccd19baf61bd2.gifv"style="width:80px;height:80px;border-radius:50%;border: 2px solid #889C79;float:right;object-fit:cover;">
  309.  
  310.  
  311. <div style="margin-right:100px">
  312. <b style="font-family: 'Source Code Pro', monospace;">Sersi & Dane<br> <i>Relation</i></b>
  313. <br>
  314.  
  315. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
  316. </div>
  317. </div>
  318.  
  319. </div></div></a>
  320.  
  321. </div>
  322.  
  323. </div>
  324. </div></div>
  325.  
  326.  
  327.  
  328. </body>
  329.  
  330. </html><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!