This is such an adorable layout *.* I have a Christmas elf character, this is a perfect fit for her.
Can I ask how I can change the brown color to red? I just can't find that part in the code, the only color code (like this: #B869A1) is for the character color palette part. Sorry if my question is stupid but I'm not expert with codes :(
Heya! I'm glad you like the code!! ^^
Basically it uses TH/bootstrap theme colours atm, for custom colours you gotta replace the text-danger and bg-danger classes with inline styles,,,
Wasn't sure how clear my explanation there was, so spoilered is a version using custom colours, you should be able to change them out a bit more easily working from there ^^
The hex code I used is #d45f5e ! Hope that helps :-)
<div class="container" style="max-width: 800px;"> <div class="card progress-bar-striped progress-bar-animated" style="background-color: #d45f5e; padding: 0; border: 0; border-radius: 2em 3em 3em 2em; padding-left: 4em;"> <div class="card bg-faded" style="border: 0; border-radius: 0 2em 2em 0;"> <!-- header section --> <div class="row no-gutters card-header" style="padding-top: 1.4em; border-radius: 0 2em 0 0;"> <h1 class="col-7" style="color: #d45f5e; font-family: georgia; font-weight: bold; font-size: 2em;"><i class="fad fa-candy-cane"></i> Candy Cane</h1> <!-- character name --> <p class="col-5 text-secondary" style="float: right; text-align: right; font-style: italic;">pronouns | story | other quick info</p> <!-- info --> </div> <!-- main profile content! --> <!-- I've included a variety of different segments here!! You should be able to move, delete, duplicate and modify them as you see fit fairly easily! I just wanted to provide lots of options ^^ --> <div class="row no-gutters card-block" style="max-height: 600px; overflow-y: auto; margin-bottom: 1em;"> <img src="https://f2.toyhou.se/file/f2-toyhou-se/users/admin?6?0" class="col-md-4 d-none d-sm-block"> <!-- bio image, not visible to mobile users! --> <!-- biography block! --> <div class="col-md-7" style="margin-left: 1.5em;"> <h3 style="color: #d45f5e; font-family: georgia; font-weight: bold;">Biography</h3> <!-- segment title --> <!-- segment content --> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <br><br> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> </div> <hr style="width: 90%;"> <!-- stats block --> <!-- for info on how to edit these, have a look at https://getbootstrap.com/docs/5.0/components/progress/ !! --> <div class="col-9" style="margin-left: 1.5em;"> <h3 style="color: #d45f5e; font-family: georgia; font-weight: bold;">Stats</h3> <!-- segment title --> </div> <!-- intelligence --> <div class="col-6" style="padding: 0.5em;"> <span class="progress"> <span class="progress-bar progress-bar-striped" style="background-color: #d45f5e; width: 80%;" role="progressbar" aria-valuenow="8" aria-valuemin="0" aria-valuemax="10"><b>INTELLIGENCE</b></span> </span> </div> <!-- wisdom --> <div class="col-6" style="padding: 0.5em;"> <span class="progress"> <span class="progress-bar progress-bar-striped" style="background-color: #d45f5e; width: 80%" role="progressbar" aria-valuenow="8" aria-valuemin="0" aria-valuemax="10"><b>WISDOM</b></span> </span> </div> <!-- strength --> <div class="col-6" style="padding: 0.5em;"> <span class="progress"> <span class="progress-bar progress-bar-striped" style="background-color: #d45f5e; width: 80%" role="progressbar" aria-valuenow="8" aria-valuemin="0" aria-valuemax="10"><b>STRENGTH</b></span> </span> </div> <!-- dexterity --> <div class="col-6" style="padding: 0.5em;"> <span class="progress"> <span class="progress-bar progress-bar-striped" style="background-color: #d45f5e; width: 80%" role="progressbar" aria-valuenow="8" aria-valuemin="0" aria-valuemax="10"><b>DEXTERITY</b></span> </span> </div> <hr style="width: 90%;"> <!-- quote --> <h4 style="color: #d45f5e; font-family: georgia; margin: auto;"><i>"put a quote, or song lyrics here!"</i></h4> <hr style="width: 90%;"> <!-- history/ additional text only segment! --> <div style="margin-left: 1.5em;"> <h3 style="color: #d45f5e; font-family: georgia; font-weight: bold;">History</h3> <!-- segment title --> <!-- segment content --> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <br><br> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> </div> <hr style="width: 90%;"> <!-- colour pallet- edit the background-color attribute to change the colours! --> <div style="margin: auto; padding: 5px;"> <div style="background-color: #b869a1; height: 30px; width: 30px; border-radius: 50%; display: inline-block;"></div> <div style="background-color: #d17d74; height: 30px; width: 30px; border-radius: 50%; display: inline-block;"></div> <div style="background-color: #b869a1; height: 30px; width: 30px; border-radius: 50%; display: inline-block;"></div> <div style="background-color: #d17d74; height: 30px; width: 30px; border-radius: 50%; display: inline-block;"></div> <div style="background-color: #b869a1; height: 30px; width: 30px; border-radius: 50%; display: inline-block;"></div> <div style="background-color: #d17d74; height: 30px; width: 30px; border-radius: 50%; display: inline-block;"></div> <div style="background-color: #b869a1; height: 30px; width: 30px; border-radius: 50%; display: inline-block;"></div> </div> <hr style="width: 90%;"> <!-- playlist segment --> <div style="margin-left: 1.5em;"> <h3 style="color: #d45f5e; font-family: georgia; font-weight: bold;">Playlist</h3> <!-- segment title --> <ul class="fa-ul"> <li style="margin: 0.25em;"><span class="fa-li" style="color: #d45f5e;"><i class="fas fa-play"></i></span><a href="#" style="color: #d45f5e;">song name here</a> | artist name here</li> <li style="margin: 0.25em;"><span class="fa-li" style="color: #d45f5e;"><i class="fas fa-play"></i></span><a href="#" style="color: #d45f5e;">song name here</a> | artist name here</li> <li style="margin: 0.25em;"><span class="fa-li" style="color: #d45f5e;"><i class="fas fa-play"></i></span><a href="#" style="color: #d45f5e;">song name here</a> | artist name here</li> </ul> </div> <hr style="width: 90%;"> <!-- design notes --> <div style="margin-left: 1.5em;"> <h3 style="color: #d45f5e; font-family: georgia; font-weight: bold;">Design Notes</h3> <!-- segment title --> </div> <div class="row text-center" style="margin-left: 1.5em;"> <div class="btn btn-danger" style="margin: 0.25em;">design notes</div> <div class="btn btn-danger" style="margin: 0.25em;">you can put anything here!</div> <div class="btn btn-danger" style="margin: 0.25em;">I would reccomend</div> <div class="btn btn-danger" style="margin: 0.25em;">something short</div> <div class="btn btn-danger" style="margin: 0.25em;">and sweet</div> <div class="btn btn-danger" style="margin: 0.25em;">but!</div> <div class="btn btn-danger" style="margin: 0.25em;">it's up to you!!</div> </div> <hr style="width: 90%;"> <!-- relationships segment --> <h3 class="col-10" style="color: #d45f5e; font-family: georgia; font-weight: bold; margin-left: 1.5em;">Relationships</h3> <!-- segment title --> <!-- character relationship 1 --> <div class="col-3" style="margin: auto; padding: 0.5em;"> <a href="#" style="color: #d45f5e;"> <!-- link to the other character's bio here --> <img src="https://f2.toyhou.se/file/f2-toyhou-se/users/admin?6?0"> <!-- other character pfp --> <h5 class="text-center">Character name</h5> <!-- other character name --> </a> </div> <!-- character relationship 2 --> <div class="col-3" style="margin: auto; padding: 0.5em;"> <a href="#" style="color: #d45f5e;"> <!-- link to the other character's bio here --> <img src="https://f2.toyhou.se/file/f2-toyhou-se/users/admin?6?0"> <!-- other character pfp --> <h5 class="text-center">Character name</h5> <!-- other character name --> </a> </div> <!-- character relationship 3 --> <div class="col-3" style="margin: auto; padding: 0.5em;"> <a href="#" style="color: #d45f5e;"> <!-- link to the other character's bio here --> <img src="https://f2.toyhou.se/file/f2-toyhou-se/users/admin?6?0"> <!-- other character pfp --> <h5 class="text-center">Character name</h5> <!-- other character name --> </a> </div> <!-- character relationship 4 --> <div class="col-3" style="margin: auto; padding: 0.5em;"> <a href="#" style="color: #d45f5e;"> <!-- link to the other character's bio here --> <img src="https://f2.toyhou.se/file/f2-toyhou-se/users/admin?6?0"> <!-- other character pfp --> <h5 class="text-center">Character name</h5> <!-- other character name --> </a> </div> </div> <!-- footer! I've put the code credit here, but you're welcome to move it as long as it remains intact. This would also make a good place to add like,, any additional credits you might need to! --> <div class="row no-gutters card-footer" style="border-radius: 0 0 2em 0;"> <p class="text-secondary" style="margin: auto; font-style: italic;">code by [<a style="color: #d45f5e;" href="https://toyhou.se/snail-legs">snail-legs</a>]</p> </div> </div> </div> </div>
13. candy cane's Comments