- Created
- 1 year, 5 months ago
- Creator
- MCDogResource
- Favorites
- 0
Profile
<div class="container-fluid" style="max-width:1000px;">
<!-- Main card (dark bg & primary outline) -->
<div class="card bg-dark rounded-0 card-outline-primary" style="height:500px; border-width:3px; border-top-left-radius:20px; border-top-right-radius:20px;">
<!-- background image at top -->
<div class="card rounded-0 border-0" style="background-image:url( bglink ); background-size:cover; background-position: center; height:150px; width:964px; border-top-left-radius:20px; border-top-right-radius:20px;">
</div>
<!-- seperator under image -->
<div class="card bg-primary rounded-0 border-0" style="height:3px;">
</div>
<!-- left trapezoid -->
<div class="card bg-primary rounded-0 border-0 float-left ml-2" style="width:500px; height:50px; clip-path:polygon(100% 0%,0% 0%,0% 0%,0% 90%,0% 0%,10% 100%,100% 100%); margin-bottom:-50px">
</div>
<!-- right trapezoid -->
<div class="card bg-primary rounded-0 border-0 float-right mr-2" style="width:500px; height:50px; clip-path:polygon(100% 0%,0% 0%,0% 0%,0% 0%,0% 50%,0% 100%,90% 100%); margin-bottom:-50px; position:absolute; top:153px; right:0px;">
</div>
<!-- character icon (& outline) -->
<img src=" imglink " class="card mx-auto rounded-circle card-outline-secondary" style="height:200px; width:200px; border-width:5px; margin-top:-140px"></img>
<!-- character name pill -->
<p class="card bg-secondary border-0 mx-auto" style="min-height:30px; width:200px; font-size:18px; margin-top:-20px; border-top-left-radius:20px; border-top-right-radius:20px; border-bottom-left-radius:20px; border-bottom-right-radius:20px; text-align:center">character name</p>
<div class="row no-gutters">
<!-- Subjects block -->
<div class="col-4 p-1 mt-2">
<div class="card bg-secondary rounded-0 border-0 p-2" style="height:255px; border-top-left-radius:20px;">
<!-- header block -->
<div class="card bg-dark rounded-0 border-0 p-1 mb-2" style="height:40px; border-top-left-radius:20px;">
<!-- header text -->
<p class="my-auto text-primary" style="font-size:19px; text-align:center">- Subjects -</p>
</div>
<div class="row" style="overflow-y:auto">
<!-- positives list -->
<div class="col-6">
<p style="font-size:15px">
<i class="fas fa-check-circle text-success"></i> Long & detailed <br>
<i class="fas fa-check-circle text-success"></i> Crossovers <br>
<i class="fas fa-check-circle text-success"></i> Sensitive subjects <br>
<i class="fas fa-check-circle text-success"></i> Not serious <br>
<i class="fas fa-check-circle text-success"></i> Artwork permitted<br>
</p>
</div>
<!-- negatives list -->
<div class="col-6">
<p style="font-size:15px">
<i class="fas fa-times-circle text-danger"></i> Speedy <br>
<i class="fas fa-times-circle text-danger"></i> Offensive subjects <br>
<i class="fas fa-times-circle text-danger"></i> Fully serious <br>
<i class="fas fa-times-circle text-danger"></i> Out-of-story experiences <br>
</p>
</div>
</div>
</div>
</div>
<!-- Shipping block -->
<div class="col-4 p-1 mt-2">
<div class="card bg-secondary rounded-0 border-0 p-2" style="height:255px;">
<!-- header block -->
<div class="card bg-dark rounded-0 border-0 p-1 mb-2" style="height:40px;">
<!-- header text -->
<p class="my-auto text-primary" style="font-size:19px; text-align:center">- Shipping -</p>
</div>
<div class="row" style="overflow-y:auto">
<!-- positives list -->
<div class="col-6">
<p style="font-size:15px">
<i class="fas fa-check-circle text-success"></i> Pre-established <br>
<i class="fas fa-check-circle text-success"></i> Fast-moving <br>
<i class="fas fa-check-circle text-success"></i> w/ Real significant other <br>
<i class="fas fa-check-circle text-success"></i> Jokingly <br>
<i class="fas fa-check-circle text-success"></i> Romantically only<br>
</p>
</div>
<!-- negatives list -->
<div class="col-6">
<p style="font-size:15px">
<i class="fas fa-times-circle text-danger"></i> Out of nowhere <br>
<i class="fas fa-times-circle text-danger"></i> Slow-moving <br>
<i class="fas fa-times-circle text-danger"></i> With anyone <br>
<i class="fas fa-times-circle text-danger"></i> With friends/ aquaintences <br>
<i class="fas fa-times-circle text-danger"></i> All serious <br>
<i class="fas fa-times-circle text-danger"></i> Explicit <br>
</p>
</div>
</div>
</div>
</div>
<!-- Violence block -->
<div class="col-4 p-1 mt-2">
<div class="card bg-secondary rounded-0 border-0 p-2" style="height:255px; border-top-right-radius:20px;">
<!-- header block -->
<div class="card bg-dark rounded-0 border-0 p-1 mb-2" style="height:40px; border-top-right-radius:20px;">
<!-- header text -->
<p class="my-auto text-primary" style="font-size:19px; text-align:center">- Violence -</p>
</div>
<div class="row" style="overflow-y:auto">
<!-- positives list -->
<div class="col-6">
<p style="font-size:15px">
<i class="fas fa-check-circle text-success"></i> Sudden <br>
<i class="fas fa-check-circle text-success"></i> Built up <br>
<i class="fas fa-check-circle text-success"></i> Light violence <br>
<i class="fas fa-check-circle text-success"></i> Quick<br>
<i class="fas fa-check-circle text-success"></i> Character gets hurt<br>
<i class="fas fa-check-circle text-success"></i> Character hurts others<br>
</p>
</div>
<!-- negatives list -->
<div class="col-6">
<p style="font-size:15px">
<i class="fas fa-times-circle text-danger"></i> No violence ever <br>
<i class="fas fa-times-circle text-danger"></i> Detailed & gorey <br>
<i class="fas fa-times-circle text-danger"></i> Long-lasting <br>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- credit (DO NOT REMOVE/ALTER) -->
<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.