Asya: AI Code

<div class="row justify-content-center text-monospace ">
<div class="col-flex p-4 pt-4" style="background-image:url(https://png.pngtree.com/background/20220727/original/pngtree-abstract-technology-background-matrix-code-picture-image_1833754.jpg);background-size:cover; background-position: center;">

    <div class="row justify-content-center">
        <div class="col justify-content-center mt-2 pt-4">
            <div class="rounded-circle m-3 ml-lg-2 shadow" style="height:210px;width:210px;background-color:rgba(0, 108, 130,0.2);border:5px dashed rgba(0, 108, 130,1)">
            <div class="rounded-circle" style="

            background-image:url(PROFILE IMAGE URL HERE)

            ;background-size:cover;height:200px;width:200px;border:8px solid rgba(0, 108, 130,1);border-style:ridge;">
                <i class="fas fa-globe fa-spin fa-3x" style="margin-left:auto;margin-right:auto;animation-duration:5s;padding:40px;color:rgba(69, 196, 222,1);"></i>
                <i class="fas fa-computer fa-spin" style="margin-left:auto;margin-right:auto;animation-duration:20s;padding:30px;padding-left:120px;color:rgba(69, 196, 222,1);"></i>
                <p style="color:#006c82;background-color:#FFFFFF;font-size:16px;font-weight:bold;padding:4px;margin:3px;width:180px;text-align:center;align-self:flex-end">

                Team A.I.

            <p>
                <p style="color:#006c82;font-size:11px;margin:3px;width:180px;text-align:center;align-self:flex-end">
                <a href="https://toyhou.se/suitcasedragon/characters/folder:1942861" title="code by kale / suitcasedragon" class="tooltipster text-center mt-1"><i class="far fa-code fa-2xs"></i></a>
                </p>
            </div>
            </div>
        </div><!--end col 1-->

        <div class="tab-content">


    <div class="tab-pane fade in active show" id="info">
        <div class="col-fluid text-light p-3 my-3" style="border-radius:25px;border:5px solid rgba(0, 108, 130,1);border-style:dotted;width:300px;height:310px;background-color:rgba(250,250,250,0.6);">
            <p>
                <span class="my-3 px-2 rounded text-uppercase" style="background-color:rgba(0, 108, 130,1);border-radius:25px;font-size:20px">User:</span>

                <span class="mt-n2" style="font-size:20px;">

                    <a style="color:rgba(0, 108, 130,1);">

                        Username

                    </a></span>
            </p>

            <p style="width:250px;height:overflow:auto;">
                <span class="my-3 px-2 rounded text-uppercase" style="background-color:rgba(0, 108, 130,1);border-radius:25px;font-size:16px">I attack:</span><br>

                <span style="font-size:13px;color:rgba(0, 108, 130,1);"><b>

                        General themes, character types, etc.
                    <br>Good place to mention friendly fire
                    <br>Does not scroll

                    </b></span>
            </p>
        </div><!--end info tab-->
    </div>


    <div class="tab-pane fade" id="char">
        <div class="col-fluid text-light p-3 my-3" style="border-radius:25px;border:5px solid rgba(0, 108, 130,1);border-style:dotted;width:300px;height:310px;background-color:rgba(250,250,250,0.6);">

    <div class="row no-gutters mx-n2">
      <div class="col-4 px-2 text-center">
        <a href="CHARACTER_LINK">
          <img src="https://i.imgur.com/4XgGUtW.png"
          class="rounded" style="max-height: 150px; border-radius: 16px;">
        </a>
      </div>
      <div class="col-4 px-2 text-center">
        <a href="CHARACTER_LINK">
          <img src="https://i.imgur.com/4XgGUtW.png"
          class="rounded" style="max-height: 150px; border-radius: 16px;">
        </a>
      </div>
      <div class="col-4 px-2 text-center">
        <a href="CHARACTER_LINK">
          <img src="https://i.imgur.com/4XgGUtW.png"
          class="rounded" style="max-height: 150px; border-radius: 16px;">
        </a>
      </div>
      </div><br>

    <div class="row no-gutters mx-n2">
      <div class="col-4 px-2 text-center">
        <a href="CHARACTER_LINK">
          <img src="https://i.imgur.com/4XgGUtW.png"
          class="rounded" style="max-height: 150px; border-radius: 16px;">
        </a>
      </div>
      <div class="col-4 px-2 text-center">
        <a href="CHARACTER_LINK">
          <img src="https://i.imgur.com/4XgGUtW.png"
          class="rounded" style="max-height: 150px; border-radius: 16px;">
        </a>
      </div>
      <div class="col-4 px-2 text-center">
        <a href="CHARACTER_LINK">
          <img src="https://i.imgur.com/4XgGUtW.png"
          class="rounded" style="max-height: 150px; border-radius: 16px;">
        </a>
      </div>
      </div><br>

    <div class="row no-gutters mx-n2">
      <div class="col-4 px-2 text-center">
        <a href="CHARACTER_LINK">
          <img src="https://i.imgur.com/4XgGUtW.png"
          class="rounded" style="max-height: 150px; border-radius: 16px;">
        </a>
      </div>
      <div class="col-4 px-2 text-center">
        <a href="CHARACTER_LINK">
          <img src="https://i.imgur.com/4XgGUtW.png"
          class="rounded" style="max-height: 150px; border-radius: 16px;">
        </a>
      </div>
      <div class="col-4 px-2 text-center">
        <a href="CHARACTER_LINK">
          <img src="https://i.imgur.com/4XgGUtW.png"
          class="rounded" style="max-height: 150px; border-radius: 16px;">
        </a>
      </div>
      </div><br>

        </div><!--end character tab-->
    </div>

        </div><!--end col 2-->


        <div class="col-lg-1 align-items-center justify-content-center" style="margin-left:10px;">
            <div class="w-110" style="position: absolute;">
            <ul class="nav row no-gutters justify-content-center">
                <li>
                    <i class="fas fa-print fa-spin fa-2x p-2" style="border-radius:25px;border:5px solid rgba(0, 108, 130,1);border-style:dotted;animation-duration:10s;animation-direction:reverse;color:rgba(0, 108, 130,1);"></i>
                </li>
                <li class="nav-item pt-1">
                    <a class="nav-link active" data-toggle="tab" href="#info"><i class="fas fa-info-circle fa-spin fa-2x p-2" style="border-radius:25px;border:5px solid rgba(0, 108, 130,1);border-style:dotted;animation-duration:0s;animation-direction:reverse;color:rgba(0, 108, 130,1);"></i></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-toggle="tab" href="#char"><i class="fas fa-user-circle fa-spin fa-2x p-2" style="border-radius:25px;border:5px solid rgba(0, 108, 130,1);border-style:dotted;animation-duration:0s;animation-direction:reverse;color:rgba(0, 108, 130,1);"></i></a>
                </li>
                <li class="pt-1">
                    <i class="fas fa-server fa-spin fa-2x p-2" style="border-radius:25px;border:5px solid rgba(0, 108, 130,1);border-style:dotted;animation-duration:10s;animation-direction:reverse;color:rgba(0, 108, 130,1);"></i>
                </li>
            </ul>
            </div>
        </div>


        <div class="w-400">
            <div class="mx-3">
            </div>
        </div>

    </div><!--end row-->

</div><!--end container-->
</div>