<!---
LIGHT / by cati/dogboy
NOTES
background: #4D2B7E
text: #A341E6
(use ctrl+f + replace for accent replacement)
directions for pagedolls at the pagedolls!
semi-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 image --->
<div class="container" style="background:url('https://images.unsplash.com/photo-1569940532213-33adf38784c9?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=334&q=80');background-size:cover;background-position:center;max-width:750px;margin:30px auto 5px;padding:70px;">
<!--- faded black card, to change the color, change the first 3 numbers of the rgba, but do not remove the 0.5! --->
<div class="card" style="background: rgba(0,0,0,0.5);padding:30px;">
<div class="col-lg-12">
<div class="card" style="background:#4D2B7E;border:0px;overflow:auto;border-radius:0px;">
<!--- name --->
<p class="text-center text-uppercase my-auto p-2" style="letter-spacing:3px;color:#A341E6;font-size:40px;font-weight:500;">
name</p>
</div>
<div class="row">
<!--- first column, likes and dislikes --->
<div class="col-lg-6 mt-3">
<div class="card p-3" style="background:#4D2B7E;border:0px;overflow:auto;border-radius:0px;">
<h2 style="color:#A341E6;">Likes:</h2>
<ul class="fa-ul" style="color:#A341E6;font-size:13px;font-weight:400;margin:0px;padding:4px;height:100px;overflow:auto;">
<li><span><i class="far fa-heart mr-1" style="font-size:12px;"></i></span>content</li>
<li><span><i class="far fa-heart mr-1" style="font-size:12px;"></i></span>content</li>
<li><span><i class="far fa-heart mr-1" style="font-size:12px;"></i></span>content</li>
<li><span><i class="far fa-heart mr-1" style="font-size:12px;"></i></span>content</li>
<li><span><i class="far fa-heart mr-1" style="font-size:12px;"></i></span>content</li>
</ul>
<h2 style="color:#A341E6;" class="mt-2">Dislikes:</h2>
<ul class="fa-ul" style="color:#A341E6;font-size:13px;font-weight:400;margin:0px;padding:4px;height:100px;overflow:auto;">
<li><span><i class="far fa-skull mr-1" style="font-size:12px;"></i></span>content</li>
<li><span><i class="far fa-skull mr-1" style="font-size:12px;"></i></span>content</li>
<li><span><i class="far fa-skull mr-1" style="font-size:12px;"></i></span>content</li>
<li><span><i class="far fa-skull mr-1" style="font-size:12px;"></i></span>content</li>
<li><span><i class="far fa-skull mr-1" style="font-size:12px;"></i></span>content</li>
</ul>
</div>
</div>
<!--- second column, basic info --->
<div class="col-lg-6 mt-3">
<div class="card p-3 h-100" style="background:#4D2B7E;border:0px;overflow:auto;border-radius:0px;">
<div class="row px-3 pb-1">
<div class="col-12">
<span style="color:#A341E6;font-size:15px;font-weight:500;">Alias:</span>
<span class="pull-right" style="color:#A341E6;font-size:15px;font-weight:200;">content</span></p>
<hr class="my-2">
</div>
<div class="col-12">
<span style="color:#A341E6;font-size:15px;font-weight:500;">Gender:</span>
<span class="pull-right" style="color:#A341E6;font-size:15px;font-weight:200;">content</span></p>
<hr class="my-2">
</div>
<div class="col-12">
<span style="color:#A341E6;font-size:15px;font-weight:500;">Species:</span>
<span class="pull-right" style="color:#A341E6;font-size:15px;font-weight:200;">content</span></p>
<hr class="my-2">
</div>
<div class="col-12">
<span style="color:#A341E6;font-size:15px;font-weight:500;">Birthday:</span>
<span class="pull-right" style="color:#A341E6;font-size:15px;font-weight:200;">content</span></p>
<hr class="my-2">
</div>
<div class="col-12">
<span style="color:#A341E6;font-size:15px;font-weight:500;">Value:</span>
<span class="pull-right" style="color:#A341E6;font-size:15px;font-weight:200;">content</span></p>
<hr class="my-2">
</div>
<div class="col-12">
<span style="color:#A341E6;font-size:15px;font-weight:500;">Theme:</span>
<span class="pull-right" style="color:#A341E6;font-size:15px;font-weight:200;">content</span></p>
<hr class="my-2">
</div>
<div class="col-12">
<span style="color:#A341E6;font-size:15px;font-weight:500;">VA:</span>
<span class="pull-right" style="color:#A341E6;font-size:15px;font-weight:200;">content</span></p>
</div>
</div>
</div>
</div>
</div>
<!--- banner image --->
<div class="card mt-3" style="background:url('https://pbs.twimg.com/media/Et5NducXEAgznhE?format=jpg&name=small');background-position:center;background-size:cover;border:0px;overflow:auto;border-radius:0px;height:100px;"></div>
<!--- description --->
<div class="card mt-3 p-4" style="background:#4D2B7E;border:0px;overflow:auto;border-radius:0px;height:200px;">
<p class="text-center" style="color:#A341E6;font-size:14px;font-weight:350;">
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>
</div>
</div>
<!--- credits, dont remove pls! --->
<div class="text-center mt-2" style="font-size:0.7em;letter-spacing:10px;color:#A341E6;">
<a href="URLHERE" style="color:#A341E6;"><span data-toggle="tooltip" title="background image by [ARTIST]"><i class="fas fa-image"></i></span></a> /
<a href="URLHERE" style="color:#A341E6;"><span data-toggle="tooltip" title="pagedoll by [ARTIST]"><i class="fas fa-male"></i></span></a> /
<a href="10016526" style="color:#A341E6;"><span data-toggle="tooltip" title="code by cati"><i class="fad fa-rainbow"></i></span></a>
</div>
</div>
<!--- pagedolls ; THESE PAGEDOLLS WILL MOVE DEPENDING ON USERS SCREEN RESOLUTIONS, SO KEEP THAT IN MIND!
to change the pagedoll's up and down position: edit the margin-top value, a higher negative percentage = higher up
to change the pagedoll's right and left position: edit the margin-left value, a higher percentage = more towards the right
*to adjust the sizing: change the width value, higher value pixels = bigger
*keep in mind, the size of the left pagedoll will effect the placement of the right pixel. i would highly reccommend using circlejourney's toyhouse live editor ( https://th.circlejourney.net/# ) to do this and experiment with the values without having to constantly refresh.
if you would like to remove the pagedolls entirely, simply delete both img sources!
--->
<img src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/25425fb2-bc94-4349-8d8a-6eabb4d6ccd2/dbv4y2s-fd889bff-9fc9-4803-839c-e9199ee3d13a.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOiIsImlzcyI6InVybjphcHA6Iiwib2JqIjpbW3sicGF0aCI6IlwvZlwvMjU0MjVmYjItYmM5NC00MzQ5LThkOGEtNmVhYmI0ZDZjY2QyXC9kYnY0eTJzLWZkODg5YmZmLTlmYzktNDgwMy04MzljLWU5MTk5ZWUzZDEzYS5naWYifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6ZmlsZS5kb3dubG9hZCJdfQ.14gJg3MhzgGhUz2mx-kEon3LOSwZokMlMc1TVQ4nJC4" class="hidden-sm-down" style="margin-top:-140%;margin-left:23%;width:190px;">
<img src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/i/25425fb2-bc94-4349-8d8a-6eabb4d6ccd2/dc06iu9-29bb5239-d915-482a-8035-33c34b057995.gif" class="hidden-sm-down" style="margin-top:-125%;margin-left:30%;width:80px;">
