<!------------------------------
[ TERMS OF SERVICE ]
> Please do not remove credit.
> You may edit and frankenstein with credits/permission from everyone involved.
> You may use my codes as reference but don't heavily reference or steal chunks of it.
> Do not steal, claim, redistribute or make profit from my codes. This also applies to edits.
> You are responsible for your own edits.
[ NOTES ]
> Always have WYSIWYG turned OFF and Code Editor turned ON when editing. Otherwise the code will break.
[ TIPS ]
> To change the colours:
- Press ctrl + F
- Type in hex code you want to replace
- Click on + and replace "all" with a different hex code
> To change the images, replace the URL in the brackets -> background: url( LINK_HERE )
> Get hex codes here: https://www.w3schools.com/colors/colors_picker.asp
> Get more icons here: https://fontawesome.com/icons?d=gallery
[ ACCENT COLOURS ]
> Theme: #913A40
> Text: text-muted
-------------------------------->
<div class="text-justify" style="margin: -70px -36px -36px -40px; font-size: 12px; letter-spacing: .6px;">
<div class="card p-lg-5 px-1 py-3 border-0">
<div class="col-12 mx-auto" style="max-width: 640px;">
<div class="card shadow">
<!-- HEADER | You can delete this if you want --------->
<div class="display-3 mt-3 px-3 py-2" style="background: #913A40; color: #fff; font-size: 26px; letter-spacing: 2px;">
Hello there!
</div>
<!-- -------------------------------------------------->
<!-- CONTENT ------------------------------------------>
<div class="row no-gutters text-muted p-2">
<!-- IMAGE | Replace URL between (brackets) to change image -->
<div class="col-lg-5 p-2">
<div class="bg-faded h-100 p-2">
<div class="h-100" style="min-height: 142px;
background: url(https://images.unsplash.com/photo-1471138406156-7a89e687a062?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80) center no-repeat;
background-size: cover;">
</div>
</div>
</div>
<!-- /IMAGE -->
<!-- INTRO --->
<div class="col-lg-7 p-2">
<div class="bg-faded">
<div class="p-3" style="height: 158px; overflow: auto;">
<div class="text-center" style="letter-spacing: 1.4px; font-weight: 400;">
Name / Age / Pronouns
</div>
<!-- DIVIDER --->
<div class="faded my-2" style="height: 1px; background: #913A40;"></div>
<!-- /DIVIDER -->
<p>Small intro or warning here. This box scrolls. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Non blandit massa enim nec dui nunc mattis enim.</p>
</div>
</div>
</div>
<!-- /INTRO -->
<!-- DO NOT SECTION --->
<div class="col-lg-7 p-2">
<div class="display-3 px-3 py-2" style="background: #913A40; color: #fff; font-size: 16px; letter-spacing: 1.4px;">
<i class="fas fa-times mr-1"/>
Please do not
</div>
<!-- Tip: You can make box longer by changing the px height.
Note the side image will adjust to be the same height as the box on PC
---------------------------------------------->
<div class="bg-faded p-2" style="height: 125px; overflow: auto;">
<ul class="pl-4 m-0">
<li class="mb-1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li class="mb-1">Aliquam tincidunt mauris eu risus.</li>
<li class="mb-1">Vestibulum auctor dapibus neque.</li>
<li class="mb-1">Nunc dignissim risus id metus.</li>
<!-- Add more above this line -->
</ul>
</div>
</div>
<!-- /DO NOT SECTION -->
<!-- IMAGE 2 | Replace URL between (brackets) to change image -->
<div class="col-lg-5 p-2">
<div class="bg-faded h-100 p-2">
<div class="h-100" style="min-height: 142px;
background: url(https://images.unsplash.com/photo-1652346637760-22cc6cdca3c5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80) center no-repeat;
background-size: cover;">
</div>
</div>
</div>
<!-- /IMAGE 2 -->
<!-- CONTENT WARNINGS --->
<div class="col-lg-12 p-2">
<div class="display-3 px-3 py-2" style="background: #913A40; color: #fff; font-size: 16px; letter-spacing: 1.4px;">
<i class="fas fa-warning mr-1"/>
Content Warnings
</div>
<div class="bg-faded p-2">
<!-- TIP -------------------------------------------
> Add or delete as many as you need.
> If only icons or text is needed simply delete the section as well as the divider.
> Copy & paste content warnings + icons from here: https://toyhou.se/19711420.-f2u-let-the-living-beware/19711694.icon-codes
> More icons at https://fontawesome.com/
Icons too condensed?
> Press ctrl + F
> Type in "col-4 col-lg-2"
> Click on +
> In the blank space type in "col-6 col-lg-3"
> Click "All" to replace all. Done!
---------------------------------------------------->
<!-- ICON CONTENT WARNING ------->
<div class="row no-gutters">
<!-- HOW TO USE CUSTOM ICONS -----------------------
> Delete the icon code eg. <i class="fas fa-icon fa-2x mb-1">
> Replace it with:
<div class="card mx-auto border-0 mb-1" style="height: 50px; width: 50px;
background: url(LINK_TO_ICON) center no-repeat; background-size: cover;"></div>
> Find the icon you want to use, right-click and select "Copy image address"
> Replace LINK_TO_ICON with the image address
- Please remember to credit the icon artist/s!
- Credit instructions are at the bottom of the code.
---------------------------------------------------->
<!-- BLOOD -->
<div class="col-4 col-lg-2 text-center p-1 mb-1">
<i class="fas fa-droplet fa-2x mb-1"/>
<p>Blood</p>
</div>
<!-- DEATH -->
<div class="col-4 col-lg-2 text-center p-1 mb-1">
<i class="fas fa-tombstone fa-2x mb-1"/>
<p>Death</p>
</div>
<!-- DEPRESSION -->
<div class="col-4 col-lg-2 text-center p-1 mb-1">
<i class="fas fa-cloud-showers-heavy fa-2x mb-1"/>
<p>Depression</p>
</div>
<!-- DRUG USE -->
<div class="col-4 col-lg-2 text-center p-1 mb-1">
<i class="fas fa-pills fa-2x mb-1"/>
<p>Drug Use</p>
</div>
<!-- VIOLENCE -->
<div class="col-4 col-lg-2 text-center p-1 mb-1">
<i class="fas fa-hand-fist fa-2x mb-1" style="transform: rotate(90deg);"/>
<p>Violence</p>
</div>
<!-- SENSITIVE CONTENT -->
<div class="col-4 col-lg-2 text-center p-1 mb-1">
<i class="fas fa-warning fa-2x mb-1"/>
<p>Sensitive Content</p>
</div>
<!-- Add more above this line -->
</div>
<!-- /END ICON CONTENT WARNING -->
<!-- DIVIDER | Feel free to delete divider if you don't need it! --->
<div class="faded my-2" style="height: 1px; background: #913A40;"></div>
<!-- /DIVIDER -->
<!-- TEXT CONTENT WARNING ------->
<ul class="pl-4 m-0">
<li class="mb-1">You can opt for just text warnings if preferred</li>
<li class="mb-1">Or both icons and text</li>
<li class="mb-1">Maybe additional details about certain contents</li>
<!-- Add more above this line -->
</ul>
<!-- /END TEXT CONTENT WARNING -->
</div>
</div>
<!-- /CONTENT WARNINGS -->
</div>
<!-- /CONTENT ----------------------------------------->
</div>
<!-- CREDITS | Please do not remove! ------->
<div class="text-right mt-2" style="font-size: 10px;">
<span class="p-1 rounded" style="background: #913A40;">
<!-- TIP -------------------------------------------
> To add icons credit, type > after -- to use code
- Please remember to include link and username!
- Feel free to change credit icon if you want.
--------------------------------------------------->
<!-- ICON CREDIT --
<a href="URL_HERE" style="text-decoration: none;">
<i class="far fa-stars tooltipster p-1 rounded" style="color: #fff;"
title="Icons by username"></i>
</a>
<!-- CODE CREDIT | Please do not remove, thank you! -->
<a href="https://toyhou.se/19711420.-f2u-let-the-living-beware" style="text-decoration: none;">
<i class="far fa-code tooltipster p-1 rounded" style="color: #fff;"
title="Code by Sealkitty"></i>
</a>
</span>
</div>
<!-- --------------------------------------->
</div>
</div>
</div>