Endou
created by:HTMLobster
HTMLCustom ColorsBootstrapCharacter
Copy
<!----------------------------------------------------------------
ENDOU - 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 p-0" style="max-width:300px;">
<!-- text color -->
<div style="color:#3c352e;">
<div class="tab-content">
<!-- About/basics -->
<div class="tab-pane fade active show" id="about">
<!-- Heading background -->
<div class="rounded-top" style="height:175px; background:#599ea4 url(https://i.imgur.com/GyGJ0O9.png) center; background-size:cover; background-blend-mode:luminosity;">
<!-- character image - change position (default is center top) and background-size to make image fit -->
<div class="h-100 w-100 rounded-top" style="background:url(https://i.imgur.com/7A9WXn2.png) no-repeat center top; background-size:324px; position:absolute; z-index:0;"></div>
<div class="float-right mr-2 text-white" style="position:relative;">
<span class="font-weight-bold" style="border-bottom:1px solid; font-variant:small-caps; font-size:1.3em;">about</span>
</div>
<div class="align-items-end ml-2 text-white h-100" style="position:relative;">
<span style="font-variant:small-caps; font-size:1.3em;"><i class="fas fa-heart"></i></span>
</div>
</div>
<!-- content -->
<div class="p-2 card card-outline-primary rounded-0" style="border-top:none; border-bottom:none; border-color:#599ea4; background:#f9efe6;">
<!-- basic info -->
<div class="px-2" style="height:167px;">
<div class="row no-gutters">
<div class="col font-weight-bold" style="font-variant:small-caps; color:#599ea4;">name</div>
<div class="col">name</div>
</div>
<div class="row no-gutters">
<div class="col font-weight-bold" style="font-variant:small-caps; color:#599ea4;">age</div>
<div class="col">age</div>
</div>
<div class="row no-gutters">
<div class="col font-weight-bold" style="font-variant:small-caps; color:#599ea4;">pronouns</div>
<div class="col">pronouns</div>
</div>
<div class="row no-gutters">
<div class="col font-weight-bold" style="font-variant:small-caps; color:#599ea4;">species</div>
<div class="col">species</div>
</div>
<div class="row no-gutters">
<div class="col font-weight-bold" style="font-variant:small-caps; color:#599ea4;">height</div>
<div class="col">height</div>
</div>
<div class="row no-gutters">
<div class="col font-weight-bold" style="font-variant:small-caps; color:#599ea4;">weight</div>
<div class="col">weight</div>
</div>
<div class="row no-gutters">
<div class="col font-weight-bold" style="font-variant:small-caps; color:#599ea4;">build</div>
<div class="col">build</div>
</div>
<div class="row no-gutters">
<div class="col font-weight-bold" style="font-variant:small-caps; color:#599ea4;">status</div>
<div class="col">status</div>
</div>
</div>
</div>
<!-- bottom border -->
<div class="pt-1 rounded-bottom" style="background:#599ea4;"></div>
</div>
<!-- about end -->
<!-- story -->
<div class="tab-pane fade" id="story">
<!-- heading background -->
<div class="rounded-top" style="height:175px; background:#513929 url(https://i.imgur.com/s27vpw5.png); background-size:cover; background-blend-mode:luminosity;">
<!-- character image - change position (default is left top) and background-size to make image fit -->
<div class="h-100 w-100 rounded-top" style="background:url(https://i.imgur.com/8hnn38U.png) no-repeat left top; background-size:268px; position:absolute; z-index:0;"></div>
<div class="float-right mr-2 text-white" style="position:relative;">
<span class="font-weight-bold" style="border-bottom:1px solid; font-variant:small-caps; font-size:1.3em;">story</span>
</div>
<div class="align-items-end ml-2 text-white h-100" style="position:relative;">
<span style="font-variant:small-caps; font-size:1.3em;"><i class="fas fa-stars"></i></span>
</div>
</div>
<!-- content -->
<div class="p-2 card card-outline-primary rounded-0" style="border-top:none; border-bottom:none; border-color:#513929; background:#f9efe6;">
<div class="px-2 overflow-auto" style="height:167px;">
<p><span class="font-weight-bold mr-1" style="font-variant:small-caps; color:#513929;">past</span> text goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id congue ante. Etiam nec ullamcorper neque, sit amet accumsan.</p>
<p><span class="font-weight-bold mr-1" style="font-variant:small-caps; color:#513929;">present</span> Duis semper magna eu metus volutpat rhoncus. Donec eu purus ac massa tristique pretium nec quis ex. Sed lobortis urna ligula, a ultricies est sagittis at.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id congue ante. Etiam nec ullamcorper neque, sit amet accumsan.</p>
</div>
</div>
<!-- bottom border -->
<div class="pt-1 rounded-bottom" style="background:#513929;"></div>
</div>
<!-- story end -->
<!-- links -->
<div class="tab-pane fade" id="relations">
<!-- heading background -->
<div class="rounded-top" style="height:175px; background:#d49a30 url(https://i.imgur.com/1at3zHx.png); background-size:cover; background-blend-mode:luminosity;">
<!-- character image - change position (default is center top) and background-size to make image fit -->
<div class="h-100 w-100 rounded-top" style="background:url(https://i.imgur.com/wDoDoCc.png) no-repeat center top; background-size:352px; position:absolute; z-index:0;"></div>
<div class="float-right mr-2 text-white" style="position:relative;">
<span class="font-weight-bold" style="border-bottom:1px solid; font-variant:small-caps; font-size:1.3em;">links</span>
</div>
<div class="align-items-end ml-2 text-white h-100" style="position:relative;">
<span style="font-variant:small-caps; font-size:1.3em;"><i class="fas fa-comments"></i></span>
</div>
</div>
<!-- content -->
<div class="p-2 card card-outline-warning rounded-0" style="border-top:none; border-bottom:none; border-color:#d49a30; background:#f9efe6;">
<div class="px-2 overflow-auto" style="height:167px;">
<!-- relationship left -->
<!-- icon -->
<div class="float-left mr-2 rounded" style="background:#d49a30;"><img class="rounded" style="height:84px; mix-blend-mode:multiply;" src="https://i.imgur.com/FuRTROY.png?1"></div>
<!-- description -->
<p><a class="font-weight-bold mr-1" style="font-variant:small-caps; color:#d49a30;" href="CHAR_LINK">name</a> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id congue ante. Etiam nec ullamcorper neque, sit amet accumsan.</p>
<!-- relationship right -->
<!-- icon -->
<div class="float-right ml-2 rounded" style="background:#d49a30;"><img class="rounded" style="height:84px; mix-blend-mode:multiply;" src="https://i.imgur.com/FuRTROY.png?1"></div>
<!-- description -->
<p><a class="font-weight-bold mr-1" style="font-variant:small-caps; color:#d49a30;" href="CHAR_LINK">name</a> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id congue ante. Etiam nec ullamcorper neque, sit amet accumsan.</p>
<!-- relationship left -->
<!-- icon -->
<div class="float-left mr-2 rounded" style="background:#d49a30;"><img class="rounded" style="height:84px; mix-blend-mode:multiply;" src="https://i.imgur.com/FuRTROY.png?1"></div>
<!-- description -->
<p><a class="font-weight-bold mr-1" style="font-variant:small-caps; color:#d49a30;" href="CHAR_LINK">name</a> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id congue ante. Etiam nec ullamcorper neque, sit amet accumsan.</p>
<!-- copy and paste relationship section to add more -->
</div>
</div>
<!-- bottom border -->
<div class="bg-warning pt-1 rounded-bottom"></div>
</div>
<!-- links end -->
</div>
</div>
<!-- nav buttons -->
<div class="justify-content-center mt-2" style="position:relative;">
<ul class="nav">
<!-- button 1 -->
<li class="nav-item mr-2 rounded-circle" style="background:#599ea4;" data-toggle="tooltip" data-placement="bottom" title="about">
<a class="nav-link border-0 p-0 btn-outline-secondary rounded-circle show active" data-toggle="tab" href="#about" style="height:15px; width:15px; opacity:.5;"></a>
</li>
<!-- button 2 -->
<li class="nav-item mr-2 rounded-circle" style="background:#513929;" data-toggle="tooltip" data-placement="bottom" title="story">
<a class="nav-link border-0 p-0 btn-outline-secondary rounded-circle" data-toggle="tab" href="#story" style="height:15px; width:15px; opacity:.5;"></a>
</li>
<!-- button 3 -->
<li class="nav-item mr-2 rounded-circle" style="background:#d49a30;" data-toggle="tooltip" data-placement="bottom" title="relationships">
<a class="nav-link border-0 p-0 btn-outline-secondary rounded-circle" data-toggle="tab" href="#relations" style="height:15px; width:15px; opacity:.5;"></a>
</li>
</ul>
</div>
<div class="text-right mt-2" style="position:relative;">
<a href="https://toyhou.se/HTMLobster" data-toggle="tooltip" title="profile by noll"><i class="fas fa-code"></i></a>
</div>
</div>Copy
<!----------------------------------------------------------------
ENDOU - 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 p-0" style="max-width:300px;">
<!-- text color -->
<div style="color:#3c352e;">
<div class="tab-content">
<!-- about/basics -->
<div class="tab-pane fade active show" id="about2">
<!-- heading character image -->
<div class="rounded-top" style="height:175px; background:#599ea4 url(https://i.imgur.com/7A9WXn2.png) center; background-size:cover; background-blend-mode:multiply;">
<div class="float-right mr-2 text-white" style="position:relative;">
<span class="font-weight-bold" style="border-bottom:1px solid; font-variant:small-caps; font-size:1.3em;">about</span>
</div>
<div class="align-items-end ml-2 text-white h-100" style="position:relative;">
<span style="font-variant:small-caps; font-size:1.3em;"><i class="fas fa-heart"></i></span>
</div>
</div>
<!-- content -->
<div class="p-2 card card-outline-primary rounded-0" style="border-top:none; border-bottom:none; border-color:#599ea4; background:#f9efe6;">
<!-- basic info -->
<div class="px-2" style="height:167px;">
<div class="row no-gutters">
<div class="col font-weight-bold" style="color:#599ea4; font-variant:small-caps;">name</div>
<div class="col">name</div>
</div>
<div class="row no-gutters">
<div class="col font-weight-bold" style="color:#599ea4; font-variant:small-caps;">age</div>
<div class="col">age</div>
</div>
<div class="row no-gutters">
<div class="col font-weight-bold" style="color:#599ea4; font-variant:small-caps;">pronouns</div>
<div class="col">pronouns</div>
</div>
<div class="row no-gutters">
<div class="col font-weight-bold" style="color:#599ea4; font-variant:small-caps;">species</div>
<div class="col">species</div>
</div>
<div class="row no-gutters">
<div class="col font-weight-bold" style="color:#599ea4; font-variant:small-caps;">height</div>
<div class="col">height</div>
</div>
<div class="row no-gutters">
<div class="col font-weight-bold" style="color:#599ea4; font-variant:small-caps;">weight</div>
<div class="col">weight</div>
</div>
<div class="row no-gutters">
<div class="col font-weight-bold" style="color:#599ea4; font-variant:small-caps;">build</div>
<div class="col">build</div>
</div>
<div class="row no-gutters">
<div class="col font-weight-bold" style="color:#599ea4; font-variant:small-caps;">status</div>
<div class="col">status</div>
</div>
</div>
</div>
<!-- bottom border -->
<div class="pt-1 rounded-bottom" style="background:#599ea4;"></div>
</div>
<!-- about end -->
<!-- story -->
<div class="tab-pane fade" id="story2">
<!-- heading character image -->
<div class="rounded-top" style="height:175px; background:#513929 url(https://i.imgur.com/Bwl0zvs.png); background-size:cover; background-blend-mode:multiply;">
<div class="float-right mr-2 text-white">
<span class="font-weight-bold" style="border-bottom:1px solid; font-variant:small-caps; font-size:1.3em;">story</span>
</div>
<div class="align-items-end ml-2 text-white h-100">
<span style="font-variant:small-caps; font-size:1.3em;"><i class="fas fa-stars"></i></span>
</div>
</div>
<!-- content -->
<div class="p-2 bg-faded card card-outline-secondary rounded-0" style="border-top:none; border-bottom:none; border-color:#513929; background:#f9efe6;">
<div class="px-2 overflow-auto" style="height:167px;">
<p><span class="font-weight-bold mr-1" style="font-variant:small-caps; color:#513929;">past</span> text goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id congue ante. Etiam nec ullamcorper neque, sit amet accumsan.</p>
<p><span class="font-weight-bold mr-1" style="font-variant:small-caps; color:#513929;">present</span> Duis semper magna eu metus volutpat rhoncus. Donec eu purus ac massa tristique pretium nec quis ex. Sed lobortis urna ligula, a ultricies est sagittis at.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id congue ante. Etiam nec ullamcorper neque, sit amet accumsan.</p>
</div>
</div>
<!-- bottom border -->
<div class="pt-1 rounded-bottom" style="background:#513929;"></div>
</div>
<!-- story end -->
<!-- links -->
<div class="tab-pane fade" id="relations2">
<!-- heading character image -->
<div class="rounded-top" style="height:175px; background:#d49a30 url(https://i.imgur.com/TaJNtDW.png?1); background-size:cover; background-blend-mode:multiply;">
<div class="float-right mr-2 text-white">
<span class="font-weight-bold" style="border-bottom:1px solid; font-variant:small-caps; font-size:1.3em;">links</span>
</div>
<div class="align-items-end ml-2 text-white h-100">
<span style="font-variant:small-caps; font-size:1.3em;"><i class="fas fa-comments"></i></span>
</div>
</div>
<!-- content -->
<div class="p-2 card card-outline-warning rounded-0" style="border-top:none; border-bottom:none; border-color:#d49a30; background:#f9efe6;">
<div class="px-2 overflow-auto" style="height:167px;">
<!-- relationship left -->
<!-- icon -->
<div class="float-left mr-2 rounded" style="background:#d49a30;"><img class="rounded" style="height:84px; mix-blend-mode:multiply;" src="https://i.imgur.com/FuRTROY.png?1"></div>
<!-- description -->
<p><a class="font-weight-bold mr-1" style="font-variant:small-caps; color:#d49a30;" href="CHAR_LINK">name</a> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id congue ante. Etiam nec ullamcorper neque, sit amet accumsan.</p>
<!-- relationship right -->
<!-- icon -->
<div class="float-right ml-2 rounded" style="background:#d49a30;"><img class="rounded" style="height:84px; mix-blend-mode:multiply;" src="https://i.imgur.com/FuRTROY.png?1"></div>
<!-- description -->
<p><a class="font-weight-bold mr-1" style="font-variant:small-caps; color:#d49a30;" href="CHAR_LINK">name</a> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id congue ante. Etiam nec ullamcorper neque, sit amet accumsan.</p>
<!-- relationship left -->
<!-- icon -->
<div class="float-left mr-2 rounded" style="background:#d49a30;"><img class="rounded" style="height:84px; mix-blend-mode:multiply;" src="https://i.imgur.com/FuRTROY.png?1"></div>
<!-- description -->
<p><a class="font-weight-bold mr-1" style="font-variant:small-caps; color:#d49a30;" href="CHAR_LINK">name</a> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id congue ante. Etiam nec ullamcorper neque, sit amet accumsan.</p>
<!-- copy and paste relationship section to add more -->
</div>
</div>
<!-- bottom border -->
<div class="pt-1 rounded-bottom" style="background:#d49a30;"></div>
</div>
</div>
</div>
<!-- nav buttons -->
<div class="justify-content-center mt-2" style="position:relative;">
<ul class="nav">
<!-- button 1 -->
<li class="nav-item mr-2 rounded-circle" style="background:#599ea4;" data-toggle="tooltip" data-placement="bottom" title="about">
<a class="nav-link border-0 p-0 btn-outline-secondary rounded-circle show active" data-toggle="tab" href="#about2" style="height:15px; width:15px; opacity:.5;"></a>
</li>
<!-- button 2 -->
<li class="nav-item mr-2 rounded-circle" style="background:#513929;" data-toggle="tooltip" data-placement="bottom" title="story">
<a class="nav-link border-0 p-0 btn-outline-secondary rounded-circle" data-toggle="tab" href="#story2" style="height:15px; width:15px; opacity:.5;"></a>
</li>
<!-- button 3 -->
<li class="nav-item mr-2 rounded-circle" style="background:#d49a30;" data-toggle="tooltip" data-placement="bottom" title="relationships">
<a class="nav-link border-0 p-0 btn-outline-secondary rounded-circle" data-toggle="tab" href="#relations2" style="height:15px; width:15px; opacity:.5;"></a>
</li>
</ul>
</div>
<div class="text-right mt-2" style="position:relative;">
<a href="https://toyhou.se/HTMLobster" data-toggle="tooltip" title="profile by noll"><i class="fas fa-code"></i></a>
</div>
</div>Copy
<!----------------------------------------------------------------
ENDOU - 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 p-0" style="max-width:300px;">
<div>
<div class="tab-content">
<!-- about/basics -->
<div class="tab-pane fade active show" id="about1">
<!-- heading character image -->
<div class="bg-primary rounded-top" style="height:175px; background:url(https://i.imgur.com/7A9WXn2.png) center; background-size:cover; background-blend-mode:multiply;">
<div class="float-right mr-2 text-white" style="position:relative;">
<span class="font-weight-bold" style="border-bottom:1px solid; font-variant:small-caps; font-size:1.3em;">about</span>
</div>
<div class="align-items-end ml-2 text-white h-100" style="position:relative;">
<span style="font-variant:small-caps; font-size:1.3em;"><i class="fas fa-heart"></i></span>
</div>
</div>
<!-- content -->
<div class="p-2 bg-faded card card-outline-primary rounded-0" style="border-top:none; border-bottom:none;">
<div class="px-2" style="height:167px;">
<!-- basics -->
<div class="row no-gutters">
<div class="col font-weight-bold text-primary" style="font-variant:small-caps;">name</div>
<div class="col">name</div>
</div>
<div class="row no-gutters">
<div class="col font-weight-bold text-primary" style="font-variant:small-caps;">age</div>
<div class="col">age</div>
</div>
<div class="row no-gutters">
<div class="col font-weight-bold text-primary" style="font-variant:small-caps;">pronouns</div>
<div class="col">pronouns</div>
</div>
<div class="row no-gutters">
<div class="col font-weight-bold text-primary" style="font-variant:small-caps;">species</div>
<div class="col">species</div>
</div>
<div class="row no-gutters">
<div class="col font-weight-bold text-primary" style="font-variant:small-caps;">height</div>
<div class="col">height</div>
</div>
<div class="row no-gutters">
<div class="col font-weight-bold text-primary" style="font-variant:small-caps;">weight</div>
<div class="col">weight</div>
</div>
<div class="row no-gutters">
<div class="col font-weight-bold text-primary" style="font-variant:small-caps;">build</div>
<div class="col">build</div>
</div>
<div class="row no-gutters">
<div class="col font-weight-bold text-primary" style="font-variant:small-caps;">status</div>
<div class="col">status</div>
</div>
</div>
</div>
<!-- bottom border -->
<div class="bg-primary pt-1 rounded-bottom"></div>
</div>
<!-- about end -->
<!-- story -->
<div class="tab-pane fade" id="story1">
<!-- heading character image -->
<div class="bg-secondary rounded-top" style="height:175px; background:url(https://i.imgur.com/Bwl0zvs.png); background-size:cover; background-blend-mode:multiply;">
<div class="float-right mr-2 text-white">
<span class="font-weight-bold" style="border-bottom:1px solid; font-variant:small-caps; font-size:1.3em;">story</span>
</div>
<div class="align-items-end ml-2 text-white h-100">
<span style="font-variant:small-caps; font-size:1.3em;"><i class="fas fa-stars"></i></span>
</div>
</div>
<!-- content -->
<div class="p-2 bg-faded card card-outline-secondary rounded-0" style="border-top:none; border-bottom:none;">
<div class="px-2 overflow-auto" style="height:167px;">
<p><span class="text-secondary font-weight-bold mr-1" style="font-variant:small-caps;">past</span> text goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id congue ante. Etiam nec ullamcorper neque, sit amet accumsan.</p>
<p><span class="text-secondary font-weight-bold mr-1" style="font-variant:small-caps;">present</span> Duis semper magna eu metus volutpat rhoncus. Donec eu purus ac massa tristique pretium nec quis ex. Sed lobortis urna ligula, a ultricies est sagittis at.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id congue ante. Etiam nec ullamcorper neque, sit amet accumsan.</p>
</div>
</div>
<!-- bottom border -->
<div class="bg-secondary pt-1 rounded-bottom"></div>
</div>
<!-- story end -->
<!-- links -->
<div class="tab-pane fade" id="relations1">
<!-- heading character image -->
<div class="bg-warning rounded-top" style="height:175px; background:url(https://i.imgur.com/TaJNtDW.png?1); background-size:cover; background-blend-mode:multiply;">
<div class="float-right mr-2 text-white">
<span class="font-weight-bold" style="border-bottom:1px solid; font-variant:small-caps; font-size:1.3em;">links</span>
</div>
<div class="align-items-end ml-2 text-white h-100">
<span style="font-variant:small-caps; font-size:1.3em;"><i class="fas fa-comments"></i></span>
</div>
</div>
<!-- content -->
<div class="p-2 bg-faded card card-outline-warning rounded-0" style="border-top:none; border-bottom:none;">
<div class="px-2 overflow-auto" style="height:167px;">
<!-- relationship left -->
<!-- image -->
<div class="float-left mr-2 rounded bg-warning"><img class="rounded" style="height:84px; mix-blend-mode:multiply;" src="https://i.imgur.com/FuRTROY.png?1"></div>
<!-- description -->
<p><a class="text-warning font-weight-bold mr-1" style="font-variant:small-caps;" href="CHAR_LINK">name</a> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id congue ante. Etiam nec ullamcorper neque, sit amet accumsan.</p>
<!-- relationship right -->
<!-- image -->
<div class="float-right ml-2 rounded bg-warning"><img class="rounded" style="height:84px; mix-blend-mode:multiply;" src="https://i.imgur.com/FuRTROY.png?1"></div>
<!-- description -->
<p><a class="text-warning font-weight-bold mr-1" style="font-variant:small-caps;" href="CHAR_LINK">name</a> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id congue ante. Etiam nec ullamcorper neque, sit amet accumsan.</p>
<!-- relationship left -->
<!-- image -->
<div class="float-left mr-2 rounded bg-warning"><img class="rounded" style="height:84px; mix-blend-mode:multiply;" src="https://i.imgur.com/FuRTROY.png?1"></div>
<!-- description -->
<p><a class="text-warning font-weight-bold mr-1" style="font-variant:small-caps;" href="CHAR_LINK">name</a> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id congue ante. Etiam nec ullamcorper neque, sit amet accumsan.</p>
<!-- copy and paste a relationship section to add more -->
</div>
</div>
<!-- bottom border -->
<div class="bg-warning pt-1 rounded-bottom"></div>
</div>
<!-- links end -->
</div>
</div>
<!-- nav buttons -->
<div class="justify-content-center mt-2" style="position:relative;">
<ul class="nav">
<!-- button 1 -->
<li class="nav-item mr-2 rounded-circle" data-toggle="tooltip" data-placement="bottom" title="about">
<a class="nav-link border-0 p-0 bg-primary rounded-circle show active" data-toggle="tab" href="#about1" style="height:15px; width:15px;"></a>
</li>
<!-- button 2 -->
<li class="nav-item mr-2 rounded-circle" data-toggle="tooltip" data-placement="bottom" title="story">
<a class="nav-link border-0 p-0 bg-secondary rounded-circle" data-toggle="tab" href="#story1" style="height:15px; width:15px;"></a>
</li>
<!-- button 3 -->
<li class="nav-item mr-2 rounded-circle" data-toggle="tooltip" data-placement="bottom" title="relationships">
<a class="nav-link border-0 p-0 bg-warning rounded-circle" data-toggle="tab" href="#relations1" style="height:15px; width:15px;"></a>
</li>
</ul>
</div>
<div class="text-right mt-2" style="position:relative;">
<a href="https://toyhou.se/HTMLobster" data-toggle="tooltip" title="profile by noll"><i class="fas fa-code"></i></a>
</div>
</div>