API tools faq
paste
Advertisement
LeafJelly

Expanded Patch Collector Code

LeafJelly
Sep 26th, 2022 (edited)
875
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 34.55 KB | Source Code | 0 0
raw download clone embed print report
  1. <!-------------------------------------------
  2.  
  3. EXPANDED 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. Inside Button x: #efe3c8
  16.  
  17.  
  18.    Colors
  19. Text: #efe3c8
  20. Red Accent Text: #dc5722
  21. Name & Pencil: #27456d
  22. Orange BG & inner box border: #d99430
  23. Green inner boxes: #5e875c
  24.  
  25.  
  26. -------------------------------------------->
  27.  
  28.  
  29. <div class="col-10 col-lg-7 p-2 mt-5" style="border-radius:30px; background:#e8a038; margin:auto; font-family:calibri; color:#efe3c8; ">
  30.    
  31.     <!------------ Decorations Behind Card ---------------->
  32.     <div class="col-12 col-lg-7 bg-transparent">
  33.    
  34.         <!-----------Decor on the  Right ---------------->
  35.         <i class="fa-solid fa-reel fa-flip-horizontal" style="position:absolute; color:#5e875c; font-size:150px; transform: rotate(-25deg);margin:690px -110px"></i>
  36.         <i class="fa-regular fa-scribble" style="position:absolute; color:#5e875c; font-size:100px; transform: rotate(-80deg);margin:780px -180px"></i>
  37.             <!-------Buttons------>
  38.             <span class="fa-stack fa-2x" style="position:absolute; color:#5e875c; font-size:25px; transform: rotate(-25deg);margin:500px -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>
  39.             <span class="fa-stack fa-2x" style="position:absolute; color:#5e875c; font-size:18px; transform: rotate(15deg);margin:670px -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>
  40.             <span class="fa-stack fa-2x" style="position:absolute; color:#5e875c; font-size:15px; transform: rotate(30deg);margin:600px -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>
  41.             <span class="fa-stack fa-2x" style="position:absolute; color:#bd4e22; font-size:19px; transform: rotate(10deg);margin:920px -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>
  42.             <span class="fa-stack fa-2x" style="position:absolute; color:#5e875c; font-size:13px; transform: rotate(15deg);margin:880px -40px"> <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>
  43.     </div>
  44.    
  45.    
  46. <!-------------- Main Card ------------------->    
  47.     <div class="col-12 p-0" style="border-radius:30px; border:2px dashed #5e875c; background:#e8a038;">
  48.    
  49.        
  50.     <div class="row no-gutter">
  51.        
  52.         <!------------- CHARACTER NAME------------------------------>
  53.         <div class="col-12 m-1 btext-left align-items-center row" style="color:#27456d">
  54.             <h1 class="display-3 pl-3" style="font-variant: small-caps;letter-spacing:1px">
  55.                 Character Name</h1>
  56.             <div class="col-12" style="border-top:2px dashed #27456d;"></div>
  57.            
  58.             <!----- Pencil Decoration------>
  59.             <i class="fa-solid fa-pencil fa-flip-horizontal" style="position:absolute;font-size:100px;top:-45px;left:-65px"></i>
  60.  
  61.                 <!----Top Right Patch 1---->
  62.                     <span class="fa-stack fa-2x" style="position:absolute; color: #bd4e22; font-size:35px; transform: rotate(-15deg);margin:0px -70px;top:80px"> <i class="fa-solid fa-circle fa-stack-2x"></i><i class="fa-thin fa-circle-dashed fa-stack-2x" style="color:#efe3c8"></i>
  63.                         <!---PATCH SYMBOL--->
  64.                         <i class="fa-duotone fa-paintbrush-pencil fa-stack-1x fa-inverse" style="color:#efe3c8"></i></span>
  65.                
  66.                 <!----Top Right Patch 2---->
  67.                     <span class="fa-stack fa-2x" style="position:absolute; color: #bd4e22; font-size:50px; transform: rotate(-20deg);margin:0px -120px;top:160px"> <i class="fa-solid fa-circle fa-stack-2x"></i><i class="fa-thin fa-circle-dashed fa-stack-2x" style="color:#efe3c8"></i>
  68.                         <!---PATCH SYMBOL--->
  69.                         <i class="fa-duotone fa-scarf fa-stack-1x fa-inverse" style="color:#efe3c8"></i></span>
  70.    
  71.                 <!----Top Right Patch 3---->
  72.                     <span class="fa-stack fa-2x" style="position:absolute; color: #bd4e22; font-size:40px; transform: rotate(-25deg);margin:0px -70px;top:270px"> <i class="fa-solid fa-circle fa-stack-2x"></i><i class="fa-thin fa-circle-dashed fa-stack-2x" style="color:#efe3c8"></i>
  73.                         <!---PATCH SYMBOL--->
  74.                         <i class="fa-duotone fa-vest-patches fa-stack-1x fa-inverse" style="color:#efe3c8"></i></span>
  75.         </div>
  76.        
  77.     <div class="col-12 py-4 row" style="margin:auto;">
  78.         <!------------ Decorations page doll ---------------->
  79.         <div class="col-12 bg-transparent">
  80.        
  81.             <!-------Decorations behind Page Doll------>
  82.             <span class="fa-stack fa-2x" style="position:absolute; color: #bd4e22; font-size:20px; transform: rotate(-25deg);margin:250px 60px">
  83.                  <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>
  84.             <span class="fa-stack fa-2x" style="position:absolute; color: #bd4e22; font-size:15px; transform: rotate(15deg);margin:200px 120px">
  85.                  <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>
  86.             <span class="fa-stack fa-2x" style="position:absolute; color: #bd4e22; font-size:15px; transform: rotate(60deg);margin:50px 120px">
  87.                  <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>
  88.             <span class="fa-stack fa-2x" style="position:absolute; color: #bd4e22; font-size:10px; transform: rotate(15deg);margin:300px 170px">
  89.                  <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>
  90.             <span class="fa-stack fa-2x" style="position:absolute; color: #bd4e22; font-size:10px; transform: rotate(15deg);margin:20px 240px">
  91.                  <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>
  92.             <span class="fa-stack fa-2x" style="position:absolute; color: #bd4e22; font-size:10px; transform: rotate(40deg);margin:100px 160px">
  93.                  <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>
  94.             <span class="fa-stack fa-2x" style="position:absolute; color: #bd4e22; font-size:13px; transform: rotate(180deg);margin:240px 180px">
  95.                  <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>
  96.             <span class="fa-stack fa-2x" style="position:absolute; color: #bd4e22; font-size:13px; transform: rotate(30deg);margin:150px 220px">
  97.                  <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>
  98.             <span class="fa-stack fa-2x" style="position:absolute; color: #bd4e22; font-size:13px; transform: rotate(30deg);margin:140px 0px">
  99.                  <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>    
  100.         </div>
  101.        
  102.         <!------------------  PAGE DOLL IMAGE ----------------------->
  103.         <div class="col-12 col-lg-5" style="margin:auto;">
  104.             <div class="col-12 py-1 " style="background-position:center;background-size:contain;background-repeat:no-repeat;height:300px;
  105.            background-image:url(
  106.            
  107.            https://cdn.discordapp.com/attachments/395263691085316096/1022681873366909008/boshishi.png
  108.            
  109.            )">
  110.             </div>
  111.         <!------------------  Chara Info This does not scroll----------------------->
  112.             <div class="card col-12 p-2 border-0" style=" font-size:15px;font-weight:200; border-radius:35px; background:#5e875c;">
  113.             <div class="col-12 text-center py-2 px-4" style="border:2px dashed #e8a038; border-radius:30px; overflow:auto; word-break:break-word; font-size:1.1em;">
  114.                 <div class="row align-items-center">
  115.                     <div class="col-0 px-0 text-right" style="font-variant: small-caps;letter-spacing:1px">
  116.                         Title</div>
  117.                         <hr class="col mx-2 my-0" style="border-bottom:2px dashed #e8a038">
  118.                     <div class="col-0">
  119.                         Content</div>
  120.                 </div>
  121.                
  122.                 <div class="row align-items-center">
  123.                     <div class="col-0 p-0 text-right" style="font-variant: small-caps;letter-spacing:1px">
  124.                         Occupation</div>
  125.                         <hr class="col mx-2 my-0" style="border-bottom:2px dashed #e8a038">
  126.                     <div class="col-0">
  127.                         Content</div>  
  128.                 </div>
  129.                
  130.                 <div class="row align-items-center">
  131.                     <div class="col-0 p-0 text-right" style="font-variant: small-caps;letter-spacing:1px">
  132.                         Gender</div>
  133.                         <hr class="col mx-2 my-0" style="border-bottom:2px dashed #e8a038">
  134.                     <div class="col-0">
  135.                         Content 2</div>  
  136.                 </div>  
  137.                
  138.                 <div class="row align-items-center">
  139.                     <div class="col-0 p-0 text-right" style="font-variant: small-caps;letter-spacing:1px">
  140.                         Pronouns</div>
  141.                         <hr class="col mx-2 my-0" style="border-bottom:2px dashed #e8a038">
  142.                     <div class="col-0">
  143.                         Con / tent</div>  
  144.                 </div>  
  145.                
  146.                 <div class="row align-items-center">
  147.                     <div class="col-0 p-0 text-right" style="font-variant: small-caps;letter-spacing:1px">
  148.                         Age</div>
  149.                         <hr class="col mx-2 my-0" style="border-bottom:2px dashed #e8a038">
  150.                     <div class="col-0">
  151.                         # years</div>  
  152.                 </div>  
  153.                
  154.                 <div class="row align-items-center">
  155.                     <div class="col-0 p-0 text-right" style="font-variant: small-caps;letter-spacing:1px">
  156.                         Sexuality</div>
  157.                         <hr class="col mx-2 my-0" style="border-bottom:2px dashed #e8a038">
  158.                     <div class="col-0">
  159.                         Contents</div>  
  160.                 </div>
  161.                
  162.                 <div class="row align-items-center">
  163.                     <div class="col-0 p-0 text-right" style="font-variant: small-caps;letter-spacing:1px">
  164.                         Race/Species</div>
  165.                         <hr class="col mx-2 my-0" style="border-bottom:2px dashed #e8a038">
  166.                     <div class="col-0">
  167.                         Content</div>  
  168.                 </div>  
  169.                
  170.                 <div class="row align-items-center">
  171.                     <div class="col-0 p-0 text-right" style="font-variant: small-caps;letter-spacing:1px">
  172.                         Height</div>
  173.                         <hr class="col mx-2 my-0" style="border-bottom:2px dashed #e8a038">
  174.                     <div class="col-0">
  175.                         Content</div>  
  176.                 </div>  
  177.                
  178.                 <div class="row align-items-center">
  179.                     <div class="col-0 p-0 text-right" style="font-variant: small-caps;letter-spacing:1px">
  180.                         Theme</div>
  181.                         <hr class="col mx-2 my-0" style="border-bottom:2px dashed #e8a038">
  182.                     <div class="col-0">
  183.                         <a href="SongLinkHere"><i class="fa-solid fa-music-note" style="color:#dc5722"></i><i class="fa-solid fa-music" style="color:#dc5722"></i><i class="fa-solid fa-music-note" style="color:#dc5722"></i></a></div>
  184.                 </div>  
  185.                
  186.    
  187.                 <!------Copy and paste above here for more rows------>
  188.                         <!-------Decorations------->
  189.                 <div class="col-9 row align-items-center" style="margin:auto">
  190.                     <i class="fa-solid fa-scissors"></i>
  191.                     <hr class="col mx-2 my-0" style="border-bottom:2px dashed #efe3c8">
  192.                     <i class="fa-solid fa-shirt"></i>
  193.                 </div>
  194.             </div>
  195.             </div>
  196.            
  197.             <!----------Trivia This scrolls---------->
  198.             <div class="card col-12 p-2 border-0 my-2" style=" font-size:15px;font-weight:200; border-radius:35px; background:#5e875c;height:260px">
  199.             <div class="col-12 text-center px-2 pt-2 " style="border:2px dashed #e8a038; border-radius:30px; overflow:auto">
  200.                 <h1 class="display-5 text-center" style="font-weight:300; font-variant: small-caps;letter-spacing:1px;color:#e8a038">
  201.                      Trivia</h1>
  202.                 <div class="col-0" style="border-top:2px dashed #e8a038;"></div>
  203.                
  204.                 <ul class="text-left" style="list-style-type:none;margin-left:-35px">
  205.                     <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>
  206.                        Lorem ipsum dolor sit amet.
  207.                     </li>
  208.                    
  209.                     <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>
  210.                        Aliquam tincidunt mauris nteger vitae libero ac risus egestas placerat.
  211.                     </li>
  212.                    
  213.                     <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>
  214.                        Vestibulum auctor dapibus.
  215.                     </li>
  216.                    
  217.                     <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>
  218.                        Integer vitae libero ac risus egestas placerat.
  219.                     </li>
  220.                    
  221.                     <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>
  222.                        Donec quis dui at dolor tempor interdum.
  223.                     </li>
  224.                      
  225.                     <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>
  226.                        Fusce pellentesque suscipit nibh.
  227.                     </li>
  228.                        
  229.                     <!------------ Copy and paste above this line to add more bulletin points ----------------->    
  230.                 </ul>            
  231.    
  232.             </div>
  233.             </div>
  234.            
  235.            
  236.         </div>
  237.            
  238.          
  239.        
  240.    
  241.     <div class="col-12 col-lg-7 pr-4">
  242.     <div class="row no-gutter">  
  243.         <!------------------  Description Box  ----------------------->
  244.             <div class="card col-12 p-2 border-0" style=" font-size:15px;font-weight:200; border-radius:35px; background:#5e875c;height:300px">
  245.             <div class="col-12 text-center px-2 pt-2" style="border:2px dashed #e8a038; border-radius:30px; overflow:auto">
  246.                 <!---Put pride flags or other pixel decrations here--->
  247.                     <img src="https://cdn.discordapp.com/attachments/848746431849824297/848754305993015316/gay.png"> <img src="https://cdn.discordapp.com/attachments/848746431849824297/848754426549108736/ace.png"> <img src="https://cdn.discordapp.com/attachments/848746431849824297/848754397735419924/nonbinary.png">
  248.                 <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>
  249.                 <!----Header Delete it if you dont want this----->
  250.                     <h1 class="display-5 text-center" style="font-weight:300; font-variant: small-caps;letter-spacing:1px;color:#e8a038">
  251.                     Story</h1>
  252.                     <div class="col-0" style="border-top:2px dashed #e8a038;"></div>
  253.                 <!------Header end-------->    
  254.                 <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>
  255.                 <p>Nam ultricies, lectus in ultricies volutpat, libero leo imperdiet lorem, nec aliquam enim massa ac risus. Vivamus vulputate dolor quis ante sodales viverra. Cras tellus massa, sagittis sit amet sagittis nec, consectetur sit amet est. Fusce ultrices et nulla ut pellentesque. Sed quis congue metus. </p>
  256.    
  257.             </div>
  258.             </div>
  259.        
  260.         <!----------Likes  ---------->
  261.         <div class="col-12 col-lg-6 px-1">
  262.             <div class="card col-12 p-2 border-0 mt-2" style=" font-size:15px;font-weight:200; border-radius:35px; background:#27456d;height:260px">
  263.             <div class="col-12 text-center px-2 pt-2 " style="border:2px dashed #e8a038; border-radius:30px; overflow:auto">
  264.                 <h1 class="display-5 text-center" style="font-weight:300; font-variant: small-caps;letter-spacing:1px;color:#e8a038">
  265.                      Likes</h1>
  266.                 <div class="col-0" style="border-top:2px dashed #e8a038;"></div>
  267.                
  268.                 <ul class="text-left" style="list-style-type:none;margin-left:-35px">
  269.                     <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>
  270.                        Lorem ipsum dolor sit amet.
  271.                     </li>
  272.                    
  273.                     <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>
  274.                        Aliquam tincidunt mauris nteger vitae libero ac risus egestas placerat.
  275.                     </li>
  276.                    
  277.                     <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>
  278.                        Vestibulum auctor dapibus.
  279.                     </li>
  280.                    
  281.                     <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>
  282.                        Integer vitae libero ac risus egestas placerat.
  283.                     </li>
  284.                    
  285.                     <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>
  286.                        Vestibulum auctor dapibus neque.
  287.                     </li>
  288.                        
  289.                     <!------------ Copy and paste above this line to add more bulletin points ----------------->    
  290.                 </ul>            
  291.    
  292.             </div>
  293.             </div>
  294.          </div>
  295.          
  296.         <!---------- Dislikes  ---------->
  297.         <div class="col-12 col-lg-6 px-1">
  298.             <div class="card col-12 p-2 border-0 mt-2" style=" font-size:15px;font-weight:200; border-radius:35px; background:#27456d;height:260px">
  299.             <div class="col-12 text-center p-2 " style="border:2px dashed #e8a038; border-radius:30px; overflow:auto">
  300.                 <h1 class="display-5 text-center" style="font-weight:300; font-variant: small-caps;letter-spacing:1px;color:#e8a038">
  301.                      Disikes</h1>
  302.                 <div class="col-0" style="border-top:2px dashed #e8a038;"></div>
  303.                
  304.                 <ul class="text-left" style="list-style-type:none;margin-left:-35px">
  305.                     <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>
  306.                        Lorem ipsum dolor sit amet.
  307.                     </li>
  308.                    
  309.                     <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>
  310.                        Aliquam tincidunt mauris nteger vitae libero ac risus egestas placerat.
  311.                     </li>
  312.                    
  313.                     <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>
  314.                        Vestibulum auctor dapibus.
  315.                     </li>
  316.                    
  317.                     <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>
  318.                        Integer vitae libero ac risus egestas placerat.
  319.                     </li>
  320.                    
  321.                     <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>
  322.                        Vestibulum auctor dapibus neque.
  323.                     </li>
  324.                        
  325.                     <!------------ Copy and paste above this line to add more bulletin points ----------------->    
  326.                 </ul>            
  327.    
  328.             </div>
  329.             </div>
  330.         </div>
  331.     <!-----------------Relationships box-------------------->
  332.             <div class="card col-12 p-2 border-0 mt-2 mx-1" style=" font-size:15px;font-weight:200; border-radius:35px;height:300px; background:#27456d;">
  333.             <div class="col-12 text-center pt-2" style="border:2px dashed #e8a038; border-radius:30px; overflow:auto">
  334.             <div class="row no-gutter">
  335.             <!---------Relationship 1 LEFT SIDE Start ------------>    
  336.                 <div class="col-12 col-lg-6 py-2" style="border:2px dashed #e8a038; border-width:0px 2px 2px 0px;">
  337.                     <!-------CHARACTER IMAGE ------->
  338.                     <div class="col-0 p-0">
  339.                         <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;
  340.                        background-image: url(
  341.                            
  342.                        https://f2.toyhou.se/file/f2-toyhou-se/images/45107740_upKjlLVqkGsxjsj.png
  343.                            
  344.                        );"></div>
  345.                         <p class="text-center m-0" style="font-size:19px;font-weight:500;font-variant:small-caps; word-break:keep-all; color:#dc5722">
  346.                             Character Name</p>
  347.                         <p class="text-center m-0" style="font-size:15px;font-weight:100;font-variant:small-caps; word-break:keep-all; color:#e8a038">
  348.                             Relationship Type</p>    
  349.                     </div>
  350.                     <!----Info section------->
  351.                     <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.</p>
  352.                 </div>
  353.             <!---------Relationship 1 LEFT End ------------>  
  354.                
  355.             <!---------Relationship 2 RIGHT SIDE start----------->
  356.                 <div class="col-12 col-lg-6 py-2" style="border:2px dashed #e8a038; border-width:0px 0px 2px 0px;">
  357.                     <!-------CHARACTER IMAGE ------->
  358.                     <div class="col-0 p-0">
  359.                         <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;
  360.                        background-image: url(
  361.                            
  362.                        https://f2.toyhou.se/file/f2-toyhou-se/images/42907333_wMXSB6OyRWgYMYU.png
  363.                            
  364.                        );"></div>
  365.                         <p class="text-center m-0" style="font-size:19px;font-weight:500;font-variant:small-caps; word-break:keep-all; color:#dc5722">
  366.                             Character Name</p>
  367.                         <p class="text-center m-0" style="font-size:15px;font-weight:100;font-variant:small-caps; word-break:keep-all; color:#e8a038">
  368.                             Relationship Type</p>    
  369.                     </div>
  370.                     <!----Info section------->
  371.                     <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.</p>
  372.                 </div>
  373.             <!---------Relationship 2 RIGHT end----------->
  374.                
  375.                
  376.             <!---------Relationship 3 LEFT SIDE Start ------------>    
  377.                 <div class="col-12 col-lg-6 py-2" style="border:2px dashed #e8a038; border-width:0px 2px 2px 0px;">
  378.                     <!-------CHARACTER IMAGE ------->
  379.                     <div class="col-0 p-0">
  380.                         <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;
  381.                        background-image: url(
  382.                            
  383.                        https://f2.toyhou.se/file/f2-toyhou-se/images/45107253_nQ09TH4jD2toplO.png
  384.                            
  385.                        );"></div>
  386.                         <p class="text-center m-0" style="font-size:19px;font-weight:500;font-variant:small-caps; word-break:keep-all; color:#dc5722">
  387.                             Character Name</p>
  388.                         <p class="text-center m-0" style="font-size:15px;font-weight:100;font-variant:small-caps; word-break:keep-all; color:#e8a038">
  389.                             Relationship Type</p>    
  390.                     </div>
  391.                     <!----Info section------->
  392.                     <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.</p>
  393.                 </div>
  394.             <!---------Relationship 3 LEFT End ------------>  
  395.                
  396.             <!---------Relationship 4 RIGHT SIDE start----------->
  397.                 <div class="col-12 col-lg-6 py-2" style="border:2px dashed #e8a038; border-width:0px 0px 2px 0px;">
  398.                     <!-------CHARACTER IMAGE ------->
  399.                     <div class="col-0 p-0">
  400.                         <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;
  401.                        background-image: url(
  402.                            
  403.                        https://f2.toyhou.se/file/f2-toyhou-se/images/19998219_ITBWLZ7lybUgntC.png
  404.                            
  405.                        );"></div>
  406.                         <p class="text-center m-0" style="font-size:19px;font-weight:500;font-variant:small-caps; word-break:keep-all; color:#dc5722">
  407.                             Character Name</p>
  408.                         <p class="text-center m-0" style="font-size:15px;font-weight:100;font-variant:small-caps; word-break:keep-all; color:#e8a038">
  409.                             Relationship Type</p>    
  410.                     </div>
  411.                     <!----Info section------->
  412.                     <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.</p>
  413.                 </div>
  414.             <!---------Relationship 4 RIGHT end----------->
  415.         <!---------Copy and paste above this line for more Relationship Boxes. COPY AND PASTE BOTH 1&2 or 3&4 TOGETHER! ---------------->    
  416.  
  417.             </div>
  418.             </div>
  419.             </div>  
  420.     </div></div>  
  421.    
  422.  
  423.     </div></div>
  424. </div></div>
  425.  
  426. <!---------------------- CREDITS DO NOT REMOVE ------------------------------------------>
  427. <div class="col-10 col-lg-9 text-right text-muted">
  428.      <!--------- ADD PAGEDOLL ARTIST CREDIT HERE! replace the # with the URL and write in the name after the Art by--------->
  429.         <a href="#" title="Art by "><i class="fa-solid fa-image text-muted"></i></a>
  430.     <i class="fa-solid fa-plus fa-xs"></i>
  431.     <a href="https://toyhou.se/LeafJelly" title="HTML by LeafJelly"><i class="fa-solid fa-code text-muted"></i></a>
  432.    
  433. <!------------ Decorations at bottom ------------------->
  434.     <span class="fa-stack fa-2x" style="position:absolute; color:#bd4e22; font-size:18px; transform: rotate(15deg);margin:-160px 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>
  435.     <i class="fa-duotone fa-scroll" style="position:absolute; color:#bd4e22; font-size:11em; transform: rotate(35deg);margin:-100px 10px"></i>
  436.     <span class="fa-stack fa-2x" style="position:absolute; color:#5e875c; 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>
  437.     <span class="fa-stack fa-2x" style="position:absolute; color:#bd4e22; 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>
  438.     <span class="fa-stack fa-2x" style="position:absolute; color:#bd4e22; 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>
  439.     <span class="fa-stack fa-2x" style="position:absolute; color:#bd4e22; 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>
  440.     <span class="fa-stack fa-2x" style="position:absolute; color:#bd4e22; font-size:15px; transform: rotate(-10deg);margin:20px -200px"> <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>
  441.     <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>
  442.    
  443. <!-----------------Mood Board------------------->
  444.         <!----Image 1---->
  445.         <span style="height:230px;width:250px; transform:rotate(-5deg);margin:-950px 80px; border:3px dashed #efe3c8; border-radius:10px; position:absolute;background-position:center;background-size:cover;background-repeat:no-repeat;
  446.            background-image:url(
  447.        
  448.            https://images.unsplash.com/photo-1594587640199-90ad1cb30c8c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80
  449.              
  450.            )"></span>
  451.            
  452.         <!----Image 2---->
  453.         <span class="bg-warning" style="height:250px;width:300px; transform:rotate(15deg);margin:-700px 80px; border:3px dashed #efe3c8; border-radius:10px; position:absolute;background-position:center;background-size:cover;background-repeat:no-repeat;
  454.            background-image:url(
  455.        
  456.            https://images.unsplash.com/photo-1605743970487-c2c58adbdfba?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80
  457.              
  458.            )"></span>    
  459.          <!----Image 3---->
  460.         <span class="bg-warning" style="height:230px;width:230px; transform:rotate(-20deg);margin:-500px 80px; border:3px dashed #efe3c8; border-radius:10px; position:absolute;background-position:center;background-size:cover;background-repeat:no-repeat;
  461.            background-image:url(
  462.        
  463.            https://images.unsplash.com/photo-1613891737415-be7670d21c19?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80
  464.              
  465.            )"></span>
  466.            
  467.         <!----Scissor on right---->    
  468.         <i class="fa-solid fa-scissors" style="position:absolute; color:#bd4e22; font-size:200px; transform: rotate(-60deg);margin:-700px 80px"></i>    
  469.  
  470. </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!