API tools faq
paste
Advertisement
aprilcodes

stars around my scars | pt

aprilcodes
May 27th, 2022
457
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 10.40 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2.  
  3.  
  4. <html>
  5. <style>
  6.  
  7. .bg {
  8. width:700px;
  9. height:600px;
  10. font-family:'times' san serif;
  11. font-size:12px;
  12. text-align:left;
  13. }
  14.  
  15. .header {
  16. width:700px;
  17. height:100px;
  18. background:#7e856a;
  19. }
  20.  
  21. .panel {
  22. float:right;
  23. width:200px;
  24. height:500px;
  25. background:#7e856a;
  26. }
  27.  
  28. .body {
  29. float:left;
  30. width:500px;
  31. height:500px;
  32. background-image:url(https://img.rawpixel.com/s3fs-private/rawpixel_images/website_content/rm233-eye-03.jpg?w=800&dpr=1&fit=default&crop=default&q=65&vib=3&con=3&usm=15&bg=F4F4F3&ixlib=js-2.2.1&s=ca061c8301c70fa4e2234857a0797643);
  33. }
  34.  
  35. .box {
  36. width:400px;
  37. height:400px;
  38. background:#A9BA9D;
  39. border:solid 2px #fff;
  40. text-align:left;
  41. }
  42.  
  43. .row:after {
  44. content: "";
  45. display: table;
  46. clear: both;
  47. }
  48.  
  49. .stats1 {
  50. float: left;
  51. width:50%;
  52. }
  53.  
  54. .stats2{
  55. float:right;
  56. width:50%;
  57. }
  58.  
  59. .trait{
  60. background:#F5D7DA;
  61. padding:3px;
  62. font-size:13px;
  63. text-align:center;
  64. text-transform:lowercase;
  65. color:#000;
  66. }
  67.  
  68.  
  69. </style>
  70.  
  71. <body>
  72.  
  73. <center>
  74. <div class="bg">
  75.  
  76. <div class="header">
  77.  
  78. <div style="margin-left:85px">
  79. <img src="https://cdn-icons-png.flaticon.com/512/7096/7096435.png"style="width:50px;height:50px;margin-top:35px;margin-left:;transform:rotate(345deg);">
  80. </div>
  81.  
  82. <div style="margin-top:-60px">
  83. <img src="https://fontmeme.com/permalink/220527/4c31b9e7c810a7f1f05e05586977dcad.png"style="width:300px;margin-left:150px">
  84. </div>
  85.  
  86. <div style="margin-left:460px;margin-top:-60px">
  87. <img src="https://cdn-icons-png.flaticon.com/512/774/774832.png"style="width:30px;height:30px;transform:rotate(20deg);">
  88. </div>
  89.  
  90. </div>
  91.  
  92. <div class="panel">
  93.  
  94. <center>
  95. <img src="https://data.whicdn.com/images/352634714/original.jpg"style="width:120px;height:120px;object-fit:cover;margin-top:-75px;border:solid 5px #fff;border-bottom:solid 25px #fff;transform:rotate(5deg)">
  96. </center>
  97.  
  98. <br><br>
  99.  
  100. <center>
  101. <div style="border:solid 5px #F5D7DA;width:73px;height:73px;margin-left:-50px;border-radius:50%">
  102. <a href="#1" style="width:65px;height:65px;border-radius:50%;display:inline-block;background:#F5D7DA;center;background-size:cover;border:solid 4px #fff;text-decoration:none">
  103. <br>
  104. <b style="color:#fff;font-size:25px;">
  105. A
  106. </b>
  107.  
  108. </a>
  109. </div>
  110.  
  111. <div style="border:solid 5px #EC8993;width:73px;height:73px;margin-left:75px;margin-top:5px;border-radius:50%">
  112. <a href="#2" style="width:65px;height:65px;border-radius:50%;display:inline-block;background:#EC8993;center;background-size:cover;border:solid 4px #fff;text-decoration:none">
  113. <br>
  114. <b style="color:#fff;font-size:25px;">
  115. P
  116. </b>
  117.  
  118. </a>
  119. </div>
  120.  
  121. <div style="border:solid 5px #D1E8C1;width:73px;height:73px;margin-left:-50px;margin-top:5px;border-radius:50%">
  122. <a href="#3" style="width:65px;height:65px;border-radius:50%;display:inline-block;background:#D1E8C1;center;background-size:cover;border:solid 4px #fff;text-decoration:none">
  123. <br>
  124. <b style="color:#fff;font-size:25px;">
  125. R
  126. </b>
  127.  
  128. </a>
  129. </div>
  130.  
  131. <div style="border:solid 5px #889C79;width:73px;height:73px;margin-left:75px;margin-top:5px;border-radius:50%">
  132. <a href="#4" style="width:65px;height:65px;border-radius:50%;display:inline-block;background:#889C79;center;background-size:cover;border:solid 4px #fff;text-decoration:none">
  133. <br>
  134. <b style="color:#fff;font-size:25px;">
  135. G
  136. </b>
  137.  
  138. </a>
  139. </div>
  140.  
  141. </center>
  142.  
  143. </div>
  144.  
  145. <div class="body">
  146.  
  147. <center><div style="width:405px;border:solid 10px #A9BA9D;margin-top:45px">
  148. <div class="box">
  149.  
  150. <div style="height:400px;text-align:justify;overflow:hidden;">
  151.  
  152. <!-- PAGE ONE -->
  153. <a name="1">
  154. <div style="height:400px;padding:20px;font-size:12px;overflow:auto;scrollbar-width:0px">
  155.  
  156.  
  157. <div class="row">
  158. <div class="stats1">
  159. <b>name →</b> info <br>
  160. <b>nickname(s) →</b> info<br>
  161. <b>age (years old) →</b> info <br>
  162. <b>birthdate →</b> info<br>
  163. <b>birthplace →</b> info<br>
  164. <b>current residence →</b> info<br>
  165. <b>occupation →</b> info
  166.  
  167. </div>
  168.  
  169.  
  170. <div class="stats2">
  171. <b>orientation →</b> info <br>
  172. <b>relationship status →</b> info<br>
  173. <b>partner name →</b> info <br>
  174. <b>clan/house/whatevs →</b> info<br>
  175. <b>origin/bloodline →</b> info<br>
  176. <b>extra stat →</b> info<br>
  177. <b>extra stat →</b> info
  178.  
  179. </div></div><br><br>
  180.  
  181. <img src="https://64.media.tumblr.com/78530d63d87dac42e86ffe498456f7c7/1794e3f425a64a67-ac/s540x810/a441a6f697aab37450a791551e0e002c7add460d.jpg"style="width:75px;height:75px;object-fit:cover;border:solid 5px #fff;border-bottom:solid 25px #fff;transform:rotate(355deg);float:left">
  182.  
  183. <div style="margin-left:100px;font-size:12px">
  184. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam interdum justo in lacinia dignissim. Phasellus ornare porttitor convallis. Vestibulum porta id orci eu vehicula. Curabitur sed faucibus ligula. Etiam pharetra sed quam in imperdiet. Curabitur in augue quis tellus tempor eleifend ut eu ante. Sed porttitor sem nunc, eu viverra nunc molestie eget.
  185. </div>
  186.  
  187. <br><br>
  188.  
  189. <img src="https://i.pinimg.com/originals/ea/bd/b1/eabdb138e14d691a934314c8f042abe4.jpg"style="width:75px;height:75px;object-fit:cover;border:solid 5px #fff;border-bottom:solid 25px #fff;transform:rotate(5deg);float:right">
  190.  
  191. <div style="margin-right:100px;font-size:12px">
  192. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam interdum justo in lacinia dignissim. Phasellus ornare porttitor convallis. Vestibulum porta id orci eu vehicula. Curabitur sed faucibus ligula. Etiam pharetra sed quam in imperdiet. Curabitur in augue quis tellus tempor eleifend ut eu ante. Sed porttitor sem nunc, eu viverra nunc molestie eget.
  193. </div>
  194.  
  195. <br><br><br><br>
  196.  
  197. </div>
  198. </a>
  199.  
  200. <!-- PAGE TWO -->
  201. <a name="2">
  202. <div style="height:400px;padding:20px;font-size:12px;overflow:auto;scrollbar-width:0px">
  203.  
  204. <div style="background:#fff;width:350px;margin:7px 0;">
  205. <div class="trait" style="width:65%">
  206. trait → 65%
  207. </div>
  208. </div>
  209.  
  210. <div style="background:#fff;width:350px;margin:7px 0;">
  211. <div class="trait" style="width:92%">
  212. trait → 92%
  213. </div>
  214. </div>
  215.  
  216. <div style="background:#fff;width:350px;margin:7px 0;">
  217. <div class="trait" style="width:41%">
  218. trait → 41%
  219. </div>
  220. </div>
  221.  
  222. <div style="background:#fff;width:350px;margin:7px 0;">
  223. <div class="trait" style="width:78%">
  224. trait → 78%
  225. </div>
  226. </div>
  227.  
  228. <br><br>
  229.  
  230. 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>
  231.  
  232. 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.
  233.  
  234.  
  235. <br><br><br><br>
  236.  
  237. </div>
  238. </a>
  239.  
  240. <!-- PAGE THREE -->
  241. <a name="3">
  242. <div style="height:400px;padding:10px;font-size:12px;overflow:auto;scrollbar-width:0px">
  243.  
  244. <!-- BEGIN RELATION -->
  245. <center>
  246.  
  247. <div style="background-image:url(https://i.ibb.co/m484khn/12-C66-BBC-0138-47-B3-B012-C1-E933-F3160-D-300x200.png);width:300px;height:200px;text-align:left;">
  248.  
  249. <div style="padding:50px">
  250. <center>
  251.  
  252. <img src="https://fontmeme.com/permalink/220527/cea6660c847ca8f96eb7106f32de49e5.png"style="width:150px">
  253.  
  254. </center>
  255. <br>
  256.  
  257. <div style="height:60px;overflow:auto;scrollbar-width:0px">
  258.  
  259. you can scroll here! <br><br>
  260. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam interdum justo in lacinia dignissim. Phasellus ornare porttitor convallis. Vestibulum porta id orci eu vehicula.
  261. </div>
  262. </div>
  263. </div></center>
  264.  
  265.  
  266. <!-- BEGIN RELATION -->
  267. <center>
  268.  
  269. <div style="background-image:url(https://i.ibb.co/m484khn/12-C66-BBC-0138-47-B3-B012-C1-E933-F3160-D-300x200.png);width:300px;height:200px;text-align:left;">
  270.  
  271. <div style="padding:50px">
  272. <center>
  273.  
  274. <img src="https://fontmeme.com/permalink/220527/cea6660c847ca8f96eb7106f32de49e5.png"style="width:150px">
  275.  
  276. </center>
  277. <br>
  278.  
  279. <div style="height:60px;overflow:auto;scrollbar-width:0px">
  280.  
  281. you can scroll here! <br><br>
  282. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam interdum justo in lacinia dignissim. Phasellus ornare porttitor convallis. Vestibulum porta id orci eu vehicula.
  283. </div>
  284. </div>
  285.  
  286.  
  287. </div></center>
  288.  
  289. <br><br><br><br>
  290.  
  291. </div>
  292. </a>
  293.  
  294. <!-- PAGE FOUR -->
  295. <a name="4">
  296. <div style="height:400px;padding:20px;font-size:12px;overflow:auto;scrollbar-width:0px">
  297.  
  298. <center>
  299.  
  300. <img src="IMG"style="height:150px;width:150px">
  301. <img src="IMG"style="height:150px;width:150px">
  302. <br>
  303. <img src="IMG"style="height:150px;width:150px">
  304. <img src="IMG"style="height:150px;width:150px">
  305. <br>
  306.  
  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. </center>
  322.  
  323. <br><br><br><br>
  324.  
  325. </div>
  326. </a>
  327.  
  328. </div>
  329.  
  330. </div>
  331. </div>
  332. </center>
  333.  
  334. </div>
  335.  
  336. </div>
  337. </center>
  338.  
  339. </body>
  340. </html>
  341.  
  342. <center style="width:700px"><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!