<!--THINGS TO CHANGE/CUSTOMIZE HERE:
BGFILE= Direct link to a image background,
^^ DOESNT REPEAT^^
IMAGE1= First box image
COLOR OF BOXES = #9d2323
IMAGE2= Second box image
-->
<div class="container-fluid p-0 position-relative " style="max-width: 600px;">
<div class="card p-md-5 p-0 mt-md-5 mr-md-n5 " style="background-size:cover; background-position:center; background-repeat:no-repeat;
background-image:url('BGFILE');">
<div class="row no-gutters ">
<div class=" col-md-4 col-12 mr-md-n5 " style="z-index: 3">
<div class="p-3">
<div class="w-100 h-100 col-12 bg-faded p-5 my-md-n5" style="z-index: 6;background-size:cover; background-position:center; background-repeat:no-repeat;
background-image:url('IMAGE1');">
</div>
<div class="w-100 h-100 col-md-12 col-12 p-3 ml-md-n4 mt-3" style="background-color:rgba(0,0,0,0.75); z-index: 2;">
<p align="justify"><br><span style=";color:#ddddc8;font-size:12px;"> <b> Do not interact if </b><br>...There you can write anything important here, as needed, this box can scroll!<br>
➼ This is a boundarie <br>
➼ This is a boundarie <br>
➼ This is a boundarie <br>
<b> ➼ This is is a boundarie that is super important</b><br> You can also write text but make sure to not get pass this line or the code will break </span></p>
</div>
</div>
</div>
<div class=" col-md-6 col-12 mt-md-1 mb-md-2 p-0 " style="z-index: 2; ">
<div class="p-2 p-md-0">
<div class="w-100 p-3 mx-md-5 mb-md-3" style="background-color:#9d2323;">
<p align="center"><span style="font-size:20px;font-weight:700;letter-spacing:2mm;color:#ddddc8"><i class="fa-solid fa-triangle-exclamation fa-lg"></i> BEFORE YOU FOLLOW<i class="fa-solid fa-triangle-exclamation fa-lg"></i>
</span>
</p>
</div>
<div class="w-100 h-100 p-3 ml-md-3 " style="background-color:rgba(0,0,0,0.75);max-height:300px;overflow:auto;">
<p align="justify"> <span style=";color:#ddddc8"> <b> Before you follow</b> Make sure to write as much as you need here, this box can scroll! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.<br></span>
</div>
</div>
</div>
<div class=" mt-md-5 col-md-3 col-12" style="z-index: 3">
<div class=" p-3 w-100 mt-md-5"> </div>
<div class="p-2 p-md-0">
<div class="p-2 p-md-0 mt-md-5">
<div class=" p-2 w-100 mx-md-4 " style="background-color:#9d2323;">
<p align="center"><span style="font-size:10px;font-weight:700;letter-spacing:2mm;color:#ddddc8">IMPORTANT </span></p>
</div>
<div class=" p-2 w-100 h-50 mx-md-4 mt-md-1" style="background-color:rgba(0,0,0,0.75);">
<p align="justify"><span style=";color:#ddddc8;font-size:12px;"> <b>Make sure to write something super important here that must be noted but make sure to not pass this point! </b></span></p><br>
</div>
<hr>
<div class=" p-5 w-100 h-25 mt-md-n5 " style="background-size:cover; background-position:center; background-repeat:no-repeat;
background-image:url('IMAGE2');">
</div>
</div>
</div>
</div>
<div class="offset-md-2 h-100 w-100 col-md-6 col-12 bg-faded p-3 mt-md-n5 " style="background-color:#9d2323; z-index: 6;">
<p align="center"><span style="font-size:18px;font-weight:700;color:#ddddc8"> Make sure to know this! </span>
</div>
</div>
</div>
<p style="text-align: right;"><a data-toggle="tooltip" href="https://toyhou.se/DeceiveCodes" title="Code by DeceiveCodes"><i class=" mr-md-n5 fa fa-code"></i></a></p>
</div>