<!----------------------------------------------------------------
WORLDBUILDING PROFILE
Profile by HTMLobster (noll)
TOS:
Do not remove my credit. You may edit it, however.
You may edit code/frankenstein with others as long as their TOS allows!
Turn off WYSIWYG and turn on Code Editor.
Ask me if you want to redistribute edits. Must be F2U.
------------------------------------------------------------------>
<!--- Any description in this layout can be as long as you want, just add more <p></p> sections!
You can also delete, add, or change any of the sections to suit you story.
Start and end sections are all labeled. --->
<div class="container p-2">
<div class="bg-info rounded p-3">
<div class="text-center bg-faded p-1 rounded mb-3">
<!--- Story title --->
<h1 class="text-primary" style="font-size:3em;">World/Story Name</h1>
</div>
<div class="bg-faded p-2 rounded mb-3 row no-gutters">
<div class="col-auto bg-primary rounded p-1 mr-2"></div>
<div class="col mr-2">
<!--- Story summary --->
<p>A brief summary of the story or world. Can actually be quite long if you desire. This section does not scroll.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ultricies ante dapibus risus porttitor, vitae scelerisque ex viverra. Duis et turpis lacus. Vivamus eu tellus in nibh ultricies tristique a vitae eros. Vivamus aliquam, libero non tempus tempor, nunc sem vehicula felis, nec aliquet sapien dui nec lectus. Nam tempor porttitor suscipit. Suspendisse commodo nec nisi in condimentum. Vivamus et interdum erat. Vivamus suscipit quam leo, sit amet scelerisque tellus malesuada nec. Curabitur sagittis a odio at varius. Nunc finibus ligula eget velit consequat sollicitudin. In at augue vulputate, hendrerit justo imperdiet, porta dui. Aliquam at porttitor dui.</p>
<p>Aliquam nulla dolor, sodales a tristique eu, tristique sit amet nisi. Aenean vitae posuere ligula. Suspendisse pharetra dapibus nibh ac aliquam. Suspendisse convallis odio id nibh facilisis, a tempus nisl tristique. Phasellus feugiat scelerisque felis, vel tincidunt tellus vehicula eu. Nam posuere quis felis at ultricies. Sed quis lorem sit amet elit elementum feugiat sit amet et orci. Cras ut leo id turpis eleifend pretium at vel nisi.</p>
</div>
<div class="col-auto bg-primary rounded p-1"></div>
</div>
<!--- Nav tab buttons start --->
<div class="mb-3">
<ul class="nav nav-tabs row no-gutters border-0">
<!--- Button 1 --->
<li class="col-md col-6 mr-2 mb-2 mb-md-0"><a class="btn btn-block btn-secondary border-0 bg-secondary text-white text-center active show" style="font-size:1.5em;" data-toggle="tab" href="#story">Story</a></li>
<!--- Button 2 --->
<li class="col-md col mr-md-2 mb-2 mb-md-0"><a class="btn btn-block btn-secondary border-0 bg-secondary text-white text-center show" style="font-size:1.5em;" data-toggle="tab" href="#society">Society</a></li>
<!--- Button 3 --->
<li class="col-md col-6 mr-2 mb-2 mb-md-0"><a class="btn btn-block btn-secondary border-0 bg-secondary text-white text-center show" style="font-size:1.5em;" data-toggle="tab" href="#magic">Magic</a></li>
<!--- Button 4 --->
<li class="col-md col mr-md-2"><a class="btn btn-block btn-secondary border-0 bg-secondary text-white text-center show" style="font-size:1.5em;" data-toggle="tab" href="#species">Species</a></li>
<!--- Button 5 --->
<li class="col-md col-6 mr-2"><a class="btn btn-block btn-secondary border-0 bg-secondary text-white text-center show" style="font-size:1.5em;" data-toggle="tab" href="#chars">Characters</a></li>
<!--- Button 6 --->
<li class="col-md col"><a class="btn btn-block btn-secondary border-0 bg-secondary text-white text-center show" style="font-size:1.5em;" data-toggle="tab" href="#lands">Lands</a></li>
</ul>
</div>
<!--- Nav tab buttons end --->
<!--- Tab content start --->
<div class="tab-content bg-faded rounded p-2">
<!--- Tab 1 start --->
<div class="tab-pane fade active show" id="story">
<!--- Heading 1 --->
<h1 class="text-primary" style="font-size:2em;"><i class="fas fa-history mr-2"></i> World History</h1>
<!--- Subheading --->
<h2 class="text-secondary">Past</h2>
<!--- Description --->
<p>Sed rutrum fermentum blandit. Vivamus vehicula eu nulla ut ultricies. Suspendisse pulvinar dignissim lorem. Pellentesque a dignissim diam. Donec tortor lacus, imperdiet in est ut, consectetur mollis massa. Aliquam convallis purus id augue iaculis blandit. Sed mattis condimentum tellus non maximus. Donec dictum, nisl et interdum tincidunt, quam nisi sagittis risus, vitae tincidunt neque nisi a tortor.</p>
<!--- Subheading --->
<h2 class="text-secondary">Present</h2>
<!--- Description --->
<p>Etiam interdum lacus purus, non tincidunt arcu sollicitudin a. Curabitur vestibulum ornare semper. Curabitur ac volutpat neque. Phasellus nec neque vel odio finibus interdum eu sed leo. Nam eget congue orci. Cras molestie gravida eros, at aliquet lorem luctus at. Mauris faucibus quis ex non euismod. Proin lobortis id elit et ornare. Cras sit amet porta erat, et aliquet libero. Ut bibendum, mi et iaculis pellentesque, dui enim aliquet purus, non maximus quam diam vitae tortor.</p>
<!--- Subheading --->
<h2 class="text-secondary">Future</h2>
<!--- Description --->
<p>Praesent egestas sollicitudin dui, in feugiat lacus maximus ac. Aliquam ac tellus tortor. Vivamus mi dolor, dictum vitae massa id, tristique commodo lacus. Donec eget libero vel nibh accumsan luctus nec non nibh. Donec tincidunt varius libero. Donec ut erat aliquam, accumsan mi id, mattis neque. Aenean sit amet sollicitudin mi, sed tincidunt libero. Integer ut lobortis quam. Etiam faucibus a ligula id iaculis. Quisque porta diam nec leo euismod facilisis vitae eu est.</p>
<!--- Divider --->
<div class="pt-1 bg-secondary rounded mb-3"></div>
<!--- Heading 2 --->
<h1 class="text-primary" style="font-size:2em;"><i class="fas fa-folder-open mr-2"></i> Story Plot</h1>
<!--- Description --->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ultricies ante dapibus risus porttitor, vitae scelerisque ex viverra. Duis et turpis lacus. Vivamus eu tellus in nibh ultricies tristique a vitae eros. Vivamus aliquam, libero non tempus tempor, nunc sem vehicula felis, nec aliquet sapien dui nec lectus. Nam tempor porttitor suscipit. Suspendisse commodo nec nisi in condimentum. Vivamus et interdum erat. Vivamus suscipit quam leo, sit amet scelerisque tellus malesuada nec. Curabitur sagittis a odio at varius. Nunc finibus ligula eget velit consequat sollicitudin. In at augue vulputate, hendrerit justo imperdiet, porta dui. Aliquam at porttitor dui.</p>
<p>Aliquam nulla dolor, sodales a tristique eu, tristique sit amet nisi. Aenean vitae posuere ligula. Suspendisse pharetra dapibus nibh ac aliquam. Suspendisse convallis odio id nibh facilisis, a tempus nisl tristique. Phasellus feugiat scelerisque felis, vel tincidunt tellus vehicula eu. Nam posuere quis felis at ultricies. Sed quis lorem sit amet elit elementum feugiat sit amet et orci. Cras ut leo id turpis eleifend pretium at vel nisi.</p>
<p>Curabitur ante mi, aliquet imperdiet sem in, lacinia vehicula libero. In luctus nunc at nunc euismod dapibus. Maecenas porta elit id semper molestie. Proin scelerisque neque diam, ut consectetur orci volutpat a. Maecenas feugiat sem vitae sem bibendum, at venenatis nulla suscipit. Fusce finibus, orci id accumsan elementum, eros sapien scelerisque quam, eu scelerisque enim tortor a tortor. Vestibulum cursus porttitor arcu, eget condimentum eros consectetur eget. Phasellus sit amet purus ante. Fusce fringilla tellus lobortis purus auctor consequat.</p>
</div>
<!--- Tab 1 end --->
<!--- Tab 2 start --->
<div class="tab-pane fade" id="society">
<!--- Heading 1 --->
<h1 class="text-primary" style="font-size:2em;"><i class="fas fa-wheat mr-2"></i> Culture</h1>
<!--- Subheading --->
<h2 class="text-secondary">Language(s)</h2>
<!--- Description --->
<p>Description of different languages used. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ultricies ante dapibus risus porttitor, vitae scelerisque ex viverra. Duis et turpis lacus. Vivamus eu tellus in nibh ultricies tristique a vitae eros. Vivamus aliquam, libero non tempus tempor, nunc sem vehicula felis, nec aliquet sapien dui nec lectus. Nam tempor porttitor suscipit. Suspendisse commodo nec nisi in condimentum. Vivamus et interdum erat. Vivamus suscipit quam leo, sit amet scelerisque tellus malesuada nec. Curabitur sagittis a odio at varius. Nunc finibus ligula eget velit consequat sollicitudin. In at augue vulputate, hendrerit justo imperdiet, porta dui. Aliquam at porttitor dui.</p>
<!--- Subheading --->
<h2 class="text-secondary">Clothing</h2>
<!--- Description --->
<p>Description of clothing worn and by whom. Aliquam nulla dolor, sodales a tristique eu, tristique sit amet nisi. Aenean vitae posuere ligula. Suspendisse pharetra dapibus nibh ac aliquam. Suspendisse convallis odio id nibh facilisis, a tempus nisl tristique. Phasellus feugiat scelerisque felis, vel tincidunt tellus vehicula eu. Nam posuere quis felis at ultricies. Sed quis lorem sit amet elit elementum feugiat sit amet et orci. Cras ut leo id turpis eleifend pretium at vel nisi.</p>
<!--- Subheading --->
<h2 class="text-secondary">Food</h2>
<!--- Description --->
<p>Description of types of food. Sed rutrum fermentum blandit. Vivamus vehicula eu nulla ut ultricies. Suspendisse pulvinar dignissim lorem. Pellentesque a dignissim diam. Donec tortor lacus, imperdiet in est ut, consectetur mollis massa. Aliquam convallis purus id augue iaculis blandit. Sed mattis condimentum tellus non maximus. Donec dictum, nisl et interdum tincidunt, quam nisi sagittis risus, vitae tincidunt neque nisi a tortor.</p>
<!--- Subheading --->
<h2 class="text-secondary">Traditions</h2>
<!--- Description --->
<p>Description of various traditions. Etiam interdum lacus purus, non tincidunt arcu sollicitudin a. Curabitur vestibulum ornare semper. Curabitur ac volutpat neque. Phasellus nec neque vel odio finibus interdum eu sed leo. Nam eget congue orci. Cras molestie gravida eros, at aliquet lorem luctus at. Mauris faucibus quis ex non euismod. Proin lobortis id elit et ornare. Cras sit amet porta erat, et aliquet libero. Ut bibendum, mi et iaculis pellentesque, dui enim aliquet purus, non maximus quam diam vitae tortor.</p>
<!--- Subheading --->
<h2 class="text-secondary">Festivals/Holidays</h2>
<!--- Description --->
<p>Description of various festivals or holidays, either secular or not. Praesent egestas sollicitudin dui, in feugiat lacus maximus ac. Aliquam ac tellus tortor. Vivamus mi dolor, dictum vitae massa id, tristique commodo lacus. Donec eget libero vel nibh accumsan luctus nec non nibh. Donec tincidunt varius libero. Donec ut erat aliquam, accumsan mi id, mattis neque. Aenean sit amet sollicitudin mi, sed tincidunt libero. Integer ut lobortis quam. Etiam faucibus a ligula id iaculis. Quisque porta diam nec leo euismod facilisis vitae eu est.</p>
<!--- Divider --->
<div class="pt-1 bg-secondary rounded mb-3"></div>
<!--- Heading 2 --->
<h1 class="text-primary" style="font-size:2em;"><i class="fas fa-place-of-worship mr-2"></i> Religion</h1>
<!--- Subheading --->
<h2 class="text-secondary">Basics</h2>
<!--- Description --->
<p>Describe name and basics (who believes, origins, hierarchy, etc.). Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ultricies ante dapibus risus porttitor, vitae scelerisque ex viverra. Duis et turpis lacus. Vivamus eu tellus in nibh ultricies tristique a vitae eros. Suspendisse commodo nec nisi in condimentum. Vivamus et interdum erat. Vivamus suscipit quam leo, sit amet scelerisque tellus malesuada nec. Curabitur sagittis a odio at varius. Nunc finibus ligula eget velit consequat sollicitudin. In at augue vulputate, hendrerit justo imperdiet, porta dui. Aliquam at porttitor dui.</p>
<!--- Subheading --->
<h2 class="text-secondary">Roles</h2>
<!--- Description --->
<p>Description of roles of people in the religion (religious leaders, laypeople, etc.). Aliquam nulla dolor, sodales a tristique eu, tristique sit amet nisi. Aenean vitae posuere ligula. Suspendisse pharetra dapibus nibh ac aliquam. Suspendisse convallis odio id nibh facilisis, a tempus nisl tristique. Phasellus feugiat scelerisque felis, vel tincidunt tellus vehicula eu. Nam posuere quis felis at ultricies. Sed quis lorem sit amet elit elementum feugiat sit amet et orci. Cras ut leo id turpis eleifend pretium at vel nisi.</p>
<!--- Subheading --->
<h2 class="text-secondary">Gods</h2>
<!--- Sub subheading --->
<h5>Name</h5>
<!--- Description --->
<p>Description of god. Sed rutrum fermentum blandit. Vivamus vehicula eu nulla ut ultricies. Suspendisse pulvinar dignissim lorem. Pellentesque a dignissim diam. Donec tortor lacus, imperdiet in est ut, consectetur mollis massa. </p>
<!--- Sub subheading --->
<h5>Name</h5>
<!--- Description --->
<p>Description of god. Sed rutrum fermentum blandit. Vivamus vehicula eu nulla ut ultricies. Suspendisse pulvinar dignissim lorem. Pellentesque a dignissim diam. Donec tortor lacus, imperdiet in est ut, consectetur mollis massa. </p>
<!--- Sub subheading --->
<h5>Name</h5>
<!--- Description --->
<p>Description of god. Aliquam convallis purus id augue iaculis blandit. Sed mattis condimentum tellus non maximus. Donec dictum, nisl et interdum tincidunt, quam nisi sagittis risus, vitae tincidunt neque nisi a tortor.</p>
<!--- Subheading --->
<h2 class="text-secondary">Places of Worship</h2>
<!--- Description --->
<p>Description of places of worship. Etiam interdum lacus purus, non tincidunt arcu sollicitudin a. Curabitur vestibulum ornare semper. Curabitur ac volutpat neque. Phasellus nec neque vel odio finibus interdum eu sed leo. Nam eget congue orci. Cras molestie gravida eros, at aliquet lorem luctus at. Mauris faucibus quis ex non euismod. Proin lobortis id elit et ornare. Cras sit amet porta erat, et aliquet libero. Ut bibendum, mi et iaculis pellentesque, dui enim aliquet purus, non maximus quam diam vitae tortor.</p>
<!--- Subheading --->
<h2 class="text-secondary">Practices</h2>
<p>Description of religious practices (praying, offerings, gathering, etc.). Praesent egestas sollicitudin dui, in feugiat lacus maximus ac. Aliquam ac tellus tortor. Vivamus mi dolor, dictum vitae massa id, tristique commodo lacus. Donec eget libero vel nibh accumsan luctus nec non nibh. Donec tincidunt varius libero. Donec ut erat aliquam, accumsan mi id, mattis neque. Aenean sit amet sollicitudin mi, sed tincidunt libero. Integer ut lobortis quam. Etiam faucibus a ligula id iaculis. Quisque porta diam nec leo euismod facilisis vitae eu est.</p>
<!--- Subheading --->
<h2 class="text-secondary">Myths/Teachings</h2>
<!--- Description --->
<p>Description of religious myths or teachings (what they are, where they can be found (book, oral tradition, papyri, etc.), etc.). Praesent egestas sollicitudin dui, in feugiat lacus maximus ac. Aliquam ac tellus tortor. Vivamus mi dolor, dictum vitae massa id, tristique commodo lacus. Donec eget libero vel nibh accumsan luctus nec non nibh. Donec tincidunt varius libero. Donec ut erat aliquam, accumsan mi id, mattis neque. Aenean sit amet sollicitudin mi, sed tincidunt libero. Integer ut lobortis quam. Etiam faucibus a ligula id iaculis. Quisque porta diam nec leo euismod facilisis vitae eu est.</p>
<!--- Subheading --->
<h2 class="text-secondary">Beliefs</h2>
<!--- Description --->
<p>Describe beliefs of religion (life, afterlife, search for meaning, ethics and morals, etc.). Vivamus aliquam, libero non tempus tempor, nunc sem vehicula felis, nec aliquet sapien dui nec lectus. Nam tempor porttitor suscipit. Suspendisse commodo nec nisi in condimentum. Vivamus et interdum erat. Vivamus suscipit quam leo, sit amet scelerisque tellus malesuada nec. Curabitur sagittis a odio at varius. Nunc finibus ligula eget velit consequat sollicitudin. In at augue vulputate, hendrerit justo imperdiet, porta dui. Aliquam at porttitor dui.</p>
<!--- Divider --->
<div class="pt-1 bg-secondary rounded mb-3"></div>
<!--- Heading 3 --->
<h1 class="text-primary" style="font-size:2em;"><i class="fas fa-globe mr-2"></i> Society</h1>
<!--- Subheading --->
<h2 class="text-secondary">Government</h2>
<!--- Description --->
<p>Description of type of government. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ultricies ante dapibus risus porttitor, vitae scelerisque ex viverra. Duis et turpis lacus. Vivamus eu tellus in nibh ultricies tristique a vitae eros. Vivamus aliquam, libero non tempus tempor, nunc sem vehicula felis, nec aliquet sapien dui nec lectus. Nam tempor porttitor suscipit. Suspendisse commodo nec nisi in condimentum. Vivamus et interdum erat. Vivamus suscipit quam leo, sit amet scelerisque tellus malesuada nec. Curabitur sagittis a odio at varius. Nunc finibus ligula eget velit consequat sollicitudin. In at augue vulputate, hendrerit justo imperdiet, porta dui. Aliquam at porttitor dui.</p>
<!--- Subheading --->
<h2 class="text-secondary">Economy</h2>
<!--- Description --->
<p>Description of economic type and situation. Aliquam nulla dolor, sodales a tristique eu, tristique sit amet nisi. Aenean vitae posuere ligula. Suspendisse pharetra dapibus nibh ac aliquam. Suspendisse convallis odio id nibh facilisis, a tempus nisl tristique. Phasellus feugiat scelerisque felis, vel tincidunt tellus vehicula eu. Nam posuere quis felis at ultricies. Sed quis lorem sit amet elit elementum feugiat sit amet et orci. Cras ut leo id turpis eleifend pretium at vel nisi.</p>
<!--- Subheading --->
<h2 class="text-secondary">Occupations</h2>
<!--- Description --->
<p>Description of different occupations available (agriculture, technology, arts, etc.). Sed rutrum fermentum blandit. Vivamus vehicula eu nulla ut ultricies. Suspendisse pulvinar dignissim lorem. Pellentesque a dignissim diam. Donec tortor lacus, imperdiet in est ut, consectetur mollis massa. Aliquam convallis purus id augue iaculis blandit. Sed mattis condimentum tellus non maximus. Donec dictum, nisl et interdum tincidunt, quam nisi sagittis risus, vitae tincidunt neque nisi a tortor.</p>
<!--- Subheading --->
<h2 class="text-secondary">Technology</h2>
<!--- Description --->
<p>Description of available technology. Etiam interdum lacus purus, non tincidunt arcu sollicitudin a. Curabitur vestibulum ornare semper. Curabitur ac volutpat neque. Phasellus nec neque vel odio finibus interdum eu sed leo. Nam eget congue orci. Cras molestie gravida eros, at aliquet lorem luctus at. Mauris faucibus quis ex non euismod. Proin lobortis id elit et ornare. Cras sit amet porta erat, et aliquet libero. Ut bibendum, mi et iaculis pellentesque, dui enim aliquet purus, non maximus quam diam vitae tortor.</p>
<!--- Subheading --->
<h2 class="text-secondary">Housing</h2>
<!--- Description --->
<p>Description of types of living. Praesent egestas sollicitudin dui, in feugiat lacus maximus ac. Aliquam ac tellus tortor. Vivamus mi dolor, dictum vitae massa id, tristique commodo lacus. Donec eget libero vel nibh accumsan luctus nec non nibh. Donec tincidunt varius libero. Donec ut erat aliquam, accumsan mi id, mattis neque. Aenean sit amet sollicitudin mi, sed tincidunt libero. Integer ut lobortis quam. Etiam faucibus a ligula id iaculis. Quisque porta diam nec leo euismod facilisis vitae eu est.</p>
</div>
<!--- Tab 2 end --->
<!--- Tab 3 start --->
<div class="tab-pane fade" id="magic">
<!--- Heading 1 --->
<h1 class="text-primary" style="font-size:2em;"><i class="fas fa-book-spells mr-2"></i> How it Works</h1>
<!--- Subheading --->
<h2 class="text-secondary">Source</h2>
<!--- Description --->
<p>Description of where it comes from (the divine, a flower, a lake, an artifact, etc.). Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ultricies ante dapibus risus porttitor, vitae scelerisque ex viverra. Duis et turpis lacus. Vivamus eu tellus in nibh ultricies tristique a vitae eros. Vivamus aliquam, libero non tempus tempor, nunc sem vehicula felis, nec aliquet sapien dui nec lectus. Nam tempor porttitor suscipit. Suspendisse commodo nec nisi in condimentum. Vivamus et interdum erat. Vivamus suscipit quam leo, sit amet scelerisque tellus malesuada nec. Curabitur sagittis a odio at varius. Nunc finibus ligula eget velit consequat sollicitudin. In at augue vulputate, hendrerit justo imperdiet, porta dui. Aliquam at porttitor dui.</p>
<!--- Subheading --->
<h2 class="text-secondary">Abundance</h2>
<!--- Description --->
<p>Description of how common/uncommon it is/what sort of beings have it. Aliquam nulla dolor, sodales a tristique eu, tristique sit amet nisi. Aenean vitae posuere ligula. Suspendisse pharetra dapibus nibh ac aliquam. Suspendisse convallis odio id nibh facilisis, a tempus nisl tristique. Phasellus feugiat scelerisque felis, vel tincidunt tellus vehicula eu. Nam posuere quis felis at ultricies. Sed quis lorem sit amet elit elementum feugiat sit amet et orci. Cras ut leo id turpis eleifend pretium at vel nisi.</p>
<!--- Subheading --->
<h2 class="text-secondary">Acquisition</h2>
<!--- Description --->
<p>Description of how a being can acquire magic (born, earned, etc.). Sed rutrum fermentum blandit. Vivamus vehicula eu nulla ut ultricies. Suspendisse pulvinar dignissim lorem. Pellentesque a dignissim diam. Donec tortor lacus, imperdiet in est ut, consectetur mollis massa. Aliquam convallis purus id augue iaculis blandit. Sed mattis condimentum tellus non maximus. Donec dictum, nisl et interdum tincidunt, quam nisi sagittis risus, vitae tincidunt neque nisi a tortor.</p>
<!--- Divider --->
<div class="pt-1 bg-secondary rounded mb-3"></div>
<!--- Heading 2 --->
<h1 class="text-primary" style="font-size:2em;"><i class="fas fa-sparkles mr-2"></i> Types</h1>
<!--- Subheading --->
<h2 class="text-secondary">Type</h2>
<!--- Description --->
<p>Description of type of magic and how beings use it (speaking, gestures, spellbooks, etc.). Etiam interdum lacus purus, non tincidunt arcu sollicitudin a. Curabitur vestibulum ornare semper. Curabitur ac volutpat neque. Phasellus nec neque vel odio finibus interdum eu sed leo. Nam eget congue orci. Cras molestie gravida eros, at aliquet lorem luctus at. Mauris faucibus quis ex non euismod. Proin lobortis id elit et ornare. Cras sit amet porta erat, et aliquet libero. Ut bibendum, mi et iaculis pellentesque, dui enim aliquet purus, non maximus quam diam vitae tortor.</p>
<!--- Subheading --->
<h2 class="text-secondary">Type</h2>
<!--- Description --->
<p>Description of type of magic and how beings use it (speaking, gestures, spellbooks, etc.). Praesent egestas sollicitudin dui, in feugiat lacus maximus ac. Aliquam ac tellus tortor. Vivamus mi dolor, dictum vitae massa id, tristique commodo lacus. Donec eget libero vel nibh accumsan luctus nec non nibh. Donec tincidunt varius libero. Donec ut erat aliquam, accumsan mi id, mattis neque. Aenean sit amet sollicitudin mi, sed tincidunt libero. Integer ut lobortis quam. Etiam faucibus a ligula id iaculis. Quisque porta diam nec leo euismod facilisis vitae eu est.</p>
</div>
<!--- Tab 3 end --->
<!--- Tab 4 start --->
<div class="tab-pane fade" id="species">
<!--- Heading --->
<h1 class="text-primary" style="font-size:2em;"><i class="fas fa-flower-tulip mr-2"></i> Flora</h1>
<!--- Row 1 start --->
<div class="row no-gutters mb-2">
<!--- Species 1 --->
<div class="col-md col-12 mr-md-2 mr-0 mb-md-0 mb-2">
<!--- Species image --->
<div class="mb-2" style="background:url(https://via.placeholder.com/600.png) center; background-size:cover; height:300px;"></div>
<!--- Species name --->
<h4 class="mb-0 text-primary">Species Name</h4>
<!--- Species tags - examples: edible, medicinal, poisonous, perennial, annual, carnivorous, common, uncommon, rare, etc. Change bg to any color to reflect tagging - examples: bg-warning, bg-danger, bg-success, bg-secondary, bg-primary --->
<span class="badge badge-pill bg-success">edible</span> <span class="badge badge-pill bg-warning">poisonous</span> <span class="badge badge-pill bg-secondary">perennial</span>
<!--- Description --->
<p>Description. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ultricies ante dapibus risus porttitor, vitae scelerisque ex viverra. Duis et turpis lacus. </p>
</div>
<!--- Species 2 --->
<div class="col-md col-12 mr-md-2 mr-0 mb-md-0 mb-2">
<!--- Species image --->
<div class="mb-2" style="background:url(https://via.placeholder.com/600.png) center; background-size:cover; height:300px;"></div>
<!--- Species name --->
<h4 class="mb-0 text-primary">Species Name</h4>
<!--- Species tags - examples: edible, medicinal, poisonous, perennial, annual, carnivorous, common, uncommon, rare, etc. Change bg to any color to reflect tagging - examples: bg-warning, bg-danger, bg-success, bg-secondary, bg-primary --->
<span class="badge badge-pill bg-secondary">tag</span> <span class="badge badge-pill bg-secondary">tag</span> <span class="badge badge-pill bg-secondary">tag</span>
<!--- Description --->
<p>Description. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ultricies ante dapibus risus porttitor, vitae scelerisque ex viverra. Duis et turpis lacus. </p>
</div>
<!--- Species 3 --->
<div class="col-md col-12 mr-md-2 mr-0 mb-md-0 mb-2">
<!--- Species image --->
<div class="mb-2" style="background:url(https://via.placeholder.com/600.png) center; background-size:cover; height:300px;"></div>
<!--- Species name --->
<h4 class="mb-0 text-primary">Species Name</h4>
<!--- Species tags - examples: edible, medicinal, poisonous, perennial, annual, carnivorous, common, uncommon, rare, etc. Change bg to any color to reflect tagging - examples: bg-warning, bg-danger, bg-success, bg-secondary, bg-primary --->
<span class="badge badge-pill bg-secondary">tag</span> <span class="badge badge-pill bg-secondary">tag</span> <span class="badge badge-pill bg-secondary">tag</span>
<!--- Description --->
<p>Description. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ultricies ante dapibus risus porttitor, vitae scelerisque ex viverra. Duis et turpis lacus. </p>
</div>
<!--- Species 4 --->
<!--- Div class of final species in row should just be "col-md col-12" --->
<div class="col-md col-12">
<!--- Species image --->
<div class="mb-2" style="background:url(https://via.placeholder.com/600.png) center; background-size:cover; height:300px;"></div>
<!--- Species name --->
<h4 class="mb-0 text-primary">Species Name</h4>
<!--- Species tags - examples: edible, medicinal, poisonous, perennial, annual, carnivorous, common, uncommon, rare, etc. Change bg to any color to reflect tagging - examples: bg-warning, bg-danger, bg-success, bg-secondary, bg-primary --->
<span class="badge badge-pill bg-secondary">tag</span> <span class="badge badge-pill bg-secondary">tag</span> <span class="badge badge-pill bg-secondary">tag</span>
<!--- Description --->
<p>Description. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ultricies ante dapibus risus porttitor, vitae scelerisque ex viverra. Duis et turpis lacus. </p>
</div>
</div>
<!--- Row 1 end --->
<!--- For another row, copy from start of row to end and paste below. Add another full row if you want more species, don't add items to existing row. You may delete items within a row, however, but make sure the final item is formatted correctly. --->
<!--- Divider --->
<div class="pt-1 bg-secondary rounded my-3"></div>
<!--- Heading 2 --->
<h1 class="text-primary" style="font-size:2em;"><i class="fas fa-paw mr-2"></i> Fauna</h1>
<!--- Row 1 start --->
<div class="row no-gutters mb-2">
<!--- Species 1 --->
<div class="col-md col-12 mr-md-2 mr-0 mb-md-0 mb-2">
<!--- Species image --->
<div class="mb-2" style="background:url(https://via.placeholder.com/600.png) center; background-size:cover; height:300px;"></div>
<!--- Species name --->
<h4 class="mb-0 text-primary">Species Name</h4>
<!--- Species tags - examples: mammal, bird, reptile, amphibian, invertebrate, venomous, carnivore, herbivore, omnivore, insectivore common, uncommon, rare, etc. Change bg to any color to reflect tagging - examples: bg-warning, bg-danger, bg-success, bg-secondary, bg-primary --->
<span class="badge badge-pill bg-success">reptile</span> <span class="badge badge-pill bg-warning">venomous</span> <span class="badge badge-pill bg-secondary">common</span>
<!--- Description --->
<p>Description. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ultricies ante dapibus risus porttitor, vitae scelerisque ex viverra. Duis et turpis lacus. </p>
</div>
<!--- Species 2 --->
<div class="col-md col-12 mr-md-2 mr-0 mb-md-0 mb-2">
<!--- Species image --->
<div class="mb-2" style="background:url(https://via.placeholder.com/600.png) center; background-size:cover; height:300px;"></div>
<!--- Species name --->
<h4 class="mb-0 text-primary">Species Name</h4>
<!--- Species tags - examples: mammal, bird, reptile, amphibian, invertebrate, venomous, carnivore, herbivore, omnivore, insectivore common, uncommon, rare, etc. Change bg to any color to reflect tagging - examples: bg-warning, bg-danger, bg-success, bg-secondary, bg-primary --->
<span class="badge badge-pill bg-secondary">tag</span> <span class="badge badge-pill bg-secondary">tag</span> <span class="badge badge-pill bg-secondary">tag</span>
<!--- Description --->
<p>Description. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ultricies ante dapibus risus porttitor, vitae scelerisque ex viverra. Duis et turpis lacus. </p>
</div>
<!--- Species 3 --->
<div class="col-md col-12 mr-md-2 mr-0 mb-md-0 mb-2">
<!--- Species image --->
<div class="mb-2" style="background:url(https://via.placeholder.com/600.png) center; background-size:cover; height:300px;"></div>
<!--- Species name --->
<h4 class="mb-0 text-primary">Species Name</h4>
<!--- Species tags - examples: mammal, bird, reptile, amphibian, invertebrate, venomous, carnivore, herbivore, omnivore, insectivore common, uncommon, rare, etc. Change bg to any color to reflect tagging - examples: bg-warning, bg-danger, bg-success, bg-secondary, bg-primary --->
<span class="badge badge-pill bg-secondary">tag</span> <span class="badge badge-pill bg-secondary">tag</span> <span class="badge badge-pill bg-secondary">tag</span>
<!--- Description --->
<p>Description. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ultricies ante dapibus risus porttitor, vitae scelerisque ex viverra. Duis et turpis lacus. </p>
</div>
<!--- Species 4 --->
<!--- Div class of final species in row should just be "col-md col-12" --->
<div class="col-md col-12">
<!--- Species image --->
<div class="mb-2" style="background:url(https://via.placeholder.com/600.png) center; background-size:cover; height:300px;"></div>
<!--- Species name --->
<h4 class="mb-0 text-primary">Species Name</h4>
<!--- Species tags - examples: mammal, bird, reptile, amphibian, invertebrate, venomous, carnivore, herbivore, omnivore, insectivore common, uncommon, rare, etc. Change bg to any color to reflect tagging - examples: bg-warning, bg-danger, bg-success, bg-secondary, bg-primary --->
<span class="badge badge-pill bg-secondary">tag</span> <span class="badge badge-pill bg-secondary">tag</span> <span class="badge badge-pill bg-secondary">tag</span>
<!--- Description --->
<p>Description. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ultricies ante dapibus risus porttitor, vitae scelerisque ex viverra. Duis et turpis lacus. </p>
</div>
</div>
<!--- Row 1 end --->
<!--- For another row, copy from start of row to end and paste below. Add another full row if you want more species, don't add items to existing row. You may delete items within a row, however, but make sure the final item is formatted correctly. --->
</div>
<!--- Tab 4 end --->
<!--- Tab 5 start --->
<div class="tab-pane fade" id="chars">
<!--- Heading 1 --->
<h1 class="text-primary" style="font-size:2em;"><i class="fas fa-user mr-2"></i> Main</h1>
<!--- Row 1 start --->
<div class="row no-gutters mb-2">
<!--- Character 1 --->
<div class="col-md col-12 mr-md-2 mr-0 mb-md-0 mb-2">
<!--- Character image --->
<div class="mb-2" style="background:url(https://via.placeholder.com/600.png) center; background-size:cover; height:300px;"></div>
<table class="w-100 border-0">
<tr>
<!--- Character name --->
<td class="m-0 p-0"><h4><a href="CHAR_URL">Name</a></h4></td>
<!--- Character role --->
<td class="m-0 p-0 text-right"><h4>Role</h4></td>
</tr>
</table>
<!--- Description --->
<p>Description. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ultricies ante dapibus risus porttitor, vitae scelerisque ex viverra. Duis et turpis lacus. </p>
</div>
<!--- Character 2 --->
<div class="col-md col-12 mr-md-2 mr-0 mb-md-0 mb-2">
<!--- Character image --->
<div class="mb-2" style="background:url(https://via.placeholder.com/600.png) center; background-size:cover; height:300px;"></div>
<table class="w-100 border-0">
<tr>
<!--- Character name --->
<td class="m-0 p-0"><h4><a href="CHAR_URL">Name</a></h4></td>
<!--- Character role --->
<td class="m-0 p-0 text-right"><h4>Role</h4></td>
</tr>
</table>
<!--- Description --->
<p>Description. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ultricies ante dapibus risus porttitor, vitae scelerisque ex viverra. Duis et turpis lacus. </p>
</div>
<!--- Character 3 --->
<div class="col-md col-12 mr-md-2 mr-0 mb-md-0 mb-2">
<!--- Character image --->
<div class="mb-2" style="background:url(https://via.placeholder.com/600.png) center; background-size:cover; height:300px;"></div>
<table class="w-100 border-0">
<tr>
<!--- Character name --->
<td class="m-0 p-0"><h4><a href="CHAR_URL">Name</a></h4></td>
<!--- Character role --->
<td class="m-0 p-0 text-right"><h4>Role</h4></td>
</tr>
</table>
<!--- Description --->
<p>Description. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ultricies ante dapibus risus porttitor, vitae scelerisque ex viverra. Duis et turpis lacus. </p>
</div>
<!--- Character 4 --->
<!--- Div class of final character in row should just be "col-md col-12" --->
<div class="col-md col-12">
<!--- Character image --->
<div class="mb-2" style="background:url(https://via.placeholder.com/600.png) center; background-size:cover; height:300px;"></div>
<table class="w-100 border-0">
<tr>
<!--- Character name --->
<td class="m-0 p-0"><h4><a href="CHAR_URL">Name</a></h4></td>
<!--- Character role --->
<td class="m-0 p-0 text-right"><h4>Role</h4></td>
</tr>
</table>
<!--- Description --->
<p>Description. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ultricies ante dapibus risus porttitor, vitae scelerisque ex viverra. Duis et turpis lacus. </p>
</div>
</div>
<!--- Row 1 end --->
<!--- For another row, copy from start of row to end and paste below. Add another full row if you want more species, don't add items to existing row. You may delete items within a row, however, but make sure the final item is formatted correctly. --->
<!--- Divider --->
<div class="pt-1 bg-secondary rounded my-3"></div>
<!--- Heading 2 --->
<h1 class="text-primary" style="font-size:2em;"><i class="far fa-user mr-2"></i> Secondary</h1>
<!--- Row 1 start --->
<div class="row no-gutters mb-2">
<!--- Character 1 --->
<div class="col-md col-12 mr-md-2 mr-0 mb-md-0 mb-2">
<!--- Character image --->
<div class="mb-2" style="background:url(https://via.placeholder.com/600.png) center; background-size:cover; height:300px;"></div>
<table class="w-100 border-0">
<tr>
<!--- Character name --->
<td class="m-0 p-0"><h4><a href="CHAR_URL">Name</a></h4></td>
<!--- Character role --->
<td class="m-0 p-0 text-right"><h4>Role</h4></td>
</tr>
</table>
<!--- Description --->
<p>Description. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ultricies ante dapibus risus porttitor, vitae scelerisque ex viverra. Duis et turpis lacus. </p>
</div>
<!--- Character 2 --->
<div class="col-md col-12 mr-md-2 mr-0 mb-md-0 mb-2">
<!--- Character image --->
<div class="mb-2" style="background:url(https://via.placeholder.com/600.png) center; background-size:cover; height:300px;"></div>
<table class="w-100 border-0">
<tr>
<!--- Character name --->
<td class="m-0 p-0"><h4><a href="CHAR_URL">Name</a></h4></td>
<!--- Character role --->
<td class="m-0 p-0 text-right"><h4>Role</h4></td>
</tr>
</table>
<!--- Description --->
<p>Description. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ultricies ante dapibus risus porttitor, vitae scelerisque ex viverra. Duis et turpis lacus. </p>
</div>
<!--- Character 3 --->
<div class="col-md col-12 mr-md-2 mr-0 mb-md-0 mb-2">
<!--- Character image --->
<div class="mb-2" style="background:url(https://via.placeholder.com/600.png) center; background-size:cover; height:300px;"></div>
<table class="w-100 border-0">
<tr>
<!--- Character name --->
<td class="m-0 p-0"><h4><a href="CHAR_URL">Name</a></h4></td>
<!--- Character role --->
<td class="m-0 p-0 text-right"><h4>Role</h4></td>
</tr>
</table>
<!--- Description --->
<p>Description. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ultricies ante dapibus risus porttitor, vitae scelerisque ex viverra. Duis et turpis lacus. </p>
</div>
<!--- Character 4 --->
<!--- Div class of final character in row should just be "col-md col-12" --->
<div class="col-md col-12">
<!--- Character image --->
<div class="mb-2" style="background:url(https://via.placeholder.com/600.png) center; background-size:cover; height:300px;"></div>
<table class="w-100 border-0">
<tr>
<!--- Character name --->
<td class="m-0 p-0"><h4><a href="CHAR_URL">Name</a></h4></td>
<!--- Character role --->
<td class="m-0 p-0 text-right"><h4>Role</h4></td>
</tr>
</table>
<!--- Description --->
<p>Description. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ultricies ante dapibus risus porttitor, vitae scelerisque ex viverra. Duis et turpis lacus. </p>
</div>
</div>
<!--- Row 1 end --->
<!--- For another row, copy from start of row to end and paste below. Add another full row if you want more species, don't add items to existing row. You may delete items within a row, however, but make sure the final item is formatted correctly. --->
<!--- Divider --->
<div class="pt-1 bg-secondary rounded my-3"></div>
<!--- Heading 3 --->
<h1 class="text-primary" style="font-size:2em;"><i class="fal fa-user mr-2"></i> Tertiary</h1>
<!--- Row 1 start --->
<div class="row no-gutters mb-2">
<!--- Character 1 --->
<div class="col-md col-12 mr-md-2 mr-0 mb-md-0 mb-2">
<!--- Character image --->
<div class="mb-2" style="background:url(https://via.placeholder.com/600.png) center; background-size:cover; height:300px;"></div>
<table class="w-100 border-0">
<tr>
<!--- Character name --->
<td class="m-0 p-0"><h4><a href="CHAR_URL">Name</a></h4></td>
<!--- Character role --->
<td class="m-0 p-0 text-right"><h4>Role</h4></td>
</tr>
</table>
<!--- Description --->
<p>Description. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ultricies ante dapibus risus porttitor, vitae scelerisque ex viverra. Duis et turpis lacus. </p>
</div>
<!--- Character 2 --->
<div class="col-md col-12 mr-md-2 mr-0 mb-md-0 mb-2">
<!--- Character image --->
<div class="mb-2" style="background:url(https://via.placeholder.com/600.png) center; background-size:cover; height:300px;"></div>
<table class="w-100 border-0">
<tr>
<!--- Character name --->
<td class="m-0 p-0"><h4><a href="CHAR_URL">Name</a></h4></td>
<!--- Character role --->
<td class="m-0 p-0 text-right"><h4>Role</h4></td>
</tr>
</table>
<!--- Description --->
<p>Description. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ultricies ante dapibus risus porttitor, vitae scelerisque ex viverra. Duis et turpis lacus. </p>
</div>
<!--- Character 3 --->
<div class="col-md col-12 mr-md-2 mr-0 mb-md-0 mb-2">
<!--- Character image --->
<div class="mb-2" style="background:url(https://via.placeholder.com/600.png) center; background-size:cover; height:300px;"></div>
<table class="w-100 border-0">
<tr>
<!--- Character name --->
<td class="m-0 p-0"><h4><a href="CHAR_URL">Name</a></h4></td>
<!--- Character role --->
<td class="m-0 p-0 text-right"><h4>Role</h4></td>
</tr>
</table>
<!--- Description --->
<p>Description. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ultricies ante dapibus risus porttitor, vitae scelerisque ex viverra. Duis et turpis lacus. </p>
</div>
<!--- Character 4 --->
<!--- Div class of final character in row should just be "col-md col-12" --->
<div class="col-md col-12">
<!--- Character image --->
<div class="mb-2" style="background:url(https://via.placeholder.com/600.png) center; background-size:cover; height:300px;"></div>
<table class="w-100 border-0">
<tr>
<!--- Character name --->
<td class="m-0 p-0"><h4><a href="CHAR_URL">Name</a></h4></td>
<!--- Character role --->
<td class="m-0 p-0 text-right"><h4>Role</h4></td>
</tr>
</table>
<!--- Description --->
<p>Description. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ultricies ante dapibus risus porttitor, vitae scelerisque ex viverra. Duis et turpis lacus. </p>
</div>
</div>
<!--- Row 1 end --->
<!--- Row 2 start --->
<div class="row no-gutters mb-2">
<div class="col-md col-12 mr-md-2 mr-0 mb-md-0 mb-2">
<div class="mb-2" style="background:url(https://via.placeholder.com/600.png) center; background-size:cover; height:300px;"></div>
<table class="w-100 border-0">
<tr>
<td class="m-0 p-0"><h4><a href="CHAR_URL">Name</a></h4></td>
<td class="m-0 p-0 text-right"><h4>Role</h4></td>
</tr>
</table>
<p>Description. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ultricies ante dapibus risus porttitor, vitae scelerisque ex viverra. Duis et turpis lacus. </p>
</div>
<div class="col-md col-12 mr-md-2 mr-0 mb-md-0 mb-2">
<div class="mb-2" style="background:url(https://via.placeholder.com/600.png) center; background-size:cover; height:300px;"></div>
<table class="w-100 border-0">
<tr>
<td class="m-0 p-0"><h4><a href="CHAR_URL">Name</a></h4></td>
<td class="m-0 p-0 text-right"><h4>Role</h4></td>
</tr>
</table>
<p>Description. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ultricies ante dapibus risus porttitor, vitae scelerisque ex viverra. Duis et turpis lacus. </p>
</div>
<div class="col-md col-12 mr-md-2 mr-0 mb-md-0 mb-2">
<div class="mb-2" style="background:url(https://via.placeholder.com/600.png) center; background-size:cover; height:300px;"></div>
<table class="w-100 border-0">
<tr>
<td class="m-0 p-0"><h4><a href="CHAR_URL">Name</a></h4></td>
<td class="m-0 p-0 text-right"><h4>Role</h4></td>
</tr>
</table>
<p>Description. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ultricies ante dapibus risus porttitor, vitae scelerisque ex viverra. Duis et turpis lacus. </p>
</div>
<div class="col-md col-12">
<div class="mb-2" style="background:url(https://via.placeholder.com/600.png) center; background-size:cover; height:300px;"></div>
<table class="w-100 border-0">
<tr>
<td class="m-0 p-0"><h4><a href="CHAR_URL">Name</a></h4></td>
<td class="m-0 p-0 text-right"><h4>Role</h4></td>
</tr>
</table>
<p>Description. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ultricies ante dapibus risus porttitor, vitae scelerisque ex viverra. Duis et turpis lacus. </p>
</div>
</div>
<!--- Row 2 end --->
<!--- For another row, copy from start of row to end and paste below. Add another full row if you want more species, don't add items to existing row. You may delete items within a row, however, but make sure the final item is formatted correctly. --->
</div>
<!--- Tab 5 end --->
<!--- Tab 6 start --->
<div class="tab-pane fade" id="lands">
<!--- Column row start --->
<div class="row no-gutters">
<!--- Left column --->
<div class="col-md col-12 mr-md-3 mr-0 mb-2 mb-md-0">
<!--- Heading 1 --->
<h1 class="text-primary" style="font-size:2em;">Other Kingdoms</h1>
<!--- Subheading --->
<h2 class="text-secondary">One</h2>
<!--- Description --->
<p>Description. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus et maximus urna, sed ornare nulla. Suspendisse vel enim eros. Integer est ligula, consequat nec vulputate eu, fermentum a libero. Donec mi lectus, sollicitudin cursus egestas et, cursus id odio. Sed pellentesque ante erat, in scelerisque mauris aliquet et. Sed sit amet enim rhoncus, vestibulum lectus vitae, varius mauris. Sed dui mi, vehicula et luctus eget, fermentum et ligula. Fusce hendrerit ultrices eros, a consectetur eros aliquet at. Donec ante magna, ultrices ac metus nec, tincidunt auctor est. Aenean tristique eleifend massa quis congue.</p>
<!--- Subheading --->
<h2 class="text-secondary">Two</h2>
<!--- Description --->
<p>Description. Sed dapibus sapien non feugiat condimentum. Fusce arcu quam, porta quis urna et, tempus pretium diam. Donec nibh ante, convallis et sem ac, lobortis ullamcorper nisl. Donec ultricies eros porttitor efficitur fringilla. Morbi finibus leo non nulla rutrum maximus. Proin fermentum id enim mattis volutpat. Vestibulum quis arcu tincidunt, faucibus sem sed, scelerisque nibh.</p>
<!--- Divider --->
<div class="pt-1 bg-secondary rounded mb-3"></div>
<!--- Heading 2 --->
<h1 class="text-primary" style="font-size:2em;">Lands/Countries</h1>
<!--- Subheading --->
<h2 class="text-secondary">One</h2>
<!--- Description --->
<p>Description. Curabitur ante mi, aliquet imperdiet sem in, lacinia vehicula libero. In luctus nunc at nunc euismod dapibus. Maecenas porta elit id semper molestie. Proin scelerisque neque diam, ut consectetur orci volutpat a. Maecenas feugiat sem vitae sem bibendum, at venenatis nulla suscipit. Fusce finibus, orci id accumsan elementum, eros sapien scelerisque quam, eu scelerisque enim tortor a tortor. Vestibulum cursus porttitor arcu, eget condimentum eros consectetur eget. Phasellus sit amet purus ante. Fusce fringilla tellus lobortis purus auctor consequat.</p>
<!--- Subheading --->
<h2 class="text-secondary">Two</h2>
<!--- Description --->
<p>Description. Integer cursus tellus neque, lobortis aliquam quam posuere eget. Quisque ut ex ac turpis ullamcorper semper. Mauris a mi ipsum. Nam turpis turpis, consectetur ac sem quis, sodales venenatis sapien. In vestibulum dui mi, vel semper odio placerat at. Fusce auctor dui non lobortis ultrices. Aenean dapibus ipsum in risus vulputate vehicula. Aenean sed magna ac metus placerat iaculis. Nunc in felis quis quam scelerisque molestie. Suspendisse sed neque condimentum, lacinia lorem sed, porta lectus. Aliquam ullamcorper, dolor quis fermentum consequat, velit ipsum accumsan orci, aliquet pulvinar arcu nunc quis lorem. Curabitur ultricies, sapien quis dapibus mollis, tellus neque auctor lorem, eget ornare odio ipsum ac diam.</p>
<!--- Divider --->
<div class="pt-1 bg-secondary rounded mb-3"></div>
<!--- Heading 3 --->
<h1 class="text-primary" style="font-size:2em;">Climate</h1>
<!--- Subheading --->
<h2 class="text-secondary">Spring</h2>
<!--- Description --->
<p>Description. Duis eros erat, suscipit in nibh at, commodo consequat lacus. Fusce elementum nulla nisi, nec semper augue vehicula vitae. Ut gravida risus sit amet sem blandit, et fermentum libero molestie. Donec posuere pellentesque elit. Maecenas quis sollicitudin velit. Mauris euismod hendrerit sapien eu tempus. Ut non tristique augue, semper sodales nunc. Vestibulum ullamcorper posuere dolor non facilisis.</p>
<!--- Subheading --->
<h2 class="text-secondary">Summer</h2>
<!--- Description --->
<p>Description. Duis eros erat, suscipit in nibh at, commodo consequat lacus. Fusce elementum nulla nisi, nec semper augue vehicula vitae. Ut gravida risus sit amet sem blandit, et fermentum libero molestie. Donec posuere pellentesque elit. Maecenas quis sollicitudin velit. Mauris euismod hendrerit sapien eu tempus. Ut non tristique augue, semper sodales nunc. Vestibulum ullamcorper posuere dolor non facilisis.</p>
<!--- Subheading --->
<h2 class="text-secondary">Autumn</h2>
<!--- Description --->
<p>Description. Duis eros erat, suscipit in nibh at, commodo consequat lacus. Fusce elementum nulla nisi, nec semper augue vehicula vitae. Ut gravida risus sit amet sem blandit, et fermentum libero molestie. Donec posuere pellentesque elit. Maecenas quis sollicitudin velit. Mauris euismod hendrerit sapien eu tempus. Ut non tristique augue, semper sodales nunc. Vestibulum ullamcorper posuere dolor non facilisis.</p>
<!--- Subheading --->
<h2 class="text-secondary">Winter</h2>
<!--- Description --->
<p>Description. Duis eros erat, suscipit in nibh at, commodo consequat lacus. Fusce elementum nulla nisi, nec semper augue vehicula vitae. Ut gravida risus sit amet sem blandit, et fermentum libero molestie. Donec posuere pellentesque elit. Maecenas quis sollicitudin velit. Mauris euismod hendrerit sapien eu tempus. Ut non tristique augue, semper sodales nunc. Vestibulum ullamcorper posuere dolor non facilisis.</p>
</div>
<!--- Left column end --->
<!--- Right column start --->
<div class="col-md col-12">
<!--- Heading 1 --->
<h1 class="text-primary" style="font-size:2em;">Map</h1>
<!--- Map image + full size link --->
<a href="IMG_URL"><img src="https://via.placeholder.com/600x400.png"></a>
<!--- Description --->
<p class="mb-2">Description of map. Can be short or long.</p>
<!--- Heading 2 --->
<h1 class="text-primary" style="font-size:2em;">Key</h1>
<!--- Row 1 --->
<div class="row no-gutters">
<!--- Symbol 1 --->
<div class="col-1 text-center"><i class="fas fa-circle" style="color:#000000;"></i></div>
<!--- Description --->
<div class="col-md col-11">Description of meaning (capitol, city, forest, etc.). </div>
<!--- Symbol 2 --->
<div class="col-1 text-center"><i class="fas fa-star" style="color:#FFD700;"></i></div>
<!--- Description --->
<div class="col-md col-11">Description of meaning. </div>
</div>
<!--- Row 2 --->
<div class="row no-gutters">
<!--- Symbol 3 --->
<div class="col-1 text-center"><i class="fas fa-square" style="color:blue;"></i></div>
<!--- Description --->
<div class="col-md col-11">Description of meaning. </div>
<!--- Symbol 4 --->
<div class="col-1 text-center"><i class="fas fa-tree" style="color:green;"></i></div>
<!--- Description --->
<div class="col-md col-11">Description of meaning. </div>
</div>
<!--- Row 3 --->
<div class="row no-gutters">
<!--- Symbol 5 --->
<div class="col-1 text-center"><i class="fas fa-home" style="color:purple;"></i></div>
<!--- Description --->
<div class="col-md col-11">Description of meaning. </div>
<!--- Symbol 6 --->
<div class="col-1 text-center"><i class="fas fa-exclamation" style="color:red;"></i></div>
<!--- Description --->
<div class="col-md col-11">Description of meaning. </div>
</div>
<!--- Add more rows to add more items. --->
<!--- You can change the colors of the symbols to match whatever colors you use in your map. --->
<!--- To change the symbol, change the <i class=""></i> section with a fontawesome icon. --->
<!--- Divider --->
<div class="pt-1 bg-secondary rounded my-3"></div>
<!--- Heading 3 --->
<h1 class="text-primary mt-2" style="font-size:2em;">Locations</h1>
<!--- Subheading --->
<h2 class="text-secondary">One</h2>
<!--- Description --->
<p>Description. Sed dapibus sapien non feugiat condimentum. Fusce arcu quam, porta quis urna et, tempus pretium diam. Donec nibh ante, convallis et sem ac, lobortis ullamcorper nisl. Donec ultricies eros porttitor efficitur fringilla. Morbi finibus leo non nulla rutrum maximus. Proin fermentum id enim mattis volutpat. Vestibulum quis arcu tincidunt, faucibus sem sed, scelerisque nibh.</p>
<!--- Subheading --->
<h2 class="text-secondary">Two</h2>
<!--- Description --->
<p>Description. Sed dapibus sapien non feugiat condimentum. Fusce arcu quam, porta quis urna et, tempus pretium diam. Donec nibh ante, convallis et sem ac, lobortis ullamcorper nisl. Donec ultricies eros porttitor efficitur fringilla. Morbi finibus leo non nulla rutrum maximus. Proin fermentum id enim mattis volutpat. Vestibulum quis arcu tincidunt, faucibus sem sed, scelerisque nibh.</p>
<!--- Subheading --->
<h2 class="text-secondary">Three</h2>
<!--- Description --->
<p>Description. Sed dapibus sapien non feugiat condimentum. Fusce arcu quam, porta quis urna et, tempus pretium diam. Donec nibh ante, convallis et sem ac, lobortis ullamcorper nisl. Donec ultricies eros porttitor efficitur fringilla. Morbi finibus leo non nulla rutrum maximus. Proin fermentum id enim mattis volutpat. Vestibulum quis arcu tincidunt, faucibus sem sed, scelerisque nibh.</p>
<!--- Subheading --->
<h2 class="text-secondary">Four</h2>
<!--- Description --->
<p>Description. Sed dapibus sapien non feugiat condimentum. Fusce arcu quam, porta quis urna et, tempus pretium diam. Donec nibh ante, convallis et sem ac, lobortis ullamcorper nisl. Donec ultricies eros porttitor efficitur fringilla. Morbi finibus leo non nulla rutrum maximus. Proin fermentum id enim mattis volutpat. Vestibulum quis arcu tincidunt, faucibus sem sed, scelerisque nibh.</p>
</div>
<!--- Right column end --->
</div>
<!--- Columns row end --->
</div>
<!--- Tab 6 end --->
</div>
<!--- Tab content end --->
<div class="text-center bg-faded p-1 rounded mt-3">
<a href="https://toyhou.se/HTMLobster" style="font-size:.8em;" data-toggle="tooltip" title="layout by noll"><i class="fas fa-code"></i></a>
</div>
</div>
</div>
