API tools faq
paste
junijwi

Deadlock Character Splash

junijwi
Mar 6th, 2026 (edited)
377
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 14.86 KB | None | 0 0
raw download clone embed print report
  1. <!--------------------------------
  2.    DEADLOCK TEMPLATE
  3.        this template was made by Juni,
  4.        using assets from Deadlock (Valve).
  5.  
  6.    PLEASE EDIT WITH WYSIWYG TURNED OFF!
  7.        i would highly recommend using circlejourney:
  8.        https://th.circlejourney.net/
  9.  
  10.    COLORS THAT YOU CAN CTRL+FIND REPLACE WITH A #000000 HEX:
  11.                  ACCENT COLOR: #D91D65
  12.                  HEADER COLOR: #FDF1D5
  13.               BODY TEXT COLOR: #C9C8CC
  14.       ICON & LABEL TEXT COLOR: #fcf8f0
  15.      
  16.    EDITABLE FIELDS ARE MARKED IN COMMENTS WITH ❗
  17.  
  18. --------------------------------->
  19.  
  20.  
  21. <div class="container rounded"
  22.     style="background-image: url('https://f2.toyhou.se/file/f2-toyhou-se/images/116206255_h1uB9XZTUv1uliJ.png?1772748668');
  23.            background-repeat: no-repeat;
  24.            background-size: cover;
  25.            background-position: left center;
  26.            box-shadow: 0px 0px 3px rgba(0,0,0,.5);
  27.            font-weight: normal;
  28.            text-shadow: 0px 0px 3px black;">
  29.    
  30. <!-- ❗ Background Graphic -->
  31. <!-- You can change the graphic with a custom one,
  32.     or you can adjust the filter values of:
  33.        hue-rotate
  34.        brightness
  35.        saturate
  36.     to suit your palette! -->
  37.     <div class="rounded"
  38.         style="position: absolute; bottom: 0; right: 0; height: 100%; width: 70%;
  39. background-image: url('https://f2.toyhou.se/file/f2-toyhou-se/images/116206359_TD68gT6J5aN5Q9d.png');
  40.                background-repeat: no-repeat;
  41.                background-size: cover;
  42. filter: sepia(1) hue-rotate(290deg) brightness(30%) saturate(1000%);"></div>
  43. <!-- ❗ Character Image -->
  44.     <img style="position: absolute; bottom: 0; right: 0; max-height: 100%;"
  45. src="https://f2.toyhou.se/file/f2-toyhou-se/images/116206393_L2h3bLdF8k2y56D.png">
  46.          
  47.     <div class="row">
  48.         <!-- ------------
  49.             Information
  50.             ------------ -->
  51.         <div class="col-lg-6 col-12 mt-lg-4 mb-3 px-4 order-lg-first order-last"
  52.             style="font-family: sans-serif;
  53.                    font-size: .75em;
  54.                    letter-spacing: 1px;
  55.                    line-height: .8rem;
  56.                    color: #C9C8CC;">
  57.             <div class="row mx-1 no-gutters">
  58.                 <!-- Summary Section -->
  59.                 <div class="col-12">
  60.                     <div style="background-color: #BB85F1;
  61.                                height: 90%; width: 90%;
  62.                                position: absolute; top: 3%; left: 5%;
  63.                                transform: rotate(3deg);
  64.                                box-shadow: 0px 0px 5px black;"></div>
  65.                     <div class="card mx-1 my-2 p-3 rounded-0"
  66.                         style="background-image: linear-gradient(to right, #2F2630, #201A21, #2F2630);
  67.                                border: 1px solid #715D7D;
  68.                                box-shadow: 0px 0px 5px black;">
  69.                         <!-- Name Section -->
  70.                         <h1 style="font-family: Courier;
  71.                                   font-weight: bolder;
  72.                                   font-size: 1.1rem;
  73.                                   color: #FDF1D5;">
  74. <!-- ❗ Name -->
  75. First "Alias" Last
  76.                         </h1> <!-- End of Name Section -->
  77.                         <!-- Personality -->
  78.                         <div class="row ml-2 text-uppercase">
  79.                             <div class="col-auto mx-1 px-2 py-1" style="background-color: #11130E; color: #FDF1D5;">
  80. <!-- ❗ Personality Trait -->
  81. Some
  82.                             </div>
  83.                             <div class="col-auto mx-1 px-2 py-1" style="background-color: #11130E; color: #FDF1D5;">
  84. <!-- ❗ Personality Trait -->
  85. Personality
  86.                             </div>
  87.                             <div class="col-auto mx-1 px-2 py-1" style="background-color: #11130E; color: #FDF1D5;">
  88. <!-- ❗ Personality Trait -->
  89. Traits
  90.                             </div>
  91.                         </div>
  92.                         <!-- Summary -->
  93.                         <div class="mt-2">
  94. <!-- ❗ Summary -->
  95. <p>
  96. The brief overview of your character goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ultricies nisl vitae velit fermentum venenatis.
  97. </p>
  98. <p>
  99. Nulla finibus odio est, id eleifend metus pretium facilisis.  Etiam tincidunt sollicitudin ex, at pellentesque quam.
  100. </p>
  101.                         </div>
  102.                        
  103.                     </div>
  104.                     <div class="card-body">
  105.                        
  106.                     </div>
  107.                 </div> <!-- End of Summary Section -->
  108.                
  109.                 <!-- Stats Section -->
  110.                 <div class="col-4 px-1 text-center d-flex ">
  111.                     <div class="card rounded-0 flex-fill"
  112.                         style="background-image: linear-gradient(to right, #2F2630, #201A21, #2F2630);
  113.                                border: 1px solid #715D7D;
  114.                                box-shadow: 0px 0px 5px black;">
  115.                         <h1 class="card-header py-1 px-0"
  116.                            style="background-color: #11130E;
  117.                                   font-family: Courier;
  118.                                   font-weight: bolder;
  119.                                   font-size: 1rem;
  120.                                   color: #FDF1D5;">
  121.                             Gender
  122.                         </h1>
  123.                         <div class="card-body py-2">
  124. <!-- ❗ Gender -->
  125. gender | pronouns
  126.                         </div>
  127.                     </div>
  128.                 </div>
  129.                 <div class="col-4 px-1 text-center d-flex">
  130.                     <div class="card rounded-0 flex-fill"
  131.                         style="background-image: linear-gradient(to right, #2F2630, #201A21, #2F2630);
  132.                                border: 1px solid #715D7D;
  133.                                box-shadow: 0px 0px 5px black;">
  134.                         <h1 class="card-header py-1 px-0"
  135.                            style="background-color: #11130E;
  136.                                   font-family: Courier;
  137.                                   font-weight: bolder;
  138.                                   font-size: 1rem;
  139.                                   color: #FDF1D5;">
  140.                             Height
  141.                         </h1>
  142.                         <div class="card-body py-2">
  143. <!-- ❗ Height -->
  144. -'--" | --- cm
  145.                         </div>
  146.                     </div>
  147.                 </div>
  148.                 <div class="col-4 px-1 text-center d-flex">
  149.                     <div class="card rounded-0 flex-fill"
  150.                         style="background-image: linear-gradient(to right, #2F2630, #201A21, #2F2630);
  151.                                border: 1px solid #715D7D;
  152.                                box-shadow: 0px 0px 5px black;">
  153.                         <h1 class="card-header py-1 px-0"
  154.                            style="background-color: #11130E;
  155.                                   font-family: Courier;
  156.                                   font-weight: bolder;
  157.                                   font-size: 1rem;
  158.                                   color: #FDF1D5;">
  159.                             Weapon
  160.                         </h1>
  161.                         <div class="card-body py-2">
  162. <!-- ❗ Weapon -->
  163. name of weapon
  164.                         </div>
  165.                     </div>
  166.                 </div>
  167.                
  168.                 <!-- Kit Section -->
  169.                 <div class="row no-gutters my-3">
  170.                     <div class="col-auto my-auto">
  171.                         <span class="fa-stack fa-2x">
  172.                             <i class="fas fa-circle fa-stack-2x" style="color: #D91D65;"></i>
  173.                             <i class="fas fa-alicorn fa-stack-1x" style="color: #fcf8f0;"></i>
  174.                         </span>
  175.                     </div>
  176.                     <div class="col order-lg-last order-last text-left">
  177.                         <h1 class="mb-0" style="font-family: Courier;
  178.                                   font-weight: bolder;
  179.                                   font-size: 1.1rem;
  180.                                   color: #FDF1D5;">
  181. <!-- ❗ Ability Name -->
  182. Ability Name
  183.                         </h1>
  184. <!-- ❗ Ability Description -->
  185. <p>
  186. Ability description goes here. <span style="color: #FDF1D5; font-weight: bolder;">Highlight</span> important aspects. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  187. </p>
  188.                     </div>
  189.                 </div>
  190.                 <div class="row no-gutters mb-3">
  191.                     <div class="col-auto my-auto">
  192.                         <span class="fa-stack fa-2x">
  193.                             <i class="fas fa-circle fa-stack-2x" style="color: #D91D65;"></i>
  194.                             <i class="fas fa-alicorn fa-stack-1x" style="color: #fcf8f0;"></i>
  195.                         </span>
  196.                     </div>
  197.                     <div class="col order-lg-first order-last text-lg-right text-left">
  198.                         <h1 class="mb-0" style="font-family: Courier;
  199.                                   font-weight: bolder;
  200.                                   font-size: 1.1rem;
  201.                                   color: #FDF1D5;">
  202. <!-- ❗ Ability Name -->
  203. Ability Name
  204.                         </h1>
  205. <!-- ❗ Ability Description -->
  206. <p>
  207. Ability description goes here. <span style="color: #FDF1D5; font-weight: bolder;">Highlight</span> important aspects. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  208. </p>
  209.                     </div>
  210.                 </div>
  211.                 <div class="row no-gutters mb-3">
  212.                     <div class="col-auto my-auto">
  213.                         <span class="fa-stack fa-2x">
  214.                             <i class="fas fa-circle fa-stack-2x" style="color: #D91D65;"></i>
  215.                             <i class="fas fa-alicorn fa-stack-1x" style="color: #fcf8f0;"></i>
  216.                         </span>
  217.                     </div>
  218.                     <div class="col order-lg-last order-last text-left">
  219.                         <h1 class="mb-0" style="font-family: Courier;
  220.                                   font-weight: bolder;
  221.                                   font-size: 1.1rem;
  222.                                   color: #FDF1D5;">
  223. <!-- ❗ Ability Name -->
  224. Ability Name
  225.                         </h1>
  226. <!-- ❗ Ability Description -->
  227. <p>
  228. Ability description goes here. <span style="color: #FDF1D5; font-weight: bolder;">Highlight</span> important aspects. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  229. </p>
  230.                     </div>
  231.                 </div>
  232.                 <div class="row no-gutters mb-3">
  233.                     <div class="col-auto my-auto">
  234.                         <span class="fa-stack fa-2x">
  235.                             <i class="fas fa-circle fa-stack-2x" style="color: #D91D65;"></i>
  236.                             <i class="fas fa-alicorn fa-stack-1x" style="color: #fcf8f0;"></i>
  237.                         </span>
  238.                     </div>
  239.                     <div class="col order-lg-first order-last text-lg-right text-left">
  240.                         <h1 class="mb-0" style="font-family: Courier;
  241.                                   font-weight: bolder;
  242.                                   font-size: 1.1rem;
  243.                                   color: #FDF1D5;">
  244. <!-- ❗ Ability Name -->
  245. Ability Name
  246.                         </h1>
  247. <!-- ❗ Ability Description -->
  248. <p>
  249. Ability description goes here. <span style="color: #FDF1D5; font-weight: bolder;">Highlight</span> important aspects. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  250. </p>
  251.                     </div>
  252.                 </div>
  253.                
  254.             </div>
  255.         </div> <!-- End of Information -->
  256.        
  257.         <!-- ------------
  258.             Splash Side
  259.             ------------ -->
  260.         <div class="col-lg-6 col-12 p-4
  261.                    justify-content-lg-end justify-content-center
  262.                    align-content-lg-end align-content-center
  263.                    flex-wrap text-center">
  264.             <div class="text-center"
  265.                 style="color: #FDF1D5;">
  266.                
  267. <!-- You can replace this h1 block with an <img class="img-fluid" src=""> -->
  268.                 <!-- Name Section -->
  269.                 <h1 style="font-family: Arial Black;
  270.                           font-size: 3em;
  271.                           font-weight: bolder;">
  272. <!-- ❗ Name Art -->
  273. NAME ART
  274.                 </h1> <!-- End of Name Section -->
  275. <!-- End of the name block you'd replace with an image... -->
  276.                
  277.                 <!-- Traits Section -->
  278.                 <div class="row justify-content-center text-uppercase"
  279.                     style="font-weight: bold;">
  280.                     <div class="col-auto p-1">
  281.                         <div class="px-2"
  282.                             style="transform: rotate(5deg);
  283.                                    background-color: #D91D65;
  284.                                    color: #fcf8f0;">
  285.                             <div style="transform: rotate(-2deg);">
  286. <!-- ❗ Role -->
  287. Role
  288.                             </div>
  289.                         </div>
  290.                     </div>
  291.                     <div class="col-auto p-1">
  292.                         <div class="px-2"
  293.                             style="transform: rotate(-2deg);
  294.                                    background-color: #D91D65;
  295.                                    color: #fcf8f0;">
  296.                             <div style="transform: rotate(2deg);">
  297. <!-- ❗ Playstyle -->
  298. Playstyle
  299.                             </div>
  300.                         </div>
  301.                     </div>
  302.                     <div class="col-auto p-1">
  303.                         <div class="px-2"
  304.                             style="transform: rotate(-6deg);
  305.                                    background-color: #D91D65;
  306.                                    color: #fcf8f0;">
  307.                             <div style="transform: rotate(-1deg);">
  308. <!-- ❗ Trait -->
  309. Trait
  310.                             </div>
  311.                         </div>
  312.                     </div>
  313.                 </div> <!-- End of Traits Section -->
  314.                
  315.                 <!-- Quote Section -->
  316.                 <div class="mt-2 text-uppercase"
  317.                     style="font-family: Courier;
  318.                            font-weight: bolder;
  319.                            font-size: 1.1rem;
  320.                            letter-spacing: 1px;">
  321. <!-- ❗ Quote -->
  322. "Character quote goes here."
  323.                 </div> <!-- End of Quote Section -->
  324.                
  325.             </div>
  326.         </div> <!-- End of Splash Side -->
  327.        
  328.     </div>
  329. </div>
  330. <div class="container text-right"><a href="https://toyhou.se/38106617.deadlock-character-splash"><span data-toggle="tooltip" title="code by junijwi"><i class="fas fa-code fa-sm"></i></span></a></div>
Tags: toyhouse
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!