Profile
NO NAVIGATION BUTTONS
WITH NAVIGATION BUTTONS
<div class="container" style="height:50px; max-width:300px; margin-top:-10px; background-color:rgba(0,0,0,.2); font-size: 30px; margin-bottom:-20px; overflow: hidden;">
<!----------------------------------------------------------------CHARACTER NAME/TITLE---------------------------------------------------------------->
<center>
NAME NAME NAME
</center></div>
<!----------------------------------------------------------------CHARACTER NAME/TITLE---------------------------------------------------------------->
<div class="row justify-content-center">
<div class="row" style="height:250px; max-width: 800px; background-color:rgba(0,0,0,.2);background-size: cover; background-repeat:no-repeat; background-image:url('https://file.garden/ZYErBm2nsi-rTFy8/Forest-Tree-Transparent-PNG.png')">
<div class="col-sm hidden-sm-down justify-content-center fixed-top" style="height:250px; max-width:100px; background-size: cover; background-repeat: no-repeat;">
<!----------------------------------------------------------------1ST TREE IMAGE (hidden on mobile)---------------------------------------------------------------->
<img class="p-3" style="max-width:250px; margin-right:15px;"
src="https://file.garden/ZYErBm2nsi-rTFy8/kindpng_71287725.png"
></div>
<!----------------------------------------------------------------1ST TREE IMAGE---------------------------------------------------------------->
<div class="row-sm justify-content-center p-4" style="height:250px; max-width:500px; background-size: cover; background-repeat: no-repeat;">
<div class="row text-white p-2" style="height:200px; max-width:800px; background-color:rgba(0,0,0,.4); overflow-x: hidden; overflow-y: auto;">
<!----------------------------------------------------------------IMAGE---------------------------------------------------------------->
<p><img class="float-sm-left mb-2 mx-2" style="height:200px; max-width:200px;"
src="https://placehold.co/200"
>
<!----------------------------------------------------------------TEXT---------------------------------------------------------------->
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Egestas sed tempus urna et pharetra pharetra massa massa ultricies. Adipiscing elit pellentesque habitant morbi tristique senectus et. Dolor sed viverra ipsum nunc aliquet bibendum enim. Congue mauris rhoncus aenean vel elit. Nibh ipsum consequat nisl vel. Amet est placerat in egestas erat imperdiet sed. Egestas congue quisque egestas diam in arcu. Mus mauris vitae ultricies leo. Aliquet enim tortor at auctor urna nunc id cursus. Elit at imperdiet dui accumsan sit amet nulla. Eu ultrices vitae auctor eu augue ut lectus. Rhoncus aenean vel elit scelerisque mauris pellentesque pulvinar pellentesque. Cum sociis natoque penatibus et magnis dis parturient. Nibh venenatis cras sed felis. Facilisis gravida neque convallis a cras.</p>
<p>Donec massa sapien faucibus et. Varius morbi enim nunc faucibus a pellentesque sit. Vitae sapien pellentesque habitant morbi tristique senectus et netus. Felis eget nunc lobortis mattis aliquam faucibus. In fermentum posuere urna nec tincidunt. Nisi porta lorem mollis aliquam ut porttitor leo a diam. Varius quam quisque id diam vel quam. Elit pellentesque habitant morbi tristique. Magna etiam tempor orci eu lobortis elementum nibh tellus. Euismod quis viverra nibh cras pulvinar mattis nunc sed. Integer malesuada nunc vel risus commodo viverra. Tortor at auctor urna nunc id cursus metus aliquam. Ultrices in iaculis nunc sed. Elementum tempus egestas sed sed risus pretium. Dui ut ornare lectus sit amet est placerat in. Vestibulum lectus mauris ultrices eros in cursus turpis massa tincidunt. Rhoncus urna neque viverra justo nec ultrices. Eget gravida cum sociis natoque penatibus et magnis dis parturient.</p>
<!----------------------------------------------------------------TEXT END---------------------------------------------------------------->
</div>
</div>
<div class="col-sm hidden-sm-down justify-content-center fixed-top" style="height:250px; max-width:100px; background-size: cover; background-repeat: no-repeat;">
<!----------------------------------------------------------------2ND TREE IMAGE (hidden on mobile)---------------------------------------------------------------->
<img class="p-3" style="max-width:250px; margin-left:15px;"
src="https://file.garden/ZYErBm2nsi-rTFy8/kindpng_7128775.png"
></div>
<!----------------------------------------------------------------2ND TREE IMAGE---------------------------------------------------------------->
</div>
</div>
<!----------------------------------------------------------------DO NOT REMOVE---------------------------------------------------------------->
<center><a href="https://toyhou.se/22573891.f2u-the-woods"><i class="fa fa-x mt-2" style="color:#5E7644;"></i></a></center>
WITH NAVIGATION BUTTONS
<div class="container" style="height:50px; max-width:300px; margin-top:-10px; background-color:rgba(0,0,0,.2); font-size: 30px; margin-bottom:-20px; overflow: hidden;">
<!----------------------------------------------------------------CHARACTER NAME/TITLE---------------------------------------------------------------->
<center>
NAME NAME NAME
</center></div>
<!----------------------------------------------------------------CHARACTER NAME/TITLE---------------------------------------------------------------->
<div class="row justify-content-center">
<div class="row" style="height:250px; max-width: 800px; background-color:rgba(0,0,0,.2);background-size: cover; background-repeat:no-repeat; background-image:url('https://file.garden/ZYErBm2nsi-rTFy8/Forest-Tree-Transparent-PNG.png')">
<div class="col-sm hidden-sm-down justify-content-center fixed-top" style="height:250px; max-width:100px; background-size: cover; background-repeat: no-repeat;">
<!----------------------------------------------------------------1ST TREE IMAGE---------------------------------------------------------------->
<img class="p-3" style="max-width:250px; margin-right:15px;"
src="https://file.garden/ZYErBm2nsi-rTFy8/kindpng_71287725.png"
></div>
<!----------------------------------------------------------------1ST TREE IMAGE---------------------------------------------------------------->
<div class="row-sm justify-content-center p-4" style="height:250px; max-width:500px; background-size: cover; background-repeat: no-repeat;">
<div class="row text-white justify-content-center p-2" style="height:200px; max-width:800px; background-color:rgba(0,0,0,.4);">
<div class="tab-content">
<div class="tab-pane fade show active" id="tab1">
<div class="col-sm p-1" style="height:150px; overflow-x: hidden; overflow: auto;">
<!----------------------------------------------------------------IMAGE---------------------------------------------------------------->
<p><img class="float-sm-left mb-2 mx-2" style="height:200px; max-width:200px;"
src="https://placehold.co/200"
>
<!----------------------------------------------------------------TEXT---------------------------------------------------------------->
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Egestas sed tempus urna et pharetra pharetra massa massa ultricies. Adipiscing elit pellentesque habitant morbi tristique senectus et. Dolor sed viverra ipsum nunc aliquet bibendum enim. Congue mauris rhoncus aenean vel elit. Nibh ipsum consequat nisl vel. Amet est placerat in egestas erat imperdiet sed. Egestas congue quisque egestas diam in arcu. Mus mauris vitae ultricies leo. Aliquet enim tortor at auctor urna nunc id cursus. Elit at imperdiet dui accumsan sit amet nulla. Eu ultrices vitae auctor eu augue ut lectus. Rhoncus aenean vel elit scelerisque mauris pellentesque pulvinar pellentesque. Cum sociis natoque penatibus et magnis dis parturient. Nibh venenatis cras sed felis. Facilisis gravida neque convallis a cras.</p>
<p>Donec massa sapien faucibus et. Varius morbi enim nunc faucibus a pellentesque sit. Vitae sapien pellentesque habitant morbi tristique senectus et netus. Felis eget nunc lobortis mattis aliquam faucibus. In fermentum posuere urna nec tincidunt. Nisi porta lorem mollis aliquam ut porttitor leo a diam. Varius quam quisque id diam vel quam. Elit pellentesque habitant morbi tristique. Magna etiam tempor orci eu lobortis elementum nibh tellus. Euismod quis viverra nibh cras pulvinar mattis nunc sed. Integer malesuada nunc vel risus commodo viverra. Tortor at auctor urna nunc id cursus metus aliquam. Ultrices in iaculis nunc sed. Elementum tempus egestas sed sed risus pretium. Dui ut ornare lectus sit amet est placerat in. Vestibulum lectus mauris ultrices eros in cursus turpis massa tincidunt. Rhoncus urna neque viverra justo nec ultrices. Eget gravida cum sociis natoque penatibus et magnis dis parturient.</p>
</div></div>
<!----------------------------------------------------------------TEXT END---------------------------------------------------------------->
<div class="tab-pane fade" id="tab2">
<div class="col-sm p-1" style="height:150px; overflow-x: hidden; overflow: auto;">
<!----------------------------------------------------------------IMAGE---------------------------------------------------------------->
<p><img class="float-sm-left mb-2 mx-2" style="height:200px; max-width:200px;"
src="https://placehold.co/200"
>
<!----------------------------------------------------------------TEXT---------------------------------------------------------------->
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Egestas sed tempus urna et pharetra pharetra massa massa ultricies. Adipiscing elit pellentesque habitant morbi tristique senectus et. Dolor sed viverra ipsum nunc aliquet bibendum enim. Congue mauris rhoncus aenean vel elit. Nibh ipsum consequat nisl vel. Amet est placerat in egestas erat imperdiet sed. Egestas congue quisque egestas diam in arcu. Mus mauris vitae ultricies leo. Aliquet enim tortor at auctor urna nunc id cursus. Elit at imperdiet dui accumsan sit amet nulla. Eu ultrices vitae auctor eu augue ut lectus. Rhoncus aenean vel elit scelerisque mauris pellentesque pulvinar pellentesque. Cum sociis natoque penatibus et magnis dis parturient. Nibh venenatis cras sed felis. Facilisis gravida neque convallis a cras.</p>
<!----------------------------------------------------------------TEXT END---------------------------------------------------------------->
<!----------------------------------------------------------------IMAGE---------------------------------------------------------------->
<p><img class="float-sm-right mb-2 mx-2" style="height:200px; max-width:200px;"
src="https://placehold.co/200"
>
<!----------------------------------------------------------------TEXT---------------------------------------------------------------->
Donec massa sapien faucibus et. Varius morbi enim nunc faucibus a pellentesque sit. Vitae sapien pellentesque habitant morbi tristique senectus et netus. Felis eget nunc lobortis mattis aliquam faucibus. In fermentum posuere urna nec tincidunt. Nisi porta lorem mollis aliquam ut porttitor leo a diam. Varius quam quisque id diam vel quam. Elit pellentesque habitant morbi tristique. Magna etiam tempor orci eu lobortis elementum nibh tellus. Euismod quis viverra nibh cras pulvinar mattis nunc sed. Integer malesuada nunc vel risus commodo viverra. Tortor at auctor urna nunc id cursus metus aliquam. Ultrices in iaculis nunc sed. Elementum tempus egestas sed sed risus pretium. Dui ut ornare lectus sit amet est placerat in. Vestibulum lectus mauris ultrices eros in cursus turpis massa tincidunt. Rhoncus urna neque viverra justo nec ultrices. Eget gravida cum sociis natoque penatibus et magnis dis parturient.</p>
<!----------------------------------------------------------------TEXT END---------------------------------------------------------------->
</div>
</div>
<div class="tab-pane fade" id="tab3">
<div class="col-md p-1" style="height:150px; overflow-x: hidden; overflow: auto;">
<!----------------------------------------------------------------
TAB 3 / RELATIONSHIPS START
---------------------------------------------------------------->
<!----------------------------------------------------------------IMAGE---------------------------------------------------------------->
<p><img class="float-md-left mb-2 mx-2" style="height:150px; max-width:150px;"
src="https://placehold.co/150"
>
<!----------------------------------------------------------------RELATIONSHIP TEXT---------------------------------------------------------------->
<span style="font-size:18px;">
CHARACTER NAME
</span>
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Egestas sed tempus urna et pharetra pharetra massa massa ultricies. Adipiscing elit pellentesque habitant morbi tristique senectus et.</p>
<!----------------------------------------------------------------IMAGE---------------------------------------------------------------->
<p><img class="float-md-left mb-2 mx-2" style="height:150px; max-width:150px;"
src="https://placehold.co/150"
>
<!----------------------------------------------------------------RELATIONSHIP TEXT---------------------------------------------------------------->
<span style="font-size:18px;">
CHARACTER NAME
</span>
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Egestas sed tempus urna et pharetra pharetra massa massa ultricies. Adipiscing elit pellentesque habitant morbi tristique senectus et.</p>
<!----------------------------------------------------------------COPY START---------------------------------------------------------------->
<!----------------------------------------------------------------IMAGE---------------------------------------------------------------->
<p><img class="float-md-left mb-2 mx-2" style="height:150px; max-width:150px;"
src="https://placehold.co/150"
>
<!----------------------------------------------------------------RELATIONSHIP TEXT---------------------------------------------------------------->
<span style="font-size:18px;">
CHARACTER NAME
</span>
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Egestas sed tempus urna et pharetra pharetra massa massa ultricies. Adipiscing elit pellentesque habitant morbi tristique senectus et.</p>
<!----------------------------------------------------------------COPY END---------------------------------------------------------------->
<!----------------------------------------------------------------
RELATIONSHIP END
to add more characters, copy from "copy start" to "copy end" and paste above this section
---------------------------------------------------------------->
</div>
</div>
</div>
<div class="container justify-content-center">
<ul class="nav mt-1">
<li class="nav-item">
<a class="nav-link text-light" data-toggle="tab" href="#tab1" role="tab">
<i class="fas fa-person mx-1"></i>
</a>
</li>
<li class="nav-item">
<a class="nav-link text-light" data-toggle="tab" href="#tab2" role="tab">
<i class="fas fa-tree mx-1"></i>
</a>
</li>
<li class="nav-item">
<a class="nav-link text-light" data-toggle="tab" href="#tab3" role="tab">
<i class="fas fa-heart mx-1"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="col-sm hidden-sm-down justify-content-center fixed-top" style="height:250px; max-width:100px; background-size: cover; background-repeat: no-repeat;">
<!----------------------------------------------------------------2ND TREE IMAGE---------------------------------------------------------------->
<img class="p-3" style="max-width:250px; margin-left:15px;"
src="https://file.garden/ZYErBm2nsi-rTFy8/kindpng_7128775.png"
></div>
<!----------------------------------------------------------------2ND TREE IMAGE---------------------------------------------------------------->
</div>
</div>
<!----------------------------------------------------------------DO NOT REMOVE---------------------------------------------------------------->
<center><a href="https://toyhou.se/22573891.f2u-the-woods"><i class="fa fa-x mt-2" style="color:#5E7644;"></i></a></center>