CUSTOM 021 | Varhell
created by:SparklyCodes
Custom ColorsHTMLCharacter
Copy
<!--
F2U - CHARACTER CODE: CUSTOM 021 | Varhell
by SparklyCodes @ Toyhou.se
Make sure to read all the rules and instructions!
-- TOS --
1. Turn WYSIWYG off when coding. Even after you're done.
1.5 I'm serious on this one. IF THE CODE BREAKS/ICONS DISAPPEAR THIS IS LIKELY THE CULPRIT!
3. Use on TH only.
4. Do not redistribute.
5. Do not remove credit.
6. Frankensteining is okay, as long as the other creator allows it. Credit both creators.
7. Free to use as reference, credit in this case isn't required but appreciated!
-- RESOURCES --
#ca8d4b >> outside
#ffffff >> page
#2E281F >> text
PLACEHOLDER IMAGES >> //placehold.it/300x300
-->
<div class="mx-auto p-3 row no-gutters" style="max-width: 900px;">
<!-- ..................... PROFILE -->
<div class="col row no-gutters text-monospace" style="background: #ca8d4b; color: #2E281F; border-radius: 7px;">
<!-- ............................. LEFT -->
<div class="p-2 col-lg-6"> <div class="p-1" style="background: #ffffff;">
<!-- HEADER -->
<div class="justify-content-center">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/86781217_E2hQE5KIQwjK1M5.png"
style="width: 90%;">
</div>
<hr class="m-0" style="background: none; border-top: 3px solid #2E281F;">
<!-- ................................. TITLES
The three different types requested are listed below. Delete the ones you won't use.
-->
<!-- TITLE - SHORT -->
<div class="mx-n1 row no-gutters">
<!-- LEFT -->
<div class="p-1 col-sm-7">
<!-- image -->
<div style="background:url('//placehold.it/300x300');
background-position: center; background-size: cover; height: 160px; width: 100%;">
<a href="IMAGE_SOURCE" class="m-1 text-white">
<i class="fa-solid fa-camera"></i>
</a>
</div>
<h1 class="my-1">
Title
</h1>
</div>
<!-- RIGHT -->
<div class="p-1 col-sm-5">
<div class="card border-0 rounded-0 w-100 d-block d-lg-flex" style="height: 100%;">
<!-- image -->
<div style="background:url('//placehold.it/300x300');
background-position: center; background-size: cover; height: 100%; width: 100%; flex:1 1 0;">
<a href="IMAGE_SOURCE" class="m-1 text-white">
<i class="fa-solid fa-camera"></i>
</a>
<!-- spacer --> <div class="m-5 p-5 hidden-sm-up"></div>
</div>
</div>
</div>
</div>
<!-- end title short -->
<!-- TITLE - MIX -->
<div class="mx-n1 row no-gutters">
<!-- LEFT -->
<div class="p-1 col-sm-5">
<!-- image -->
<div style="background:url('//placehold.it/300x300');
background-position: center; background-size: cover; height: 160px; width: 100%;">
<a href="IMAGE_SOURCE" class="m-1 text-white">
<i class="fa-solid fa-camera"></i>
</a>
</div>
<h1 class="my-1">
Title
</h1>
</div>
<!-- RIGHT -->
<div class="p-1 col-sm-7">
<div class="card border-0 rounded-0 w-100 d-block d-lg-flex" style="height: 100%;">
<!-- image -->
<div style="background:url('//placehold.it/300x300');
background-position: center; background-size: cover; height: 100%; width: 100%; flex:1 1 0;">
<a href="IMAGE_SOURCE" class="m-1 text-white">
<i class="fa-solid fa-camera"></i>
</a>
<!-- spacer --> <div class="m-5 p-5 hidden-sm-up"></div>
</div>
</div>
</div>
</div>
<!-- end title mix -->
<!-- TITLE - LONG -->
<div class="mx-n1 row no-gutters">
<!-- LEFT -->
<div class="p-1 col-sm-6">
<!-- image -->
<div style="background:url('//placehold.it/300x300');
background-position: center; background-size: cover; height: 180px; width: 100%;">
<a href="IMAGE_SOURCE" class="m-1 text-white">
<i class="fa-solid fa-camera"></i>
</a>
</div>
</div>
<!-- RIGHT -->
<div class="p-1 col-sm-6">
<!-- image -->
<div style="background:url('//placehold.it/300x300');
background-position: center; background-size: cover; height: 180px; width: 100%;">
<a href="IMAGE_SOURCE" class="m-1 text-white">
<i class="fa-solid fa-camera"></i>
</a>
</div>
</div>
<h1 class="m-1 col-12">
Title
</h1>
</div>
<!-- end title long -->
<!-- ................................. END TITLES -->
<hr class="m-0" style="background: none; border-top: 3px solid #2E281F;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent et euismod enim, vel lobortis sapien. Nullam rhoncus justo sagittis, pulvinar urna quis, imperdiet lorem. Pellentesque elit elit, ornare volutpat neque eget, dignissim rhoncus purus. Donec et sem at sapien venenatis laoreet. Donec ut odio nisl. Vestibulum viverra nulla sed semper pharetra. Etiam ut vulputate nisi, ut vestibulum elit. Praesent metus leo, bibendum id porta ac, imperdiet vitae enim. Donec lectus ligula, aliquet eget feugiat quis, feugiat vitae mi. Pellentesque et nibh eleifend, cursus mauris eget, hendrerit turpis.</p>
</div> </div>
<!-- ............................. RIGHT -->
<div class="p-2 col-lg-6">
<div class="card border-0 rounded-0 w-100 d-block d-lg-flex" style="min-height: 100%; background: #ffffff;">
<!-- TEXT -->
<div class="p-1 overflow-auto" style="flex:1 1 0;">
<p>This side will be the same height as the other, and will scroll if it has enough text to overflow. Proin nec mollis tellus. Morbi et urna in sem pulvinar sagittis. Donec quis nibh et augue rutrum imperdiet ac sed ipsum. Fusce ut vestibulum nisi, a accumsan ex. Suspendisse dignissim fringilla leo, sit amet condimentum leo accumsan non. Sed felis dui, semper quis libero ac, eleifend imperdiet nulla. Vivamus sit amet quam in est dictum ultricies. Etiam finibus ipsum ligula, at iaculis sem lobortis malesuada.</p>
<p>Curabitur mattis pretium sodales. Nam pulvinar feugiat risus eget commodo. Sed id risus iaculis, venenatis metus dictum, feugiat leo. Aenean tempor rhoncus arcu, in ultricies sapien tempor et. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam sollicitudin odio nec sem ultrices sagittis. Vestibulum accumsan augue hendrerit feugiat lacinia. Vivamus porttitor libero eu nulla rhoncus dapibus.</p>
</div>
<!-- FOOTER -->
<div class="m-1 row no-gutters" style="border-top: 3px solid #2E281F; border-bottom: 3px solid #2E281F;">
<!-- LEFT -->
<div class="p-1 col">
<p>If these documents are shown to unauthorized personnel, you'll be put up for demotion, and any cover-up fees will be sent to your relatives.</p>
</div>
<!-- RIGHT -->
<div class="p-1 col-auto align-items-center">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/86781221_656y0VLbMa9PlkB.png"
style="height: 80px;">
</div>
</div>
</div>
</div>
</div>
<!-- ..................... DECOR -->
<div class="ml-n2 col-auto hidden-md-down">
<div style="background: #ca8d4b; width: 50px; height: 130px; clip-path: polygon(0 0, 100% 0, 100% 79%, 0% 100%);"></div>
</div>
<!-- ..................... CREDITS - do not touch -->
<div class="pt-2 col-12 text-center">
<a href="/SparklyCodes" title="Code by SparklyCodes" data-toggle="tooltip">
<i class="fa-solid fa-code"></i>
</a>
<a href="/Varhell" title="Custom for Varhell" data-toggle="tooltip">
<i class="fa-solid fa-crop"></i>
</a>
</div>
</div>