API tools faq
paste
Jade-Everstone

ArtFighter (cc - wither)

Jade-Everstone
Jun 23rd, 2022 (edited)
516
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 32.93 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE HTML>
  2.  
  3. <!--Rules:
  4.  
  5. AF profile
  6. team wither vers.
  7.  
  8. You may
  9. -frankenstein with other codes (as long as the creator of said code allows it)
  10. -edit/change as much as you need (example: making character codes into user codes, vice-versa)
  11.  
  12. You may not
  13. -Redistribute, resell, and/or claim its yours
  14. -Remove credit (you're allowed to move & edit it though, just keep it visible)
  15.  
  16. Misc Notes:
  17. -When editing, remember to turn WYSIWYG off! My codes may break otherwise
  18. -Some basic html knowledge is recommended for editing
  19.  
  20. Default Colors:
  21. -headers, button gradients: rgba(250,155,205,1), rgba(181,92,197,1)
  22.    -BG (w/o gradients): #fa9bcd
  23. -sub-headers, socials links: #fa9bcd
  24. -card backgrounds: #150d19
  25.  
  26. Change the colors: Ctrl+f and search for the color you want to change.
  27.  
  28. -->
  29.  
  30. <!--background
  31.  
  32. you can delete the bg if you don't need it-->
  33.  
  34. <div style="
  35.    background-image:url(https://images.unsplash.com/photo-1572197316318-2fb744caf405?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80);
  36.    background-attachment:fixed;
  37.    background-size:cover;
  38.    background-position:center;
  39.    z-index:-20;
  40.    height:100%;
  41.    width:100%;
  42.    position:absolute;
  43.    left:0px;
  44.    right:0px;
  45.    top:0;
  46.    bottom:0;
  47.    margin-top:-15px;
  48.    min-height:695px;
  49.    box-shadow: 3px 3px 5px rgba(0,0,0,0.5);background-color:rgba(10,2,20,0.95)">
  50. </div>
  51.  
  52. <!--end background-->
  53.  
  54.  
  55. <div class="container my-5" style="max-width:970px">
  56.    
  57.    
  58.         <!--main header-->
  59.        
  60.         <div class="card border-0 rounded-0 p-2 mb-3 text-white" style="box-shadow: 0px 0px 10px rgba(181,92,197,0.5);
  61.            background-color:#fa9bcd;
  62.            background-image:linear-gradient(90deg, rgba(250,155,205,1) 26%, rgba(181,92,197,1) 100%)">
  63.             <div class="card-body">
  64.                
  65.                 <div class="row">
  66.                    
  67.                     <!--username-->
  68.                     <div class="col-12 col-md-7">
  69.                         <span style="font-size:3em;font-style:italic;font-weight:bold;letter-spacing:1px">
  70.                             <i class="fa-duotone fa-mushroom"></i> Username
  71.                         </span>
  72.                     </div>
  73.                    
  74.                     <!--team name-->
  75.                     <div class="col-12 col-md-5" style="text-align:right;margin-top:auto;margin-bottom:auto">
  76.                         <span style="font-size:2em;font-style:italic;font-weight:bold;letter-spacing:1px;"> Team Wither</span>
  77.                     </div>
  78.                    
  79.                 </div>
  80.                
  81.                 <hr style="border-width:3px;border-color:rgba(255,255,255,0.5);margin-top:1px;margin-bottom:2px">
  82.                
  83.             </div>
  84.         </div>
  85.        
  86.         <!--end main header-->
  87.        
  88.        
  89.         <!--main image/intro-->
  90.        
  91.         <div class="row mb-4">
  92.            
  93.             <!--image + quick info-->
  94.            
  95.             <div class="col-12 col-lg-4">
  96.                 <div class="card text-white border-0 rounded-0 mb-3" style="box-shadow: 0px 0px 10px rgba(181,92,197,0.5);max-width:300px;margin-left:auto;margin-right:auto;
  97.                    background-color:#150d19">
  98.                    
  99.                     <!--image-->
  100.                     <div class="card border-0 rounded-0" style=";min-height:300px;
  101.                    background-color:#150d19;
  102.                    background-image:url(https://via.placeholder.com/300px);
  103.                    background-size:cover;
  104.                    background-position:center">
  105.                        
  106.                         <!--Decorative Icons-->
  107.                        
  108.                         <span class="text-white" style="font-size:100px;position:absolute;left:-17%;top:1%;transform:rotate(340deg);z-index:1;">
  109.                             <i class="fa-duotone fa-mushroom"></i>
  110.                         </span>
  111.                        
  112.                         <span class="text-white" style="font-size:100px;position:absolute;right:-17%;bottom:1%;transform:rotate(20deg);z-index:1">
  113.                             <i class="fa-duotone fa-mushroom"></i>
  114.                         </span>
  115.                        
  116.                        
  117.                         <!--image credit-->
  118.                         <span class="text-white" style="font-size:1.25em;position:absolute;right:5px;text-shadow:3px 3px 3px #000000;letter-spacing:2px">
  119.                            
  120.                             <!--character-->
  121.                             <a href="#"><i class="fa-solid fa-user text-white" data-toggle="tooltip" title="Character Name"></i></a>
  122.                            
  123.                             <!--image-->
  124.                             <a href="#"><i class="fa-solid fa-image text-white" data-toggle="tooltip" title="img - credit"></i></a>
  125.                            
  126.                         </span>
  127.                        
  128.                     </div>
  129.                    
  130.                     <!--Quick info-->
  131.                     <div class="card-body p-2">
  132.                        
  133.                         <span style="color:#fa9bcd;font-weight:bold;letter-spacing:1px">I attack</span>
  134.                         <span class="pull-right">Randomly/Revenge Focused</span>
  135.                         <hr class="my-1">
  136.                        
  137.                         <span style="color:#fa9bcd;font-weight:bold;letter-spacing:1px">Friendly Fire?</span>
  138.                         <span class="pull-right">yes/no</span>
  139.                         <hr class="my-1">
  140.                        
  141.                         <span style="color:#fa9bcd;font-weight:bold;letter-spacing:1px">Revenge Chains?</span>
  142.                         <span class="pull-right">yes/no</span>
  143.                         <hr class="my-1">
  144.                        
  145.                         <span style="color:#fa9bcd;font-weight:bold;letter-spacing:1px">Status</span>
  146.                         <span class="pull-right">Active/Break</span>
  147.                        
  148.                     </div>
  149.                    
  150.                 </div>
  151.             </div>
  152.            
  153.             <!--image + quick info-->
  154.            
  155.            
  156.             <!--Bio, socials, badges-->
  157.            
  158.             <div class="col-12 col-lg-8" style="margin-top:auto;margin-bottom:auto">
  159.                
  160.                 <div class="card text-white border-0 rounded-0 mb-2" style="box-shadow: 0px 0px 10px rgba(181,92,197,0.5);
  161.                    background-color:#150d19">
  162.                    
  163.                     <!--bio-->
  164.                     <div class="card-body p-3">
  165.                        
  166.                         <p>Have a lot of info? this section will expand!</p>
  167.                         <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>
  168.                        
  169.                         <!--artfight page link-->
  170.                         <div class="mt-2" style="text-align:center">
  171.                             <a href="#" class="btn border-0 rounded-0 text-white"  style="box-shadow: 0px 0px 10px rgba(181,92,197,0.5);font-size:1.25em;background-color:#fa9bcd;
  172.                                background-image:linear-gradient(270deg, rgba(250,155,205,1) 26%, rgba(181,92,197,1) 100%)">
  173.                                
  174.                                 <i class="fa-duotone fa-mushroom"></i> Artfight Page! <i class="fa-duotone fa-mushroom"></i>
  175.                             </a>
  176.                         </div>
  177.                    
  178.                     </div>
  179.                    
  180.                     <!--socials-->
  181.                     <div class="card-footer mx-3 p-1 bg-transparent" style="font-size:1.75em;letter-spacing:7px;text-align:center">
  182.                        
  183.                         <a href="#" style="color:#fa9bcd">
  184.                             <i class="fa-brands fa-twitter" data-toggle="tooltip" title="Twitter"></i>
  185.                         </a>
  186.                        
  187.                         <a href="#" style="color:#fa9bcd">
  188.                             <i class="fa-brands fa-deviantart" data-toggle="tooltip" title="DeviantArt"></i>
  189.                         </a>
  190.                        
  191.                         <a href="#" style="color:#fa9bcd">
  192.                             <i class="fa-brands fa-instagram" data-toggle="tooltip" title="Instagram"></i>
  193.                         </a>
  194.                        
  195.                         <a href="#" style="color:#fa9bcd">
  196.                             <i class="fa-brands fa-tumblr" data-toggle="tooltip" title="Tumblr"></i>
  197.                         </a>
  198.                        
  199.                         <a href="#" style="color:#fa9bcd">
  200.                             <i class="fa-solid fa-address-card" data-toggle="tooltip" title="Carrd"></i>
  201.                         </a>
  202.                        
  203.                     </div>
  204.                    
  205.                 </div>
  206.                
  207.                 <!--AF badges
  208.                - sourced from the artfight DA page:
  209.                https://www.deviantart.com/artyfight/gallery/73999513/official-art-fight-stamps
  210.                
  211.                Note: went up to tech vs magic for preview tidy-ness, but I'll leave the links for Mono v. Color & Hunters v. Zombies for those who participated :)
  212.                
  213.                Mono: https://rainy.s-ul.eu/TN8eUKei.png
  214.                Color: https://rainy.s-ul.eu/G1GHg9N9.png
  215.                Hunters: https://rainy.s-ul.eu/00muxmEj.png
  216.                Zombies: https://rainy.s-ul.eu/JTk9ibe8.png
  217.                
  218.                -->
  219.                 <div class="p-2 mb-3" style="text-align:center">
  220.                    
  221.                         <!--wither-->
  222.                         <img src="https://rainy.s-ul.eu/aoDeP4e8.png">
  223.                        
  224.                         <!--steampunk-->
  225.                         <img src="https://rainy.s-ul.eu/am5jWPgm.png">
  226.                        
  227.                         <!--cyberpunk-->
  228.                         <img src="https://rainy.s-ul.eu/eLnpLqp3.png">
  229.                        
  230.                         <!--sugar-->
  231.                         <img src="https://rainy.s-ul.eu/4V7KA2L0.png">
  232.                        
  233.                         <!--spice-->
  234.                         <img src="https://i.imgur.com/pfiN94H.png">
  235.                        
  236.                         <!--dream-->
  237.                         <img src="https://rainy.s-ul.eu/TaNcNdVI.png">
  238.                        
  239.                         <!--nightmare-->
  240.                         <img src="https://rainy.s-ul.eu/EYUc1eAc.png">
  241.                        
  242.                         <!--tea-->
  243.                         <img src="https://rainy.s-ul.eu/39qc1C3c.png">
  244.                        
  245.                         <!--coffee-->
  246.                         <img src="https://rainy.s-ul.eu/LhWhupCO.png">
  247.                        
  248.                         <!--sun-->
  249.                         <img src="https://rainy.s-ul.eu/Pz3RTtiE.png">
  250.                        
  251.                         <!--moon-->
  252.                         <img src="https://rainy.s-ul.eu/S4aDvVR7.png">
  253.                        
  254.                         <!--tech-->
  255.                         <img src="https://rainy.s-ul.eu/M4W1A9VP.png">
  256.                        
  257.                         <!--magic-->
  258.                         <img src="https://rainy.s-ul.eu/rXj40OCb.png">
  259.                        
  260.                        
  261.                     </div>
  262.                    
  263.             </div>
  264.            
  265.             <!--end Bio, socials, badges-->
  266.            
  267.         </div>
  268.        
  269.         <!--end main image/intro-->
  270.        
  271.        
  272.         <!--your drawing prefrences-->
  273.        
  274.         <div class="row mb-4">
  275.            
  276.             <!--Can draw-->
  277.            
  278.             <div class="col-12 col-lg-4">
  279.                 <div class="card text-white border-0 rounded-0 p-2 mb-3" style="box-shadow: 0px 0px 10px rgba(181,92,197,0.5);max-width:400px;margin-left:auto;margin-right:auto;
  280.                    background-color:#150d19">
  281.                     <div class="card-body">
  282.                        
  283.                         <span style="color:#fa9bcd;font-size:1.5em;font-weight:bold;letter-spacing:1px;font-style:italic"><i class="fa-duotone fa-mushroom"></i> I Can Draw</span>
  284.                         <hr class="my-1">
  285.                        
  286.                         <span> <i class="fa-solid fa-check"></i> Thing</span>
  287.                         <br class="mb-1">
  288.                        
  289.                         <span> <i class="fa-solid fa-check"></i> Thing</span>
  290.                         <br class="mb-1">
  291.                        
  292.                         <span> <i class="fa-solid fa-check"></i> Thing</span>
  293.                         <br class="mb-1">
  294.                        
  295.                         <span> <i class="fa-solid fa-check"></i> Thing</span>
  296.                         <br class="mb-1">
  297.                        
  298.                         <span> <i class="fa-solid fa-check"></i> Thing</span>
  299.                         <br class="mb-1">
  300.                        
  301.                     </div>
  302.                 </div>
  303.             </div>
  304.            
  305.             <!--end can draw-->
  306.            
  307.            
  308.             <!--won't draw-->
  309.            
  310.             <div class="col-12 col-lg-4">
  311.                 <div class="card text-white border-0 rounded-0 p-2 mb-3" style="box-shadow: 0px 0px 10px rgba(181,92,197,0.5);max-width:400px;margin-left:auto;margin-right:auto;
  312.                    background-color:#150d19">
  313.                     <div class="card-body">
  314.                        
  315.                         <span style="color:#fa9bcd;font-size:1.5em;font-weight:bold;letter-spacing:1px;font-style:italic"><i class="fa-duotone fa-skull"></i> I Won't Draw</span>
  316.                         <hr class="my-1">
  317.                        
  318.                         <span> <i class="fa-solid fa-xmark"></i> Thing</span>
  319.                         <br class="mb-1">
  320.                        
  321.                         <span> <i class="fa-solid fa-xmark"></i> Thing</span>
  322.                         <br class="mb-1">
  323.                        
  324.                         <span> <i class="fa-solid fa-xmark"></i> Thing</span>
  325.                         <br class="mb-1">
  326.                        
  327.                         <span> <i class="fa-solid fa-xmark"></i> Thing</span>
  328.                         <br class="mb-1">
  329.                        
  330.                         <span> <i class="fa-solid fa-xmark"></i> Thing</span>
  331.                         <br class="mb-1">
  332.                        
  333.                     </div>
  334.                 </div>
  335.             </div>
  336.            
  337.             <!--end won't draw-->
  338.            
  339.            
  340.             <!--looking for (ie. designs you're looking for)-->
  341.            
  342.             <div class="col-12 col-lg-4">
  343.                 <div class="card text-white border-0 rounded-0 p-2 mb-3" style="box-shadow: 0px 0px 10px rgba(181,92,197,0.5);max-width:400px;margin-left:auto;margin-right:auto;
  344.                    background-color:#150d19">
  345.                     <div class="card-body">
  346.                         <span style="color:#fa9bcd;font-size:1.5em;font-weight:bold;letter-spacing:1px;font-style:italic"><i class="fa-solid fa-magnifying-glass"></i> Looking for...</span>
  347.                         <hr class="my-1">
  348.                        
  349.                         <span> <i class="fa-regular fa-circle"></i> Thing</span>
  350.                         <br class="mb-1">
  351.                        
  352.                         <span> <i class="fa-regular fa-circle"></i> Thing</span>
  353.                         <br class="mb-1">
  354.                        
  355.                         <span> <i class="fa-regular fa-circle"></i> Thing</span>
  356.                         <br class="mb-1">
  357.                        
  358.                         <span> <i class="fa-regular fa-circle"></i> Thing</span>
  359.                         <br class="mb-1">
  360.                        
  361.                         <span> <i class="fa-regular fa-circle"></i> Thing</span>
  362.                         <br class="mb-1">
  363.                     </div>
  364.                 </div>
  365.             </div>
  366.            
  367.             <!--end looking for-->
  368.            
  369.         </div>
  370.        
  371.         <!--end drawing prefrences-->
  372.        
  373.        
  374.         <!--featured characters header-->
  375.        
  376.         <div class="card border-0 rounded-0 p-2 mb-3 text-white" style="box-shadow: 0px 0px 10px rgba(181,92,197,0.5);
  377.            background-color:#fa9bcd;
  378.            background-image:linear-gradient(270deg, rgba(250,155,205,1) 26%, rgba(181,92,197,1) 100%)">
  379.             <div class="card-body">
  380.                
  381.                 <span style="font-size:2em;font-style:italic;font-weight:bold;letter-spacing:1px"> <i class="fa-duotone fa-user-pen"></i> Featured Characters</span>
  382.                
  383.                 <hr style="border-width:3px;border-color:rgba(255,255,255,0.5);margin-top:1px;margin-bottom:2px">
  384.                
  385.             </div>
  386.         </div>
  387.        
  388.         <!--end featured characters header-->
  389.        
  390.        
  391.         <!--permissions/characters-->
  392.        
  393.         <div class="row">
  394.            
  395.             <!--permissions
  396.            
  397.            NOTE: looks best with breif permissions
  398.            (eg: "drawing with your ocs" instead of "I'm ok with your ocs being drawn with mine")
  399.            this column will expand if you need more room though
  400.            -->
  401.            
  402.             <div class="col-12 col-lg-3">
  403.                 <div class="card text-white border-0 rounded-0 p-2 mb-3" style="box-shadow: 0px 0px 10px rgba(181,92,197,0.5);max-width:400px;margin-left:auto;margin-right:auto;
  404.                    background-color:#150d19">
  405.                     <div class="card-body">
  406.                        
  407.                         <span style="color:#fa9bcd;font-size:1.5em;font-weight:bold;letter-spacing:1px;font-style:italic"><i class="fa-solid fa-pen"></i> Permissions</span>
  408.                        
  409.                         <!--ok-->
  410.                         <hr class="my-1">
  411.                         <span style="font-size:1.25em;font-weight:bold;letter-spacing:1px;font-style:italic"> OK</span>
  412.                         <br class="mb-1">
  413.                        
  414.                         <span> <i class="fa-solid fa-check"></i> Thing</span>
  415.                         <br class="mb-1">
  416.                        
  417.                         <span> <i class="fa-solid fa-check"></i> Thing</span>
  418.                         <br class="mb-1">
  419.                        
  420.                         <span> <i class="fa-solid fa-check"></i> Thing</span>
  421.                         <br class="mb-1">
  422.                        
  423.                         <span> <i class="fa-solid fa-check"></i> Thing</span>
  424.                         <br class="mb-1">
  425.                        
  426.                         <!--Not ok-->
  427.                         <hr class="my-1">
  428.                         <span style="font-size:1.25em;font-weight:bold;letter-spacing:1px;font-style:italic"> Not OK</span>
  429.                         <br class="mb-1">
  430.                        
  431.                         <span> <i class="fa-solid fa-xmark"></i> Thing</span>
  432.                         <br class="mb-1">
  433.                        
  434.                         <span> <i class="fa-solid fa-xmark"></i> Thing</span>
  435.                         <br class="mb-1">
  436.                        
  437.                         <span> <i class="fa-solid fa-xmark"></i> Thing</span>
  438.                         <br class="mb-1">
  439.                        
  440.                         <span> <i class="fa-solid fa-xmark"></i> Thing</span>
  441.                         <br class="mb-1">
  442.                        
  443.                         <!--ask-->
  444.                         <hr class="my-1">
  445.                         <span style="font-size:1.25em;font-weight:bold;letter-spacing:1px;font-style:italic"> Ask</span>
  446.                         <br class="mb-1">
  447.                        
  448.                         <span> <i class="fa-solid fa-comment"></i> Thing</span>
  449.                         <br class="mb-1">
  450.                        
  451.                         <span> <i class="fa-solid fa-comment"></i> Thing</span>
  452.                         <br class="mb-1">
  453.                        
  454.                         <span> <i class="fa-solid fa-comment"></i> Thing</span>
  455.                         <br class="mb-1">
  456.                        
  457.                         <span> <i class="fa-solid fa-comment"></i> Thing</span>
  458.                         <br class="mb-1">
  459.                        
  460.                         <!--icon key
  461.                        
  462.                        for extra info (eg: content warnings, prefered characters)
  463.                        -->
  464.                         <hr class="my-1">
  465.                         <span style="font-size:1.25em;font-weight:bold;letter-spacing:1px;font-style:italic"> Key</span>
  466.                         <br class="mb-1">
  467.                        
  468.                         <span> <i class="fa-solid fa-star"></i> Preferred</span>
  469.                         <br class="mb-1">
  470.                        
  471.                         <span> <i class="fa-solid fa-triangle-exclamation"></i> Warning</span>
  472.                         <br class="mb-1">
  473.                        
  474.                     </div>
  475.                 </div>
  476.             </div>
  477.            
  478.             <!--end permissions-->
  479.            
  480.            
  481.             <!--characters-->
  482.            
  483.             <div class="col-12 col-lg-9">
  484.                 <div class="row">
  485.                    
  486.                     <!--character 1-->
  487.                     <div class="col-12 col-sm-6 col-lg-4">
  488.                         <div class="card text-white border-0 rounded-0 mb-3" style="box-shadow: 0px 0px 10px rgba(181,92,197,0.5);max-width:220px;margin-left:auto;margin-right:auto;background-color:#150d19">
  489.                            
  490.                             <!--image-->
  491.                             <div class="card border-0 rounded-0" style=";min-height:200px;
  492.                                background-image:url(https://via.placeholder.com/250px);
  493.                                background-size:cover;
  494.                                background-position:center">
  495.                                
  496.                                 <!--Icons-->
  497.                                 <span class="text-white" style="font-size:1.5em;position:absolute;right:10px;text-shadow:3px 3px 3px #000000;letter-spacing:1px">
  498.                                     <i class="fa-solid fa-star" data-toggle="tooltip" title="Art Prefered"></i>
  499.                                     <i class="fa-solid fa-triangle-exclamation" data-toggle="tooltip" title="Content Warnings"></i>
  500.                                 </span>
  501.                        
  502.                             </div>
  503.                    
  504.                             <!--Name/links-->
  505.                             <div class="card-body p-1" style="text-align:center">
  506.                                 <span style="font-size:1.5em;font-weight:bold;letter-spacing:1px"> Character name </span>
  507.                                 <hr class="my-1">
  508.                                
  509.                                 <a href="AF LINK" style="color:#fa9bcd;font-size:1.25em;font-weight:bold;letter-spacing:1px"> Artfight </a> -
  510.                                 <a href="TH LINK" style="color:#fa9bcd;font-size:1.25em;font-weight:bold;letter-spacing:1px"> Toyhouse </a>
  511.                                
  512.                             </div>
  513.                            
  514.                         </div>
  515.                     </div>
  516.                     <!--end character 1-->
  517.                    
  518.                    
  519.                     <!--character 2-->
  520.                     <div class="col-12 col-sm-6 col-lg-4">
  521.                         <div class="card text-white border-0 rounded-0 mb-3" style="box-shadow: 0px 0px 10px rgba(181,92,197,0.5);max-width:220px;margin-left:auto;margin-right:auto;background-color:#150d19">
  522.                            
  523.                             <!--image-->
  524.                             <div class="card border-0 rounded-0" style=";min-height:200px;
  525.                                background-image:url(https://via.placeholder.com/250px);
  526.                                background-size:cover;
  527.                                background-position:center">
  528.                                
  529.                                 <!--Icons go here-->
  530.                                
  531.                             </div>
  532.                    
  533.                             <!--Name/links-->
  534.                             <div class="card-body p-1" style="text-align:center">
  535.                                 <span style="font-size:1.5em;font-weight:bold;letter-spacing:1px"> Character name </span>
  536.                                 <hr class="my-1">
  537.                                
  538.                                 <a href="AF LINK" style="color:#fa9bcd;font-size:1.25em;font-weight:bold;letter-spacing:1px"> Artfight </a> -
  539.                                 <a href="TH LINK" style="color:#fa9bcd;font-size:1.25em;font-weight:bold;letter-spacing:1px"> Toyhouse </a>
  540.                                
  541.                             </div>
  542.                            
  543.                         </div>
  544.                     </div>
  545.                     <!--end character 2-->
  546.                    
  547.                    
  548.                     <!--character 3-->
  549.                     <div class="col-12 col-sm-6 col-lg-4">
  550.                         <div class="card text-white border-0 rounded-0 mb-3" style="box-shadow: 0px 0px 10px rgba(181,92,197,0.5);max-width:220px;margin-left:auto;margin-right:auto;background-color:#150d19">
  551.                            
  552.                             <!--image-->
  553.                             <div class="card border-0 rounded-0" style=";min-height:200px;
  554.                                background-image:url(https://via.placeholder.com/250px);
  555.                                background-size:cover;
  556.                                background-position:center">
  557.                                
  558.                                 <!--Icons go here-->
  559.                        
  560.                             </div>
  561.                    
  562.                             <!--Name/links-->
  563.                             <div class="card-body p-1" style="text-align:center">
  564.                                 <span style="font-size:1.5em;font-weight:bold;letter-spacing:1px"> Character name </span>
  565.                                 <hr class="my-1">
  566.                                
  567.                                 <a href="AF LINK" style="color:#fa9bcd;font-size:1.25em;font-weight:bold;letter-spacing:1px"> Artfight </a> -
  568.                                 <a href="TH LINK" style="color:#fa9bcd;font-size:1.25em;font-weight:bold;letter-spacing:1px"> Toyhouse </a>
  569.                                
  570.                             </div>
  571.                            
  572.                         </div>
  573.                     </div>
  574.                     <!--end character 3-->
  575.                    
  576.                    
  577.                     <!--character 4-->
  578.                     <div class="col-12 col-sm-6 col-lg-4">
  579.                         <div class="card text-white border-0 rounded-0 mb-3" style="box-shadow: 0px 0px 10px rgba(181,92,197,0.5);max-width:220px;margin-left:auto;margin-right:auto;background-color:#150d19">
  580.                            
  581.                             <!--image-->
  582.                             <div class="card border-0 rounded-0" style=";min-height:200px;
  583.                                background-image:url(https://via.placeholder.com/250px);
  584.                                background-size:cover;
  585.                                background-position:center">
  586.                                
  587.                                 <!--Icons go here-->
  588.                        
  589.                             </div>
  590.                    
  591.                             <!--Name/links-->
  592.                             <div class="card-body p-1" style="text-align:center">
  593.                                 <span style="font-size:1.5em;font-weight:bold;letter-spacing:1px"> Character name </span>
  594.                                 <hr class="my-1">
  595.                                
  596.                                 <a href="AF LINK" style="color:#fa9bcd;font-size:1.25em;font-weight:bold;letter-spacing:1px"> Artfight </a> -
  597.                                 <a href="TH LINK" style="color:#fa9bcd;font-size:1.25em;font-weight:bold;letter-spacing:1px"> Toyhouse </a>
  598.                                
  599.                             </div>
  600.                            
  601.                         </div>
  602.                     </div>
  603.                     <!--end character 4-->
  604.                    
  605.                    
  606.                     <!--character 5-->
  607.                     <div class="col-12 col-sm-6 col-lg-4">
  608.                         <div class="card text-white border-0 rounded-0 mb-3" style="box-shadow: 0px 0px 10px rgba(181,92,197,0.5);max-width:220px;margin-left:auto;margin-right:auto;background-color:#150d19">
  609.                            
  610.                             <!--image-->
  611.                             <div class="card border-0 rounded-0" style=";min-height:200px;
  612.                                background-image:url(https://via.placeholder.com/250px);
  613.                                background-size:cover;
  614.                                background-position:center">
  615.                                
  616.                                 <!--Icons go here-->
  617.                        
  618.                             </div>
  619.                    
  620.                             <!--Name/links-->
  621.                             <div class="card-body p-1" style="text-align:center">
  622.                                 <span style="font-size:1.5em;font-weight:bold;letter-spacing:1px"> Character name </span>
  623.                                 <hr class="my-1">
  624.                                
  625.                                 <a href="AF LINK" style="color:#fa9bcd;font-size:1.25em;font-weight:bold;letter-spacing:1px"> Artfight </a> -
  626.                                 <a href="TH LINK" style="color:#fa9bcd;font-size:1.25em;font-weight:bold;letter-spacing:1px"> Toyhouse </a>
  627.                                
  628.                             </div>
  629.                            
  630.                         </div>
  631.                     </div>
  632.                     <!--end character 5-->
  633.                    
  634.                    
  635.                     <!--character 6-->
  636.                     <div class="col-12 col-sm-6 col-lg-4">
  637.                         <div class="card text-white border-0 rounded-0 mb-3" style="box-shadow: 0px 0px 10px rgba(181,92,197,0.5);max-width:220px;margin-left:auto;margin-right:auto;background-color:#150d19">
  638.                            
  639.                             <!--image-->
  640.                             <div class="card border-0 rounded-0" style=";min-height:200px;
  641.                                background-image:url(https://via.placeholder.com/250px);
  642.                                background-size:cover;
  643.                                background-position:center">
  644.                                
  645.                                 <!--Icons go here-->
  646.                        
  647.                             </div>
  648.                    
  649.                             <!--Name/links-->
  650.                             <div class="card-body p-1" style="text-align:center">
  651.                                 <span style="font-size:1.5em;font-weight:bold;letter-spacing:1px"> Character name </span>
  652.                                 <hr class="my-1">
  653.                                
  654.                                 <a href="AF LINK" style="color:#fa9bcd;font-size:1.25em;font-weight:bold;letter-spacing:1px"> Artfight </a> -
  655.                                 <a href="TH LINK" style="color:#fa9bcd;font-size:1.25em;font-weight:bold;letter-spacing:1px"> Toyhouse </a>
  656.                                
  657.                             </div>
  658.                            
  659.                         </div>
  660.                     </div>
  661.                     <!--end character 6-->
  662.                    
  663.                 </div>
  664.             </div>
  665.            
  666.             <!--characters-->
  667.            
  668.         </div>
  669.        
  670.         <!--end permissions/characters-->
  671.        
  672.        
  673.         <!--Credit. You may move it, but please do not delete/remove-->
  674.        
  675.         <p class="p-1 text-white" style="box-shadow: 1px 1px 5px rgba(0,0,0,0.5);background-color:#150d19;margin:auto;box-shadow: 0px 0px 10px rgba(181,92,197,0.5);">
  676.             HTML by <a href="https://toyhou.se/16393601" style="color:#fa9bcd"><i class="fa-duotone fa-mushroom"></i> Jade-Everstone</a> // BG - <a href="https://unsplash.com/photos/oSNKy9BOKaI" style="color:#fa9bcd"> Unsplash</a>
  677.         </p>
  678.  
  679. </div>
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!