<!--                        [F2U] ETERNAL REALMS CHARACTER PROFILE
                                             CODE BY TOGEDEMARU
      
      	Info / Rules:
      		- Code may ONLY be used as part of the Eternal Realms group!
      		- Please do not remove credit or redistribute this layout in any manner.
      		- Keep WYSIWYG off and Code Editor on to install and edit.
      
      	Color key:
      	  - Background: #fff7e0
      	  - Content bg: #fff1d9
      	  - Text: #84624e
      	  - Muted Text: #a37a62
      	  - Header (pink): #ffceab
      	  - ML Link (green): #cdcf82
      	  - Text links: #a7ac40
      
      	Tips:
      		- For links, replace '#' in <a href="#">link</a> with the appropriate url.
      		- Replace 'IMG URL HERE' with the url of the image.
      		- For info on the icons, see the font awesome website or my reference here: https://toyhou.se/3536712
      		- Info on adjusting images can be seen here: https://toyhou.se/4930674
       -->
      	<div class="container p-3" style="background-color:#fff7e0;border-radius:10px;color:#84624e;max-width:700px;margin-bottom:25px;">
      		<!-- HEADER -->
      		<div class="row no-gutters rounded" style="background-color:#ffceab;border-radius:10px;">
      			<!-- GREEN SECTION + ICON -->
      			<div class="col d-none d-sm-flex" style="padding:.5rem .5rem 0 0;background-color:#fff7e0;border-radius:0 55px 0 0;">
      				<div class="w-100 d-flex h-100" style="background-color:#cdcf82;border-radius:.5rem 50px 0 .5rem;">
      					<!-- STAR ICON -->
      					<i class="fas fa-star fa-2x m-auto"></i>
      				</div>
      			</div>
      			<!-- END GREEN SECTION -->
      			
      			<!-- CHARACTER NAME SECTION -->
      			<div class="col-sm-10 display-4 text-center d-flex py-2">
      				<p class="m-auto">Character Name</p>
      			</div>
      			<!-- END CHARACTER NAME -->
      		</div>
      		<!-- END HEADER -->
      		
      		<div class="row no-gutters">
      			<!-- CONTENT: CHARACTER IMG + ML LINK -->
      			<div class="col-lg-5 pt-2 pl-lg-2 push-lg-7">
      			  <!-- INSERT IMG URL BELOW -->
      				<div class="rounded mb-2" style="background: url(IMG URL HERE) #fff1d9 center no-repeat; background-size:contain;min-height:250px;height:calc(100% - 41px);border-radius:10px;">
      				</div>
      
              <!-- ML LINK BUTTON -->
      				<div style="background-color:#cdcf82;border-radius:10px;">
      				  <!-- INSERT ML LINK BELOW -->
      					<a href="#" class="btn btn-outline-secondary btn-block border-0" style="color:#84624e;border-radius:10px;" target="_blank">
      					  AFR0000
      					</a>
      				</div>
      			</div>
      			<!-- END CONTENT: CHARACTER IMG + ML LINK -->
      			
      			<!-- CONTENT: BASICS / ABOUT -->
      			<div class="col-lg-7 pt-2 pr-lg-2 pull-lg-5">
      				<div style="background-color:#fff1d9;min-height:300px;border-radius:10px;">
      					<!-- BASIC INFO -->
      					<div class="row no-gutters px-3 py-2">
      						<div class="col-lg-6 d-flex justify-content-between px-2 py-1">
      							<b>Name</b> 
      							<span>info</span>
      						</div>
      						
      						<div class="col-lg-6 d-flex justify-content-between px-2 py-1">
      							<b>Pronouns</b> 
      							<span>info</span>
      						</div>
      						
      						<div class="col-lg-6 d-flex justify-content-between px-2 py-1">
      							<b>Species</b> 
      							<a href="https://toyhou.se/~world/55286.eternal-realms" style="color:#a7ac40;">Afearian</a>
      						</div>
      						
      						<div class="col-lg-6 d-flex justify-content-between px-2 py-1">
      							<b>Type</b> 
      							<span>info</span>
      						</div>
      						
      						<div class="col-lg-6 d-flex justify-content-between px-2 py-1">
      							<b>Mutation</b> 
      							<span>info</span>
      						</div>
      						
      						<div class="col-lg-6 d-flex justify-content-between px-2 py-1">
      							<b>Ears</b> 
      							<span>info</span>
      						</div>
      						
      						<div class="col-lg-6 d-flex justify-content-between px-2 py-1">
      							<b>Horns</b> 
      							<span>info</span>
      						</div>
      						
      						<div class="col-lg-6 d-flex justify-content-between px-2 py-1">
      							<b>Tail</b> 
      							<span>info</span>
      						</div>
      					</div>
      					<!-- END BASIC INFO -->
      					
      					<div class="col-12 px-3 pb-2" style="color:#a37a62;">
      						<!-- DIVIDER -->
      						<hr class="w-100 mb-2 mt-0" style="border-color:rgba(132,98,78,0.125);">
                  
                  <!-- ABOUT -->
      						<div class="px-2">
      							<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris rutrum laoreet tortor, et pulvinar neque. Ut vel tristique quam. Praesent gravida dictum libero, eu sagittis orci gravida vel.</p>
      							
      							<p>Praesent sit amet eleifend felis. Sed justo velit, ullamcorper ac nunc vitae, blandit varius diam. Nullam ac tristique ipsum.</p>
      							
      							<!-- ADD MORE PARAGRAPHS HERE -->
      						</div>
      						<!-- END ABOUT -->
      						
      					</div>
      				</div>
      			</div>
            <!-- END CONTENT: BASICS / ABOUT -->
            
            <!-- CREDIT, DO NOT REMOVE -->
      			<div style="position:absolute;right:5px;bottom:-20px;">
      				<small><a class="text-muted tooltipster" data-placement="left" href="https://toyhou.se/~world/55286.eternal-realms" title="eternal realms | togedemaru"><i class="fas fa-star"></i></a></small>
      			</div>
      		</div>
      	</div>