API tools faq
paste
Advertisement
MCDogWarrior

Artfight Card

MCDogWarrior
Jun 24th, 2022
1,000
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 11.39 KB | None | 0 0
raw download clone embed print report
  1. <!-----
  2. Color guide (I may have missed some):
  3. Main text + borders #4694b5 / Bold text #2a2a2d / Other text #467294
  4. Main boxes #B8daea / Secondary boxes #81b5d4 / Transluscent (37,150,190,.6)
  5.  
  6. DOES NOT WORK ON ARTFIGHT! AF uses a different type of code than TH; this is exclusively for sites that use Bootstrap coding
  7. ----->
  8.  
  9. <div class="container text-white my-2 mt-5" style="width:1000px; font-family: comic sans ms,sans-serif">
  10. <!----- Background image ----->
  11.  <div class="card p-2 rounded-0" style="background-image:url( imglink ); background-size:cover; background-position: center; border-radius:10px; border:2px solid rgba(255,255,2550,.2)">
  12. <!----- Gradient card ----->
  13.   <div class="card rounded-0 border-0 p-1" style="background:linear-gradient(to bottom,rgba(192,195,199,0.2),rgba(153,156,162,0)); height:660px;">
  14.    <div class="row no-gutters">
  15.  <!---- Profile picture ---->
  16.     <div class="col-4 p-1">
  17.      <div class="card rounded-circle ml-3 mt-3" style="background-image:url( imglink ); background-size:cover; background-position: center; height:250px; width:250px; border-left:5px solid #4694b5; border-bottom:5px solid #4694b5">
  18.   <!--- Badge over pfp --->
  19.      <img style="height:150px; width:100px; margin-top:150px; margin-left:-20px" src=" imglink ">
  20.       </div>
  21.      </div>
  22.      <div class="col-6 p-1">
  23.   <!--- Team label
  24.  (change NAME with the team name, you may need to adjust the font size) --->
  25.       <div class="card rounded-0 border-0 mt-3 p-1 mx-1" style="background-color:rgba(153,156,162,0.5); height:60px; border-radius:10px;">
  26.       <p style="font-size:65px; margin-top:-25px; text-align:center; color:#4694b5"><b><span style="color:#2a2a2d">TEAM </span>NAME</b></p>
  27.       </div>
  28.   <!--- Username box --->
  29.       <div class="card rounded-0 border-0 mt-3" style="background-color:#B8daea; height:60px; border-radius:10px;">
  30.        <div class="row no-gutters">
  31.         <div class="col-3">
  32.          <div class="card rounded-0 border-0 p-1" style="background-color:#81b5d4; height:60px; border-bottom-left-radius:10px; border-top-left-radius:10px;">
  33.          <p style="font-size:40px; text-align:center; font-family:arial; margin-top:-5px; color:#2a2a2d">User:</p>
  34.          </div>
  35.         </div>
  36.    <!-- Username (linked to AF) -->
  37.         <div class="col-9">
  38.         <p style="font-size:40px; text-align:center"><a href=" linkhere " style="color:#467294">username</a></p>
  39.         </div>
  40.        </div>
  41.       </div>
  42.   <!--- Will + Wont draws --->
  43.       <div class="row no-gutters mt-2">
  44.        <div class="col-6 pr-1">
  45.         <div class="card rounded-0 border-0" style="background-color:#B8daea; height:60px; border-bottom-left-radius:10px; border-top-left-radius:10px; height:150px">
  46.          <div class="card rounded-0 border-0 p-1" style="background-color:#81b5d4; height:40px; border-top-left-radius:10px;">
  47.    <!-- Will draw -->
  48.          <p style="font-size:30px; text-align:center; font-family:arial; margin-top:-5px; color:#2a2a2d">Will draw...</p>
  49.          </div>
  50.         <p style="font-size:18px; text-align:center; color:#467294">Lorem, ipsum, dolor, sit amet, consectetur, adipiscing, elit</p>
  51.         </div>
  52.        </div>
  53.  
  54.        <div class="col-6 pl-1">
  55.         <div class="card rounded-0 border-0" style="background-color:#B8daea; height:60px; border-bottom-right-radius:10px; border-top-right-radius:10px; height:150px">
  56.          <div class="card rounded-0 border-0 p-1" style="background-color:#81b5d4; height:40px; border-top-right-radius:10px;">
  57.    <!-- Can't/Won't draw -->
  58.          <p style="font-size:30px; text-align:center; font-family:arial; margin-top:-5px; color:#2a2a2d">Can't draw...</p>
  59.          </div>
  60.          <p style="font-size:18px; text-align:center; color:#467294">sed do, eiusmod, tempor, incididunt, ut labore, et dolore, magna, aliqua</p>
  61.          </div>
  62.         </div>
  63.        </div>
  64.       </div>
  65.  
  66.       <div class="col-2 pr-1">
  67.    <!-- Arfight Actions
  68.   (Instead of Xing them out, you just delete the ones you don't do) -->
  69.        <div class="card border-0" style="background-color:rgba(0,0,0,0); margin-top:30px;">
  70.        <p style="font-size:25px; color:#4694b5; font-family:arial;"><b>I DO:</b></p>
  71.     <!-- Friendly fire -->
  72.         <div class="card rounded-0 border-0 p-1" style="background-color:rgba(37,150,190,.6); height:40px; border-radius:5px;">
  73.         <p style="font-size:23px; text-align:center; margin-top:-3px; color:#2a2a2d">Friendly Fire</p>
  74.         </div>
  75.     <!-- Revenge -->
  76.         <div class="card rounded-0 border-0 p-1 mt-2" style="background-color:rgba(37,150,190,.6); height:40px; border-radius:5px;">
  77.         <p style="font-size:23px; text-align:center; margin-top:-3px; color:#2a2a2d">Revenge</p>
  78.         </div>
  79.     <!-- (end) -->
  80.        </div>
  81.        
  82.    <!-- Art mediums
  83.   (Only fits 2,- unless you delete one of the 'I do's- so just put the main ones you do)-->
  84.        <div class="card border-0 mt-1" style="background-color:rgba(0,0,0,0);">
  85.        <p style="font-size:25px; color:#4694b5; font-family:arial;"><b>MED:</b></p>
  86.     <!-- First medium -->
  87.         <div class="card rounded-0 border-0 p-1" style="background-color:rgba(37,150,190,.6); height:40px; border-radius:5px;">
  88.         <p style="font-size:23px; text-align:center; margin-top:-3px; color:#2a2a2d"> medium </p>
  89.         </div>
  90.     <!-- Second medium -->
  91.         <div class="card rounded-0 border-0 p-1 mt-2" style="background-color:rgba(37,150,190,.6); height:40px; border-radius:5px;">
  92.         <p style="font-size:23px; text-align:center; margin-top:-3px; color:#2a2a2d"> medium </p>
  93.         </div>
  94.     <!-- (end) -->
  95.        </div>
  96.       </div>
  97.      </div>
  98.  
  99.   <!--- Featured characters --->
  100.      <div class="card rounded-0 border-0 p-1" style="background:linear-gradient(to bottom,rgba(192,195,199,0.2),rgba(153,156,162,0)); height:230px; border-radius:10px;">
  101.       <div class="mx-auto w-100 my-2" style="border-top:2px solid #999; opacity:.2;"></div>
  102.       <p class="ml-4" style="font-size:35px; color:#4694b5"><b>FEATURED:</b></p>
  103.    <!-- Other characters (link to your TH 'all' arrangement) -->
  104.       <p class="mr-2" style="font-size:25px; text-align:right; margin-top:-55px"><a href=" linkhere " style="color:#467294">Other characters</a></p>
  105.        <div class="row no-gutters">
  106.    <!-- First character -->
  107.        <div class="col p-1 mx-auto">
  108.         <div class="card" style="background-image:url( imglink ); background-size:cover; background-position: center; border:3px solid #4694b5; width:175px; height:175px;">
  109.         </div>
  110.     <!-- Link (all the way at the end) -->    
  111.        <a class="btn btn-outline-primary rounded-0" style="height:169px; width:169px; border-width:0px; position:absolute; top:7px; left:7px; mix-blend-mode:overlay" href=" linkhere "></a>
  112.        </div>
  113.    <!-- Second character -->
  114.         <div class="col p-1 mx-auto">
  115.     <!-- Profile picture -->
  116.          <div class="card" style="background-image:url( imglink ); background-size:cover; background-position: center; border:3px solid #4694b5; width:175px; height:175px;">
  117.          </div>
  118.     <!-- Link -->    
  119.         <a class="btn btn-outline-primary rounded-0" style="height:169px; width:169px; border-width:0px; position:absolute; top:7px; left:7px; mix-blend-mode:overlay" href=" linkhere "></a>
  120.         </div>
  121.    <!-- Third character -->
  122.         <div class="col p-1 mx-auto">
  123.     <!-- Profile picture -->        
  124.          <div class="card" style="background-image:url( imglink ); background-size:cover; background-position: center; border:3px solid #4694b5; width:175px; height:175px;">
  125.          </div>
  126.     <!-- Link -->    
  127.         <a class="btn btn-outline-primary rounded-0" style="height:169px; width:169px; border-width:0px; position:absolute; top:7px; left:7px; mix-blend-mode:overlay" href=" linkhere "></a>
  128.         </div>
  129.    <!-- Fourth character -->
  130.         <div class="col p-1 mx-auto">
  131.     <!-- Profile picture -->
  132.          <div class="card" style="background-image:url( imglink ); background-size:cover; background-position: center; border:3px solid #4694b5; width:175px; height:175px;">
  133.          </div>
  134.     <!-- Link -->  
  135.         <a class="btn btn-outline-primary rounded-0" style="height:169px; width:169px; border-width:0px; position:absolute; top:7px; left:7px; mix-blend-mode:overlay" href=" linkhere "></a>
  136.         </div>
  137.    <!-- Fifth character -->
  138.         <div class="col p-1 mx-auto">
  139.     <!-- Profile picture -->
  140.          <div class="card" style="background-image:url( imglink ); background-size:cover; background-position: center; border:3px solid #4694b5; width:175px; height:175px;">
  141.          </div>
  142.     <!-- Link -->  
  143.          <a class="btn btn-outline-primary rounded-0" style="height:169px; width:169px; border-width:0px; position:absolute; top:7px; left:7px; mix-blend-mode:overlay" href=" linkhere "></a>
  144.          </div>
  145.         </div>
  146.   <!--- Types of characters --->
  147.         <div class="card rounded-0 border-0 p-1 mt-2" style="background-color:rgba(37,150,190,.6); height:25px; width:300px; border-radius:20px;">
  148.          <p style="font-size:16px; text-align:center; margin-top:-3px; color:#2a2a2d">TYPES OF CHARACTERS I HAVE:</p>
  149.          </div>
  150.   <!-- Labels
  151.  (it autoadjusts when one is removed/added, just make sure not to crush the text) -->
  152.         <div class="row no-gutters">
  153.   <!-- Type one -->
  154.          <div class="col p-1 mx-auto">
  155.           <div class="card rounded-0 border-0 p-1" style="background-color:#B8daea; height:40px; border-radius:5px;">
  156.           <p style="font-size:23px; text-align:center; margin-top:-3px; color:#2a2a2d"> type </p>
  157.           </div>
  158.          </div>
  159.   <!-- Type two -->
  160.         <div class="col p-1 mx-auto">
  161.          <div class="card rounded-0 border-0 p-1" style="background-color:#B8daea; height:40px; border-radius:5px;">
  162.          <p style="font-size:23px; text-align:center; margin-top:-3px; color:#2a2a2d"> type </p>
  163.          </div>
  164.         </div>
  165.   <!-- Type three -->
  166.         <div class="col p-1 mx-auto">
  167.          <div class="card rounded-0 border-0 p-1" style="background-color:#B8daea; height:40px; border-radius:5px;">
  168.          <p style="font-size:23px; text-align:center; margin-top:-3px; color:#2a2a2d"> type </p>
  169.          </div>
  170.         </div>
  171.   <!-- Type four -->
  172.         <div class="col p-1 mx-auto">
  173.          <div class="card rounded-0 border-0 p-1" style="background-color:#B8daea; height:40px; border-radius:5px;">
  174.          <p style="font-size:23px; text-align:center; margin-top:-3px; color:#2a2a2d"> type </p>
  175.          </div>
  176.         </div>
  177.   <!-- Type five -->
  178.         <div class="col p-1 mx-auto">
  179.          <div class="card rounded-0 border-0 p-1" style="background-color:#B8daea; height:40px; border-radius:5px;">
  180.          <p style="font-size:23px; text-align:center; margin-top:-3px; color:#2a2a2d"> type </p>
  181.          </div>
  182.         </div>
  183.   <!-- Type six -->
  184.         <div class="col p-1 mx-auto">
  185.          <div class="card rounded-0 border-0 p-1" style="background-color:#B8daea; height:40px; border-radius:5px;">
  186.          <p style="font-size:23px; text-align:center; margin-top:-3px; color:#2a2a2d"> type </p>
  187.          </div>
  188.         </div>
  189.   <!-- (add more below this) -->
  190.        </div>
  191.       </div>
  192.      </div>
  193.     </div>
  194.  <!--- Code credit (do not remove/alter) --->
  195.    <p style="font-size:13px; text-align:center; position:absolute; left:30px; top:15px; opacity:.5"><a style="color:#c4415d;" href="https://toyhou.se/MCDogResource"><i class="fas fa-bullseye"></i> Code by maniCARNY</a></p>
  196.    </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!