[CHARA] Monster bio
created by:FlowerlyRat
Custom ColorsHTMLCharacter
Copy
<!--
╭━━╮╱╱╱╱╱╱╱╱╱╱╱╱╱╭━╮╱╱╭╮
┃━┳┫╭━┳┳┳┳━┳┳┳╮╭┳┫╋┣━╮┃╰╮
┃╭┫╰┫╋┃┃┃┃┻┫╭┫╰┫┃┃╮┫╋╰┫╭┫
╰╯╰━┻━┻━━┻━┻╯╰━╋╮┣┻┻━━┻━╯
╱╱╱╱╱╱╱╱╱╱╱╱╱╱╱╰━╯
Monster bio: code by FlowerlyRat || Based on the game My Singing Monster' UI by Big Blue Bubble
> It is recommended to use circlejourney's ToyHouse live editor -> https://th.circlejourney.net/
Element sigils and map icons have been taken from the official MSM fankit, which can be found here: https://www.bigbluebubble.com/home/games/my-singing-monsters-series/
You can find ToyHouse ready versions here: https://toyhou.se/30004019.code-wip/30004028.image-resources
-->
<div class="card rounded-0 border-0" style="overflow: hidden; position: absolute; bottom: 0; top: 0; left: 0; right: 0; background-color: #282130; z-index: -1"></div>
<div class="card bg-transparent border-0 rounded-0" style="font-size: 18px; font-family: comic sans MS; color: #fff; text-shadow: 2px 0 0 #000, 1px 2px 0 #000, -1px 2px 0 #000, 1px -2px 0 #000, -1px -2px 0 #000, 2px 2px 0 #000, -2px 2px 0 #000, 2px -2px 0 #000, -2px -2px 0 #000, -2px 0 0 #000, 0 2px 0 #000, 0 -2px 0 #000; 2px 2px 0 #000, -2px 2px 0 #000, 2px -2px 0 #000, -2px -2px 0 #000">
<div class="row no-gutters justify-content-center">
<!--////////////////////////////////////////////////////////////////////////////////////////////
Left side
////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="col-auto justify-content-center" style="margin-top: -4px">
<img src="https://i.ibb.co/Ypy67dr/image-holder-1.png">
<!--/////////////////////// Name ///////////////////////-->
<div class="card bg-transparent border-0 rounded-0 text-center" style="position: absolute; top: 25px; font-size: 25px">
<p class="text-truncate" style="width: 250px">Monster name</p>
</div>
<!--/////////////////////// Name end ///////////////////////-->
<!--/////////////////////// Monster image ///////////////////////-->
<!-- Feel free to change the height to fit the monster! Only put 200px as a default -->
<img style="position: absolute; bottom: 50px;
height: 200px" src="MONSTER_IMAGE_URL">
<!--/////////////////////// Monster image end ///////////////////////-->
<!--/////////////////////// Element ///////////////////////-->
<div class="card bg-transparent border-0 rounded-0" style="position: absolute; bottom: 4px">
<div class="row no-gutters">
<!-- [1] --><!-- Duplicate this entire section if there are more -->
<div class="col mx-1">
<img src="ELEMENT_SIGIL_URL" class="d-block" style="width: 40px">
</div>
<!-- [1] -->
</div>
</div>
<!--/////////////////////// Element end ///////////////////////-->
</div>
<!--////////////////////////////////////////////////////////////////////////////////////////////
Left side end
////////////////////////////////////////////////////////////////////////////////////////////-->
<!--////////////////////////////////////////////////////////////////////////////////////////////
Right side
////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="col-md-7">
<div style="height: 348px; width: 100%; border: 35px solid; border-image: url(https://static.miraheze.org/mysingingmonsterswiki/5/56/Homemade_MSM_Boxes.png) 7% fill">
<div id="INFO-TAB">
<!-- Top gradient -->
<div class="card border-0 hidden-sm-down" style="position: absolute; top: 34px; left: 15px; right: 18px; height: 70px; border-radius: 20px 20px 0 0; background: linear-gradient(#030205, #030205, #030205, rgba(0, 0, 0, 0)); opacity: 0.5"></div>
<div class="card border-0 hidden-sm-up" style="position: absolute; top: 34px; left: 15px; right: 18px; height: 70px; border-radius: 20px 20px 0 0; background: linear-gradient(#030205, #030205, #030205, rgba(0, 0, 0, 0)); opacity: 0.5"></div>
<!--//// Buttons ////-->
<div id="INFO-TAB-2" class="card border-0 rounded-0 align-items-center bg-transparent" style="margin-top: -15px; margin-bottom: 20px">
<div class="row no-gutters">
<div class="col">
<ul class="nav nav-pills">
<!-- [1] -->
<li>
<div class="card bg-transparent border-0 rounded-0 align-items-center justify-content-center" style="width: 110px; cursor: pointer">
<img src="https://i.ibb.co/JQmKCcJ/image-holder-2.png">
<div class="collapse fade show BIO" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0;" data-parent="#INFO-TAB-2">
<div class="card border-0 rounded-0 bg-transparent h-100 justify-content-center align-items-center">
<!-- Active -->
<img src="https://i.ibb.co/86YF2Kt/image-holder-1.png" style="width: 110px">
</div>
</div>
<p style="position: absolute; top: 10px">Bio</p>
<a class="btn rounded-0 border-0 align-items-center justify-content-center" style="position: absolute; top: 0; bottom: 0; left: 0; width: 100%; box-shadow: none; opacity: 0.3" data-toggle="collapse" data-target=".BIO"></a>
</div>
</li>
<!-- [1] -->
<!-- [2] -->
<li>
<div class="card bg-transparent border-0 rounded-0 align-items-center justify-content-center mx-1" style="width: 110px; cursor: pointer">
<img src="https://i.ibb.co/JQmKCcJ/image-holder-2.png">
<div class="collapse fade ISLANDS" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0;" data-parent="#INFO-TAB-2">
<div class="card border-0 rounded-0 bg-transparent h-100 justify-content-center align-items-center">
<!-- Active -->
<img src="https://i.ibb.co/86YF2Kt/image-holder-1.png" style="width: 110px">
</div>
</div>
<p style="position: absolute; top: 10px">Islands</p>
<a class="btn rounded-0 border-0 align-items-center justify-content-center" style="position: absolute; top: 0; bottom: 0; left: 0; width: 100%; box-shadow: none; opacity: 0.3" data-toggle="collapse" data-target=".ISLANDS"></a>
</div>
</li>
<!-- [2] -->
<!-- [3] -->
<li>
<div class="card bg-transparent border-0 rounded-0 align-items-center justify-content-center" style="width: 110px; cursor: pointer">
<img src="https://i.ibb.co/JQmKCcJ/image-holder-2.png">
<div class="collapse fade STATS" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0;" data-parent="#INFO-TAB-2">
<div class="card border-0 rounded-0 bg-transparent h-100 justify-content-center align-items-center">
<!-- Active -->
<img src="https://i.ibb.co/86YF2Kt/image-holder-1.png" style="width: 110px">
</div>
</div>
<p style="position: absolute; top: 10px">Stats</p>
<a class="btn rounded-0 border-0 align-items-center justify-content-center" style="position: absolute; top: 0; bottom: 0; left: 0; width: 100%; box-shadow: none; opacity: 0.3" data-toggle="collapse" data-target=".STATS"></a>
</div>
</li>
<!-- [3] -->
</ul>
</div>
</div>
</div>
<!--//// Buttons end ////-->
<!--/////////////////////// Tab ///////////////////////-->
<!--///// Bio /////-->
<div class="collapse fade show active BIO" data-parent="#INFO-TAB">
<div class="card border-0 rounded-0 bg-transparent px-md-5" style="margin-right: -13px; height: 235px; scrollbar-width: thin; scrollbar-color: #ffca34 #ac5532; overflow: auto">
<div class="pb-5" style="margin-right: 13px">
<!-- Text -->
<p>
Write a description of your character here! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.
</p>
<p>
If you want, you can split the text in paragraphs by adding a "p" tag! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.
</p>
<!-- Text end -->
</div>
</div>
</div>
<!--///// Bio /////-->
<!--///// Islands /////-->
<div class="collapse fade ISLANDS" data-parent="#INFO-TAB">
<div class="card border-0 rounded-0 bg-transparent px-md-5 align-items-center" style="margin-right: -13px; height: 235px; scrollbar-width: thin; scrollbar-color: #ffca34 #ac5532; overflow: auto">
<div class="pb-5" style="margin-right: 13px">
<!-- [1] --><!-- Duplicate this entire section if there are more -->
<div class="row no-gutters align-items-center">
<!-- Island pic -->
<div class="col-auto">
<img src="
https://f2.toyhou.se/file/f2-toyhou-se/images/90762263_ED034K6K5MMi1fW.png
" class="mr-3" style="width: 150px">
</div>
<!-- Island pic end -->
<!-- Island name -->
<div class="col">
<p>Island</p>
</div>
<!-- Island name end -->
</div>
<!-- [1] -->
</div>
</div>
</div>
<!--///// Islands /////-->
<!--///// Stats /////-->
<div class="collapse fade STATS" data-parent="#INFO-TAB">
<div class="card border-0 rounded-0 bg-transparent px-md-5" style="margin-right: -13px; height: 235px; scrollbar-width: thin; scrollbar-color: #ffca34 #ac5532; overflow: auto">
<div class="pb-5" style="margin-right: 13px">
<!-- Gender -->
<div class="row no-gutters mt-3">
<div class="col">
Gender:
</div>
<div class="col">
No data
</div>
</div>
<!-- Gender end -->
<!-- Age -->
<div class="row no-gutters mt-1">
<div class="col">
Age:
</div>
<div class="col">
Age number
</div>
</div>
<!-- Age end -->
<!-- Species -->
<div class="row no-gutters mt-1">
<div class="col">
Species:
</div>
<div class="col">
Species name
</div>
</div>
<!-- Species end -->
<!-- Class -->
<div class="row no-gutters mt-1">
<div class="col">
Class:
</div>
<div class="col">
Class name
</div>
</div>
<!-- Class end -->
<!-- Orientation -->
<div class="row no-gutters mt-1">
<div class="col">
Orientation:
</div>
<div class="col">
No data
</div>
</div>
<!-- Orientation end -->
<!-- Likes -->
<div class="row no-gutters mt-1">
<div class="col">
Likes:
</div>
<div class="col">
<ul class="list-unstyled">
<li>- item</li>
<li>- item</li>
</ul>
</div>
</div>
<!-- Likes end -->
<!-- Dislikes -->
<div class="row no-gutters">
<div class="col">
Dislikes:
</div>
<div class="col">
<ul class="list-unstyled">
<li>- item</li>
<li>- item</li>
</ul>
</div>
</div>
<!-- Dislikes end -->
<!-- Just duplicate a section to add additional information -->
</div>
</div>
</div>
<!--///// Stats /////-->
<!--/////////////////////// Tab end ///////////////////////-->
</div>
<!-- Bottom gradient -->
<div class="card border-0 hidden-sm-down" style="position: absolute; bottom: 34px; left: 15px; right: 18px; height: 40px; border-radius: 0 0 20px 20px; background: linear-gradient(rgba(0, 0, 0, 0), #030205, #030205); opacity: 0.5"></div>
<div class="card border-0 hidden-sm-up" style="position: absolute; bottom: 14px; left: 15px; right: 18px; height: 40px; border-radius: 0 0 20px 20px; background: linear-gradient(rgba(0, 0, 0, 0), #030205, #030205); opacity: 0.5"></div>
</div>
<!--///// CREDITS /////-->
<p class="text-right" style="font-size: 13px">
<a target="_blank" href="https://toyhou.se/FlowerlyRat/characters/folder:4673560" data-toggle="tooltip" title="Code by FlowerlyRat" style="color: #fff">
<i class="fas fa-sharp fa-less-than" style="font-size: 11px"></i><i class="fas fa-sharp fa-eye-slash fa-flip-horizontal"></i><i class="fas fa-sharp fa-greater-than" style="font-size: 11px"></i></a>
</p>
<!--///// CREDITS /////-->
</div>
<!--////////////////////////////////////////////////////////////////////////////////////////////
Right side end
////////////////////////////////////////////////////////////////////////////////////////////-->
</div>
</div>Copy
<!--
╭━━╮╱╱╱╱╱╱╱╱╱╱╱╱╱╭━╮╱╱╭╮
┃━┳┫╭━┳┳┳┳━┳┳┳╮╭┳┫╋┣━╮┃╰╮
┃╭┫╰┫╋┃┃┃┃┻┫╭┫╰┫┃┃╮┫╋╰┫╭┫
╰╯╰━┻━┻━━┻━┻╯╰━╋╮┣┻┻━━┻━╯
╱╱╱╱╱╱╱╱╱╱╱╱╱╱╱╰━╯
Monster bio: code by FlowerlyRat || Based on the game My Singing Monster' UI by Big Blue Bubble
> It is recommended to use circlejourney's ToyHouse live editor -> https://th.circlejourney.net/
Element sigils and map icons have been taken from the official MSM fankit, which can be found here: https://www.bigbluebubble.com/home/games/my-singing-monsters-series/
You can find ToyHouse ready versions here: https://toyhou.se/30004019.code-wip/30004028.image-resources
-->
<div class="card rounded-0 border-0" style="overflow: hidden; position: absolute; bottom: 0; top: 0; left: 0; right: 0; background-color: #282130; z-index: -1"></div>
<div class="card bg-transparent border-0 rounded-0" style="font-size: 18px; font-family: comic sans MS; color: #fff; text-shadow: 2px 0 0 #000, 1px 2px 0 #000, -1px 2px 0 #000, 1px -2px 0 #000, -1px -2px 0 #000, 2px 2px 0 #000, -2px 2px 0 #000, 2px -2px 0 #000, -2px -2px 0 #000, -2px 0 0 #000, 0 2px 0 #000, 0 -2px 0 #000; 2px 2px 0 #000, -2px 2px 0 #000, 2px -2px 0 #000, -2px -2px 0 #000">
<div class="row no-gutters justify-content-center">
<!--////////////////////////////////////////////////////////////////////////////////////////////
Left side
////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="col-auto justify-content-center" style="margin-top: -4px">
<img src="https://i.ibb.co/Ypy67dr/image-holder-1.png">
<!--/////////////////////// Name ///////////////////////-->
<div class="card bg-transparent border-0 rounded-0 text-center" style="position: absolute; top: 25px; font-size: 25px">
<p class="text-truncate" style="width: 250px">{{!Monster name!}}</p>
</div>
<!--/////////////////////// Name end ///////////////////////-->
<!--/////////////////////// Monster image ///////////////////////-->
<!-- Feel free to change the height to fit the monster! Only put 200px as a default -->
<img style="position: absolute; bottom: 50px;
height: 200px" src="{{u!Monster image!}}">
<!--/////////////////////// Monster image end ///////////////////////-->
<!--/////////////////////// Element ///////////////////////-->
<div class="card bg-transparent border-0 rounded-0" style="position: absolute; bottom: 4px">
<div class="row no-gutters">
{{%Element sigil%
<!-- [1] --><!-- Duplicate this entire section if there are more -->
<div class="col mx-1">
<img src="{{u%Sigil image link%}}" class="d-block" style="width: 40px">
</div>
<!-- [1] -->
%end%}}
</div>
</div>
<!--/////////////////////// Element end ///////////////////////-->
</div>
<!--////////////////////////////////////////////////////////////////////////////////////////////
Left side end
////////////////////////////////////////////////////////////////////////////////////////////-->
<!--////////////////////////////////////////////////////////////////////////////////////////////
Right side
////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="col-md-7">
<div style="height: 348px; width: 100%; border: 35px solid; border-image: url(https://static.miraheze.org/mysingingmonsterswiki/5/56/Homemade_MSM_Boxes.png) 7% fill">
<div id="INFO-TAB">
<!-- Top gradient -->
<div class="card border-0 hidden-sm-down" style="position: absolute; top: 34px; left: 15px; right: 18px; height: 70px; border-radius: 20px 20px 0 0; background: linear-gradient(#030205, #030205, #030205, rgba(0, 0, 0, 0)); opacity: 0.5"></div>
<div class="card border-0 hidden-sm-up" style="position: absolute; top: 34px; left: 15px; right: 18px; height: 70px; border-radius: 20px 20px 0 0; background: linear-gradient(#030205, #030205, #030205, rgba(0, 0, 0, 0)); opacity: 0.5"></div>
<!--//// Buttons ////-->
<div id="INFO-TAB-2" class="card border-0 rounded-0 align-items-center bg-transparent" style="margin-top: -15px; margin-bottom: 20px">
<div class="row no-gutters">
<div class="col">
<ul class="nav nav-pills">
<!-- [1] -->
<li>
<div class="card bg-transparent border-0 rounded-0 align-items-center justify-content-center" style="width: 110px; cursor: pointer">
<img src="https://i.ibb.co/JQmKCcJ/image-holder-2.png">
<div class="collapse fade show BIO" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0;" data-parent="#INFO-TAB-2">
<div class="card border-0 rounded-0 bg-transparent h-100 justify-content-center align-items-center">
<!-- Active -->
<img src="https://i.ibb.co/86YF2Kt/image-holder-1.png" style="width: 110px">
</div>
</div>
<p style="position: absolute; top: 10px">Bio</p>
<a class="btn rounded-0 border-0 align-items-center justify-content-center" style="position: absolute; top: 0; bottom: 0; left: 0; width: 100%; box-shadow: none; opacity: 0.3" data-toggle="collapse" data-target=".BIO"></a>
</div>
</li>
<!-- [1] -->
<!-- [2] -->
<li>
<div class="card bg-transparent border-0 rounded-0 align-items-center justify-content-center mx-1" style="width: 110px; cursor: pointer">
<img src="https://i.ibb.co/JQmKCcJ/image-holder-2.png">
<div class="collapse fade ISLANDS" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0;" data-parent="#INFO-TAB-2">
<div class="card border-0 rounded-0 bg-transparent h-100 justify-content-center align-items-center">
<!-- Active -->
<img src="https://i.ibb.co/86YF2Kt/image-holder-1.png" style="width: 110px">
</div>
</div>
<p style="position: absolute; top: 10px">Islands</p>
<a class="btn rounded-0 border-0 align-items-center justify-content-center" style="position: absolute; top: 0; bottom: 0; left: 0; width: 100%; box-shadow: none; opacity: 0.3" data-toggle="collapse" data-target=".ISLANDS"></a>
</div>
</li>
<!-- [2] -->
<!-- [3] -->
<li>
<div class="card bg-transparent border-0 rounded-0 align-items-center justify-content-center" style="width: 110px; cursor: pointer">
<img src="https://i.ibb.co/JQmKCcJ/image-holder-2.png">
<div class="collapse fade STATS" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0;" data-parent="#INFO-TAB-2">
<div class="card border-0 rounded-0 bg-transparent h-100 justify-content-center align-items-center">
<!-- Active -->
<img src="https://i.ibb.co/86YF2Kt/image-holder-1.png" style="width: 110px">
</div>
</div>
<p style="position: absolute; top: 10px">Stats</p>
<a class="btn rounded-0 border-0 align-items-center justify-content-center" style="position: absolute; top: 0; bottom: 0; left: 0; width: 100%; box-shadow: none; opacity: 0.3" data-toggle="collapse" data-target=".STATS"></a>
</div>
</li>
<!-- [3] -->
</ul>
</div>
</div>
</div>
<!--//// Buttons end ////-->
<!--/////////////////////// Tab ///////////////////////-->
<!--///// Bio /////-->
<div class="collapse fade show active BIO" data-parent="#INFO-TAB">
<div class="card border-0 rounded-0 bg-transparent px-md-5" style="margin-right: -13px; height: 235px; scrollbar-width: thin; scrollbar-color: #ffca34 #ac5532; overflow: auto">
<div class="pb-5" style="margin-right: 13px">
{{%Paragraph%
<!-- Text -->
<p>
{{l%Text%}}
</p>
<!-- Text end -->
%end%}}
</div>
</div>
</div>
<!--///// Bio /////-->
<!--///// Islands /////-->
<div class="collapse fade ISLANDS" data-parent="#INFO-TAB">
<div class="card border-0 rounded-0 bg-transparent px-md-5 align-items-center" style="margin-right: -13px; height: 235px; scrollbar-width: thin; scrollbar-color: #ffca34 #ac5532; overflow: auto">
<div class="pb-5" style="margin-right: 13px">
{{%Island%
<!-- [1] --><!-- Duplicate this entire section if there are more -->
<div class="row no-gutters align-items-center">
<!-- Island pic -->
<div class="col-auto">
<img src="
{{u%Island image url%}}
" class="mr-3" style="width: 150px">
</div>
<!-- Island pic end -->
<!-- Island name -->
<div class="col">
<p>{{%Island name%}}</p>
</div>
<!-- Island name end -->
</div>
<!-- [1] -->
%end%}}
</div>
</div>
</div>
<!--///// Islands /////-->
<!--///// Stats /////-->
<div class="collapse fade STATS" data-parent="#INFO-TAB">
<div class="card border-0 rounded-0 bg-transparent px-md-5" style="margin-right: -13px; height: 235px; scrollbar-width: thin; scrollbar-color: #ffca34 #ac5532; overflow: auto">
<div class="pb-5" style="margin-right: 13px">
<!-- Gender -->
<div class="row no-gutters mt-3">
<div class="col">
Gender:
</div>
<div class="col">
{{!Gender!}}
</div>
</div>
<!-- Gender end -->
<!-- Age -->
<div class="row no-gutters mt-1">
<div class="col">
Age:
</div>
<div class="col">
{{!Age!}}
</div>
</div>
<!-- Age end -->
<!-- Species -->
<div class="row no-gutters mt-1">
<div class="col">
Species:
</div>
<div class="col">
{{!Species!}}
</div>
</div>
<!-- Species end -->
<!-- Class -->
<div class="row no-gutters mt-1">
<div class="col">
Class:
</div>
<div class="col">
{{!Class!}}
</div>
</div>
<!-- Class end -->
<!-- Orientation -->
<div class="row no-gutters mt-1">
<div class="col">
Orientation:
</div>
<div class="col">
{{!Orientation!}}
</div>
</div>
<!-- Orientation end -->
<!-- Likes -->
<div class="row no-gutters mt-1">
<div class="col">
Likes:
</div>
<div class="col">
<ul class="list-unstyled">
{{%Likes%
<li>- {{%item%}}</li>
%end%}}
</ul>
</div>
</div>
<!-- Likes end -->
<!-- Dislikes -->
<div class="row no-gutters">
<div class="col">
Dislikes:
</div>
<div class="col">
<ul class="list-unstyled">
{{%Dislikes%
<li>- {{%items%}}</li>
%end%}}
</ul>
</div>
</div>
<!-- Dislikes end -->
<!-- Just duplicate a section to add additional information -->
</div>
</div>
</div>
<!--///// Stats /////-->
<!--/////////////////////// Tab end ///////////////////////-->
</div>
<!-- Bottom gradient -->
<div class="card border-0 hidden-sm-down" style="position: absolute; bottom: 34px; left: 15px; right: 18px; height: 40px; border-radius: 0 0 20px 20px; background: linear-gradient(rgba(0, 0, 0, 0), #030205, #030205); opacity: 0.5"></div>
<div class="card border-0 hidden-sm-up" style="position: absolute; bottom: 14px; left: 15px; right: 18px; height: 40px; border-radius: 0 0 20px 20px; background: linear-gradient(rgba(0, 0, 0, 0), #030205, #030205); opacity: 0.5"></div>
</div>
<!--///// CREDITS /////-->
<p class="text-right" style="font-size: 13px">
<a target="_blank" href="https://toyhou.se/FlowerlyRat/characters/folder:4673560" data-toggle="tooltip" title="Code by FlowerlyRat" style="color: #fff">
<i class="fas fa-sharp fa-less-than" style="font-size: 11px"></i><i class="fas fa-sharp fa-eye-slash fa-flip-horizontal"></i><i class="fas fa-sharp fa-greater-than" style="font-size: 11px"></i></a>
</p>
<!--///// CREDITS /////-->
</div>
<!--////////////////////////////////////////////////////////////////////////////////////////////
Right side end
////////////////////////////////////////////////////////////////////////////////////////////-->
</div>
</div>