Profile
<!-- use find & replace to quick replace hex codes
---- default focal color is: #a09fba
---- default content box color is: #444
---- default bg color is: #222
---- default font color is: #fff
---->
<!-- main container -- set bg color & font color here -->
<div style="border-radius: 1em; max-width: 1140px; box-shadow: 0 0 1em rgba(0,0,0,.25); color: #fff; background: #222;"
class="container-fluid p-3 my-5" >
<div class="row no-gutters">
<div class="col-lg-3 push-lg-9 mb-3">
<div style="border-radius: 1em; font-size: 10.5pt; background: #444;"
class="card border-0 h-100 pt-3 px-md-2 px-3 pb-md-0 pb-2" >
<!----------- avatar -- use a 200 x 200 image -------------------------->
<img src="IMG_URL"
class="d-block p-2 mx-auto mb-3 rounded-circle" style="max-height:210px; background: #a09fba;">
<!-------- stats --------------------------------------->
<div class="row no-gutters">
<div class="col-6 text-right text-uppercase pr-1" style="opacity: 0.7; letter-spacing: 1px;">
Name <i class="fal fa-angle-double-right fa-fw"></i></div>
<div class="col-6 mb-2">
write a name</div>
<div class="col-6 text-right text-uppercase pr-1" style="opacity: 0.7; letter-spacing: 1px;">
Age <i class="fal fa-angle-double-right fa-fw"></i></div>
<div class="col-6 mb-2">
much too old</div>
<div class="col-6 text-right text-uppercase pr-1" style="opacity: 0.7; letter-spacing: 1px;">
Gender <i class="fal fa-angle-double-right fa-fw"></i></div>
<div class="col-6 mb-2">
content</div>
<div class="col-6 text-right text-uppercase pr-1" style="opacity: 0.7; letter-spacing: 1px;">
Height <i class="fal fa-angle-double-right fa-fw"></i></div>
<div class="col-6 mb-2">
content</div>
<div class="col-6 text-right text-uppercase pr-1" style="opacity: 0.7; letter-spacing: 1px;">
Race <i class="fal fa-angle-double-right fa-fw"></i></div>
<div class="col-6 mb-2">
(or species)</div>
<div class="col-6 text-right text-uppercase pr-1" style="opacity: 0.7; letter-spacing: 1px;">
Role <i class="fal fa-angle-double-right fa-fw"></i></div>
<div class="col-6 mb-2">
content</div>
<div class="col-6 text-right text-uppercase pr-1" style="opacity: 0.7; letter-spacing: 1px;">
Demeanor <i class="fal fa-angle-double-right fa-fw"></i></div>
<div class="col-6 mb-2">
content</div>
<div class="col-6 text-right text-uppercase pr-1" style="opacity: 0.7; letter-spacing: 1px;">
Theme <i class="fal fa-angle-double-right fa-fw"></i></div>
<div class="col-6 mb-2">
<!-- link a song here -->
<a href="SONG_LINK" target="_BLANK" style="color: #a09fba;">
<i class="fas fa-music-alt fa-fw" /><i class="fas fa-music fa-fw" /><i class="fas fa-music-alt fa-fw" /></a></div>
<!-- credit -- pls leave this -------->
<div class="col-6 text-right text-uppercase pr-1" style="opacity: 0.7; letter-spacing: 1px;">
HTML <i class="fal fa-angle-double-right fa-fw"></i></div>
<div class="col-6 mb-2">
<a href="/Pinky" target="_BLANK" style="color: #a09fba;">Pinky</a></div>
</div>
</div>
</div>
<div class="col-lg-9 pull-lg-3 pr-md-3 mb-3">
<div class="row no-gutters">
<div class="col-12 mb-3">
<div style="background: #a09fba; border-radius: 1em;" class="card border-0 p-3" ><h1 class="display-4 text-white mb-0">
<!-- title block -- you can change the icon -- uses font awesome icons -->
<i class="fal fa-crown fa-fw" /> Title here</h1></div>
</div>
<div class="col-md-5 mb-md-0 mb-3">
<div class="border-0 h-100 modal-open" style="border-radius: 1em; background: #444;">
<!------ FOCAL IMAGE --- will scale & crop with screen -- focus in top & center of image ----------->
<div style="background-image: url(IMG_URL);
background-size: cover; background-position: top center; min-height: 400px;" class="h-100"></div>
</div>
</div>
<div class="col-md-7 pl-md-3">
<!--- about block -- will scroll when filled --->
<div class="pt-3 px-3 pb-1" style="border-radius: 1em; font-size: 10pt; height: 450px; overflow:auto; background: #444;">
<h4 class="text-uppercase" style="letter-spacing:1px; font-weight: 300; opacity: 0.7;">
<i class="fal fa-bookmark mr-1"></i>About
</h4>
<p class="mb-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet massa blandit, fermentum enim a, scelerisque velit. Integer interdum urna ac dui sollicitudin sollicitudin. In feugiat posuere nulla, eget lobortis ante. Aliquam magna libero, dictum sit amet scelerisque ac, scelerisque tincidunt magna. Nulla et consectetur diam. Aliquam ipsum mi, tristique sed vestibulum ac, aliquet eget magna. Mauris varius id magna vitae ullamcorper. In gravida libero consectetur, lobortis nisl sit amet, pellentesque ligula. Suspendisse tincidunt feugiat posuere. Duis dui erat, accumsan a aliquam eu, efficitur a tortor. Nunc molestie, leo in commodo aliquam, tellus augue tempor velit, non placerat ex sem non nisi.</p>
<h4 class="text-uppercase" style="letter-spacing:1px; font-weight: 300; opacity: 0.7;">
<i class="fal fa-bookmark mr-1"></i>Trivia
</h4>
<ul>
<li class="mb-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li class="mb-2">Suspendisse sit amet massa blandit, fermentum enim a, scelerisque velit.</li>
<li class="mb-2">Integer interdum urna ac dui sollicitudin sollicitudin.</li>
<li>Nulla et consectetur diam. Aliquam ipsum mi, tristique sed vestibulum ac, aliquet eget magna.</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="p-3" style="border-radius: 1em; background: #a09fba;"><p class="text-white text-center" style="letter-spacing: 1px;">
<i class="fal fa-quote-left fa-fw mr-1 pull-left" /><i>
<!-- quote line here --------->
Write a quote or tagline here
</i><i class="fal fa-quote-right fa-fw ml-1 pull-right" /></p></div>
</div>
