API tools faq
paste
LeafJelly

Trifold Character Code

LeafJelly
Dec 3rd, 2022 (edited)
185
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 15.55 KB | None | 0 0
raw download clone embed print report
  1. <!--------------------------------------------
  2.    Free to Use- Trifold Character Code
  3.        By LeafJelly
  4.  
  5.        Rules
  6. 1. DO NOT REMOVE credits
  7. 2. DO NOT redistribute purchased codes
  8. 3. Turn off WYSIWYG before using my HTML codes and while editing, it'll break otherwise
  9. 4. You can modify and frankestein my codes with credit to all the source codes, and only if the other coders allow it.
  10. 5. You may NOT redistribute frankesteined codes under your own name, claiming it as your own work. Copy and pasting parts of my code without credit is theft, and takes advantage of my work that's provided for free.
  11. 6.You're allowed to heavily modify my codes, as long as credit to me stays on the page. If the credit breaks, feel free to write it in somewhere instead or at the bottom.
  12. --------------------------------------------->
  13. <div class="col-12 p-0">
  14. <div class="card col-12 bg-faded p-2"><div class="row no-gutters">
  15.    
  16. <!----------- Image Carousel ----------------
  17.  
  18. Replace the URLs with a Image URL/Address
  19.  
  20. -------------------------------------------->
  21. <div class="col-lg-3 p-1">
  22. <div id="carouselb" class="carousel slide" data-ride="carousel">
  23.     <div class="carousel-inner">
  24.         <!--------Character Image 1--------->
  25.         <div class="carousel-item active">
  26.         <div style="background-image:url(
  27.        
  28.        https://via.placeholder.com/300x800
  29.        
  30.        );background-position:center; background-size:cover;height:728px;" class="p-1"></div></div>
  31.  
  32.         <!--------Character Image 2--------->
  33.         <div class="carousel-item">
  34.         <div style="background-image:url(
  35.        
  36.        https://via.placeholder.com/300x800
  37.        
  38.        );background-position:center; background-size:cover;height:728px" class="p-1"></div></div>
  39.        
  40.         <!--------Character Image 3--------->
  41.         <div class="carousel-item">
  42.         <div style="background-image:url(
  43.        
  44.        https://via.placeholder.com/300x800
  45.        
  46.        );background-position:center; background-size:cover;height:728px" class="p-1"></div></div>
  47.        
  48.     <!-------- Copy and paste above here for more ---------->  
  49.     </div>
  50. </div>        
  51.  
  52. <!-- Carousel CONTROLS Don't touch it -->
  53.     <a class="carousel-control-prev" href="#carouselb" data-slide="prev">
  54.         <span><i class="fas fa-chevron-left fa-lg" style="color:#999;margin-left:-20px;"></i></span></a>
  55.     <a class="carousel-control-next" href="#carouselb" data-slide="next">
  56.         <span><i class="fas fa-chevron-right fa-lg" style="color:#999;margin-left:20px;"></i></span></a>
  57. </div>
  58. <!----------- Middle Section ----------------
  59.  
  60. Basic Character Information. It goes left to right
  61.  
  62. -------------------------------------------->
  63. <div class="col-lg-6"><div class="row no-gutters">
  64. <div class="col-lg-9 p-1"><div class="card rounded-0 border-0 p-1 text-center" style="height:203px;overflow:auto">
  65.  
  66. <span style="font-weight:500; font-size:1.4em;letter-spacing:1px">
  67. <!---- Character Name ---->      
  68.     Character Name
  69. </span><span style="font-size:1.1em">
  70. <!----- Subtitle, Delete it if you don't want it----->      
  71.      Title or Adjs or a Quote
  72. </span>
  73. <hr class="m-0 my-2"><div class="row no-gutters ">
  74.  
  75. <!----------- Info 1 ------------>      
  76. <div class="col-lg-6 px-2 mx-auto"><div class="justify-content-between">
  77. <span style="font-weight:500" class="text-uppercase">
  78.     Name
  79. </span><span>
  80.     Content
  81. </span></div><hr class="m-0 my-1"></div>
  82.  
  83. <!----------- Info 2 ------------>      
  84. <div class="col-lg-6 px-2 mx-auto"><div class="justify-content-between">
  85. <span style="font-weight:500" class="text-uppercase">
  86.     Age
  87. </span><span>
  88.     Content
  89. </span></div><hr class="m-0 my-1"></div>
  90.  
  91. <!----------- Info 3 ------------>      
  92. <div class="col-lg-6 px-2 mx-auto"><div class="justify-content-between">
  93. <span style="font-weight:500" class="text-uppercase">
  94.     Pronouns
  95. </span><span>
  96.     Content
  97. </span></div><hr class="m-0 my-1"></div>
  98.  
  99. <!----------- Info 4 ------------>      
  100. <div class="col-lg-6 px-2 mx-auto"><div class="justify-content-between">
  101. <span style="font-weight:500" class="text-uppercase">
  102.     Gender
  103. </span><span>
  104.     Content
  105. </span></div><hr class="m-0 my-1"></div>
  106.  
  107. <!----------- Info 5 ------------>      
  108. <div class="col-lg-6 px-2 mx-auto"><div class="justify-content-between">
  109. <span style="font-weight:500" class="text-uppercase">
  110.     Race
  111. </span><span>
  112.     Content
  113. </span></div><hr class="m-0 my-1"></div>
  114.  
  115. <!----------- Info 6 ------------>      
  116. <div class="col-lg-6 px-2 mx-auto"><div class="justify-content-between">
  117. <span style="font-weight:500" class="text-uppercase">
  118.     Height
  119. </span><span>
  120.     Content
  121. </span></div><hr class="m-0 my-1"></div>
  122.  
  123. <!----------- Info 7 ------------>      
  124. <div class="col-lg-6 px-2 mx-auto"><div class="justify-content-between">
  125. <span style="font-weight:500" class="text-uppercase">
  126.     Alignment
  127. </span><span>
  128.     Content
  129. </span></div><hr class="m-0 my-1"></div>
  130.  
  131. <!----------- Info 8 ------------>      
  132. <div class="col-lg-6 px-2 mx-auto"><div class="justify-content-between">
  133. <span style="font-weight:500" class="text-uppercase">
  134.     Job
  135. </span><span>
  136.     Content
  137. </span></div><hr class="m-0 my-1"></div>
  138.  
  139. <!------------Copy and paste above here for more-------------->
  140. </div></div></div>
  141.  
  142. <!----------- Right Side Icon/Image ----------------
  143. This could be an aesthetic image too instead of a character icon
  144. Replace the URLs with a Image URL/Address
  145. -------------------------------------------->
  146. <div class="col-md-3 p-1"><div class="card h-100 rounded-0 border-0" style="min-height:130px;background-position:center; background-image:url(
  148.    https://via.placeholder.com/200x300
  149.    
  150.    ); background-size:cover;">
  151. </div></div>
  152. <!----------- About Section ----------------
  153. -------------------------------------------->
  154. <div class="col-12 p-1"><div class="card rounded-0 border-0 p-2" style="height:170px;">
  155. <span style="font-weight:500" class="text-uppercase"><i class="far fa-book px-1"></i>
  156.      About
  157. </span>
  158. <div style="overflow:auto">
  159.      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
  160.      
  161.      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
  162.  
  163. <!---- Put more paragraphs above here ------>    
  164. </div></div></div>
  165.  
  166. <!----------- Left Side Image/Icon ----------------
  167. This could be an aesthetic image too instead of a character icon
  168. Replace the URLs with a Image URL/Address
  169. -------------------------------------------->
  170. <div class="col-lg-3 p-1"><div class="card h-100 rounded-0 border-0 p-2" style="min-height:100px;background-position:center; background-image:url(
  172.    https://via.placeholder.com/300
  173.    
  174.    ); background-size:cover;">
  175.  
  176. <!----------- Music Player----------------
  177. The button is on top of the image. This could be a song or a voice claim!
  178.  
  179. Changed the youtube ID, replacing ONLY the words ID_HERE
  180. KEEP the /embed/ amd ?controls=0 after the ID_HERE
  181.  
  182. You can find the youtube ID by clicking the share button on the video
  183. and copying the string of letters and numbers at the end
  184. of the https://youtu.be/ URL.
  185. -------------------------------------------->
  186. <div class="btn-info rounded m-auto" style="opacity:.i9;border-width:1px;border-style:solid;">
  187. <a class="btn melody-embed border-0 p-1 m-auto">
  188.     <iframe style="opacity:.01;position:absolute;left:-0px;bottom:0px;height:100%;width:100%;transform:rotate(180deg)"
  189.  
  190.    src="https://www.youtube-nocookie.com/embed/NinLIDs9qmU?controls=0" frameborder="0"></iframe>
  191.  
  192.         <i class="fas fa-lg my-1 fa-play fa-fw"></i></a>
  193. </div>
  194. <!------Music Player End------->
  195. </div></div>
  196.  
  197. <!----------- Trivia Section ----------------
  198.  
  199. This will scroll as you add more.
  200.  
  201. -------------------------------------------->
  202. <div class="col-lg-9 p-1"><div class="card rounded-0 border-0 p-2" style="height:161px;">
  203. <span style="font-weight:500" class="text-uppercase"><i class="far fa-star px-1"></i>
  204.      Trivia
  205. </span>
  206. <div style="overflow:auto">
  207. <!----- Bulletin Points ---->    
  208. <ul class="m-0">
  209.      <li>The button on the left plays music! It can also be a voice claim instead.</li>
  210.      <li>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat.</li>
  211.      <li> Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus. Vestibulum auctor dapibus neque.</li>
  212.      <li>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat</li>
  213.      
  214. <!------ Copy and Paste Above here for More Bulletins------->    
  215. </ul>
  216. </div></div></div>
  217.  
  218. <!----------- Trivia Section ----------------
  219.  
  220. This will scroll as you add more.
  221.  
  222. -------------------------------------------->
  223. <div class="col-10 col-md-11 p-1"><div class="card rounded-0 border-0 p-2" style="height:170px;">
  224. <span style="font-weight:500" class="text-uppercase"><i class="far fa-palette px-1"></i>
  225.      Design Notes
  226. </span>
  227. <div style="overflow:auto">
  228. <!----- Bulletin Points ---->    
  229. <ul class="m-0">
  230.      <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</li>
  231.      <li>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat.</li>
  232.      <li> Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus. Vestibulum auctor dapibus neque.</li>
  233.      <li>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat</li>
  234.      
  235. <!------ Copy and Paste Above here for More Bulletins------->    
  236. </ul>
  237. </div></div></div>
  238.  
  239. <!----------- Color Palette ----------------
  240.  
  241. Replaced the background hexcode with the color you want
  242.  
  243. -------------------------------------------->
  244. <div class="col-2 col-md-1 flex-column p-1">
  245.     <div class="col" style="background:#999"></div>
  246.     <div class="col" style="background:#888"></div>
  247.     <div class="col" style="background:#666"></div>
  248.     <div class="col" style="background:#444"></div>
  249.     <div class="col" style="background:#000"></div>
  250.     <!------- Copy and paste above here for more color swatches ---------->
  251. </div>
  252.  
  253. </div></div>
  254.  
  255.  
  256. <div class="col-lg-3"><div class="row no-gutters">
  257.    
  258. <!----------- Likes Section ----------------
  259. -------------------------------------------->    
  260. <div class="col-12 p-1"><div class="card rounded-0 border-0 p-2" style="height:128px; overflow:auto;">
  261. <span style="font-weight:500" class="text-uppercase"><i class="far fa-heart px-1"></i>
  262.      Likes
  263. </span>
  264. <!----- Bulletin Points ---->    
  265. <ul class="m-0">
  266.      <li>one</li>
  267.      <li>two</li>
  268.      <li>three</li>
  269.      <li>four</li>
  270.      
  271. <!------ Copy and Paste Above here for More Bulletins------->    
  272. </ul>    
  273. </div></div>
  274.  
  275. <!----------- Dislikes Section ----------------
  276. -------------------------------------------->    
  277. <div class="col-12 p-1 order-2"><div class="card rounded-0 border-0 p-2" style="height:128px; overflow:auto;">
  278. <span style="font-weight:500" class="text-uppercase"><i class="far fa-xmark px-1"></i>
  279.      Disikes
  280. </span>
  281. <!----- Bulletin Points ---->    
  282. <ul class="m-0">
  283.      <li>one</li>
  284.      <li>two</li>
  285.      <li>three</li>
  286.      <li>four</li>
  287.      
  288. <!------ Copy and Paste Above here for More Bulletins------->    
  289. </ul>
  290. </div></div>
  291.  
  292. <!----------- Relationships Section ----------------
  293.  
  294. Copy and Paste as many relationships as you want.
  295. The start and end of each one are labelled.
  296. Change the relationship type symbols using https://fontawesome.com/search
  297. -------------------------------------------->    
  298. <div class="col-12 p-1 order-3"><div class="card rounded-0 border-0 p-2" style="height:200px; overflow:auto;">
  299. <span style="font-weight:500" class="text-uppercase"><i class="far fa-user px-1"></i>
  300.      Relationships
  301. </span>
  302.  
  303. <!------- Relationship 1 Start ----------->
  304. <div class="p-1 text-center">
  305. <div class="justify-content-center px-1"><div class="row no-gutters text-right">
  306. <!----- Character Icon ------>    
  307. <img class="rounded-circle col-0" src="
  309. https://via.placeholder.com/70
  311. " width="70">
  312. <!------ Link ------->
  313. <div class="col-0 text-center my-auto ml-2" style="font-weight:500">
  314.      <a target="_BLANK" class="text-uppercase"
  315.         href="URL_HERE">
  316.          Character Name
  317.      </a>
  318. <!------ Symbol ------->
  319.      <p><i class="fa-regular fa-handshake"></i>
  320.          Relationship Type
  321.      </p>
  322. </div></div></div>
  323. <!------ Text -------->
  324.     <p>
  325.         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus.
  326.     </p>
  327.     <hr class="m-0 my-1"></div>
  328. <!------- Relationship 1 End ----------->
  329.  
  330. <!------- Relationship 2 Start ----------->
  331. <div class="p-1 text-center">
  332. <div class="px-1 justify-content-center"><div class=" row no-gutters">
  333. <!----- Character Icon ------>    
  334. <img class="rounded-circle col-0" src="
  336. https://via.placeholder.com/70
  338. " width="70">
  339. <!------ Link ------->
  340. <div class="col-0 text-center my-auto ml-2" style="font-weight:500">
  341.      <a target="_BLANK" class="text-uppercase"
  342.         href="URL_HERE">
  343.          Character Name
  344.      </a>
  345. <!------ Symbol ------->
  346.      <p><i class="fa-regular fa-face-smile"></i>
  347.          Relationship Type
  348.      </p>
  349. </div></div></div>
  350. <!------ Text -------->
  351.     <p>
  352.         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.
  353.     </p>
  354.     <hr class="m-0 my-1"></div>
  355. <!------- Relationship 2 End ----------->
  356.  
  357. <!-------- Copy and Paste above here for more relationships ----------->
  358. </div></div></div>
  359.  
  360. <!----------- Moodboard Section ----------------
  361. Replace the URLs with a image url/address
  362. ----------------------------------------------->    
  363. <div class="col-12 p-1 order-3 row no-gutters">
  364. <!------ Image 1 ----------->    
  365. <div class="col-6 pr-1 pb-1"><div style="background-image:url(
  366.    
  367.     https://via.placeholder.com/200
  368.        
  369.     );background-position:center; background-size:cover;height:120px">
  370.    
  371. </div></div>
  372.  
  373. <!------ Image 2 ----------->    
  374. <div class="col-6 pl-1 pb-1"><div class="h-100" style="background-image:url(
  375.    
  376.     https://via.placeholder.com/200
  377.        
  378.     );background-position:center; background-size:cover">
  379.    
  380. </div></div>
  381.  
  382. <!------ Image 1 ----------->    
  383. <div class="col-6 pt-1 pr-1"><div style="background-image:url(
  384.    
  385.     https://via.placeholder.com/200
  386.        
  387.     );background-position:center; background-size:cover;height:120px">
  388.    
  389. </div></div>
  390.  
  391. <!------ Image 1 ----------->    
  392. <div class="col-6 pt-1 pl-1"><div class="h-100" style="background-image:url(
  393.    
  394.     https://via.placeholder.com/200
  395.        
  396.     );background-position:center; background-size:cover">
  397.    
  398. </div></div>
  399.  
  400. </div></div></div></div></div>
  401. <!------- Credit Do Not Remove  -------->
  402. <p class="text-muted pull-right" style="font-size:.8em">
  403.     HTML by @LeafJelly
  404. </p>
Advertisement
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!