Seeing Stars
created by:HTMLobster
HTMLBootstrapCharacter
Copy
<!----------------------------------------------------------------
SEEING STARS CHARACTER PROFILE
Profile by HTMLobster (noll)
TOS:
Do not remove my credit. You may edit it, however.
You may edit code/frankenstein with others as long as their TOS allows!
Turn off WYSIWYG and turn on Code Editor.
Ask me if you want to redistribute edits. Must be F2U.
------------------------------------------------------------------>
<div class="container" style="max-width:500px;">
<div class="bg-primary text-white align-items-center" style="height:160px; width:160px; clip-path:polygon(50% 0%,64% 35%,98% 35%,70% 57%,81% 92%,50% 72%,18% 92%,31% 57%,2% 35%,36% 35%); margin-bottom:-70px; margin-left:auto; margin-right:auto;">
<!--- Star image --->
<div class="bg-dark text-white align-items-center" style="margin-left:10px; height:140px; width:140px; background:url('https://via.placeholder.com/150.png') center; background-size:cover; clip-path:polygon(50% 0%,64% 35%,98% 35%,70% 57%,81% 92%,50% 72%,18% 92%,31% 57%,2% 35%,36% 35%);"></div>
</div>
<div class="bg-primary p-1">
<div class="bg-faded p-2">
<div class="row no-gutters mb-4">
<div class="col justify-content-around pt-2" style="font-size:1.5em;">
<i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i>
</div>
<div class="col-3"></div>
<div class="col justify-content-around pt-2" style="font-size:1.5em;">
<i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i>
</div>
</div>
<!--- Header info --->
<div class="container row no-gutters justify-content-center">
<div class="col row no-gutters text-center justify-content-around" style="font-size:1.5em;">
<div class="col">ADJ</div>
<div class="col-auto"><i class="fas fa-star"></i></div>
<div class="col">ADJ</div>
<div class="col-auto"><i class="fas fa-star"></i></div>
<div class="col">ADJ</div>
</div>
</div>
<hr class="my-1 mx-3 bg-primary">
<div class="row no-gutters px-3 pt-1">
<!--- LEFT column --->
<div class="col-md pr-2 mt-1" style="max-height:337px; overflow:auto; scrollbar-width:thin;">
<!--- Section 1 --->
<h1 class="mb-0" style="font-size:1.4em;"><i class="far fa-folder mr-1"></i> Basics</h1>
<table class="border-0 w-100 mb-2">
<tr style="border-bottom:1px solid;">
<td class="p-0 text-uppercase">Name</td>
<td class="text-right p-0">Name</td>
</tr>
<tr style="border-bottom:1px solid;">
<td class="p-0 text-uppercase">Age</td>
<td class="text-right p-0">Age</td>
</tr>
<tr style="border-bottom:1px solid;">
<td class="p-0 text-uppercase">Gender</td>
<td class="text-right p-0">Gender</td>
</tr>
<tr style="border-bottom:1px solid;">
<td class="p-0 text-uppercase">Pronouns</td>
<td class="text-right p-0">Pronouns</td>
</tr>
<tr style="border-bottom:1px solid;">
<td class="p-0 text-uppercase">Height</td>
<td class="text-right p-0">Height</td>
</tr>
<tr style="border-bottom:1px solid;">
<td class="p-0 text-uppercase">Weight</td>
<td class="text-right p-0">Weight</td>
</tr>
<tr>
<td class="p-0 text-uppercase">Species</td>
<td class="text-right p-0">Species</td>
</tr>
</table>
<div class="row no-gutters justify-content-center mb-3">
<p class="col-6 justify-content-around text-primary"><i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i></p>
</div>
<!--- Section 2 --->
<h1 class="mb-0" style="font-size:1.4em;"><i class="far fa-book mr-1"></i> Heading 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus volutpat fringilla bibendum. Donec hendrerit scelerisque auctor. Nam tincidunt placerat lobortis. Nulla blandit eu nisl sed lacinia. Curabitur erat libero, sodales vitae libero at, lacinia condimentum justo.</p>
<div class="row no-gutters justify-content-center mb-3">
<p class="col-6 justify-content-around text-primary"><i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i></p>
</div>
<!--- Section 3 --->
<h1 class="mb-0" style="font-size:1.4em;"><i class="far fa-lightbulb mr-1"></i> Heading 2</h1>
<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc interdum tellus aliquet nibh rhoncus, vel consequat nunc facilisis.</p>
<p>Feel free to add more paragraphs anywhere.</p>
<div class="row no-gutters justify-content-center mb-3">
<p class="col-6 justify-content-around text-primary"><i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i></p>
</div>
<!--- Section 4 --->
<h1 class="mb-0" style="font-size:1.4em;"><i class="far fa-pencil mr-1"></i> Heading 3</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus volutpat fringilla bibendum. Donec hendrerit scelerisque auctor. Nam tincidunt placerat lobortis. Nulla blandit eu nisl sed lacinia. Curabitur erat libero, sodales vitae libero at, lacinia condimentum justo.</p>
</div>
<!--- RIGHT column --->
<div class="col-md-2 p-1 mt-md-0 mt-2">
<!--- Image buttons --->
<div class="row no-gutters mb-1 justify-content-around">
<div class="col-md-12 col-2 btn btn-primary mb-md-2 p-1">
<img src="https://via.placeholder.com/75.png" class="rounded">
</div>
<div class="col-md-12 col-2 btn btn-primary mb-md-2 p-1">
<img src="https://via.placeholder.com/75.png" class="rounded">
</div>
<div class="col-md-12 col-2 btn btn-primary mb-md-2 p-1">
<img src="https://via.placeholder.com/75.png" class="rounded">
</div>
<div class="col-md-12 col-2 btn btn-primary mb-md-2 p-1">
<img src="https://via.placeholder.com/75.png" class="rounded">
</div>
<div class="col-md-12 col-2 btn btn-primary p-1">
<img src="https://via.placeholder.com/75.png" class="rounded">
</div>
</div>
</div>
</div>
<hr class="my-1 mx-3 bg-primary">
<div class="row no-gutters py-1">
<div class="col justify-content-around pt-2" style="font-size:1.5em;">
<i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i>
</div>
<div class="col-3 text-center pt-1" style="font-size:1.5em;"><a href="https://toyhou.se/HTMLobster" data-toggle="tooltip" title="theme by noll"><i class="fas fa-heart"></i></a></div>
<div class="col justify-content-around pt-2" style="font-size:1.5em;">
<i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i>
</div>
</div>
</div>
</div>
</div>