Artfight Card [C] HTML (Custom code)

<!----- 

Color guide (I may have missed some):

Main text + borders #4694b5 / Bold text #2a2a2d / Other text #467294

Main boxes #B8daea / Secondary boxes #81b5d4 / Transluscent (37,150,190,.6)

DOES NOT WORK ON ARTFIGHT! AF uses a different type of code than TH; this is exclusively for sites that use Bootstrap coding

----->

<div class="container text-white my-2 mt-5" style="width:1000px; font-family: comic sans ms,sans-serif">

<!----- Background image ----->

 <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)">

<!----- Gradient card ----->

  <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;">

   <div class="row no-gutters">

 <!---- Profile picture ---->

    <div class="col-4 p-1">

     <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">

  <!--- Badge over pfp --->

     <img style="height:150px; width:100px; margin-top:150px; margin-left:-20px" src=" imglink ">

      </div>

     </div>

     <div class="col-6 p-1">

  <!--- Team label 

  (change NAME with the team name, you may need to adjust the font size) --->

      <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;">

      <p style="font-size:65px; margin-top:-25px; text-align:center; color:#4694b5"><b><span style="color:#2a2a2d">TEAM </span>NAME</b></p>

      </div>

  <!--- Username box --->

      <div class="card rounded-0 border-0 mt-3" style="background-color:#B8daea; height:60px; border-radius:10px;">

       <div class="row no-gutters">

        <div class="col-3">

         <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;">

         <p style="font-size:40px; text-align:center; font-family:arial; margin-top:-5px; color:#2a2a2d">User:</p>

         </div>

        </div>

   <!-- Username (linked to AF) -->

        <div class="col-9">

        <p style="font-size:40px; text-align:center"><a href=" linkhere " style="color:#467294">username</a></p>

        </div>

       </div>

      </div>

  <!--- Will + Wont draws --->

      <div class="row no-gutters mt-2">

       <div class="col-6 pr-1">

        <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">

         <div class="card rounded-0 border-0 p-1" style="background-color:#81b5d4; height:40px; border-top-left-radius:10px;">

   <!-- Will draw -->

         <p style="font-size:30px; text-align:center; font-family:arial; margin-top:-5px; color:#2a2a2d">Will draw...</p>

         </div>

        <p style="font-size:18px; text-align:center; color:#467294">Lorem, ipsum, dolor, sit amet, consectetur, adipiscing, elit</p>

        </div>

       </div>

       <div class="col-6 pl-1">

        <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">

         <div class="card rounded-0 border-0 p-1" style="background-color:#81b5d4; height:40px; border-top-right-radius:10px;">

   <!-- Can't/Won't draw -->

         <p style="font-size:30px; text-align:center; font-family:arial; margin-top:-5px; color:#2a2a2d">Can't draw...</p>

         </div>

         <p style="font-size:18px; text-align:center; color:#467294">sed do, eiusmod, tempor, incididunt, ut labore, et dolore, magna, aliqua</p>

         </div>

        </div>

       </div>

      </div>

      <div class="col-2 pr-1">

   <!-- Arfight Actions

   (Instead of Xing them out, you just delete the ones you don't do) -->

       <div class="card border-0" style="background-color:rgba(0,0,0,0); margin-top:30px;">

       <p style="font-size:25px; color:#4694b5; font-family:arial;"><b>I DO:</b></p>

    <!-- Friendly fire -->

        <div class="card rounded-0 border-0 p-1" style="background-color:rgba(37,150,190,.6); height:40px; border-radius:5px;">

        <p style="font-size:23px; text-align:center; margin-top:-3px; color:#2a2a2d">Friendly Fire</p>

        </div>

    <!-- Revenge -->

        <div class="card rounded-0 border-0 p-1 mt-2" style="background-color:rgba(37,150,190,.6); height:40px; border-radius:5px;">

        <p style="font-size:23px; text-align:center; margin-top:-3px; color:#2a2a2d">Revenge</p>

        </div>

    <!-- (end) -->

       </div>

   <!-- Art mediums

   (Only fits 2,- unless you delete one of the 'I do's- so just put the main ones you do)-->

       <div class="card border-0 mt-1" style="background-color:rgba(0,0,0,0);">

       <p style="font-size:25px; color:#4694b5; font-family:arial;"><b>MED:</b></p>

    <!-- First medium -->

        <div class="card rounded-0 border-0 p-1" style="background-color:rgba(37,150,190,.6); height:40px; border-radius:5px;">

        <p style="font-size:23px; text-align:center; margin-top:-3px; color:#2a2a2d"> medium </p>

        </div>

    <!-- Second medium -->

        <div class="card rounded-0 border-0 p-1 mt-2" style="background-color:rgba(37,150,190,.6); height:40px; border-radius:5px;">

        <p style="font-size:23px; text-align:center; margin-top:-3px; color:#2a2a2d"> medium </p>

        </div>

    <!-- (end) -->

       </div>

      </div>

     </div>

  <!--- Featured characters --->

     <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;">

      <div class="mx-auto w-100 my-2" style="border-top:2px solid #999; opacity:.2;"></div>

      <p class="ml-4" style="font-size:35px; color:#4694b5"><b>FEATURED:</b></p>

   <!-- Other characters (link to your TH 'all' arrangement) -->

      <p class="mr-2" style="font-size:25px; text-align:right; margin-top:-55px"><a href=" linkhere " style="color:#467294">Other characters</a></p>

       <div class="row no-gutters">

   <!-- First character -->

       <div class="col p-1 mx-auto">

        <div class="card" style="background-image:url( imglink ); background-size:cover; background-position: center; border:3px solid #4694b5; width:175px; height:175px;">

        </div>

    <!-- Link (all the way at the end) -->    

       <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>

       </div>

   <!-- Second character -->

        <div class="col p-1 mx-auto">

    <!-- Profile picture -->

         <div class="card" style="background-image:url( imglink ); background-size:cover; background-position: center; border:3px solid #4694b5; width:175px; height:175px;">

         </div>

    <!-- Link -->    

        <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>

        </div>

   <!-- Third character -->

        <div class="col p-1 mx-auto">

    <!-- Profile picture -->         

         <div class="card" style="background-image:url( imglink ); background-size:cover; background-position: center; border:3px solid #4694b5; width:175px; height:175px;">

         </div>

    <!-- Link -->    

        <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>

        </div>

   <!-- Fourth character -->

        <div class="col p-1 mx-auto">

    <!-- Profile picture -->

         <div class="card" style="background-image:url( imglink ); background-size:cover; background-position: center; border:3px solid #4694b5; width:175px; height:175px;">

         </div>

    <!-- Link -->  

        <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>

        </div>

   <!-- Fifth character -->

        <div class="col p-1 mx-auto">

    <!-- Profile picture -->

         <div class="card" style="background-image:url( imglink ); background-size:cover; background-position: center; border:3px solid #4694b5; width:175px; height:175px;">

         </div>

    <!-- Link -->  

         <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>

         </div>

        </div>

  <!--- Types of characters --->

        <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;">

         <p style="font-size:16px; text-align:center; margin-top:-3px; color:#2a2a2d">TYPES OF CHARACTERS I HAVE:</p>

         </div>

  <!-- Labels

  (it autoadjusts when one is removed/added, just make sure not to crush the text) -->

        <div class="row no-gutters">

  <!-- Type one -->

         <div class="col p-1 mx-auto">

          <div class="card rounded-0 border-0 p-1" style="background-color:#B8daea; height:40px; border-radius:5px;">

          <p style="font-size:23px; text-align:center; margin-top:-3px; color:#2a2a2d"> type </p>

          </div>

         </div>

  <!-- Type two -->

        <div class="col p-1 mx-auto">

         <div class="card rounded-0 border-0 p-1" style="background-color:#B8daea; height:40px; border-radius:5px;">

         <p style="font-size:23px; text-align:center; margin-top:-3px; color:#2a2a2d"> type </p>

         </div>

        </div>

  <!-- Type three -->

        <div class="col p-1 mx-auto">

         <div class="card rounded-0 border-0 p-1" style="background-color:#B8daea; height:40px; border-radius:5px;">

         <p style="font-size:23px; text-align:center; margin-top:-3px; color:#2a2a2d"> type </p>

         </div>

        </div>

  <!-- Type four -->

        <div class="col p-1 mx-auto">

         <div class="card rounded-0 border-0 p-1" style="background-color:#B8daea; height:40px; border-radius:5px;">

         <p style="font-size:23px; text-align:center; margin-top:-3px; color:#2a2a2d"> type </p>

         </div>

        </div>

  <!-- Type five -->

        <div class="col p-1 mx-auto">

         <div class="card rounded-0 border-0 p-1" style="background-color:#B8daea; height:40px; border-radius:5px;">

         <p style="font-size:23px; text-align:center; margin-top:-3px; color:#2a2a2d"> type </p>

         </div>

        </div>

  <!-- Type six -->

        <div class="col p-1 mx-auto">

         <div class="card rounded-0 border-0 p-1" style="background-color:#B8daea; height:40px; border-radius:5px;">

         <p style="font-size:23px; text-align:center; margin-top:-3px; color:#2a2a2d"> type </p>

         </div>

        </div>

  <!-- (add more below this) -->

       </div>

      </div>

     </div>

    </div>

 <!--- Code credit (do not remove/alter) --->

   <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>

   </div>