Floral Casing User
created by:Aris
HTMLCustom ColorsBootstrapUser
Copy
<!--
background colour: #452C23
text colour: #f4e9d6
border colour: #F2E3C7
accent colour: #AAB26A
-->
<div class="container p-0" style="max-width:750px">
<!-- top image -->
<div class="row no-gutters" style="width:100%; height:100px; background:url('https://images.unsplash.com/photo-1622264829715-7bc9d6f06428'); background-repeat:no-repeat; background-position:center; background-size:cover; border-radius:100% 100% 0% 0%"></div>
<!-- contents -->
<div class="row no-gutters my-2">
<!-- top -->
<div class="row no-gutters" style="min-height:300px; width:100%; background-color:#452C23; border:6px double #F2E3C8; position:relative">
<!-- left side -->
<div class="col-lg col-12" style="z-index:100">
<!-- pfp -->
<div style="position:absolute; background-color:#452C23; height:200px; width:200px; border:6px double #F2E3C8; left:-15px; top:-40px"><img src="IMG_HERE" style="height:100%; width:100%"></div>
<!-- fontawesome icons -->
<i class="fa-duotone fa-trillium fa-2x" style="transform:rotate(20deg); position:absolute; top:-10px; left:170px; --fa-primary-color:#b4a3bc; --fa-secondary-color:#31683d; --fa-secondary-opacity:1"></i>
<i class="fas fa-flower fa-lg" style="transform:rotate(20deg); position:absolute; top:160px; left:-18px; color:#4f86cc; z-index:10"></i>
<!-- link thingies, no more than 7 preferably. can remove any unused ones or change the icon. icons from fontawesome.com -->
<div class="row no-gutters p-1" style="position:absolute; top:153px; left:-7px; color:#aab26a; background-color:#F2E3C8; border-radius:50px">
<div class="col mx-1"><a data-toggle="tooltip" title="Username"><i class="fab fa-discord fa-lg"></i></a></div>
<div class="col mx-1"><a href="LINK_HERE" target="_blank" style="color:#aab26a"><i class="fab fa-twitter fa-lg"></i></a></div>
<div class="col mx-1"><a href="LINK_HERE" target="_blank" style="color:#aab26a"><i class="fab fa-instagram fa-lg"></i></a></div>
<div class="col mx-1"><a href="LINK_HERE" target="_blank" style="color:#aab26a"><i class="fab fa-deviantart fa-lg"></i></a></div>
<div class="col mx-1"><a href="LINK_HERE" target="_blank" style="color:#aab26a"><i class="fab fa-tiktok fa-lg"></i></a></div>
<div class="col mx-1"><a href="LINK_HERE" target="_blank" style="color:#aab26a"><i class="fab fa-tumblr fa-lg"></i></a></div>
<div class="col mx-1"><a href="LINK_HERE" target="_blank" style="color:#aab26a"><i class="fas fa-link fa-lg"></i></a></div>
</div>
<div class="row no-gutters" style="margin-left:190px">
<!-- name -->
<div class="mx-auto text-center">
<span style="font-size:1.25em; font-variant:small-caps; color:#f4e9d6">Name</span>
</div>
<!-- pronouns, timezone, n other badges -->
<div class="row no-gutters justify-content-center mx-auto">
<div class="col-auto badge p-1 m-1" style="background-color:#AAB26A; border-radius:50px; font-size:1em; height:25px"><span>pro/nouns</span></div>
<div class="col-auto badge p-1 m-1" style="background-color:#AAB26A; border-radius:50px; font-size:1em; height:25px"><span>timezone</span></div>
<div class="col-auto badge p-1 m-1" style="background-color:#AAB26A; border-radius:50px; font-size:1em; height:25px"><span>lorem</span></div>
<div class="col-auto badge p-1 m-1" style="background-color:#AAB26A; border-radius:50px; font-size:1em; height:25px"><span>lorem ipsum</span></div>
</div>
</div>
<!-- spacer -->
<div class="d-lg-block d-none" style="margin-top:50px"></div>
<div class="d-block d-lg-none" style="margin-top:25px"></div>
<!-- about me -->
<div class="row no-gutters p-2" style="color:#f4e9d6; font-size:1.25em">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</p>
</div>
<!-- do not interact -->
<div>
<div style="font-size:1.5em; font-variant:small-caps; color:#f4e9d6">
<span><i class="fas fa-x p-2"></i>Do not Interact</span>
</div>
<hr class="mx-3 mt-1 mb-1" style="border:1px solid #F2E3C8;">
<div style="color:#f4e9d6">
<ul style="list-style-type:circle; font-size:1.2em">
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
</ul>
</div>
</div>
<!-- before you interact -->
<div>
<div class="pull-right" style="font-size:1.5em; font-variant:small-caps; color:#f4e9d6">
<span>Before you Interact<i class="fas fa-exclamation p-2"></i></span>
</div>
<hr class="mx-3 mt-1 mb-1" style="border:1px solid #F2E3C8;">
<div style="color:#f4e9d6">
<ul style="list-style-type:circle; font-size:1.2em">
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
</ul>
</div>
</div>
</div>
<div class="col-lg col-12 d-lg-block d-none mx-3" style="max-width:1px; border:1px solid #F2E3C8"></div>
<!-- right side -->
<div class="col-lg col-12">
<!-- commissions -->
<div class="row no-gutters my-2" style="color:#f4e9d6">
<div class="container p-0 mx-auto">
<div style="font-size:2em; font-variant:small-caps;">
<span><i class="fas fa-paintbrush-fine p-2"></i>Art</span>
</div>
<hr class="mx-3 mt-1 mb-1" style="border:1px solid #F2E3C8;">
<div class="justify-content-center" style="font-variant:small-caps; font-size:1.5em">
<span>commissions</span>
</div>
<div class="row no-gutters justify-content-center px-2 mt-n2" style="font-size:1.25em">
<div class="col-1 mx-2"><hr class="mb-4" style="border:1px solid #F2E3C8;opacity:.25;margin-top:14px;"></div>
<span>yes</span>
<div class="col mx-2"><hr class="mb-4" style="border:1px solid #F2E3C8;opacity:.25;margin-top:14px;"></div>
</div>
<div class="justify-content-center" style="font-variant:small-caps; font-size:1.5em">
<span>trades</span>
</div>
<div class="row no-gutters justify-content-center px-2 mt-n2" style="font-size:1.25em">
<div class="col mx-2"><hr class="mb-4" style="border:1px solid #F2E3C8;opacity:.25;margin-top:14px;"></div>
<span>no</span>
<div class="col-1 mx-2"><hr class="mb-4" style="border:1px solid #F2E3C8;opacity:.25;margin-top:14px;"></div>
</div>
<div class="justify-content-center" style="font-variant:small-caps; font-size:1.5em">
<span>requests</span>
</div>
<div class="row no-gutters justify-content-center px-2 mt-n2" style="font-size:1.25em">
<div class="col-1 mx-2"><hr class="mb-4" style="border:1px solid #F2E3C8;opacity:.25;margin-top:14px;"></div>
<span>friends</span>
<div class="col mx-2"><hr class="mb-4" style="border:1px solid #F2E3C8;opacity:.25;margin-top:14px;"></div>
</div>
</div>
</div>
<!-- friends list -->
<div class="row no-gutters my-2" style="color:#f4e9d6">
<div class="container p-0 mx-auto">
<div style="font-size:2em; font-variant:small-caps">
<span class="pull-right">Friends<i class="fas fa-user-group p-2"></i></span>
</div>
<hr class="mx-3 mt-1 mb-1" style="border:1px solid #F2E3C8">
<!-- row -->
<div class="row no-gutters justify-content-center mt-2">
<div class="col-3 mx-1"><a href="https://google.com" target="_blank"><img src="IMG_HERE"></a>
<span class="justify-content-center text-center" style="font-size:1.1em">Name</span>
</div>
<div class="col-3 mx-1"><a href="https://google.com" target="_blank"><img src="IMG_HERE"></a>
<span class="justify-content-center text-center" style="font-size:1.1em">Name</span>
</div>
<div class="col-3 mx-1"><a href="https://google.com" target="_blank"><img src="IMG_HERE"></a>
<span class="justify-content-center text-center" style="font-size:1.1em">Name</span>
</div>
</div>
<!-- row, you can make more rows by copy pasting -->
<div class="row no-gutters justify-content-center mt-2">
<div class="col-3 mx-1"><a href="https://google.com" target="_blank"><img src="IMG_HERE"></a>
<span class="justify-content-center text-center" style="font-size:1.1em">Name</span>
</div>
<div class="col-3 mx-1"><a href="https://google.com" target="_blank"><img src="IMG_HERE"></a>
<span class="justify-content-center text-center" style="font-size:1.1em">Name</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- bottom -->
<div class="row no-gutters" style="width:100%">
<!-- ribbon display -->
<div class="col-lg col-12 mt-2 mr-1">
<div class="px-1" style="max-height:100%; border-top:3px solid #44332d; border-bottom:3px solid #44332d">
<div class="container p-0" style="background:url('https://images.unsplash.com/photo-1597113366853-fea190b6cd82'); background-size:cover; background-position:center; background-repeat:no-repeat; border:3px solid #44332d; position:relative"><div class="h-100 w-100 pb-1" style="background:rgba(91,65,57,0.9)">
<!-- fun fontawesome icon -->
<div class="fas fa-flower fa-2xl" style="color:#f5f1ee; position:absolute; transform:rotate(0deg); left:-5px; bottom:10px"></div>
<div class="fas fa-flower fa-xl" style="color:#f09d69; position:absolute; transform:rotate(50deg); left:-2px; bottom:10px"></div>
<!-- recommended max 6 ribbons per row, just copy paste a row to add more ribbons. -->
<div class="row no-gutters pt-2 pb-1 justify-content-center" style="border-bottom:3px solid #44332d">
<a href="RIBBON_LINK_HERE" data-toggle="tooltip" title="Ribbon Name: 'Insert ribbon explanation.'">
<img class="mx-1" src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/78535792_TD2.png">
</a>
<a href="RIBBON_LINK_HERE" data-toggle="tooltip" title="Ribbon Name: 'Insert ribbon explanation.'">
<img class="mx-1" src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/78535792_TD2.png">
</a>
<a href="RIBBON_LINK_HERE" data-toggle="tooltip" title="Ribbon Name: 'Insert ribbon explanation.'">
<img class="mx-1" src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/78535792_TD2.png">
</a>
<a href="RIBBON_LINK_HERE" data-toggle="tooltip" title="Ribbon Name: 'Insert ribbon explanation.'">
<img class="mx-1" src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/78535792_TD2.png">
</a>
<a href="RIBBON_LINK_HERE" data-toggle="tooltip" title="Ribbon Name: 'Insert ribbon explanation.'">
<img class="mx-1" src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/78535792_TD2.png">
</a>
<a href="RIBBON_LINK_HERE" data-toggle="tooltip" title="Ribbon Name: 'Insert ribbon explanation.'">
<img class="mx-1" src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/78535792_TD2.png">
</a>
</div>
<div class="row no-gutters pt-2 pb-1 justify-content-center" style="border-bottom:3px solid #44332d">
<a href="RIBBON_LINK_HERE" data-toggle="tooltip" title="Ribbon Name: 'Insert ribbon explanation.'">
<img class="mx-1" src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/78535792_TD2.png">
</a>
<a href="RIBBON_LINK_HERE" data-toggle="tooltip" title="Ribbon Name: 'Insert ribbon explanation.'">
<img class="mx-1" src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/78535792_TD2.png">
</a>
</div>
</div></div>
</div>
</div>
<!-- interests -->
<div class="col-lg col-12 mt-2 ml-1" style="background-color:#452C23; border:6px double #F2E3C8">
<div>
<div style="font-size:2em; font-variant:small-caps; color:#f4e9d6">
<span><i class="fas fa-heart fa-2xs p-2"></i>Interests</span>
</div>
<hr class="mx-3 mt-1 mb-1" style="border:1px solid #F2E3C8;">
<div style="color:#f4e9d6">
<ul style="list-style-type:circle; font-size:1.2em">
<li>Lorem ipsum<br>dolor sit amet, consectetur adipiscing elit.</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- bottom image -->
<div class="row no-gutters" style="width:100%; height:100px; background:url('https://images.unsplash.com/photo-1622264829715-7bc9d6f06428'); background-repeat:no-repeat; background-position:center; background-size:cover; border-radius:0% 0% 100% 100%"></div>
<!-- code credit, do not remove -->
<div class="pull-right"><a href="/Aris" data-toggle="tooltip" title="HTML by Palarista" style="color:#aab26a; position:absolute; bottom:75px; right:5px; opacity:.75"><i class="fas fa-code"></i></a></div>
</div>Copy
<!--
background colour: bg-dark
text colour: text-light
border colour: text-primary
accent colour: bg-secondary, text-secondary
fontawesome icons: text-warning, text-danger
-->
<div class="container p-0" style="max-width:750px">
<!-- top image -->
<div class="row no-gutters" style="width:100%; height:100px; background:url('https://images.unsplash.com/photo-1622264829715-7bc9d6f06428'); background-repeat:no-repeat; background-position:center; background-size:cover; border-radius:100% 100% 0% 0%"></div>
<!-- contents -->
<div class="row no-gutters my-2">
<!-- top -->
<div class="row no-gutters bg-dark text-primary" style="min-height:300px; width:100%; border:6px double; position:relative">
<!-- left side -->
<div class="col-lg col-12" style="z-index:100">
<!-- pfp -->
<div class="bg-dark text-primary" style="position:absolute; height:200px; width:200px; border:6px double; left:-15px; top:-40px"><img src="IMG_HERE" style="height:100%; width:100%"></div>
<!-- fontawesome icons -->
<i class="fa-duotone fa-trillium fa-2x text-warning" style="transform:rotate(20deg); position:absolute; top:-10px; left:170px"></i>
<i class="fas fa-flower fa-lg text-danger" style="transform:rotate(20deg); position:absolute; top:160px; left:-18px; z-index:10"></i>
<!-- link thingies, no more than 7 preferably. can remove any unused ones or change the icon. icons from fontawesome.com -->
<div class="row no-gutters p-1 bg-light text-secondary" style="position:absolute; top:153px; left:-7px; border-radius:50px">
<div class="col mx-1"><a data-toggle="tooltip" title="Username"><i class="fab fa-discord fa-lg"></i></a></div>
<div class="col mx-1"><a href="LINK_HERE" target="_blank" class="text-secondary"><i class="fab fa-twitter fa-lg"></i></a></div>
<div class="col mx-1"><a href="LINK_HERE" target="_blank" class="text-secondary"><i class="fab fa-instagram fa-lg"></i></a></div>
<div class="col mx-1"><a href="LINK_HERE" target="_blank" class="text-secondary"><i class="fab fa-deviantart fa-lg"></i></a></div>
<div class="col mx-1"><a href="LINK_HERE" target="_blank" class="text-secondary"><i class="fab fa-tiktok fa-lg"></i></a></div>
<div class="col mx-1"><a href="LINK_HERE" target="_blank" class="text-secondary"><i class="fab fa-tumblr fa-lg"></i></a></div>
<div class="col mx-1"><a href="LINK_HERE" target="_blank" class="text-secondary"><i class="fas fa-link fa-lg"></i></a></div>
</div>
<div class="row no-gutters" style="margin-left:190px">
<!-- name -->
<div class="mx-auto text-center">
<span class="text-light" style="font-size:1.25em; font-variant:small-caps">Name</span>
</div>
<!-- pronouns, timezone, n other badges -->
<div class="row no-gutters justify-content-center mx-auto">
<div class="col-auto badge p-1 m-1 bg-secondary" style="border-radius:50px; font-size:1em; height:25px"><span>pro/nouns</span></div>
<div class="col-auto badge p-1 m-1 bg-secondary" style="border-radius:50px; font-size:1em; height:25px"><span>timezone</span></div>
<div class="col-auto badge p-1 m-1 bg-secondary" style="border-radius:50px; font-size:1em; height:25px"><span>lorem</span></div>
<div class="col-auto badge p-1 m-1 bg-secondary" style="border-radius:50px; font-size:1em; height:25px"><span>lorem ipsum</span></div>
</div>
</div>
<!-- spacer -->
<div class="d-lg-block d-none" style="margin-top:50px"></div>
<div class="d-block d-lg-none" style="margin-top:25px"></div>
<!-- about me -->
<div class="row no-gutters p-2 text-light" style="font-size:1.25em; margin-top:60px">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</p>
</div>
<!-- do not interact -->
<div>
<div class="text-light" style="font-size:1.5em; font-variant:small-caps">
<span><i class="fas fa-x p-2"></i>Do not Interact</span>
</div>
<hr class="mx-3 mt-1 mb-1 text-primary" style="border:1px solid">
<div class="text-light">
<ul style="list-style-type:circle; font-size:1.2em">
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
</ul>
</div>
</div>
<!-- before you interact -->
<div>
<div class="pull-right text-light" style="font-size:1.5em; font-variant:small-caps">
<span>Before you Interact<i class="fas fa-exclamation p-2"></i></span>
</div>
<hr class="mx-3 mt-1 mb-1 text-primary" style="border:1px solid">
<div class="text-light">
<ul style="list-style-type:circle; font-size:1.2em">
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
</ul>
</div>
</div>
</div>
<div class="col-lg col-12 d-lg-block d-none mx-3 text-primary" style="max-width:1px; border:1px solid"></div>
<!-- right side -->
<div class="col-lg col-12">
<!-- commissions -->
<div class="row no-gutters my-2 text-light">
<div class="container p-0 mx-auto">
<div style="font-size:2em; font-variant:small-caps;">
<span><i class="fas fa-paintbrush-fine p-2"></i>Art</span>
</div>
<hr class="mx-3 mt-1 mb-1 text-primary" style="border:1px solid">
<div class="justify-content-center" style="font-variant:small-caps; font-size:1.5em">
<span>commissions</span>
</div>
<div class="row no-gutters justify-content-center px-2 mt-n2" style="font-size:1.25em">
<div class="col-1 mx-2"><hr class="mb-4 text-primary" style="border:1px solid; opacity:.25; margin-top:14px"></div>
<span>yes</span>
<div class="col mx-2"><hr class="mb-4 text-primary" style="border:1px solid; opacity:.25; margin-top:14px"></div>
</div>
<div class="justify-content-center" style="font-variant:small-caps; font-size:1.5em">
<span>trades</span>
</div>
<div class="row no-gutters justify-content-center px-2 mt-n2" style="font-size:1.25em">
<div class="col mx-2"><hr class="mb-4 text-primary" style="border:1px solid; opacity:.25; margin-top:14px"></div>
<span>no</span>
<div class="col-1 mx-2"><hr class="mb-4 text-primary" style="border:1px solid; opacity:.25; margin-top:14px"></div>
</div>
<div class="justify-content-center" style="font-variant:small-caps; font-size:1.5em">
<span>requests</span>
</div>
<div class="row no-gutters justify-content-center px-2 mt-n2" style="font-size:1.25em">
<div class="col-1 mx-2"><hr class="mb-4 text-primary" style="border:1px solid; opacity:.25; margin-top:14px"></div>
<span>friends</span>
<div class="col mx-2"><hr class="mb-4 text-primary" style="border:1px solid; opacity:.25; margin-top:14px"></div>
</div>
</div>
</div>
<!-- friends list -->
<div class="row no-gutters my-2 text-light">
<div class="container p-0 mx-auto">
<div style="font-size:2em; font-variant:small-caps">
<span class="pull-right">Friends<i class="fas fa-user-group p-2"></i></span>
</div>
<hr class="mx-3 mt-1 mb-1 text-primary" style="border:1px solid">
<!-- row -->
<div class="row no-gutters justify-content-center mt-2">
<div class="col-3 mx-1"><a href="https://google.com" target="_blank"><img src="IMG_HERE"></a>
<span class="justify-content-center text-center" style="font-size:1.1em">Name</span>
</div>
<div class="col-3 mx-1"><a href="https://google.com" target="_blank"><img src="IMG_HERE"></a>
<span class="justify-content-center text-center" style="font-size:1.1em">Name</span>
</div>
<div class="col-3 mx-1"><a href="https://google.com" target="_blank"><img src="IMG_HERE"></a>
<span class="justify-content-center text-center" style="font-size:1.1em">Name</span>
</div>
</div>
<!-- row, you can make more rows by copy pasting -->
<div class="row no-gutters justify-content-center mt-2">
<div class="col-3 mx-1"><a href="https://google.com" target="_blank"><img src="IMG_HERE"></a>
<span class="justify-content-center text-center" style="font-size:1.1em">Name</span>
</div>
<div class="col-3 mx-1"><a href="https://google.com" target="_blank"><img src="IMG_HERE"></a>
<span class="justify-content-center text-center" style="font-size:1.1em">Name</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- bottom -->
<div class="row no-gutters" style="width:100%">
<!-- ribbon display -->
<div class="col-lg col-12 mt-2 mr-1">
<div class="px-1 text-primary" style="max-height:100%; border-top:3px solid; border-bottom:3px solid">
<div class="container p-0 text-primary" style="background:url('https://images.unsplash.com/photo-1597113366853-fea190b6cd82'); background-size:cover; background-position:center; background-repeat:no-repeat; border:3px solid; position:relative"><div class="h-100 w-100 pb-1 bg-dark">
<!-- fun fontawesome icon -->
<div class="fas fa-flower fa-2xl text-light" style="position:absolute; transform:rotate(0deg); left:-5px; bottom:10px"></div>
<div class="fas fa-flower fa-xl text-warning" style="position:absolute; transform:rotate(50deg); left:-2px; bottom:10px"></div>
<!-- recommended max 6 ribbons per row, just copy paste a row to add more ribbons. -->
<div class="row no-gutters pt-2 pb-1 justify-content-center text-primary" style="border-bottom:3px solid">
<a href="RIBBON_LINK_HERE" data-toggle="tooltip" title="Ribbon Name: 'Insert ribbon explanation.'">
<img class="mx-1" src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/78535792_TD2.png">
</a>
<a href="RIBBON_LINK_HERE" data-toggle="tooltip" title="Ribbon Name: 'Insert ribbon explanation.'">
<img class="mx-1" src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/78535792_TD2.png">
</a>
<a href="RIBBON_LINK_HERE" data-toggle="tooltip" title="Ribbon Name: 'Insert ribbon explanation.'">
<img class="mx-1" src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/78535792_TD2.png">
</a>
<a href="RIBBON_LINK_HERE" data-toggle="tooltip" title="Ribbon Name: 'Insert ribbon explanation.'">
<img class="mx-1" src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/78535792_TD2.png">
</a>
<a href="RIBBON_LINK_HERE" data-toggle="tooltip" title="Ribbon Name: 'Insert ribbon explanation.'">
<img class="mx-1" src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/78535792_TD2.png">
</a>
<a href="RIBBON_LINK_HERE" data-toggle="tooltip" title="Ribbon Name: 'Insert ribbon explanation.'">
<img class="mx-1" src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/78535792_TD2.png">
</a>
</div>
<div class="row no-gutters pt-2 pb-1 justify-content-center text-primary" style="border-bottom:3px solid">
<a href="RIBBON_LINK_HERE" data-toggle="tooltip" title="Ribbon Name: 'Insert ribbon explanation.'">
<img class="mx-1" src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/78535792_TD2.png">
</a>
<a href="RIBBON_LINK_HERE" data-toggle="tooltip" title="Ribbon Name: 'Insert ribbon explanation.'">
<img class="mx-1" src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/78535792_TD2.png">
</a>
</div>
</div></div>
</div>
</div>
<!-- interests -->
<div class="col-lg col-12 mt-2 ml-1 bg-dark text-primary" style="border:6px double">
<div>
<div class="text-light" style="font-size:2em; font-variant:small-caps">
<span><i class="fas fa-heart fa-2xs p-2"></i>Interests</span>
</div>
<hr class="mx-3 mt-1 mb-1 text-primary" style="border:1px solid">
<div class="text-light">
<ul style="list-style-type:circle; font-size:1.2em">
<li>Lorem ipsum<br>dolor sit amet, consectetur adipiscing elit.</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- bottom image -->
<div class="row no-gutters" style="width:100%; height:100px; background:url('https://images.unsplash.com/photo-1622264829715-7bc9d6f06428'); background-repeat:no-repeat; background-position:center; background-size:cover; border-radius:0% 0% 100% 100%"></div>
<!-- code credit, do not remove -->
<div class="pull-right"><a href="/Aris" data-toggle="tooltip" title="HTML by Palarista" class="text-secondary" style="position:absolute; bottom:75px; right:5px; opacity:.75"><i class="fas fa-code"></i></a></div>
</div>