API tools faq
paste
Advertisement
weishiji

#17 - ANGEL'S PEAK SHORT (ROUND)

weishiji
Apr 24th, 2023 (edited)
1,366
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 12.84 KB | None | 0 0
raw download clone embed print report
  1. <!---- QUICK NOTE BEFORE STARTING; ------
  2.  
  3.  
  4. Type ctrl+f to locate and replace the color of any of the item below.
  5.  
  6. - background color: #fffefe
  7. - main color: #d1b6ad
  8. - font color: #353535
  9.  
  10. - link color: #b7adac
  11. - dividers color: #e2ccc4
  12. - light background color: #f6e9e5
  13. - stars colors: #e9d3cb
  14.  
  15.  
  16. -------->
  17.  
  18. <!------------ START - background : Remove the image URL pattern if you want a solid color for the background.
  19. You can also change the background size from "pattern" to "cover" if you want to use a full image as background! ------------>
  20.  
  21. <div class="card border-0 p-4" style="border-radius: 2em;
  22. background: #f5e5e0 url(https://f2.toyhou.se/file/f2-toyhou-se/images/21853921_suhP81TgLmteMT4.png) center; background-size: pattern">
  23.  
  24. <!------------------------>
  25.  
  26. <div class="container mt-3 mb-3" style="max-width: 1100px; font-size: 13px; letter-spacing: 1px">
  27.  
  28.  
  29. <!------------ FIRST COLUMN - IMAGE ------------>
  30.  
  31.  
  32. <div class="row no-gutters"><div class="col-lg-4 p-1">
  33. <div class="card p-3" style="box-shadow: -20px 20px 0 #d1b6ad; background: #fffefe; border-radius: 2em">
  34.  
  35. <!------------ MAIN IMAGE ------------>
  36.  
  37. <div class="card border-0" style="height: 432px;
  38. background: url(IMG_URL) left; background-size: cover; border-radius: 2em">
  39.  
  40. <!------------ STAR DECO ------------>
  41.  
  42. <i class="fas fa-star fa-spin" style="animation-duration: 6s; font-size: 60px; color: #e9d3cb;
  43. position: absolute; left: -20px; top: -40px; text-shadow: -2px 0 #fff , 0 2px #fff , 2px 0 #fff , 0 -2px #fff"></i>
  44.  
  45. <!------------ NAME TITLE(S) ------------>
  46.  
  47. <p class="text-uppercase" style="color: #fff; font-family: georgia; font-size: 40px; font-weight: 800; letter-spacing: -4px;
  48. position: absolute; bottom: 15px; right: 20px;">
  49.  
  50. name here
  51.  
  52. </p>
  53.  
  54. <!------------ WRITE AGAIN THE SAME NAME SO IT CAN MIRROR ------------>
  55.  
  56. <p class="text-uppercase" style="color: #000; mix-blend-mode: screen; position: absolute; bottom: -1px; right: 20px; font-family: georgia; font-size: 40px; font-weight: 800; letter-spacing: -4px;
  57. text-shadow: -1px 0 #fff , 0 1px #fff , 1px 0 #fff , 0 -1px #fff">
  58.  
  59. name here
  60.  
  61. </p>
  62.  
  63. <!------------ FIRST COLUMN END ------------>
  64.  
  65. </div></div></div>
  66.  
  67.  
  68. <!------------ SECOND COLUMN - MAIN INFO ------------>
  69.  
  70.  
  71. <div class="col-lg-6 p-1">
  72. <div class="card p-2 text-justify" style="box-shadow: 0px 20px 0 #d1b6ad; background: #fffefe; border-radius: 2em">
  73.  
  74. <!------------ GUARDIAN DEX NUMBER ------------>
  75.  
  76. <p style="font-size: 30px; color: #353535; font-family: georgia; font-weight: 800">
  77.  
  78. <!------------------------>
  79.  
  80. <span style="color: #d1b6ad">
  81. <i class="fad fa-angel"></i> G</span>UARDIAN
  82.  
  83. <!------------ DEX NUMBER ------------>
  84.  
  85. <span style="color: #d1b6ad; font-family: book antiqua">
  86.  
  87. #0000
  88.  
  89. </span>
  90.  
  91. <!------------ BARCODE ------------>
  92.  
  93. <span class="pull-right" style="color: #353535">
  94. <i class="far fa-barcode"></i><i class="fal fa-barcode"></i><i class="fat fa-barcode"></i><i class="far fa-barcode"></i>
  95. </span>
  96.  
  97. <!------------ GUARDIAN TITLE END ------------>
  98.  
  99. </p>
  100. <hr class="mt-0 mb-2 w-100" style="border: 3px solid #e2ccc4; opacity: 0.6">
  101.  
  102. <!------------ CARD ------------>
  103.  
  104. <div class="card d-lg-flex d-block border-0 bg-transparent overflow-hidden" style="min-height: 100%; border-radius: 2em">
  105. <div class="pr-lg-2 mr-lg-n4" style="height: 390px; overflow-y:scroll;">
  106.  
  107. <!------------ MAIN CONTENT START ------------>
  108.  
  109. <div class="p-2" style="color: #353535">
  110.  
  111. <!------------ BASICS ------------>
  112.  
  113. <div class="row no-gutters">
  114. <div class="col-lg-6 p-1">
  115.  
  116. <!------------------------>
  117.  
  118. <div class="mb-2">
  119. <div class="text-uppercase" style="background: #f6e9e5; color: #d1b6ad; font-size: 16px; font-weight: bold; line-height: 10px; letter-spacing: 2px">Name</div>
  120. content
  121. </div>
  122.  
  123. <!------------------------>
  124.  
  125. <div class="mb-2">
  126. <div class="text-uppercase" style="background: #f6e9e5; color: #d1b6ad; font-size: 16px; font-weight: bold; line-height: 10px; letter-spacing: 2px">Age</div>
  127. content
  128. </div>
  129.  
  130. <!------------------------>
  131.  
  132. <div class="mb-2">
  133. <div class="text-uppercase" style="background: #f6e9e5; color: #d1b6ad; font-size: 16px; font-weight: bold; line-height: 10px; letter-spacing: 2px">Pronouns</div>
  134. con/tent
  135. </div>
  136.  
  137. <!------------------------>
  138.  
  139. <div class="mb-2">
  140. <div class="text-uppercase" style="background: #f6e9e5; color: #d1b6ad; font-size: 16px; font-weight: bold; line-height: 10px; letter-spacing: 2px">Species</div>
  141. <a href="https://toyhou.se/~world/113661.angemos-peak" style="color: #b7adac">Angemo</a>
  142. </div>
  143.  
  144. <!------------------------>
  145.  
  146. </div>
  147. <div class="col-lg-6 p-1">
  148.  
  149. <!------------------------>
  150.  
  151. <div class="mb-2">
  152. <div class="text-uppercase" style="background: #f6e9e5; color: #d1b6ad; font-size: 16px; font-weight: bold; line-height: 10px; letter-spacing: 2px">Subtype</div>
  153. content
  154. </div>
  155.  
  156. <!------------------------>
  157.  
  158. <div class="mb-2">
  159. <div class="text-uppercase" style="background: #f6e9e5; color: #d1b6ad; font-size: 16px; font-weight: bold; line-height: 10px; letter-spacing: 2px">Rarity</div>
  160. content
  161. </div>
  162.  
  163. <!------------------------>
  164.  
  165. <div class="mb-2">
  166. <div class="text-uppercase" style="background: #f6e9e5; color: #d1b6ad; font-size: 16px; font-weight: bold; line-height: 10px; letter-spacing: 2px">Masterlist</div>
  167. <a href="LINK_URL" style="color: #b7adac">CONTENT #0000</a>
  168. </div>
  169.  
  170. <!------------------------>
  171.  
  172. <div class="mb-2">
  173. <div class="text-uppercase" style="background: #f6e9e5; color: #d1b6ad; font-size: 16px; font-weight: bold; line-height: 10px; letter-spacing: 2px">Light (magic)</div>
  174. low / average / high
  175. </div>
  176.  
  177. <!------------------------>
  178.  
  179. </div></div>
  180.  
  181. <!------------ EXTRA BASICS ------------>
  182.  
  183. <a class="collapsed" data-toggle="collapse" href="#more" style="color: #fff">
  184. <div class="text-center" style="background: #d1b6ad; font-size: 14px; font-size: 19px; border-radius: 2em"><i class="fal fa-caret-down"></i></span>
  185. </div></a>
  186.  
  187. <!------------ START ------------>
  188.  
  189. <div class="collapse" id="more">
  190. <div class="row no-gutters mt-3"><div class="col-lg-6 p-1">
  191.  
  192. <!------------------------>
  193.  
  194. <div class="mb-2">
  195. <div class="text-uppercase" style="background: #f6e9e5; color: #d1b6ad; font-size: 16px; font-weight: bold; line-height: 10px; letter-spacing: 2px">Orientation</div>
  196. content
  197. </div>
  198.  
  199. <!------------------------>
  200.  
  201. <div class="mb-2">
  202. <div class="text-uppercase" style="background: #f6e9e5; color: #d1b6ad; font-size: 16px; font-weight: bold; line-height: 10px; letter-spacing: 2px">Role</div>
  203. content
  204. </div>
  205.  
  206. <!------------------------>
  207.  
  208. <div class="mb-2">
  209. <div class="text-uppercase" style="background: #f6e9e5; color: #d1b6ad; font-size: 16px; font-weight: bold; line-height: 10px; letter-spacing: 2px">Alignment</div>
  210. content
  211. </div>
  212.  
  213. <!------------------------>
  214.  
  215. </div>
  216. <div class="col-lg-6 p-1">
  217.  
  218. <!------------------------>
  219.  
  220. <div class="mb-2">
  221. <div class="text-uppercase" style="background: #f6e9e5; color: #d1b6ad; font-size: 16px; font-weight: bold; line-height: 10px; letter-spacing: 2px">MBTI</div>
  222. content
  223. </div>
  224.  
  225. <!------------------------>
  226.  
  227. <div class="mb-2">
  228. <div class="text-uppercase" style="background: #f6e9e5; color: #d1b6ad; font-size: 16px; font-weight: bold; line-height: 10px; letter-spacing: 2px">Alias</div>
  229. content
  230. </div>
  231.  
  232. <!------------------------>
  233.  
  234. <div class="mb-2">
  235. <div class="text-uppercase" style="background: #f6e9e5; color: #d1b6ad; font-size: 16px; font-weight: bold; line-height: 10px; letter-spacing: 2px">Voice/song</div>
  236. <a href="LINK_URL" style="color: #b7adac">content</a>
  237. </div>
  238.  
  239. <!------------------------>
  240.  
  241. </div></div></div>
  242.  
  243. <!------------ EXTRA BASICS END ------------>
  244.  
  245.  
  246. <!------------ QUOTE ------------>
  247.  
  248. <div class="row no-gutters">
  249. <div class="col-lg-9 p-1">
  250.  
  251. <!------------------------>
  252.  
  253. <div class="card border-0 text-center px-4 p-3 mt-2" style="height: 100px; background: #d1b6ad; color: #fff; border-radius: 10em"><p class="mt-2">
  254. <i class="far fa-quote-left" style="font-size: 50px; color: #fff; position: absolute; left: 20px; top: 20px; transform: rotate(-20deg); opacity: 0.2"></i>
  255.  
  256. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  257.  
  258. </p>
  259.  
  260. <!------------------------>
  261.  
  262. </div></div>
  263.  
  264. <!------------------------>
  265.  
  266. <div class="col-lg-3 p-1">
  267.  
  268. <!------------ MINI ICON ------------>
  269.  
  270. <div class="card p-2 rounded-circle" style="height: 110px; border: 8px solid #f6e9e5;
  271. background: #f6e9e5 url(IMG_URL) center; background-size: cover">
  272.  
  273. </div></div></div>
  274.  
  275. <!------------ QUOTE END ------------>
  276.  
  277. <hr class="mt-2 mb-3" style="border: 3px solid #e2ccc4; opacity: 0.6">
  278.  
  279. <!------------ CHARACTER DESC ------------>
  280.  
  281. <p class="p-1">
  282. <span class="px-3" style="color: #d1b6ad; font-weight: bold">
  283.  
  284. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span> Suspendisse sit amet massa blandit, fermentum enim a, scelerisque velit. Integer interdum urna ac dui sollicitudin sollicitudin. In feugiat posuere nulla, eget lobortis ante. Aliquam magna libero, dictum sit amet.<br><br>
  285.  
  286. Suspendisse sit amet massa blandit, fermentum enim a, scelerisque velit. Integer interdum urna ac dui sollicitudin sollicitudin. In feugiat posuere nulla, eget lobortis ante. Aliquam magna libero, dictum sit amet.
  287.  
  288. </p>
  289.  
  290. <!------------ CHARACTER DESC END ------------>
  291.  
  292. <hr class="mt-2 mb-3" style="border: 3px solid #e2ccc4; opacity: 0.6">
  293. <div class="row no-gutters"><div class="col-lg-6 p-1">
  294.  
  295. <!------------ LIKES AND DISLIKES ------------>
  296.  
  297. <div class="row no-gutters">
  298. <div class="col-lg-2 p-1 text-center" style="background: #d1b6ad; color: #fff; border-radius: 2em">
  299.  
  300. <!------------ LIKES ------------>
  301.  
  302. <i class="far fa-heart"></i></div>
  303. <div class="col-lg-10 p-1 px-2">
  304.  
  305. <div class="text-uppercase text-center mb-2" style="font-size: 20px; background: #f6e9e5; color: #d1b6ad; font-family: georgia; font-weight: bold; line-height: 10px">
  306. Likes
  307. </div>
  308.  
  309. <!------------------------>
  310.  
  311. <ul class="mb-0">
  312.  
  313. <li>content</li>
  314. <li>content</li>
  315. <li>content</li>
  316. <li>content</li>
  317. <li>content</li>
  318.  
  319. </ul>
  320.  
  321. <!------------ LIKES END ------------>
  322.  
  323. </div></div></div>
  324. <div class="col-lg-6 p-1">
  325.  
  326. <div class="row no-gutters">
  327. <div class="col-lg-2 p-1 text-center" style="background: #d1b6ad; color: #fff; border-radius: 2em">
  328.  
  329. <!------------ DISLIKES ------------>
  330.  
  331. <i class="far fa-xmark"></i></div>
  332. <div class="col-lg-10 p-1 px-2">
  333.  
  334. <div class="text-uppercase text-center mb-2" style="font-size: 20px; background: #f6e9e5; color: #d1b6ad; font-family: georgia; font-weight: bold; line-height: 10px">
  335. Dislikes
  336. </div>
  337.  
  338. <!------------------------>
  339.  
  340. <ul class="mb-0">
  341.  
  342. <li>content</li>
  343. <li>content</li>
  344. <li>content</li>
  345. <li>content</li>
  346. <li>content</li>
  347.  
  348. </ul>
  349.  
  350. <!------------ DISLIKES END ------------>
  351.  
  352. </div></div></div>
  353. </div></div></div>
  354. </div></div></div>
  355.  
  356. <!------------ SECOND COLUMN END ------------>
  357.  
  358.  
  359. <!------------ THIRD COLUMN - IMAGES ------------>
  360.  
  361.  
  362. <div class="col-lg-2 p-1">
  363.  
  364. <!------------ FIRST IMAGE ------------>
  365.  
  366. <div class="card border-0 mb-2" style="height: 150px; background: url(IMG_URL) center; background-size: cover; border-radius: 2em">
  367. </div>
  368.  
  369. <!------------ ICON ------------>
  370.  
  371. <div class="card border-0 mb-2" style="height: 150px; background: #d1b6ad; font-size: 40px; border-radius: 0.6em"><div class="container align-items-center justify-content-center" style="height: 150px">
  372. <i class="fal fa-clouds" style="color: #fff"></i>
  373. </div></div>
  374.  
  375. <!------------ SECOND IMAGE ------------>
  376.  
  377. <div class="card rounded-0 border-0 mb-2" style="height: 150px; background: url(IMG_URL) center; background-size: cover; border-radius: 2em;
  378. box-shadow: 0px 20px 0 #d1b6ad">
  379.  
  380. <!------------ STAR DECO ------------>
  381.  
  382. <i class="fas fa-star fa-spin" style="animation-duration: 2s; font-size: 50px; color: #e9d3cb;
  383. position: absolute; right: -20px; bottom: -10px; text-shadow: -2px 0 #fff , 0 2px #fff , 2px 0 #fff , 0 -2px #fff"></i>
  384.  
  385. <!------------ THIRD COLUMN END ------------>
  386.  
  387. </div></div>
  388. </div>
  389.  
  390. <!------------ CREDIT - DO NOT REMOVE PLS! FEEL FREE TO MOVE IT AS LONG AS IT'S STILL VISIBLE ^^ ------------>
  391.  
  392. <div class="text-right px-1 mt-2">
  393.  
  394. <a href="https://toyhou.se/burakkujakku" style="color: #d1b6ad; opacity: 0.5">
  395. <i class="far fa-fish-bones tooltipster mr-1" title="code by burakkujakku"></i></a>
  396.  
  397. <a href="https://toyhou.se/6259293." style="color: #d1b6ad; opacity: 0.5">
  398. <i class="far fa-image tooltipster" title="background pattern"></i></a>
  399.  
  400. </div>
  401.  
  402. <!------------ END ------------>
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!