- Created
- 1 year, 4 months ago
- Creator
- MCDogResource
- Favorites
- 1
Profile
<div class="container-fluid text-white" style="max-width:1100px;">
<!--Main/background image-->
<div class="card rounded-0 border-0 p-1 mx-auto my-5" style="background-image:url( imglink ); background-size:cover; background-position: center; width:600px; height:600px">
</div>
<!--Character name card-->
<div class="card bg-faded rounded-0 border-0 p-1 mt-2 mr-2 ml-2" style="background-color:#180a09; position:absolute; top:-35px; left:180px; height:100px; width:270px;">
<!--Character name-->
<p class="my-auto" style="font-size: 35px; text-align: center; letter-spacing: 1px;">Character name</p>
<!--Translucent icon hidden in back-->
<i class="fas fa-clouds-moon" style="position:absolute; top:15px; left:40px; font-size:70px; opacity:0.1"></i>
<!--top trapezoid over card-->
<div class="card border-0 mx-auto rounded-0" style="height:20px; width:150px; clip-path:polygon(100% 0%,0% 0%,0% 0%,0% 0%,0% 50%,0% 100%,90% 100%); background-color:#4a2a23; position:absolute; top:-5px; left:5px;">
</div>
<!--bottom trapezoid-->
<div class="card border-0 mx-auto rounded-0" style="height:20px; width:150px; clip-path:polygon(100% 0%,0% 0%,0% 0%,0% 0%,10% 0%,0% 100%,100% 100%); background-color:#4a2a23; position:absolute; top:85px; left:125px;">
</div>
</div>
<!--Basics card (top right)-->
<div class="card bg-faded rounded-0 border-0 p-1 mt-2 mr-2 ml-2" style="background-color:#180a09; position:absolute; top:-20px; right:100px; height:340px; width:250px;">
<!--Basics trapezoid + header-->
<p class="card border-0 mx-auto rounded-0" style="height:40px; width:200px; font-size:24px; margin-top:-10px; clip-path:polygon(100% 0%,0% 0%,0% 0%,0% 0%,0% 50%,0% 100%,90% 100%); background-color:#4a2a23"><span class="ml-5">Basics</span></p>
<!--large icon over trapezoid-->
<i class="fas fa-moon" style="position:absolute; top:-40px; left:35px; font-size:70px; transform:rotate(70deg); color:#f8c65e"></i>
<!--small icon-->
<i class="fas fa-stars" style="position:absolute; top:15px; right:85px; font-size:25px; color:#f8c65e"></i>
<!--Age card-->
<p class="card border-0 rounded-0 mt-1" style="height:30px; width:150px; font-size:20px; margin-left:-10px; text-align:center; background-color:#692921">Age
<!--translucent icon in back-->
<i class="fas fa-birthday-cake" style="position:absolute; top:2px; left:35px; font-size:25px; opacity:0.15; transform:rotate(10deg)"></i></p>
<!--Gender card-->
<p class="card border-0 rounded-0 ml-auto" style="height:30px; width:150px; font-size:20px; margin-left:-10px; text-align:center; background-color:#692921">Gender
<!--translucent icon in back-->
<i class="fas fa-venus-mars" style="position:absolute; top:2px; left:35px; font-size:25px; opacity:0.15; transform:rotate(10deg)"></i></p>
<!--Species card-->
<p class="card border-0 rounded-0" style="height:30px; width:150px; font-size:20px; margin-left:-10px; text-align:center; background-color:#692921">Species
<!--translucent icon in back-->
<i class="fas fa-paw" style="position:absolute; top:2px; left:35px; font-size:25px; opacity:0.15; transform:rotate(10deg)"></i></p>
<!--Orientation card-->
<p class="card border-0 rounded-0 ml-auto" style="height:30px; width:150px; font-size:20px; margin-left:-10px; text-align:center; background-color:#692921">Orientation
<!--translucent icon in back-->
<i class="fas fa-flame" style="position:absolute; top:2px; left:35px; font-size:25px; opacity:0.15; transform:rotate(10deg)"></i></p>
<!--Role card-->
<p class="card border-0 rounded-0" style="height:30px; width:150px; font-size:20px; margin-left:-10px; text-align:center; background-color:#692921">Role
<!--translucent icon in back-->
<i class="fas fa-user" style="position:absolute; top:2px; left:35px; font-size:25px; opacity:0.15; transform:rotate(10deg)"></i></p>
<!--Height card-->
<p class="card border-0 rounded-0 ml-auto" style="height:30px; width:150px; font-size:20px; margin-left:-10px; text-align:center; background-color:#692921">Height
<!--translucent icon in back-->
<i class="fas fa-ruler" style="position:absolute; top:2px; left:35px; font-size:25px; opacity:0.15; transform:rotate(10deg)"></i>
</p>
<!--trapezoid at bottom-->
<div class="card border-0 mx-auto rounded-0" style="height:15px; width:150px; clip-path:polygon(100% 0%,0% 0%,0% 0%,0% 0%,10% 0%,0% 100%,100% 100%); background-color:#4a2a23; position:absolute; bottom:-2px; right:-2px;">
</div>
</div>
<!--Stats card (bottom right)-->
<div class="card bg-faded rounded-0 border-0 p-1 mt-2 mr-2 ml-2" style="background-color:#180a09; position:absolute; bottom:-20px; right:130px; height:270px; width:400px;">
<!--Stats trapezoid + header-->
<p class="card border-0 ml-auto rounded-0" style="height:40px; width:200px; font-size:24px; margin-top:-10px; clip-path:polygon(100% 0%,0% 0%,0% 0%,0% 90%,0% 0%,10% 100%,100% 100%); background-color:#4a2a23; text-align:right"><span class="mr-5">Stats</span></p>
<!--icon over trapezoid-->
<i class="fas fa-stars fa-flip-horizontal" style="position:absolute; top:-20px; right:5px; font-size:50px; color:#f8c65e"></i>
<!--Intelligence card-->
<div class="card bg-faded border-0 rounded-0 p-1 mt-2 mr-2 ml-2" style="background-color:#692921;">
<!--Intelligence label-->
<p class="mb-1" style="font-size: 16px; text-align: center;">Intelligence</p>
<!--lesser icon on far left-->
<i class="far fa-brain" style="position:absolute; top:20px; left:5px; font-size:15px;"></i>
<!--greater icon on far right-->
<i class="fas fa-brain" style="position:absolute; top:20px; right:5px; font-size:15px;"></i>
<!--percent bar-->
<div class="progress bg-faded rounded-0">
<div class="progress-bar" style="width: 50%; height: 12px; background-color: #df7529">
</div>
</div>
</div>
<!--Compassion card-->
<div class="card bg-faded border-0 rounded-0 p-1 mt-2 mr-2 ml-2" style="background-color:#692921;">
<!--Compassion laebel-->
<p class="mb-1" style="font-size: 16px; text-align: center;">Compassion</p>
<!--lesser icon on far left-->
<i class="far fa-heart" style="position:absolute; top:20px; left:5px; font-size:15px;"></i>
<!--greater icon on far right-->
<i class="fas fa-heart" style="position:absolute; top:20px; right:5px; font-size:15px;"></i>
<!--percent bar-->
<div class="progress bg-faded rounded-0">
<div class="progress-bar" style="width: 50%; height: 12px; background-color: #df7529">
</div>
</div>
</div>
<!--Creativity card-->
<div class="card bg-faded border-0 rounded-0 p-1 mt-2 mr-2 ml-2" style="background-color:#692921;">
<!--Creativity label-->
<p class="mb-1" style="font-size: 16px; text-align: center;">Creativity</p>
<!--lesser icon on far left-->
<i class="far fa-brush" style="position:absolute; top:20px; left:5px; font-size:15px;"></i>
<!--greater icon on far right-->
<i class="fas fa-brush" style="position:absolute; top:20px; right:5px; font-size:15px;"></i>
<!--percent bar-->
<div class="progress bg-faded rounded-0">
<div class="progress-bar" style="width: 50%; height: 12px; background-color: #df7529">
</div>
</div>
</div>
<!--Courage card-->
<div class="card bg-faded border-0 rounded-0 p-1 mt-2 mr-2 ml-2" style="background-color:#692921;">
<!--Courage label-->
<p class="mb-1" style="font-size: 16px; text-align: center;">Courage</p>
<!--lesser icon on far left-->
<i class="far fa-shield" style="position:absolute; top:20px; left:5px; font-size:15px;"></i>
<!--greater icon on far right-->
<i class="fas fa-shield" style="position:absolute; top:20px; right:5px; font-size:15px;"></i>
<!--percent bar-->
<div class="progress bg-faded rounded-0">
<div class="progress-bar" style="width: 50%; height: 12px; background-color: #df7529">
</div>
</div>
</div>
<!--bottom trapezoid-->
<div class="card border-0 mx-auto rounded-0" style="height:15px; width:150px; clip-path:polygon(100% 0%,0% 0%,0% 0%,0% 0%,10% 0%,0% 100%,100% 100%); background-color:#4a2a23; position:absolute; bottom:-7px; right:-5px;">
<!--code credit (do not remove/alter)-->
<p class="mr-1" style="text-align: right; font-size: 9px;">Code by <a href="https://toyhou.se/MCDogResource" style="color:#df7529">MCDogWarrior</a></span></p>
</div>
</div>
<!--Trivia card (bottom left)-->
<div class="card bg-faded rounded-0 border-0 p-1 mt-2 mr-2 ml-2" style="background-color:#180a09; position:absolute; bottom:-25px; left:145px; height:240px; width:400px;">
<!--Trivia trapezoid + header-->
<p class="card border-0 ml-3 rounded-0" style="height:40px; width:200px; font-size:24px; margin-top:-10px; clip-path:polygon(100% 0%,0% 0%,0% 0%,0% 0%,0% 50%,0% 100%,90% 100%); background-color:#4a2a23"><span class="ml-5">Trivia</span></p>
<!--slightly larger icon-->
<i class="fas fa-star" style="position:absolute; top:-10px; left:15px; font-size:20px; color:#f8c65e"></i>
<!--slightly smaller icon-->
<i class="fas fa-star" style="position:absolute; top:15px; left:10px; font-size:14px; color:#f8c65e"></i>
<!--fact card 1-->
<p class="card border-0 rounded-0 p-1" style="min-height:1px; min-width:1px; font-size:16px; margin-left:-10px; background-color:#692921"> Just a whole lotta fun facts about the character. Actually try to keep it concise if possible</p>
<!--fact card 2-->
<p class="card border-0 rounded-0 p-1" style="min-height:1px; min-width:1px; font-size:16px; margin-left:-10px; background-color:#692921"> if you can't then oh well</p>
<!--fact card 3-->
<p class="card border-0 rounded-0 p-1" style="min-height:1px; min-width:1px; font-size:16px; margin-left:-10px; background-color:#692921"> I suppose if you know how to you can adjust this or something idk how you'd do that</p>
<!--add more if needed under here-->
<!---->
</div>
<!--bottom trapezoid-->
<div class="card border-0 mx-auto rounded-0" style="height:15px; width:150px; clip-path:polygon(100% 100%,90% 0%,50% 0%,0% 0%,0% 50%,0% 100%,100% 100%); background-color:#4a2a23; position:absolute; bottom:-33px; left:148px;">
</div>
<!--Info card (top left)-->
<div class="card bg-faded rounded-0 border-0 p-1 mt-2 mr-2 ml-2" style="background-color:#180a09; position:absolute; top:90px; left:130px; height:270px; width:400px;">
<!--Info trapezoid + header-->
<p class="card border-0 ml-auto rounded-0" style="height:40px; width:200px; font-size:24px; margin-top:-10px; clip-path:polygon(100% 0%,0% 0%,0% 0%,0% 90%,0% 0%,10% 100%,100% 100%); background-color:#4a2a23; text-align:right"><span class="mr-5">Info</span></p>
<!--biggest icon-->
<i class="fas fa-star" style="position:absolute; top:-10px; left:15px; font-size:30px; color:#f8c65e; transform:rotate(10deg)"></i>
<!--smaller icon-->
<i class="fas fa-star" style="position:absolute; top:-10px; left:-5px; font-size:15px; color:#f8c65e; transform:rotate(20deg)"></i>
<!--smallest icon-->
<i class="fas fa-star" style="position:absolute; top:10px; left:-5px; font-size:8px; color:#f8c65e; transform:rotate(15deg)"></i>
<!--Info text card-->
<p class="card border-0 rounded-0 p-1" style="height:200px; min-width:1px; font-size:15px; margin-right:-10px; background-color:#692921; overflow-y:auto"> Alright so here's the part where you write about the character and stuff. Take up as much as you need because- and maybe you won't believe this- but the box scrolls.</p>
</div>
<!--bottom trapezoid-->
<div class="card border-0 mx-auto rounded-0" style="height:15px; width:150px; clip-path:polygon(100% 100%,90% 0%,50% 0%,0% 0%,0% 50%,0% 100%,100% 100%); background-color:#4a2a23; position:absolute; top:355px; left:135px;">
</div>
<!--small rotated square in middle, behind circle icons-->
<div class="card border-0 mx-auto rounded-0" style="height:50px; width:50px; transform:rotate(45deg); background-color:#df7529; position:absolute; top:240px; right:470px;">
</div>
<!--small circle image behind larger circle-->
<div class="card p-1 mx-auto my-5 rounded-circle" style="background-image:url( imglink ); background-size:cover; background-position: center; width:130px; height:130px; position:absolute; top:98px; right:380px; border:3px dotted #f8c65e;">
</div>
<!--large circle image-->
<div class="card p-1 mx-auto my-5 rounded-circle" style="background-image:url( imglink ); background-size:cover; background-position: center; width:200px; height:200px; position:absolute; top:-80px; right:400px; border:5px dotted #f8c65e;">
</div>
<!--largest icon over large circle image-->
<i class="fas fa-circle" style="position:absolute; top:10px; right:580px; font-size:30px; color:#f8c65e"></i>
<!--smaller icon over small circle image-->
<i class="fas fa-circle" style="position:absolute; top:260px; right:400px; font-size:15px; color:#f8c65e"></i>
<!--less small icon over small circle image-->
<i class="fas fa-circle" style="position:absolute; top:180px; right:500px; font-size:17px; color:#f8c65e"></i>
<!--larger icon over large circle image-->
<i class="fas fa-circle" style="position:absolute; top:30px; right:390px; font-size:20px; color:#f8c65e"></i>
<!--smallest icon next to rotated square-->
<i class="fas fa-circle" style="position:absolute; top:300px; right:500px; font-size:13px; color:#f8c65e"></i>
</div>
Recent Images
No images.