API tools faq
paste
aprilcodes

that funny feeling | pt

aprilcodes
Mar 27th, 2022
338
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 12.72 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=Ramaraja&display=swap" rel="stylesheet">
  14.  
  15. <style>
  16.  
  17. .bg{
  18. width:750px;
  19. height:600px;
  20. background:#fff;
  21. font-family: 'Ramaraja', serif;
  22. border:solid 2px #1A374D;
  23. border-radius:5%;
  24. padding:50px;
  25. text-align:left;
  26. }
  27.  
  28. .buttons{
  29. width:60px;
  30. height:200px;
  31. background:#406882;
  32. margin-top:50px;
  33. text-align:center;
  34. border:solid 2px #406882;
  35. border-radius:25px 0px 0px 25px;
  36. }
  37.  
  38. .main{
  39. width:200px;
  40. height:350px;
  41. background:#1A374D;
  42. margin-top:-240px;
  43. border:solid 2px #1A374D;
  44. border-radius:25px;
  45. margin-left:63px
  46. }
  47.  
  48. .box{
  49. width:400px;
  50. height:400px;
  51. background:#eee;
  52. float:right;
  53. margin-top:-360px;
  54. border:solid 2px #1A374D;
  55. border-radius:25px;
  56. padding:20px;
  57. }
  58.  
  59. .header{
  60. width:400px;
  61. height:10px;
  62. background: #1A374D;
  63. color:#fff;
  64. margin-top:-20px;
  65. margin-left:-20px;
  66. border-radius:20px 20px 0px 0px;
  67. }
  68.  
  69. .row:after {
  70. content: "";
  71. display: table;
  72. clear: both;
  73. }
  74.  
  75. .stats1 {
  76. float: left;
  77. width:160px;
  78. }
  79.  
  80. .stats2{
  81. float:right;
  82. width:175px;
  83.  
  84. }
  85.  
  86. .trait{
  87. background:#406882;
  88. padding:3px;
  89. font-size:13px;
  90. text-align:center;
  91. text-transform:lowercase;
  92. color:#fff;
  93. }
  94.  
  95. .oog{
  96. width:250px;
  97. height:150px;
  98. background:#eee;
  99. float:left;
  100. margin-left:-330px;
  101. margin-top:-100px;
  102. border:solid 2px #1A374D;
  103. border-radius:25px;
  104. padding:20px;
  105. }
  106.  
  107. .banner{
  108. width:270px;
  109. height:10px;
  110. background: #1A374D;
  111. color:#fff;
  112. margin-top:-20px;
  113. margin-left:-20px;
  114. border-radius:20px 20px 0px 0px;
  115. }
  116.  
  117. .gallery{
  118. width:350px;
  119. height:75px;
  120. background:#eee;
  121. float:right;
  122. margin-right:-10px;
  123. margin-top:-25px;
  124. border-top:solid 2px #1A374D;
  125. border-bottom:solid 2px #1A374D;
  126. border-right: solid 15px #1A374D;
  127. border-left: solid 15px #1A374D;
  128. border-radius:25px;
  129. padding:20px;
  130. }
  131.  
  132. .scrollbar{
  133. overflow: auto;
  134. white-space: nowrap;
  135. }
  136.  
  137.  
  138. b,i{
  139. color: #1A374D
  140. }
  141.  
  142.  
  143.  
  144. </style>
  145.  
  146. <body>
  147.  
  148. <div class="bg">
  149.  
  150. <div class="buttons">
  151.  
  152.  
  153. <a href="#1" style="border-radius:50%;display:inline-block;padding:10px;margin-top:15px;margin-left:2px;">
  154.  
  155. <img src="https://cdn-icons-png.flaticon.com/512/1946/1946488.png"style="width:20px;height:20px">
  156.  
  157. </a>
  158.  
  159. <a href="#2" style="border-radius:50%;display:inline-block;padding:10px;margin-top:-5px;margin-left:2px;">
  160.  
  161. <img src="https://cdn-icons-png.flaticon.com/512/747/747376.png"style="width:20px;height:20px">
  162.  
  163. </a>
  164.  
  165. <a href="#3" style="border-radius:50%;display:inline-block;padding:10px;margin-top:-5px;margin-left:2px;">
  166.  
  167. <img src="https://cdn-icons-png.flaticon.com/512/3342/3342137.png"style="width:25px;height:25px">
  168.  
  169. </a>
  170.  
  171.  
  172. <a href="#4" style="border-radius:50%;display:inline-block;padding:10px;margin-top:-5px;margin-left:2px;">
  173.  
  174. <img src="https://cdn-icons-png.flaticon.com/512/64/64902.png"style="width:25px;height:25px"></a>
  175. </div>
  176.  
  177. <div class="main">
  178.  
  179. <center>
  180. <img src="https://i.pinimg.com/originals/79/44/21/79442124243dc7b083abdff2bbf49c01.jpg"style="width:100px;height:100px;border-radius:50%;padding:10px;border-left:2px solid #fff; border-right:2px solid #fff;border-bottom:0px solid #fff;border-top: solid 0px;margin-top:15px;">
  181.  
  182. <br>
  183.  
  184. <img src="https://fontmeme.com/permalink/220324/4808d974cc5b25976b2af104aa54fdfa.png"style="width:150px">
  185.  
  186. <br><br><center>
  187.  
  188. <div style="width:150px;height:95px;background-color:#B1D0E0;border-radius:0px 10px 10px 0px; border-left:10px solid #406882">
  189.  
  190. <div style="text-align:left;font-size:10px;line-height:12px;padding:10px">
  191. "the live-action lion king, the pepsi halftime show. twenty-thousand years of this, seven more to go. carpool karaoke, steve aoki, logan paul. a gift shop at the gun range, a mass shooting at the mall."
  192.  
  193. </div>
  194. </div>
  195. </center>
  196.  
  197. </div>
  198.  
  199. <div class="box">
  200.  
  201. <div class="header"style="padding:20px">
  202.  
  203. <div style="width:15px;height:15px;border-radius:50%;background:#eee;margin-top:-3px;display:inline-block"></div>
  204. <div style="width:15px;height:15px;border-radius:50%;background:#eee;margin-top:-3px;margin-left:2px;display:inline-block"></div>
  205. <div style="width:15px;height:15px;border-radius:50%;background:#eee;margin-top:-3px;margin-left:2px;display:inline-block"></div>
  206.  
  207. </div>
  208.  
  209.  
  210. <div style="height:375px;text-align:justify;overflow:hidden;">
  211.  
  212. <!-- PAGE ONE -->
  213. <a name="1">
  214. <div style="height:375px;padding:20px;font-size:12px;overflow:auto;scrollbar-width:0px">
  215.  
  216.  
  217. <div class="row">
  218. <div class="stats1">
  219. <b>name →</b> info <br>
  220. <b>nickname(s) →</b> info<br>
  221. <b>age (years old) →</b> info <br>
  222. <b>birthdate →</b> info<br>
  223. <b>birthplace →</b> info<br>
  224. <b>current residence →</b> info<br>
  225. <b>occupation →</b> info
  226.  
  227. </div>
  228.  
  229.  
  230. <div class="stats2">
  231. <b>orientation →</b> info <br>
  232. <b>relationship status →</b> info<br>
  233. <b>partner name →</b> info <br>
  234. <b>clan/house/whatevs →</b> info<br>
  235. <b>origin/bloodline →</b> info<br>
  236. <b>extra stat →</b> info<br>
  237. <b>extra stat →</b> info
  238.  
  239. </div></div><br>
  240.  
  241. <img src="https://i.pinimg.com/originals/88/cc/fb/88ccfbd18d328cb6debfac199bb96b4d.jpg"style="width:100px;height:100px;border-radius:50%;border-right:2px solid #1A374D; border-left:2px solid #1A374D; float:left;padding:5px;margin-top:15px">
  242.  
  243. <div style="float:right;width:230px">
  244.  
  245. <b><i>First impressions...</i></b><br>
  246.  
  247. 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.
  248.  
  249.  
  250.  
  251. <br><br></div>
  252.  
  253.  
  254. <img src="https://pbs.twimg.com/media/Et-MlR3WQAkhNNb.jpg"style="width:100px;height:100px;border-radius:50%;border-right:2px solid #1A374D; border-left:2px solid #1A374D; float:right;clear:both;padding:5px;margin-top:15px">
  255.  
  256.  
  257. <div style="float:left;width:230px;">
  258.  
  259. <b><i>Appearance + Style...</i></b><br>
  260.  
  261. 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.
  262.  
  263. </div>
  264.  
  265. <div style="clear:both;margin-top:330px">
  266. 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.
  267.  
  268. <br><br><br><br>
  269. </div>
  270.  
  271. </div></a>
  272.  
  273.  
  274. <!-- PAGE TWO -->
  275. <a name="2">
  276. <div style="height:375px;padding:20px;font-size:12px;overflow:auto;scrollbar-width:0px">
  277.  
  278. <div style="background:#fff;width:350px;margin:7px 0;">
  279. <div class="trait" style="width:65%">
  280. trait → 65%
  281. </div>
  282. </div>
  283.  
  284. <div style="background:#fff;width:350px;margin:7px 0;">
  285. <div class="trait" style="width:92%">
  286. trait → 92%
  287. </div>
  288. </div>
  289.  
  290. <div style="background:#fff;width:350px;margin:7px 0;">
  291. <div class="trait" style="width:41%">
  292. trait → 41%
  293. </div>
  294. </div>
  295.  
  296. <div style="background:#fff;width:350px;margin:7px 0;">
  297. <div class="trait" style="width:78%">
  298. trait → 78%
  299. </div>
  300. </div>
  301.  
  302. <br><br>
  303.  
  304. 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>
  305.  
  306. 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.
  307.  
  308.  
  309. <br><br><br>
  310.  
  311. </div></a>
  312.  
  313.  
  314. <!-- PAGE THREE -->
  315. <a name="3">
  316. <div style="height:500px;padding:20px;font-size:12px;overflow:auto;scrollbar-width:0px">
  317.  
  318.  
  319. <center>
  320.  
  321. <img src="IMG"style="height:150px;width:150px">
  322. <img src="IMG"style="height:150px;width:150px">
  323. <br>
  324. <img src="IMG"style="height:150px;width:150px">
  325. <img src="IMG"style="height:150px;width:150px">
  326. <br>
  327.  
  328. <img src="IMG"style="height:150px;width:150px">
  329. <img src="IMG"style="height:150px;width:150px">
  330. <br>
  331.  
  332. <img src="IMG"style="height:150px;width:150px">
  333. <img src="IMG"style="height:150px;width:150px">
  334. <br>
  335.  
  336. <img src="IMG"style="height:150px;width:150px">
  337. <img src="IMG"style="height:150px;width:150px">
  338. <br>
  339.  
  340. <img src="IMG"style="height:150px;width:150px">
  341. <img src="IMG"style="height:150px;width:150px">
  342. </center><br><br><br><br><br><br><br>
  343. </div></a>
  344.  
  345. <!-- PAGE FOUR -->
  346. <a name="4">
  347. <div style="height:375px;padding:20px;font-size:12px;overflow:auto;scrollbar-width:0px">
  348.  
  349. <!-- BEGIN RELATION -->
  350.  
  351. <div style="width:350px;height:200px;background-color:#B1D0E0;border-radius:0px 10px 10px 0px;border-left:10px solid #406882">
  352.  
  353. <img src="https://i.pinimg.com/736x/93/11/58/931158120572fba678fcae166e8a773e.jpg"style="width:100px;height:100px;border-radius:50%;border-right:2px solid #1A374D; border-left:2px solid #1A374D; float:right;padding:5px;margin-top:40px;margin-right:15px;clear:both">
  354.  
  355. <div style="text-align:left;font-size:10px;line-height:12px;padding:15px;width:200px">
  356.  
  357. <img src="https://fontmeme.com/permalink/220326/6ef21a781fdba64bfde43d228db5a5da.png"style="width:150px">
  358.  
  359. <br>
  360.  
  361. <b><i>relation type here</i></b>
  362.  
  363. <br><br>
  364. "stunning 8K-resolution meditation app. in honor of the revolution, it's half-off at the gap.
  365. deadpool, self-awareness, loving parents, harmless fun.
  366. the backlash to the backlash to the thing that's just begun.
  367. there it is again, that funny feeling.
  368. that funny feeling.
  369. there it is again, that funny feeling.
  370. that funny feeling."
  371.  
  372. </div>
  373.  
  374.  
  375. </div>
  376.  
  377. </div></a>
  378.  
  379. </div>
  380.  
  381. <br><br>
  382.  
  383. <div class="oog">
  384. <div class="banner"style="padding:10px">
  385.  
  386. <div style="width:10px;height:10px;border-radius:50%;background:#eee;display:inline-block;float:right"></div>
  387. <div style="width:10px;height:10px;border-radius:50%;background:#eee;margin-right:5px;display:inline-block;float:right"></div>
  388. <div style="width:10px;height:10px;border-radius:50%;background:#eee;margin-right:5px;display:inline-block;float:right"></div>
  389.  
  390. </div><br>
  391. <div style="font-size:12px;float:left;">
  392.  
  393. <b>name → </b> here <br>
  394. <b>age → </b> here <br>
  395. <b>discord → </b> here <br>
  396. <b>contact → </b> here <br>
  397. <b>faceclaim → </b> here <br>
  398.  
  399. </div>
  400.  
  401. <img src="https://i.redd.it/s530i25b7zp61.jpg"style="width:80px;height:80px;border-radius:50%;border-right:2px solid #1A374D; border-left:2px solid #1A374D; float:right;padding:5px">
  402.  
  403. </div>
  404.  
  405. <div class="gallery">
  406.  
  407. <div class="scrollbar">
  408.  
  409. <img src="IMG"style="height:80px;width:80px">
  410.  
  411. <img src="IMG"style="height:80px;width:80px;margin-left:5px">
  412.  
  413. <img src="IMG"style="height:80px;width:80px;margin-left:5px">
  414.  
  415. <img src="IMG"style="height:80px;width:80px;margin-left:5px">
  416.  
  417. <img src="IMG"style="height:80px;width:80px;margin-left:5px">
  418.  
  419. <img src="IMG"style="height:80px;width:80px;margin-left:5px">
  420.  
  421. </div>
  422.  
  423. </div>
  424.  
  425. </div>
  426.  
  427. </div></div>
  428. </body></html>
  429.  
  430. <center style="width:850px"><a href="https://aprilcodes.tumblr.com/" style="color:#000;font-size:12px;">april codes</a></center>
  431.  
Add Comment
Please, Sign In to add comment
Public Pastes
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!