<!------------------------------
[ 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">
<!-- CONTENT ------------------------------------------>
<div class="row no-gutters text-muted p-2">
<!-- 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>