<!---
JUNKY NIGHT / by cati/dogboy
NOTES
accent: #9437CE
fontawesome icon: fas fa-capsules
(use ctrl+f + replace for accent/icon replacement)
mobile friendly + custom colors! ✔✔✔
RULES & DISCLAIMERS
- fav/comment if using pls!
- not wysiwyg friendly so please turn that off!
- feel free to edit/frakenstein/etc if you feel, just pls dont remove my credit!!
- have a nice day!!
--->
<div class="container-fluid shadow-sm" style="background:url(https://64.media.tumblr.com/e405e647203d9a98a59aea9935515f65/tumblr_inline_ml2ghv3pVP1rfdbtm.gif) repeat fixed;padding:20px;border-radius:10px;max-width:800px;margin:30px auto 5px;">
<div class="row no-gutters">
<div class="col-md-3 p-2">
<div class="my-2 collapse" id="more">
<div class="card my-2 shadow-sm" style="height:250px;border-radius:20px;border:2px solid #9437CE;overflow:auto;">
<!--- first toggle image --->
<center><div class="card rounded-circle" style="background: url(https://64.media.tumblr.com/4827c8bef7cd692416fc6ca2f0837600/e068d9475c3cba32-d1/s250x400/58b89cc7f282fd4e7b431248a2156ecb94a67b54.png); background-size:cover;background-position:center;height:110px;width:110px;border:4px double #9437CE;margin-top:10px;"></div></center>
<div class="p-2 my-1">
<div class="accordion" id="accordionExample">
<!--- first toggle information --->
<div class="card mt-1 px-3" style="border-radius:20px;background-color:#9437CE;" id="name">
<a data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne" style="color:#FFFFFF;">
<h3 class="text-uppercase m-1" style="color:#FFFFFF;font-size:13px;letter-spacing:2px;" align="center">name</h3>
</a></div>
</div>
<div id="collapseOne" class="collapse" aria-labelledby="name" data-parent="#accordionExample">
<div align="center"><span class="text-muted font-italic" style="font-size:12px;letter-spacing:2px;">content</span></div>
</div>
<div class="card mt-1 px-3" style="border-radius:20px;background-color:#9437CE;" id="gender">
<a data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo" style="color:#FFFFFF;">
<h3 class="text-uppercase m-1" style="color:#FFFFFF;font-size:13px;letter-spacing:2px;" align="center">gender</h3>
</a></div>
<div id="collapseTwo" class="collapse" aria-labelledby="gender" data-parent="#accordionExample">
<div align="center"><span class="text-muted font-italic" style="font-size:12px;letter-spacing:2px;">content</span></div>
</div>
<div class="card mt-1 px-3" style="border-radius:20px;background-color:#9437CE;" id="height">
<a data-toggle="collapse" data-target="#collapseThree" aria-expanded="all" aria-controls="collapseThree" style="color:#FFFFFF;">
<h3 class="text-uppercase m-1" style="color:#FFFFFF;font-size:13px;letter-spacing:2px;" align="center">height</h3>
</a></div>
<div id="collapseThree" class="collapse" aria-labelledby="height" data-parent="#accordionExample">
<div align="center"><span class="text-muted font-italic" style="font-size:12px;letter-spacing:2px;">content</span></div>
</div>
<div class="card mt-1 px-3" style="border-radius:20px;background-color:#9437CE;" id="specie">
<a data-toggle="collapse" data-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour" style="color:#FFFFFF;">
<h3 class="text-uppercase m-1" style="color:#FFFFFF;font-size:13px;letter-spacing:2px;" align="center">specie</h3>
</a></div>
<div id="collapseFour" class="collapse" aria-labelledby="specie" data-parent="#accordionExample">
<div align="center"><span class="text-muted font-italic" style="font-size:12px;letter-spacing:2px;">content</span></div>
</div>
<div class="card mt-1 px-3" style="border-radius:20px;background-color:#9437CE;" id="status">
<a data-toggle="collapse" data-target="#collapseFive" aria-expanded="false" aria-controls="collapseFive" style="color:#FFFFFF;">
<h3 class="text-uppercase m-1" style="color:#FFFFFF;font-size:13px;letter-spacing:2px;" align="center">status</h3>
</a></div>
<div id="collapseFive" class="collapse" aria-labelledby="status" data-parent="#accordionExample">
<div align="center"><span class="text-muted font-italic" style="font-size:12px;letter-spacing:2px;">content</span></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 p-2">
<div class="justify-content-center">
<!--- main image --->
<div class="card my-2" style="background: url(https://originalnews.nico/wp-content/uploads/2020/08/07233759/985e4076cb66dda5bc290ca460cc3365.gif); background-size:cover;background-position:center;width:362px;height:155px;border-radius:10px;border:0px;border:2px solid #9437CE;">
</div>
</div>
<div class="justify-content-center">
<div class="card mt-1 px-3" style="border-radius:30px;background-color:#9437CE;height:40px;color:#FFFFFF;">
<!--- first button --->
<a data-toggle="collapse" href="#more" style="color:#FFFFFF;"><h3 class="text-uppercase p-1 mt-2" style="font-size:15px;letter-spacing:3px;" align="center">are you ready?</h3> </a></div>
</div>
<div class="justify-content-center">
<div class="card mt-2 p-2" style="border-radius:30px;background-color:#9437CE;height:40px;color:#FFFFFF;">
<!--- second button --->
<a data-toggle="collapse" href="#more2" style="color:#FFFFFF;"><h3 class="text-uppercase p-1" style="font-size:15px;letter-spacing:3px;" align="center">junky night!</h3> </a></div>
</div>
</div>
<div class="col-md-3 p-2">
<div class="my-2 collapse" id="more2">
<div class="card my-2 shadow-sm" style="height:250px;border-radius:20px;border:2px solid #9437CE;overflow:auto;">
<!--- second toggle icon --->
<center><div class="card rounded-circle" style="background: url(https://pbs.twimg.com/media/EZcokk7WkAEE519.png); background-size:cover;background-position:center;height:110px;width:110px;border:4px double #9437CE;margin-top:10px;"></div></center>
<!--- excerpt --->
<p class="text-center p-3 font-italic" style="color:#9437CE;font-size:0.8em;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non auctor lorem. Maecenas et viverra nibh. Duis eget dignissim dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non auctor lorem. Maecenas et viverra nibh. Duis eget dignissim dolor. </p>
<!--- color palette --->
<div class="justify-content-center" style="font-size:20px;padding-bottom:10%;">
<i class="fas fa-capsules" style="color: #B93A5A;"></i>
<i class="fas fa-capsules ml-2" style="color: #D7A6AD;"></i>
<i class="fas fa-capsules ml-2" style="color: #9437CE;"></i>
<i class="fas fa-capsules ml-2" style="color: #FF64B3;"></i>
<i class="fas fa-capsules ml-2" style="color: #4C8696;"></i></div>
</div>
</div>
</div>
</div>
</div>
<!--- credit, dont remove pls! --->
<a class="d-block text-muted text-center" href="https://toyhou.se/8511837.junky-night-f2u-html" style="font-size:0.6em;">code by cati <i class="fad fa-rainbow"></i></a>
