"(0 CODES)" (TERRARIA)

<!------------------------------------------------
 
                Tips
       This is for Terraria Beastiary style!!
ICON RESOURCES https://terraria.wiki.gg/wiki/Category:Bestiary_filter_icons

       The Terraria BGs can be searched up yourself, sometimes the wikis don't let you use resources, its weird.
 
       It's sorta mobile friendly, the toggle buttons lose their icons and letters. 
You can Ctrl + F to find "lg" and change it to "md" if you wish to make it look like mobile or the beastiary pages, it makes the display skinny.

 ------------------------------------------------->
 
<div class="container row no-gutters" style="max-width: 1950px; margin: auto; z-index:2; position:relative; font-family: comic sans ms; text-shadow:-2px 0 #030000,0 2px #030000,2px 0 #030000,0 -2px #030000;">
    <div class="container col-lg-4 bg-faded" style="height: 700px; overflow-y:scroll">
        <div class="card border-5 rounded-2" style="border: 5px solid; border-color: #1A223F; background-color:#495EAB; border-radius: 15px">
            <div class="p-2 text-primary bg-faded justify-content-between align-items-center" style="text-align: center; font-size: 25px">
            <div>
                
                <!---symbol next to the characters name, either keep as is or go to https://fontawesome.com/search and replace 'user' with whatever--->
                <i class="far fa-user">
                    
                </i></div><div><b>
                
                <span class="text-primary">CHARACTER NAME</span>
                
                </b></div><div></div>
            </div>
            <!---BASICS, you can change the boxes just dont add more unless you know html--->
 
 
                <ul class="nav nav-pills nav-fill flex flex-wrap ">
				<li class="nav-item"><a class="nav-link btn btn-outline-primary bg-faded border-0 text-uppercase show active" data-toggle="pill" href="#ONE" id="" style="border-top-right-radius:0px; border-bottom-right-radius: 0px; border-top-left-radius:0px; border-bottom-left-radius: 0px; z-index:2; position:relative;"><span class="hidden-sm-down">Image <i class="far fa-image"></i></span></a></li>
				<li class="nav-item"><a class="nav-link btn bg-faded btn-outline-primary border-0  text-uppercase show" data-toggle="pill" href="#TWO" id="" style="border-top-right-radius:0px; border-bottom-right-radius: 0px; border-top-left-radius:0px; border-bottom-left-radius: 0px; z-index:2; position:relative;"><span class="hidden-sm-down">Design info </span><i class="far fa-palette"></i></a></li>
			</ul>
			<div class="tab-content" >
			<div class="tab-pane fade in active show" id="ONE" style="padding: 4px;">

			<!--BACKGROUND IMAGE, image will auto crop.-->
			<!--change "background-position:" to right/left/center depending on how you want it and change "background-size:" to contain if you want the whole image shown-->
			<p class="tooltipster" style="background-image:url(
			
			https://i.pinimg.com/originals/bb/89/ca/bb89cac0156e262291b092f460a1c103.png
			
			); background-position:center; background-repeat: no-repeat; min-height:455px; background-size: cover; padding: 4px;" 
			
			>
			<!--BACKGROUND IMAGE end-->


<!---Stars Rating--->
<i class="fas fa-fw fa-beat fa-2x">
<img src="https://terraria.wiki.gg/images/5/5a/Bestiary_Rank_Light.png"></i>
<i class="fas fa-fw fa-beat fa-2x">
<img src="https://terraria.wiki.gg/images/5/5a/Bestiary_Rank_Light.png"></i>
<i class="fas fa-fw fa-beat fa-2x">
<img src="https://terraria.wiki.gg/images/5/5a/Bestiary_Rank_Light.png"></i>
<i class="fas fa-2x fa-star text-dark"></i>
<i class="fas fa-2x fa-star text-dark"></i>
<!---Stars Rating--->


<!---AVATAR IMAGE, this will overlap the stats and info, but clicking on DESIGN NOTES or 2nd toggle button will temporary clear it! :3 --->
      <div style="position:absolute; top:0; left:0; right:0; bottom:0; background-position:center; background-repeat: no-repeat; background-image:url('

        https://forums.terraria.org/index.php?attachments/atlas_boss-png.146755/

      '); z-index:1;"></div>
<!---AVATAR IMAGE end--->
			</p>
			</div>


      <!--2nd Toggle Button--->
			<!--DESIGN INFO. add as many rows and bullet points as you want-->
			<div class="tab-pane fade pt-3 pl-2 pr-2" style="overflow-y:auto; height:467px; background-color:#2B3865; border-radius: 10px" id="TWO">
            <p class="text-primary" style="font-size: 19px;"><b><i class="far fa-palette"></i> DESIGN:</b></p>
            <div class="container" style=";">
                <div class="justify-content-between align-items-center">
                <div class="text-light">Height</div><div class="text-light">content</div>
                </div><hr class="mb-1 mt-1">
                
                <div class="justify-content-between align-items-center">
                <div class="text-light">Build</div><div class="text-light">content</div>
                </div><hr class="mb-1 mt-1">
                
                <div class="justify-content-between align-items-center">
                 <div class="text-light">Other</div><div class="text-light">scars etc</div>
                </div><hr class="mb-1 mt-1">
                
                <!--ADD MORE LINES ABOVE THIS LINE-->
            </div><br>
                <p style="font-size: 20px"><span class= "text-primary">Story:</span></p>
                <ul>
                    <p style="font-size: 12px"><blockquote><span class= "text-light">Quote? Maybe? Idk?</span></blockquote></p>
                    
                    <p>Short bio/ info about them and another paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Fringilla phasellus faucibus scelerisque eleifend donec pretium vulputate. Eget nullam non nisi est sit amet.</p>


                <!--ADD MORE BULLET POINTS ABOVE THIS LINE-->
                </ul>
    			</div></div>
      <!--2nd Toggle Button end--->
			<!--DESIGN INFO end-->



                <!---BASICS INFO--->
           <div class="container col-lg-12" style="background-color:#42559D; border-radius: 10px; border: 5px solid; border-color:#495EAB">
                <div class="justify-content-between align-items-center">
                <div class="text-light">Nicknames</div><div class="text-light"> content </div>
                </div><hr class="my-1">
                
                <div class="justify-content-between align-items-center">
                <div class="text-light">Age</div><div class="text-light"> content</div>
                </div><hr class="my-1">
                
                <div class="justify-content-between align-items-center">
                <div class="text-light">Gender</div><div class="text-light"> content</div>
                </div><hr class="my-1">
                
                <div class="justify-content-between align-items-center">
                <div class="text-light">Species</div><div class="text-light"> content</div>
                </div><hr class="my-1">

            </div>


	
    			            <!---BASICS, you can change the boxes just dont add more unless you know html--->
            <div class="container col-lg-12" style="background-color:#2B3865; border-radius: 10px; border: 5px solid; border-color:#495EAB">
                <div class="justify-content-between align-items-center text-light">
                <div> <img src="https://terraria.wiki.gg/images/4/42/Bestiary_Surface.png?20220102113936"> Surface</div>
                </div>
            </div>
    </div>
    </div>
    </div>

 <!------------------------------------------------
 
 
                CREDITS
 

 ------------------------------------------------->
 <div class="text-center p-1 mt-1 small" style="letter-spacing:3px">
    
    <a href="https://toyhou.se/13162402.0-codes/22506585.terraria" class="text-muted tooltipster"
    title="Frankensteined CODE by JV007" style="text-decoration:none"> <i class="far fa-code"></i>
    </a>
    
       <span class="faded">.</span>
    
    <a href="https://terraria.wiki.gg/wiki/Category:Bestiary_filter_icons" class="text-muted tooltipster"
    title="Terraria Icons by Redigit" style="text-decoration:none"> <i class="far fa-image"></i>
    </a>

  
 </div>