- Created
- 1 year, 4 months ago
- Creator
- MCDogResource
- Favorites
- 0
Profile
<div class="container-fluid my-1" style="color:#ffffff;width:1000px;">
<!--Main card-->
<div class="card bg-faded rounded-0 border-0 p-1">
<div class="row no-gutters">
<div class="col-2">
<!--Character icon (I reccomend 200x200 or larger)-->
<div class="card rounded-0 border-0 mt-2 ml-2" style="background-image:url( image link ); background-size:cover; background-position: center; height:145px">
</div>
</div>
<div class="col-5">
<!--Middle box-->
<div class="card bg-dark rounded-0 ml-2 mr-2 card-outline-primary" style="height:155px; border-width:5px">
<!--Character Name-->
<p style="font-size: 60px; text-align: center; letter-spacing: 2px;" class="mt-4"><strong>NAME</strong></p>
</div>
</div>
<div class="col-5">
<!--Right aesthetic image-->
<div class="card rounded-0 border-0" style="background-image:url( image here ); background-size:cover; background-position: bottom; height:155px">
<!--Lines over image-->
<a style="position:absolute; bottom:0px; left:0px; font-size:50px;"><i class="fas fa-horizontal-rule"></i> </a>
<a style="position:absolute; bottom:0px; left:55px; font-size:50px;"><i class="fas fa-horizontal-rule"></i> </a>
<a style="position:absolute; bottom:0px; left:110px; font-size:50px;"><i class="fas fa-horizontal-rule"></i> </a>
<!--* I reccomend changing this icon if you want an even icon in the middle-->
<a style="position:absolute; bottom:0px; left:165px; font-size:50px;"><i class="fas fa-horizontal-rule"></i> </a>
<!--*-->
<a style="position:absolute; bottom:0px; left:220px; font-size:50px;"><i class="fas fa-horizontal-rule"></i> </a>
<a style="position:absolute; bottom:0px; left:275px; font-size:50px;"><i class="fas fa-horizontal-rule"></i> </a>
<a style="position:absolute; bottom:0px; left:330px; font-size:50px;"><i class="fas fa-horizontal-rule"></i> </a>
</div>
</div>
</div>
<div class="row my-2">
<div class="col-4">
<!--Basic info card-->
<div class="card bg-faded rounded-0 card-outline-primary" style="border-width:2px">
<!--Icon in the background, change size if needed, uses FontAwesome icons-->
<a style="position:absolute; bottom:0px; left:10px; font-size:120px; opacity:0.25;"><i class="fas fa-id-card text-secondary"></i> </a>
<!--Age-->
<div class="col-12 justify-content-between mt-1" style="text-align: center; font-size: 15px;"><span class="text-primary"><strong>Age</strong></span> info</div>
<!--Gender-->
<div class="col-12 justify-content-between" style="text-align: center; font-size: 15px;"><span class="text-primary"><strong>Gender</strong></span> info</div>
<!--Species-->
<div class="col-12 justify-content-between" style="text-align: center; font-size: 15px;"><span class="text-primary"><strong>Species</strong></span> info</div>
<!--Race-->
<div class="col-12 justify-content-between" style="text-align: center; font-size: 15px;"><span class="text-primary"><strong>Race</strong></span> info</div>
<!--Orientation-->
<div class="col-12 justify-content-between" style="text-align: center; font-size: 15px;"><span class="text-primary"><strong>Orientation</strong></span> info</div>
<!--Height-->
<div class="col-12 justify-content-between" style="text-align: center; font-size: 15px;"><span class="text-primary"><strong>Occupation</strong></span> info</div>
<!--Role-->
<div class="col-12 justify-content-between" style="text-align: center; font-size: 15px;"><span class="text-primary"><strong>Role</strong></span> info</div>
<!--Occupation/Career-->
<div class="col-12 justify-content-between" style="text-align: center; font-size: 15px;"><span class="text-primary"><strong>Height</strong></span> info</div>
<br>
<!--Designer-->
<div class="col-12 justify-content-between mb-2" style="text-align: center; font-size: 15px;"><span class="text-primary"><strong>Designer</strong></span>
<!--Link-->
<a class="text-secondary" href="link here">info</a></div>
</div>
</div>
<div class="col-3">
<!--Central Aesthetic image-->
<div class="card rounded-0 border-0" style="background-image:url( image here ); background-size:cover; background-position: center; height:235px;">
<!--Transparency over image-->
<div class="card bg-faded rounded-0 border-0" style="background-color:rgba(0,0,0,0.65); height:235px">
<!--Quote (change the "mt-1" to a higher number to adjust the position)-->
<p style="font-size: 25px; text-align: center; letter-spacing: 2px;" class="mt-1">" quote here "</p>
</div>
</div>
</div>
<div class="col-5">
<!--Likes box-->
<div class="card bg-faded rounded-0 card-outline-primary" style="border-width:2px">
<!--Icon in bg-->
<a style="position:absolute; bottom:0px; right:10px; font-size:80px; opacity:0.25;"><i class="fas fa-check text-secondary"></i> </a>
<!--Likes-->
<p style="font-size: 20px; text-align: center; letter-spacing: 2px;" class="mt-1 text-primary">Likes</p>
<!--List-->
<ul style="list-style-type: circle; font-size: 15px;">
<li>something they like</li>
<li>or something they cherish</li>
<li>or something they enjoy doing</li>
</ul>
</div>
<!--Dislikes box-->
<div class="card bg-faded rounded-0 card-outline-primary" style="border-width:2px">
<!--Icon in bg-->
<a style="position:absolute; bottom:0px; right:10px; font-size:80px; opacity:0.25;"><i class="fas fa-times text-secondary"></i> </a>
<!--Dislikes-->
<p style="font-size: 20px; text-align: center; letter-spacing: 2px;" class="mt-1 text-primary">Dislikes</p>
<!--List-->
<ul style="list-style-type: circle; font-size: 15px;">
<li>something they don't like</li>
<li>or something they despise doing</li>
<li>etc etc</li>
</ul>
</div>
</div>
</div>
<div class="row no-gutters">
<div class="col-6">
<!--Personality box-->
<div class="card bg-faded rounded-0 p-1 card-outline-primary" style="border-width:2px">
<!--Personality-->
<p style="font-size: 20px; text-align: center; letter-spacing: 2px;" class="mt-1 text-primary">Personality</p>
<!--Text box-->
<div class="card bg-faded rounded-0 border-0 p-1" style="height:150px; overflow:auto;">
<!--Icon in bg-->
<a style="position:absolute; top:-10px; left:10px; font-size:100px; opacity:0.25;"><i class="fas fa-user text-secondary"></i> </a>
<!--Words-->
<p style="text-align: justify; font-size: 15px; font-family: 'book antiqua', palatino;" class="p-1">Type a whole lotta stuff here. Stuff about the character, how they act, how they feel, demeanor, etc. You know the drill, the box scrolls</p>
<a style="text-align: justify; font-size: 15px; font-family: 'book antiqua', palatino;" class="p-1">Oh- and here's another paragraph in case things get detailed. Also I wanna show off the box scrolling cus it's cool and stuff. Filler filler blah blah yadda yadda blah blahdadee blahdadee bloo oh there it goes</p>
</div>
</div>
</div>
<div class="col-6">
<!--Trivia box-->
<div class="card bg-faded rounded-0 ml-2 card-outline-primary" style="border-width:2px">
<!--Trivia-->
<p style="font-size: 25px; text-align: center; letter-spacing: 2px;" class="mt-1 text-primary">Trivia</p>
<!--Text box-->
<div class="card bg-faded rounded-0 border-0 p-1" style="height:151px; overflow:auto;">
<!--Icon in bg-->
<a style="position:absolute; top:-10px; right:10px; font-size:100px; opacity:0.25;"><i class="fas fa-question text-secondary"></i> </a>
<!--List-->
<ul style="list-style-type: circle; font-size: 16px; font-family: 'book antiqua', palatino;">
<li>this is basically like the box to the left</li>
<li>but it's combined with the likes thing</li>
<li>just type all the stuff ya want</li>
<li>cus the box scrolls</li>
<li>refer to something
<!--Reference link-->
<a class="text-secondary" href="ur dad" id=""><sup>[ref]</sup></span></li>
</div>
</div>
</div>
</div>
</div>
<!--Code credit- DO NOT REMOVE-->
<p style="text-align: right;"><span style="font-size: 9px;">Code by <a href="https://toyhou.se/MCDogResource" id="">MCDogWarrior</a></span></p>
</div>
Recent Images
No images.