<!------
[F2U] 2.Cropped
CODE BY MyUniverseinaBox @ TOYHOU.SE
//////// RULES ////////
-> Do not redistribute this template, it's for personal use only
-> Please keep credit somewhere visible
-> Feel free to change everything else to your liking
Thankyou for using this template!
accent colour: #a6b4d2
///// How to change accent colour:
- ctrl + f
- put this in colour code in: #a6b4d2
- click the '+' sign under the 'find' box
- in the 'replace with' box that appears, enter the colour you want
- then press 'all'
---------------------------------------------->
<!--------------------------------------------
MAIN CONTAINER + FONT SETUP
----------------------------------------------->
<div class="card container rounded-0 p-0" style="max-width:900px; font-size:.76rem; letter-spacing: .04rem; font-family:'avenir';">
<!--------------------------------------------
HEADER
----------------------------------------------->
<div class="row no-gutters">
<!--- [ LEFT ] -------------------->
<div class="col-md-5 col-10 my-auto pl-lg-5 pl-0">
<div class="row no-gutters mb-lg-0 mb-4">
<!--- MAIN AVATAR -------------->
<div class="col-lg-4">
<div class="card rounded-0 p-1 mt-lg-0 mt-4 mx-lg-0 mx-auto bg-transparent" style="z-index:20;height:100px;width:100px; border-width: 1px;">
<div class="card border-0 rounded-0 d-flex flex-fill" style="
background-image:url(IMG_HERE);
background-size:cover; background-position:center;">
</div>
</div>
</div>
<!--- MAIN AVATAR END -------------->
<!--- TITLE -------------->
<div class="col-lg-8 pl-2">
<!--- name -------------------->
<div class="text-lg-left text-center" style="font-family:'avenir'; letter-spacing:2px; font-size: 2rem;">
<span style="color:#a6b4d2;"> N</span>ame.
</div>
<!--- quote -------------------->
<div class="text-lg-left text-center ml-md-4 ml-0 font-italic" style="font-family:'avenir'; letter-spacing:2px; font-size: 1rem; opacity: .5;"> <i class="fad fa-quote-left" style="font-size: .9rem; opacity: .5"></i> A quote ...or maybe some lyrics! </div>
</div>
<!--- TITLE END -------------->
</div>
</div>
<!--- [ LEFT END ] -------------------->
<!--- [ RIGHT ] -------------------->
<div class="col-md-7 col-2">
<!--- HEADER IMAGE -------------------->
<div class="card border-0 rounded-0" style="min-height:240px; clip-path:polygon(0 -30%, 100% 0%, 100% 100%, 25% 100%); background-image:url(https://images.pexels.com/photos/4175070/pexels-photo-4175070.jpeg);background-size:cover; background-position:center;"></div>
</div>
<!--- [ RIGHT END ] -------------------->
</div>
<!--- [ HEADER DECOR ] -------------------->
<div class="card border-0 rounded-0 p-1" style="background-color:#a6b4d2;"></div>
<!--------------------------------------------
MAIN SECTION
----------------------------------------------->
<div class="p-4">
<div class="row no-gutters">
<!--------------------------------------------
BASICS
----------------------------------------------->
<div class="col-lg-5 px-2 my-auto">
<!--- [ SECTION 1 ] -------------------->
<div class="row no-gutters">
<!--- name -------------------->
<div class="col-md-6 row no-gutters">
<div class="p-2 px-3 mx-2 mb-2 bg-faded" style="width: 100%;">
<div class="text-lowercase" style="color: #a6b4d2;"> name. </div> info
</div>
</div>
<!--- name end -------------------->
<!--- species -------------------->
<div class="col-md-6 row no-gutters">
<div class="p-2 px-3 mx-2 mb-2 bg-faded" style="width: 100%;">
<div class="text-lowercase" style="color: #a6b4d2;"> species. </div> info
</div>
</div>
<!--- species end -------------------->
</div>
<!--- [ SECTION 1 END ] -------------------->
<!--- [ SECTION 2 ] -------------------->
<div class="row no-gutters">
<!--- gender/pronouns -------------------->
<div class="col-md-6 row no-gutters">
<div class="p-2 px-3 mx-2 mb-2 bg-faded" style="width: 100%;">
<div class="text-lowercase" style="color: #a6b4d2;"> gender. </div> info
</div>
</div>
<!--- gender / pronouns end -------------------->
<!--- sexuality -------------------->
<div class="col-md-6 row no-gutters">
<div class="p-2 px-3 mx-2 mb-2 bg-faded" style="width: 100%;">
<div class="text-lowercase" style="color: #a6b4d2;"> sexuality. </div> info
</div>
</div>
<!--- gender / pronouns end -------------------->
</div>
<!--- [ SECTION 2 END ] -------------------->
<!--- [ SECTION 3 ] -------------------->
<div class="row no-gutters">
<!--- dob / age -------------------->
<div class="col-md-6 row no-gutters">
<div class="p-2 px-3 mx-2 mb-2 bg-faded" style="width: 100%;">
<div class="text-lowercase" style="color: #a6b4d2;"> dob/age. </div> info
</div>
</div>
<!--- dob / age end -------------------->
<!--- occupation -------------------->
<div class="col-md-6 row no-gutters">
<div class="p-2 px-3 mx-2 mb-2 bg-faded" style="width: 100%;">
<div class="text-lowercase" style="color: #a6b4d2;"> occupation. </div> info
</div>
</div>
<!--- occupation end -------------------->
</div>
<!--- [ SECTION 3 END ] -------------------->
<!--- [ DIVIDER ] -------------------->
<hr class="my-1 mb-2 mx-3" style="border-width: .01rem; opacity: .7;">
<!--- [ EXTRA ] -------------------->
<div class="row no-gutters">
<!--- role -------------------->
<div class="col-md-6 row no-gutters">
<div class="p-2 px-3 mx-2 mb-2 bg-faded" style="width: 100%;">
<div class="text-lowercase" style="color: #a6b4d2;"> role. </div> info
</div>
</div>
<!--- role end -------------------->
<!--- universe / story -------------------->
<div class="col-md-6 row no-gutters">
<div class="p-2 px-3 mx-2 mb-2 bg-faded" style="width: 100%;">
<div class="text-lowercase" style="color: #a6b4d2;"> universe. </div> info
</div>
</div>
<!--- universe / story end -------------------->
</div>
<!--- [ EXTRA END ] -------------------->
</div>
<!--------------------------------------------
ABOUT
----------------------------------------------->
<div class="col-lg-7 px-4">
<!--- [ TRAITS ] -------------------->
<p class="text-center mt-lg-0 mt-3" style="opacity: .5; letter-spacing: .08rem"> adjective . adjective . adjective </p>
<!--- INFO -------------------->
<p><span class="text-uppercase" style="color: #a6b4d2;">Lorem ipsum dolor sit amet consectetuer,</span> adipiscing elit. Bibendum lacus sociis duis justo malesuada pellentesque vestibulum fames tellus ligula ornare maecenas amet! Conubia vel. Rutrum orci fusce vestibulum elementum nisi non nisi aenean. In quisque consectetuer senectus pharetra natoque. Pretium donec et sollicitudin urna lorem accumsan tempor.</p>
<p>Velit arcu integer integer nisl sociosqu ad volutpat eget conubia litora ridiculus. Suspendisse ridiculus porta et. Fringilla pellentesque vel varius lobortis proin leo sollicitudin. </p>
<!--- [ DIVIDER ] -------------------->
<hr class="my-2" style="border-width: .01rem; opacity: .7;">
<!--- fontawesome icon -------------------->
<p class="text-right mr-3" style="opacity: .5; font-size: 1rem;">
<i class="fad fa-feather-alt"></i>
</p>
<!--- fontawesome icon end -------------------->
</div>
<!--- [ ABOUT END ] -------------------->
</div>
</div>
<!--------------------------------------------
MAIN SECTION END
----------------------------------------------->
<!--------------------------------------------
SONG > instructions:
this does not use a youtube link, this functions using an MP3 link. I personally use FileGarden to host them, but there are other options.
More detailed instructions here: https://toyhou.se/6560537.music-player-tutorial-f2u/23831818.hosting-websites
----------------------------------------------->
<div class="bg-faded card border-0 rounded-0">
<div class="p-3 mx-auto" style="letter-spacing: .09rem; z-index: 1;">
<!--- song link -------------------->
<p><audio controls="" style="height:30px; max-width: 100px; opacity:0; margin-left: -20px; margin-top: -5px;">
<source src="SONG_LINK_HERE"><br>
</audio></p>
<!--- song name -------------------->
<div style="z-index: -1; margin-top: -30px;">
<i class="fal fa-play" style="color: #a6b4d2;"></i>
<span class="ml-2" style="letter-spacing:2px;">Artist - <span style="color:#a6b4d2;">Song Name</span></span>
</div>
<!--- song name end -------------------->
</div>
</div>
<!--------------------------------------------
SONG END
----------------------------------------------->
<!--- [ PADDING ] -------------------->
<div class="p-3 px-5 pt-4">
<!--------------------------------------------
NOTES
----------------------------------------------->
<div class="text-left" style="font-family:'avenir'; letter-spacing:2px; font-size: 1.2rem;"> Notes. </div>
<!--- [ DIVIDER ] -------------------->
<hr class="my-1" style="border-width: .01rem; opacity: .7;">
<!--- info -------------------->
<ul class="mt-2">
<li style="color: #a6b4d2;"><span class="text-body">Lorem ipsum dolor sit amet consectetuer adipiscing elit.</span></li>
<li style="color: #a6b4d2;"><span class="text-body">Bibendum lacus sociis duis justo malesuada pellentesque vestibulum fames tellus ligula ornare.</span></li>
<li style="color: #a6b4d2;"><span class="text-body">Duis dapibus eleifend lacus ultricies quam porttitor. Pulvinar mauris eni conubia bibendum gravida egestas cras metus bibendum.</span></li>
<li style="color: #a6b4d2;"><span class="text-body">Viverra rhoncus auctor justo in.</span></li>
</ul>
<!--------------------------------------------
NOTES END
----------------------------------------------->
<!--------------------------------------------
RELATIONSHIPS
> to add more, copy everything from [ SECTION 1 ] to [ SECTION 1 END ] and paste underneath. You can remove the individual character boxes within them.
----------------------------------------------->
<!--- [ DIVIDER ] -------------------->
<hr class="my-1 mt-5" style="border-width: .01rem; opacity: .7;">
<!--- title -------------------->
<div class="text-left" style="font-family:'avenir'; letter-spacing:2px; font-size: 1.2rem;"> Relationships. </div>
<!--- [ SECTION 1 ] -------------------->
<div class="row no-gutters mt-3">
<!--- CHARACTER 1 START -------------------->
<div class="col-sm-6 mt-lg-0 mt-3 px-2">
<div class="row no-gutters">
<!--- icon -------------->
<div class="col-md-2 mx-auto mx-md-0">
<div class="card rounded-0 mx-auto bg-transparent" style="height:70px;width:70px; border-width: 1px; padding: 3px;">
<div class="card rounded-0 border-0 d-flex flex-fill" style="
background-image:url(IMG_HERE);
background-size:cover; background-position:center; filter: grayscale(100%);">
</div>
</div>
</div>
<!--- icon end -------------->
<div class="col-md-10 pl-md-3 pl-0">
<div class="bg-faded p-2 mb-2 mt-lg-0 mt-2">
<!--- character name -------------->
<a style="color: #a6b4d2;" href="LINK_HERE"> Character Name. </a>
<!--- hearts -------------->
<span class="pull-right">
<i class="fas fa-heart fa-sm" style="color: #a6b4d2;"></i>
<i class="fas fa-heart fa-sm" style="color: #a6b4d2;"></i>
<i class="fas fa-heart fa-sm" style="color: #a6b4d2;"></i>
<i class="fas fa-heart fa-sm" style="opacity: .5;"></i>
<i class="fas fa-heart fa-sm" style="opacity: .5;"></i>
</span>
</div>
<!--- info -------------->
<p class="mx-2">Keep it short! Like real short! Suspendisse ridiculus porta et. Dolor ante elit massa parturient nibh.</p>
<!--- info end -------------->
</div>
</div>
</div>
<!--- CHARACTER 1 END -------------------->
<!--- CHARACTER 2 START -------------------->
<div class="col-sm-6 mt-lg-0 mt-3 px-2">
<div class="row no-gutters">
<!--- icon -------------->
<div class="col-md-2 mx-auto mx-md-0">
<div class="card rounded-0 mx-auto bg-transparent" style="height:70px;width:70px; border-width: 1px; padding: 3px;">
<div class="card rounded-0 border-0 d-flex flex-fill" style="
background-image:url(IMG_HERE);
background-size:cover; background-position:center; filter: grayscale(100%);">
</div>
</div>
</div>
<!--- icon end -------------->
<div class="col-md-10 pl-md-3 pl-0">
<div class="bg-faded p-2 mb-2 mt-lg-0 mt-2">
<!--- character name -------------->
<a style="color: #a6b4d2;" href="LINK_HERE"> Character Name. </a>
<!--- hearts -------------->
<span class="pull-right">
<i class="fas fa-heart fa-sm" style="opacity: .5;"></i>
<i class="fas fa-heart fa-sm" style="opacity: .5;"></i>
<i class="fas fa-heart fa-sm" style="opacity: .5;"></i>
<i class="fas fa-heart fa-sm" style="opacity: .5;"></i>
<i class="far fa-heart fa-sm" style="opacity: .5;"></i>
</span>
</div>
<!--- info -------------->
<p class="mx-2">Icons will automatically be greyscale. Suspendisse ridiculus porta et. Dolor ante elit massa parturient nibh.</p>
<!--- info end -------------->
</div>
</div>
</div>
<!--- CHARACTER 2 END -------------------->
</div>
<!--- [ SECTION 1 END ] -------------------->
<!--------------------------------------------
RELATIONSHIPS END
----------------------------------------------->
</div>
<!--- [ PADDING END ] -------------------->
<!--- [ DECOR LINE ] -------------------->
<div class="card border-0 rounded-0 p-1 mt-4" style="background-color:#a6b4d2;"></div>
<!--------------------------------------------
FOOTER
----------------------------------------------->
<div class="row no-gutters">
<!--- [ LEFT ] -------------------->
<div class="col-md-7 col-2 my-auto">
<!--- FOOTER IMAGE -------------------->
<div class="card border-0 rounded-0" style="min-height:70px; clip-path:polygon(0% 0%, 100% 0%, 80% 100%, 0% 100%); background-image:url(https://images.pexels.com/photos/4175070/pexels-photo-4175070.jpeg);background-size:cover; background-position:center; "></div>
</div>
<!--- [ RIGHT ] -------------------->
<div class="col-md-5 col-10 my-auto pl-lg-5 pl-0">
<!--- info -------------------->
<div class="text-lg-left text-center font-italic" style="font-family:'avenir'; letter-spacing:2px; font-size: .7rem; opacity: .5;"> <i class="fad fa-pen" style="font-size: .7rem; opacity: .5"></i> Page last modified; date / month / year </div>
<!--- infos end -------------------->
</div>
<!--- [ RIGHT END ] -------------------->
</div>
<!--------------------------------------------
FOOTER END
----------------------------------------------->
</div>
<!--- [ MAIN CONTAINER END ] -------------------->
<!--- [ code credit ; PLEASE DO NOT REMOVE ] -------------------->
<div class="text-center mt-2" style="font-family:'avenir'; letter-spacing:2px; font-size: .6rem; opacity: .4;"> <a href="https://toyhou.se/Myuniverseinabox" class="text-body">Code by MyUniverseinaBox</a></div>
<!--- [ CODE END ] -------------------->
Heyo! If you like my f2u codes, please consider supporting with a ko-fi!
