Profile
<div class="container-fluid my-1" style="color:#ffffff;max-width:1000px;">
<div class="container">
<div class="card card-block bg-faded" style="background-color:#090A31;">
<div class="row">
<div class="col-3">
<div style="background: url(https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/2de243d6-ec05-4a84-9349-779a25b48c92/deixvjm-eb7ff3c6-b999-4d07-804a-88ebfa8968aa.png/v1/fill/w_1147,h_696,q_70,strp/img_by_mcdogwarrior_deixvjm-pre.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9Nzc3IiwicGF0aCI6IlwvZlwvMmRlMjQzZDYtZWMwNS00YTg0LTkzNDktNzc5YTI1YjQ4YzkyXC9kZWl4dmptLWViN2ZmM2M2LWI5OTktNGQwNy04MDRhLTg4ZWJmYTg5NjhhYS5wbmciLCJ3aWR0aCI6Ijw9MTI4MCJ9XV0sImF1ZCI6WyJ1cm46c2VydmljZTppbWFnZS5vcGVyYXRpb25zIl19.YG0ABhcre5NIwkjspfvti9Zi_SoHjly7SC-TZyNNLDk); background-repeat: no-repeat; background-size:cover; background-position: center; min-height:200px; max-width:200px;" class="card-block h-0" >
<!-- you may remove the credit link overlay if you wish (especially if it is your own artwork)-->
<a href="CREDIT LINK" class="text-white" style="position:absolute; bottom:450px; left:10px; font-size:10px; opacity:0.35;" data-toggle="tooltip" title="img credit"><i class="fas fa-image"></i> </a>
<!-- stop removing credit link here -->
</div>
<br>
<div style="background: url(https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/2de243d6-ec05-4a84-9349-779a25b48c92/deixvjm-eb7ff3c6-b999-4d07-804a-88ebfa8968aa.png/v1/fill/w_1147,h_696,q_70,strp/img_by_mcdogwarrior_deixvjm-pre.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9Nzc3IiwicGF0aCI6IlwvZlwvMmRlMjQzZDYtZWMwNS00YTg0LTkzNDktNzc5YTI1YjQ4YzkyXC9kZWl4dmptLWViN2ZmM2M2LWI5OTktNGQwNy04MDRhLTg4ZWJmYTg5NjhhYS5wbmciLCJ3aWR0aCI6Ijw9MTI4MCJ9XV0sImF1ZCI6WyJ1cm46c2VydmljZTppbWFnZS5vcGVyYXRpb25zIl19.YG0ABhcre5NIwkjspfvti9Zi_SoHjly7SC-TZyNNLDk); background-repeat: no-repeat; background-size:cover; background-position: center; min-height:200px; max-width:200px;" class="card-block h-0" >
<a href="CREDIT LINK" class="text-white" style="position:absolute; bottom:229px; left:10px; font-size:10px; opacity:0.35;" data-toggle="tooltip" title="img credit"><i class="fas fa-image"></i> </a>
</div>
<br>
<div style="background: url(https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/2de243d6-ec05-4a84-9349-779a25b48c92/deixvjm-eb7ff3c6-b999-4d07-804a-88ebfa8968aa.png/v1/fill/w_1147,h_696,q_70,strp/img_by_mcdogwarrior_deixvjm-pre.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9Nzc3IiwicGF0aCI6IlwvZlwvMmRlMjQzZDYtZWMwNS00YTg0LTkzNDktNzc5YTI1YjQ4YzkyXC9kZWl4dmptLWViN2ZmM2M2LWI5OTktNGQwNy04MDRhLTg4ZWJmYTg5NjhhYS5wbmciLCJ3aWR0aCI6Ijw9MTI4MCJ9XV0sImF1ZCI6WyJ1cm46c2VydmljZTppbWFnZS5vcGVyYXRpb25zIl19.YG0ABhcre5NIwkjspfvti9Zi_SoHjly7SC-TZyNNLDk); background-repeat: no-repeat; background-size:cover; background-position: center; min-height:200px; max-width:200px;" class="card-block h-0" >
<a href="CREDIT LINK" class="text-white" style="position:absolute; bottom:7px; left:10px; font-size:10px; opacity:0.35;" data-toggle="tooltip" title="img credit"><i class="fas fa-image"></i> </a>
</div>
</div>
<div class="col-6">
<div class="card card-block bg-faded" style="background-color:#15158A;">
<p style="text-align: center;"><span style="font-size: 25px;"><i class="far fa-sun"> </i><strong>TITLE</strong> <i class="fas fa-sun"></span></p>
<!-- change the icons on https://fontawesome.com/icons?d=gallery&p=2 if you need to (keep the fa- part, change the "far/fas" part to change the appearence) -->
</div>
<div class="card card-block bg-faded my-2" style="background-color:#15158A; max-height:150px; min-height:135px; overflow:auto;">
<div class="col-12 justify-content-between" style="text-align: center;"><strong>Name</strong> info</div>
<div class="col-12 justify-content-between" style="text-align: center;"><strong>Age</strong> info</div>
<div class="col-12 justify-content-between" style="text-align: center;"><strong>Gender</strong> info</div>
<div class="col-12 justify-content-between" style="text-align: center;"><strong>Species</strong> info</div>
<div class="col-12 justify-content-between" style="text-align: center;"><strong>Orientation</strong> info</div>
</div>
<!-- you can change the labels for this part, maybe to "worth" or "birthday" or "favorite color", idk you decide -->
<div style="background: url(https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/2de243d6-ec05-4a84-9349-779a25b48c92/deixvjm-eb7ff3c6-b999-4d07-804a-88ebfa8968aa.png/v1/fill/w_1147,h_696,q_70,strp/img_by_mcdogwarrior_deixvjm-pre.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9Nzc3IiwicGF0aCI6IlwvZlwvMmRlMjQzZDYtZWMwNS00YTg0LTkzNDktNzc5YTI1YjQ4YzkyXC9kZWl4dmptLWViN2ZmM2M2LWI5OTktNGQwNy04MDRhLTg4ZWJmYTg5NjhhYS5wbmciLCJ3aWR0aCI6Ijw9MTI4MCJ9XV0sImF1ZCI6WyJ1cm46c2VydmljZTppbWFnZS5vcGVyYXRpb25zIl19.YG0ABhcre5NIwkjspfvti9Zi_SoHjly7SC-TZyNNLDk); background-repeat: no-repeat; background-size:cover; background-position: center; min-height:60px; max-width:500px;" class="card-block h-0" >
<a href="CREDIT LINK" class="text-white" style="position:absolute; bottom:302px; right:15px; font-size:10px; opacity:0.35;" data-toggle="tooltip" title="img credit"><i class="fas fa-image"></i> </a>
<div class="progress" style="height:5px;"><div class="progress-bar " style="width:0%;background-color:#B993FF;"><br></div><div class="progress-bar"style="width: 100%;background-color: #6E26D0;"><br></div></div>
<div class="row">
<div class="col-2">
<div class="card card-block bg-faded my-2" style="background-color:#818181; max-height:100px;"></div>
</div>
<div class="col-2">
<div class="card card-block bg-faded my-2" style="background-color:#818181; max-height:100px;"></div>
</div>
<div class="col-2">
<div class="card card-block bg-faded my-2" style="background-color:#818181; max-height:100px;"></div>
</div>
<div class="col-2">
<div class="card card-block bg-faded my-2" style="background-color:#818181; max-height:100px;"></div>
</div>
<div class="col-2">
<div class="card card-block bg-faded my-2" style="background-color:#818181; max-height:100px;"></div>
</div>
<div class="col-2">
<div class="card card-block bg-faded my-2" style="background-color:#818181; max-height:100px;"></div>
</div>
<!-- color palette, change the card colors to the character's color scheme -->
</div>
<div class="progress" style="height:5px;"><div class="progress-bar " style="width:0%;background-color:#B993FF;"><br></div><div class="progress-bar"style="width: 100%;background-color: #6E26D0;"><br></div></div></div>
<div class="card card-block bg-faded my-2" style="background-color:#15158A; max-height:250px; min-height:250px; overflow:auto;">
<a style="text-align: left;"><span style="font-size: 18px;"><u>Header</u> <i class="fas fa-sun"></span></p>
<a>words words words, typing stuff, words words words</p>
<a>blahda blahda blah</p>
<a>yadda yadda yooder</p>
<a style="text-align: right;"><span style="font-size: 18px;"><i class="far fa-sun"> </i><u>Header</u></span></p>
<a style="text-align: right;">bloodee blahdee bloo</p>
<a style="text-align: right;">surely this is what people say when they talk</p>
<a style="text-align: right;">box scrolls if it gets full</p>
</div>
<!-- information, maybe like a personality description or small backstory -->
<p><div align="center"><audio controls="" style="background:rgb(110, 38, 208);padding:4px;border-radius:40px;min-width:425px;height:35px;"><source src="SONG URL"><br></audio></p>
<!-- music, maybe what the character's based on, what their favorite jam is, or just their theme song -->
<a href="CREDIT LINK" class="text-white" style="position:absolute; bottom:5px; left:13px; font-size:10px; opacity:0.35;" data-toggle="tooltip" title="msc credit"><i class="fas fa-music"></i> </a>
</div>
</div>
<div class="col-3">
<div style="background: url(https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/2de243d6-ec05-4a84-9349-779a25b48c92/deixvjm-eb7ff3c6-b999-4d07-804a-88ebfa8968aa.png/v1/fill/w_1147,h_696,q_70,strp/img_by_mcdogwarrior_deixvjm-pre.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9Nzc3IiwicGF0aCI6IlwvZlwvMmRlMjQzZDYtZWMwNS00YTg0LTkzNDktNzc5YTI1YjQ4YzkyXC9kZWl4dmptLWViN2ZmM2M2LWI5OTktNGQwNy04MDRhLTg4ZWJmYTg5NjhhYS5wbmciLCJ3aWR0aCI6Ijw9MTI4MCJ9XV0sImF1ZCI6WyJ1cm46c2VydmljZTppbWFnZS5vcGVyYXRpb25zIl19.YG0ABhcre5NIwkjspfvti9Zi_SoHjly7SC-TZyNNLDk); background-repeat: no-repeat; background-size:cover; background-position: center; min-height:200px; max-width:200px;" class="card-block h-0" >
<a href="CREDIT LINK" class="text-white" style="position:absolute; bottom:450px; left:10px; font-size:10px; opacity:0.35;" data-toggle="tooltip" title="img credit"><i class="fas fa-image"></i> </a>
</div>
<br>
<div style="background: url(https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/2de243d6-ec05-4a84-9349-779a25b48c92/deixvjm-eb7ff3c6-b999-4d07-804a-88ebfa8968aa.png/v1/fill/w_1147,h_696,q_70,strp/img_by_mcdogwarrior_deixvjm-pre.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9Nzc3IiwicGF0aCI6IlwvZlwvMmRlMjQzZDYtZWMwNS00YTg0LTkzNDktNzc5YTI1YjQ4YzkyXC9kZWl4dmptLWViN2ZmM2M2LWI5OTktNGQwNy04MDRhLTg4ZWJmYTg5NjhhYS5wbmciLCJ3aWR0aCI6Ijw9MTI4MCJ9XV0sImF1ZCI6WyJ1cm46c2VydmljZTppbWFnZS5vcGVyYXRpb25zIl19.YG0ABhcre5NIwkjspfvti9Zi_SoHjly7SC-TZyNNLDk); background-repeat: no-repeat; background-size:cover; background-position: center; min-height:200px; max-width:200px;" class="card-block h-0" >
<a href="CREDIT LINK" class="text-white" style="position:absolute; bottom:229px; left:10px; font-size:10px; opacity:0.35;" data-toggle="tooltip" title="img credit"><i class="fas fa-image"></i> </a>
</div>
<br>
<div style="background: url(https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/2de243d6-ec05-4a84-9349-779a25b48c92/deixvjm-eb7ff3c6-b999-4d07-804a-88ebfa8968aa.png/v1/fill/w_1147,h_696,q_70,strp/img_by_mcdogwarrior_deixvjm-pre.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9Nzc3IiwicGF0aCI6IlwvZlwvMmRlMjQzZDYtZWMwNS00YTg0LTkzNDktNzc5YTI1YjQ4YzkyXC9kZWl4dmptLWViN2ZmM2M2LWI5OTktNGQwNy04MDRhLTg4ZWJmYTg5NjhhYS5wbmciLCJ3aWR0aCI6Ijw9MTI4MCJ9XV0sImF1ZCI6WyJ1cm46c2VydmljZTppbWFnZS5vcGVyYXRpb25zIl19.YG0ABhcre5NIwkjspfvti9Zi_SoHjly7SC-TZyNNLDk); background-repeat: no-repeat; background-size:cover; background-position: center; min-height:200px; max-width:200px;" class="card-block h-0" >
<a href="CREDIT LINK" class="text-white" style="position:absolute; bottom:7px; left:10px; font-size:10px; opacity:0.35;" data-toggle="tooltip" title="img credit"><i class="fas fa-image"></i> </a>
</div>
</div>
</div>
</div>
<p style="text-align: right;"><span style="font-size: 9px;">Code by <a href="https://toyhou.se/MCDogResource" id="">MCDogWarrior</a></span></p>
</div>
</div>