<!---
EVIDENCE
CODE BY CHAIRISCHAIR1 :D
personal use only!
feel free to frankenstein/edit but dont remove my credit!!
-->
<div class="container-fluid col no-gutters" style="height:900px">
<!---
YOUTUBE SONG EMBED! HERE'S HOW IT WORKS:
lets say you wanted to make the song link to megalovania undertale
you would take the link to it: https://www.youtube.com/watch?v=0FCvzsVlXpQ
and take out the string of letters at the end: 0FCvzsVlXpQ
and put it where the "YOUTUBEURLHERE" is in the embed link!
-->
<iframe class="flex-fill" style="position:absolute;z-index:5;top:620px;left:70px;width:50px;height:50px;opacity:0" src="
https://www.youtube.com/embed/YOUTUBEURLHERE
" frameborder="0" allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<!--TONS OF JARGIN FOR THEMING-->
<div class="justify-content-center align-items-center" style="width:1200px;height:700px;position:absolute;background:#66543f;">
<div style="width:1180px;height:680px;background:url(https://i.pinimg.com/564x/1f/86/94/1f86949cc55a8681e88825f13a03b0df.jpg);background-size:repeat;background-blend-mode:soft-light;background-color:#a58b6a;">
<div class="p-1">
<div style="background:#312d2d;width:10px;height:10px;clip-path:circle(40%);position:absolute;left:120px;top:40px;z-index:4"></div>
<div style="background:#312d2d;width:10px;height:10px;clip-path:circle(40%);position:absolute;left:340px;top:45px;z-index:4"></div>
<div style="background:#312d2d;width:10px;height:10px;clip-path:circle(40%);position:absolute;left:115px;top:260px;z-index:4"></div>
<div style="background:#312d2d;width:10px;height:10px;clip-path:circle(40%);position:absolute;left:220px;top:387px;z-index:4"></div>
<div style="background:#312d2d;width:10px;height:10px;clip-path:circle(40%);position:absolute;left:145px;top:521px;z-index:4"></div>
<div style="background:#312d2d;width:10px;height:10px;clip-path:circle(40%);position:absolute;left:355px;top:513px;z-index:4"></div>
<div style="background:#312d2d;width:10px;height:10px;clip-path:circle(40%);position:absolute;left:645px;top:310px;z-index:2"></div>
<div style="background:#312d2d;width:10px;height:10px;clip-path:circle(40%);position:absolute;left:235px;top:620px;z-index:4"></div>
<div style="background:#312d2d;width:10px;height:10px;clip-path:circle(40%);position:absolute;left:1010px;top:350px;z-index:4"></div>
<div style="background:#312d2d;width:10px;height:10px;clip-path:circle(40%);position:absolute;left:1040px;top:41px;z-index:4"></div>
<div style="background:#312d2d;width:10px;height:10px;clip-path:circle(40%);position:absolute;left:805px;top:21px;z-index:4"></div>
<div style="background:#312d2d;width:10px;height:10px;clip-path:circle(40%);position:absolute;left:585px;top:51px;z-index:4"></div>
<!--IMAGE URL! if the background is transparent, itll default to an orange background! change the color in the bckground-color field to change that if you need to-->
<div class="col p-0" style="background:url(
https://place-hold.it/100x100
) center;background-color:#ffb126;background-size:cover;height:200px;width:200px;position:absolute;top:40px;left:30px;transform:rotate(-0.5deg);z-index:2">
</div>
<div class="col p-3" style="background:url(https://blog.stockvault.net/wp-content/uploads/2019/11/free_texture_friday_2324-rotated.jpg) center;background-blend-mode:soft-light;background-color:#e5d1b7;background-size:cover;height:320px;width:250px;position:absolute;top:40px;left:220px;transform:rotate(-1deg);z-index:3">
<!--FULL NAME-->
<div style="color:#a56749;font-family:times new roman;font-size:20px;font-weight:bold;text-transform:uppercase;">
FULL NAME
</div>
<!--CHARACTER DESCRIPTION-->
<div style="color:#312d2d;font-family:times new roman;font-size:14px;font-weight:bold;overflow:auto;max-height:260px;text-align:justify;">
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.
</div>
</div>
<div class="col p-2" style="background:url(https://blog.stockvault.net/wp-content/uploads/2019/11/free_texture_friday_2324-rotated.jpg) center;background-blend-mode:soft-light;background-color:#d8c3a7;background-size:cover;height:120px;width:180px;position:absolute;top:260px;left:30px;transform:rotate(0.5deg);z-index:3">
<!--GENERAL INFO-->
<div style="color:#312d2d;font-family:times new roman;font-size:14px;font-weight:bold;overflow:auto;max-height:110px;text-align:justify">
<div>
PRONOUNS: PR/NNS
</div>
<div>
SEXUALITY: X
</div>
<div>
AGE: X
</div>
<div>
DOB: X
</div>
<div>
OCCUPATION: X
</div>
</div>
</div>
<div class="col p-3" style="background:url(https://blog.stockvault.net/wp-content/uploads/2019/11/free_texture_friday_2324-rotated.jpg) center;background-blend-mode:soft-light;background-color:#e5d1b7;background-size:cover;height:120px;width:420px;position:absolute;top:383px;left:40px;transform:rotate(-1.5deg);z-index:3">
<div style="color:#312d2d;font-family:times new roman;font-size:14px;font-weight:bold;overflow:auto;max-height:100px;text-align:justify">
<div class="row no-gutters">
<div class="col">
<!--LIKES-->
<div>LIKES:</div>
<div>
<div class="align-items-center"><i class="fas fa-circle mr-2" style="font-size:4px;"></i>
X
</div>
<div class="align-items-center"><i class="fas fa-circle mr-2" style="font-size:4px;"></i>
X
</div>
<div class="align-items-center"><i class="fas fa-circle mr-2" style="font-size:4px;"></i>
X
</div>
</div>
</div>
<div class="col">
<!--DISLIKES-->
<div>DISLIKES:</div>
<div>
<div class="align-items-center"><i class="fas fa-circle mr-2" style="font-size:4px;"></i>
X
</div>
<div class="align-items-center"><i class="fas fa-circle mr-2" style="font-size:4px;"></i>
X
</div>
<div class="align-items-center"><i class="fas fa-circle mr-2" style="font-size:4px;"></i>
X
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col p-2" style="background:url(https://blog.stockvault.net/wp-content/uploads/2019/11/free_texture_friday_2324-rotated.jpg) center;background-blend-mode:soft-light;background-color:#d8c3a7;background-size:cover;height:100px;width:230px;position:absolute;top:515px;left:35px;transform:rotate(-0.5deg);z-index:3">
<div style="color:#312d2d;font-family:times new roman;font-size:14px;font-weight:bold;max-height:220px;text-align:justify">
<!--VOICE CLAIM-->
<div style="font-size:18px">VOICE:</div>
<div style="text-transform:uppercase;" class=" ml-3 mt-1 row no-gutters">
<i class="mr-1 fas fa-microphone-lines fa-3x"></i>
<!--LINK TO VOICE CLIPS/CHARACTER NAME/MEDIA TITLE-->
<div class="mt-1" style="font-size:20px;position:absolute;left:60px;overflow:auto;max-height:30px;"><a style="color:#312d2d;text-decoration:none" href="
https://www.youtube.com/watch?v=wNOIC65APAs
">
CHARACTER
</a></div>
<div class="mt-1" style="color:#a56749;font-size:12px;position:absolute;top:61px;left:55px">
MEDIA TITLE
</div>
</div>
</div>
</div>
<div class="col p-2" style="background:url(https://blog.stockvault.net/wp-content/uploads/2019/11/free_texture_friday_2324-rotated.jpg) center;background-blend-mode:soft-light;background-color:#e5d1b7;background-size:cover;height:100px;width:170px;position:absolute;top:510px;left:275px;transform:rotate(1deg);z-index:3">
<div style="color:#312d2d;font-family:times new roman;font-size:14px;font-weight:bold;max-height:220px;text-align:justify">
<!--CHARACTER TRAITS-->
<div style="font-size:18px;">TRAITS:</div>
<div style="overflow:auto;max-height:63px">
<div class="align-items-center"><i class="fas fa-circle mr-2" style="font-size:4px;"></i>
X
</div>
<div class="align-items-center"><i class="fas fa-circle mr-2" style="font-size:4px;"></i>
X
</div>
<div class="align-items-center"><i class="fas fa-circle mr-2" style="font-size:4px;"></i>
X
</div>
</div>
</div>
</div>
<div class="justify-content-center align-items-center col p-0" style="background:url(https://blog.stockvault.net/wp-content/uploads/2019/11/free_texture_friday_2324-rotated.jpg) center;background-blend-mode:soft-light;background-color:#e1ddd7;background-size:cover;height:320px;width:320px;position:absolute;top:350px;left:850px;transform:rotate(1deg);z-index:2;">
<!--IMAGE CAROUSEL-->
<div id="carousel2" class="carousel slide mx-auto " data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<div style="background-image:url(
https://i.ibb.co/fd8McgP/image.png
);background-size:cover;height:300px;width:300px;background-position:center center;background-size:cover"></div>
</div>
<div class="carousel-item">
<div style="background-image:url(
https://i.ibb.co/SXBN8yL/image.png
);background-size:cover;height:300px;width:300px;background-position:center center;background-size:cover"></div>
</div>
<div class="carousel-item">
<div style="background-image:url(
https://i.ibb.co/XJsKZgm/image.png
);background-size:cover;height:300px;width:300px;background-position:center center;background-size:cover"></div>
</div>
<a class="carousel-control-prev" href="#carousel2" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carousel2" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
<div class="col p-3" style="background:url(https://blog.stockvault.net/wp-content/uploads/2019/11/free_texture_friday_2324-rotated.jpg) center;background-blend-mode:soft-light;background-color:#d8c3a7;background-size:cover;height:350px;width:400px;position:absolute;top:300px;left:460px;transform:rotate(-1deg);z-index:1">
<div style="color:#312d2d;font-family:times new roman;font-size:14px;font-weight:bold;text-align:justify">
<div style="font-size:20px">BIOGRAPHY:</div>
<!--BIOGRAPHY! remove paragraphs if u please-->
<div style="overflow:auto;max-height:290px;">
<p>
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.
</p>
<p>
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.
</p>
<p>
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.
</p>
</div>
</div>
</div>
<div class="col p-2" style="background:url(https://blog.stockvault.net/wp-content/uploads/2019/11/free_texture_friday_2324-rotated.jpg) center;background-blend-mode:soft-light;background-color:#e5d1b7;background-size:cover;height:60px;width:380px;position:absolute;top:618px;left:50px;transform:rotate(0.4deg);z-index:3">
<div class="align-items-center" style="color:#312d2d;font-family:times new roman;font-size:14px;font-weight:bold;max-height:220px;text-align:justify">
<div style="text-transform:uppercase;" class="ml-1 row no-gutters">
<i class="mr-2 fas fa-compact-disc fa-spin fa-3x"></i>
<!--SONG NAME/SONG ARTIST TO GO WITH THE EMBED FOR THE SONG!-->
<div class="" style="font-size:20px">
SONG NAME
</div>
<div class="" style="font-size:14px;position:absolute;left:63px;top:27px;color:#a56749;">
SONG ARTIST
</div>
</div>
</div>
</div>
<!--RELATION 1-->
<div class=" p-0" style="background:url(https://blog.stockvault.net/wp-content/uploads/2019/11/free_texture_friday_2324-rotated.jpg) center;background-blend-mode:soft-light;background-color:#e1ddd7;background-size:cover;min-height:210px;width:180px;position:absolute;top:40px;left:955px;z-index:2">
<div class="">
<div class="p-1" style=";height:170px;width:170px;">
<!--IMAGE-->
<div class="ml-1 mt-1 col p-0" style="background:url(
https://place-hold.it/100x100
) center;background-color:#ffb126;background-size:cover;height:170px;width:170px;z-index:2"></div>
</div>
<div class="justify-content-center" style="color:#312d2d;font-family:times new roman;font-size:24px;font-weight:bold;">
<div class="accordion md-accordion" id="allclosed" role="tablist" aria-multiselectable="true">
<div>
<div class="justify-content-center" role="tab" id="headingclosed1">
<a style="color:#312d2d;" data-toggle="collapse" data-parent="#allclosed" href="#allclosed1" aria-expanded="false" aria-controls="allclosed1">
<!--CHARACTER NAME-->
<div style="position:relative;font-style:italic;" class="mt-1 mb-0">
NAME1
</div>
</a>
</div>
<div id="allclosed1" class="collapse" role="tabpanel" aria-labelledby="headingclosed1" data-parent="#allclosed1">
<div style="font-size:11pt;height:90px;z-index:5" class="justify-content-center card-body p-1">
<div style="overflow:auto;max-height:90px;">
<!--CHARACTER DYNAMIC BLURB-->
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.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--RELATION 2-->
<div class=" p-0" style="background:url(https://blog.stockvault.net/wp-content/uploads/2019/11/free_texture_friday_2324-rotated.jpg) center;background-blend-mode:soft-light;background-color:#e1ddd7;background-size:cover;min-height:210px;width:180px;position:absolute;top:50px;left:505px;z-index:2">
<div class="">
<div class="p-1" style=";height:170px;width:170px;">
<!--IMAGE-->
<div class="ml-1 mt-1 col p-0" style="background:url(
https://place-hold.it/100x100
) center;background-color:#ffb126;background-size:cover;height:170px;width:170px;z-index:5"></div>
</div>
<div class="justify-content-center" style="color:#312d2d;font-family:times new roman;font-size:24px;font-weight:bold;">
<div class="accordion md-accordion" id="allclosed" role="tablist" aria-multiselectable="true">
<div>
<div class="justify-content-center" role="tab" id="headingclosed2">
<a style="color:#312d2d;" data-toggle="collapse" data-parent="#allclosed" href="#allclosed2" aria-expanded="false" aria-controls="allclosed2">
<!--CHARACTER NAME-->
<div style="position:relative;font-style:italic;" class="mt-1 mb-0">
NAME2
</div>
</a>
</div>
<div id="allclosed2" class="collapse" role="tabpanel" aria-labelledby="headingclosed2" data-parent="#allclosed">
<div style="font-size:11pt;height:90px;z-index:5" class="justify-content-center card-body p-1">
<div style="overflow:auto;max-height:90px;">
<!--CHARACTER DYNAMIC BLURB-->
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.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--RELATION 3-->
<div class=" p-0" style="background:url(https://blog.stockvault.net/wp-content/uploads/2019/11/free_texture_friday_2324-rotated.jpg) center;background-blend-mode:soft-light;background-color:#e1ddd7;background-size:cover;min-height:210px;width:180px;position:absolute;top:20px;left:725px;z-index:2">
<div class="">
<div class="p-1" style=";height:170px;width:170px;">
<!--IMAGE-->
<div class="ml-1 mt-1 col p-0" style="background:url(
https://place-hold.it/100x100
) center;background-color:#ffb126;background-size:cover;height:170px;width:170px;z-index:5"></div>
</div>
<div class="justify-content-center" style="color:#312d2d;font-family:times new roman;font-size:24px;font-weight:bold;">
<div class="accordion md-accordion" id="allclosed" role="tablist" aria-multiselectable="true">
<div>
<div class="justify-content-center" role="tab" id="headingclosed3">
<a style="color:#312d2d;" data-toggle="collapse" data-parent="#allclosed" href="#allclosed3" aria-expanded="false" aria-controls="allclosed3">
<!--CHARACTER NAME-->
<div style="position:relative;font-style:italic;" class="mt-1 mb-0">
NAME3
</div>
</a>
</div>
<div id="allclosed3" class="collapse" role="tabpanel" aria-labelledby="headingclosed3" data-parent="#allclosed3">
<div style="font-size:11pt;height:90px;z-index:5" class="justify-content-center card-body p-1">
<div style="overflow:auto;max-height:90px;">
<!--CHARACTER DYNAMIC BLURB-->
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.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--CREDIT!! dont remove it or ill cry-->
<div style="background:#312d2d;width:10px;height:10px;clip-path:circle(40%);position:absolute;left:915px;top:291px;z-index:2"></div>
<div class="col p-2 justify-content-center algin-items-center" style="background:url(https://blog.stockvault.net/wp-content/uploads/2019/11/free_texture_friday_2324-rotated.jpg) center;background-blend-mode:soft-light;background-color:#e5d1b7;background-size:cover;height:50px;width:50px;position:absolute;top:290px;left:895px;transform:rotate(4deg);z-index:1">
<div style="color:#312d2d;font-family:times new roman;font-size:24px;font-weight:bold;max-height:220px;text-align:justify" class="mb-2 tooltipster" title="code by chairischair1">
<a href="https://toyhou.se/chairischair1" style="color:#312d2d;text-decoration:none;"><i class="fas fa-code mt-2" aria-hidden="true"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
