<!-------
CODE BY CLOWNIICAT ON TOYHOUSE
DO NOT STEAL/REMOVE CREDIT
IMPORTANT: have WYSIWYG off!! it probably will break if you have it on, and its difficult to edit with it
Palette to change colours!!
select the colour and press Ctrl+F to replace it
Main colour: #555555
Text Boxes, Links: #dddddd
Darker Colour: #444444
-------->
<!---
TOP BAR
---->
<div class="mx-auto my-4 p-3 row-no-gutters" style="background-color:#555555;
border-top-right-radius: 25px;
border-top-left-radius: 25px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
max-width: 600px">
<i class="fas fa-clouds col-3 float-right" style="font-size: 100px; color: #dddddd"></i>
<div class="row-no-gutters">
<div class="p-3 col-9 text-dark" style="background-color: #dddddd; border-radius: 25px">
<p style="font-family: Lucida Console, monospace;font-weight: bold;">NAME - AGE - PRONOUNS</p>
</div>
</div>
</div>
<!----
CONTENT BOX
----->
<div class="mx-auto my-4 p-3" style="background-color:#555555;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
border-bottom-right-radius: 25px;
border-bottom-left-radius: 25px;
max-width: 600px">
<div class="row no-gutters">
<!--
IMAGE
--->
<div class="col-4 p-2"> <img src="https://f2.toyhou.se/file/f2-toyhou-se/images/69400902_hnlOorrfYmpmrhh.png" style="height: 150px; width: 150px; border-radius: 25px; object-fit: cover">
</div>
<!-----------
TEXT BOX, DARK PART
------------>
<div class="col-5 p-2">
<div class="p-2 pl-3" style="background-color: #444444;
border-top-left-radius: 25px;
border-top-right-radius: 25px;
height: 38px;
"> <p style="color: #222222; font-weight: bold; font-family: Lucida Console, monospace"> ABOUT •••••••••••••
</div>
<!----------
TEXT BOX, LIGHT PART
----------->
<div class="text-dark p-3" style="overflow: auto; height: 112px; background-color: #dddddd; font-size: 12px;
border-bottom-left-radius: 25px;
border-bottom-right-radius: 25px;
">
<p>
THIS SCROLLS!!
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.
<hr style="border-with: 5px; border-color: #999999">
Friends!!
<ul class="mt-1" style="list-style-type: circle">
<li>username</li>
<li>username</li>
<li>username</li>
</ul>
<hr style="border-width: 2px; border-color: #999999">
Interests!!
<ul class="mt-1" style="list-style-type: circle">
<li>thing</li>
<li>thing</li>
<li>thing</li>
</ul>
</p>
</div>
</div>
<!--------
LINKS
--------->
<div class="col-3 p-2">
<div style="text-align: center; font-family: Lucida Console, monospace;">
<a class="btn btn-outline text-dark font-weight-bold" href="LINK_HERE" style="background-color:#dddddd; border-radius: 25px; width: 100%; margin: 5px; margin-top: 12px">LINK</a>
<a class="btn btn-outline text-dark font-weight-bold" href="LINK_HERE" style="background-color:#dddddd; border-radius: 25px; width: 100%; margin: 5px">LINK</a>
<a class="btn btn-outline text-dark font-weight-bold" href="LINK_HERE" style="background-color:#dddddd; border-radius: 25px; width: 100%; margin: 5px">LINK</a>
</div>
</div>
</div>
<!-------
MOODBOARD/IMAGE THINGIES
-------->
<div class="row no-gutters mt-3">
<div class="col-3 p-2">
<div>
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/69400902_hnlOorrfYmpmrhh.png" style="height: 65px; width: 150px;object-fit: cover; border-radius: 10px">
</div>
</div>
<div class="col-3 p-2"> <div>
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/69400902_hnlOorrfYmpmrhh.png" style="height: 65px; width: 150px;object-fit: cover; border-radius: 10px">
</div>
</div>
<div class="col-3 p-2"> <div>
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/69400902_hnlOorrfYmpmrhh.png" style="height: 65px; width: 150px;object-fit: cover; border-radius: 10px">
</div>
</div>
<div class="col-3 p-2"> <div>
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/69400902_hnlOorrfYmpmrhh.png" style="height: 65px; width: 150px;object-fit: cover; border-radius: 10px">
</div>
</div>
<!--
CREDIT, DO NOT REMOVE
--->
<a href="https://toyhou.se/clowniicat" class="text-secondary">
<i class="fas fa-code mt-2 ml-2 faded pull-right"></i>
</a>
</div>
</div>
