World Lore Code
created by:BigGayFish
Mixed ColorsBootstrapHTMLWorldMiscellaneous
Copy
<!--WORLD LORE CODE
I never released this previously because it was a complete hodgepodge of a code that I made purely for myself, but I've been meaning to release this after I've labeled everything so here we are. I'm NOT indexing this code because it would take 5000 yrs to do that and because it would seem that most of my followers don't mind having no index according to my polls. As per usual, if you need help don't be afraid to reach out. This was made for a character to be used as a world lore document but you're free to actually use this in TH Worlds themselves, just know that everything is contained singularly into one code rather than it being spread out over pages.
-->
<div class="container-fluid" style="font-size: 13pt;">
<!--TO TOP BUTTON-->
<a class="btn btn-secondary text-muted px-3 py-2 tooltipster" style="position:fixed; bottom:43px; right:3px; z-index:99999;" title="To Top" href="#top">
<i class="fas fa-arrow-up"></i>
</a>
<!--TO BOTTOM BUTTON-->
<a class="text-muted btn btn-secondary px-3 py-2 tooltipster" style="position:fixed; bottom:3px; right:3px; z-index:99999;" title="To Bottom" href="#footer">
<i class="fas fa-arrow-down"></i>
</a>
<!--BANNER-->
<!--background image-->
<div class="card card-outline-primary p-3" style="border-width: 15px; height: 400px; background-size:cover; background-position:center; background-image:url('https://dummyimage.com/350/FFF/000000');">
<!--IMG CREDIT-->
<a class="text-secondary tooltipster" title="IMG_CREDIT" href="#" style="opacity:.6;"><i class="fas fa-image"></i></a>
</div>
<!--END OF BANNER-->
<!--BUTTONS-->
<div class="card bg-transparent mb-3" style="padding: 5px; border: transparent;">
<ul class="nav nav-pills row no-gutters justify-content-center text-center text-uppercase m-3" id="pills-tab" role="tablist">
<li class="nav-item col mb-2 mx-2">
<a class="nav-link active text-uppercase" style="font-weight: bold; box-shadow:none;" id="pills-lore-tab" data-toggle="pill" href="#lore" role="tab"> Lore</a>
</li>
<li class="nav-item col mb-2 mx-2">
<a class="nav-link" style="font-weight: bold; box-shadow:none;" id="pills-society-tab" data-toggle="pill" href="#society" role="tab"> Society</a>
</li>
<li class="nav-item col mb-2 mx-2">
<a class="nav-link" style="font-weight: bold; box-shadow:none;" id="pills-religion-tab" data-toggle="pill" href="#religion" role="tab"> Religion</a>
</li>
<li class="nav-item col mb-2 mx-2">
<a class="nav-link" style="font-weight: bold; box-shadow:none;" id="pills-magic-tab" data-toggle="pill" href="#magic" role="tab" >Magic</a>
</li>
<li class="nav-item col mb-2 mx-2">
<a class="nav-link" style="font-weight: bold; box-shadow:none;" id="pills-map-tab" data-toggle="pill" href="#map" role="tab" >Map</a>
</li>
<li class="nav-item col mb-2 mx-2">
<a class="nav-link" style="font-weight: bold; box-shadow:none;" id="pills-key-tab" data-toggle="pill" href="#key" role="tab" >Key Figures</a>
</li>
</ul>
</div>
<!--END OF BUTTONS-->
<!--TABS-->
<div class="card tab-content border-0 bg-faded p-3">
<!--MYTHOS/LORE-->
<div class="tab-pane fade active show" id="lore" role="tabpanel">
<!--LORE OVERVIEW-->
<div class="row justify-content-center">
<div class="col-sm-4 mb-3">
<!--SIDE IMAGE-->
<div class="card card-outline-primary p-3" style="border-width: 10px; height: 400px; background-size: cover; background-position:center; background-image:url('https://dummyimage.com/350/FFF/000000');">
<!--IMG CREDIT-->
<a class="text-secondary tooltipster" title="IMG_CREDIT" href="#" style="opacity:.6;"><i class="fas fa-image"></i></a>
</div>
<!--END OF SIDE IMAGE-->
</div>
<div class="col-lg-8 mb-3">
<!--TITLE-->
<div class="card text-uppercase bg-primary text-center mb-3" style="border: transparent; padding: 5px; letter-spacing: 10px;">
<h1 class="display-4 text-light font-weight-bold">Lore</h1>
</div>
<!--END OF TITLE-->
<div class="card-text p-3" style="border: 3px solid; height: 330px; overflow-y:auto; border-radius:5px;">
<p>Overview here. 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>Molestie ac feugiat sed lectus vestibulum. Praesent semper feugiat nibh sed. Elementum nisi quis eleifend quam adipiscing vitae proin. Blandit volutpat maecenas volutpat blandit. In egestas erat imperdiet sed. Cursus sit amet dictum sit amet justo donec enim. Sagittis purus sit amet volutpat consequat. Aliquam vestibulum morbi blandit cursus risus at ultrices mi. Placerat vestibulum lectus mauris ultrices eros. Pulvinar sapien et ligula ullamcorper malesuada. Orci ac auctor augue mauris augue neque gravida. Ullamcorper eget nulla facilisi etiam dignissim diam quis. Id volutpat lacus laoreet non curabitur gravida. Diam donec adipiscing tristique risus nec feugiat in fermentum posuere. Sapien et ligula ullamcorper malesuada. Tortor consequat id porta nibh venenatis. In ante metus dictum at tempor. Rhoncus urna neque viverra justo nec ultrices dui.</p>
</div>
</div>
</div>
<!--END OF LORE OVERVIEW-->
<!--TITLE-->
<div class="card text-uppercase bg-primary text-center mb-3" style="border: transparent; padding: 5px; letter-spacing: 10px;">
<h1 class="display-4 text-light font-weight-bold">Mythos</h1>
</div>
<!--END OF TITLE-->
<!--MYTHOS SECTION-->
<div class="card-text p-3 mb-3" style="border: 3px solid; height: 400px; overflow-y:auto; border-radius:5px;">
<!--SIDE IMAGE-->
<div class="card pull-right card-outline-primary m-3 p-3 hidden-sm-down" style="border-width: 10px; height: 300px; width: 300px; background-size:cover; background-position:center; background-image:url('https://dummyimage.com/350/FFF/000000');">
<!--IMG CREDIT-->
<a class="text-secondary tooltipster" title="IMG_CREDIT" href="#" style="opacity:.6;"><i class="fas fa-image"></i></a>
</div>
<!--END OF SIDE IMAGE-->
<p>Mythos explanation here.</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>Molestie ac feugiat sed lectus vestibulum. Praesent semper feugiat nibh sed. Elementum nisi quis eleifend quam adipiscing vitae proin. Blandit volutpat maecenas volutpat blandit. In egestas erat imperdiet sed. Cursus sit amet dictum sit amet justo donec enim. Sagittis purus sit amet volutpat consequat. Aliquam vestibulum morbi blandit cursus risus at ultrices mi. Placerat vestibulum lectus mauris ultrices eros. Pulvinar sapien et ligula ullamcorper malesuada. Orci ac auctor augue mauris augue neque gravida. Ullamcorper eget nulla facilisi etiam dignissim diam quis. Id volutpat lacus laoreet non curabitur gravida. Diam donec adipiscing tristique risus nec feugiat in fermentum posuere. Sapien et ligula ullamcorper malesuada. Tortor consequat id porta nibh venenatis. In ante metus dictum at tempor. Rhoncus urna neque viverra justo nec ultrices dui.</p>
<p>Praesent quam diam, ullamcorper quis nulla sit amet, consequat porta leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget libero nec orci posuere molestie at a ligula. Morbi interdum eget justo a auctor. In bibendum suscipit arcu sed pulvinar. Mauris viverra eget dui eu gravida. Aenean laoreet augue ut nisi lacinia sagittis. Nulla ut velit dolor. Etiam finibus lorem vitae magna interdum varius.</p>
</div>
<!--END OF MYTHOS SECTION-->
<!--MOODBOARD SECTION-->
<div class="row justify-content-center">
<div class="col-sm mb-3">
<!--SIDE IMAGE-->
<div class="card card-outline-primary p-3" style="border-width: 10px; height: 300px; background-size:cover; background-position:center; background-image:url('https://dummyimage.com/350/FFF/000000');">
<!--IMG CREDIT-->
<a class="text-secondary tooltipster" title="IMG_CREDIT" href="#" style="opacity:.6;"><i class="fas fa-image"></i></a>
</div>
<!--END OF SIDE IMAGE-->
</div>
<div class="col-sm mb-3">
<!--SIDE IMAGE-->
<div class="card card-outline-primary p-3" style="border-width: 10px; height: 300px; background-size:cover; background-position:center; background-image:url('https://dummyimage.com/350/FFF/000000');">
<!--IMG CREDIT-->
<a class="text-secondary tooltipster" title="IMG_CREDIT" href="#" style="opacity:.6;"><i class="fas fa-image"></i></a>
</div>
<!--END OF SIDE IMAGE-->
</div>
<div class="col-sm mb-3">
<!--SIDE IMAGE-->
<div class="card card-outline-primary p-3" style="border-width: 10px; height: 300px; background-size:cover; background-position:center; background-image:url('https://dummyimage.com/350/FFF/000000');">
<!--IMG CREDIT-->
<a class="text-secondary tooltipster" title="IMG_CREDIT" href="#" style="opacity:.6;"><i class="fas fa-image"></i></a>
</div>
<!--END OF SIDE IMAGE-->
</div>
<div class="col-sm mb-3">
<!--SIDE IMAGE-->
<div class="card card-outline-primary p-3" style="border-width: 10px; height: 300px; background-size:cover; background-position:center; background-image:url('https://dummyimage.com/350/FFF/000000');">
<!--IMG CREDIT-->
<a class="text-secondary tooltipster" title="IMG_CREDIT" href="#" style="opacity:.6;"><i class="fas fa-image"></i></a>
</div>
<!--END OF SIDE IMAGE-->
</div>
</div>
<!--END OF MOODBOARD SECTION-->
<!--TITLE-->
<div class="card text-uppercase bg-primary text-center mb-3" style="border: transparent; padding: 5px; letter-spacing: 10px;">
<h1 class="display-4 text-light font-weight-bold">History</h1>
</div>
<!--END OF TITLE-->
<!--HISTORY SECTION-->
<div class="card-text p-3 mb-3" style="border: 3px solid; height: 400px; overflow-y:auto; border-radius:5px;">
<!--SIDE IMAGE-->
<div class="card pull-left card-outline-primary m-3 p-3 hidden-sm-down" style="border-width: 10px; height: 300px; width: 300px; background-size:cover; background-position:center; background-image:url('https://dummyimage.com/350/FFF/000000');">
<!--IMG CREDIT-->
<a class="text-secondary tooltipster" title="IMG_CREDIT" href="#" style="opacity:.6;"><i class="fas fa-image"></i></a>
</div>
<!--END OF SIDE IMAGE-->
<p>History explanation here.</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>Molestie ac feugiat sed lectus vestibulum. Praesent semper feugiat nibh sed. Elementum nisi quis eleifend quam adipiscing vitae proin. Blandit volutpat maecenas volutpat blandit. In egestas erat imperdiet sed. Cursus sit amet dictum sit amet justo donec enim. Sagittis purus sit amet volutpat consequat. Aliquam vestibulum morbi blandit cursus risus at ultrices mi. Placerat vestibulum lectus mauris ultrices eros. Pulvinar sapien et ligula ullamcorper malesuada. Orci ac auctor augue mauris augue neque gravida. Ullamcorper eget nulla facilisi etiam dignissim diam quis. Id volutpat lacus laoreet non curabitur gravida. Diam donec adipiscing tristique risus nec feugiat in fermentum posuere. Sapien et ligula ullamcorper malesuada. Tortor consequat id porta nibh venenatis. In ante metus dictum at tempor. Rhoncus urna neque viverra justo nec ultrices dui.</p>
<p>Praesent quam diam, ullamcorper quis nulla sit amet, consequat porta leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget libero nec orci posuere molestie at a ligula. Morbi interdum eget justo a auctor. In bibendum suscipit arcu sed pulvinar. Mauris viverra eget dui eu gravida. Aenean laoreet augue ut nisi lacinia sagittis. Nulla ut velit dolor. Etiam finibus lorem vitae magna interdum varius.</p>
</div>
<!--END OF HISTORY SECTION-->
</div>
<!--END OF MYTHOS/LORE-->
<!--SOCIETY-->
<div class="tab-pane fade show" id="society" role="tabpanel">
<!--OVERVIEW-->
<div class="row justify-content-center">
<div class="col-lg-8 mb-3 order-md-1 order-2">
<!--TITLE-->
<div class="card text-uppercase bg-primary text-center mb-3" style="border: transparent; padding: 5px; letter-spacing: 10px;">
<h1 class="display-4 text-light font-weight-bold">Society</h1>
</div>
<!--END OF TITLE-->
<div class="card-text p-3" style="border: 3px solid; height: 330px; overflow-y:auto; border-radius:5px;">
<p>Overview here. 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>Molestie ac feugiat sed lectus vestibulum. Praesent semper feugiat nibh sed. Elementum nisi quis eleifend quam adipiscing vitae proin. Blandit volutpat maecenas volutpat blandit. In egestas erat imperdiet sed. Cursus sit amet dictum sit amet justo donec enim. Sagittis purus sit amet volutpat consequat. Aliquam vestibulum morbi blandit cursus risus at ultrices mi. Placerat vestibulum lectus mauris ultrices eros. Pulvinar sapien et ligula ullamcorper malesuada. Orci ac auctor augue mauris augue neque gravida. Ullamcorper eget nulla facilisi etiam dignissim diam quis. Id volutpat lacus laoreet non curabitur gravida. Diam donec adipiscing tristique risus nec feugiat in fermentum posuere. Sapien et ligula ullamcorper malesuada. Tortor consequat id porta nibh venenatis. In ante metus dictum at tempor. Rhoncus urna neque viverra justo nec ultrices dui.</p>
</div>
</div>
<div class="col-sm-4 mb-3 order-sm-1">
<!--SIDE IMAGE-->
<div class="card card-outline-primary p-3" style="border-width: 10px; height: 400px; background-size:cover; background-position:center; background-image:url('https://dummyimage.com/350/FFF/000000');">
<!--IMG CREDIT-->
<a class="text-secondary tooltipster" title="IMG_CREDIT" href="#" style="opacity:.6;"><i class="fas fa-image"></i></a>
</div>
<!--END OF SIDE IMAGE-->
</div>
</div>
<!--END OF OVERVIEW-->
<!--TITLE-->
<div class="card text-uppercase bg-primary text-center mb-3" style="border: transparent; padding: 5px; letter-spacing: 10px;">
<h1 class="display-4 text-light font-weight-bold">Language</h1>
</div>
<!--END OF TITLE-->
<!--LANGUAGE SECTION-->
<div class="card-text p-3 mb-3" style="border: 3px solid; height: 400px; overflow-y:auto; border-radius:5px;">
<!--SIDE IMAGE-->
<div class="card pull-left card-outline-primary m-3 p-3 hidden-sm-down" style="border-width: 10px; height: 300px; width: 300px; background-size:cover; background-position:center; background-image:url('https://dummyimage.com/350/FFF/000000');">
<!--IMG CREDIT-->
<a class="text-secondary tooltipster" title="IMG_CREDIT" href="#" style="opacity:.6;"><i class="fas fa-image"></i></a>
</div>
<!--END OF SIDE IMAGE-->
<p>Language explanation here.</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>Molestie ac feugiat sed lectus vestibulum. Praesent semper feugiat nibh sed. Elementum nisi quis eleifend quam adipiscing vitae proin. Blandit volutpat maecenas volutpat blandit. In egestas erat imperdiet sed. Cursus sit amet dictum sit amet justo donec enim. Sagittis purus sit amet volutpat consequat. Aliquam vestibulum morbi blandit cursus risus at ultrices mi. Placerat vestibulum lectus mauris ultrices eros. Pulvinar sapien et ligula ullamcorper malesuada. Orci ac auctor augue mauris augue neque gravida. Ullamcorper eget nulla facilisi etiam dignissim diam quis. Id volutpat lacus laoreet non curabitur gravida. Diam donec adipiscing tristique risus nec feugiat in fermentum posuere. Sapien et ligula ullamcorper malesuada. Tortor consequat id porta nibh venenatis. In ante metus dictum at tempor. Rhoncus urna neque viverra justo nec ultrices dui.</p>
<p>Praesent quam diam, ullamcorper quis nulla sit amet, consequat porta leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget libero nec orci posuere molestie at a ligula. Morbi interdum eget justo a auctor. In bibendum suscipit arcu sed pulvinar. Mauris viverra eget dui eu gravida. Aenean laoreet augue ut nisi lacinia sagittis. Nulla ut velit dolor. Etiam finibus lorem vitae magna interdum varius.</p>
</div>
<!--END OF LANGUAGE SECTION-->
<!--TITLE-->
<div class="card text-uppercase bg-primary text-center mb-3" style="border: transparent; padding: 5px; letter-spacing: 10px;">
<h1 class="display-4 text-light font-weight-bold">Fashion</h1>
</div>
<!--END OF TITLE-->
<!--FASHION SECTION-->
<div class="card-text p-3 mb-3" style="border: 3px solid; height: 300px; overflow-y:auto; border-radius:5px;">
<p>Fashion explanation here.</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>Molestie ac feugiat sed lectus vestibulum. Praesent semper feugiat nibh sed. Elementum nisi quis eleifend quam adipiscing vitae proin. Blandit volutpat maecenas volutpat blandit. In egestas erat imperdiet sed. Cursus sit amet dictum sit amet justo donec enim. Sagittis purus sit amet volutpat consequat. Aliquam vestibulum morbi blandit cursus risus at ultrices mi. Placerat vestibulum lectus mauris ultrices eros. Pulvinar sapien et ligula ullamcorper malesuada. Orci ac auctor augue mauris augue neque gravida. Ullamcorper eget nulla facilisi etiam dignissim diam quis. Id volutpat lacus laoreet non curabitur gravida. Diam donec adipiscing tristique risus nec feugiat in fermentum posuere. Sapien et ligula ullamcorper malesuada. Tortor consequat id porta nibh venenatis. In ante metus dictum at tempor. Rhoncus urna neque viverra justo nec ultrices dui.</p>
<p>Praesent quam diam, ullamcorper quis nulla sit amet, consequat porta leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget libero nec orci posuere molestie at a ligula. Morbi interdum eget justo a auctor. In bibendum suscipit arcu sed pulvinar. Mauris viverra eget dui eu gravida. Aenean laoreet augue ut nisi lacinia sagittis. Nulla ut velit dolor. Etiam finibus lorem vitae magna interdum varius.</p>
</div>
<!--END OF FASHION SECTION-->
<!--OUTFITS-->
<div class="card-deck">
<!--ITEM 1-->
<div class="card card-outline-primary p-3 mb-3" style="border-width:15px; height: 500px; background-size:cover; background-position:center; background-image:url('https://dummyimage.com/350/FFF/000000');">
<!--BUTTON TOGGLE-->
<a class="btn btn-secondary w-25 pull-right" data-toggle="collapse" href="#FIT1"><i class="fa-solid fa-magnifying-glass"></i></a>
<!--IMG CREDIT-->
<a class="text-secondary tooltipster" title="IMG_CREDIT" href="#" style="opacity:.6; position: absolute; top:90%;"><i class="fas fa-image"></i></a>
<!--MODAL CONTENT-->
<div class="collapse w-100 h-100 fade p-3" id="FIT1" style="position:absolute; top:0; left:0; background:rgba(0,0,0,0.8); z-index:2;">
<!--div aligns content to center of screen-->
<div class="justify-content-center">
<!--CARD CONTENT-->
<div class="card w-100 p-3" style="height: 425px; overflow-y:auto;">
<!--CLOSE BUTTON-->
<a data-toggle="collapse" href="#FIT1" style="position:absolute; top:10px; right:15px;"><i class="fa-solid fa-xmark"></i></a>
<h1 class="display-4 mb-2 ml-1">HEADER</h1><div class="card mb-2"></div>
<p>Nam vestibulum massa quis varius venenatis. Proin pretium scelerisque tortor. Nulla egestas ultrices arcu id iaculis. Nunc eu hendrerit nisl. Praesent dignissim nisl eget enim porttitor lacinia. Praesent sagittis commodo convallis. Curabitur molestie quis libero eget pulvinar. Nunc malesuada sem purus, non fermentum eros venenatis sed. Vestibulum ullamcorper quam lorem, vitae bibendum nisi efficitur volutpat. Etiam at urna cursus, tempus nibh scelerisque, varius nibh. In sit amet ornare lorem. Vestibulum sit amet tortor at sem elementum pellentesque eget ut dolor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent interdum commodo blandit.</p>
<p>Aliquam tristique, nisi vel tristique tempus, urna sapien venenatis lectus, eu hendrerit dolor mauris sed elit. Duis non leo lacus. Nunc feugiat vestibulum blandit. Morbi pretium sapien ut orci porttitor, a laoreet neque tempor. Aliquam eget ante dui. Nullam imperdiet nulla id auctor cursus. Vestibulum sit amet volutpat ligula. Sed pellentesque pharetra mollis. Donec hendrerit pharetra risus, ut sagittis arcu lobortis id.</p>
</div> <!--card content end-->
</div> <!--div to align to center of screen end-->
</div> <!--modal content end-->
</div>
<!--ITEM 1-->
<!--ITEM 2-->
<div class="card card-outline-primary p-3 mb-3" style="border-width:15px; height: 500px; background-size:cover; background-position:center; background-image:url('https://dummyimage.com/350/FFF/000000');">
<!--BUTTON TOGGLE-->
<a class="btn btn-secondary w-25 pull-right" data-toggle="collapse" href="#FIT2"><i class="fa-solid fa-magnifying-glass"></i></a>
<!--IMG CREDIT-->
<a class="text-secondary tooltipster" title="IMG_CREDIT" href="#" style="opacity:.6; position: absolute; top:90%;"><i class="fas fa-image"></i></a>
<!--MODAL CONTENT-->
<div class="collapse w-100 h-100 fade p-3" id="FIT2" style="position:absolute; top:0; left:0; background:rgba(0,0,0,0.8); z-index:2;">
<!--div aligns content to center of screen-->
<div class="justify-content-center">
<!--CARD CONTENT-->
<div class="card w-100 p-3" style="height: 425px; overflow-y:auto;">
<!--CLOSE BUTTON-->
<a data-toggle="collapse" href="#FIT2" style="position:absolute; top:10px; right:15px;"><i class="fa-solid fa-xmark"></i></a>
<h1 class="display-4 mb-2 ml-1">HEADER</h1><div class="card mb-2"></div>
<p>Nam vestibulum massa quis varius venenatis. Proin pretium scelerisque tortor. Nulla egestas ultrices arcu id iaculis. Nunc eu hendrerit nisl. Praesent dignissim nisl eget enim porttitor lacinia. Praesent sagittis commodo convallis. Curabitur molestie quis libero eget pulvinar. Nunc malesuada sem purus, non fermentum eros venenatis sed. Vestibulum ullamcorper quam lorem, vitae bibendum nisi efficitur volutpat. Etiam at urna cursus, tempus nibh scelerisque, varius nibh. In sit amet ornare lorem. Vestibulum sit amet tortor at sem elementum pellentesque eget ut dolor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent interdum commodo blandit.</p>
<p>Aliquam tristique, nisi vel tristique tempus, urna sapien venenatis lectus, eu hendrerit dolor mauris sed elit. Duis non leo lacus. Nunc feugiat vestibulum blandit. Morbi pretium sapien ut orci porttitor, a laoreet neque tempor. Aliquam eget ante dui. Nullam imperdiet nulla id auctor cursus. Vestibulum sit amet volutpat ligula. Sed pellentesque pharetra mollis. Donec hendrerit pharetra risus, ut sagittis arcu lobortis id.</p>
</div> <!--card content end-->
</div> <!--div to align to center of screen end-->
</div> <!--modal content end-->
</div>
<!--ITEM 2-->
<!--ITEM 3-->
<div class="card card-outline-primary p-3 mb-3" style="border-width:15px; height: 500px; background-size:cover; background-position:center; background-image:url('https://dummyimage.com/350/FFF/000000');">
<!--BUTTON TOGGLE-->
<a class="btn btn-secondary w-25 pull-right" data-toggle="collapse" href="#FIT3"><i class="fa-solid fa-magnifying-glass"></i></a>
<!--IMG CREDIT-->
<a class="text-secondary tooltipster" title="IMG_CREDIT" href="#" style="opacity:.6; position: absolute; top:90%;"><i class="fas fa-image"></i></a>
<!--MODAL CONTENT-->
<div class="collapse w-100 h-100 fade p-3" id="FIT3" style="position:absolute; top:0; left:0; background:rgba(0,0,0,0.8); z-index:2;">
<!--div aligns content to center of screen-->
<div class="justify-content-center">
<!--CARD CONTENT-->
<div class="card w-100 p-3" style="height: 425px; overflow-y:auto;">
<!--CLOSE BUTTON-->
<a data-toggle="collapse" href="#FIT3" style="position:absolute; top:10px; right:15px;"><i class="fa-solid fa-xmark"></i></a>
<h1 class="display-4 mb-2 ml-1">HEADER</h1><div class="card mb-2"></div>
<p>Nam vestibulum massa quis varius venenatis. Proin pretium scelerisque tortor. Nulla egestas ultrices arcu id iaculis. Nunc eu hendrerit nisl. Praesent dignissim nisl eget enim porttitor lacinia. Praesent sagittis commodo convallis. Curabitur molestie quis libero eget pulvinar. Nunc malesuada sem purus, non fermentum eros venenatis sed. Vestibulum ullamcorper quam lorem, vitae bibendum nisi efficitur volutpat. Etiam at urna cursus, tempus nibh scelerisque, varius nibh. In sit amet ornare lorem. Vestibulum sit amet tortor at sem elementum pellentesque eget ut dolor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent interdum commodo blandit.</p>
<p>Aliquam tristique, nisi vel tristique tempus, urna sapien venenatis lectus, eu hendrerit dolor mauris sed elit. Duis non leo lacus. Nunc feugiat vestibulum blandit. Morbi pretium sapien ut orci porttitor, a laoreet neque tempor. Aliquam eget ante dui. Nullam imperdiet nulla id auctor cursus. Vestibulum sit amet volutpat ligula. Sed pellentesque pharetra mollis. Donec hendrerit pharetra risus, ut sagittis arcu lobortis id.</p>
</div> <!--card content end-->
</div> <!--div to align to center of screen end-->
</div> <!--modal content end-->
</div>
<!--ITEM 3-->
</div>
<!--END OF OUTFITS-->
<!--TITLE-->
<div class="card text-uppercase bg-primary text-center mb-3" style="border: transparent; padding: 5px; letter-spacing: 10px;">
<h1 class="display-4 text-light font-weight-bold">Food</h1>
</div>
<!--END OF TITLE-->
<!--FOOD SECTION-->
<div class="card-text p-3 mb-3" style="border: 3px solid; height: 400px; overflow-y:auto; border-radius:5px;">
<!--SIDE IMAGE-->
<div class="card pull-right card-outline-primary m-3 p-3 hidden-sm-down" style="border-width: 10px; height: 300px; width: 300px; background-size:cover; background-position:center; background-image:url('https://dummyimage.com/350/FFF/000000');">
<!--IMG CREDIT-->
<a class="text-secondary tooltipster" title="IMG_CREDIT" href="#" style="opacity:.6;"><i class="fas fa-image"></i></a>
</div>
<!--END OF SIDE IMAGE-->
<p>Ressipy go here.</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>Molestie ac feugiat sed lectus vestibulum. Praesent semper feugiat nibh sed. Elementum nisi quis eleifend quam adipiscing vitae proin. Blandit volutpat maecenas volutpat blandit. In egestas erat imperdiet sed. Cursus sit amet dictum sit amet justo donec enim. Sagittis purus sit amet volutpat consequat. Aliquam vestibulum morbi blandit cursus risus at ultrices mi. Placerat vestibulum lectus mauris ultrices eros. Pulvinar sapien et ligula ullamcorper malesuada. Orci ac auctor augue mauris augue neque gravida. Ullamcorper eget nulla facilisi etiam dignissim diam quis. Id volutpat lacus laoreet non curabitur gravida. Diam donec adipiscing tristique risus nec feugiat in fermentum posuere. Sapien et ligula ullamcorper malesuada. Tortor consequat id porta nibh venenatis. In ante metus dictum at tempor. Rhoncus urna neque viverra justo nec ultrices dui.</p>
<p>Praesent quam diam, ullamcorper quis nulla sit amet, consequat porta leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget libero nec orci posuere molestie at a ligula. Morbi interdum eget justo a auctor. In bibendum suscipit arcu sed pulvinar. Mauris viverra eget dui eu gravida. Aenean laoreet augue ut nisi lacinia sagittis. Nulla ut velit dolor. Etiam finibus lorem vitae magna interdum varius.</p>
</div>
<!--END OF FOOD SECTION-->
<!--TITLE-->
<div class="card text-uppercase bg-primary text-center mb-3" style="border: transparent; padding: 5px; letter-spacing: 10px;">
<h1 class="display-4 text-light font-weight-bold">Currency</h1>
</div>
<!--END OF TITLE-->
<!--CURRENCY-->
<div class="card-deck">
<!--ITEM 1-->
<div class="card card-outline-primary p-3 mb-3" style="border-width:15px; height: 500px; background-size:cover; background-position:center; background-image:url('https://dummyimage.com/350/FFF/000000');">
<!--BUTTON TOGGLE-->
<a class="btn btn-secondary w-25" data-toggle="collapse" href="#COIN1"><i class="fa-solid fa-magnifying-glass"></i></a>
<!--IMG CREDIT-->
<a class="text-secondary tooltipster" title="IMG_CREDIT" href="#" style="opacity:.6; position: absolute; top:90%;"><i class="fas fa-image"></i></a>
<!--MODAL CONTENT-->
<div class="collapse w-100 h-100 fade p-3" id="COIN1" style="position:absolute; top:0; left:0; background:rgba(0,0,0,0.8); z-index:2;">
<!--div aligns content to center of screen-->
<div class="justify-content-center">
<!--CARD CONTENT-->
<div class="card w-100 p-3" style="height: 425px; overflow-y:auto;">
<!--CLOSE BUTTON-->
<a data-toggle="collapse" href="#COIN1" style="position:absolute; top:10px; right:15px;"><i class="fa-solid fa-xmark"></i></a>
<h1 class="display-4 mb-2 ml-1">HEADER</h1><div class="card mb-2"></div>
<p>Nam vestibulum massa quis varius venenatis. Proin pretium scelerisque tortor. Nulla egestas ultrices arcu id iaculis. Nunc eu hendrerit nisl. Praesent dignissim nisl eget enim porttitor lacinia. Praesent sagittis commodo convallis. Curabitur molestie quis libero eget pulvinar. Nunc malesuada sem purus, non fermentum eros venenatis sed. Vestibulum ullamcorper quam lorem, vitae bibendum nisi efficitur volutpat. Etiam at urna cursus, tempus nibh scelerisque, varius nibh. In sit amet ornare lorem. Vestibulum sit amet tortor at sem elementum pellentesque eget ut dolor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent interdum commodo blandit.</p>
<p>Aliquam tristique, nisi vel tristique tempus, urna sapien venenatis lectus, eu hendrerit dolor mauris sed elit. Duis non leo lacus. Nunc feugiat vestibulum blandit. Morbi pretium sapien ut orci porttitor, a laoreet neque tempor. Aliquam eget ante dui. Nullam imperdiet nulla id auctor cursus. Vestibulum sit amet volutpat ligula. Sed pellentesque pharetra mollis. Donec hendrerit pharetra risus, ut sagittis arcu lobortis id.</p>
</div> <!--card content end-->
</div> <!--div to align to center of screen end-->
</div> <!--modal content end-->
</div>
<!--ITEM 1-->
<!--ITEM 2-->
<div class="card card-outline-primary p-3 mb-3" style="border-width:15px; height: 500px; background-size:cover; background-position:center; background-image:url('https://dummyimage.com/350/FFF/000000');">
<!--BUTTON TOGGLE-->
<a class="btn btn-secondary w-25 pull-right" data-toggle="collapse" href="#COIN2"><i class="fa-solid fa-magnifying-glass"></i></a>
<!--IMG CREDIT-->
<a class="text-secondary tooltipster" title="IMG_CREDIT" href="#" style="opacity:.6; position: absolute; top:90%;"><i class="fas fa-image"></i></a>
<!--MODAL CONTENT-->
<div class="collapse w-100 h-100 fade p-3" id="COIN2" style="position:absolute; top:0; left:0; background:rgba(0,0,0,0.8); z-index:2;">
<!--div aligns content to center of screen-->
<div class="justify-content-center">
<!--CARD CONTENT-->
<div class="card w-100 p-3" style="height: 425px; overflow-y:auto;">
<!--CLOSE BUTTON-->
<a data-toggle="collapse" href="#COIN2" style="position:absolute; top:10px; right:15px;"><i class="fa-solid fa-xmark"></i></a>
<h1 class="display-4 mb-2 ml-1">HEADER</h1><div class="card mb-2"></div>
<p>Nam vestibulum massa quis varius venenatis. Proin pretium scelerisque tortor. Nulla egestas ultrices arcu id iaculis. Nunc eu hendrerit nisl. Praesent dignissim nisl eget enim porttitor lacinia. Praesent sagittis commodo convallis. Curabitur molestie quis libero eget pulvinar. Nunc malesuada sem purus, non fermentum eros venenatis sed. Vestibulum ullamcorper quam lorem, vitae bibendum nisi efficitur volutpat. Etiam at urna cursus, tempus nibh scelerisque, varius nibh. In sit amet ornare lorem. Vestibulum sit amet tortor at sem elementum pellentesque eget ut dolor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent interdum commodo blandit.</p>
<p>Aliquam tristique, nisi vel tristique tempus, urna sapien venenatis lectus, eu hendrerit dolor mauris sed elit. Duis non leo lacus. Nunc feugiat vestibulum blandit. Morbi pretium sapien ut orci porttitor, a laoreet neque tempor. Aliquam eget ante dui. Nullam imperdiet nulla id auctor cursus. Vestibulum sit amet volutpat ligula. Sed pellentesque pharetra mollis. Donec hendrerit pharetra risus, ut sagittis arcu lobortis id.</p>
</div> <!--card content end-->
</div> <!--div to align to center of screen end-->
</div> <!--modal content end-->
</div>
<!--ITEM 2-->
<!--ITEM 3-->
<div class="card card-outline-primary p-3 mb-3" style="border-width:15px; height: 500px; background-size:cover; background-position:center; background-image:url('https://dummyimage.com/350/FFF/000000');">
<!--BUTTON TOGGLE-->
<a class="btn btn-secondary w-25 pull-right" data-toggle="collapse" href="#COIN3"><i class="fa-solid fa-magnifying-glass"></i></a>
<!--IMG CREDIT-->
<a class="text-secondary tooltipster" title="IMG_CREDIT" href="#" style="opacity:.6; position: absolute; top:90%;"><i class="fas fa-image"></i></a>
<!--MODAL CONTENT-->
<div class="collapse w-100 h-100 fade p-3" id="COIN3" style="position:absolute; top:0; left:0; background:rgba(0,0,0,0.8); z-index:2;">
<!--div aligns content to center of screen-->
<div class="justify-content-center">
<!--CARD CONTENT-->
<div class="card w-100 p-3" style="height: 425px; overflow-y:auto;">
<!--CLOSE BUTTON-->
<a data-toggle="collapse" href="#COIN3" style="position:absolute; top:10px; right:15px;"><i class="fa-solid fa-xmark"></i></a>
<h1 class="display-4 mb-2 ml-1">HEADER</h1><div class="card mb-2"></div>
<p>Nam vestibulum massa quis varius venenatis. Proin pretium scelerisque tortor. Nulla egestas ultrices arcu id iaculis. Nunc eu hendrerit nisl. Praesent dignissim nisl eget enim porttitor lacinia. Praesent sagittis commodo convallis. Curabitur molestie quis libero eget pulvinar. Nunc malesuada sem purus, non fermentum eros venenatis sed. Vestibulum ullamcorper quam lorem, vitae bibendum nisi efficitur volutpat. Etiam at urna cursus, tempus nibh scelerisque, varius nibh. In sit amet ornare lorem. Vestibulum sit amet tortor at sem elementum pellentesque eget ut dolor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent interdum commodo blandit.</p>
<p>Aliquam tristique, nisi vel tristique tempus, urna sapien venenatis lectus, eu hendrerit dolor mauris sed elit. Duis non leo lacus. Nunc feugiat vestibulum blandit. Morbi pretium sapien ut orci porttitor, a laoreet neque tempor. Aliquam eget ante dui. Nullam imperdiet nulla id auctor cursus. Vestibulum sit amet volutpat ligula. Sed pellentesque pharetra mollis. Donec hendrerit pharetra risus, ut sagittis arcu lobortis id.</p>
</div> <!--card content end-->
</div> <!--div to align to center of screen end-->
</div> <!--modal content end-->
</div>
<!--ITEM 3-->
</div>
<!--END OF CURRENCY-->
</div>
<!--END OF SOCIETY-->
<!--RELIGION-->
<div class="tab-pane fade show" id="religion" role="tabpanel">
<!--OVERVIEW-->
<div class="row justify-content-center">
<div class="col-sm-4 mb-3">
<!--SIDE IMAGE-->
<div class="card card-outline-primary p-3" style="border-width: 10px; height: 400px; background-size:cover; background-position:center; background-image:url('https://dummyimage.com/350/FFF/000000');">
<!--IMG CREDIT-->
<a class="text-secondary tooltipster" title="IMG_CREDIT" href="#" style="opacity:.6;"><i class="fas fa-image"></i></a>
</div>
<!--END OF SIDE IMAGE-->
</div>
<div class="col-lg-8 mb-3">
<!--TITLE-->
<div class="card text-uppercase bg-primary text-center mb-3" style="border: transparent; padding: 5px; letter-spacing: 10px;">
<h1 class="display-4 text-light font-weight-bold">Religion</h1>
</div>
<!--END OF TITLE-->
<div class="card-text p-3" style="border: 3px solid; height: 330px; overflow-y:auto; border-radius:5px;">
<p>Overview here. 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>Molestie ac feugiat sed lectus vestibulum. Praesent semper feugiat nibh sed. Elementum nisi quis eleifend quam adipiscing vitae proin. Blandit volutpat maecenas volutpat blandit. In egestas erat imperdiet sed. Cursus sit amet dictum sit amet justo donec enim. Sagittis purus sit amet volutpat consequat. Aliquam vestibulum morbi blandit cursus risus at ultrices mi. Placerat vestibulum lectus mauris ultrices eros. Pulvinar sapien et ligula ullamcorper malesuada. Orci ac auctor augue mauris augue neque gravida. Ullamcorper eget nulla facilisi etiam dignissim diam quis. Id volutpat lacus laoreet non curabitur gravida. Diam donec adipiscing tristique risus nec feugiat in fermentum posuere. Sapien et ligula ullamcorper malesuada. Tortor consequat id porta nibh venenatis. In ante metus dictum at tempor. Rhoncus urna neque viverra justo nec ultrices dui.</p>
</div>
</div>
</div>
<!--END OF OVERVIEW-->
<!--TITLE-->
<div class="card text-uppercase bg-primary text-center mb-3" style="border: transparent; padding: 5px; letter-spacing: 10px;">
<h1 class="display-4 text-light font-weight-bold">Gods</h1>
</div>
<!--END OF TITLE-->
<!--GOD 1-->
<div class="row justify-content-center">
<div class="col-lg-8 mb-3 order-md-1 order-2">
<!--TITLE-->
<div class="card text-uppercase bg-primary text-center mb-3" style="border: transparent; padding: 5px; letter-spacing: 10px;">
<h1 class="display-4 text-light font-weight-bold">God_Name</h1>
</div>
<!--END OF TITLE-->
<div class="card-text p-3" style="border: 3px solid; height: 330px; overflow-y:auto; border-radius:5px;">
<p>Info about this god here. 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>Molestie ac feugiat sed lectus vestibulum. Praesent semper feugiat nibh sed. Elementum nisi quis eleifend quam adipiscing vitae proin. Blandit volutpat maecenas volutpat blandit. In egestas erat imperdiet sed. Cursus sit amet dictum sit amet justo donec enim. Sagittis purus sit amet volutpat consequat. Aliquam vestibulum morbi blandit cursus risus at ultrices mi. Placerat vestibulum lectus mauris ultrices eros. Pulvinar sapien et ligula ullamcorper malesuada. Orci ac auctor augue mauris augue neque gravida. Ullamcorper eget nulla facilisi etiam dignissim diam quis. Id volutpat lacus laoreet non curabitur gravida. Diam donec adipiscing tristique risus nec feugiat in fermentum posuere. Sapien et ligula ullamcorper malesuada. Tortor consequat id porta nibh venenatis. In ante metus dictum at tempor. Rhoncus urna neque viverra justo nec ultrices dui.</p>
</div>
</div>
<div class="col-sm-4 mb-3 order-sm-1">
<!--SIDE IMAGE-->
<div class="card card-outline-primary p-3" style="border-width: 10px; height: 400px; background-size:cover; background-position:center; background-image:url('https://dummyimage.com/350/FFF/000000');">
<!--IMG CREDIT-->
<a class="text-secondary tooltipster" title="IMG_CREDIT" href="#" style="opacity:.6;"><i class="fas fa-image"></i></a>
</div>
<!--END OF SIDE IMAGE-->
</div>
</div>
<!--END OF GOD 1-->
<!--GOD 2-->
<div class="row justify-content-center">
<div class="col-sm-4 mb-3">
<!--SIDE IMAGE-->
<div class="card card-outline-primary p-3" style="border-width: 10px; height: 400px; background-size:cover; background-position:center; background-image:url('https://dummyimage.com/350/FFF/000000');">
<!--IMG CREDIT-->
<a class="text-secondary tooltipster" title="IMG_CREDIT" href="#" style="opacity:.6;"><i class="fas fa-image"></i></a>
</div>
<!--END OF SIDE IMAGE-->
</div>
<div class="col-lg-8 mb-3">
<!--TITLE-->
<div class="card text-uppercase bg-primary text-center mb-3" style="border: transparent; padding: 5px; letter-spacing: 10px;">
<h1 class="display-4 text-light font-weight-bold">God_Name</h1>
</div>
<!--END OF TITLE-->
<div class="card-text p-3" style="border: 3px solid; height: 330px; overflow-y:auto; border-radius:5px;">
<p>Info about this god here. 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>Molestie ac feugiat sed lectus vestibulum. Praesent semper feugiat nibh sed. Elementum nisi quis eleifend quam adipiscing vitae proin. Blandit volutpat maecenas volutpat blandit. In egestas erat imperdiet sed. Cursus sit amet dictum sit amet justo donec enim. Sagittis purus sit amet volutpat consequat. Aliquam vestibulum morbi blandit cursus risus at ultrices mi. Placerat vestibulum lectus mauris ultrices eros. Pulvinar sapien et ligula ullamcorper malesuada. Orci ac auctor augue mauris augue neque gravida. Ullamcorper eget nulla facilisi etiam dignissim diam quis. Id volutpat lacus laoreet non curabitur gravida. Diam donec adipiscing tristique risus nec feugiat in fermentum posuere. Sapien et ligula ullamcorper malesuada. Tortor consequat id porta nibh venenatis. In ante metus dictum at tempor. Rhoncus urna neque viverra justo nec ultrices dui.</p>
</div>
</div>
</div>
<!--END OF GOD 2-->
<!--GOD 3-->
<div class="row justify-content-center">
<div class="col-lg-8 mb-3 order-md-1 order-2">
<!--TITLE-->
<div class="card text-uppercase bg-primary text-center mb-3" style="border: transparent; padding: 5px; letter-spacing: 10px;">
<h1 class="display-4 text-light font-weight-bold">God_Name</h1>
</div>
<!--END OF TITLE-->
<div class="card-text p-3" style="border: 3px solid; height: 330px; overflow-y:auto; border-radius:5px;">
<p>Info about this god here. 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>Molestie ac feugiat sed lectus vestibulum. Praesent semper feugiat nibh sed. Elementum nisi quis eleifend quam adipiscing vitae proin. Blandit volutpat maecenas volutpat blandit. In egestas erat imperdiet sed. Cursus sit amet dictum sit amet justo donec enim. Sagittis purus sit amet volutpat consequat. Aliquam vestibulum morbi blandit cursus risus at ultrices mi. Placerat vestibulum lectus mauris ultrices eros. Pulvinar sapien et ligula ullamcorper malesuada. Orci ac auctor augue mauris augue neque gravida. Ullamcorper eget nulla facilisi etiam dignissim diam quis. Id volutpat lacus laoreet non curabitur gravida. Diam donec adipiscing tristique risus nec feugiat in fermentum posuere. Sapien et ligula ullamcorper malesuada. Tortor consequat id porta nibh venenatis. In ante metus dictum at tempor. Rhoncus urna neque viverra justo nec ultrices dui.</p>
</div>
</div>
<div class="col-sm-4 mb-3 order-sm-1">
<!--SIDE IMAGE-->
<div class="card card-outline-primary p-3" style="border-width: 10px; height: 400px; background-size:cover; background-position:center; background-image:url('https://dummyimage.com/350/FFF/000000');">
<!--IMG CREDIT-->
<a class="text-secondary tooltipster" title="IMG_CREDIT" href="#" style="opacity:.6;"><i class="fas fa-image"></i></a>
</div>
<!--END OF SIDE IMAGE-->
</div>
</div>
<!--END OF GOD 3-->
<!--TITLE-->
<div class="card text-uppercase bg-primary text-center mb-3" style="border: transparent; padding: 5px; letter-spacing: 10px;">
<h1 class="display-4 text-light font-weight-bold">Clergy</h1>
</div>
<!--END OF TITLE-->
<!--CLERGY-->
<div class="card-deck">
<!--ITEM 1-->
<div class="card card-outline-primary p-3 mb-3" style="border-width:15px; height: 500px; background-size:cover; background-position:center; background-image:url('https://dummyimage.com/350/FFF/000000');">
<!--BUTTON TOGGLE-->
<a class="btn btn-secondary w-25" data-toggle="collapse" href="#CLERGY1"><i class="fa-solid fa-magnifying-glass"></i></a>
<!--IMG CREDIT-->
<a class="text-secondary tooltipster" title="IMG_CREDIT" href="#" style="opacity:.6; position: absolute; top:90%;"><i class="fas fa-image"></i></a>
<!--MODAL CONTENT-->
<div class="collapse w-100 h-100 fade p-3" id="CLERGY1" style="position:absolute; top:0; left:0; background:rgba(0,0,0,0.8); z-index:2;">
<!--div aligns content to center of screen-->
<div class="justify-content-center">
<!--CARD CONTENT-->
<div class="card w-100 p-3" style="height: 425px; overflow-y:auto;">
<!--CLOSE BUTTON-->
<a data-toggle="collapse" href="#CLERGY1" style="position:absolute; top:10px; right:15px;"><i class="fa-solid fa-xmark"></i></a>
<h1 class="display-4 mb-2 ml-1">HEADER</h1><div class="card mb-2"></div>
<p>Nam vestibulum massa quis varius venenatis. Proin pretium scelerisque tortor. Nulla egestas ultrices arcu id iaculis. Nunc eu hendrerit nisl. Praesent dignissim nisl eget enim porttitor lacinia. Praesent sagittis commodo convallis. Curabitur molestie quis libero eget pulvinar. Nunc malesuada sem purus, non fermentum eros venenatis sed. Vestibulum ullamcorper quam lorem, vitae bibendum nisi efficitur volutpat. Etiam at urna cursus, tempus nibh scelerisque, varius nibh. In sit amet ornare lorem. Vestibulum sit amet tortor at sem elementum pellentesque eget ut dolor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent interdum commodo blandit.</p>
<p>Aliquam tristique, nisi vel tristique tempus, urna sapien venenatis lectus, eu hendrerit dolor mauris sed elit. Duis non leo lacus. Nunc feugiat vestibulum blandit. Morbi pretium sapien ut orci porttitor, a laoreet neque tempor. Aliquam eget ante dui. Nullam imperdiet nulla id auctor cursus. Vestibulum sit amet volutpat ligula. Sed pellentesque pharetra mollis. Donec hendrerit pharetra risus, ut sagittis arcu lobortis id.</p>
</div> <!--card content end-->
</div> <!--div to align to center of screen end-->
</div> <!--modal content end-->
</div>
<!--ITEM 1-->
<!--ITEM 2-->
<div class="card card-outline-primary p-3 mb-3" style="border-width:15px; height: 500px; background-size:cover; background-position:center; background-image:url('https://dummyimage.com/350/FFF/000000');">
<!--BUTTON TOGGLE-->
<a class="btn btn-secondary w-25 pull-right" data-toggle="collapse" href="#CLERGY2"><i class="fa-solid fa-magnifying-glass"></i></a>
<!--IMG CREDIT-->
<a class="text-secondary tooltipster" title="IMG_CREDIT" href="#" style="opacity:.6; position: absolute; top:90%;"><i class="fas fa-image"></i></a>
<!--MODAL CONTENT-->
<div class="collapse w-100 h-100 fade p-3" id="CLERGY2" style="position:absolute; top:0; left:0; background:rgba(0,0,0,0.8); z-index:2;">
<!--div aligns content to center of screen-->
<div class="justify-content-center">
<!--CARD CONTENT-->
<div class="card w-100 p-3" style="height: 425px; overflow-y:auto;">
<!--CLOSE BUTTON-->
<a data-toggle="collapse" href="#CLERGY2" style="position:absolute; top:10px; right:15px;"><i class="fa-solid fa-xmark"></i></a>
<h1 class="display-4 mb-2 ml-1">HEADER</h1><div class="card mb-2"></div>
<p>Nam vestibulum massa quis varius venenatis. Proin pretium scelerisque tortor. Nulla egestas ultrices arcu id iaculis. Nunc eu hendrerit nisl. Praesent dignissim nisl eget enim porttitor lacinia. Praesent sagittis commodo convallis. Curabitur molestie quis libero eget pulvinar. Nunc malesuada sem purus, non fermentum eros venenatis sed. Vestibulum ullamcorper quam lorem, vitae bibendum nisi efficitur volutpat. Etiam at urna cursus, tempus nibh scelerisque, varius nibh. In sit amet ornare lorem. Vestibulum sit amet tortor at sem elementum pellentesque eget ut dolor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent interdum commodo blandit.</p>
<p>Aliquam tristique, nisi vel tristique tempus, urna sapien venenatis lectus, eu hendrerit dolor mauris sed elit. Duis non leo lacus. Nunc feugiat vestibulum blandit. Morbi pretium sapien ut orci porttitor, a laoreet neque tempor. Aliquam eget ante dui. Nullam imperdiet nulla id auctor cursus. Vestibulum sit amet volutpat ligula. Sed pellentesque pharetra mollis. Donec hendrerit pharetra risus, ut sagittis arcu lobortis id.</p>
</div> <!--card content end-->
</div> <!--div to align to center of screen end-->
</div> <!--modal content end-->
</div>
<!--ITEM 2-->
<!--ITEM 3-->
<div class="card card-outline-primary p-3 mb-3" style="border-width:15px; height: 500px; background-size:cover; background-position:center; background-image:url('https://dummyimage.com/350/FFF/000000');">
<!--BUTTON TOGGLE-->
<a class="btn btn-secondary w-25 pull-right" data-toggle="collapse" href="#CLERGY3"><i class="fa-solid fa-magnifying-glass"></i></a>
<!--IMG CREDIT-->
<a class="text-secondary tooltipster" title="IMG_CREDIT" href="#" style="opacity:.6; position: absolute; top:90%;"><i class="fas fa-image"></i></a>
<!--MODAL CONTENT-->
<div class="collapse w-100 h-100 fade p-3" id="CLERGY3" style="position:absolute; top:0; left:0; background:rgba(0,0,0,0.8); z-index:2;">
<!--div aligns content to center of screen-->
<div class="justify-content-center">
<!--CARD CONTENT-->
<div class="card w-100 p-3" style="height: 425px; overflow-y:auto;">
<!--CLOSE BUTTON-->
<a data-toggle="collapse" href="#CLERGY3" style="position:absolute; top:10px; right:15px;"><i class="fa-solid fa-xmark"></i></a>
<h1 class="display-4 mb-2 ml-1">HEADER</h1><div class="card mb-2"></div>
<p>Nam vestibulum massa quis varius venenatis. Proin pretium scelerisque tortor. Nulla egestas ultrices arcu id iaculis. Nunc eu hendrerit nisl. Praesent dignissim nisl eget enim porttitor lacinia. Praesent sagittis commodo convallis. Curabitur molestie quis libero eget pulvinar. Nunc malesuada sem purus, non fermentum eros venenatis sed. Vestibulum ullamcorper quam lorem, vitae bibendum nisi efficitur volutpat. Etiam at urna cursus, tempus nibh scelerisque, varius nibh. In sit amet ornare lorem. Vestibulum sit amet tortor at sem elementum pellentesque eget ut dolor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent interdum commodo blandit.</p>
<p>Aliquam tristique, nisi vel tristique tempus, urna sapien venenatis lectus, eu hendrerit dolor mauris sed elit. Duis non leo lacus. Nunc feugiat vestibulum blandit. Morbi pretium sapien ut orci porttitor, a laoreet neque tempor. Aliquam eget ante dui. Nullam imperdiet nulla id auctor cursus. Vestibulum sit amet volutpat ligula. Sed pellentesque pharetra mollis. Donec hendrerit pharetra risus, ut sagittis arcu lobortis id.</p>
</div> <!--card content end-->
</div> <!--div to align to center of screen end-->
</div> <!--modal content end-->
</div>
<!--ITEM 3-->
</div>
<!--END OF CLERGY-->
</div>
<!--END OF RELIGION-->
<!--MAGIC-->
<div class="tab-pane fade show" id="magic" role="tabpanel">
<!--OVERVIEW-->
<div class="row justify-content-center">
<div class="col-lg-8 mb-3 order-md-1 order-2">
<!--TITLE-->
<div class="card text-uppercase bg-primary text-center mb-3" style="border: transparent; padding: 5px; letter-spacing: 10px;">
<h1 class="display-4 text-light font-weight-bold">Magic</h1>
</div>
<!--END OF TITLE-->
<div class="card-text p-3" style="border: 3px solid; height: 330px; overflow-y:auto; border-radius:5px;">
<p>Overview here. 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>Molestie ac feugiat sed lectus vestibulum. Praesent semper feugiat nibh sed. Elementum nisi quis eleifend quam adipiscing vitae proin. Blandit volutpat maecenas volutpat blandit. In egestas erat imperdiet sed. Cursus sit amet dictum sit amet justo donec enim. Sagittis purus sit amet volutpat consequat. Aliquam vestibulum morbi blandit cursus risus at ultrices mi. Placerat vestibulum lectus mauris ultrices eros. Pulvinar sapien et ligula ullamcorper malesuada. Orci ac auctor augue mauris augue neque gravida. Ullamcorper eget nulla facilisi etiam dignissim diam quis. Id volutpat lacus laoreet non curabitur gravida. Diam donec adipiscing tristique risus nec feugiat in fermentum posuere. Sapien et ligula ullamcorper malesuada. Tortor consequat id porta nibh venenatis. In ante metus dictum at tempor. Rhoncus urna neque viverra justo nec ultrices dui.</p>
</div>
</div>
<div class="col-sm-4 mb-3 order-sm-1">
<!--SIDE IMAGE-->
<div class="card card-outline-primary p-3" style="border-width: 10px; height: 400px; background-size:cover; background-position:center; background-image:url('https://dummyimage.com/350/FFF/000000');">
<!--IMG CREDIT-->
<a class="text-secondary tooltipster" title="IMG_CREDIT" href="#" style="opacity:.6;"><i class="fas fa-image"></i></a>
</div>
<!--END OF SIDE IMAGE-->
</div>
</div>
<!--END OF OVERVIEW-->
<!--TITLE-->
<div class="card text-uppercase bg-primary text-center mb-3" style="border: transparent; padding: 5px; letter-spacing: 10px;">
<h1 class="display-4 text-light font-weight-bold">Types of Magic</h1>
</div>
<!--END OF TITLE-->
<!--ELEMENT/MAGIC-->
<div class="row justify-content-center">
<div class="col-sm-4 mb-3">
<!--SIDE IMAGE-->
<div class="card card-outline-primary p-3" style="border-width: 10px; height: 400px; background-size:cover; background-position:center; background-image:url('https://dummyimage.com/350/FFF/000000');">
<!--IMG CREDIT-->
<a class="text-secondary tooltipster" title="IMG_CREDIT" href="#" style="opacity:.6;"><i class="fas fa-image"></i></a>
</div>
<!--END OF SIDE IMAGE-->
</div>
<div class="col-lg-8 mb-3">
<!--TITLE-->
<div class="card text-uppercase bg-primary text-center mb-3" style="border: transparent; padding: 5px; letter-spacing: 10px;">
<h1 class="display-4 text-light font-weight-bold">Element</h1>
</div>
<!--END OF TITLE-->
<div class="card-text p-3" style="border: 3px solid; height: 330px; overflow-y:auto; border-radius:5px;">
<p>Info about this magical element here. 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>Molestie ac feugiat sed lectus vestibulum. Praesent semper feugiat nibh sed. Elementum nisi quis eleifend quam adipiscing vitae proin. Blandit volutpat maecenas volutpat blandit. In egestas erat imperdiet sed. Cursus sit amet dictum sit amet justo donec enim. Sagittis purus sit amet volutpat consequat. Aliquam vestibulum morbi blandit cursus risus at ultrices mi. Placerat vestibulum lectus mauris ultrices eros. Pulvinar sapien et ligula ullamcorper malesuada. Orci ac auctor augue mauris augue neque gravida. Ullamcorper eget nulla facilisi etiam dignissim diam quis. Id volutpat lacus laoreet non curabitur gravida. Diam donec adipiscing tristique risus nec feugiat in fermentum posuere. Sapien et ligula ullamcorper malesuada. Tortor consequat id porta nibh venenatis. In ante metus dictum at tempor. Rhoncus urna neque viverra justo nec ultrices dui.</p>
</div>
</div>
</div>
<!--END OF ELEMENT/MAGIC-->
<!--ELEMENT/MAGIC-->
<div class="row justify-content-center">
<div class="col-lg-8 mb-3 order-md-1 order-2">
<!--TITLE-->
<div class="card text-uppercase bg-primary text-center mb-3" style="border: transparent; padding: 5px; letter-spacing: 10px;">
<h1 class="display-4 text-light font-weight-bold">Element</h1>
</div>
<!--END OF TITLE-->
<div class="card-text p-3" style="border: 3px solid; height: 330px; overflow-y:auto; border-radius:5px;">
<p>Info about this magical element here. 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>Molestie ac feugiat sed lectus vestibulum. Praesent semper feugiat nibh sed. Elementum nisi quis eleifend quam adipiscing vitae proin. Blandit volutpat maecenas volutpat blandit. In egestas erat imperdiet sed. Cursus sit amet dictum sit amet justo donec enim. Sagittis purus sit amet volutpat consequat. Aliquam vestibulum morbi blandit cursus risus at ultrices mi. Placerat vestibulum lectus mauris ultrices eros. Pulvinar sapien et ligula ullamcorper malesuada. Orci ac auctor augue mauris augue neque gravida. Ullamcorper eget nulla facilisi etiam dignissim diam quis. Id volutpat lacus laoreet non curabitur gravida. Diam donec adipiscing tristique risus nec feugiat in fermentum posuere. Sapien et ligula ullamcorper malesuada. Tortor consequat id porta nibh venenatis. In ante metus dictum at tempor. Rhoncus urna neque viverra justo nec ultrices dui.</p>
</div>
</div>
<div class="col-sm-4 mb-3 order-sm-1">
<!--SIDE IMAGE-->
<div class="card card-outline-primary p-3" style="border-width: 10px; height: 400px; background-size:cover; background-position:center; background-image:url('https://dummyimage.com/350/FFF/000000');">
<!--IMG CREDIT-->
<a class="text-secondary tooltipster" title="IMG_CREDIT" href="#" style="opacity:.6;"><i class="fas fa-image"></i></a>
</div>
<!--END OF SIDE IMAGE-->
</div>
</div>
<!--END OF ELEMENT/MAGIC-->
<!--ELEMENT/MAGIC-->
<div class="row justify-content-center">
<div class="col-sm-4 mb-3">
<!--SIDE IMAGE-->
<div class="card card-outline-primary p-3" style="border-width: 10px; height: 400px; background-size:cover; background-position:center; background-image:url('https://dummyimage.com/350/FFF/000000');">
<!--IMG CREDIT-->
<a class="text-secondary tooltipster" title="IMG_CREDIT" href="#" style="opacity:.6;"><i class="fas fa-image"></i></a>
</div>
<!--END OF SIDE IMAGE-->
</div>
<div class="col-lg-8 mb-3">
<!--TITLE-->
<div class="card text-uppercase bg-primary text-center mb-3" style="border: transparent; padding: 5px; letter-spacing: 10px;">
<h1 class="display-4 text-light font-weight-bold">Element</h1>
</div>
<!--END OF TITLE-->
<div class="card-text p-3" style="border: 3px solid; height: 330px; overflow-y:auto; border-radius:5px;">
<p>Info about this magical element here. 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>Molestie ac feugiat sed lectus vestibulum. Praesent semper feugiat nibh sed. Elementum nisi quis eleifend quam adipiscing vitae proin. Blandit volutpat maecenas volutpat blandit. In egestas erat imperdiet sed. Cursus sit amet dictum sit amet justo donec enim. Sagittis purus sit amet volutpat consequat. Aliquam vestibulum morbi blandit cursus risus at ultrices mi. Placerat vestibulum lectus mauris ultrices eros. Pulvinar sapien et ligula ullamcorper malesuada. Orci ac auctor augue mauris augue neque gravida. Ullamcorper eget nulla facilisi etiam dignissim diam quis. Id volutpat lacus laoreet non curabitur gravida. Diam donec adipiscing tristique risus nec feugiat in fermentum posuere. Sapien et ligula ullamcorper malesuada. Tortor consequat id porta nibh venenatis. In ante metus dictum at tempor. Rhoncus urna neque viverra justo nec ultrices dui.</p>
</div>
</div>
</div>
<!--END OF ELEMENT/MAGIC-->
</div>
<!--END OF MAGIC-->
<!--MAP-->
<div class="tab-pane fade show" id="map" role="tabpanel">
<!--FULL MAP IMAGE-->
<div class="card card-outline-primary p-3 mb-3" style="border-width: 15px; height: 400px; background-size:cover; background-position:center; background-image:url('https://dummyimage.com/350/FFF/000000');">
<!--IMG CREDIT-->
<a class="text-secondary tooltipster" title="IMG_CREDIT" href="#" style="opacity:.6;"><i class="fas fa-image"></i></a>
</div>
<!--END OF FULL MAP IMAGE-->
<!--LOCATION 1-->
<!--TITLE-->
<div class="card text-uppercase bg-primary text-center mb-3" style="border: transparent; padding: 5px; letter-spacing: 10px;">
<h1 class="display-4 text-light font-weight-bold">Location_Name</h1>
</div>
<!--END OF TITLE-->
<!--OVERVIEW-->
<div class="row justify-content-center">
<div class="col-sm-4 mb-3">
<!--MAP CLOSEUP-->
<div class="card card-outline-primary p-3" style="border-width: 10px; height: 400px; background-size:cover; background-position:center; background-image:url('https://dummyimage.com/350/FFF/000000');">
<!--IMG CREDIT-->
<a class="text-secondary tooltipster" title="IMG_CREDIT" href="#" style="opacity:.6;"><i class="fas fa-image"></i></a>
</div>
<!--END OF MAP CLOSEUP-->
</div>
<div class="col-lg-8 mb-3">
<div class="card-text p-3" style="border: 3px solid; height: 400px; overflow-y:auto; border-radius:5px;">
<p>Write your location overview here. 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>Molestie ac feugiat sed lectus vestibulum. Praesent semper feugiat nibh sed. Elementum nisi quis eleifend quam adipiscing vitae proin. Blandit volutpat maecenas volutpat blandit. In egestas erat imperdiet sed. Cursus sit amet dictum sit amet justo donec enim. Sagittis purus sit amet volutpat consequat. Aliquam vestibulum morbi blandit cursus risus at ultrices mi. Placerat vestibulum lectus mauris ultrices eros. Pulvinar sapien et ligula ullamcorper malesuada. Orci ac auctor augue mauris augue neque gravida. Ullamcorper eget nulla facilisi etiam dignissim diam quis. Id volutpat lacus laoreet non curabitur gravida. Diam donec adipiscing tristique risus nec feugiat in fermentum posuere. Sapien et ligula ullamcorper malesuada. Tortor consequat id porta nibh venenatis. In ante metus dictum at tempor. Rhoncus urna neque viverra justo nec ultrices dui.</p>
</div>
</div>
</div>
<!--END OF OVERVIEW-->
<!--LOCATION MOODBOARD SECTION-->
<div class="row justify-content-center">
<div class="col-sm mb-3">
<!--SIDE IMAGE-->
<div class="card card-outline-primary p-3" style="border-width: 10px; height: 300px; background-size:cover; background-position:center; background-image:url('https://dummyimage.com/350/FFF/000000');">
<!--IMG CREDIT-->
<a class="text-secondary tooltipster" title="IMG_CREDIT" href="#" style="opacity:.6;"><i class="fas fa-image"></i></a>
</div>
<!--END OF SIDE IMAGE-->
</div>
<div class="col-sm mb-3">
<!--SIDE IMAGE-->
<div class="card card-outline-primary p-3" style="border-width: 10px; height: 300px; background-size:cover; background-position:center; background-image:url('https://dummyimage.com/350/FFF/000000');">
<!--IMG CREDIT-->
<a class="text-secondary tooltipster" title="IMG_CREDIT" href="#" style="opacity:.6;"><i class="fas fa-image"></i></a>
</div>
<!--END OF SIDE IMAGE-->
</div>
<div class="col-sm mb-3">
<!--SIDE IMAGE-->
<div class="card card-outline-primary p-3" style="border-width: 10px; height: 300px; background-size:cover; background-position:center; background-image:url('https://dummyimage.com/350/FFF/000000');">
<!--IMG CREDIT-->
<a class="text-secondary tooltipster" title="IMG_CREDIT" href="#" style="opacity:.6;"><i class="fas fa-image"></i></a>
</div>
<!--END OF SIDE IMAGE-->
</div>
<div class="col-sm mb-3">
<!--SIDE IMAGE-->
<div class="card card-outline-primary p-3" style="border-width: 10px; height: 300px; background-size:cover; background-position:center; background-image:url('https://dummyimage.com/350/FFF/000000');">
<!--IMG CREDIT-->
<a class="text-secondary tooltipster" title="IMG_CREDIT" href="#" style="opacity:.6;"><i class="fas fa-image"></i></a>
</div>
<!--END OF SIDE IMAGE-->
</div>
</div>
<!--END OF LOCATION MOODBOARD SECTION-->
<!--KEY POINTS-->
<div class="card-text p-3 mb-3" style="border: 3px solid; border-radius:5px;">
<div class="card bg-transparent card-outline-primary mb-3" style="border-width: 2px;">
<div class="row no-gutters mb-2">
<div class="col-auto align-items-center bg-primary mb-n2" style="font-weight: bold; padding: 5px; margin-right: 4px; min-width:140px;">
<i class="fa-solid fa-location-dot"></i> Capital
</div>
<div class="col card bg-transparent border-0 rounded-0 pt-2 pr-2" style="text-align: right;">
content
</div>
</div>
</div>
<div class="card bg-transparent card-outline-primary mb-3" style="border-width: 2px;">
<div class="row no-gutters mb-2">
<div class="col-auto align-items-center bg-primary mb-n2" style="font-weight: bold; padding: 5px; margin-right: 4px; min-width:140px;">
<i class="fa-solid fa-globe"></i> Population
</div>
<div class="col card bg-transparent border-0 rounded-0 pt-2 pr-2" style="text-align: right;">
content
</div>
</div>
</div>
<div class="card bg-transparent card-outline-primary mb-3" style="border-width: 2px;">
<div class="row no-gutters mb-2">
<div class="col-auto align-items-center bg-primary mb-n2" style="font-weight: bold; padding: 5px; margin-right: 4px; min-width:140px;">
<i class="fa-solid fa-sun-cloud"></i> Climate
</div>
<div class="col card bg-transparent border-0 rounded-0 pt-2 pr-2" style="text-align: right;">
content
</div>
</div>
</div>
<div class="card bg-transparent card-outline-primary mb-3" style="border-width: 2px;">
<div class="row no-gutters mb-2">
<div class="col-auto align-items-center bg-primary mb-n2" style="font-weight: bold; padding: 5px; margin-right: 4px; min-width:140px;">
<i class="fa-solid fa-mountains"></i> Geography
</div>
<div class="col card bg-transparent border-0 rounded-0 pt-2 pr-2" style="text-align: right;">
content
</div>
</div>
</div>
<div class="card bg-transparent card-outline-primary" style="border-width: 2px;">
<div class="row no-gutters mb-2">
<div class="col-auto align-items-center bg-primary mb-n2" style="font-weight: bold; padding: 5px; margin-right: 4px; min-width:140px;">
<i class="fa-solid fa-id-card"></i> Trivia
</div>
<div class="col card bg-transparent border-0 rounded-0 pt-2 pr-2" style="text-align: right;">
<ul class="list-unstyled">
<li><i class="fas fa-map-pin"></i> content</li>
<li><i class="fas fa-map-pin"></i> content</li>
<li><i class="fas fa-map-pin"></i> content</li>
</ul>
</div>
</div>
</div>
</div>
<!--END OF KEY POINTS-->
<!--END OF LOCATION 1-->
<!--LOCATION 2-->
<!--TITLE-->
<div class="card text-uppercase bg-primary text-center mb-3" style="border: transparent; padding: 5px; letter-spacing: 10px;">
<h1 class="display-4 text-light font-weight-bold">Location_Name</h1>
</div>
<!--END OF TITLE-->
<!--OVERVIEW-->
<div class="row justify-content-center">
<div class="col-lg-8 mb-3 order-md-1 order-2">
<div class="card-text p-3" style="border: 3px solid; height: 400px; overflow-y:auto; border-radius:5px;">
<p>Write your location overview here. 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>Molestie ac feugiat sed lectus vestibulum. Praesent semper feugiat nibh sed. Elementum nisi quis eleifend quam adipiscing vitae proin. Blandit volutpat maecenas volutpat blandit. In egestas erat imperdiet sed. Cursus sit amet dictum sit amet justo donec enim. Sagittis purus sit amet volutpat consequat. Aliquam vestibulum morbi blandit cursus risus at ultrices mi. Placerat vestibulum lectus mauris ultrices eros. Pulvinar sapien et ligula ullamcorper malesuada. Orci ac auctor augue mauris augue neque gravida. Ullamcorper eget nulla facilisi etiam dignissim diam quis. Id volutpat lacus laoreet non curabitur gravida. Diam donec adipiscing tristique risus nec feugiat in fermentum posuere. Sapien et ligula ullamcorper malesuada. Tortor consequat id porta nibh venenatis. In ante metus dictum at tempor. Rhoncus urna neque viverra justo nec ultrices dui.</p>
</div>
</div>
<div class="col-sm-4 mb-3 order-sm-1">
<!--MAP CLOSEUP-->
<div class="card card-outline-primary p-3" style="border-width: 10px; height: 400px; background-size:cover; background-position:center; background-image:url('https://dummyimage.com/350/FFF/000000');">
<!--IMG CREDIT-->
<a class="text-secondary tooltipster" title="IMG_CREDIT" href="#" style="opacity:.6;"><i class="fas fa-image"></i></a>
</div>
<!--END OF MAP CLOSEUP-->
</div>
</div>
<!--END OF OVERVIEW-->
<!--LOCATION MOODBOARD SECTION-->
<div class="row justify-content-center">
<div class="col-sm mb-3">
<!--SIDE IMAGE-->
<div class="card card-outline-primary p-3" style="border-width: 10px; height: 300px; background-size:cover; background-position:center; background-image:url('https://dummyimage.com/350/FFF/000000');">
<!--IMG CREDIT-->
<a class="text-secondary tooltipster" title="IMG_CREDIT" href="#" style="opacity:.6;"><i class="fas fa-image"></i></a>
</div>
<!--END OF SIDE IMAGE-->
</div>
<div class="col-sm mb-3">
<!--SIDE IMAGE-->
<div class="card card-outline-primary p-3" style="border-width: 10px; height: 300px; background-size:cover; background-position:center; background-image:url('https://dummyimage.com/350/FFF/000000');">
<!--IMG CREDIT-->
<a class="text-secondary tooltipster" title="IMG_CREDIT" href="#" style="opacity:.6;"><i class="fas fa-image"></i></a>
</div>
<!--END OF SIDE IMAGE-->
</div>
<div class="col-sm mb-3">
<!--SIDE IMAGE-->
<div class="card card-outline-primary p-3" style="border-width: 10px; height: 300px; background-size:cover; background-position:center; background-image:url('https://dummyimage.com/350/FFF/000000');">
<!--IMG CREDIT-->
<a class="text-secondary tooltipster" title="IMG_CREDIT" href="#" style="opacity:.6;"><i class="fas fa-image"></i></a>
</div>
<!--END OF SIDE IMAGE-->
</div>
<div class="col-sm mb-3">
<!--SIDE IMAGE-->
<div class="card card-outline-primary p-3" style="border-width: 10px; height: 300px; background-size:cover; background-position:center; background-image:url('https://dummyimage.com/350/FFF/000000');">
<!--IMG CREDIT-->
<a class="text-secondary tooltipster" title="IMG_CREDIT" href="#" style="opacity:.6;"><i class="fas fa-image"></i></a>
</div>
<!--END OF SIDE IMAGE-->
</div>
</div>
<!--END OF LOCATION MOODBOARD SECTION-->
<!--KEY POINTS-->
<div class="card-text p-3 mb-3" style="border: 3px solid; border-radius:5px;">
<div class="card bg-transparent card-outline-primary mb-3" style="border-width: 2px;">
<div class="row no-gutters mb-2">
<div class="col-auto align-items-center bg-primary mb-n2" style="font-weight: bold; padding: 5px; margin-right: 4px; min-width:140px;">
<i class="fa-solid fa-location-dot"></i> Capital
</div>
<div class="col card bg-transparent border-0 rounded-0 pt-2 pr-2" style="text-align: right;">
content
</div>
</div>
</div>
<div class="card bg-transparent card-outline-primary mb-3" style="border-width: 2px;">
<div class="row no-gutters mb-2">
<div class="col-auto align-items-center bg-primary mb-n2" style="font-weight: bold; padding: 5px; margin-right: 4px; min-width:140px;">
<i class="fa-solid fa-globe"></i> Population
</div>
<div class="col card bg-transparent border-0 rounded-0 pt-2 pr-2" style="text-align: right;">
content
</div>
</div>
</div>
<div class="card bg-transparent card-outline-primary mb-3" style="border-width: 2px;">
<div class="row no-gutters mb-2">
<div class="col-auto align-items-center bg-primary mb-n2" style="font-weight: bold; padding: 5px; margin-right: 4px; min-width:140px;">
<i class="fa-solid fa-sun-cloud"></i> Climate
</div>
<div class="col card bg-transparent border-0 rounded-0 pt-2 pr-2" style="text-align: right;">
content
</div>
</div>
</div>
<div class="card bg-transparent card-outline-primary mb-3" style="border-width: 2px;">
<div class="row no-gutters mb-2">
<div class="col-auto align-items-center bg-primary mb-n2" style="font-weight: bold; padding: 5px; margin-right: 4px; min-width:140px;">
<i class="fa-solid fa-mountains"></i> Geography
</div>
<div class="col card bg-transparent border-0 rounded-0 pt-2 pr-2" style="text-align: right;">
content
</div>
</div>
</div>
<div class="card bg-transparent card-outline-primary" style="border-width: 2px;">
<div class="row no-gutters mb-2">
<div class="col-auto align-items-center bg-primary mb-n2" style="font-weight: bold; padding: 5px; margin-right: 4px; min-width:140px;">
<i class="fa-solid fa-id-card"></i> Trivia
</div>
<div class="col card bg-transparent border-0 rounded-0 pt-2 pr-2" style="text-align: right;">
<ul class="list-unstyled">
<li><i class="fas fa-map-pin"></i> content</li>
<li><i class="fas fa-map-pin"></i> content</li>
<li><i class="fas fa-map-pin"></i> content</li>
</ul>
</div>
</div>
</div>
</div>
<!--END OF KEY POINTS-->
<!--END OF LOCATION 2-->
</div>
<!--END OF MAP-->
<!--KEY FIGURES-->
<div class="tab-pane fade show" id="key" role="tabpanel">
<!--TITLE-->
<div class="card text-uppercase bg-primary text-center mb-3" style="border: transparent; padding: 5px; letter-spacing: 10px;">
<h1 class="display-4 text-light font-weight-bold">Group_Name</h1>
</div>
<!--END OF TITLE-->
<!--FIGURES ROW 1-->
<div class="card-deck">
<!--FIG 1-->
<div class="card card-outline-primary p-3 mb-3" style="border-width:15px; height: 500px; background-size:cover; background-position:center; background-image:url('https://dummyimage.com/350/FFF/000000');">
<!--BUTTON TOGGLE-->
<a class="btn btn-secondary w-25" data-toggle="collapse" href="#FIG1"><i class="fa-solid fa-magnifying-glass"></i></a>
<!--IMG CREDIT-->
<a class="text-secondary tooltipster" title="IMG_CREDIT" href="#" style="opacity:.6; position: absolute; top:90%;"><i class="fas fa-image"></i></a>
<!--MODAL CONTENT-->
<div class="collapse w-100 h-100 fade p-3" id="FIG1" style="position:absolute; top:0; left:0; background:rgba(0,0,0,0.8); z-index:2;">
<!--div aligns content to center of screen-->
<div class="justify-content-center">
<!--CARD CONTENT-->
<div class="card w-100 p-3" style="height: 425px; overflow-y:auto;">
<!--CLOSE BUTTON-->
<a data-toggle="collapse" href="#FIG1" style="position:absolute; top:10px; right:15px;"><i class="fa-solid fa-xmark"></i></a>
<h1 class="display-4 mb-2 ml-1">HEADER</h1><div class="card mb-2"></div>
<p>Nam vestibulum massa quis varius venenatis. Proin pretium scelerisque tortor. Nulla egestas ultrices arcu id iaculis. Nunc eu hendrerit nisl. Praesent dignissim nisl eget enim porttitor lacinia. Praesent sagittis commodo convallis. Curabitur molestie quis libero eget pulvinar. Nunc malesuada sem purus, non fermentum eros venenatis sed. Vestibulum ullamcorper quam lorem, vitae bibendum nisi efficitur volutpat. Etiam at urna cursus, tempus nibh scelerisque, varius nibh. In sit amet ornare lorem. Vestibulum sit amet tortor at sem elementum pellentesque eget ut dolor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent interdum commodo blandit.</p>
<p>Aliquam tristique, nisi vel tristique tempus, urna sapien venenatis lectus, eu hendrerit dolor mauris sed elit. Duis non leo lacus. Nunc feugiat vestibulum blandit. Morbi pretium sapien ut orci porttitor, a laoreet neque tempor. Aliquam eget ante dui. Nullam imperdiet nulla id auctor cursus. Vestibulum sit amet volutpat ligula. Sed pellentesque pharetra mollis. Donec hendrerit pharetra risus, ut sagittis arcu lobortis id.</p>
</div> <!--card content end-->
</div> <!--div to align to center of screen end-->
</div> <!--modal content end-->
</div>
<!--FIG 1-->
<!--FIG 2-->
<div class="card card-outline-primary p-3 mb-3" style="border-width:15px; height: 500px; background-size:cover; background-position:center; background-image:url('https://dummyimage.com/350/FFF/000000');">
<!--BUTTON TOGGLE-->
<a class="btn btn-secondary w-25 pull-right" data-toggle="collapse" href="#FIG2"><i class="fa-solid fa-magnifying-glass"></i></a>
<!--IMG CREDIT-->
<a class="text-secondary tooltipster" title="IMG_CREDIT" href="#" style="opacity:.6; position: absolute; top:90%;"><i class="fas fa-image"></i></a>
<!--MODAL CONTENT-->
<div class="collapse w-100 h-100 fade p-3" id="FIG2" style="position:absolute; top:0; left:0; background:rgba(0,0,0,0.8); z-index:2;">
<!--div aligns content to center of screen-->
<div class="justify-content-center">
<!--CARD CONTENT-->
<div class="card w-100 p-3" style="height: 425px; overflow-y:auto;">
<!--CLOSE BUTTON-->
<a data-toggle="collapse" href="#FIG2" style="position:absolute; top:10px; right:15px;"><i class="fa-solid fa-xmark"></i></a>
<h1 class="display-4 mb-2 ml-1">HEADER</h1><div class="card mb-2"></div>
<p>Nam vestibulum massa quis varius venenatis. Proin pretium scelerisque tortor. Nulla egestas ultrices arcu id iaculis. Nunc eu hendrerit nisl. Praesent dignissim nisl eget enim porttitor lacinia. Praesent sagittis commodo convallis. Curabitur molestie quis libero eget pulvinar. Nunc malesuada sem purus, non fermentum eros venenatis sed. Vestibulum ullamcorper quam lorem, vitae bibendum nisi efficitur volutpat. Etiam at urna cursus, tempus nibh scelerisque, varius nibh. In sit amet ornare lorem. Vestibulum sit amet tortor at sem elementum pellentesque eget ut dolor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent interdum commodo blandit.</p>
<p>Aliquam tristique, nisi vel tristique tempus, urna sapien venenatis lectus, eu hendrerit dolor mauris sed elit. Duis non leo lacus. Nunc feugiat vestibulum blandit. Morbi pretium sapien ut orci porttitor, a laoreet neque tempor. Aliquam eget ante dui. Nullam imperdiet nulla id auctor cursus. Vestibulum sit amet volutpat ligula. Sed pellentesque pharetra mollis. Donec hendrerit pharetra risus, ut sagittis arcu lobortis id.</p>
</div> <!--card content end-->
</div> <!--div to align to center of screen end-->
</div> <!--modal content end-->
</div>
<!--FIG 2-->
<!--FIG 3-->
<div class="card card-outline-primary p-3 mb-3" style="border-width:15px; height: 500px; background-size:cover; background-position:center; background-image:url('https://dummyimage.com/350/FFF/000000');">
<!--BUTTON TOGGLE-->
<a class="btn btn-secondary w-25 pull-right" data-toggle="collapse" href="#FIG3"><i class="fa-solid fa-magnifying-glass"></i></a>
<!--IMG CREDIT-->
<a class="text-secondary tooltipster" title="IMG_CREDIT" href="#" style="opacity:.6; position: absolute; top:90%;"><i class="fas fa-image"></i></a>
<!--MODAL CONTENT-->
<div class="collapse w-100 h-100 fade p-3" id="FIG3" style="position:absolute; top:0; left:0; background:rgba(0,0,0,0.8); z-index:2;">
<!--div aligns content to center of screen-->
<div class="justify-content-center">
<!--CARD CONTENT-->
<div class="card w-100 p-3" style="height: 425px; overflow-y:auto;">
<!--CLOSE BUTTON-->
<a data-toggle="collapse" href="#FIG3" style="position:absolute; top:10px; right:15px;"><i class="fa-solid fa-xmark"></i></a>
<h1 class="display-4 mb-2 ml-1">HEADER</h1><div class="card mb-2"></div>
<p>Nam vestibulum massa quis varius venenatis. Proin pretium scelerisque tortor. Nulla egestas ultrices arcu id iaculis. Nunc eu hendrerit nisl. Praesent dignissim nisl eget enim porttitor lacinia. Praesent sagittis commodo convallis. Curabitur molestie quis libero eget pulvinar. Nunc malesuada sem purus, non fermentum eros venenatis sed. Vestibulum ullamcorper quam lorem, vitae bibendum nisi efficitur volutpat. Etiam at urna cursus, tempus nibh scelerisque, varius nibh. In sit amet ornare lorem. Vestibulum sit amet tortor at sem elementum pellentesque eget ut dolor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent interdum commodo blandit.</p>
<p>Aliquam tristique, nisi vel tristique tempus, urna sapien venenatis lectus, eu hendrerit dolor mauris sed elit. Duis non leo lacus. Nunc feugiat vestibulum blandit. Morbi pretium sapien ut orci porttitor, a laoreet neque tempor. Aliquam eget ante dui. Nullam imperdiet nulla id auctor cursus. Vestibulum sit amet volutpat ligula. Sed pellentesque pharetra mollis. Donec hendrerit pharetra risus, ut sagittis arcu lobortis id.</p>
</div> <!--card content end-->
</div> <!--div to align to center of screen end-->
</div> <!--modal content end-->
</div>
<!--FIG 3-->
</div>
<!--END OF FIGURES ROW 1-->
<!--FIGURES ROW 1-->
<div class="card-deck">
<!--FIG 4-->
<div class="card card-outline-primary p-3 mb-3" style="border-width:15px; height: 500px; background-size:cover; background-position:center; background-image:url('https://dummyimage.com/350/FFF/000000');">
<!--BUTTON TOGGLE-->
<a class="btn btn-secondary w-25" data-toggle="collapse" href="#FIG4"><i class="fa-solid fa-magnifying-glass"></i></a>
<!--IMG CREDIT-->
<a class="text-secondary tooltipster" title="IMG_CREDIT" href="#" style="opacity:.6; position: absolute; top:90%;"><i class="fas fa-image"></i></a>
<!--MODAL CONTENT-->
<div class="collapse w-100 h-100 fade p-3" id="FIG4" style="position:absolute; top:0; left:0; background:rgba(0,0,0,0.8); z-index:2;">
<!--div aligns content to center of screen-->
<div class="justify-content-center">
<!--CARD CONTENT-->
<div class="card w-100 p-3" style="height: 425px; overflow-y:auto;">
<!--CLOSE BUTTON-->
<a data-toggle="collapse" href="#FIG4" style="position:absolute; top:10px; right:15px;"><i class="fa-solid fa-xmark"></i></a>
<h1 class="display-4 mb-2 ml-1">HEADER</h1><div class="card mb-2"></div>
<p>Nam vestibulum massa quis varius venenatis. Proin pretium scelerisque tortor. Nulla egestas ultrices arcu id iaculis. Nunc eu hendrerit nisl. Praesent dignissim nisl eget enim porttitor lacinia. Praesent sagittis commodo convallis. Curabitur molestie quis libero eget pulvinar. Nunc malesuada sem purus, non fermentum eros venenatis sed. Vestibulum ullamcorper quam lorem, vitae bibendum nisi efficitur volutpat. Etiam at urna cursus, tempus nibh scelerisque, varius nibh. In sit amet ornare lorem. Vestibulum sit amet tortor at sem elementum pellentesque eget ut dolor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent interdum commodo blandit.</p>
<p>Aliquam tristique, nisi vel tristique tempus, urna sapien venenatis lectus, eu hendrerit dolor mauris sed elit. Duis non leo lacus. Nunc feugiat vestibulum blandit. Morbi pretium sapien ut orci porttitor, a laoreet neque tempor. Aliquam eget ante dui. Nullam imperdiet nulla id auctor cursus. Vestibulum sit amet volutpat ligula. Sed pellentesque pharetra mollis. Donec hendrerit pharetra risus, ut sagittis arcu lobortis id.</p>
</div> <!--card content end-->
</div> <!--div to align to center of screen end-->
</div> <!--modal content end-->
</div>
<!--FIG 4-->
<!--FIG 5-->
<div class="card card-outline-primary p-3 mb-3" style="border-width:15px; height: 500px; background-size:cover; background-position:center; background-image:url('https://dummyimage.com/350/FFF/000000');">
<!--BUTTON TOGGLE-->
<a class="btn btn-secondary w-25 pull-right" data-toggle="collapse" href="#FIG5"><i class="fa-solid fa-magnifying-glass"></i></a>
<!--IMG CREDIT-->
<a class="text-secondary tooltipster" title="IMG_CREDIT" href="#" style="opacity:.6; position: absolute; top:90%;"><i class="fas fa-image"></i></a>
<!--MODAL CONTENT-->
<div class="collapse w-100 h-100 fade p-3" id="FIG5" style="position:absolute; top:0; left:0; background:rgba(0,0,0,0.8); z-index:2;">
<!--div aligns content to center of screen-->
<div class="justify-content-center">
<!--CARD CONTENT-->
<div class="card w-100 p-3" style="height: 425px; overflow-y:auto;">
<!--CLOSE BUTTON-->
<a data-toggle="collapse" href="#FIG5" style="position:absolute; top:10px; right:15px;"><i class="fa-solid fa-xmark"></i></a>
<h1 class="display-4 mb-2 ml-1">HEADER</h1><div class="card mb-2"></div>
<p>Nam vestibulum massa quis varius venenatis. Proin pretium scelerisque tortor. Nulla egestas ultrices arcu id iaculis. Nunc eu hendrerit nisl. Praesent dignissim nisl eget enim porttitor lacinia. Praesent sagittis commodo convallis. Curabitur molestie quis libero eget pulvinar. Nunc malesuada sem purus, non fermentum eros venenatis sed. Vestibulum ullamcorper quam lorem, vitae bibendum nisi efficitur volutpat. Etiam at urna cursus, tempus nibh scelerisque, varius nibh. In sit amet ornare lorem. Vestibulum sit amet tortor at sem elementum pellentesque eget ut dolor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent interdum commodo blandit.</p>
<p>Aliquam tristique, nisi vel tristique tempus, urna sapien venenatis lectus, eu hendrerit dolor mauris sed elit. Duis non leo lacus. Nunc feugiat vestibulum blandit. Morbi pretium sapien ut orci porttitor, a laoreet neque tempor. Aliquam eget ante dui. Nullam imperdiet nulla id auctor cursus. Vestibulum sit amet volutpat ligula. Sed pellentesque pharetra mollis. Donec hendrerit pharetra risus, ut sagittis arcu lobortis id.</p>
</div> <!--card content end-->
</div> <!--div to align to center of screen end-->
</div> <!--modal content end-->
</div>
<!--FIG 5-->
<!--FIG 6-->
<div class="card card-outline-primary p-3 mb-3" style="border-width:15px; height: 500px; background-size:cover; background-position:center; background-image:url('https://dummyimage.com/350/FFF/000000');">
<!--BUTTON TOGGLE-->
<a class="btn btn-secondary w-25 pull-right" data-toggle="collapse" href="#FIG6"><i class="fa-solid fa-magnifying-glass"></i></a>
<!--IMG CREDIT-->
<a class="text-secondary tooltipster" title="IMG_CREDIT" href="#" style="opacity:.6; position: absolute; top:90%;"><i class="fas fa-image"></i></a>
<!--MODAL CONTENT-->
<div class="collapse w-100 h-100 fade p-3" id="FIG6" style="position:absolute; top:0; left:0; background:rgba(0,0,0,0.8); z-index:2;">
<!--div aligns content to center of screen-->
<div class="justify-content-center">
<!--CARD CONTENT-->
<div class="card w-100 p-3" style="height: 425px; overflow-y:auto;">
<!--CLOSE BUTTON-->
<a data-toggle="collapse" href="#FIG6" style="position:absolute; top:10px; right:15px;"><i class="fa-solid fa-xmark"></i></a>
<h1 class="display-4 mb-2 ml-1">HEADER</h1><div class="card mb-2"></div>
<p>Nam vestibulum massa quis varius venenatis. Proin pretium scelerisque tortor. Nulla egestas ultrices arcu id iaculis. Nunc eu hendrerit nisl. Praesent dignissim nisl eget enim porttitor lacinia. Praesent sagittis commodo convallis. Curabitur molestie quis libero eget pulvinar. Nunc malesuada sem purus, non fermentum eros venenatis sed. Vestibulum ullamcorper quam lorem, vitae bibendum nisi efficitur volutpat. Etiam at urna cursus, tempus nibh scelerisque, varius nibh. In sit amet ornare lorem. Vestibulum sit amet tortor at sem elementum pellentesque eget ut dolor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent interdum commodo blandit.</p>
<p>Aliquam tristique, nisi vel tristique tempus, urna sapien venenatis lectus, eu hendrerit dolor mauris sed elit. Duis non leo lacus. Nunc feugiat vestibulum blandit. Morbi pretium sapien ut orci porttitor, a laoreet neque tempor. Aliquam eget ante dui. Nullam imperdiet nulla id auctor cursus. Vestibulum sit amet volutpat ligula. Sed pellentesque pharetra mollis. Donec hendrerit pharetra risus, ut sagittis arcu lobortis id.</p>
</div> <!--card content end-->
</div> <!--div to align to center of screen end-->
</div> <!--modal content end-->
</div>
<!--FIG 6-->
</div>
<!--END OF FIGURES ROW 2-->
</div>
<!--END OF KEY FIGURES-->
</div>
<!--END OF TABS-->
<!--CREDIT DO NOT EDIT-->
<div class="card bg-transparent border-0 my-3">
<center>
<a class="btn btn-sm bg-secondary text-light m-1" href="https://toyhou.se/BigGayFish" role="button"><i class="fa-regular fa-copyright"></i> BigGayFish</a>
<a class="btn btn-sm bg-secondary text-light m-1" href="https://toyhou.se/7111301.-snippet-pop-up" role="button"><i class="fa-solid fa-scissors"></i> Code Snippet 1 - Aurorean</a>
<a class="btn btn-sm bg-secondary text-light m-1" href="https://toyhou.se/17058639.-snippet-to-top-bottom" role="button"><i class="fa-solid fa-scissors"></i> Code Snippet 2 - Aurorean</a>
</center>
</div>
<!--CREDIT DO NOT EDIT-->
</div>Copy
<!--WORLD LORE CODE
I never released this previously because it was a complete hodgepodge of a code that I made purely for myself, but I've been meaning to release this after I've labeled everything so here we are. I'm NOT indexing this code because it would take 5000 yrs to do that and because it would seem that most of my followers don't mind having no index according to my polls. As per usual, if you need help don't be afraid to reach out. This was made for a character to be used as a world lore document but you're free to actually use this in TH Worlds themselves, just know that everything is contained singularly into one code rather than it being spread out over pages.
COLOR KEY: #B8000A - Main Accent
#730006 - Secondary Accent (tabs and credits)
#fff - Text on Header/Main Accent
-->
<div class="container-fluid" style="font-size: 13pt;">
<!--TO TOP BUTTON-->
<a class="btn btn-secondary text-muted px-3 py-2 tooltipster" style="position:fixed; bottom:43px; right:3px; z-index:99999;" title="To Top" href="#top">
<i class="fas fa-arrow-up"></i>
</a>
<!--TO BOTTOM BUTTON-->
<a class="text-muted btn btn-secondary px-3 py-2 tooltipster" style="position:fixed; bottom:3px; right:3px; z-index:99999;" title="To Bottom" href="#footer">
<i class="fas fa-arrow-down"></i>
</a>
<!--BANNER-->
<!--background image-->
<div class="card p-3" style="border: #B8000A 15px solid; height: 400px; background-size:cover; background-position:center; background-image:url('https://dummyimage.com/350/FFF/000000');">
<!--IMG CREDIT-->
<a class="text-secondary tooltipster" title="IMG_CREDIT" href="#" style="opacity:.6;"><i class="fas fa-image"></i></a>
</div>
<!--END OF BANNER-->
<!--BUTTONS-->
<div class="card bg-transparent mb-3" style="padding: 5px; border: transparent;">
<ul class="nav nav-pills row no-gutters justify-content-center text-center text-uppercase m-3" id="pills-tab" role="tablist">
<li class="nav-item col mb-2 mx-2">
<a class="nav-link active text-uppercase text-white" style="font-weight: bold; background: #730006;" id="pills-lore-tab" data-toggle="pill" href="#lore" role="tab"> Lore</a>
</li>
<li class="nav-item col mb-2 mx-2">
<a class="nav-link text-white" style="font-weight: bold; background: #730006;" id="pills-society-tab" data-toggle="pill" href="#society" role="tab"> Society</a>
</li>
<li class="nav-item col mb-2 mx-2">
<a class="nav-link text-white" style="font-weight: bold; background: #730006;" id="pills-religion-tab" data-toggle="pill" href="#religion" role="tab"> Religion</a>
</li>
<li class="nav-item col mb-2 mx-2">
<a class="nav-link text-white" style="font-weight: bold; background: #730006;" id="pills-magic-tab" data-toggle="pill" href="#magic" role="tab" >Magic</a>
</li>
<li class="nav-item col mb-2 mx-2">
<a class="nav-link text-white" style="font-weight: bold; background: #730006;" id="pills-map-tab" data-toggle="pill" href="#map" role="tab" >Map</a>
</li>
<li class="nav-item col mb-2 mx-2">
<a class="nav-link text-white" style="font-weight: bold; background: #730006;" id="pills-key-tab" data-toggle="pill" href="#key" role="tab" >Key Figures</a>
</li>
</ul>
</div>
<!--END OF BUTTONS-->
<!--TABS-->
<div class="card tab-content border-0 bg-faded p-3">
<!--MYTHOS/LORE-->
<div class="tab-pane fade active show" id="lore" role="tabpanel">
<!--LORE OVERVIEW-->
<div class="row justify-content-center">
<div class="col-sm-4 mb-3">
<!--SIDE IMAGE-->
<div class="card p-3" style="border: #B8000A 10px solid; height: 400px; background-size: cover; background-position:center; background-image:url('https://dummyimage.com/350/FFF/000000');">
<!--IMG CREDIT-->
<a class="text-secondary tooltipster" title="IMG_CREDIT" href="#" style="opacity:.6;"><i class="fas fa-image"></i></a>
</div>
<!--END OF SIDE IMAGE-->
</div>
<div class="col-lg-8 mb-3">
<!--TITLE-->
<div class="card text-uppercase text-center mb-3" style="background: #B8000A; color: #fff; border: transparent; padding: 5px; letter-spacing: 10px;">
<h1 class="display-4 font-weight-bold">Lore</h1>
</div>
<!--END OF TITLE-->
<div class="card-text p-3" style="border: 3px solid; height: 330px; overflow-y:auto; border-radius:5px;">
<p>Overview here. 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>Molestie ac feugiat sed lectus vestibulum. Praesent semper feugiat nibh sed. Elementum nisi quis eleifend quam adipiscing vitae proin. Blandit volutpat maecenas volutpat blandit. In egestas erat imperdiet sed. Cursus sit amet dictum sit amet justo donec enim. Sagittis purus sit amet volutpat consequat. Aliquam vestibulum morbi blandit cursus risus at ultrices mi. Placerat vestibulum lectus mauris ultrices eros. Pulvinar sapien et ligula ullamcorper malesuada. Orci ac auctor augue mauris augue neque gravida. Ullamcorper eget nulla facilisi etiam dignissim diam quis. Id volutpat lacus laoreet non curabitur gravida. Diam donec adipiscing tristique risus nec feugiat in fermentum posuere. Sapien et ligula ullamcorper malesuada. Tortor consequat id porta nibh venenatis. In ante metus dictum at tempor. Rhoncus urna neque viverra justo nec ultrices dui.</p>
</div>
</div>
</div>
<!--END OF LORE OVERVIEW-->
<!--TITLE-->
<div class="card text-uppercase text-center mb-3" style="background: #B8000A; color: #fff; border: transparent; padding: 5px; letter-spacing: 10px;">
<h1 class="display-4 text-light font-weight-bold">Mythos</h1>
</div>
<!--END OF TITLE-->
<!--MYTHOS SECTION-->
<div class="card-text p-3 mb-3" style="border: 3px solid; height: 400px; overflow-y:auto; border-radius:5px;">
<!--SIDE IMAGE-->
<div class="card pull-right m-3 p-3 hidden-sm-down" style="border: #B8000A 10px solid; height: 300px; width: 300px; background-size:cover; background-position:center; background-image:url('https://dummyimage.com/350/FFF/000000');">
<!--IMG CREDIT-->
<a class="text-secondary tooltipster" title="IMG_CREDIT" href="#" style="opacity:.6;"><i class="fas fa-image"></i></a>
</div>
<!--END OF SIDE IMAGE-->
<p>Mythos explanation here.</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>Molestie ac feugiat sed lectus vestibulum. Praesent semper feugiat nibh sed. Elementum nisi quis eleifend quam adipiscing vitae proin. Blandit volutpat maecenas volutpat blandit. In egestas erat imperdiet sed. Cursus sit amet dictum sit amet justo donec enim. Sagittis purus sit amet volutpat consequat. Aliquam vestibulum morbi blandit cursus risus at ultrices mi. Placerat vestibulum lectus mauris ultrices eros. Pulvinar sapien et ligula ullamcorper malesuada. Orci ac auctor augue mauris augue neque gravida. Ullamcorper eget nulla facilisi etiam dignissim diam quis. Id volutpat lacus laoreet non curabitur gravida. Diam donec adipiscing tristique risus nec feugiat in fermentum posuere. Sapien et ligula ullamcorper malesuada. Tortor consequat id porta nibh venenatis. In ante metus dictum at tempor. Rhoncus urna neque viverra justo nec ultrices dui.</p>
<p>Praesent quam diam, ullamcorper quis nulla sit amet, consequat porta leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget libero nec orci posuere molestie at a ligula. Morbi interdum eget justo a auctor. In bibendum suscipit arcu sed pulvinar. Mauris viverra eget dui eu gravida. Aenean laoreet augue ut nisi lacinia sagittis. Nulla ut velit dolor. Etiam finibus lorem vitae magna interdum varius.</p>
</div>
<!--END OF MYTHOS SECTION-->
<!--MOODBOARD SECTION-->
<div class="row justify-content-center">
<div class="col-sm mb-3">
<!--SIDE IMAGE-->
<div class="card p-3" style="border: #B8000A 10px solid; height: 300px; background-size:cover; background-position:center; background-image:url('https://dummyimage.com/350/FFF/000000');">
<!--IMG CREDIT-->
<a class="text-secondary tooltipster" title="IMG_CREDIT" href="#" style="opacity:.6;"><i class="fas fa-image"></i></a>
</div>
<!--END OF SIDE IMAGE-->
</div>
<div class="col-sm mb-3">
<!--SIDE IMAGE-->
<div class="card p-3" style="border: #B8000A 10px solid; height: 300px; background-size:cover; background-position:center; background-image:url('https://dummyimage.com/350/FFF/000000');">
<!--IMG CREDIT-->
<a class="text-secondary tooltipster" title="IMG_CREDIT" href="#" style="opacity:.6;"><i class="fas fa-image"></i></a>
</div>
<!--END OF SIDE IMAGE-->
</div>
<div class="col-sm mb-3">
<!--SIDE IMAGE-->
<div class="card p-3" style="border: #B8000A 10px solid; height: 300px; background-size:cover; background-position:center; background-image:url('https://dummyimage.com/350/FFF/000000');">
<!--IMG CREDIT-->
<a class="text-secondary tooltipster" title="IMG_CREDIT" href="#" style="opacity:.6;"><i class="fas fa-image"></i></a>
</div>
<!--END OF SIDE IMAGE-->
</div>
<div class="col-sm mb-3">
<!--SIDE IMAGE-->
<div class="card p-3" style="border: #B8000A 10px solid; height: 300px; background-size:cover; background-position:center; background-image:url('https://dummyimage.com/350/FFF/000000');">
<!--IMG CREDIT-->
<a class="text-secondary tooltipster" title="IMG_CREDIT" href="#" style="opacity:.6;"><i class="fas fa-image"></i></a>
</div>
<!--END OF SIDE IMAGE-->
</div>
</div>
<!--END OF MOODBOARD SECTION-->
<!--TITLE-->
<div class="card text-uppercase text-center mb-3" style="background: #B8000A; color: #fff; border: transparent; padding: 5px; letter-spacing: 10px;">
<h1 class="display-4 text-light font-weight-bold">History</h1>
</div>
<!--END OF TITLE-->
<!--HISTORY SECTION-->
<div class="card-text p-3 mb-3" style="border: 3px solid; height: 400px; overflow-y:auto; border-radius:5px;">
<!--SIDE IMAGE-->
<div class="card pull-left m-3 p-3 hidden-sm-down" style="border: #B8000A 10px solid; height: 300px; width: 300px; background-size:cover; background-position:center; background-image:url('https://dummyimage.com/350/FFF/000000');">
<!--IMG CREDIT-->
<a class="text-secondary tooltipster" title="IMG_CREDIT" href="#" style="opacity:.6;"><i class="fas fa-image"></i></a>
</div>
<!--END OF SIDE IMAGE-->
<p>History explanation here.</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>Molestie ac feugiat sed lectus vestibulum. Praesent semper feugiat nibh sed. Elementum nisi quis eleifend quam adipiscing vitae proin. Blandit volutpat maecenas volutpat blandit. In egestas erat imperdiet sed. Cursus sit amet dictum sit amet justo donec enim. Sagittis purus sit amet volutpat consequat. Aliquam vestibulum morbi blandit cursus risus at ultrices mi. Placerat vestibulum lectus mauris ultrices eros. Pulvinar sapien et ligula ullamcorper malesuada. Orci ac auctor augue mauris augue neque gravida. Ullamcorper eget nulla facilisi etiam dignissim diam quis. Id volutpat lacus laoreet non curabitur gravida. Diam donec adipiscing tristique risus nec feugiat in fermentum posuere. Sapien et ligula ullamcorper malesuada. Tortor consequat id porta nibh venenatis. In ante metus dictum at tempor. Rhoncus urna neque viverra justo nec ultrices dui.</p>
<p>Praesent quam diam, ullamcorper quis nulla sit amet, consequat porta leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget libero nec orci posuere molestie at a ligula. Morbi interdum eget justo a auctor. In bibendum suscipit arcu sed pulvinar. Mauris viverra eget dui eu gravida. Aenean laoreet augue ut nisi lacinia sagittis. Nulla ut velit dolor. Etiam finibus lorem vitae magna interdum varius.</p>
</div>
<!--END OF HISTORY SECTION-->
</div>
<!--END OF MYTHOS/LORE-->
<!--SOCIETY-->
<div class="tab-pane fade show" id="society" role="tabpanel">
<!--OVERVIEW-->
<div class="row justify-content-center">
<div class="col-lg-8 mb-3 order-md-1 order-2">
<!--TITLE-->
<div class="card text-uppercase text-center mb-3" style="background: #B8000A; color: #fff; border: transparent; padding: 5px; letter-spacing: 10px;">
<h1 class="display-4 text-light font-weight-bold">Society</h1>
</div>
<!--END OF TITLE-->
<div class="card-text p-3" style="border: 3px solid; height: 330px; overflow-y:auto; border-radius:5px;">
<p>Overview here. 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>Molestie ac feugiat sed lectus vestibulum. Praesent semper feugiat nibh sed. Elementum nisi quis eleifend quam adipiscing vitae proin. Blandit volutpat maecenas volutpat blandit. In egestas erat imperdiet sed. Cursus sit amet dictum sit amet justo donec enim. Sagittis purus sit amet volutpat consequat. Aliquam vestibulum morbi blandit cursus risus at ultrices mi. Placerat vestibulum lectus mauris ultrices eros. Pulvinar sapien et ligula ullamcorper malesuada. Orci ac auctor augue mauris augue neque gravida. Ullamcorper eget nulla facilisi etiam dignissim diam quis. Id volutpat lacus laoreet non curabitur gravida. Diam donec adipiscing tristique risus nec feugiat in fermentum posuere. Sapien et ligula ullamcorper malesuada. Tortor consequat id porta nibh venenatis. In ante metus dictum at tempor. Rhoncus urna neque viverra justo nec ultrices dui.</p>
</div>
</div>
<div class="col-sm-4 mb-3 order-sm-1">
<!--SIDE IMAGE-->
<div class="card p-3" style="border: #B8000A 10px solid; height: 400px; background-size:cover; background-position:center; background-image:url('https://dummyimage.com/350/FFF/000000');">
<!--IMG CREDIT-->
<a class="text-secondary tooltipster" title="IMG_CREDIT" href="#" style="opacity:.6;"><i class="fas fa-image"></i></a>
</div>
<!--END OF SIDE IMAGE-->
</div>
</div>
<!--END OF OVERVIEW-->
<!--TITLE-->
<div class="card text-uppercase text-center mb-3" style="background: #B8000A; color: #fff; border: transparent; padding: 5px; letter-spacing: 10px;">
<h1 class="display-4 text-light font-weight-bold">Language</h1>
</div>
<!--END OF TITLE-->
<!--LANGUAGE SECTION-->
<div class="card-text p-3 mb-3" style="border: 3px solid; height: 400px; overflow-y:auto; border-radius:5px;">
<!--SIDE IMAGE-->
<div class="card pull-left m-3 p-3 hidden-sm-down" style="border: #B8000A 10px solid; height: 300px; width: 300px; background-size:cover; background-position:center; background-image:url('https://dummyimage.com/350/FFF/000000');">
<!--IMG CREDIT-->
<a class="text-secondary tooltipster" title="IMG_CREDIT" href="#" style="opacity:.6;"><i class="fas fa-image"></i></a>
</div>
<!--END OF SIDE IMAGE-->
<p>Language explanation here.</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>Molestie ac feugiat sed lectus vestibulum. Praesent semper feugiat nibh sed. Elementum nisi quis eleifend quam adipiscing vitae proin. Blandit volutpat maecenas volutpat blandit. In egestas erat imperdiet sed. Cursus sit amet dictum sit amet justo donec enim. Sagittis purus sit amet volutpat consequat. Aliquam vestibulum morbi blandit cursus risus at ultrices mi. Placerat vestibulum lectus mauris ultrices eros. Pulvinar sapien et ligula ullamcorper malesuada. Orci ac auctor augue mauris augue neque gravida. Ullamcorper eget nulla facilisi etiam dignissim diam quis. Id volutpat lacus laoreet non curabitur gravida. Diam donec adipiscing tristique risus nec feugiat in fermentum posuere. Sapien et ligula ullamcorper malesuada. Tortor consequat id porta nibh venenatis. In ante metus dictum at tempor. Rhoncus urna neque viverra justo nec ultrices dui.</p>
<p>Praesent quam diam, ullamcorper quis nulla sit amet, consequat porta leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget libero nec orci posuere molestie at a ligula. Morbi interdum eget justo a auctor. In bibendum suscipit arcu sed pulvinar. Mauris viverra eget dui eu gravida. Aenean laoreet augue ut nisi lacinia sagittis. Nulla ut velit dolor. Etiam finibus lorem vitae magna interdum varius.</p>
</div>
<!--END OF LANGUAGE SECTION-->
<!--TITLE-->
<div class="card text-uppercase text-center mb-3" style="background: #B8000A; color: #fff; border: transparent; padding: 5px; letter-spacing: 10px;">
<h1 class="display-4 text-light font-weight-bold">Fashion</h1>
</div>
<!--END OF TITLE-->
<!--FASHION SECTION-->
<div class="card-text p-3 mb-3" style="border: 3px solid; height: 300px; overflow-y:auto; border-radius:5px;">
<p>Fashion explanation here.</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>Molestie ac feugiat sed lectus vestibulum. Praesent semper feugiat nibh sed. Elementum nisi quis eleifend quam adipiscing vitae proin. Blandit volutpat maecenas volutpat blandit. In egestas erat imperdiet sed. Cursus sit amet dictum sit amet justo donec enim. Sagittis purus sit amet volutpat consequat. Aliquam vestibulum morbi blandit cursus risus at ultrices mi. Placerat vestibulum lectus mauris ultrices eros. Pulvinar sapien et ligula ullamcorper malesuada. Orci ac auctor augue mauris augue neque gravida. Ullamcorper eget nulla facilisi etiam dignissim diam quis. Id volutpat lacus laoreet non curabitur gravida. Diam donec adipiscing tristique risus nec feugiat in fermentum posuere. Sapien et ligula ullamcorper malesuada. Tortor consequat id porta nibh venenatis. In ante metus dictum at tempor. Rhoncus urna neque viverra justo nec ultrices dui.</p>
<p>Praesent quam diam, ullamcorper quis nulla sit amet, consequat porta leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget libero nec orci posuere molestie at a ligula. Morbi interdum eget justo a auctor. In bibendum suscipit arcu sed pulvinar. Mauris viverra eget dui eu gravida. Aenean laoreet augue ut nisi lacinia sagittis. Nulla ut velit dolor. Etiam finibus lorem vitae magna interdum varius.</p>
</div>
<!--END OF FASHION SECTION-->
<!--OUTFITS-->
<div class="card-deck">
<!--ITEM 1-->
<div class="card p-3 mb-3" style="border: #B8000A 15px solid; height: 500px; background-size:cover; background-position:center; background-image:url('https://dummyimage.com/350/FFF/000000');">
<!--BUTTON TOGGLE-->
<a class="btn btn-secondary w-25 pull-right" data-toggle="collapse" href="#FIT1"><i class="fa-solid fa-magnifying-glass"></i></a>
<!--IMG CREDIT-->
<a class="text-secondary tooltipster" title="IMG_CREDIT" href="#" style="opacity:.6; position: absolute; top:90%;"><i class="fas fa-image"></i></a>
<!--MODAL CONTENT-->
<div class="collapse w-100 h-100 fade p-3" id="FIT1" style="position:absolute; top:0; left:0; background:rgba(0,0,0,0.8); z-index:2;">
<!--div aligns content to center of screen-->
<div class="justify-content-center">
<!--CARD CONTENT-->
<div class="card w-100 p-3" style="height: 425px; overflow-y:auto;">
<!--CLOSE BUTTON-->
<a data-toggle="collapse" href="#FIT1" style="position:absolute; top:10px; right:15px;"><i class="fa-solid fa-xmark"></i></a>
<h1 class="display-4 mb-2 ml-1">HEADER</h1><div class="card mb-2"></div>
<p>Nam vestibulum massa quis varius venenatis. Proin pretium scelerisque tortor. Nulla egestas ultrices arcu id iaculis. Nunc eu hendrerit nisl. Praesent dignissim nisl eget enim porttitor lacinia. Praesent sagittis commodo convallis. Curabitur molestie quis libero eget pulvinar. Nunc malesuada sem purus, non fermentum eros venenatis sed. Vestibulum ullamcorper quam lorem, vitae bibendum nisi efficitur volutpat. Etiam at urna cursus, tempus nibh scelerisque, varius nibh. In sit amet ornare lorem. Vestibulum sit amet tortor at sem elementum pellentesque eget ut dolor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent interdum commodo blandit.</p>
<p>Aliquam tristique, nisi vel tristique tempus, urna sapien venenatis lectus, eu hendrerit dolor mauris sed elit. Duis non leo lacus. Nunc feugiat vestibulum blandit. Morbi pretium sapien ut orci porttitor, a laoreet neque tempor. Aliquam eget ante dui. Nullam imperdiet nulla id auctor cursus. Vestibulum sit amet volutpat ligula. Sed pellentesque pharetra mollis. Donec hendrerit pharetra risus, ut sagittis arcu lobortis id.</p>
</div> <!--card content end-->
</div> <!--div to align to center of screen end-->
</div> <!--modal content end-->
</div>
<!--ITEM 1-->
<!--ITEM 2-->
<div class="card p-3 mb-3" style="border: #B8000A 15px solid; height: 500px; background-size:cover; background-position:center; background-image:url('https://dummyimage.com/350/FFF/000000');">
<!--BUTTON TOGGLE-->
<a class="btn btn-secondary w-25 pull-right" data-toggle="collapse" href="#FIT2"><i class="fa-solid fa-magnifying-glass"></i></a>
<!--IMG CREDIT-->
<a class="text-secondary tooltipster" title="IMG_CREDIT" href="#" style="opacity:.6; position: absolute; top:90%;"><i class="fas fa-image"></i></a>
<!--MODAL CONTENT-->
<div class="collapse w-100 h-100 fade p-3" id="FIT2" style="position:absolute; top:0; left:0; background:rgba(0,0,0,0.8); z-index:2;">
<!--div aligns content to center of screen-->
<div class="justify-content-center">
<!--CARD CONTENT-->
<div class="card w-100 p-3" style="height: 425px; overflow-y:auto;">
<!--CLOSE BUTTON-->
<a data-toggle="collapse" href="#FIT2" style="position:absolute; top:10px; right:15px;"><i class="fa-solid fa-xmark"></i></a>
<h1 class="display-4 mb-2 ml-1">HEADER</h1><div class="card mb-2"></div>
<p>Nam vestibulum massa quis varius venenatis. Proin pretium scelerisque tortor. Nulla egestas ultrices arcu id iaculis. Nunc eu hendrerit nisl. Praesent dignissim nisl eget enim porttitor lacinia. Praesent sagittis commodo convallis. Curabitur molestie quis libero eget pulvinar. Nunc malesuada sem purus, non fermentum eros venenatis sed. Vestibulum ullamcorper quam lorem, vitae bibendum nisi efficitur volutpat. Etiam at urna cursus, tempus nibh scelerisque, varius nibh. In sit amet ornare lorem. Vestibulum sit amet tortor at sem elementum pellentesque eget ut dolor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent interdum commodo blandit.</p>
<p>Aliquam tristique, nisi vel tristique tempus, urna sapien venenatis lectus, eu hendrerit dolor mauris sed elit. Duis non leo lacus. Nunc feugiat vestibulum blandit. Morbi pretium sapien ut orci porttitor, a laoreet neque tempor. Aliquam eget ante dui. Nullam imperdiet nulla id auctor cursus. Vestibulum sit amet volutpat ligula. Sed pellentesque pharetra mollis. Donec hendrerit pharetra risus, ut sagittis arcu lobortis id.</p>
</div> <!--card content end-->
</div> <!--div to align to center of screen end-->
</div> <!--modal content end-->
</div>
<!--ITEM 2-->
<!--ITEM 3-->
<div class="card p-3 mb-3" style="border: #B8000A 15px solid; height: 500px; background-size:cover; background-position:center; background-image:url('https://dummyimage.com/350/FFF/000000');">
<!--BUTTON TOGGLE-->
<a class="btn btn-secondary w-25 pull-right" data-toggle="collapse" href="#FIT3"><i class="fa-solid fa-magnifying-glass"></i></a>
<!--IMG CREDIT-->
<a class="text-secondary tooltipster" title="IMG_CREDIT" href="#" style="opacity:.6; position: absolute; top:90%;"><i class="fas fa-image"></i></a>
<!--MODAL CONTENT-->
<div class="collapse w-100 h-100 fade p-3" id="FIT3" style="position:absolute; top:0; left:0; background:rgba(0,0,0,0.8); z-index:2;">
<!--div aligns content to center of screen-->
<div class="justify-content-center">
<!--CARD CONTENT-->
<div class="card w-100 p-3" style="height: 425px; overflow-y:auto;">
<!--CLOSE BUTTON-->
<a data-toggle="collapse" href="#FIT3" style="position:absolute; top:10px; right:15px;"><i class="fa-solid fa-xmark"></i></a>
<h1 class="display-4 mb-2 ml-1">HEADER</h1><div class="card mb-2"></div>
<p>Nam vestibulum massa quis varius venenatis. Proin pretium scelerisque tortor. Nulla egestas ultrices arcu id iaculis. Nunc eu hendrerit nisl. Praesent dignissim nisl eget enim porttitor lacinia. Praesent sagittis commodo convallis. Curabitur molestie quis libero eget pulvinar. Nunc malesuada sem purus, non fermentum eros venenatis sed. Vestibulum ullamcorper quam lorem, vitae bibendum nisi efficitur volutpat. Etiam at urna cursus, tempus nibh scelerisque, varius nibh. In sit amet ornare lorem. Vestibulum sit amet tortor at sem elementum pellentesque eget ut dolor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent interdum commodo blandit.</p>
<p>Aliquam tristique, nisi vel tristique tempus, urna sapien venenatis lectus, eu hendrerit dolor mauris sed elit. Duis non leo lacus. Nunc feugiat vestibulum blandit. Morbi pretium sapien ut orci porttitor, a laoreet neque tempor. Aliquam eget ante dui. Nullam imperdiet nulla id auctor cursus. Vestibulum sit amet volutpat ligula. Sed pellentesque pharetra mollis. Donec hendrerit pharetra risus, ut sagittis arcu lobortis id.</p>
</div> <!--card content end-->
</div> <!--div to align to center of screen end-->
</div> <!--modal content end-->
</div>
<!--ITEM 3-->
</div>
<!--END OF OUTFITS-->
<!--TITLE-->
<div class="card text-uppercase text-center mb-3" style="background: #B8000A; color: #fff; border: transparent; padding: 5px; letter-spacing: 10px;">
<h1 class="display-4 text-light font-weight-bold">Food</h1>
</div>
<!--END OF TITLE-->
<!--FOOD SECTION-->
<div class="card-text p-3 mb-3" style="border: 3px solid; height: 400px; overflow-y:auto; border-radius:5px;">
<!--SIDE IMAGE-->
<div class="card pull-right m-3 p-3 hidden-sm-down" style="border: #B8000A 10px solid; height: 300px; width: 300px; background-size:cover; background-position:center; background-image:url('https://dummyimage.com/350/FFF/000000');">
<!--IMG CREDIT-->
<a class="text-secondary tooltipster" title="IMG_CREDIT" href="#" style="opacity:.6;"><i class="fas fa-image"></i></a>
</div>
<!--END OF SIDE IMAGE-->
<p>Ressipy go here.</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>Molestie ac feugiat sed lectus vestibulum. Praesent semper feugiat nibh sed. Elementum nisi quis eleifend quam adipiscing vitae proin. Blandit volutpat maecenas volutpat blandit. In egestas erat imperdiet sed. Cursus sit amet dictum sit amet justo donec enim. Sagittis purus sit amet volutpat consequat. Aliquam vestibulum morbi blandit cursus risus at ultrices mi. Placerat vestibulum lectus mauris ultrices eros. Pulvinar sapien et ligula ullamcorper malesuada. Orci ac auctor augue mauris augue neque gravida. Ullamcorper eget nulla facilisi etiam dignissim diam quis. Id volutpat lacus laoreet non curabitur gravida. Diam donec adipiscing tristique risus nec feugiat in fermentum posuere. Sapien et ligula ullamcorper malesuada. Tortor consequat id porta nibh venenatis. In ante metus dictum at tempor. Rhoncus urna neque viverra justo nec ultrices dui.</p>
<p>Praesent quam diam, ullamcorper quis nulla sit amet, consequat porta leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget libero nec orci posuere molestie at a ligula. Morbi interdum eget justo a auctor. In bibendum suscipit arcu sed pulvinar. Mauris viverra eget dui eu gravida. Aenean laoreet augue ut nisi lacinia sagittis. Nulla ut velit dolor. Etiam finibus lorem vitae magna interdum varius.</p>
</div>
<!--END OF FOOD SECTION-->
<!--TITLE-->
<div class="card text-uppercase text-center mb-3" style="background: #B8000A; color: #fff; border: transparent; padding: 5px; letter-spacing: 10px;">
<h1 class="display-4 text-light font-weight-bold">Currency</h1>
</div>
<!--END OF TITLE-->
<!--CURRENCY-->
<div class="card-deck">
<!--ITEM 1-->
<div class="card p-3 mb-3" style="border: #B8000A 15px solid; height: 500px; background-size:cover; background-position:center; background-image:url('https://dummyimage.com/350/FFF/000000');">
<!--BUTTON TOGGLE-->
<a class="btn btn-secondary w-25" data-toggle="collapse" href="#COIN1"><i class="fa-solid fa-magnifying-glass"></i></a>
<!--IMG CREDIT-->
<a class="text-secondary tooltipster" title="IMG_CREDIT" href="#" style="opacity:.6; position: absolute; top:90%;"><i class="fas fa-image"></i></a>
<!--MODAL CONTENT-->
<div class="collapse w-100 h-100 fade p-3" id="COIN1" style="position:absolute; top:0; left:0; background:rgba(0,0,0,0.8); z-index:2;">
<!--div aligns content to center of screen-->
<div class="justify-content-center">
<!--CARD CONTENT-->
<div class="card w-100 p-3" style="height: 425px; overflow-y:auto;">
<!--CLOSE BUTTON-->
<a data-toggle="collapse" href="#COIN1" style="position:absolute; top:10px; right:15px;"><i class="fa-solid fa-xmark"></i></a>
<h1 class="display-4 mb-2 ml-1">HEADER</h1><div class="card mb-2"></div>
<p>Nam vestibulum massa quis varius venenatis. Proin pretium scelerisque tortor. Nulla egestas ultrices arcu id iaculis. Nunc eu hendrerit nisl. Praesent dignissim nisl eget enim porttitor lacinia. Praesent sagittis commodo convallis. Curabitur molestie quis libero eget pulvinar. Nunc malesuada sem purus, non fermentum eros venenatis sed. Vestibulum ullamcorper quam lorem, vitae bibendum nisi efficitur volutpat. Etiam at urna cursus, tempus nibh scelerisque, varius nibh. In sit amet ornare lorem. Vestibulum sit amet tortor at sem elementum pellentesque eget ut dolor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent interdum commodo blandit.</p>
<p>Aliquam tristique, nisi vel tristique tempus, urna sapien venenatis lectus, eu hendrerit dolor mauris sed elit. Duis non leo lacus. Nunc feugiat vestibulum blandit. Morbi pretium sapien ut orci porttitor, a laoreet neque tempor. Aliquam eget ante dui. Nullam imperdiet nulla id auctor cursus. Vestibulum sit amet volutpat ligula. Sed pellentesque pharetra mollis. Donec hendrerit pharetra risus, ut sagittis arcu lobortis id.</p>
</div> <!--card content end-->
</div> <!--div to align to center of screen end-->
</div> <!--modal content end-->
</div>
<!--ITEM 1-->
<!--ITEM 2-->
<div class="card p-3 mb-3" style="border: #B8000A 15px solid; height: 500px; background-size:cover; background-position:center; background-image:url('https://dummyimage.com/350/FFF/000000');">
<!--BUTTON TOGGLE-->
<a class="btn btn-secondary w-25 pull-right" data-toggle="collapse" href="#COIN2"><i class="fa-solid fa-magnifying-glass"></i></a>
<!--IMG CREDIT-->
<a class="text-secondary tooltipster" title="IMG_CREDIT" href="#" style="opacity:.6; position: absolute; top:90%;"><i class="fas fa-image"></i></a>
<!--MODAL CONTENT-->
<div class="collapse w-100 h-100 fade p-3" id="COIN2" style="position:absolute; top:0; left:0; background:rgba(0,0,0,0.8); z-index:2;">
<!--div aligns content to center of screen-->
<div class="justify-content-center">
<!--CARD CONTENT-->
<div class="card w-100 p-3" style="height: 425px; overflow-y:auto;">
<!--CLOSE BUTTON-->
<a data-toggle="collapse" href="#COIN2" style="position:absolute; top:10px; right:15px;"><i class="fa-solid fa-xmark"></i></a>
<h1 class="display-4 mb-2 ml-1">HEADER</h1><div class="card mb-2"></div>
<p>Nam vestibulum massa quis varius venenatis. Proin pretium scelerisque tortor. Nulla egestas ultrices arcu id iaculis. Nunc eu hendrerit nisl. Praesent dignissim nisl eget enim porttitor lacinia. Praesent sagittis commodo convallis. Curabitur molestie quis libero eget pulvinar. Nunc malesuada sem purus, non fermentum eros venenatis sed. Vestibulum ullamcorper quam lorem, vitae bibendum nisi efficitur volutpat. Etiam at urna cursus, tempus nibh scelerisque, varius nibh. In sit amet ornare lorem. Vestibulum sit amet tortor at sem elementum pellentesque eget ut dolor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent interdum commodo blandit.</p>
<p>Aliquam tristique, nisi vel tristique tempus, urna sapien venenatis lectus, eu hendrerit dolor mauris sed elit. Duis non leo lacus. Nunc feugiat vestibulum blandit. Morbi pretium sapien ut orci porttitor, a laoreet neque tempor. Aliquam eget ante dui. Nullam imperdiet nulla id auctor cursus. Vestibulum sit amet volutpat ligula. Sed pellentesque pharetra mollis. Donec hendrerit pharetra risus, ut sagittis arcu lobortis id.</p>
</div> <!--card content end-->
</div> <!--div to align to center of screen end-->
</div> <!--modal content end-->
</div>
<!--ITEM 2-->
<!--ITEM 3-->
<div class="card p-3 mb-3" style="border: #B8000A 15px solid; height: 500px; background-size:cover; background-position:center; background-image:url('https://dummyimage.com/350/FFF/000000');">
<!--BUTTON TOGGLE-->
<a class="btn btn-secondary w-25 pull-right" data-toggle="collapse" href="#COIN3"><i class="fa-solid fa-magnifying-glass"></i></a>
<!--IMG CREDIT-->
<a class="text-secondary tooltipster" title="IMG_CREDIT" href="#" style="opacity:.6; position: absolute; top:90%;"><i class="fas fa-image"></i></a>
<!--MODAL CONTENT-->
<div class="collapse w-100 h-100 fade p-3" id="COIN3" style="position:absolute; top:0; left:0; background:rgba(0,0,0,0.8); z-index:2;">
<!--div aligns content to center of screen-->
<div class="justify-content-center">
<!--CARD CONTENT-->
<div class="card w-100 p-3" style="height: 425px; overflow-y:auto;">
<!--CLOSE BUTTON-->
<a data-toggle="collapse" href="#COIN3" style="position:absolute; top:10px; right:15px;"><i class="fa-solid fa-xmark"></i></a>
<h1 class="display-4 mb-2 ml-1">HEADER</h1><div class="card mb-2"></div>
<p>Nam vestibulum massa quis varius venenatis. Proin pretium scelerisque tortor. Nulla egestas ultrices arcu id iaculis. Nunc eu hendrerit nisl. Praesent dignissim nisl eget enim porttitor lacinia. Praesent sagittis commodo convallis. Curabitur molestie quis libero eget pulvinar. Nunc malesuada sem purus, non fermentum eros venenatis sed. Vestibulum ullamcorper quam lorem, vitae bibendum nisi efficitur volutpat. Etiam at urna cursus, tempus nibh scelerisque, varius nibh. In sit amet ornare lorem. Vestibulum sit amet tortor at sem elementum pellentesque eget ut dolor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent interdum commodo blandit.</p>
<p>Aliquam tristique, nisi vel tristique tempus, urna sapien venenatis lectus, eu hendrerit dolor mauris sed elit. Duis non leo lacus. Nunc feugiat vestibulum blandit. Morbi pretium sapien ut orci porttitor, a laoreet neque tempor. Aliquam eget ante dui. Nullam imperdiet nulla id auctor cursus. Vestibulum sit amet volutpat ligula. Sed pellentesque pharetra mollis. Donec hendrerit pharetra risus, ut sagittis arcu lobortis id.</p>
</div> <!--card content end-->
</div> <!--div to align to center of screen end-->
</div> <!--modal content end-->
</div>
<!--ITEM 3-->
</div>
<!--END OF CURRENCY-->
</div>
<!--END OF SOCIETY-->
<!--RELIGION-->
<div class="tab-pane fade show" id="religion" role="tabpanel">
<!--OVERVIEW-->
<div class="row justify-content-center">
<div class="col-sm-4 mb-3">
<!--SIDE IMAGE-->
<div class="card p-3" style="border: #B8000A 10px solid; height: 400px; background-size:cover; background-position:center; background-image:url('https://dummyimage.com/350/FFF/000000');">
<!--IMG CREDIT-->
<a class="text-secondary tooltipster" title="IMG_CREDIT" href="#" style="opacity:.6;"><i class="fas fa-image"></i></a>
</div>
<!--END OF SIDE IMAGE-->
</div>
<div class="col-lg-8 mb-3">
<!--TITLE-->
<div class="card text-uppercase text-center mb-3" style="background: #B8000A; color: #fff; border: transparent; padding: 5px; letter-spacing: 10px;">
<h1 class="display-4 text-light font-weight-bold">Religion</h1>
</div>
<!--END OF TITLE-->
<div class="card-text p-3" style="border: 3px solid; height: 330px; overflow-y:auto; border-radius:5px;">
<p>Overview here. 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>Molestie ac feugiat sed lectus vestibulum. Praesent semper feugiat nibh sed. Elementum nisi quis eleifend quam adipiscing vitae proin. Blandit volutpat maecenas volutpat blandit. In egestas erat imperdiet sed. Cursus sit amet dictum sit amet justo donec enim. Sagittis purus sit amet volutpat consequat. Aliquam vestibulum morbi blandit cursus risus at ultrices mi. Placerat vestibulum lectus mauris ultrices eros. Pulvinar sapien et ligula ullamcorper malesuada. Orci ac auctor augue mauris augue neque gravida. Ullamcorper eget nulla facilisi etiam dignissim diam quis. Id volutpat lacus laoreet non curabitur gravida. Diam donec adipiscing tristique risus nec feugiat in fermentum posuere. Sapien et ligula ullamcorper malesuada. Tortor consequat id porta nibh venenatis. In ante metus dictum at tempor. Rhoncus urna neque viverra justo nec ultrices dui.</p>
</div>
</div>
</div>
<!--END OF OVERVIEW-->
<!--TITLE-->
<div class="card text-uppercase text-center mb-3" style="background: #B8000A; color: #fff; border: transparent; padding: 5px; letter-spacing: 10px;">
<h1 class="display-4 text-light font-weight-bold">Gods</h1>
</div>
<!--END OF TITLE-->
<!--GOD 1-->
<div class="row justify-content-center">
<div class="col-lg-8 mb-3 order-md-1 order-2">
<!--TITLE-->
<div class="card text-uppercase text-center mb-3" style="background: #B8000A; color: #fff; border: transparent; padding: 5px; letter-spacing: 10px;">
<h1 class="display-4 text-light font-weight-bold">God_Name</h1>
</div>
<!--END OF TITLE-->
<div class="card-text p-3" style="border: 3px solid; height: 330px; overflow-y:auto; border-radius:5px;">
<p>Info about this god here. 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>Molestie ac feugiat sed lectus vestibulum. Praesent semper feugiat nibh sed. Elementum nisi quis eleifend quam adipiscing vitae proin. Blandit volutpat maecenas volutpat blandit. In egestas erat imperdiet sed. Cursus sit amet dictum sit amet justo donec enim. Sagittis purus sit amet volutpat consequat. Aliquam vestibulum morbi blandit cursus risus at ultrices mi. Placerat vestibulum lectus mauris ultrices eros. Pulvinar sapien et ligula ullamcorper malesuada. Orci ac auctor augue mauris augue neque gravida. Ullamcorper eget nulla facilisi etiam dignissim diam quis. Id volutpat lacus laoreet non curabitur gravida. Diam donec adipiscing tristique risus nec feugiat in fermentum posuere. Sapien et ligula ullamcorper malesuada. Tortor consequat id porta nibh venenatis. In ante metus dictum at tempor. Rhoncus urna neque viverra justo nec ultrices dui.</p>
</div>
</div>
<div class="col-sm-4 mb-3 order-sm-1">
<!--SIDE IMAGE-->
<div class="card p-3" style="border: #B8000A 10px solid; height: 400px; background-size:cover; background-position:center; background-image:url('https://dummyimage.com/350/FFF/000000');">
<!--IMG CREDIT-->
<a class="text-secondary tooltipster" title="IMG_CREDIT" href="#" style="opacity:.6;"><i class="fas fa-image"></i></a>
</div>
<!--END OF SIDE IMAGE-->
</div>
</div>
<!--END OF GOD 1-->
<!--GOD 2-->
<div class="row justify-content-center">
<div class="col-sm-4 mb-3">
<!--SIDE IMAGE-->
<div class="card p-3" style="border: #B8000A 10px solid; height: 400px; background-size:cover; background-position:center; background-image:url('https://dummyimage.com/350/FFF/000000');">
<!--IMG CREDIT-->
<a class="text-secondary tooltipster" title="IMG_CREDIT" href="#" style="opacity:.6;"><i class="fas fa-image"></i></a>
</div>
<!--END OF SIDE IMAGE-->
</div>
<div class="col-lg-8 mb-3">
<!--TITLE-->
<div class="card text-uppercase text-center mb-3" style="background: #B8000A; color: #fff; border: transparent; padding: 5px; letter-spacing: 10px;">
<h1 class="display-4 text-light font-weight-bold">God_Name</h1>
</div>
<!--END OF TITLE-->
<div class="card-text p-3" style="border: 3px solid; height: 330px; overflow-y:auto; border-radius:5px;">
<p>Info about this god here. 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>Molestie ac feugiat sed lectus vestibulum. Praesent semper feugiat nibh sed. Elementum nisi quis eleifend quam adipiscing vitae proin. Blandit volutpat maecenas volutpat blandit. In egestas erat imperdiet sed. Cursus sit amet dictum sit amet justo donec enim. Sagittis purus sit amet volutpat consequat. Aliquam vestibulum morbi blandit cursus risus at ultrices mi. Placerat vestibulum lectus mauris ultrices eros. Pulvinar sapien et ligula ullamcorper malesuada. Orci ac auctor augue mauris augue neque gravida. Ullamcorper eget nulla facilisi etiam dignissim diam quis. Id volutpat lacus laoreet non curabitur gravida. Diam donec adipiscing tristique risus nec feugiat in fermentum posuere. Sapien et ligula ullamcorper malesuada. Tortor consequat id porta nibh venenatis. In ante metus dictum at tempor. Rhoncus urna neque viverra justo nec ultrices dui.</p>
</div>
</div>
</div>
<!--END OF GOD 2-->
<!--GOD 3-->
<div class="row justify-content-center">
<div class="col-lg-8 mb-3 order-md-1 order-2">
<!--TITLE-->
<div class="card text-uppercase text-center mb-3" style="background: #B8000A; color: #fff; border: transparent; padding: 5px; letter-spacing: 10px;">
<h1 class="display-4 text-light font-weight-bold">God_Name</h1>
</div>
<!--END OF TITLE-->
<div class="card-text p-3" style="border: 3px solid; height: 330px; overflow-y:auto; border-radius:5px;">
<p>Info about this god here. 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>Molestie ac feugiat sed lectus vestibulum. Praesent semper feugiat nibh sed. Elementum nisi quis eleifend quam adipiscing vitae proin. Blandit volutpat maecenas volutpat blandit. In egestas erat imperdiet sed. Cursus sit amet dictum sit amet justo donec enim. Sagittis purus sit amet volutpat consequat. Aliquam vestibulum morbi blandit cursus risus at ultrices mi. Placerat vestibulum lectus mauris ultrices eros. Pulvinar sapien et ligula ullamcorper malesuada. Orci ac auctor augue mauris augue neque gravida. Ullamcorper eget nulla facilisi etiam dignissim diam quis. Id volutpat lacus laoreet non curabitur gravida. Diam donec adipiscing tristique risus nec feugiat in fermentum posuere. Sapien et ligula ullamcorper malesuada. Tortor consequat id porta nibh venenatis. In ante metus dictum at tempor. Rhoncus urna neque viverra justo nec ultrices dui.</p>
</div>
</div>
<div class="col-sm-4 mb-3 order-sm-1">
<!--SIDE IMAGE-->
<div class="card p-3" style="border: #B8000A 10px solid; height: 400px; background-size:cover; background-position:center; background-image:url('https://dummyimage.com/350/FFF/000000');">
<!--IMG CREDIT-->
<a class="text-secondary tooltipster" title="IMG_CREDIT" href="#" style="opacity:.6;"><i class="fas fa-image"></i></a>
</div>
<!--END OF SIDE IMAGE-->
</div>
</div>
<!--END OF GOD 3-->
<!--TITLE-->
<div class="card text-uppercase text-center mb-3" style="background: #B8000A; color: #fff; border: transparent; padding: 5px; letter-spacing: 10px;">
<h1 class="display-4 text-light font-weight-bold">Clergy</h1>
</div>
<!--END OF TITLE-->
<!--CLERGY-->
<div class="card-deck">
<!--ITEM 1-->
<div class="card p-3 mb-3" style="border: #B8000A 15px solid; height: 500px; background-size:cover; background-position:center; background-image:url('https://dummyimage.com/350/FFF/000000');">
<!--BUTTON TOGGLE-->
<a class="btn btn-secondary w-25" data-toggle="collapse" href="#CLERGY1"><i class="fa-solid fa-magnifying-glass"></i></a>
<!--IMG CREDIT-->
<a class="text-secondary tooltipster" title="IMG_CREDIT" href="#" style="opacity:.6; position: absolute; top:90%;"><i class="fas fa-image"></i></a>
<!--MODAL CONTENT-->
<div class="collapse w-100 h-100 fade p-3" id="CLERGY1" style="position:absolute; top:0; left:0; background:rgba(0,0,0,0.8); z-index:2;">
<!--div aligns content to center of screen-->
<div class="justify-content-center">
<!--CARD CONTENT-->
<div class="card w-100 p-3" style="height: 425px; overflow-y:auto;">
<!--CLOSE BUTTON-->
<a data-toggle="collapse" href="#CLERGY1" style="position:absolute; top:10px; right:15px;"><i class="fa-solid fa-xmark"></i></a>
<h1 class="display-4 mb-2 ml-1">HEADER</h1><div class="card mb-2"></div>
<p>Nam vestibulum massa quis varius venenatis. Proin pretium scelerisque tortor. Nulla egestas ultrices arcu id iaculis. Nunc eu hendrerit nisl. Praesent dignissim nisl eget enim porttitor lacinia. Praesent sagittis commodo convallis. Curabitur molestie quis libero eget pulvinar. Nunc malesuada sem purus, non fermentum eros venenatis sed. Vestibulum ullamcorper quam lorem, vitae bibendum nisi efficitur volutpat. Etiam at urna cursus, tempus nibh scelerisque, varius nibh. In sit amet ornare lorem. Vestibulum sit amet tortor at sem elementum pellentesque eget ut dolor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent interdum commodo blandit.</p>
<p>Aliquam tristique, nisi vel tristique tempus, urna sapien venenatis lectus, eu hendrerit dolor mauris sed elit. Duis non leo lacus. Nunc feugiat vestibulum blandit. Morbi pretium sapien ut orci porttitor, a laoreet neque tempor. Aliquam eget ante dui. Nullam imperdiet nulla id auctor cursus. Vestibulum sit amet volutpat ligula. Sed pellentesque pharetra mollis. Donec hendrerit pharetra risus, ut sagittis arcu lobortis id.</p>
</div> <!--card content end-->
</div> <!--div to align to center of screen end-->
</div> <!--modal content end-->
</div>
<!--ITEM 1-->
<!--ITEM 2-->
<div class="card p-3 mb-3" style="border: #B8000A 15px solid; height: 500px; background-size:cover; background-position:center; background-image:url('https://dummyimage.com/350/FFF/000000');">
<!--BUTTON TOGGLE-->
<a class="btn btn-secondary w-25 pull-right" data-toggle="collapse" href="#CLERGY2"><i class="fa-solid fa-magnifying-glass"></i></a>
<!--IMG CREDIT-->
<a class="text-secondary tooltipster" title="IMG_CREDIT" href="#" style="opacity:.6; position: absolute; top:90%;"><i class="fas fa-image"></i></a>
<!--MODAL CONTENT-->
<div class="collapse w-100 h-100 fade p-3" id="CLERGY2" style="position:absolute; top:0; left:0; background:rgba(0,0,0,0.8); z-index:2;">
<!--div aligns content to center of screen-->
<div class="justify-content-center">
<!--CARD CONTENT-->
<div class="card w-100 p-3" style="height: 425px; overflow-y:auto;">
<!--CLOSE BUTTON-->
<a data-toggle="collapse" href="#CLERGY2" style="position:absolute; top:10px; right:15px;"><i class="fa-solid fa-xmark"></i></a>
<h1 class="display-4 mb-2 ml-1">HEADER</h1><div class="card mb-2"></div>
<p>Nam vestibulum massa quis varius venenatis. Proin pretium scelerisque tortor. Nulla egestas ultrices arcu id iaculis. Nunc eu hendrerit nisl. Praesent dignissim nisl eget enim porttitor lacinia. Praesent sagittis commodo convallis. Curabitur molestie quis libero eget pulvinar. Nunc malesuada sem purus, non fermentum eros venenatis sed. Vestibulum ullamcorper quam lorem, vitae bibendum nisi efficitur volutpat. Etiam at urna cursus, tempus nibh scelerisque, varius nibh. In sit amet ornare lorem. Vestibulum sit amet tortor at sem elementum pellentesque eget ut dolor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent interdum commodo blandit.</p>
<p>Aliquam tristique, nisi vel tristique tempus, urna sapien venenatis lectus, eu hendrerit dolor mauris sed elit. Duis non leo lacus. Nunc feugiat vestibulum blandit. Morbi pretium sapien ut orci porttitor, a laoreet neque tempor. Aliquam eget ante dui. Nullam imperdiet nulla id auctor cursus. Vestibulum sit amet volutpat ligula. Sed pellentesque pharetra mollis. Donec hendrerit pharetra risus, ut sagittis arcu lobortis id.</p>
</div> <!--card content end-->
</div> <!--div to align to center of screen end-->
</div> <!--modal content end-->
</div>
<!--ITEM 2-->
<!--ITEM 3-->
<div class="card p-3 mb-3" style="border: #B8000A 15px solid; height: 500px; background-size:cover; background-position:center; background-image:url('https://dummyimage.com/350/FFF/000000');">
<!--BUTTON TOGGLE-->
<a class="btn btn-secondary w-25 pull-right" data-toggle="collapse" href="#CLERGY3"><i class="fa-solid fa-magnifying-glass"></i></a>
<!--IMG CREDIT-->
<a class="text-secondary tooltipster" title="IMG_CREDIT" href="#" style="opacity:.6; position: absolute; top:90%;"><i class="fas fa-image"></i></a>
<!--MODAL CONTENT-->
<div class="collapse w-100 h-100 fade p-3" id="CLERGY3" style="position:absolute; top:0; left:0; background:rgba(0,0,0,0.8); z-index:2;">
<!--div aligns content to center of screen-->
<div class="justify-content-center">
<!--CARD CONTENT-->
<div class="card w-100 p-3" style="height: 425px; overflow-y:auto;">
<!--CLOSE BUTTON-->
<a data-toggle="collapse" href="#CLERGY3" style="position:absolute; top:10px; right:15px;"><i class="fa-solid fa-xmark"></i></a>
<h1 class="display-4 mb-2 ml-1">HEADER</h1><div class="card mb-2"></div>
<p>Nam vestibulum massa quis varius venenatis. Proin pretium scelerisque tortor. Nulla egestas ultrices arcu id iaculis. Nunc eu hendrerit nisl. Praesent dignissim nisl eget enim porttitor lacinia. Praesent sagittis commodo convallis. Curabitur molestie quis libero eget pulvinar. Nunc malesuada sem purus, non fermentum eros venenatis sed. Vestibulum ullamcorper quam lorem, vitae bibendum nisi efficitur volutpat. Etiam at urna cursus, tempus nibh scelerisque, varius nibh. In sit amet ornare lorem. Vestibulum sit amet tortor at sem elementum pellentesque eget ut dolor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent interdum commodo blandit.</p>
<p>Aliquam tristique, nisi vel tristique tempus, urna sapien venenatis lectus, eu hendrerit dolor mauris sed elit. Duis non leo lacus. Nunc feugiat vestibulum blandit. Morbi pretium sapien ut orci porttitor, a laoreet neque tempor. Aliquam eget ante dui. Nullam imperdiet nulla id auctor cursus. Vestibulum sit amet volutpat ligula. Sed pellentesque pharetra mollis. Donec hendrerit pharetra risus, ut sagittis arcu lobortis id.</p>
</div> <!--card content end-->
</div> <!--div to align to center of screen end-->
</div> <!--modal content end-->
</div>
<!--ITEM 3-->
</div>
<!--END OF CLERGY-->
</div>
<!--END OF RELIGION-->
<!--MAGIC-->
<div class="tab-pane fade show" id="magic" role="tabpanel">
<!--OVERVIEW-->
<div class="row justify-content-center">
<div class="col-lg-8 mb-3 order-md-1 order-2">
<!--TITLE-->
<div class="card text-uppercase text-center mb-3" style="background: #B8000A; color: #fff; border: transparent; padding: 5px; letter-spacing: 10px;">
<h1 class="display-4 text-light font-weight-bold">Magic</h1>
</div>
<!--END OF TITLE-->
<div class="card-text p-3" style="border: 3px solid; height: 330px; overflow-y:auto; border-radius:5px;">
<p>Overview here. 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>Molestie ac feugiat sed lectus vestibulum. Praesent semper feugiat nibh sed. Elementum nisi quis eleifend quam adipiscing vitae proin. Blandit volutpat maecenas volutpat blandit. In egestas erat imperdiet sed. Cursus sit amet dictum sit amet justo donec enim. Sagittis purus sit amet volutpat consequat. Aliquam vestibulum morbi blandit cursus risus at ultrices mi. Placerat vestibulum lectus mauris ultrices eros. Pulvinar sapien et ligula ullamcorper malesuada. Orci ac auctor augue mauris augue neque gravida. Ullamcorper eget nulla facilisi etiam dignissim diam quis. Id volutpat lacus laoreet non curabitur gravida. Diam donec adipiscing tristique risus nec feugiat in fermentum posuere. Sapien et ligula ullamcorper malesuada. Tortor consequat id porta nibh venenatis. In ante metus dictum at tempor. Rhoncus urna neque viverra justo nec ultrices dui.</p>
</div>
</div>
<div class="col-sm-4 mb-3 order-sm-1">
<!--SIDE IMAGE-->
<div class="card p-3" style="border: #B8000A 10px solid; height: 400px; background-size:cover; background-position:center; background-image:url('https://dummyimage.com/350/FFF/000000');">
<!--IMG CREDIT-->
<a class="text-secondary tooltipster" title="IMG_CREDIT" href="#" style="opacity:.6;"><i class="fas fa-image"></i></a>
</div>
<!--END OF SIDE IMAGE-->
</div>
</div>
<!--END OF OVERVIEW-->
<!--TITLE-->
<div class="card text-uppercase text-center mb-3" style="background: #B8000A; color: #fff; border: transparent; padding: 5px; letter-spacing: 10px;">
<h1 class="display-4 text-light font-weight-bold">Types of Magic</h1>
</div>
<!--END OF TITLE-->
<!--ELEMENT/MAGIC-->
<div class="row justify-content-center">
<div class="col-sm-4 mb-3">
<!--SIDE IMAGE-->
<div class="card p-3" style="border: #B8000A 10px solid; height: 400px; background-size:cover; background-position:center; background-image:url('https://dummyimage.com/350/FFF/000000');">
<!--IMG CREDIT-->
<a class="text-secondary tooltipster" title="IMG_CREDIT" href="#" style="opacity:.6;"><i class="fas fa-image"></i></a>
</div>
<!--END OF SIDE IMAGE-->
</div>
<div class="col-lg-8 mb-3">
<!--TITLE-->
<div class="card text-uppercase text-center mb-3" style="background: #B8000A; color: #fff; border: transparent; padding: 5px; letter-spacing: 10px;">
<h1 class="display-4 text-light font-weight-bold">Element</h1>
</div>
<!--END OF TITLE-->
<div class="card-text p-3" style="border: 3px solid; height: 330px; overflow-y:auto; border-radius:5px;">
<p>Info about this magical element here. 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>Molestie ac feugiat sed lectus vestibulum. Praesent semper feugiat nibh sed. Elementum nisi quis eleifend quam adipiscing vitae proin. Blandit volutpat maecenas volutpat blandit. In egestas erat imperdiet sed. Cursus sit amet dictum sit amet justo donec enim. Sagittis purus sit amet volutpat consequat. Aliquam vestibulum morbi blandit cursus risus at ultrices mi. Placerat vestibulum lectus mauris ultrices eros. Pulvinar sapien et ligula ullamcorper malesuada. Orci ac auctor augue mauris augue neque gravida. Ullamcorper eget nulla facilisi etiam dignissim diam quis. Id volutpat lacus laoreet non curabitur gravida. Diam donec adipiscing tristique risus nec feugiat in fermentum posuere. Sapien et ligula ullamcorper malesuada. Tortor consequat id porta nibh venenatis. In ante metus dictum at tempor. Rhoncus urna neque viverra justo nec ultrices dui.</p>
</div>
</div>
</div>
<!--END OF ELEMENT/MAGIC-->
<!--ELEMENT/MAGIC-->
<div class="row justify-content-center">
<div class="col-lg-8 mb-3 order-md-1 order-2">
<!--TITLE-->
<div class="card text-uppercase text-center mb-3" style="background: #B8000A; color: #fff; border: transparent; padding: 5px; letter-spacing: 10px;">
<h1 class="display-4 text-light font-weight-bold">Element</h1>
</div>
<!--END OF TITLE-->
<div class="card-text p-3" style="border: 3px solid; height: 330px; overflow-y:auto; border-radius:5px;">
<p>Info about this magical element here. 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>Molestie ac feugiat sed lectus vestibulum. Praesent semper feugiat nibh sed. Elementum nisi quis eleifend quam adipiscing vitae proin. Blandit volutpat maecenas volutpat blandit. In egestas erat imperdiet sed. Cursus sit amet dictum sit amet justo donec enim. Sagittis purus sit amet volutpat consequat. Aliquam vestibulum morbi blandit cursus risus at ultrices mi. Placerat vestibulum lectus mauris ultrices eros. Pulvinar sapien et ligula ullamcorper malesuada. Orci ac auctor augue mauris augue neque gravida. Ullamcorper eget nulla facilisi etiam dignissim diam quis. Id volutpat lacus laoreet non curabitur gravida. Diam donec adipiscing tristique risus nec feugiat in fermentum posuere. Sapien et ligula ullamcorper malesuada. Tortor consequat id porta nibh venenatis. In ante metus dictum at tempor. Rhoncus urna neque viverra justo nec ultrices dui.</p>
</div>
</div>
<div class="col-sm-4 mb-3 order-sm-1">
<!--SIDE IMAGE-->
<div class="card p-3" style="border: #B8000A 10px solid; height: 400px; background-size:cover; background-position:center; background-image:url('https://dummyimage.com/350/FFF/000000');">
<!--IMG CREDIT-->
<a class="text-secondary tooltipster" title="IMG_CREDIT" href="#" style="opacity:.6;"><i class="fas fa-image"></i></a>
</div>
<!--END OF SIDE IMAGE-->
</div>
</div>
<!--END OF ELEMENT/MAGIC-->
<!--ELEMENT/MAGIC-->
<div class="row justify-content-center">
<div class="col-sm-4 mb-3">
<!--SIDE IMAGE-->
<div class="card p-3" style="border: #B8000A 10px solid; height: 400px; background-size:cover; background-position:center; background-image:url('https://dummyimage.com/350/FFF/000000');">
<!--IMG CREDIT-->
<a class="text-secondary tooltipster" title="IMG_CREDIT" href="#" style="opacity:.6;"><i class="fas fa-image"></i></a>
</div>
<!--END OF SIDE IMAGE-->
</div>
<div class="col-lg-8 mb-3">
<!--TITLE-->
<div class="card text-uppercase text-center mb-3" style="background: #B8000A; color: #fff; border: transparent; padding: 5px; letter-spacing: 10px;">
<h1 class="display-4 text-light font-weight-bold">Element</h1>
</div>
<!--END OF TITLE-->
<div class="card-text p-3" style="border: 3px solid; height: 330px; overflow-y:auto; border-radius:5px;">
<p>Info about this magical element here. 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>Molestie ac feugiat sed lectus vestibulum. Praesent semper feugiat nibh sed. Elementum nisi quis eleifend quam adipiscing vitae proin. Blandit volutpat maecenas volutpat blandit. In egestas erat imperdiet sed. Cursus sit amet dictum sit amet justo donec enim. Sagittis purus sit amet volutpat consequat. Aliquam vestibulum morbi blandit cursus risus at ultrices mi. Placerat vestibulum lectus mauris ultrices eros. Pulvinar sapien et ligula ullamcorper malesuada. Orci ac auctor augue mauris augue neque gravida. Ullamcorper eget nulla facilisi etiam dignissim diam quis. Id volutpat lacus laoreet non curabitur gravida. Diam donec adipiscing tristique risus nec feugiat in fermentum posuere. Sapien et ligula ullamcorper malesuada. Tortor consequat id porta nibh venenatis. In ante metus dictum at tempor. Rhoncus urna neque viverra justo nec ultrices dui.</p>
</div>
</div>
</div>
<!--END OF ELEMENT/MAGIC-->
</div>
<!--END OF MAGIC-->
<!--MAP-->
<div class="tab-pane fade show" id="map" role="tabpanel">
<!--FULL MAP IMAGE-->
<div class="card p-3 mb-3" style="border: #B8000A 15px solid; height: 400px; background-size:cover; background-position:center; background-image:url('https://dummyimage.com/350/FFF/000000');">
<!--IMG CREDIT-->
<a class="text-secondary tooltipster" title="IMG_CREDIT" href="#" style="opacity:.6;"><i class="fas fa-image"></i></a>
</div>
<!--END OF FULL MAP IMAGE-->
<!--LOCATION 1-->
<!--TITLE-->
<div class="card text-uppercase text-center mb-3" style="background: #B8000A; color: #fff; border: transparent; padding: 5px; letter-spacing: 10px;">
<h1 class="display-4 text-light font-weight-bold">Location_Name</h1>
</div>
<!--END OF TITLE-->
<!--OVERVIEW-->
<div class="row justify-content-center">
<div class="col-sm-4 mb-3">
<!--MAP CLOSEUP-->
<div class="card p-3" style="border: #B8000A 10px solid; height: 400px; background-size:cover; background-position:center; background-image:url('https://dummyimage.com/350/FFF/000000');">
<!--IMG CREDIT-->
<a class="text-secondary tooltipster" title="IMG_CREDIT" href="#" style="opacity:.6;"><i class="fas fa-image"></i></a>
</div>
<!--END OF MAP CLOSEUP-->
</div>
<div class="col-lg-8 mb-3">
<div class="card-text p-3" style="border: 3px solid; height: 400px; overflow-y:auto; border-radius:5px;">
<p>Write your location overview here. 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>Molestie ac feugiat sed lectus vestibulum. Praesent semper feugiat nibh sed. Elementum nisi quis eleifend quam adipiscing vitae proin. Blandit volutpat maecenas volutpat blandit. In egestas erat imperdiet sed. Cursus sit amet dictum sit amet justo donec enim. Sagittis purus sit amet volutpat consequat. Aliquam vestibulum morbi blandit cursus risus at ultrices mi. Placerat vestibulum lectus mauris ultrices eros. Pulvinar sapien et ligula ullamcorper malesuada. Orci ac auctor augue mauris augue neque gravida. Ullamcorper eget nulla facilisi etiam dignissim diam quis. Id volutpat lacus laoreet non curabitur gravida. Diam donec adipiscing tristique risus nec feugiat in fermentum posuere. Sapien et ligula ullamcorper malesuada. Tortor consequat id porta nibh venenatis. In ante metus dictum at tempor. Rhoncus urna neque viverra justo nec ultrices dui.</p>
</div>
</div>
</div>
<!--END OF OVERVIEW-->
<!--LOCATION MOODBOARD SECTION-->
<div class="row justify-content-center">
<div class="col-sm mb-3">
<!--SIDE IMAGE-->
<div class="card p-3" style="border: #B8000A 10px solid; height: 300px; background-size:cover; background-position:center; background-image:url('https://dummyimage.com/350/FFF/000000');">
<!--IMG CREDIT-->
<a class="text-secondary tooltipster" title="IMG_CREDIT" href="#" style="opacity:.6;"><i class="fas fa-image"></i></a>
</div>
<!--END OF SIDE IMAGE-->
</div>
<div class="col-sm mb-3">
<!--SIDE IMAGE-->
<div class="card p-3" style="border: #B8000A 10px solid; height: 300px; background-size:cover; background-position:center; background-image:url('https://dummyimage.com/350/FFF/000000');">
<!--IMG CREDIT-->
<a class="text-secondary tooltipster" title="IMG_CREDIT" href="#" style="opacity:.6;"><i class="fas fa-image"></i></a>
</div>
<!--END OF SIDE IMAGE-->
</div>
<div class="col-sm mb-3">
<!--SIDE IMAGE-->
<div class="card p-3" style="border: #B8000A 10px solid; height: 300px; background-size:cover; background-position:center; background-image:url('https://dummyimage.com/350/FFF/000000');">
<!--IMG CREDIT-->
<a class="text-secondary tooltipster" title="IMG_CREDIT" href="#" style="opacity:.6;"><i class="fas fa-image"></i></a>
</div>
<!--END OF SIDE IMAGE-->
</div>
<div class="col-sm mb-3">
<!--SIDE IMAGE-->
<div class="card p-3" style="border: #B8000A 10px solid; height: 300px; background-size:cover; background-position:center; background-image:url('https://dummyimage.com/350/FFF/000000');">
<!--IMG CREDIT-->
<a class="text-secondary tooltipster" title="IMG_CREDIT" href="#" style="opacity:.6;"><i class="fas fa-image"></i></a>
</div>
<!--END OF SIDE IMAGE-->
</div>
</div>
<!--END OF LOCATION MOODBOARD SECTION-->
<!--KEY POINTS-->
<div class="card-text p-3 mb-3" style="border: 3px solid; border-radius:5px;">
<div class="card bg-transparent mb-3" style="border: #B8000A 2px solid;">
<div class="row no-gutters mb-2">
<div class="col-auto align-items-center mb-n2" style="background: #B8000A; color: #fff; font-weight: bold; padding: 5px; margin-right: 4px; min-width:140px;">
<i class="fa-solid fa-location-dot"></i> Capital
</div>
<div class="col card bg-transparent border-0 rounded-0 pt-2 pr-2" style="text-align: right;">
content
</div>
</div>
</div>
<div class="card bg-transparent mb-3" style="border: #B8000A 2px solid;">
<div class="row no-gutters mb-2">
<div class="col-auto align-items-center mb-n2" style="background: #B8000A; color: #fff; font-weight: bold; padding: 5px; margin-right: 4px; min-width:140px;">
<i class="fa-solid fa-globe"></i> Population
</div>
<div class="col card bg-transparent border-0 rounded-0 pt-2 pr-2" style="text-align: right;">
content
</div>
</div>
</div>
<div class="card bg-transparent mb-3" style="border: #B8000A 2px solid;">
<div class="row no-gutters mb-2">
<div class="col-auto align-items-center mb-n2" style="background: #B8000A; color: #fff; font-weight: bold; padding: 5px; margin-right: 4px; min-width:140px;">
<i class="fa-solid fa-sun-cloud"></i> Climate
</div>
<div class="col card bg-transparent border-0 rounded-0 pt-2 pr-2" style="text-align: right;">
content
</div>
</div>
</div>
<div class="card bg-transparent mb-3" style="border: #B8000A 2px solid;">
<div class="row no-gutters mb-2">
<div class="col-auto align-items-center mb-n2" style="background: #B8000A; color: #fff; font-weight: bold; padding: 5px; margin-right: 4px; min-width:140px;">
<i class="fa-solid fa-mountains"></i> Geography
</div>
<div class="col card bg-transparent border-0 rounded-0 pt-2 pr-2" style="text-align: right;">
content
</div>
</div>
</div>
<div class="card bg-transparent" style="border: #B8000A 2px solid;">
<div class="row no-gutters mb-2">
<div class="col-auto align-items-center mb-n2" style="background: #B8000A; color: #fff; font-weight: bold; padding: 5px; margin-right: 4px; min-width:140px;">
<i class="fa-solid fa-id-card"></i> Trivia
</div>
<div class="col card bg-transparent border-0 rounded-0 pt-2 pr-2" style="text-align: right;">
<ul class="list-unstyled">
<li><i class="fas fa-map-pin"></i> content</li>
<li><i class="fas fa-map-pin"></i> content</li>
<li><i class="fas fa-map-pin"></i> content</li>
</ul>
</div>
</div>
</div>
</div>
<!--END OF KEY POINTS-->
<!--END OF LOCATION 1-->
<!--LOCATION 2-->
<!--TITLE-->
<div class="card text-uppercase text-center mb-3" style="background: #B8000A; color: #fff; border: transparent; padding: 5px; letter-spacing: 10px;">
<h1 class="display-4 text-light font-weight-bold">Location_Name</h1>
</div>
<!--END OF TITLE-->
<!--OVERVIEW-->
<div class="row justify-content-center">
<div class="col-lg-8 mb-3 order-md-1 order-2">
<div class="card-text p-3" style="border: 3px solid; height: 400px; overflow-y:auto; border-radius:5px;">
<p>Write your location overview here. 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>Molestie ac feugiat sed lectus vestibulum. Praesent semper feugiat nibh sed. Elementum nisi quis eleifend quam adipiscing vitae proin. Blandit volutpat maecenas volutpat blandit. In egestas erat imperdiet sed. Cursus sit amet dictum sit amet justo donec enim. Sagittis purus sit amet volutpat consequat. Aliquam vestibulum morbi blandit cursus risus at ultrices mi. Placerat vestibulum lectus mauris ultrices eros. Pulvinar sapien et ligula ullamcorper malesuada. Orci ac auctor augue mauris augue neque gravida. Ullamcorper eget nulla facilisi etiam dignissim diam quis. Id volutpat lacus laoreet non curabitur gravida. Diam donec adipiscing tristique risus nec feugiat in fermentum posuere. Sapien et ligula ullamcorper malesuada. Tortor consequat id porta nibh venenatis. In ante metus dictum at tempor. Rhoncus urna neque viverra justo nec ultrices dui.</p>
</div>
</div>
<div class="col-sm-4 mb-3 order-sm-1">
<!--MAP CLOSEUP-->
<div class="card p-3" style="border: #B8000A 10px solid; height: 400px; background-size:cover; background-position:center; background-image:url('https://dummyimage.com/350/FFF/000000');">
<!--IMG CREDIT-->
<a class="text-secondary tooltipster" title="IMG_CREDIT" href="#" style="opacity:.6;"><i class="fas fa-image"></i></a>
</div>
<!--END OF MAP CLOSEUP-->
</div>
</div>
<!--END OF OVERVIEW-->
<!--LOCATION MOODBOARD SECTION-->
<div class="row justify-content-center">
<div class="col-sm mb-3">
<!--SIDE IMAGE-->
<div class="card p-3" style="border: #B8000A 10px solid; height: 300px; background-size:cover; background-position:center; background-image:url('https://dummyimage.com/350/FFF/000000');">
<!--IMG CREDIT-->
<a class="text-secondary tooltipster" title="IMG_CREDIT" href="#" style="opacity:.6;"><i class="fas fa-image"></i></a>
</div>
<!--END OF SIDE IMAGE-->
</div>
<div class="col-sm mb-3">
<!--SIDE IMAGE-->
<div class="card p-3" style="border: #B8000A 10px solid; height: 300px; background-size:cover; background-position:center; background-image:url('https://dummyimage.com/350/FFF/000000');">
<!--IMG CREDIT-->
<a class="text-secondary tooltipster" title="IMG_CREDIT" href="#" style="opacity:.6;"><i class="fas fa-image"></i></a>
</div>
<!--END OF SIDE IMAGE-->
</div>
<div class="col-sm mb-3">
<!--SIDE IMAGE-->
<div class="card p-3" style="border: #B8000A 10px solid; height: 300px; background-size:cover; background-position:center; background-image:url('https://dummyimage.com/350/FFF/000000');">
<!--IMG CREDIT-->
<a class="text-secondary tooltipster" title="IMG_CREDIT" href="#" style="opacity:.6;"><i class="fas fa-image"></i></a>
</div>
<!--END OF SIDE IMAGE-->
</div>
<div class="col-sm mb-3">
<!--SIDE IMAGE-->
<div class="card p-3" style="border: #B8000A 10px solid; height: 300px; background-size:cover; background-position:center; background-image:url('https://dummyimage.com/350/FFF/000000');">
<!--IMG CREDIT-->
<a class="text-secondary tooltipster" title="IMG_CREDIT" href="#" style="opacity:.6;"><i class="fas fa-image"></i></a>
</div>
<!--END OF SIDE IMAGE-->
</div>
</div>
<!--END OF LOCATION MOODBOARD SECTION-->
<!--KEY POINTS-->
<div class="card-text p-3 mb-3" style="border: 3px solid; border-radius:5px;">
<div class="card bg-transparent mb-3" style="border: #B8000A 2px solid;">
<div class="row no-gutters mb-2">
<div class="col-auto align-items-center mb-n2" style="background: #B8000A; color: #fff; font-weight: bold; padding: 5px; margin-right: 4px; min-width:140px;">
<i class="fa-solid fa-location-dot"></i> Capital
</div>
<div class="col card bg-transparent border-0 rounded-0 pt-2 pr-2" style="text-align: right;">
content
</div>
</div>
</div>
<div class="card bg-transparent mb-3" style="border: #B8000A 2px solid;">
<div class="row no-gutters mb-2">
<div class="col-auto align-items-center mb-n2" style="background: #B8000A; color: #fff; font-weight: bold; padding: 5px; margin-right: 4px; min-width:140px;">
<i class="fa-solid fa-globe"></i> Population
</div>
<div class="col card bg-transparent border-0 rounded-0 pt-2 pr-2" style="text-align: right;">
content
</div>
</div>
</div>
<div class="card bg-transparent mb-3" style="border: #B8000A 2px solid;">
<div class="row no-gutters mb-2">
<div class="col-auto align-items-center mb-n2" style="background: #B8000A; color: #fff; font-weight: bold; padding: 5px; margin-right: 4px; min-width:140px;">
<i class="fa-solid fa-sun-cloud"></i> Climate
</div>
<div class="col card bg-transparent border-0 rounded-0 pt-2 pr-2" style="text-align: right;">
content
</div>
</div>
</div>
<div class="card bg-transparent mb-3" style="border: #B8000A 2px solid;">
<div class="row no-gutters mb-2">
<div class="col-auto align-items-center mb-n2" style="background: #B8000A; color: #fff; font-weight: bold; padding: 5px; margin-right: 4px; min-width:140px;">
<i class="fa-solid fa-mountains"></i> Geography
</div>
<div class="col card bg-transparent border-0 rounded-0 pt-2 pr-2" style="text-align: right;">
content
</div>
</div>
</div>
<div class="card bg-transparent" style="border: #B8000A 2px solid;">
<div class="row no-gutters mb-2">
<div class="col-auto align-items-center mb-n2" style="background: #B8000A; color: #fff; font-weight: bold; padding: 5px; margin-right: 4px; min-width:140px;">
<i class="fa-solid fa-id-card"></i> Trivia
</div>
<div class="col card bg-transparent border-0 rounded-0 pt-2 pr-2" style="text-align: right;">
<ul class="list-unstyled">
<li><i class="fas fa-map-pin"></i> content</li>
<li><i class="fas fa-map-pin"></i> content</li>
<li><i class="fas fa-map-pin"></i> content</li>
</ul>
</div>
</div>
</div>
</div>
<!--END OF KEY POINTS-->
<!--END OF LOCATION 2-->
</div>
<!--END OF MAP-->
<!--KEY FIGURES-->
<div class="tab-pane fade show" id="key" role="tabpanel">
<!--TITLE-->
<div class="card text-uppercase text-center mb-3" style="background: #B8000A; color: #fff; border: transparent; padding: 5px; letter-spacing: 10px;">
<h1 class="display-4 text-light font-weight-bold">Group_Name</h1>
</div>
<!--END OF TITLE-->
<!--FIGURES ROW 1-->
<div class="card-deck">
<!--FIG 1-->
<div class="card p-3 mb-3" style="border: #B8000A 15px solid; height: 500px; background-size:cover; background-position:center; background-image:url('https://dummyimage.com/350/FFF/000000');">
<!--BUTTON TOGGLE-->
<a class="btn btn-secondary w-25" data-toggle="collapse" href="#FIG1"><i class="fa-solid fa-magnifying-glass"></i></a>
<!--IMG CREDIT-->
<a class="text-secondary tooltipster" title="IMG_CREDIT" href="#" style="opacity:.6; position: absolute; top:90%;"><i class="fas fa-image"></i></a>
<!--MODAL CONTENT-->
<div class="collapse w-100 h-100 fade p-3" id="FIG1" style="position:absolute; top:0; left:0; background:rgba(0,0,0,0.8); z-index:2;">
<!--div aligns content to center of screen-->
<div class="justify-content-center">
<!--CARD CONTENT-->
<div class="card w-100 p-3" style="height: 425px; overflow-y:auto;">
<!--CLOSE BUTTON-->
<a data-toggle="collapse" href="#FIG1" style="position:absolute; top:10px; right:15px;"><i class="fa-solid fa-xmark"></i></a>
<h1 class="display-4 mb-2 ml-1">HEADER</h1><div class="card mb-2"></div>
<p>Nam vestibulum massa quis varius venenatis. Proin pretium scelerisque tortor. Nulla egestas ultrices arcu id iaculis. Nunc eu hendrerit nisl. Praesent dignissim nisl eget enim porttitor lacinia. Praesent sagittis commodo convallis. Curabitur molestie quis libero eget pulvinar. Nunc malesuada sem purus, non fermentum eros venenatis sed. Vestibulum ullamcorper quam lorem, vitae bibendum nisi efficitur volutpat. Etiam at urna cursus, tempus nibh scelerisque, varius nibh. In sit amet ornare lorem. Vestibulum sit amet tortor at sem elementum pellentesque eget ut dolor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent interdum commodo blandit.</p>
<p>Aliquam tristique, nisi vel tristique tempus, urna sapien venenatis lectus, eu hendrerit dolor mauris sed elit. Duis non leo lacus. Nunc feugiat vestibulum blandit. Morbi pretium sapien ut orci porttitor, a laoreet neque tempor. Aliquam eget ante dui. Nullam imperdiet nulla id auctor cursus. Vestibulum sit amet volutpat ligula. Sed pellentesque pharetra mollis. Donec hendrerit pharetra risus, ut sagittis arcu lobortis id.</p>
</div> <!--card content end-->
</div> <!--div to align to center of screen end-->
</div> <!--modal content end-->
</div>
<!--FIG 1-->
<!--FIG 2-->
<div class="card p-3 mb-3" style="border: #B8000A 15px solid; height: 500px; background-size:cover; background-position:center; background-image:url('https://dummyimage.com/350/FFF/000000');">
<!--BUTTON TOGGLE-->
<a class="btn btn-secondary w-25 pull-right" data-toggle="collapse" href="#FIG2"><i class="fa-solid fa-magnifying-glass"></i></a>
<!--IMG CREDIT-->
<a class="text-secondary tooltipster" title="IMG_CREDIT" href="#" style="opacity:.6; position: absolute; top:90%;"><i class="fas fa-image"></i></a>
<!--MODAL CONTENT-->
<div class="collapse w-100 h-100 fade p-3" id="FIG2" style="position:absolute; top:0; left:0; background:rgba(0,0,0,0.8); z-index:2;">
<!--div aligns content to center of screen-->
<div class="justify-content-center">
<!--CARD CONTENT-->
<div class="card w-100 p-3" style="height: 425px; overflow-y:auto;">
<!--CLOSE BUTTON-->
<a data-toggle="collapse" href="#FIG2" style="position:absolute; top:10px; right:15px;"><i class="fa-solid fa-xmark"></i></a>
<h1 class="display-4 mb-2 ml-1">HEADER</h1><div class="card mb-2"></div>
<p>Nam vestibulum massa quis varius venenatis. Proin pretium scelerisque tortor. Nulla egestas ultrices arcu id iaculis. Nunc eu hendrerit nisl. Praesent dignissim nisl eget enim porttitor lacinia. Praesent sagittis commodo convallis. Curabitur molestie quis libero eget pulvinar. Nunc malesuada sem purus, non fermentum eros venenatis sed. Vestibulum ullamcorper quam lorem, vitae bibendum nisi efficitur volutpat. Etiam at urna cursus, tempus nibh scelerisque, varius nibh. In sit amet ornare lorem. Vestibulum sit amet tortor at sem elementum pellentesque eget ut dolor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent interdum commodo blandit.</p>
<p>Aliquam tristique, nisi vel tristique tempus, urna sapien venenatis lectus, eu hendrerit dolor mauris sed elit. Duis non leo lacus. Nunc feugiat vestibulum blandit. Morbi pretium sapien ut orci porttitor, a laoreet neque tempor. Aliquam eget ante dui. Nullam imperdiet nulla id auctor cursus. Vestibulum sit amet volutpat ligula. Sed pellentesque pharetra mollis. Donec hendrerit pharetra risus, ut sagittis arcu lobortis id.</p>
</div> <!--card content end-->
</div> <!--div to align to center of screen end-->
</div> <!--modal content end-->
</div>
<!--FIG 2-->
<!--FIG 3-->
<div class="card p-3 mb-3" style="border: #B8000A 15px solid; height: 500px; background-size:cover; background-position:center; background-image:url('https://dummyimage.com/350/FFF/000000');">
<!--BUTTON TOGGLE-->
<a class="btn btn-secondary w-25 pull-right" data-toggle="collapse" href="#FIG3"><i class="fa-solid fa-magnifying-glass"></i></a>
<!--IMG CREDIT-->
<a class="text-secondary tooltipster" title="IMG_CREDIT" href="#" style="opacity:.6; position: absolute; top:90%;"><i class="fas fa-image"></i></a>
<!--MODAL CONTENT-->
<div class="collapse w-100 h-100 fade p-3" id="FIG3" style="position:absolute; top:0; left:0; background:rgba(0,0,0,0.8); z-index:2;">
<!--div aligns content to center of screen-->
<div class="justify-content-center">
<!--CARD CONTENT-->
<div class="card w-100 p-3" style="height: 425px; overflow-y:auto;">
<!--CLOSE BUTTON-->
<a data-toggle="collapse" href="#FIG3" style="position:absolute; top:10px; right:15px;"><i class="fa-solid fa-xmark"></i></a>
<h1 class="display-4 mb-2 ml-1">HEADER</h1><div class="card mb-2"></div>
<p>Nam vestibulum massa quis varius venenatis. Proin pretium scelerisque tortor. Nulla egestas ultrices arcu id iaculis. Nunc eu hendrerit nisl. Praesent dignissim nisl eget enim porttitor lacinia. Praesent sagittis commodo convallis. Curabitur molestie quis libero eget pulvinar. Nunc malesuada sem purus, non fermentum eros venenatis sed. Vestibulum ullamcorper quam lorem, vitae bibendum nisi efficitur volutpat. Etiam at urna cursus, tempus nibh scelerisque, varius nibh. In sit amet ornare lorem. Vestibulum sit amet tortor at sem elementum pellentesque eget ut dolor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent interdum commodo blandit.</p>
<p>Aliquam tristique, nisi vel tristique tempus, urna sapien venenatis lectus, eu hendrerit dolor mauris sed elit. Duis non leo lacus. Nunc feugiat vestibulum blandit. Morbi pretium sapien ut orci porttitor, a laoreet neque tempor. Aliquam eget ante dui. Nullam imperdiet nulla id auctor cursus. Vestibulum sit amet volutpat ligula. Sed pellentesque pharetra mollis. Donec hendrerit pharetra risus, ut sagittis arcu lobortis id.</p>
</div> <!--card content end-->
</div> <!--div to align to center of screen end-->
</div> <!--modal content end-->
</div>
<!--FIG 3-->
</div>
<!--END OF FIGURES ROW 1-->
<!--FIGURES ROW 1-->
<div class="card-deck">
<!--FIG 4-->
<div class="card p-3 mb-3" style="border: #B8000A 15px solid; height: 500px; background-size:cover; background-position:center; background-image:url('https://dummyimage.com/350/FFF/000000');">
<!--BUTTON TOGGLE-->
<a class="btn btn-secondary w-25" data-toggle="collapse" href="#FIG4"><i class="fa-solid fa-magnifying-glass"></i></a>
<!--IMG CREDIT-->
<a class="text-secondary tooltipster" title="IMG_CREDIT" href="#" style="opacity:.6; position: absolute; top:90%;"><i class="fas fa-image"></i></a>
<!--MODAL CONTENT-->
<div class="collapse w-100 h-100 fade p-3" id="FIG4" style="position:absolute; top:0; left:0; background:rgba(0,0,0,0.8); z-index:2;">
<!--div aligns content to center of screen-->
<div class="justify-content-center">
<!--CARD CONTENT-->
<div class="card w-100 p-3" style="height: 425px; overflow-y:auto;">
<!--CLOSE BUTTON-->
<a data-toggle="collapse" href="#FIG4" style="position:absolute; top:10px; right:15px;"><i class="fa-solid fa-xmark"></i></a>
<h1 class="display-4 mb-2 ml-1">HEADER</h1><div class="card mb-2"></div>
<p>Nam vestibulum massa quis varius venenatis. Proin pretium scelerisque tortor. Nulla egestas ultrices arcu id iaculis. Nunc eu hendrerit nisl. Praesent dignissim nisl eget enim porttitor lacinia. Praesent sagittis commodo convallis. Curabitur molestie quis libero eget pulvinar. Nunc malesuada sem purus, non fermentum eros venenatis sed. Vestibulum ullamcorper quam lorem, vitae bibendum nisi efficitur volutpat. Etiam at urna cursus, tempus nibh scelerisque, varius nibh. In sit amet ornare lorem. Vestibulum sit amet tortor at sem elementum pellentesque eget ut dolor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent interdum commodo blandit.</p>
<p>Aliquam tristique, nisi vel tristique tempus, urna sapien venenatis lectus, eu hendrerit dolor mauris sed elit. Duis non leo lacus. Nunc feugiat vestibulum blandit. Morbi pretium sapien ut orci porttitor, a laoreet neque tempor. Aliquam eget ante dui. Nullam imperdiet nulla id auctor cursus. Vestibulum sit amet volutpat ligula. Sed pellentesque pharetra mollis. Donec hendrerit pharetra risus, ut sagittis arcu lobortis id.</p>
</div> <!--card content end-->
</div> <!--div to align to center of screen end-->
</div> <!--modal content end-->
</div>
<!--FIG 4-->
<!--FIG 5-->
<div class="card p-3 mb-3" style="border: #B8000A 15px solid; height: 500px; background-size:cover; background-position:center; background-image:url('https://dummyimage.com/350/FFF/000000');">
<!--BUTTON TOGGLE-->
<a class="btn btn-secondary w-25 pull-right" data-toggle="collapse" href="#FIG5"><i class="fa-solid fa-magnifying-glass"></i></a>
<!--IMG CREDIT-->
<a class="text-secondary tooltipster" title="IMG_CREDIT" href="#" style="opacity:.6; position: absolute; top:90%;"><i class="fas fa-image"></i></a>
<!--MODAL CONTENT-->
<div class="collapse w-100 h-100 fade p-3" id="FIG5" style="position:absolute; top:0; left:0; background:rgba(0,0,0,0.8); z-index:2;">
<!--div aligns content to center of screen-->
<div class="justify-content-center">
<!--CARD CONTENT-->
<div class="card w-100 p-3" style="height: 425px; overflow-y:auto;">
<!--CLOSE BUTTON-->
<a data-toggle="collapse" href="#FIG5" style="position:absolute; top:10px; right:15px;"><i class="fa-solid fa-xmark"></i></a>
<h1 class="display-4 mb-2 ml-1">HEADER</h1><div class="card mb-2"></div>
<p>Nam vestibulum massa quis varius venenatis. Proin pretium scelerisque tortor. Nulla egestas ultrices arcu id iaculis. Nunc eu hendrerit nisl. Praesent dignissim nisl eget enim porttitor lacinia. Praesent sagittis commodo convallis. Curabitur molestie quis libero eget pulvinar. Nunc malesuada sem purus, non fermentum eros venenatis sed. Vestibulum ullamcorper quam lorem, vitae bibendum nisi efficitur volutpat. Etiam at urna cursus, tempus nibh scelerisque, varius nibh. In sit amet ornare lorem. Vestibulum sit amet tortor at sem elementum pellentesque eget ut dolor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent interdum commodo blandit.</p>
<p>Aliquam tristique, nisi vel tristique tempus, urna sapien venenatis lectus, eu hendrerit dolor mauris sed elit. Duis non leo lacus. Nunc feugiat vestibulum blandit. Morbi pretium sapien ut orci porttitor, a laoreet neque tempor. Aliquam eget ante dui. Nullam imperdiet nulla id auctor cursus. Vestibulum sit amet volutpat ligula. Sed pellentesque pharetra mollis. Donec hendrerit pharetra risus, ut sagittis arcu lobortis id.</p>
</div> <!--card content end-->
</div> <!--div to align to center of screen end-->
</div> <!--modal content end-->
</div>
<!--FIG 5-->
<!--FIG 6-->
<div class="card p-3 mb-3" style="border: #B8000A 15px solid; height: 500px; background-size:cover; background-position:center; background-image:url('https://dummyimage.com/350/FFF/000000');">
<!--BUTTON TOGGLE-->
<a class="btn btn-secondary w-25 pull-right" data-toggle="collapse" href="#FIG6"><i class="fa-solid fa-magnifying-glass"></i></a>
<!--IMG CREDIT-->
<a class="text-secondary tooltipster" title="IMG_CREDIT" href="#" style="opacity:.6; position: absolute; top:90%;"><i class="fas fa-image"></i></a>
<!--MODAL CONTENT-->
<div class="collapse w-100 h-100 fade p-3" id="FIG6" style="position:absolute; top:0; left:0; background:rgba(0,0,0,0.8); z-index:2;">
<!--div aligns content to center of screen-->
<div class="justify-content-center">
<!--CARD CONTENT-->
<div class="card w-100 p-3" style="height: 425px; overflow-y:auto;">
<!--CLOSE BUTTON-->
<a data-toggle="collapse" href="#FIG6" style="position:absolute; top:10px; right:15px;"><i class="fa-solid fa-xmark"></i></a>
<h1 class="display-4 mb-2 ml-1">HEADER</h1><div class="card mb-2"></div>
<p>Nam vestibulum massa quis varius venenatis. Proin pretium scelerisque tortor. Nulla egestas ultrices arcu id iaculis. Nunc eu hendrerit nisl. Praesent dignissim nisl eget enim porttitor lacinia. Praesent sagittis commodo convallis. Curabitur molestie quis libero eget pulvinar. Nunc malesuada sem purus, non fermentum eros venenatis sed. Vestibulum ullamcorper quam lorem, vitae bibendum nisi efficitur volutpat. Etiam at urna cursus, tempus nibh scelerisque, varius nibh. In sit amet ornare lorem. Vestibulum sit amet tortor at sem elementum pellentesque eget ut dolor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent interdum commodo blandit.</p>
<p>Aliquam tristique, nisi vel tristique tempus, urna sapien venenatis lectus, eu hendrerit dolor mauris sed elit. Duis non leo lacus. Nunc feugiat vestibulum blandit. Morbi pretium sapien ut orci porttitor, a laoreet neque tempor. Aliquam eget ante dui. Nullam imperdiet nulla id auctor cursus. Vestibulum sit amet volutpat ligula. Sed pellentesque pharetra mollis. Donec hendrerit pharetra risus, ut sagittis arcu lobortis id.</p>
</div> <!--card content end-->
</div> <!--div to align to center of screen end-->
</div> <!--modal content end-->
</div>
<!--FIG 6-->
</div>
<!--END OF FIGURES ROW 2-->
</div>
<!--END OF KEY FIGURES-->
</div>
<!--END OF TABS-->
<!--CREDIT DO NOT EDIT-->
<div class="card bg-transparent border-0 my-3">
<center>
<a class="btn btn-sm text-light m-1" style="background: #730006;" href="https://toyhou.se/BigGayFish" role="button"><i class="fa-regular fa-copyright"></i> BigGayFish</a>
<a class="btn btn-sm text-light m-1" style="background: #730006;" href="https://toyhou.se/7111301.-snippet-pop-up" role="button"><i class="fa-solid fa-scissors"></i> Code Snippet 1 - Aurorean</a>
<a class="btn btn-sm text-light m-1" style="background: #730006;" href="https://toyhou.se/17058639.-snippet-to-top-bottom" role="button"><i class="fa-solid fa-scissors"></i> Code Snippet 2 - Aurorean</a>
</center>
</div>
<!--CREDIT DO NOT EDIT-->
</div>