Su Template

<!--

Please do not remove the code credit!
This is my only rule; please follow it or I will cry <:'O

---

If you want to change the template's colour, search for '#FF0000' and replace it with your preferred colour code!
If you'd prefer a dark mode version of this template, search for 'bg-light' and 'text-dark' and replace them with 'bg-dark' and 'text-light'.

---

Since the Relations tab has very small icons, it looks best when using an icon of the character's gemstone. Anything else will be extremely squished.
Clicking a character's gem or their name below it will redirect you to that gem's page.

-->

<center><div class="container card card-block col-md-6 col-sm-12 bg-light text-dark" style="border: 5px solid #FF0000; border-radius: 50px; display: inline-block;">

     <h1> <!--Character's name goes here.-->
         <i class="fas fa-gem" style="color: #FF0000;"></i>
         Name
         <i class="fas fa-gem" style="color: #FF0000;"></i>
     </h1>

     <img src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/35575318_IFB.png" style="max-width: 100px; max-height: 100px;"> <!--Character image goes here.-->
     <!--The image can be square or wide, but avoid tall images. They'll get squished and won't look very good.-->

     <hr style="border: 1px dashed #FF0000;"><!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->


     <p> <!--Put small snippets here, such as gem type, gender, pronouns, or other small facts.-->
         Gem • gender • pronouns
     </p>

     <hr style="border: 1px dashed #FF0000;">

     <!--Character Description Here!-->

     <p class=" container text-left">
         Nulla ultrices feugiat ex, sed euismod mi venenatis a. Quisque et fermentum mi, sed tincidunt leo. In eget ligula dui. Integer imperdiet orci non sodales fermentum. Aenean luctus libero at magna semper fringilla. Etiam eu aliquam risus. Fusce et tortor turpis. Sed scelerisque sapien eu aliquet dictum. Cras felis mi, consequat sit amet interdum sit amet, feugiat quis sapien. Maecenas quis porta odio, eu auctor tellus. Aliquam consectetur fringilla urna, eu aliquam augue egestas sit amet. Phasellus commodo ultrices sollicitudin. Ut lacinia ut dui quis rutrum. Phasellus et turpis vel lorem pharetra fringilla. Proin eu dolor quam.
     </p>

     <hr style="border: 1px dashed #FF0000;"><!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->

     <div class="row text-left">

         <div class="col">

             <h3>
                 <i class="fas fa-heart" style="color: #FF0000;"></i>
                 Likes
             </h3>

             <p> <!--Character's Likes Here!-->
                 - like 1<br>
                 - like 2<br>
                 - like 3
             </p>

         </div>

         <div class="col">

             <h3>
                 <i class="fas fa-heart-broken" style="color: #FF0000;"></i>
                 Dislikes
             </h3>

             <p> <!--Character's Disikes Here!-->
                 - dislike 1<br>
                 - dislike 2<br>
                 - dislike 3<br>
             </p>

         </div>

     </div>

     <hr style="border: 1px dashed #FF0000;"><!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->

     <h1>
         <i class="fas fa-gem" style="color: #FF0000;"></i>
         RELATIONS
         <i class="fas fa-gem" style="color: #FF0000;"></i>
     </h1>

     <hr style="border: 1px dashed #FF0000;"><!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->

     <div class="row">

         <!--You can copy the <div/col> below as many times as you want for more slots, or delete any extra slots you don't want.-->

         <!--Please ake sure to use SQUARE CROPPED IMAGES for the <img/src> below. If the images are varying heights, they may not center properly and will look bad..-->

         <div class="col">
             <a href=""> <!--Link to character's page goes here.-->
                 <img src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/35575306_s8m.png" style="max-width: 50px; max-height: 50px;"><br>
                 Name
             </a>
         </div>

         <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->

         <div class="col">
             <a href=""> <!--Link to character's page goes here.-->
                 <img src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/35575306_s8m.png" style="max-width: 50px; max-height: 50px;"><br> <!--Character image goes here..-->
                 Name
             </a>
         </div>

         <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->

         <div class="col">
             <a href=""> <!--Link to character's page goes here.-->
                 <img src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/35575306_s8m.png" style="max-width: 50px; max-height: 50px;"><br> <!--Character image goes here..-->
                 Name
             </a>
         </div>

         <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->

         <div class="col">
             <a href=""> <!--Link to character's page goes here.-->
                 <img src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/35575306_s8m.png" style="max-width: 50px; max-height: 50px;"><br> <!--Character image goes here..-->
                 Name
             </a>
         </div>

         <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->

         <div class="col">
             <a href=""> <!--Link to character's page goes here.-->
                 <img src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/35575306_s8m.png" style="max-width: 50px; max-height: 50px;"><br> <!--Character image goes here..-->
                 Name
             </a>
         </div>

         <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->

         <div class="col">
             <a href=""> <!--Link to character's page goes here.-->
                 <img src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/35575306_s8m.png" style="max-width: 50px; max-height: 50px;"><br> <!--Character image goes here..-->
                 Name
             </a>
         </div>

         <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->

         <!--Paste any extra <div/col> here!-->

     </div>

     <hr style="border: 1px dashed #FF0000;"><!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->

     <sub>Template by @nightlustrous</sub>

</div></center>