<!--
「 Cybernetic 」
-------------
Info
❥ ctrl+f for quick color changes
❥ top image works best with larger cropped image to get centering where you want it
❥ feel free to delete the border colors on the clickable icons! just get rid of the "background-color;border-color" at the end of the style section and "img-thumbnail" in the class section
❥ if you would like the image banner to be included in the scrollbar, simply take the div that includes the "id=about" and paste it above the banner section instead
❥ please do not remove my credit
-------------
Color List
❥ Main Content : #28294D
❥ Text Color : #E3DEEA
❥ Accent Color : #544f91
❥ Secondary Accent Color : #F086F7
-->
<!--Initial Container-->
<div class="container-fluid" style="max-width:1200px; background: url([IMAGE HERE]) center fixed; background-size: cover; border-radius:20px; padding: 50px 20px 15px 20px;">
<!----
「 ABOUT 」
---->
<div class="row">
<div class="col">
<div class="p-4 m-2 mx-4" style="height: 508px;border-radius:10px;border-color:transparent; background-color:#28294D; color:#E3DEEA">
<div class="d-flex">
<span class="col-auto" style="font-size: 1.5rem;">
About
</span>
<hr class="w-100 my-auto" style="border:0.5px solid #fff!important; color:#E3DEEA;">
<span class="col-auto" style="font-size: 1.5rem; color:#E3DEEA;"> <i class="fal fa-flask-poison"></i></span>
</div>
<br>
<!----
「 BANNER 」
---->
<div class="flex-grow-1 rounded mb-3 hidden-sm-down" style="background: url([IMAGE HERE]); background-size:cover;background-position:center; height: 110px; width: 470px; max-width: 240; border-width: 5px; border-radius: 4px"> </div>
<!----
「 BIO 」
---->
<div id="about" style="height: 275px; overflow:auto; padding-bottom: 4px; font-size: 15px; color:#E3DEEA">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut bibendum dolor urna, sit amet molestie mi pulvinar vel. Ut scelerisque malesuada vestibulum. Phasellus nec finibus nunc, et posuere eros. Etiam ac tempor risus, eu iaculis ex. Cras gravida gravida facilisis. Maecenas egestas fermentum leo vel lobortis. Sed dignissim ornare sapien a accumsan. Quisque ut augue egestas, interdum leo et, laoreet est. Maecenas hendrerit dui vel metus varius consequat. Suspendisse hendrerit lacinia consectetur. Sed mauris eros, lobortis in ligula tiamncidunt, pharetra porta lectus. Quisque convallis, turpis laoreet luctus tempus, arcu odio hendrerit nibh, suscipit euismod urna lorem at velit. Maecenas vitae odio placerat ex dictum consectetur. Nulla sem arcu, venenatis sit et pretium id, dapibus quis ex.
</div>
</div>
<!----
「 FRIENDS LIST 」
---->
<div class="p-2 m-4" style="height: 100px; border-radius:10px;border-color:transparent; background-color:#28294D">
<!-- FRIEND 1 -->
<div class="row no-gutters">
<div class="col mr-3">
<a href="[LINK HERE]" class="pl-3" data-toggle="tooltip" data-placement="bottom" title="NAME">
<img class="img-thumbnail rounded-circle" src="[IMAGE HERE]" style="border-radius:50%;height:80px;width:80px; background-color:#544f91; border-color:#544f91">
</img>
</a>
</div>
<!-- FRIEND 2 -->
<div class="col">
<a href="[LINK HERE]" class="mr-3" data-toggle="tooltip" data-placement="bottom" title="NAME">
<img class="img-thumbnail rounded-circle" src="[IMAGE HERE]" style="border-radius:50%;height:80px;width:80px; background-color:#544f91; border-color:#544f91">
</img>
</a>
</div>
<!-- FRIEND 3 -->
<div class="col">
<a href="[LINK HERE]" class="mr-3" data-toggle="tooltip" data-placement="bottom" title="NAME">
<img class="img-thumbnail rounded-circle" src="[IMAGE HERE]" style="border-radius:50%;height:80px;width:80px; background-color:#544f91; border-color:#544f91">
</img>
</a>
</div>
<!-- FRIEND 4 -->
<div class="col">
<a href="[LINK HERE]" class="mr-3" data-toggle="tooltip" data-placement="bottom" title="NAME">
<img class="img-thumbnail rounded-circle" src="[IMAGE HERE]" style="border-radius:50%;height:80px;width:80px; background-color:#544f91; border-color:#544f91">
</img>
</a>
</div>
<!-- FRIEND 5 -->
<div class="col">
<a href="[LINK HERE]" class="mr-3" data-toggle="tooltip" data-placement="bottom" title="NAME">
<img class="img-thumbnail rounded-circle" src="[IMAGE HERE]" style="border-radius:50%;height:80px;width:80px; background-color:#544f91; border-color:#544f91">
</img>
</a>
</div>
</div>
</div>
</div>
<!----
「 ICON 」
---->
<div class="col">
<div align="center">
<img class="img-thumbnail rounded-circle p-2" src="[IMAGE HERE]" style="width:300px; background-color: #28294D; border-color: #28294D; max-height: 300px; max-width: 300px;">
</div>
<!----
「 PERSONAL 」
---->
<div class="p-2 m-2 mb-4" style="height: 60px; border-radius:10px;border-color:transparent; background-color:#28294D; color:#E3DEEA">
<div align="center">
<p> name . age . prns
<br>
<i class="fal fa-quote-left" style="color:#E3DEEA"></i> <a href="SONG LINK" style="color:#F086F7"><i> song quote </i> </a><i class="fal fa-quote-right" style="color:#E3DEEA"></i>
</p>
</div>
</div>
<!----
「 FEATURED OCS 」
---->
<div class="p-3 m-2" style="height: 248px; border-radius:10px;border-color:transparent; background-color:#28294D; color:#E3DEEA;">
<div class="d-flex">
<span class="col-auto" style="font-size: 1.5rem;"> Featured</span>
<hr class="w-100 my-auto" style="border:0.5px solid #fff!important;">
<span class="col-auto" style="font-size: 1.5rem;"> <i class="fal fa-heart"></i></span>
</div>
<div class="row no-gutters">
<a href="[LINK HERE]" class="col-4 p-2 mt-2" data-toggle="tooltip" data-placement="bottom" title="NAME">
<img class="img-thumbnail rounded" src="[IMAGE HERE]" style="height:150px; width:150px;background-color:#544f91; border-color:#544f91">
</a>
<a href="[LINK HERE]" class="col-4 p-2 mt-2" data-toggle="tooltip" data-placement="bottom" title="NAME">
<img class="img-thumbnail rounded" src="[IMAGE HERE]" style="height:150px; width:150px; background-color:#544f91; border-color:#544f91">
</a>
<a href="[LINK HERE]" class="col-4 p-2 mt-2" data-toggle="tooltip" data-placement="bottom" title="NAME">
<img class="img-thumbnail rounded" src="[IMAGE HERE]" style="height:150px; width:150px; background-color:#544f91; border-color:#544f91">
</a>
</div>
</div>
</div>
</div>
<!----
「 CREDIT 」
---->
<div align="right"><a href="https://toyhou.se/hearticodes" style="color:#F086F7; font-size:20px; position: absolute; bottom: 5px; right: 12px" data-toggle="tooltip" data-placement="top" title="code by hearticodes"><i class="fad fa-heart-circle"></i></a></div>
</div>
</div>