Genshin edit

<!--------------------------------------------------------------------------------

SPLASH profile by JUNI

This profile is based off the character splash pages on the MIHOYO website and
I do not claim the design as something of my original creation. That being
said, it is offered for free and should not be resold/redistributed for money.
You are free to edit it!

Please edit the code with WYSIWYG turned off and Code Editor turned on.
I personally recommend editing the code in a code editor like Visual Studio Code
OR using the very handy live-preview website:
https://th.circlejourney.net/
You may alter/relocate/restyle coding credit, but please do not remove it.

-------------------------------------------------------------------------------->

<div class="container px-0 py-0" style="max-width: 1200px; background-color: black; border-radius: 10px;">
<!--------------------------------------------------------------------------------

FOR BACKGROUND IMAGE
It is set to be left-aligned, non-repeating. You'll want something at least 650 x 710 px.
You can alter the positioning if you'd like by changing the "background-position" to "center".

GENSHIN COUNTRIES
Mondstadt, Daytime https://uploadstatic-sea.mihoyo.com/contentweb/20200211/2020021114281584004.jpg
Mondstadt, Evening https://uploadstatic-sea.mihoyo.com/contentweb/20200211/2020021114281985438.jpg
Liyue, Daytime https://uploadstatic-sea.mihoyo.com/contentweb/20200526/2020052612332812636.jpg
Liyue, Evening https://uploadstatic-sea.mihoyo.com/contentweb/20200526/2020052612332536813.jpg
Inazuma, Daytime https://uploadstatic-sea.mihoyo.com/contentweb/20210715/2021071516521972191.jpg
Inazuma, Evening https://uploadstatic-sea.mihoyo.com/contentweb/20210715/2021071516524062780.jpg

-------------------------------------------------------------------------------->
<div class="container" style="max-width: 1200px; background-image: url('https://uploadstatic-sea.mihoyo.com/contentweb/20210715/2021071516524062780.jpg'); background-repeat: no-repeat; background-position: left; border-radius: 10px; overflow: hidden;">

<!-- Decorative Shapes -->
<div class="d-lg-flex d-none">
<img style="position: absolute; top: 0px; left: -15px;" src="https://f2.toyhou.se/file/f2-toyhou-se/images/37816583_jr7vq8m46u5fQC0.png">
<img style="position: absolute; top: 0px; left: 31px; opacity: .3" src="https://f2.toyhou.se/file/f2-toyhou-se/images/37816555_3ZMfJJO8CGgiHAF.png">
</div>
<div class="row">
<!--------------------------------------------------------------------------------

DESKTOP NAVIGATION
There is another section further below 'MOBILE NAVIGATION' be sure to alter both sections.

-------------------------------------------------------------------------------->
<div class="col-lg-2 pl-0 d-lg-flex d-none" style="margin-top: 100px;">
<ul class="nav flex-column" style="font-family: georgia; font-size: 1.4rem; text-shadow: 0px 0px 3px rgba(0,0,0,1);">
<!-- nav link -->
<li class="nav-item mb-3">
<a class="text-white nav-link" data-toggle="tab" href="#tab1">
<span style="text-shadow: 0px 0px 3px rgb(255,0,0);">◈</span></a>
</li>
<br>
<!-- nav link -->
<li class="nav-item mb-3">
<a class="text-white nav-link" data-toggle="tab" href="#tab2">
<span style="text-shadow: 0px 0px 3px rgb(255, 136, 0);">◈</span></a>
</li>
<br>
<!-- nav link -->
<li class="nav-item mb-3">
<a class="text-white nav-link" data-toggle="tab" href="#tab3">
<span style="text-shadow: 0px 0px 3px rgb(229, 255, 0);">◈</span></a>
</li>
<br>
<!-- nav link -->
<li class="nav-item mb-3">
<a class="text-white nav-link" data-toggle="tab" href="#tab4">
<span style="text-shadow: 0px 0px 3px rgb(0, 255, 13);">◈</span></a>
</li>
<br>
<!-- nav link -->
<li class="nav-item mb-3">
<a class="text-white nav-link" data-toggle="tab" href="#tab5">
<span style="text-shadow: 0px 0px 3px rgb(0, 162, 255);">◈</span></a>
</li>
</ul>
</div>
<!---------------- Character Art ---------------->
<div class="col-lg-10" style="background-image: url('https://cdn.discordapp.com/attachments/791860616443854849/935807143762862130/256.png'); background-repeat: no-repeat; background-position: right top; background-size: contain;">
<!-- Content -->
<div class="row">
<div class="col-12 d-lg-flex d-none" style="margin-top: 80px;"></div>
<div class="col-lg-6 p-2 mx-md-4 mx-2">
<!--------------------------------------------------------------------------------

FOR BACKGROUND ELEMENT
It is a large white 400 x 420 px image.

GENSHIN ELEMENTS
Geo https://uploadstatic-sea.mihoyo.com/contentweb/20201216/2020121611210150023.png
Anemo https://uploadstatic-sea.mihoyo.com/contentweb/20200723/2020072319133258916.png
Electro https://uploadstatic-sea.mihoyo.com/contentweb/20200330/2020033022174332519.png
Pyro https://uploadstatic-sea.mihoyo.com/contentweb/20200312/2020031220003686233.png
Hydro https://uploadstatic-sea.mihoyo.com/contentweb/20191009/2019100912281839220.png
Cryo https://uploadstatic-sea.mihoyo.com/contentweb/20191009/2019100910341145525.png
Dendro --

-------------------------------------------------------------------------------->
<img style="position: absolute; top: -0px; left: -60px; opacity: .1; z-index: 0;" src="https://uploadstatic-sea.mihoyo.com/contentweb/20191009/2019100912281839220.png">
<hr style="position: relative; top: -40px; left: -7.5%; border: 2px solid; border-color: #E3BC8C; width: 84%;">
<!---------------- Character Name ---------------->
<h1 class="text-uppercase text-white" style="position: relative; top: -40px; font-family: Georgia; font-size: 2rem; letter-spacing: 6px; text-shadow: 0px 0px 3px rgba(0,0,0,1);">Manahimeko Seiji</h1>
<div class="col-12 d-lg-none d-flex" style="margin-top: 140px;"></div>
<div class="row no-gutters">

<!--

  TERMS OF SERVICE
  ✦ Please do not remove credit.
  ✦ You may edit and frankenstein them (if the other coder/s allow it too).
  ✦ You may use my codes as reference but don't heavily reference or steal chunks of it.
  ✦ Do not steal, claim, redistribute or make profit from my codes. This also applies to edits.
  ✦ You are responsible for your own edits.

  NOTES
  ✦ Always have WYSIWYG turned OFF and Code Editor turned ON when editing. Otherwise the code will break.

  TIPS
  ✦ To change the colours, press ctrl + F, type in hex code you want to replace, click on + and replace "all" with a different hex code
  ✦ Get hex codes here: https://www.w3schools.com/colors/colors_picker.asp
  ✦ Get more icons here: https://fontawesome.com/icons?d=gallery

  ACCENT COLOURS
  ✦ Theme:          #75B9FF
  ✦ White Text:     #fff

-->

<div class="mx-auto text-muted my-5" style="max-width: 580px; font-size: 12px; letter-spacing: .6px;">

<!-- BG ------------------------------------->
<div style="position: relative; top: -60px; border-radius: 8px 8px 0px 0px; height: 100px;

  /*-- Note: Replace URL between () brackets to change image or leave empty to use flat colour --*/;

  background: #75B9FF url() center; background-size: cover;">

  <div class="row no-gutters">

    <!-- ICON | Replace URL to change image -->
    <div class="col hidden-sm-down">
      <img src="https://images.unsplash.com/photo-1629226772043-41e90a3c2121?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=671&q=80" class="fr-rounded d-block mx-auto bg-faded mb-3" style="height: 120px; width: 120px; padding: 4px; margin-top: 30px; object-fit: cover; position: relative; top: -53px;">
    </div>
    <!-- ------->

    <!-- NAME & INFO -->
    <div class="col-md-8" style="color: #fff;">

      <!-- NAME -->
      <div class="text-truncate px-3 px-md-2" style="margin-top: 20px; padding: 2px 0px; background: linear-gradient(135deg, rgba(0,0,0,0), rgba(0,0,0,0.3), rgba(0,0,0,0) ); font-weight: 500; letter-spacing: 1px; font-size: 16px;">


      </div>

      <!-- QUOTE | Try to keep it short -->
      <div class="text-truncate px-3 px-md-2" style="padding: 0px 6px; height: 32px;">

        "Write a short quote here."

      </div>

      <!-- MUSIC -->
      <div class="text-right" style="padding: 0px 6px;">

        <!-- Song Title -->
        <span>Song Title</span>

        <!-- HOW TO ADD MUSIC ---

        Copy and paste the id at the end of a youtube link after the = symbol (don't copy the entire link or it will not work!)

          Example. Link = https://www.youtube.com/watch?v=PBZICTaUmU0
          Embed link    = https://www.youtube.com/embed/PBZICTaUmU0

        ------------------------>

        <iframe src="https://www.youtube.com/embed/"
          frameborder="0" style="height: 16px; width: 16px; opacity: 0; position: absolute; z-index: 1000;" allow="autoplay;"></iframe><i class="fas fa-music"/>

      </div>

    </div>
    <!-- -------------->

  </div>
</div>
<!-- ---------------------------------------->

<!-- PROFILE -------------------------------->
<div class="bg-faded p-3" style="border-radius: 0px 0px 8px 8px; position: relative; top: -60px;">
<div class="row no-gutters">

  <!-- INFO -->
  <div class="col-md-4 mb-2 mb-md-0 mt-sm-5 pr-0 pr-md-3">

    <!-- Name -->
    <div class="row no-gutters mb-2">
      <div class="col-2 text-center px-1 tooltipster" title="Nickname" style="background: #75B9FF; border: 2px solid #75B9FF; border-radius: 20px 0px 0px 20px; color: #fff">
        <i class="fas fa-signature fa-fw"/>
      </div>
      <div class="col-10 text-truncate px-1" style="border: 2px solid #75B9FF; border-radius: 0px 20px 20px 0px;">

        Seisei

      </div>
    </div>

    <!-- Age or Birthday -->
    <div class="row no-gutters mb-2">
      <div class="col-2 text-center px-1 tooltipster" title="Birthday" style="background: #75B9FF; border: 2px solid #75B9FF; border-radius: 20px 0px 0px 20px; color: #fff">
        <i class="fas fa-birthday-cake fa-fw"/>
      </div>
      <div class="col-10 text-truncate px-1" style="border: 2px solid #75B9FF; border-radius: 0px 20px 20px 0px;">

        Info

      </div>
    </div>

    <!-- Gender -->
    <div class="row no-gutters mb-2">
      <div class="col-2 text-center px-1" style="background: #75B9FF; border: 2px solid #75B9FF; border-radius: 20px 0px 0px 20px; color: #fff">
        <i class="far fa-venus-mars fa-fw tooltipster" title="Gender"/>
      </div>
      <div class="col-10 text-truncate px-1" style="border: 2px solid #75B9FF; border-radius: 0px 20px 20px 0px;">

        Male

      </div>
    </div>

    <!-- Height -->
    <div class="row no-gutters mb-2">
      <div class="col-2 text-center px-1 tooltipster" title="Height" style="background: #75B9FF; border: 2px solid #75B9FF; border-radius: 20px 0px 0px 20px; color: #fff">
        <i class="fas fa-ruler-vertical fa-fw"/>
      </div>
      <div class="col-10 text-truncate px-1" style="border: 2px solid #75B9FF; border-radius: 0px 20px 20px 0px;">

        5'9

      </div>
    </div>

    <!-- Hair -->
    <div class="row no-gutters mb-2">
      <div class="col-2 text-center px-1 tooltipster" title="Hair" style="background: #75B9FF; border: 2px solid #75B9FF; border-radius: 20px 0px 0px 20px; color: #fff">
        <i class="fas fa-head-side fa-fw"/>
      </div>
      <div class="col-10 text-truncate px-1" style="border: 2px solid #75B9FF; border-radius: 0px 20px 20px 0px;">

        Raven

      </div>
    </div>

    <!-- Height -->
    <div class="row no-gutters mb-2">
      <div class="col-2 text-center px-1 tooltipster" title="Eyes" style="background: #75B9FF; border: 2px solid #75B9FF; border-radius: 20px 0px 0px 20px; color: #fff">
        <i class="fas fa-eye fa-fw"/>
      </div>
      <div class="col-10 text-truncate px-1" style="border: 2px solid #75B9FF; border-radius: 0px 20px 20px 0px;">

        Gold

      </div>
    </div>

    <!-- Main Weapon -->
    <div class="row no-gutters mb-2">
      <div class="col-2 text-center px-1 tooltipster" title="Weapon" style="background: #75B9FF; border: 2px solid #75B9FF; border-radius: 20px 0px 0px 20px; color: #fff">
        <i class="fas fa-sword fa-fw"/>
      </div>
      <div class="col-10 text-truncate px-1" style="border: 2px solid #75B9FF; border-radius: 0px 20px 20px 0px;">

        Bow

      </div>
    </div>

    <!-- Vision -->
    <div class="row no-gutters mb-2">
      <div class="col-2 text-center px-1 tooltipster" title="Vision" style="background: #75B9FF; border: 2px solid #75B9FF; border-radius: 20px 0px 0px 20px; color: #fff">
        <i class="fas fa-star-christmas fa-fw"/>
      </div>
      <div class="col-10 text-truncate px-1" style="border: 2px solid #75B9FF; border-radius: 0px 20px 20px 0px;">

        Hydro

      </div>
    </div>

    <!-- Occupation -->
    <div class="row no-gutters mb-2 mb-md-0">
      <div class="col-2 text-center px-1 tooltipster" title="Occupation" style="background: #75B9FF; border: 2px solid #75B9FF; border-radius: 20px 0px 0px 20px; color: #fff">
        <i class="fas fa-briefcase fa-fw"/>
      </div>
      <div class="col-10 text-truncate px-1" style="border: 2px solid #75B9FF; border-radius: 0px 20px 20px 0px;">

        Rich Person TM

      </div>
    </div>

  </div>
  <!-- ------->

<!-- ABOUT -->
<div class="col-md-8">

<!-- BUTTONS ------------------------------------->
<ul class="row no-gutters nav mb-2">
  <li class="col nav-item my-auto" style="background: #75B9FF; border-radius: 10px 0px 0px 10px;">
    <a class="btn btn-outline-secondary border-0 d-flex nav-link active tooltipster p-1" style="border-radius: 10px 0px 0px 10px; color: #fff;" title="About" data-toggle="tab" href="#about"><i class="fas fa-feather m-auto"></i></a>
  </li>
  <li class="col nav-item my-auto" style="background: #75B9FF;">
    <a class="btn btn-outline-secondary border-0 rounded-0 d-flex nav-link tooltipster p-1" style="color: #fff;" title="Personality" data-toggle="tab" href="#personality"><i class="fas fa-moon-stars m-auto"></i></a>
  </li>
  <li class="col nav-item my-auto" style="background: #75B9FF;">
    <a class="btn btn-outline-secondary border-0 rounded-0 d-flex nav-link tooltipster p-1" style="color: #fff;" title="Trivia" data-toggle="tab" href="#trivia"><i class="fas fa-puzzle-piece m-auto"></i></a>
  </li>
  <li class="col nav-item my-auto" style="background: #75B9FF;">
    <a class="btn btn-outline-secondary border-0 rounded-0 d-flex nav-link tooltipster p-1" style="color: #fff;" title="Moodboard" data-toggle="tab" href="#moodboard"><i class="fas fa-images m-auto"></i></a>
  </li>
  <li class="col nav-item my-auto" style="background: #75B9FF; border-radius: 0px 10px 10px 0px;">
    <a class="btn btn-outline-secondary border-0 d-flex nav-link tooltipster p-1" style="border-radius: 0px 10px 10px 0px; color: #fff;" title="Relationships" data-toggle="tab" href="#relations"><i class="fas fa-user-friends m-auto"></i></a>
  </li>
</ul>
<!-- /BUTTONS ------------------------------------>

<div class="tab-content table-responsive text-justify pr-1" style="height: 280px; overflow: auto; overflow-x: hidden;">

<!-- ABOUT --------------------------------------->
<div class="tab-pane fade active show" id="about">

  <!-- TEXT -->
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam in sodales massa, eget mollis lorem. Aliquam erat volutpat. Sed et dui turpis. Integer at ante nibh. Nunc mattis lorem sed suscipit condimentum. Donec nisl nulla, mattis sit amet mollis vitae, pretium sit amet erat. Vestibulum hendrerit augue lorem.</p>
  <p>Morbi diam enim, vestibulum vel ullamcorper dapibus, ultrices eu nibh. Donec facilisis velit a quam feugiat, quis faucibus est dapibus. Morbi at euismod dui, a commodo sapien. Suspendisse potenti. Duis dapibus metus quis venenatis hendrerit. Donec turpis augue, feugiat quis neque et, venenatis porttitor quam. Nam accumsan lobortis tincidunt. Sed felis dui, condimentum non luctus ac, tristique non nisi.</p>
  <!-- /TEXT -->

</div>
<!-- --------------------------------------------->

<!-- PERSONALITY --------------------------------->
<div class="tab-pane fade" id="personality">
<div class="row">

  <!-- Tip: Change the width % to adjust the slider -->

  <div class="col-6 mb-2">
    <div class="d-flex justify-content-between mb-1">
      <span>Introvert</span>
      <span>Extrovert</span>
    </div>
    <div class="progress" style="height: 8px; background: rgba(0,0,0,0.1);">
      <div class="progress-bar" style="background: #75B9FF;
        width: 70%;"></div>
    </div>
  </div>

  <div class="col-6 mb-2">
    <div class="d-flex justify-content-between mb-1">
      <span>Irrational</span>
      <span>Logical</span>
    </div>
    <div class="progress" style="height: 8px; background: rgba(0,0,0,0.1);">
      <div class="progress-bar" style="background: #75B9FF;
        width: 38%;"></div>
    </div>
  </div>

  <div class="col-6 mb-2">
    <div class="d-flex justify-content-between mb-1">
      <span>Passive</span>
      <span>Assertive</span>
    </div>
    <div class="progress" style="height: 8px; background: rgba(0,0,0,0.1);">
      <div class="progress-bar" style="background: #75B9FF;
        width: 27%;"></div>
    </div>
  </div>

  <div class="col-6 mb-2">
    <div class="d-flex justify-content-between mb-1">
      <span>Serious</span>
      <span>Playful</span>
    </div>
    <div class="progress" style="height: 8px; background: rgba(0,0,0,0.1);">
      <div class="progress-bar" style="background: #75B9FF;
        width: 50%;"></div>
    </div>
  </div>

  <div class="col-6 mb-2">
    <div class="d-flex justify-content-between mb-1">
      <span>Spiteful</span>
      <span>Kind</span>
    </div>
    <div class="progress" style="height: 8px; background: rgba(0,0,0,0.1);">
      <div class="progress-bar" style="background: #75B9FF;
        width: 40%;"></div>
    </div>
  </div>

  <div class="col-6 mb-2">
    <div class="d-flex justify-content-between mb-1">
      <span>Pessimistic</span>
      <span>Optimistic</span>
    </div>
    <div class="progress" style="height: 8px; background: rgba(0,0,0,0.1);">
      <div class="progress-bar" style="background: #75B9FF;
        width: 69%;"></div>
    </div>
  </div>

</div>

<hr class="my-2">

  <!-- Description -->
  <p>Seiji as apart of the Manahimeko family, has a good public image of being kind and compassionate. However, under the private cover of a meeting room, Seji can prove to be quite the intimidating person. While he rarely get's physical with business deals, he's got the demeanor that shows he's willing. His aggression is mostly shone through spiteful words, and petty actions. Despite his business demeanor, Seiji is a very playful person. Commonly telling jokes and messing with people. Outside of business affairs, Seiji truly is a nice person. While he is frequently in public, and talking in meetings, he's quite the introvert. He much prefers to take lone strolls, and rest out in the empty areas.</p>
  <!-- /Description -->

</div>
<!-- --------------------------------------------->

<!-- TRIVIA -------------------------------------->
<div class="tab-pane fade" id="trivia">

  <!-- Likes -->
  <div class="mb-2">
    <div class="d-flex justify-content-between mb-2" style="border-radius: 20px; padding: 2px 10px; background: #75B9FF; color: #fff; font-weight: 500; letter-spacing: 1px;">
      Likes<i class="fas fa-heart fa-fw my-auto"/>
    </div>
    <ul class="pl-4 mb-3">

      <li>Kiba <3</li>
      <li>Strolls through the fields</li>
      <li>His afternoon tea</li>

    <!-- Add more above this line -->
    </ul>
  </div>

  <!-- Dislikes -->
  <div class="mb-2">
    <div class="d-flex justify-content-between mb-2" style="border-radius: 20px; padding: 2px 10px; background: #75B9FF; color: #fff; font-weight: 500; letter-spacing: 1px;">
      Dislikes<i class="fas fa-times fa-fw my-auto"/>
    </div>
    <ul class="pl-4 mb-3">

      <li>Snobby Business men</li>
      <li>Tsurumi Island >:(</li>
      <li>Being in crowded areas for too long</li>

    <!-- Add more above this line -->
    </ul>
  </div>

  <!-- Trivia -->
  <div class="d-flex justify-content-between mb-2" style="border-radius: 20px; padding: 2px 10px; background: #75B9FF; color: #fff; font-weight: 500; letter-spacing: 1px;">
      Trivia<i class="fas fa-flask fa-fw my-auto"/>
  </div>
  <ul class="pl-4 mb-3">

    <li>Pre-Tsurumi Island fog clearing, Seiji can often be found sitting on the edge of the docks staring off in the ocean</li>
    <li>The big tree in Inazuma City used to be a reading spot for him, as well as a spot to tease Kiba from</li>
    <li>Don't put Kiba and him in the same team. They will not help. They're too busy making out.</li>

  <!-- Add more above this line -->
  </ul>
</div>
<!-- --------------------------------------------->

<!-- MOODBOARD ----------------------------------->
<div class="tab-pane fade" id="moodboard">
<div class="row no-gutters">

  <!-- IMAGE 01 | Replace URL in () brackets to change image -->
  <div class="col-6" style="height: 140px; border-radius: 10px 0px 0px 0px;
    background: url(https://images.unsplash.com/photo-1603113601705-0f3a09f3df8f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80) center no-repeat; background-size: cover;">
  </div>
  <!-- ----------->

  <!-- IMAGE 02 | Replace URL in () brackets to change image -->
  <div class="col-6" style="height: 140px; border-radius: 0px 10px 0px 0px;
    background: url(https://images.unsplash.com/photo-1507058315425-12d723a95fea?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTh8fGNoYWxrfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60) center no-repeat; background-size: cover;">
  </div>
  <!-- ----------->

  <!-- IMAGE 03 | Replace URL in () brackets to change image -->
  <div class="col-6" style="height: 140px; border-radius: 0px 0px 0px 10px;
    background: url(https://images.unsplash.com/photo-1542768651-5d7354d0b782?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTJ8fHdoaXRlJTIwbGlseXxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&q=60) center no-repeat; background-size: cover;">
  </div>
  <!-- ----------->

  <!-- IMAGE 04 | Replace URL in () brackets to change image -->
  <div class="col-6" style="height: 140px; border-radius: 0px 0px 10px 0px;
    background: url(https://images.unsplash.com/photo-1601046296534-4a5da114f78f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1193&q=80) center no-repeat; background-size: cover;">
  </div>
  <!-- ----------->

</div>
</div>
<!-- --------------------------------------------->

<!-- RELATIONSHIPS ------------------------------->
<div class="tab-pane fade" id="relations">

  <!-- CHAR 01 ------------>
  <div class="row no-gutters mb-2">

    <!-- IMAGE | Replace URL in () brackets to change image -->
    <div class="col-3">
      <div style="min-height: 126px; border-radius: 10px 0px 0px 10px;

        background: url(https://via.placeholder.com/200) center no-repeat; background-size: cover;">

      </div>
    </div>

    <div class="col-9">
      <!-- Name -->
      <div class="py-1 px-2" style="background: #75B9FF; border-radius: 0px 10px 0px 0px; letter-spacing: 1px; font-weight: 500; color: #fff;">

        Shinku Kiba

      </div>
      <div class=" text-justify p-2" style="background: rgba(0,0,0,0.05); border-radius: 0px 0px 10px 0px; height: 100px; overflow: auto;">
      <!-- TEXT -->

        <p>His beloved boyfriend. They were childhood friends, and after Kiba went away to Tsurumi island for a mission, Seiji would sit at the docks for a few hours a day waiting for him to come home.</p>

      <!-- /TEXT -->
      </div>
    </div>

  </div>
  <!-- -------------------->

  <!-- CHAR 02 ------------>
  <div class="row no-gutters mb-2">

    <!-- IMAGE | Replace URL in () brackets to change image -->
    <div class="col-3">
      <div style="min-height: 126px; border-radius: 10px 0px 0px 10px;

        background: url(https://via.placeholder.com/200) center no-repeat; background-size: cover;">

      </div>
    </div>

    <div class="col-9">
      <!-- Name -->
      <div class="py-1 px-2" style="background: #75B9FF; border-radius: 0px 10px 0px 0px; letter-spacing: 1px; font-weight: 500; color: #fff;">

        ???

      </div>
      <div class=" text-justify p-2" style="background: rgba(0,0,0,0.05); border-radius: 0px 0px 10px 0px; height: 100px; overflow: auto;">
      <!-- TEXT -->

        <p>An adeptus he met while on a business trip to Liyue. They wound up in a fun mini adventure, and became good friends. They try to write to each other when they can.</p>

      <!-- /TEXT -->
      </div>
    </div>

  </div>
  <!-- -------------------->

<!-- Add more above this line -->
</div>
<!-- ---------------------------------------->
</div>

</div>

</div>
</div>
</div>

</div>
</div>
</div>
</div>
</div>
</div>
<p class="text-white" style="font-size: .6rem; position: absolute; right: 10px; bottom: 1px;"><a href="/12087247.-genshin-character-splash" style="color: rgb(255, 115, 0);"><span data-toggle="tooltip" data-placement="left" title="code by junijwi"><i class="fas fa-code"></i></span></a>
and
  <a href="https://toyhou.se/13886013.-6-alchemia" style="font-size:10px; "><i class="fas fa-sparkles" style="color: rgb(255, 115, 0);" title="Code by Sealkitty"></i></a>
  , edited by PandoraLights
  </p>
</div>
</div>