- Created
- 1 year, 5 months ago
- Creator
- MCDogResource
- Favorites
- 0
Profile
<div class="container-fluid" style="max-width:1100px;">
<!--Background image-->
<div class="card rounded-0 border-0 p-1" style="background-image:url( IMG LINK ); background-size:cover; background-position: center;">
<div class="row no-gutters">
<div class="col-4 p-1">
<!--Main box, character 1-->
<div class="card bg-faded rounded-0 border-0 p-1" style="background-color:#81AADC; border-top-left-radius:15px;">
<!--Character 1 image-->
<a class="card rounded-0 border-0 p-2" style="background-image:url( IMG LINK ); background-size:cover; background-position: center; border-top-left-radius:15px; height:150px" href=" LINK ">
</a>
<!--Name box-->
<div class="card bg-faded rounded-0 ml-1 mr-1 my-1" style="background-color:#6079C5; border:5px solid #425AA4">
<p style="font-size: 45px; text-align: center; letter-spacing: 2px;" class="mb-1"><strong>NAME</strong></p>
</div>
<!--Age-->
<div class="card bg-faded rounded-0 border-0 p-1 mt-1 mr-2 ml-2" style="background-color:#425AA4;">
<div class="col-12 justify-content-between" style="text-align: center; font-size: 15px;"><strong>Age</strong></span> <i>info</i></div>
</div>
<!--Gender-->
<div class="card bg-faded rounded-0 border-0 p-1 my-1 mr-2 ml-2" style="background-color:#425AA4;">
<div class="col-12 justify-content-between" style="text-align: center; font-size: 15px;"><strong>Gender</strong></span> <i>info</i></div>
</div>
<!--Orientation-->
<div class="card bg-faded rounded-0 border-0 p-1 mr-2 ml-2 mb-1" style="background-color:#425AA4;">
<div class="col-12 justify-content-between" style="text-align: center; font-size: 15px;"><strong>Orientation</strong></span> <i>info</i></div>
</div>
<!--Species-->
<div class="card bg-faded rounded-0 border-0 p-1 mb-1 mr-2 ml-2" style="background-color:#425AA4;">
<div class="col-12 justify-content-between" style="text-align: center; font-size: 15px;"><strong>Species</strong></span> <i>info</i></div>
</div>
</div>
</div>
<div class="col-4 p-1">
<!--Middle image-->
<div class="card rounded-0 my-5" style="background-image:url( IMG LINK ); background-size:cover; background-position: center; border:5px solid #425AA4; height:291px">
<!--Translucent filter over image-->
<div class="card bg-faded rounded-0 border-0" style="background-color:rgba(68,91,164,0.65); height:291px">
<!--Compassion-->
<div class="card bg-faded rounded-0 border-0 p-1 mt-4 mr-2 ml-2" style="background-color:#445BA4;">
<p style="font-size: 15px; text-align: center; letter-spacing: 1px;">Compassion</p>
<div class="progress bg-dark rounded">
<!--Percent-->
<div class="progress-bar" style="width: 50%; height: 12px; background-color: #65DAED">
</div>
</div>
</div>
<!--Companionship-->
<div class="card bg-faded rounded-0 border-0 p-1 mt-2 mr-2 ml-2" style="background-color:#445BA4;">
<p style="font-size: 15px; text-align: center; letter-spacing: 1px;">Companionship</p>
<div class="progress bg-dark rounded">
<!--Percent-->
<div class="progress-bar" style="width: 50%; height: 12px; background-color: #65DAED">
</div>
</div>
</div>
<!--Trust-->
<div class="card bg-faded rounded-0 border-0 p-1 mt-2 mr-2 ml-2" style="background-color:#445BA4;">
<p style="font-size: 15px; text-align: center; letter-spacing: 1px;">Trust</p>
<div class="progress bg-dark rounded">
<!--Percent-->
<div class="progress-bar" style="width: 50%; height: 12px; background-color: #65DAED">
</div>
</div>
</div>
<!--Honesty-->
<div class="card bg-faded rounded-0 border-0 p-1 mt-2 mr-2 ml-2" style="background-color:#445BA4;">
<p style="font-size: 15px; text-align: center; letter-spacing: 1px;">Honesty</p>
<div class="progress bg-dark rounded">
<!--Percent-->
<div class="progress-bar" style="width: 50%; height: 12px; background-color: #65DAED">
</div>
</div>
</div>
<!--Understanding-->
<div class="card bg-faded rounded-0 border-0 p-1 mt-2 mr-2 ml-2" style="background-color:#445BA4;">
<p style="font-size: 15px; text-align: center; letter-spacing: 1px;">Understanding</p>
<div class="progress bg-dark rounded">
<!--Percent-->
<div class="progress-bar" style="width: 50%; height: 12px; background-color: #65DAED">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-4 p-1">
<!--Main box, character 2-->
<div class="card bg-faded rounded-0 border-0 p-1" style="background-color:#81AADC; border-top-right-radius:15px;">
<!--Character 2 image-->
<a class="card rounded-0 border-0 p-2" style="background-image:url( IMG LINK ); background-size:cover; background-position: center; border-top-right-radius:15px; height:150px" href=" LINK ">
</a>
<!--Name box-->
<div class="card bg-faded rounded-0 ml-1 mr-1 my-1" style="background-color:#6079C5; border:5px solid #425AA4">
<p style="font-size: 45px; text-align: center; letter-spacing: 2px;" class="mb-1"><strong>NAME</strong></p>
</div>
<!--Age-->
<div class="card bg-faded rounded-0 border-0 p-1 mt-1 mr-2 ml-2" style="background-color:#425AA4;">
<div class="col-12 justify-content-between" style="text-align: center; font-size: 15px;"><strong>Age</strong></span> <i>info</i></div>
</div>
<!--Gender-->
<div class="card bg-faded rounded-0 border-0 p-1 my-1 mr-2 ml-2" style="background-color:#425AA4;">
<div class="col-12 justify-content-between" style="text-align: center; font-size: 15px;"><strong>Gender</strong></span> <i>info</i></div>
</div>
<!--Orientation-->
<div class="card bg-faded rounded-0 border-0 p-1 mr-2 ml-2 mb-1" style="background-color:#425AA4;">
<div class="col-12 justify-content-between" style="text-align: center; font-size: 15px;"><strong>Orientation</strong></span> <i>info</i></div>
</div>
<!--Species-->
<div class="card bg-faded rounded-0 border-0 p-1 mb-1 mr-2 ml-2" style="background-color:#425AA4;">
<div class="col-12 justify-content-between" style="text-align: center; font-size: 15px;"><strong>Species</strong></span> <i>info</i></div>
</div>
</div>
</div>
</div>
<div class="row no-gutters">
<div class="col-6 mt-1 p-2">
<!--History main box-->
<div class="card bg-faded rounded-0 border-0 p-1" style="background-color:#81AADC;">
<!--Header-->
<div class="card bg-faded rounded-0 mx-auto my-1" style="background-color:#6079C5; border:5px solid #425AA4; width:400px">
<p style="font-size: 30px; text-align: center; letter-spacing: 2px;"><strong>HISTORY</strong></p>
</div>
<!--Text box-->
<div class="card bg-faded rounded-0 border-0" style="background-color:#81AADC; height:250px; overflow:auto;">
<p style="text-align: left; font-size: 15px; color:#23479B">How the characters met, how they got into their relationship, so on and so forth. Basically put how the characters got to know eachother and why they're still friends now</p>
<a style="text-align: left; font-size: 15px; color:#23479B">And yes, of course- to everyone's surprise- the box scrolls. Also you can change this box to anything else if there's not much history to these 2. idk man</p>
</div>
</div>
</div>
<div class="col-6 mt-1 p-2">
<!--Extra info/About main box-->
<div class="card bg-faded rounded-0 border-0 p-1" style="background-color:#81AADC;">
<!--Header-->
<div class="card bg-faded rounded-0 mx-auto my-1" style="background-color:#6079C5; border:5px solid #425AA4; width:400px">
<p style="font-size: 30px; text-align: center; letter-spacing: 2px;"><strong>ABOUT</strong></p>
</div>
<!--Text box-->
<div class="card bg-faded rounded-0 border-0" style="background-color:#81AADC; height:250px; overflow:auto;">
<p style="text-align: left; font-size: 15px; color:#23479B">How the characters feel about eachother basically. Their dynamic and stuff. Anything else you want to note about the relationship.</p>
<a style="text-align: left; font-size: 15px; color:#23479B">Don't worry, the box here also scrolls</p>
</div>
</div>
</div>
</div>
<div class="row no-gutters p-1">
<div class="col-3">
<!--Bottom left box-->
<div class="card bg-faded rounded-0 border-0 p-1" style="background-color:#81AADC; border-bottom-left-radius:15px;">
<!--Type of relationship-->
<div class="card bg-faded rounded-0 border-0 p-1 mt-1 mr-2 ml-2" style="background-color:#425AA4;">
<div class="col-12 justify-content-between" style="text-align: center; font-size: 15px;"><strong>Type</strong></span> <i>info</i></div>
</div>
<!--Relationship status-->
<div class="card bg-faded rounded-0 border-0 p-1 my-1 mr-2 ml-2" style="background-color:#425AA4;">
<div class="col-12 justify-content-between" style="text-align: center; font-size: 15px;"><strong>Status</strong></span> <i>info</i></div>
</div>
</div>
</div>
<div class="col-5">
<!--Quote background-->
<div class="card rounded-0" style="background-image:url( IMG LINK ); background-size:cover; background-position: center; height:80px; border:1px solid #425AA4;">
<!--Filter over bg-->
<div class="card bg-faded rounded-0" style="background-color:rgba(68,91,164,0.75); height:291px">
<!--Quote-->
<p style="font-size: 25px; text-align: center; letter-spacing: 1px;">"Quote..."</p>
</div>
</div>
</div>
<div class="col-4">
<!--Bottom right box-->
<div class="card bg-faded rounded-0 border-0 p-1" style="background-color:#81AADC; border-bottom-right-radius:15px;">
<!--Age difference-->
<div class="card bg-faded rounded-0 border-0 p-1 mt-1 mr-2 ml-2" style="background-color:#425AA4;">
<div class="col-12 justify-content-between" style="text-align: center; font-size: 15px;"><strong>Age difference</strong></span> <i>info</i></div>
</div>
<!--Height difference-->
<div class="card bg-faded rounded-0 border-0 p-1 my-1 mr-2 ml-2" style="background-color:#425AA4;">
<div class="col-12 justify-content-between" style="text-align: center; font-size: 15px;"><strong>Height difference</strong></span> <i>info</i></div>
</div>
</div>
</div>
</div>
<!--Code credit DO NOT REMOVE/ALTER-->
<p style="text-align: right;"><span style="font-size: 9px;">Code by <a href="https://toyhou.se/MCDogResource">MCDogWarrior</a></span></p>
</div>
</div>
Recent Images
No images.