<!---
VIDEO GAME LOVER / by cati/dogboy
NOTES
main color: #3DA676
accent: #FF5AAC
(use ctrl+f + replace for accent replacement)
custom colors! ✔✔✔
RULES & DISCLAIMERS
- fav/comment if using pls!
- not wysiwyg friendly so please turn that off!
- feel free to edit/frakenstein/etc if you feel, just pls dont remove my credit!!
- have a nice day!!
--->
<!--- color of the "ds", change the value of background:#HEXCODE --->
<div class="container-fluid shadow-sm" style="background:#3DA676;padding:20px;border-radius:20px;max-width:1000px;margin:30px auto 5px;border:1px solid #000000;">
<div class="row no-gutters">
<div class="col-md-2">
<img class="mx-auto d-block" src="https://cdn0.iconfinder.com/data/icons/everyday-objects-line-art-2/128/directional-pad-ol-512.png" style="margin-top:150px;">
</div>
<div class="col-md-8 p-4">
<div class="card p-3" style="background:#F7F7F7;height:420px;border:3px solid #244544;">
<div class="row no-gutters">
<div class="col-md-5">
<!--- avatar --->
<img class="mx-auto d-block img-thumbnail mt-3" style="width:190px;border:3px solid #3DA676;" src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/25972071_ona.png">
</div>
<div class="col-md-6 p-4">
<!--- information --->
<div class="justify-content-between my-2">
<div><div style="border-radius:2px;background-color:#FF5AAC;"><h3 class="text-uppercase m-1" style="color:#FFFFFF;font-size:15px;letter-spacing:2px;" align="center">name</h3></div></div>
<div><span class="text-muted font-italic" style="font-size:15px;letter-spacing:2px;">content</span></div>
</div>
<div class="justify-content-between my-2">
<div><div style="border-radius:2px;background-color:#3DA676;"><h3 class="text-uppercase m-1" style="color:#FFFFFF;font-size:15px;letter-spacing:2px;" align="center">gender</h3></div></div>
<div><span class="text-muted font-italic" style="font-size:15px;letter-spacing:2px;">content</span></div>
</div>
<div class="justify-content-between my-2">
<div><div style="border-radius:2px;background-color:#FF5AAC;"><h3 class="text-uppercase m-1" style="color:#FFFFFF;font-size:15px;letter-spacing:2px;" align="center">height</h3></div></div>
<div><span class="text-muted font-italic" style="font-size:15px;letter-spacing:2px;">content</span></div>
</div>
<div class="justify-content-between my-2">
<div><div style="border-radius:2px;background-color:#3DA676;"><h3 class="text-uppercase m-1" style="color:#FFFFFF;font-size:15px;letter-spacing:2px;" align="center">specie</h3></div></div>
<div><span class="text-muted font-italic" style="font-size:15px;letter-spacing:2px;">content</span></div>
</div>
<div class="justify-content-between my-2">
<div><div style="border-radius:2px;background-color:#FF5AAC;"><h3 class="text-uppercase m-1" style="color:#FFFFFF;font-size:15px;letter-spacing:2px;" align="center">status</h3></div></div>
<div><span class="text-muted font-italic" style="font-size:15px;letter-spacing:2px;">content</span></div>
</div>
</div>
<hr style="width:80%;background-color:#FF5AAC;height:2px;">
<!--- description --->
<p class="text-center p-2 font-italic" style="color:#3DA676;height:130px;overflow:auto;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non auctor lorem. Maecenas et viverra nibh. Duis eget dignissim dolor. Ut eu turpis porta, bibendum odio vitae, efficitur leo. Aenean ultrices, nulla in maximus consectetur, libero eros efficitur ex, vel faucibus sapien sem et leo. Pellentesque massa est, pretium sed euismod sit amet, iaculis sit amet justo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non auctor lorem. Maecenas et viverra nibh. Duis eget dignissim dolor. Ut eu turpis porta, bibendum odio vitae, efficitur leo. Aenean ultrices, nulla in maximus consectetur, libero eros efficitur ex, vel faucibus sapien sem et leo. Pellentesque massa est, pretium sed euismod sit amet, iaculis sit amet justo.</p>
</div>
</div>
</div>
<div class="col-md-2">
<div class="card rounded-circle mx-auto shadow-sm" style="width:50px;height:50px;background:#FFFFFF;margin-top:120px;">
<h3 class="text-uppercase text-center mt-2" style="font-size:28px;letter-spacing:2px;color:#FF5AAC;">X</h3>
</div>
<div class="row no-gutters">
<div class="card rounded-circle mx-auto shadow-sm" style="width:50px;height:50px;background:#FFFFFF;">
<h3 class="text-uppercase text-center mt-2" style="font-size:28px;letter-spacing:2px;color:#FF5AAC;">Y</h3>
</div>
<div class="card rounded-circle mx-auto shadow-sm" style="width:50px;height:50px;background:#FFFFFF;">
<h3 class="text-uppercase text-center mt-2" style="font-size:28px;letter-spacing:2px;color:#FF5AAC;">A</h3>
</div>
</div>
<div class="card rounded-circle mx-auto shadow-sm" style="width:50px;height:50px;background:#FFFFFF;">
<h3 class="text-uppercase text-center mt-2" style="font-size:28px;letter-spacing:2px;color:#FF5AAC;">B</h3>
</div>
<!--- credits --->
<div class="row no-gutters" style="margin-top:120px;">
<div class="card rounded-circle shadow-sm " style="width:10px;height:10px;background:#F7F7F7;"></div>
<a href="URLHERE" style="color:#FFFFFF;"><h3 class="text-uppercase ml-2 font-italic" style="font-size:11px;letter-spacing:1px;" align="center">design by [artist]</h3></a></div>
<div class="row no-gutters">
<div class="card rounded-circle shadow-sm " style="width:10px;height:10px;background:#F7F7F7;"></div>
<a href="https://toyhou.se/8578307.video-game-lover-f2u-html" style="color:#FFFFFF;"><h3 class="text-uppercase ml-2 font-italic" style="font-size:11px;letter-spacing:1px;" align="center">code by cati</h3></a></div>
</div>
</div>
</div>
</div>
