API tools faq
paste
Advertisement
LeafJelly

Condensed Patch Collector Code

LeafJelly
Sep 26th, 2022 (edited)
923
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 32.94 KB | Source Code | 0 0
raw download clone embed print report
  1. <!-------------------------------------------
  2.  
  3.         Condensed Patch Collector Chara Code
  4.    FREE TO USE CODE BY LeafJelly
  5.    
  6.    You can change the patch symbols by changing the text after fa- with the new symbol you want from fontawesome
  7.  
  8.    Patch Symbols
  9.  
  10.    Decoration Symbols & Colors
  11.    
  12. Green Decors & Border: #5e875c
  13. Red Decors: #bd4e22
  14. Blue Decors: #27456d
  15. Button x: #efe3c8
  16.  
  17.    Colors
  18. Text: #efe3c8
  19. Name & Pencil: #27456d
  20. BG & inner box border: #d99430
  21.  
  22.  
  23. -------------------------------------------->
  24.  
  25.  
  26. <div class="col-10 col-lg-7 p-2 mt-5" style="border-radius:30px; background:#e8a038; margin:auto; font-family:calibri; color:#efe3c8; ">
  27.    
  28.     <!------------ Decorations on the left side ---------------->
  29.     <div class="col-12 col-lg-7 bg-transparent">
  30.         <i class="fa-solid fa-reel fa-flip-horizontal" style="position:absolute; color:#5e875c; font-size:150px; transform: rotate(-25deg);margin:290px -110px"></i>
  31.         <i class="fa-regular fa-scribble" style="position:absolute; color:#5e875c; font-size:100px; transform: rotate(-80deg);margin:380px -180px"></i>
  32.             <!-------Buttons------>
  33.             <span class="fa-stack fa-2x" style="position:absolute; color:#5e875c; font-size:25px; transform: rotate(-25deg);margin:215px -90px"> <i class="fa-solid fa-circle fa-stack-2x"></i><i class="fa-solid fa-xmark fa-stack-1x fa-inverse fa-lg" style="color:#efe3c8"></i></span>
  34.             <span class="fa-stack fa-2x" style="position:absolute; color:#5e875c; font-size:18px; transform: rotate(15deg);margin:270px -140px"> <i class="fa-solid fa-circle fa-stack-2x"></i><i class="fa-solid fa-xmark fa-stack-1x fa-inverse fa-lg" style="color:#efe3c8"></i></span>
  35.             <span class="fa-stack fa-2x" style="position:absolute; color:#5e875c; font-size:15px; transform: rotate(30deg);margin:150px -60px"> <i class="fa-solid fa-circle fa-stack-2x"></i><i class="fa-solid fa-xmark fa-stack-1x fa-inverse fa-lg" style="color:#efe3c8"></i></span>
  36.             <span class="fa-stack fa-2x" style="position:absolute; color:#27456d; font-size:19px; transform: rotate(10deg);margin:80px -90px"> <i class="fa-solid fa-circle fa-stack-2x"></i><i class="fa-solid fa-xmark fa-stack-1x fa-inverse fa-lg" style="color:#efe3c8"></i></span>
  37.             <span class="fa-stack fa-2x" style="position:absolute; color:#5e875c; font-size:13px; transform: rotate(15deg);margin:455px -30px"> <i class="fa-solid fa-circle fa-stack-2x"></i><i class="fa-solid fa-xmark fa-stack-1x fa-inverse fa-lg" style="color:#efe3c8"></i></span>
  38.     </div>
  39.    
  40.    
  41. <!-------------- Main Card ------------------->    
  42.     <div class="col-12 p-0" style="border-radius:30px; border:2px dashed #5e875c; background:#e8a038;">
  43.    
  44.        
  45.     <div class="row no-gutter">
  46.        
  47.         <!------------- CHARACTER NAME------------------------------>
  48.         <div class="col-12 m-1 btext-left align-items-center row" style="color:#27456d">
  49.             <h1 class="display-3 pl-3" style="font-variant: small-caps;letter-spacing:1px">
  50.                 Character Name</h1>
  51.             <div class="col-12" style="border-top:2px dashed #27456d;"></div>
  52.            
  53.             <!----- Pencil Decoration------>
  54.             <i class="fa-solid fa-pencil fa-flip-horizontal" style="position:absolute;font-size:100px;top:-45px;left:-65px"></i>
  55.  
  56.         </div>
  57.        
  58.     <div class="col-12 py-4 row" style="margin:auto;">
  59.         <!------------ Decorations page doll ---------------->
  60.         <div class="col-12 bg-transparent">
  61.        
  62.             <!-------Decorations behind Page Doll------>
  63.             <span class="fa-stack fa-2x" style="position:absolute; color: #bd4e22; font-size:20px; transform: rotate(-25deg);margin:250px 0px">
  64.                  <i class="fa-solid fa-circle fa-stack-2x"></i><i class="fa-solid fa-xmark fa-stack-1x fa-inverse fa-lg" style="color:#efe3c8"></i></span>
  65.             <span class="fa-stack fa-2x" style="position:absolute; color: #bd4e22; font-size:15px; transform: rotate(15deg);margin:200px 40px">
  66.                  <i class="fa-solid fa-circle fa-stack-2x"></i><i class="fa-solid fa-xmark fa-stack-1x fa-inverse fa-lg" style="color:#efe3c8"></i></span>
  67.             <span class="fa-stack fa-2x" style="position:absolute; color: #bd4e22; font-size:15px; transform: rotate(60deg);margin:50px 20px">
  68.                  <i class="fa-solid fa-circle fa-stack-2x"></i><i class="fa-solid fa-xmark fa-stack-1x fa-inverse fa-lg" style="color:#efe3c8"></i></span>
  69.             <span class="fa-stack fa-2x" style="position:absolute; color: #bd4e22; font-size:10px; transform: rotate(15deg);margin:300px 70px">
  70.                  <i class="fa-solid fa-circle fa-stack-2x"></i><i class="fa-solid fa-xmark fa-stack-1x fa-inverse fa-lg" style="color:#efe3c8"></i></span>
  71.             <span class="fa-stack fa-2x" style="position:absolute; color: #bd4e22; font-size:10px; transform: rotate(15deg);margin:20px 140px">
  72.                  <i class="fa-solid fa-circle fa-stack-2x"></i><i class="fa-solid fa-xmark fa-stack-1x fa-inverse fa-lg" style="color:#efe3c8"></i></span>
  73.             <span class="fa-stack fa-2x" style="position:absolute; color: #bd4e22; font-size:10px; transform: rotate(40deg);margin:100px 60px">
  74.                  <i class="fa-solid fa-circle fa-stack-2x"></i><i class="fa-solid fa-xmark fa-stack-1x fa-inverse fa-lg" style="color:#efe3c8"></i></span>
  75.             <span class="fa-stack fa-2x" style="position:absolute; color: #bd4e22; font-size:13px; transform: rotate(180deg);margin:240px 130px">
  76.                  <i class="fa-solid fa-circle fa-stack-2x"></i><i class="fa-solid fa-xmark fa-stack-1x fa-inverse fa-lg" style="color:#efe3c8"></i></span>
  77.             <span class="fa-stack fa-2x" style="position:absolute; color: #bd4e22; font-size:13px; transform: rotate(30deg);margin:150px 130px">
  78.                  <i class="fa-solid fa-circle fa-stack-2x"></i><i class="fa-solid fa-xmark fa-stack-1x fa-inverse fa-lg" style="color:#efe3c8"></i></span>
  79.         </div>
  80.        
  81.         <!------------------  PAGE DOLL IMAGE ----------------------->
  82.         <div class="col-12 col-lg-3 p-1 " style="background-position:center;background-size:contain;background-repeat:no-repeat;height:300px;
  83.        background-image:url(
  84.        
  85.        https://cdn.discordapp.com/attachments/395263691085316096/1022681873366909008/boshishi.png
  86.        
  87.        )">
  88.            
  89.         </div>
  90.        
  91.         <!------------------  MIDDLE  ----------------------->
  92.         <div class="card col-12 col-lg-7 p-2 border-0" style=" font-size:15px;font-weight:200; border-radius:35px; background:#5e875c;height:320px">
  93.             <!------------ Patches on the top right ------------------->
  94.                 <!----Top Right Patch 1---->
  95.                 <span class="fa-stack fa-2x" style="position:absolute; color: #bd4e22; font-size:30px; transform: rotate(15deg);margin:-120px 320px;"> <i class="fa-solid fa-circle fa-stack-2x"></i><i class="fa-thin fa-circle-dashed fa-stack-2x" style="color:#efe3c8"></i>
  96.                     <!---PATCH SYMBOL--->
  97.                     <i class="fa-duotone fa-paintbrush-pencil fa-stack-1x fa-inverse" style="color:#efe3c8"></i></span>
  98.                
  99.                 <!----Top Right Patch 2---->
  100.                  <span class="fa-stack fa-2x" style="position:absolute; color: #bd4e22; font-size:33px; transform: rotate(-10deg);margin:-100px 390px;"> <i class="fa-solid fa-circle fa-stack-2x"></i><i class="fa-thin fa-circle-dashed fa-stack-2x" style="color:#efe3c8"></i>
  101.                     <!---PATCH SYMBOL--->
  102.                     <i class="fa-duotone fa-scarf fa-stack-1x fa-inverse" style="color:#efe3c8"></i></span>
  103.                
  104.                 <!----Top Right Patch 3---->
  105.                 <span class="fa-stack fa-2x" style="position:absolute; color: #bd4e22; font-size:40px; transform: rotate(30deg);margin:-130px 470px;"> <i class="fa-solid fa-circle fa-stack-2x"></i><i class="fa-thin fa-circle-dashed fa-stack-2x" style="color:#efe3c8"></i>
  106.         <!---PATCH SYMBOL--->
  107.         <i class="fa-duotone fa-vest-patches fa-stack-1x fa-inverse" style="color:#efe3c8"></i></span>  
  108.         <div class="col-12" style="border:2px dashed #e8a038; border-radius:30px; overflow:auto">
  109.            
  110.         <div class="tab-content">
  111.            
  112.             <!----------------------- Moodboard Tab 1 Change the URLS to change the image -------------------------------------->
  113.              <div class="tab-pane fade active show" id="one">
  114.                 <div class="row no-gutter">
  115.                     <!---Image 1--->
  116.                     <div class="col-6" style="margin:auto;border-radius:28px 0px 0px 0px;background-position:center;background-size:cover;background-repeat:no-repeat;height:150px;
  117.                    background-image:url(
  118.                    
  119.                    https://images.unsplash.com/photo-1594587640199-90ad1cb30c8c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80
  120.                    
  121.                    )"></div>
  122.                     <!---Image 2--->
  123.                     <div class="col-6" style="margin:auto;border-radius:0px 28px 0px 0px;background-position:center;background-size:cover;background-repeat:no-repeat;height:150px;
  124.                    background-image:url(
  125.                    
  126.                    https://images.unsplash.com/photo-1605743970487-c2c58adbdfba?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80
  127.                    
  128.                    )"></div>
  129.                     <!---Image 3--->
  130.                     <div class="col-6" style="margin:auto;border-radius:0px 0px 0px 28px;background-position:center;background-size:cover;background-repeat:no-repeat;height:150px;
  131.                    background-image:url(
  132.                    
  133.                    https://cdn.discordapp.com/attachments/395263691085316096/1022716647292801115/buttponns.jpg
  134.                    
  135.                    )"></div>
  136.                     <!---Image 4--->
  137.                     <div class="col-6" style="margin:auto;border-radius:0px 0px 28px 0px;background-position:center;background-size:cover;background-repeat:no-repeat;height:150px;
  138.                    background-image:url(
  139.                    
  140.                    https://images.unsplash.com/photo-1613891737415-be7670d21c19?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80
  141.                    
  142.                    )"></div>
  143.                 </div>    
  144.             </div>
  145.            
  146.             <!----------------------- Chara Info & Likes & Dislikes Tab 2 -------------------------------------->
  147.             <div class="tab-pane fade" id="two"><div class="row no-gutter">
  148.                
  149.                 <div class="col-12 col-lg-5 px-2 align-items-center text-center" style="margin:auto;overflow:auto;border-right:2px dashed #e8a038;">
  150.                     <div class="col">
  151.                        
  152.                         <div class="text-left m-0" style="font-weight:500; font-variant: small-caps;letter-spacing:1px;border-bottom:1px dashed #e8a038;">
  153.                             Nicknames</div>
  154.                         <p class="text-right m-0">
  155.                             Content</p>
  156.                        
  157.                         <div class="text-left m-0" style="font-weight:500; font-variant: small-caps;letter-spacing:1px;border-bottom:1px dashed #e8a038;">
  158.                             Gender</div>
  159.                         <p class="text-right m-0">
  160.                             Content</p>
  161.                            
  162.                         <div class="text-left m-0" style="font-weight:500; font-variant: small-caps;letter-spacing:1px;border-bottom:1px dashed #e8a038;">
  163.                             Pronouns</div>
  164.                         <p class="text-right m-0">
  165.                             Content/Content</p>
  166.                            
  167.                         <div class="text-left" style="font-weight:500; font-variant: small-caps;letter-spacing:1px;border-bottom:1px dashed #e8a038;">
  168.                             Age</div>
  169.                         <p class="text-right m-0">
  170.                             Content</p>
  171.                            
  172.                         <div class="text-left" style="font-weight:500; font-variant: small-caps;letter-spacing:1px;border-bottom:1px dashed #e8a038;">
  173.                             Sexuality</div>
  174.                         <p class="text-right m-0">
  175.                             Content</p>
  176.                            
  177.                         <div class="text-left" style="font-weight:500; font-variant: small-caps;letter-spacing:1px;border-bottom:1px dashed #e8a038;">
  178.                             Species/Race</div>
  179.                         <p class="text-right m-0">
  180.                             Content</p>
  181.  
  182.                     </div>
  183.                 </div>
  184.                
  185.                <div class="col-12 col-lg-3" style="overflow:auto;border-right:2px dashed #e8a038;">
  186.                     <h1 class="display-5 text-center" style="font-weight:300; font-variant: small-caps;letter-spacing:1px">
  187.                         Likes</h1>
  188.                     <div class="col-0" style="border-top:2px dashed #e8a038;"></div>
  189.                         <ul style="list-style-type:none;margin-left:-45px">
  190.                             <li><span class="fa-stack fa-2x" style="font-size:.5em"> <i class="fa-thin fa-circle fa-stack-2x"></i><i class="fa-solid fa-xmark fa-stack-1x fa-inverse fa-lg" style="color:#efe3c8"></i></span>
  191.                                 Lorem ipsum dolor sit
  192.                             </li>
  193.                            
  194.                             <li><span class="fa-stack fa-2x" style="font-size:.5em"> <i class="fa-thin fa-circle fa-stack-2x"></i><i class="fa-solid fa-xmark fa-stack-1x fa-inverse fa-lg" style="color:#efe3c8"></i></span>
  195.                                 Aliquam tincidunt dolor
  196.                             </li>
  197.                            
  198.                             <li><span class="fa-stack fa-2x" style="font-size:.5em"> <i class="fa-thin fa-circle fa-stack-2x"></i><i class="fa-solid fa-xmark fa-stack-1x fa-inverse fa-lg" style="color:#efe3c8"></i></span>
  199.                                 Nunc dignissim risus id metus.
  200.                             </li>
  201.                            
  202.                             <li><span class="fa-stack fa-2x" style="font-size:.5em"> <i class="fa-thin fa-circle fa-stack-2x"></i><i class="fa-solid fa-xmark fa-stack-1x fa-inverse fa-lg" style="color:#efe3c8"></i></span>
  203.                                 Vestibulum auctor dapibus
  204.                             </li>
  205.                            
  206.                             <li><span class="fa-stack fa-2x" style="font-size:.5em"> <i class="fa-thin fa-circle fa-stack-2x"></i><i class="fa-solid fa-xmark fa-stack-1x fa-inverse fa-lg" style="color:#efe3c8"></i></span>
  207.                                 Nunc dignissim risus.
  208.                             </li>
  209.                         <!------------ Copy and paste above this line to add more bulletin points ----------------->  
  210.                         </ul>
  211.                 </div>
  212.                
  213.                  <div class="col-12 col-lg-3" style="overflow:auto;">
  214.                     <h1 class="display-5 text-center" style="font-weight:300; font-variant: small-caps;letter-spacing:1px">
  215.                         Dislikes</h1>
  216.                     <div class="col-0" style="border-top:2px dashed #e8a038;"></div>
  217.                    
  218.                         <ul style="list-style-type:none;margin-left:-45px">
  219.                             <li><span class="fa-stack fa-2x" style="font-size:.5em"> <i class="fa-thin fa-circle fa-stack-2x"></i><i class="fa-solid fa-xmark fa-stack-1x fa-inverse fa-lg" style="color:#efe3c8"></i></span>
  220.                                 Lorem ipsum dolor sit
  221.                             </li>
  222.                            
  223.                             <li><span class="fa-stack fa-2x" style="font-size:.5em"> <i class="fa-thin fa-circle fa-stack-2x"></i><i class="fa-solid fa-xmark fa-stack-1x fa-inverse fa-lg" style="color:#efe3c8"></i></span>
  224.                                 Aliquam tincidunt
  225.                             </li>
  226.                            
  227.                             <li><span class="fa-stack fa-2x" style="font-size:.5em"> <i class="fa-thin fa-circle fa-stack-2x"></i><i class="fa-solid fa-xmark fa-stack-1x fa-inverse fa-lg" style="color:#efe3c8"></i></span>
  228.                                 Nunc dignissim risus id metus.
  229.                             </li>
  230.                            
  231.                             <li><span class="fa-stack fa-2x" style="font-size:.5em"> <i class="fa-thin fa-circle fa-stack-2x"></i><i class="fa-solid fa-xmark fa-stack-1x fa-inverse fa-lg" style="color:#efe3c8"></i></span>
  232.                                 Vestibulum auctor dapibus
  233.                             </li>
  234.                            
  235.                             <li><span class="fa-stack fa-2x" style="font-size:.5em"> <i class="fa-thin fa-circle fa-stack-2x"></i><i class="fa-solid fa-xmark fa-stack-1x fa-inverse fa-lg" style="color:#efe3c8"></i></span>
  236.                                 Nunc dignissim risus.
  237.                             </li>
  238.                         <!------------ Copy and paste above this line to add more bulletin points ----------------->    
  239.                         </ul>
  240.                 </div>
  241.                
  242.             </div></div>
  243.            
  244.             <!----------------------- Personality/Info Tab 3 -------------------------------------->
  245.              <div class="tab-pane fade" id="three">
  246.                 <div class="col-12 p-2">
  247.                     <h1 class="display-5 pl-3 text-center" style="font-weight:300; font-variant: small-caps;letter-spacing:1px">
  248.                         Personality</h1>
  249.                     <div class="col-12" style="border-top:2px dashed #e8a038;"></div>
  250.                         <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>
  251.                         <p>Sit amet risus nullam eget felis eget nunc lobortis. Sed adipiscing diam donec adipiscing tristique risus nec. Eu turpis egestas pretium aenean pharetra. Etiam erat velit scelerisque in dictum non consectetur a. Amet justo donec enim diam vulputate ut pharetra. Facilisis gravida neque convallis a cras semper.</p>
  252.                 </div>
  253.             </div>
  254.            
  255.             <!----------------------- Story  Tab 4 -------------------------------------->
  256.              <div class="tab-pane fade" id="four">
  257.                 <div class="col-12 p-2">
  258.                     <h1 class="display-5 pl-3 text-center" style="font-weight:300; font-variant: small-caps;letter-spacing:1px">
  259.                         Story</h1>
  260.                     <div class="col-12" style="border-top:2px dashed #e8a038;"></div>    
  261.                         <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>
  262.                         <p>Sit amet risus nullam eget felis eget nunc lobortis. Sed adipiscing diam donec adipiscing tristique risus nec. Eu turpis egestas pretium aenean pharetra. Etiam erat velit scelerisque in dictum non consectetur a. Amet justo donec enim diam vulputate ut pharetra. Facilisis gravida neque convallis a cras semper.</p>
  263.                 </div>  
  264.             </div>
  265.            
  266.             <!----------------------- Design Notes  Tab 5 -------------------------------------->
  267.              <div class="tab-pane fade" id="five">
  268.                  <div class="row no-guter">
  269.                 <!------Color Palete-------->
  270.                     <div class="col-2 p-0" style="height:300px;">
  271.                         <div class="col" style="height:20%; background:#ecc772"></div>
  272.                         <div class="col" style="height:20%; background:#ca6b33;"></div>
  273.                         <div class="col" style="height:20%; background:#beccba;"></div>
  274.                         <div class="col" style="height:20%; background:#1794de;"></div>
  275.                         <div class="col" style="height:20%; background:#0c081c;"></div>
  276.                     </div>
  277.                
  278.                 <!------text-------->
  279.                     <div class="col-6 p-2 text-center">
  280.                     <h1 class="display-5 pl-3 text-center" style="font-weight:300; font-variant: small-caps;letter-spacing:1px">
  281.                         Design Notes</h1>
  282.                     <div class="col-12" style="border-top:2px dashed #e8a038;"></div>
  283.                         <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>
  284.                    
  285.                     </div>
  286.                    
  287.                 <!------ ALT outfit or a close up
  288.                        If you're using a transparent image or pagedoll change the background-size to contain.
  289.                        If you're using a photo for aesthetics, change background-size to cover.
  290.                -------->
  291.                     <div class="col-4" style="background-repeat:no-repeat; background-position:center; background-size:contain; background-image:url(
  292.                    
  293.                    https://f2.toyhou.se/file/f2-toyhou-se/images/18671235_lP9Kpx4JBWQg468.png
  294.                    
  295.                    )">
  296.                    
  297.                     </div>    
  298.                 </div>
  299.             </div>
  300.            
  301.             <!----------------------- Relationships Tab 6 -------------------------------------->
  302.              <div class="tab-pane fade" id="six">
  303.                 <div class="col-12 p-2">
  304.                 <h1 class="display-5 pl-3 text-center" style="font-weight:300; font-variant: small-caps;letter-spacing:1px">
  305.                     Relationships</h1>
  306.                 <div class="col-12" style="border-top:2px dashed #e8a038;"></div>
  307.                
  308.                 <!------Relationship Section, Image on Left start-------->
  309.                     <div class="col-12 pt-2 row no-gutter" style="margin:auto;border-bottom:2px dashed #bd4e22">
  310.                         <!-------CHARACTER IMAGE ------->
  311.                        
  312.                         <div class="col-4 p-0">
  313.                             <div class="rounded-circle" style="border:2px dashed #efe3c8; height:100px; width:100px;margin:auto; background:#bd4e22; background-position: center; background-size:cover; background-repeat: no-repeat;
  314.                            background-image: url(
  315.                            
  316.                            https://f2.toyhou.se/file/f2-toyhou-se/images/45107740_upKjlLVqkGsxjsj.png
  317.                            
  318.                            );"></div>
  319.                             <p class="text-center p-0" style="font-size:15px;font-weight:500;font-variant:small-caps; word-break:keep-all; color:#efe3c8">Character Name</p>
  320.                         </div>
  321.                        
  322.                         <!---------Relation Info------------>
  323.                         <div class="col-8 px-1 pb-1">
  324.                             <p class="m-0" style="font-weight:500;font-variant:small-caps; color:#ffc22f">
  325.                                 Relationship Type</p>
  326.                             <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.</p>
  327.                         </div>
  328.                     </div>    
  329.                     <!------Relationship Section, Image on Left end -------->      
  330.                    
  331.                     <!------Relationship Section, Image on Right start -------->
  332.                     <div class="col-12 pt-2 row no-gutter text-right" style="margin:auto;border-bottom:2px dashed #bd4e22">
  333.                         <!---------Relation Info------------>
  334.                         <div class="col-8 px-1 pb-1">
  335.                             <p class="m-0" style="font-weight:500;font-variant:small-caps; color:#ffc22f">
  336.                                 Relationship Type</p>
  337.                             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</p>
  338.                         </div>
  339.                        
  340.                          <!-------CHARACTER IMAGE ------->
  341.                         <div class="col-4 p-0">
  342.                             <div class="rounded-circle" style="border:2px dashed #efe3c8; height:100px; width:100px;background:#bd4e22;margin:auto;background-position: center; background-size:cover; background-repeat: no-repeat;
  343.                            background-image: url(
  344.                            
  345.                            https://f2.toyhou.se/file/f2-toyhou-se/images/42907333_wMXSB6OyRWgYMYU.png
  346.                            
  347.                            );"></div>
  348.                             <p class="text-center p-0 m-0" style="word-break:keep-all;font-size:15px;font-weight:500;font-variant:small-caps; color:#efe3c8">
  349.                             Character Name</p>
  350.                         </div>
  351.                     </div>    
  352.                     <!------Relationship Section, Image on Left end -------->  
  353.                      
  354.                      
  355.                        
  356.                     <!------------------------------Copy and Paste above here for more relationship rows------------------------------------------>
  357.                    
  358.                 </div>  
  359.             </div>
  360.  
  361.            
  362.         </div>
  363.         </div>
  364.         </div>
  365.        
  366.         <!------------------  NAVIGATION BUTTONS  ----------------------->
  367.         <div class="col-9 col-lg-2 align-items-center p-2" style="margin:auto;">
  368.         <div class="col-0 p-2" style="border-radius:30px; margin:auto; background:#27456d;">
  369.         <div class="col-0 py-3 align-items-center row" style="margin:auto;font-size:.8em;border-radius:25px;border:2px dashed #e8a038;">
  370.                
  371.                 <div class="nav col-0 p-0 my-1 text-center" style="margin:auto;">
  372.                 <!------ Patch 1  ----->
  373.                 <a class="nav-item p-0 show active" data-toggle="tab" href="#one">
  374.                     <span class="fa-stack fa-2x" style="transform: rotate(-15deg);color:#efe3c8">
  375.                     <i class="fa-solid fa-circle fa-stack-2x" style="color:#bd4e22"></i>    
  376.                     <i class="fa-thin fa-circle-dashed fa-stack-2x"></i>
  377.                         <!------ Patch Icon ----->
  378.                         <i class="fa-solid fa-reel fa-stack-1x fa-sm"></i>
  379.                     </span>
  380.                 </a>
  381.                
  382.                 <!------ Patch 2  ----->
  383.                 <a class="nav-item p-0" data-toggle="tab"  href="#two">
  384.                     <span class="fa-stack fa-2x" style="transform: rotate(18deg);color:#efe3c8">
  385.                     <i class="fa-solid fa-circle fa-stack-2x" style="color:#bd4e22"></i>    
  386.                     <i class="fa-thin fa-circle-dashed fa-stack-2x"></i>
  387.                         <!------ Patch Icon ----->
  388.                         <i class="fa-solid fa-heart fa-stack-1x fa-sm"></i>
  389.                     </span>
  390.                 </a>
  391.                 </div>
  392.                
  393.                 <div class="nav col-md-0 col-lg-0 p-0 my-1" style="margin:auto;color:#efe3c8">
  394.                 <!------ Patch 3  ----->
  395.                 <a class="nav-item p-0" data-toggle="tab"  href="#three">
  396.                     <span class="fa-stack fa-2x" style="transform: rotate(-20deg);color:#efe3c8">
  397.                     <i class="fa-solid fa-circle fa-stack-2x" style="color:#bd4e22"></i>
  398.                     <i class="fa-thin fa-circle-dashed fa-stack-2x"></i>
  399.                         <!------ Patch Icon ----->
  400.                         <i class="fa-solid fa-clover fa-stack-1x fa-sm"></i>
  401.                     </span>
  402.                 </a>
  403.                
  404.                 <!------ Patch 4  ----->
  405.                 <a class="nav-item p-0" data-toggle="tab" href="#four">
  406.                     <span class="fa-stack fa-2x" style="transform: rotate(8deg);color:#efe3c8">
  407.                     <i class="fa-solid fa-circle fa-stack-2x" style="color:#bd4e22"></i>
  408.                     <i class="fa-thin fa-circle-dashed fa-stack-2x"></i>
  409.                         <!------ Patch Icon ----->
  410.                         <i class="fa-solid fa-book fa-stack-1x fa-sm"></i>
  411.                     </span>
  412.                 </a>
  413.                 </div>
  414.                
  415.                 <div class="nav col-md-0 col-lg-0 p-0 my-1" style="margin:auto;">
  416.                 <!------ Patch 5  ----->
  417.                 <a class="nav-item p-0" data-toggle="tab"  href="#five">
  418.                     <span class="fa-stack fa-2x" style="transform: rotate(15deg);color:#efe3c8">
  419.                     <i class="fa-solid fa-circle fa-stack-2x" style="color:#bd4e22"></i>
  420.                     <i class="fa-thin fa-circle-dashed fa-stack-2x"></i>
  421.                         <!------ Patch Icon ----->
  422.                         <i class="fa-solid fa-pen-ruler fa-stack-1x fa-sm"></i>
  423.                     </span>
  424.                 </a>
  425.                
  426.                 <!------ Patch 6  ----->
  427.                 <a class="nav-item p-0" data-toggle="tab" href="#six">
  428.                     <span class="fa-stack fa-2x" style="transform: rotate(12deg);color:#efe3c8">
  429.                     <i class="fa-solid fa-circle fa-stack-2x" style="color:#bd4e22"></i>
  430.                     <i class="fa-thin fa-circle-dashed fa-stack-2x"></i>
  431.                         <!------ Patch Icon if you change the icon for this, u might need to change the fa-xs to fa-sm to match the other patch sizes----->
  432.                         <i class="fa-solid fa-user-group fa-stack-1x fa-xs"></i>
  433.                     </span>
  434.                 </a>
  435.                 </div>
  436.                
  437.            
  438.         </div></div></div>
  439.        
  440.     </div>
  441.  
  442.  
  443.     </div></div>
  444. </div>
  445.  
  446. <!---------------------- CREDITS DO NOT REMOVE ------------------------------------------>
  447. <div class="col-10 col-lg-9 text-right text-muted">
  448.      <!--------- ADD PAGEDOLL ARTIST CREDIT HERE! replace the # with the URL and write in the name after the Art by--------->
  449.         <a href="#" title="Art by"><i class="fa-solid fa-image text-muted"></i></a>
  450.     <i class="fa-solid fa-plus fa-xs"></i>
  451.     <a href="https://toyhou.se/LeafJelly" title="HTML by LeafJelly"><i class="fa-solid fa-code text-muted"></i></a>
  452.    
  453.  
  454.  <!----------------Scissor on the right----------------------->
  455.     <i class="fa-solid fa-scissors" style="position:absolute; color:#27456d; font-size:200px; transform: rotate(-60deg);margin:-350px 100px"></i>
  456.    
  457. <!------------ Decorations at bottom ------------------->
  458.     <span class="fa-stack fa-2x" style="position:absolute; color:#27456d; font-size:18px; transform: rotate(15deg);margin:-160px 80px"> <i class="fa-solid fa-circle fa-stack-2x"></i><i class="fa-solid fa-xmark fa-stack-1x fa-inverse fa-lg" style="color:#efe3c8"></i></span>
  459.     <i class="fa-duotone fa-scroll" style="position:absolute; color:#5e875c; font-size:11em; transform: rotate(35deg);margin:-100px 30px"></i>
  460.     <span class="fa-stack fa-2x" style="position:absolute; color:#27456d; font-size:15px; transform: rotate(-15deg);margin:0px 50px"> <i class="fa-solid fa-circle fa-stack-2x"></i><i class="fa-solid fa-xmark fa-stack-1x fa-inverse fa-lg" style="color:#efe3c8"></i></span>
  461.     <span class="fa-stack fa-2x" style="position:absolute; color:#5e875c; font-size:18px; transform: rotate(-15deg);margin:10px 0px"> <i class="fa-solid fa-circle fa-stack-2x"></i><i class="fa-solid fa-xmark fa-stack-1x fa-inverse fa-lg" style="color:#efe3c8"></i></span>
  462.     <span class="fa-stack fa-2x" style="position:absolute; color:#27456d; font-size:15px; transform: rotate(-15deg);margin:4px -740px"> <i class="fa-solid fa-circle fa-stack-2x"></i><i class="fa-solid fa-xmark fa-stack-1x fa-inverse fa-lg" style="color:#efe3c8"></i></span>
  463.     <span class="fa-stack fa-2x" style="position:absolute; color:#5e875c; font-size:15px; transform: rotate(10deg);margin:4px -120px"> <i class="fa-solid fa-circle fa-stack-2x"></i><i class="fa-solid fa-xmark fa-stack-1x fa-inverse fa-lg" style="color:#efe3c8"></i></span>
  464.     <span class="fa-stack fa-2x" style="position:absolute; color:#5e875c; font-size:10px; transform: rotate(-10deg);margin:25px -50px"> <i class="fa-solid fa-circle fa-stack-2x"></i><i class="fa-solid fa-xmark fa-stack-1x fa-inverse fa-lg" style="color:#efe3c8"></i></span>
  465.  
  466. </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!