API tools faq
paste
Jade-Everstone

ArtFighter (bs - neutral)

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