API tools faq
paste
Advertisement
hatchl

RPG Toyhouse Code

hatchl
Aug 5th, 2020 (edited)
246
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 18.68 KB | None | 0 0
raw download clone embed print report
  1. <!-- USAGE RULES //////////
  2.  
  3. ///// Thank you so much for choosing to use my code!
  4. ///// I have done my best to add comments and white space to make editing easier, but if you have problems please look towards the forums/google-
  5. ///// I don't check TH regularly so I won't be answering questions about this template on here.
  6.  
  7. ///// General Rules:
  8. 1. You may edit this code as much as you want. There are obviously no limits on adding/removing/editing elements.
  9. 2. You may splice this code with other templates if their creators allow you to do so. You must also add credit to them at the end of the code.
  10. 3. Make sure you have permission to use all images you put into this template; be sure to follow the Toyhouse guidelines for images as well.
  11. 4. Do not redistribute and claim this code as your own. You may pull elements from it, but if you pull significant amounts of structure and design you must credit me.
  12. 5. In general, make sure you are following Toyhouse's TOS with regard to the content you put into this template.
  13.  
  14. -->
  15.  
  16.  
  17.  
  18.  
  19. <!-- FULL PAGE BACKGROUND **Thank you to SweetChimera < https://toyhou.se/sweetchimera > for helping with this snippet!** //////////
  20. ///// Edit the link within "background: url('#');" to change the background image.
  21. ///// If you know how, you can also add more filters and adjust the blur.-->
  22. <div class="container-fluid" style="position:absolute; top:0; bottom:0; left:0; width:100%; z-index:-1; background:
  23.  
  24. url('https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2F40.media.tumblr.com%2F63111e655d82aa9483065838a4ee64e6%2Ftumblr_nfq2sg6S4d1rvjin1o4_1280.png&f=1&nofb=1')
  25.  
  26. no-repeat fixed center; background-size: cover; filter: blur(3px);"><br></div>
  27.  
  28. <div class="bg-primary rounded p-3 col-lg-6 mt-5 mb-2 p-0 text-white" style="margin: auto;" align="left">
  29.  
  30. <!-- TOP ROW ////////// -->
  31. <div class="justify-content-between mb-1 h-100 " style="height: 10rem;">
  32.  
  33. <!-- AVATAR //////////
  34.  
  35. ///// Edit the link within 'src="[link]"'. -->
  36. <div class="p-0 d-none d-md-none d-lg-block" style="z-index: 1; position: relative; margin-top: -4rem; margin-left: -6rem;"><img class="fr-rounded p-3 bg-primary"
  37.  
  38. src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fvignette1.wikia.nocookie.net%2Fyoutubepoop%2Fimages%2Ff%2Ff7%2F5Pikachu.png%2Frevision%2Flatest%3Fcb%3D20141108062013&f=1&nofb=1"
  39.  
  40. style="width: 230px; height: 230px;">
  41. </div>
  42.  
  43.  
  44. <div class="col-lg bg-dark p-3 rounded h-100 mb-3">
  45. <div class="justify-content-between mb-3">
  46.  
  47. <!-- CHARACTER NAME ////////// -->
  48. <span><h1 style="font-family: monospace; letter-spacing: 3px; text-align: left;">Character Name!</h1></span>
  49. <div class="row d-none d-md-block pr-3">
  50.  
  51. <!-- POKEMON TYPES SECTION /////////
  52. ///// List of hex codes and corresponding types:
  53. Bug - #A0AF1A
  54. Dark - #533E30
  55. Dragon - #7760E2
  56. Electric - #FAB917
  57. Fairy - #F5B2F5
  58. Fighting - #82341D
  59. Fire - #EE420E
  60. Flying - #99ABF6
  61. Ghost - #6161B2
  62. Grass - #72C235
  63. Ground - #D4B358
  64. Ice - #A9E9FE
  65. Normal - #C7C2B9
  66. Poison - #964897
  67. Psychic - #ED4883
  68. Rock - #BAA257
  69. Steel - #B5B5C3
  70. Water - #389BFE
  71.  
  72. -->
  73.  
  74. <!-- TYPE 1 //////////
  75. ////// To edit the background color, change the hex code after "background-color:".
  76. ////// To edit the type, change the inner text.
  77. -->
  78. <div class="badge badge-pill p-2" style="
  79.  
  80. background-color: #EE420E;
  81.  
  82. border: 2px solid white;"><span style="letter-spacing: 3px; font-family: monospace;">
  83.  
  84. FIRE
  85.  
  86. </span></div>
  87.  
  88. <!-- TYPE 2 //////////
  89. ////// To edit the background color, change the hex code after "background-color:".
  90. ////// To edit the type, change the inner text.
  91. -->
  92. <div class="badge badge-pill p-2" style="
  93.  
  94. background-color: #3092F3;
  95.  
  96. border: 2px solid white;"><span style="letter-spacing: 3px; font-family: monospace;">
  97.  
  98. WATER
  99.  
  100. </span></div>
  101. </div>
  102. </div>
  103.  
  104. <!-- STATS SECTION //////////
  105. ///// To edit the %, change the percentage in 'style="width: 50%;"'.
  106. -->
  107.  
  108. <!-- STATS SECTION 1: HP ////////// -->
  109. <div style="line-height:200%;">
  110. <div class="d-flex justify-content-between" style="font-family: monospace; font-size: 150%;">
  111. <span class="mr-3 p-0" style="font-family:monospace;font-weight:bold;">
  112. HP&nbsp;
  113. </span>
  114. <div class="progress w-100 h-100" style="margin:auto;"><div class="progress-bar"
  115.  
  116. style="width:50%;"></div>
  117.  
  118. </div>
  119. </div>
  120.  
  121. <!-- STATS SECTION 2: ATK ////////// -->
  122. <div style="line-height:200%;">
  123. <div class="d-flex justify-content-between" style="font-family: monospace; font-size: 150%;">
  124. <span class="mr-3 p-0" style="font-family:monospace;font-weight:bold;">
  125. ATK
  126. </span>
  127. <div class="progress w-100 h-100" style="margin:auto;"><div class="progress-bar"
  128.  
  129. style="width:50%;"></div>
  130.  
  131. </div>
  132. </div>
  133.  
  134. <!-- STATS SECTION 3: DEF ////////// -->
  135. <div style="line-height:200%;">
  136. <div class="d-flex justify-content-between" style="font-family: monospace; font-size: 150%;">
  137. <span class="mr-3 p-0" style="font-family:monospace;font-weight:bold;">
  138. DEF
  139. </span>
  140. <div class="progress w-100 h-100" style="margin:auto;"><div class="progress-bar"
  141.  
  142. style="width:50%;"></div>
  143.  
  144. </div>
  145. </div>
  146. </div>
  147. </div>
  148. </div>
  149. </div>
  150. </div>
  151.  
  152. <!-- BOTTOM ROW ////////// -->
  153. <div class="bg-dark col-lg rounded p-3">
  154. <div class="row justify-content-between w-100" style="margin: auto;">
  155.  
  156. <!-- INFORMATION SECTION //////////
  157. ///// Edit the text within the <span></span> to edit the contents on the right of the charts.
  158. ///// If you'd like to change the font-awesome icons, you'll want to change the class of the <i> tag.
  159. ///// https://fontawesome.com/v4.7.0/icons/
  160. -->
  161.  
  162. <div class="col-lg mr-2">
  163. <h5 class="mb-3" style="text-align: center;"><i class="fa fa-info-circle"></i> About</h5>
  164. <div class="row justify-content-between mb-3" style="line-height: 180%;">
  165.  
  166. <!-- INFO LEFT SIDE ////////// -->
  167. <div class="col w-100 mr-1">
  168. <div class="justify-content-between w-100"><i class="fa fa-hashtag"></i><span class="text-muted">Age</span></div>
  169. <div class="justify-content-between w-100"><i class="fa fa-birthday-cake"></i><span class="text-muted">mm/yy</span></div>
  170. <div class="justify-content-between w-100"><i class="fa fa-star"></i><span class="text-muted">Zodiac</span></div>
  171. <div class="justify-content-between w-100"><i class="fa fa-heart"></i><span class="text-muted">Orientation</span></div>
  172. <div class="justify-content-between w-100"><i class="fa fa-briefcase"></i><span class="text-muted">Occupation</span></div>
  173. </div>
  174.  
  175. <!-- INFO RIGHT SIDE ////////// -->
  176. <div class="col w-100">
  177. <div class="justify-content-between w-100"><i class="fa fa-map-marker"></i><span class="text-muted">
  178. Location</span></div>
  179. <div class="justify-content-between w-100"><i class="fa fa-globe"></i><span class="text-muted">
  180. World</span></div>
  181.  
  182. <!-- INFO LINKS //////////
  183. ///// To edit, change the "#" within 'href="#"' to a link of your choice.
  184. ///// Make sure the link stays within the double quotation marks.
  185. -->
  186. <div class="justify-content-between w-100"><i class="fa fa-music"></i><span class="text-muted"><a
  187. href="#"
  188. title="Song"><i class="fa fa-link"></i></a></span></div>
  189. <div class="justify-content-between w-100"><i class="fa fa-file-image"></i><span class="text-muted"><a
  190. href="#"
  191. title="Pinterest Board"><i class="fa fa-link"></i></a></span></div>
  192. <div class="justify-content-between w-100"><i class="fa fa-list"></i><span class="text-muted"><a
  193. href="#"
  194. title="Other Link"><i class="fa fa-link"></i></a></span></div>
  195. </div>
  196. </div>
  197.  
  198. <!-- STORY SECTION //////////
  199. ///// Edit the Lorem ipsum filler text and replace it with your own!
  200. ///// To add breaks in paragraphs, insert a "<br>". Insert two to have a space after the paragraph.
  201. ///// This box will scroll with your content so you can add as much as you want.
  202. -->
  203. <h5 style="text-align: center;"><i class="fa fa-book"></i> Story</h5>
  204. <div class="card p-2 pl-3 pr-3 bg-primary mb-3 mt-3 rounded" style="overflow: auto; height: 15rem;">
  205. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Tincidunt praesent semper feugiat nibh sed pulvinar proin gravida. Morbi tincidunt ornare massa eget egestas. Duis ut diam quam nulla porttitor massa id. Faucibus turpis in eu mi. Auctor neque vitae tempus quam pellentesque nec. Convallis tellus id interdum velit laoreet. Ipsum dolor sit amet consectetur. Orci nulla pellentesque dignissim enim sit amet venenatis urna cursus. Est ante in nibh mauris cursus mattis molestie. Mus mauris vitae ultricies leo integer malesuada nunc vel risus. Magna ac placerat vestibulum lectus mauris. Quis risus sed vulputate odio ut enim.
  206. <br>
  207. <br>
  208. Condimentum mattis pellentesque id nibh. Mollis aliquam ut porttitor leo. Ipsum a arcu cursus vitae congue mauris rhoncus aenean vel. Tincidunt dui ut ornare lectus sit amet est placerat. Elit at imperdiet dui accumsan sit amet nulla. Fringilla phasellus faucibus scelerisque eleifend donec. Bibendum neque egestas congue quisque egestas diam in arcu. Enim diam vulputate ut pharetra sit amet. Enim ut tellus elementum sagittis vitae et leo. Felis eget nunc lobortis mattis aliquam. Feugiat nisl pretium fusce id velit. Hendrerit gravida rutrum quisque non. Morbi quis commodo odio aenean sed. Lorem mollis aliquam ut porttitor. Tempus quam pellentesque nec nam aliquam sem et tortor consequat. Tortor at auctor urna nunc id. Ut faucibus pulvinar elementum integer enim neque volutpat ac tincidunt.
  209. <br>
  210. <br>
  211. Turpis in eu mi bibendum neque egestas. Euismod quis viverra nibh cras pulvinar. Tortor condimentum lacinia quis vel eros donec ac odio. In tellus integer feugiat scelerisque varius morbi enim nunc. Fermentum iaculis eu non diam phasellus vestibulum lorem. Ultricies lacus sed turpis tincidunt id. Blandit cursus risus at ultrices mi tempus imperdiet nulla. Ultrices dui sapien eget mi proin sed libero enim. Ultrices mi tempus imperdiet nulla malesuada pellentesque elit eget gravida. Rhoncus aenean vel elit scelerisque mauris pellentesque pulvinar pellentesque habitant. Aliquam vestibulum morbi blandit cursus. Aliquam etiam erat velit scelerisque in dictum non consectetur a.
  212. </div>
  213. </div>
  214.  
  215. <!-- NOTES SECTION //////////
  216. ///// Edit the text within the <div> tags, separated out below.
  217. ///// You can add more or less notes by copying the <div> tag and placing it within this section.
  218. ///// The section will scroll with however many notes you want to add.
  219. -->
  220. <div class="col-lg">
  221. <h5 class="mb-3" style="text-align: center;"><i class="fa fa-pencil"></i> Notes</h5>
  222. <div class="mb-3 bg-primary p-2 pl-3 pr-3 rounded card" style="line-height: 180%; overflow: auto; height:7.8rem;">
  223. <div><i class="fa fa-pencil"></i> Note 1 here.</div>
  224. <div><i class="fa fa-pencil"></i> Note 2 here.</div>
  225. <div><i class="fa fa-pencil"></i> Note 3 here.</div>
  226. <div><i class="fa fa-pencil"></i> Note 4 here.</div>
  227. <div><i class="fa fa-pencil"></i> Note 5 here.</div>
  228. <div><i class="fa fa-pencil"></i> Note 6 here.</div>
  229. <div><i class="fa fa-pencil"></i> Note 7 here.</div>
  230. <div><i class="fa fa-pencil"></i> Note 8 here.</div>
  231. </div>
  232.  
  233. <!-- COLORS SECTION //////////
  234. ///// Edit both of the hex codes within each <div>.
  235. ///// The first (background: #;) hex code changes the actual color of the box, and the second (title="") changes the text when you mouse over it.
  236. -->
  237. <h5 class="mb-3" style="text-align: center;"><i class="fa fa-paint-brush"></i> Colors</h5>
  238. <div class="row justify-content-between p-0 modal-open rounded mb-3" style="height:3rem; margin: auto;">
  239. <div class="col h-100" style="background: #f26c65;" title="#f26c65"></div>
  240. <div class="col h-100" style="background: #f9bd63;" title="#f9bd63"></div>
  241. <div class="col h-100" style="background: #c0f963;" title="#c0f963"></div>
  242. <div class="col h-100" style="background: #63b6f9;" title="#63b6f9"></div>
  243. <div class="col h-100" style="background: #a963f9;" title="#a963f9"></div>
  244. <div class="col h-100" style="background: #f963ed;" title="#f963ed"></div>
  245. <div class="col h-100" style="background: #ffffff;" title="#ffffff"></div>
  246. </div>
  247.  
  248. <!-- MOODBOARD SECTION //////////
  249. ///// First, change the image address within "background: url('#');".
  250. ///// Next, add the image credit in 'title="Image Credit"'.
  251. ///// Finally, change the link within 'href="#"' to the link to the image source.
  252. -->
  253. <h5 class="mb-3" style="text-align: center;"><i class="fa fa-camera"></i> Moodboard</h5>
  254. <div class="row no-gutters modal-open rounded" style="margin:auto;">
  255.  
  256. <!-- IMAGE 1 ////////// -->
  257. <div class="col-sm-4">
  258. <p class="h-100" style="min-height: 9rem; background:
  259.  
  260. url('https://images.unsplash.com/photo-1515552726023-7125c8d07fb3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1267&q=80')
  261.  
  262. no-repeat center;background-size:cover;"
  263.  
  264. title="Image Credit">
  265.  
  266. <a class="stretched-link"
  267.  
  268. href="https://unsplash.com/photos/gdAuwo-qj5k"><br></a>
  269. </p>
  270. </div>
  271.  
  272. <!-- IMAGE 2 ////////// -->
  273. <div class="col-sm-4">
  274. <p class="h-100" style="min-height:9rem;background:
  275.  
  276. url('https://images.unsplash.com/photo-1500964757637-c85e8a162699?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1378&q=80')
  277.  
  278. no-repeat center;background-size:cover;"
  279.  
  280. title="Image Credit">
  281.  
  282. <a class="stretched-link"
  283.  
  284. href="https://unsplash.com/photos/twukN12EN7c"><br></a>
  285. </p>
  286. </div>
  287.  
  288. <!-- IMAGE 3 ////////// -->
  289. <div class="col-sm-4">
  290. <p class="h-100" style="min-height:9rem;background:
  291.  
  292. url('https://images.unsplash.com/photo-1527510324148-d503699fe7f5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=700&q=80')
  293.  
  294. no-repeat center;background-size:cover;"
  295.  
  296. title="Image Credit">
  297.  
  298. <a class="stretched-link"
  299.  
  300. href="https://unsplash.com/photos/ao6Igbdi19c"><br></a>
  301. </p>
  302. </div>
  303. </div>
  304. </div>
  305.  
  306. </div>
  307.  
  308. </div>
  309. </div>
  310.  
  311. <!-- CODE CREDIT ////////// DO NOT REMOVE -->
  312. <div class="col-lg-6 mb-5" style="margin: auto;" align="right"><a href="https://toyhou.se/7776109.rpg-f2u-" title="Code credit: Hatchl"><i class="fa fa-code"></i></a></div>
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!