Profile
<!-----
Story Folder HTML
It's made so that you can use/modify/mangle it it in any way you need to ^^
Feel free to combine with whatever else as long as it's alright with the creators whose stuff you're combining!!
---- Non-WYSIWYG ONLY! Stuff might (probably will) break and you'll be so sad :(
---- Feel free to modify in any way you want! My coding is not that great to begin with, so I don't mind ^w^
---- Keep the credit in if you modify/frankenstein/etc
stay cool
----->
<!--- TOP SECTIONS --->
<div class="row no-gutters">
<!-- INFO + PICTURE BOX -->
<div class="col-md-7 mx-auto">
<div class="mx-auto container p-2 col-mb-12 bg-dark progress-bar-striped progress-bar-animated" style="
border-top-left-radius:70px;
border-top-right-radius:5px;
border-bottom-left-radius:70px;
border-bottom-right-radius:5px;">
<div class="card p-4 col-md-12" style="font-family:bookman; text-align:center;
border-top-right-radius:5px;
border-top-left-radius:70px">
<h2 style><i class="fa-thin fa-star"></i> TEXT <i class="fa-thin fa-star"></i></h2>
<!--- CONTENT WARNING/AESTHETICS/ETC --->
<div class="container m-2">
<div class="justify-content-center">
<div class="row no-gutters mx-auto" style="height:35px;overflow:auto">
<span class="badge badge-pill bg-secondary m-2" style="max-height:30px;max-width:100px;">content</span>
<span class="badge badge-pill bg-secondary m-2" style="max-height:30px;max-width:100px;">content</span>
<span class="badge badge-pill bg-secondary m-2" style="max-height:30px;max-width:100px;">content</span>
<span class="badge badge-pill bg-secondary m-2" style="max-height:30px;max-width:100px;">content</span>
<span class="badge badge-pill bg-secondary m-2" style="max-height:30px;max-width:100px;">content</span>
<span class="badge badge-pill bg-secondary m-2" style="max-height:30px;max-width:100px;">content</span>
</div>
</div>
</div>
<!--- add more above this line --->
<!------>
<hr class="bg-info col-8 progress-bar-striped progress-bar-animated">
SUBTEXT! PUT WHAT YOU WANT HERE!!
<div class="row">
<div class="container mt-2" style="border-radius: 0px;height:200px; overflow: auto;">
<p style="text-align:justify">
This box will scroll if too much text, and stay still when there is too little. The size of the box will stay the same regardless. <br> This is intended for large paragraphs, but can have other parts put in using bullet points or new sections.</p>
<p style="text-align:justify">
Put whatever you'd like. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<p style="text-align:justify">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
</p>
</div>
</div>
</div>
<!------ END TOP BOX ------>
<!------ BOX 2 ------->
<div class="card p-2 col-md-12 mt-2" style="font-family:bookman; text-align:center;
border-bottom-right-radius:5px;
border-bottom-left-radius:60px">
<div class="card card-outline-info p-3" style="
border-bottom-left-radius:60px;
border-bottom-right-radius:5px;">
<h1>FEATURED</hi>
<div class="mt-2 container row no-gutters">
<!--- picture 1 --->
<div class="mx-auto rounded text-center bg-dark progress-bar-striped progress-bar-animated" style="width:150px;height:150px;border-radius:100px">
<a href="LINK_HERE" data-toggle="tooltip" title="NAME">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/50072900_2ic.jpg" class="btn btn-outline-info p-2 rounded-circle" style="width:150px;height:150px">
</a>
</div>
<!--- end picture 1 --->
<!--- picture 1 --->
<div class="mx-auto rounded text-center bg-dark progress-bar-striped progress-bar-animated" style="width:150px;height:150px;border-radius:100px">
<a href="LINK_HERE" data-toggle="tooltip" title="NAME">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/50072900_2ic.jpg" class="btn btn-outline-info p-2 rounded-circle" style="width:150px;height:150px">
</a>
</div>
<!--- end picture 1 --->
<!--- picture 1 --->
<div class="mx-auto rounded text-center bg-dark progress-bar-striped progress-bar-animated" style="width:150px;height:150px;border-radius:100px">
<a href="LINK_HERE" data-toggle="tooltip" title="NAME">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/50072900_2ic.jpg" class="btn btn-outline-info p-2 rounded-circle" style="width:150px;height:150px">
</a>
</div>
<!--- end picture 1 --->
<!--- picture 1 --->
<div class="mx-auto rounded text-center bg-dark progress-bar-striped progress-bar-animated" style="width:150px;height:150px;border-radius:100px">
<a href="LINK_HERE" data-toggle="tooltip" title="NAME">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/50072900_2ic.jpg" class="btn btn-outline-info p-2 rounded-circle" style="width:150px;height:150px">
</a>
</div>
<!--- end picture 1 --->
<!--- picture 1 --->
<div class="mx-auto rounded text-center bg-dark progress-bar-striped progress-bar-animated" style="width:150px;height:150px;border-radius:100px">
<a href="LINK_HERE" data-toggle="tooltip" title="NAME">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/50072900_2ic.jpg" class="btn btn-outline-info p-2 rounded-circle" style="width:150px;height:150px">
</a>
</div>
<!--- end picture 1 --->
<!--- picture 1 --->
<div class="mx-auto rounded text-center bg-dark progress-bar-striped progress-bar-animated" style="width:150px;height:150px;border-radius:100px">
<a href="LINK_HERE" data-toggle="tooltip" title="NAME">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/50072900_2ic.jpg" class="btn btn-outline-info p-2 rounded-circle" style="width:150px;height:150px">
</a>
</div>
<!--- end picture 1 --->
</div>
</div>
</div>
</div>
</div>
<!------ END PICTURE + INFO BOX ------>
<!--- RIGHT BOX --->
<div class="col-md-5 mx-auto">
<div class="mx-auto container p-2 col-mb-12 bg-dark progress-bar-striped progress-bar-animated" style="
border-top-left-radius:5px;
border-top-right-radius:70px;
border-bottom-left-radius:5px;
border-bottom-right-radius:70px;">
<div class="card p-2 col-md-12 mt-2" style="font-family:bookman; text-align:center;
border-top-right-radius:60px;
border-top-left-radius:5px">
<div class="card card-outline-info p-3" style="
border-top-left-radius:5px;
border-top-right-radius:70px;">
<!--- text section --->
<!--- part 1 --->
<div class="row no-gutters">
<!--- picture --->
<div class="rounded text-center progress-bar-striped progress-bar-animated" style="width:100px;height:100px;border-radius:100px">
<a href="LINK_HERE" data-toggle="tooltip" title="TEXT HERE"><img src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/50072900_2ic.jpg" class="btn btn-outline-info p-2 rounded-circle" style="width:100px;height:100px"></a>
</div>
<!--- end picture --->
<!--- text --->
<div class="mt-2 col-9" style="border-radius: 0px;height:100px; overflow: auto;">
<p>
These will all scroll! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
</p>
</div>
<!--- end part 1 --->
<!--- part 2 --->
<div class="row no-gutters">
<!--- picture --->
<div class="rounded text-center progress-bar-striped progress-bar-animated" style="width:100px;height:100px;border-radius:100px">
<a href="LINK_HERE" data-toggle="tooltip" title="TEXT HERE"><img src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/50072900_2ic.jpg" class="btn btn-outline-info p-2 rounded-circle" style="width:100px;height:100px"></a>
</div>
<!--- end picture --->
<!--- text --->
<div class="mt-2 col-9" style="border-radius: 0px;height:100px; overflow: auto;">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
</p>
</div>
<!--- end part 2 --->
<!--- part 3 --->
<div class="row no-gutters">
<!--- picture --->
<div class="rounded text-center progress-bar-striped progress-bar-animated" style="width:100px;height:100px;border-radius:100px">
<a href="" data-toggle="tooltip" title="TEXT HERE"><img src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/50072900_2ic.jpg" class="btn btn-outline-info p-2 rounded-circle" style="width:100px;height:100px"></a>
</div>
<!--- end picture --->
<!--- text --->
<div class="mt-2 col-9" style="border-radius: 0px;height:100px; overflow: auto;">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
</p>
</div>
</div>
<!--- end part 3 --->
<!--- end text section --->
<!--- more info button --->
</div>
</div>
<a class="mt-3 btn btn-outline-secondary" href="LINK_HERE">MORE INFO</a>
<!--- end button --->
</div>
</div>
<!--- BUTTON LINK BOX --->
<div class="card p-2 col-md-12 mt-2" style="font-family:bookman; text-align:center;
border-top-left-radius:5px;
border-top-right-radius:5px;
border-bottom-left-radius:5px;
border-bottom-right-radius:60px;">
<div class="card card-outline-info p-3" style="
border-top-left-radius:5px;
border-top-right-radius:5px;
border-bottom-left-radius:5px;
border-bottom-right-radius:60px;">
<a class="btn btn-outline-info" href="LINK_HERE">TEXT</a>
<a class="btn btn-outline-info" href="LINK_HERE">TEXT</a>
<a class="btn btn-outline-info" href="LINK_HERE">TEXT</a>
<!--- credit button --->
<a class="btn btn-outline-info" href="https://toyhou.se/MK_/characters/folder:3286101" style="border-bottom-right-radius:60px"><i class="fa-solid fa-code"></i></a>
</div>
</div>
</div>
</div>
</div>
<!--- end --->