<!---
STEADFAST / by cati/dogboy
NOTES
accent: #1C81C0
(use ctrl+f + replace for accent replacement)
mobile friendly + 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!!
--->
<!--- background pattern --->
<div class="container-fluid" style="background:url(https://64.media.tumblr.com/e26836aa5efaffe804a8cb234fa99efd/tumblr_inline_ml9djpn0Aa1qz4rgp.gif) repeat fixed;border-radius:40px;max-width:850px;padding-top:20px;padding-bottom:20px;padding-left:30px;padding-right:30px;margin:30px auto 5px;">
<div class="row no-gutters">
<div class="col-md-4 p-2">
<!--- avatar --->
<img class="img-thumbnail fr-rounded mx-auto d-flex" style="height:220px;border:solid 2px #1C81C0;" src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/27057565_vxG.png">
<!--- column info --->
<h3 class="text-uppercase my-2 p-0" style="color:#1C81C0;font-size:30px;letter-spacing:3px;font-weight:400;" align="center">name</h3>
<h3 class="text-uppercase my-1" style="color:#1C81C0;font-size:25px;letter-spacing:3px;font-weight:400;" align="center">age</h3>
<h3 class="text-uppercase my-1" style="color:#1C81C0;font-size:25px;letter-spacing:3px;font-weight:400;" align="center">gender</h3>
<h3 class="text-uppercase my-1" style="color:#1C81C0;font-size:25px;letter-spacing:3px;font-weight:400;" align="center">species</h3>
<h3 class="text-uppercase my-1" style="color:#1C81C0;font-size:25px;letter-spacing:3px;font-weight:400;" align="center">sexuality</h3>
<h3 class="text-uppercase my-10" style="color:#1C81C0;font-size:25px;letter-spacing:3px;font-weight:400;" align="center">birthday</h3>
<h3 class="text-uppercase my-1" style="color:#1C81C0;font-size:25px;letter-spacing:3px;font-weight:400;" align="center">status</h3>
<div class="row no-gutters p-2 mt-3" style="border:1px solid #1C81C0;">
<!--- aesthetic images --->
<div class="col-sm-6">
<img class="img-fluid mx-auto d-block" src="https://data.whicdn.com/images/322087378/original.jpg">
</div>
<div class="col-sm-6">
<img class="img-fluid mx-auto d-block" src="https://images6.fanpop.com/image/photos/40900000/aesthetic-bag-blue-macbook-Favim-com-4497341-aesthetic-40936961-610-610.jpg">
</div>
<div class="col-sm-6">
<img class="img-fluid mx-auto d-block" src="https://i.pinimg.com/originals/ba/56/be/ba56bea671331d73881f9af117d4e87c.jpg">
</div>
<div class="col-sm-6">
<img class="img-fluid mx-auto d-block" src="https://i.pinimg.com/originals/4e/df/40/4edf405c1b6e1d1781894e6c26994001.jpg">
</div>
</div>
</div>
<div class="col-lg-8 p-3">
<!--- about --->
<h3 class="font-italic my-2 p-0" style="color:#1C81C0;font-size:30px;letter-spacing:3px;font-weight:200;" align="center">about</h3>
<div class="card p-3" style="background:#FFFFFF;border: solid 1px #1C81C0;">
<p class="text-center font-italic" style="color:#1C81C0;font-size:14px;height:200px;overflow:auto;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vulputate. Ut vel congue dolor, in volutpat dui. Nunc libero velit, rutrum eget cursus in, blandit non nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vulputate. Ut vel congue dolor, in volutpat dui. Nunc libero velit, rutrum eget cursus in, blandit non nisi.
<br><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vulputate. Ut vel congue dolor, in volutpat dui. Nunc libero velit, rutrum eget cursus in, blandit non nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vulputate. Ut vel congue dolor, in volutpat dui. Nunc libero velit, rutrum eget cursus in, blandit non nisi.</p>
</div>
<!--- relationships --->
<div class="card mt-2 p-3" style="background:#FFFFFF;border: solid 1px #1C81C0;height:200px;overflow:auto;">
<!--- character 1 --->
<div class="row no-gutters">
<div class="col-lg-4">
<img class="img-thumbnail fr-rounded mx-auto d-flex" style="border:solid 2px #1C81C0;" src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/27021403_xrL.png">
</div>
<div class="col-lg-8">
<h3 class="text-uppercase my-2 p-0" style="color:#1C81C0;font-size:22px;letter-spacing:1px;font-weight:400;" align="center">
<a href="URLHERE" style="color:#1C81C0;">name</a> - ship type</h3>
<p class="text-center p-2" style="color:#1C81C0;font-size:13px;height:120px;overflow:auto;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vulputate. Ut vel congue dolor, in volutpat dui. Nunc libero velit, rutrum eget cursus in, blandit non nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vulputate. Ut vel congue dolor, in volutpat dui. Nunc libero velit, rutrum eget cursus in, blandit non nisi.</p>
</div>
</div>
<!--- character 2 --->
<hr style="width:80%;background-color:#1C81C0;">
<div class="row no-gutters">
<div class="col-lg-4">
<img class="img-thumbnail fr-rounded mx-auto d-flex" style="border:solid 2px #1C81C0;" src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/27009460_7zH.png">
</div>
<div class="col-lg-8">
<h3 class="text-uppercase my-2 p-0" style="color:#1C81C0;font-size:22px;letter-spacing:1px;font-weight:400;" align="center">
<a href="URLHERE" style="color:#1C81C0;">name</a> - ship type</h3>
<p class="text-center p-2" style="color:#1C81C0;font-size:13px;height:120px;overflow:auto;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vulputate. Ut vel congue dolor, in volutpat dui. Nunc libero velit, rutrum eget cursus in, blandit non nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vulputate. Ut vel congue dolor, in volutpat dui. Nunc libero velit, rutrum eget cursus in, blandit non nisi.</p>
</div>
</div>
<!--- character 3, to add more highlight until character 3 end and then copy paste --->
<hr style="width:80%;background-color:#1C81C0;">
<div class="row no-gutters">
<div class="col-lg-4">
<img class="img-thumbnail fr-rounded mx-auto d-flex" style="border:solid 2px #1C81C0;" src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/26959938_jMy.png?1601427245">
</div>
<div class="col-lg-8">
<h3 class="text-uppercase my-2 p-0" style="color:#1C81C0;font-size:22px;letter-spacing:1px;font-weight:400;" align="center">
<a href="URLHERE" style="color:#1C81C0;">name</a> - ship type</h3>
<p class="text-center p-2" style="color:#1C81C0;font-size:13px;height:120px;overflow:auto;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vulputate. Ut vel congue dolor, in volutpat dui. Nunc libero velit, rutrum eget cursus in, blandit non nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vulputate. Ut vel congue dolor, in volutpat dui. Nunc libero velit, rutrum eget cursus in, blandit non nisi.</p>
</div>
</div>
<!--- character 3 end --->
</div>
<div class="row no-gutters">
<div class="col-md-6">
<div class="card m-2 p-3" style="background:#FFFFFF;border: solid 1px #1C81C0;height:200px;overflow:auto;">
<!--- likes --->
<h3 class="font-italic" style="color:#1C81C0;font-size:24px;letter-spacing:3px;font-weight:200;" align="center">likes</h3>
<ul class="fa-ul" style="color:#1C81C0;font-size:20px;margin-left:3px;font-weight:200;">
<li><span><i class="fas fa-heart mr-1"></i></span> content</li>
<li><span><i class="fas fa-heart mr-1"></i></span> content</li>
<li><span><i class="fas fa-heart mr-1"></i></span> content</li>
<li><span><i class="fas fa-heart mr-1"></i></span> content</li>
<li><span><i class="fas fa-heart mr-1"></i></span> content</li>
<li><span><i class="fas fa-heart mr-1"></i></span> content</li>
<li><span><i class="fas fa-heart mr-1"></i></span> content</li>
</ul>
</div>
</div>
<div class="col-md-6">
<div class="card m-2 p-3" style="background:#FFFFFF;border: solid 1px #1C81C0;height:200px;overflow:auto;">
<!--- dislikes --->
<h3 class="font-italic" style="color:#1C81C0;font-size:24px;letter-spacing:3px;font-weight:200;" align="center">dislikes</h3>
<ul class="fa-ul" style="color:#1C81C0;font-size:20px;margin-left:3px;font-weight:200;">
<li><span><i class="fas fa-heart-broken mr-1"></i></span> content</li>
<li><span><i class="fas fa-heart-broken mr-1"></i></span> content</li>
<li><span><i class="fas fa-heart-broken mr-1"></i></span> content</li>
<li><span><i class="fas fa-heart-broken mr-1"></i></span> content</li>
<li><span><i class="fas fa-heart-broken mr-1"></i></span> content</li>
<li><span><i class="fas fa-heart-broken mr-1"></i></span> content</li>
<li><span><i class="fas fa-heart-broken mr-1"></i></span> content</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<!--- credit --->
<a class="d-block text-muted text-center" href="https://toyhou.se/8802405.steadfast-f2u-html" style="font-size:0.6em;">code by cati <i class="fad fa-rainbow"></i></a>
