Archway
created by:HTMLobster
HTMLMixed ColorsBootstrapWorld
Copy
<!------------------------------------
Archway - World
by HTMLobster
TOS: https://toyhou.se/~bulletins/2899311.terms-of-service
------------------------------------->
<div class="container">
<!-- heading image -->
<div class="row">
<div class="col-auto mx-auto">
<div class="card p-2 mx-sm-5 mx-3 d-flex" style="border-radius:50% 50% 0 0; border-bottom:none;">
<div class="card bg-faded pt-5" style="border-radius:50% 50% 0 0;">
<!-- image -->
<img style="position:relative; z-index:2;" src="https://i.imgur.com/p6NdZ12.png">
</div>
</div>
<div class="text-primary mx-sm-5 mx-3" style="border-style:double; border-width:9px; border-top:none; border-left:none !important; border-right:none !important;"></div>
<div class="d-flex justify-content-center">
<div class="card border-0">
<div class="card card-outline-primary p-2 rounded-0 mt-n5" style="background:inherit; border-width:3px;">
<!-- species name -->
<h1 class="card rounded-0 bg-faded display-3 p-2 mb-0">
Species Name
</h1>
</div>
</div>
</div>
</div>
</div>
<!-- about -->
<div class="row no-gutters mt-3">
<!-- overview -->
<div class="col-lg mt-3">
<div class="card rounded-0 p-2 h-100" style="min-height:calc(100% - 1.5rem);">
<div class="card bg-faded p-2 rounded-0 h-100">
<!-- heading -->
<h2 class="display-4 p-2 mb-0 text-center">
Overview
</h2>
<hr class="w-100">
<!-- content -->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dignissim imperdiet massa eget porta. Etiam sed leo tellus. Morbi ex diam, pulvinar et congue quis, aliquam ac lacus. Sed venenatis porta est non vestibulum. Sed sit amet dolor non sem sodales pretium at a lectus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla dictum est in dolor malesuada mattis.
</p>
<p>
Donec rhoncus accumsan massa, in placerat ipsum tempus in. Aenean metus odio, maximus et orci a, interdum ullamcorper arcu. Phasellus tincidunt, ex volutpat lobortis sodales, dolor ante aliquet neque, ut venenatis nisl est non tellus.
</p>
<p>
Praesent ac sem in ante cursus pharetra. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque eu sapien et turpis condimentum ultricies. Nulla venenatis sollicitudin elit et ultrices. Nulla laoreet dictum velit, eu porta mauris pellentesque at. Aenean at dui sed risus varius convallis in vitae libero. Praesent at risus mauris.
</p>
</div>
</div>
</div>
<div class="col-auto mt-3">
<div class="card card-outline-primary rounded-0 h-100 w-100 border-right-0 border-top-0 border-bottom-0" style="border-width:10px; border-style:double;">
</div>
</div>
<!-- links -->
<div class="col-lg-3 col my-lg-auto">
<div>
<!-- lore -->
<div class="card card-outline-primary border-left-0 p-2 mt-3" style="border-radius:0 5rem 5rem 0; border-width:3px;">
<!-- link url -->
<a class="card btn bg-faded w-100 p-2 display-4" style="border-radius:0 5rem 5rem 0; font-size:1.5em;" href="#">
Lore
</a>
</div>
<!-- masterlist -->
<div class="card card-outline-primary border-left-0 p-2 mt-3" style="border-radius:0 5rem 5rem 0; border-width:3px;">
<!-- link url -->
<a class="card btn bg-faded w-100 p-2 display-4" style="border-radius:0 5rem 5rem 0; font-size:1.5em;" href="#">
Masterlist
</a>
</div>
<!-- rules -->
<div class="card card-outline-primary border-left-0 p-2 mt-3" style="border-radius:0 5rem 5rem 0; border-width:3px;">
<!-- link url -->
<a class="card btn bg-faded w-100 p-2 display-4" style="border-radius:0 5rem 5rem 0; font-size:1.5em;" href="#">
Rules
</a>
</div>
<!-- members -->
<div class="card card-outline-primary border-left-0 p-2 mt-3" style="border-radius:0 5rem 5rem 0; border-width:3px;">
<!-- link url -->
<a class="card btn bg-faded w-100 p-2 display-4" style="border-radius:0 5rem 5rem 0; font-size:1.5em;" href="#">
Members
</a>
</div>
</div>
</div>
</div>
<!-- events & announcements -->
<div class="row">
<!-- events -->
<div class="col-lg-3 my-lg-auto mt-3 pt-lg-3">
<div class="card card-outline-primary p-2" style="border-radius:5rem 5rem 0 5rem; height:250px; border-width:3px;">
<div class="card bg-faded p-2 h-100 overflow-hidden" style="border-radius:5rem 5rem 0 5rem;">
<!-- heading -->
<h3 class="display-4 text-center mb-0">
Events
</h3>
<hr class="w-75">
<!-- content -->
<div class="d-block d-lg-flex flex-column">
<div class="px-2 pb-4 overflow-auto" style="flex:1 1 154px; min-height:154px; scrollbar-color:var(--color-primary) transparent; scrollbar-width:thin;">
<!-- event -->
<div>
<!-- event name & link -->
<a href="event_url">
Current event:
</a>
<!-- description -->
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<!-- notes -->
<p class="text-muted">
note - note - note
</p>
</div>
<!-- event -->
<div>
<!-- event name & link -->
<a href="event_url">
Current event:
</a>
<!-- description -->
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<!-- notes -->
<p class="text-muted">
note - note - note
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-auto mt-3 pr-0 mr-n3">
<div class="card card-outline-primary rounded-0 h-100 w-100 border-right-0 border-top-0 border-bottom-0" style="border-width:10px; border-style:double;">
</div>
</div>
<!-- announcements -->
<div class="col">
<div class="card p-2 mt-3 rounded-0" style="min-height:calc(100% - 1.5rem);">
<div class="card p-2 bg-faded rounded-0">
<!-- heading -->
<h2 class="display-4 text-center mb-0">
Announcements
</h2>
<hr class="w-100">
<!-- announcement -->
<p>
<!-- date -->
<span class="text-primary">DD.MM.YYYY:</span>
<!-- description -->
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dignissim imperdiet massa eget porta. Etiam sed leo tellus. Morbi ex diam, pulvinar et congue quis, aliquam ac lacus.
</p>
<!-- announcement -->
<p>
<!-- date -->
<span class="text-primary">DD.MM.YYYY:</span>
<!-- description -->
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dignissim imperdiet massa eget porta. Etiam sed leo tellus.
</p>
<!-- announcement -->
<p>
<!-- date -->
<span class="text-primary">DD.MM.YYYY:</span>
<!-- description -->
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dignissim imperdiet massa eget porta. Etiam sed leo tellus. Morbi ex diam, pulvinar et congue quis, aliquam ac lacus.
</p>
<!-- announcement -->
<p>
<!-- date -->
<span class="text-primary">DD.MM.YYYY:</span>
<!-- description -->
Sed venenatis porta est non vestibulum. Sed sit amet dolor non sem sodales pretium at a lectus.
</p>
</div>
</div>
</div>
</div>
<!-- staff & affiliates -->
<div class="row">
<!-- staff -->
<div class="col-sm">
<div class="card p-2 mt-3 rounded-0" style="height:calc(100% - 1rem);">
<div class="card p-2 bg-faded rounded-0 h-100">
<!-- heading -->
<h2 class="display-4 text-center mb-0" id="staff">
Staff
</h2>
<hr class="w-100 mb-0">
<!-- staff members -->
<div class="row">
<!-- member -->
<div class="col-lg-4 col-md-6 mt-3 align-items-center">
<div class="card p-2 rounded-0">
<!-- link url & icon -->
<a href="staff_url" class="btn rounded-0 p-4" style="background:url(https://i.imgur.com/ld2Okwa.png) center; background-size:cover;"></a>
</div>
<!-- info -->
<div class="ml-3">
<!-- name/username -->
<h3 class="font-weight-light mb-0">
name
</h3>
<!-- role -->
<p class="text-muted">
admin, artist
</p>
</div>
</div>
<!-- member -->
<div class="col-lg-4 col-md-6 mt-3 align-items-center">
<div class="card p-2 rounded-0">
<!-- link url & icon -->
<a href="staff_url" class="btn rounded-0 p-4" style="background:url(https://i.imgur.com/ld2Okwa.png) center; background-size:cover;"></a>
</div>
<!-- info -->
<div class="ml-3">
<!-- name/username -->
<h3 class="font-weight-light mb-0">
name
</h3>
<!-- role -->
<p class="text-muted">
moderator
</p>
</div>
</div>
<!-- member -->
<div class="col-lg-4 col-md-6 mt-3 align-items-center">
<div class="card p-2 rounded-0">
<!-- link url & icon -->
<a href="staff_url" class="btn rounded-0 p-4" style="background:url(https://i.imgur.com/ld2Okwa.png) center; background-size:cover;"></a>
</div>
<!-- info -->
<div class="ml-3">
<!-- name/username -->
<h3 class="font-weight-light mb-0">
name
</h3>
<!-- role -->
<p class="text-muted">
guest artist
</p>
</div>
</div>
<!-- member -->
<div class="col-lg-4 col-md-6 mt-3 align-items-center">
<div class="card p-2 rounded-0">
<!-- link url & icon -->
<a href="staff_url" class="btn rounded-0 p-4" style="background:url(https://i.imgur.com/ld2Okwa.png) center; background-size:cover;"></a>
</div>
<!-- info -->
<div class="ml-3">
<!-- name/username -->
<h3 class="font-weight-light mb-0">
name
</h3>
<!-- role -->
<p class="text-muted">
guest artist
</p>
</div>
</div>
<!-- member -->
<div class="col-lg-4 col-md-6 mt-3 align-items-center">
<div class="card p-2 rounded-0">
<!-- link url & icon -->
<a href="staff_url" class="btn rounded-0 p-4" style="background:url(https://i.imgur.com/ld2Okwa.png) center; background-size:cover;"></a>
</div>
<!-- info -->
<div class="ml-3">
<!-- name/username -->
<h3 class="font-weight-light mb-0">
name
</h3>
<!-- role -->
<p class="text-muted">
guest artist
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-auto mt-3 pl-0 ml-n3">
<div class="card card-outline-primary rounded-0 h-100 w-100 border-right-0 border-top-0 border-bottom-0" style="border-width:10px; border-style:double;">
</div>
</div>
<!-- affiliates -->
<div class="col-lg-3 my-lg-auto mt-sm-3 pt-lg-3">
<div class="card card-outline-primary p-2" style="border-radius:5rem 5rem 5rem 0; height:calc(100% - 1rem); border-width:3px;">
<div class="card bg-faded p-2 h-100 overflow-hidden" style="border-radius:5rem 5rem 5rem 0;">
<!-- heading -->
<h3 class="display-4 text-center mb-0">
Affiliates
</h3>
<hr class="w-75 mb-0">
<!-- affiliates - best to use all the same ratio of image (e.g. all square or all landscape) -->
<div class="d-block d-lg-flex flex-column">
<div class="row mb-lg-0 mb-3" style="flex:1 1 89px; min-height:89px; overflow-y:auto; overflow-x:hidden; scrollbar-color:transparent transparent; scrollbar-width:thin;">
<!-- affiliate -->
<div class="col-6">
<div class="card p-2 rounded-0 d-inline-block mt-3">
<!-- link -->
<a href="affiliate_url">
<!-- image -->
<img src="https://i.imgur.com/ld2Okwa.png">
</a>
</div>
</div>
<!-- affiliate -->
<div class="col-6">
<div class="card p-2 rounded-0 d-inline-block mt-3">
<!-- link -->
<a href="affiliate_url">
<!-- image -->
<img src="https://i.imgur.com/ld2Okwa.png">
</a>
</div>
</div>
<!-- affiliate -->
<div class="col-6">
<div class="card p-2 rounded-0 d-inline-block mt-3">
<!-- link -->
<a href="affiliate_url">
<!-- image -->
<img src="https://i.imgur.com/ld2Okwa.png">
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- traits -->
<div class="row no-gutters mt-n3 mt-lg-0">
<!-- nav buttons -->
<div class="col-lg-3 col my-lg-auto">
<ul class="nav flex-column">
<!-- common -->
<li class="nav-item mt-3 card card-outline-primary border-right-0 p-2" style="border-radius:5rem 0 0 5rem; border-width:3px;">
<a class="nav-link card btn btn-outline-primary bg-faded w-100 p-2 display-4 active" style="border-radius:5rem 0 0 5rem; font-size:1.5em; box-shadow:none;" data-toggle="tab" href="#common">
Common
</a>
</li>
<!-- uncommon -->
<li class="nav-item mt-3 card card-outline-primary border-right-0 p-2" style="border-radius:5rem 0 0 5rem; border-width:3px;">
<a class="nav-link card btn btn-outline-primary bg-faded w-100 p-2 display-4" style="border-radius:5rem 0 0 5rem; font-size:1.5em; box-shadow:none;" data-toggle="tab" href="#uncommon">
Uncommon
</a>
</li>
<!-- rare -->
<li class="nav-item mt-3 card card-outline-primary border-right-0 p-2" style="border-radius:5rem 0 0 5rem; border-width:3px;">
<a class="nav-link card btn btn-outline-primary bg-faded w-100 p-2 display-4" style="border-radius:5rem 0 0 5rem; font-size:1.5em; box-shadow:none;" data-toggle="tab" href="#rare">
Rare
</a>
</li>
<!-- mythical -->
<li class="nav-item mt-3 card card-outline-primary border-right-0 p-2" style="border-radius:5rem 0 0 5rem; border-width:3px;">
<a class="nav-link card btn btn-outline-primary bg-faded w-100 p-2 display-4" style="border-radius:5rem 0 0 5rem; font-size:1.5em; box-shadow:none;" data-toggle="tab" href="#mythical">
Mythical
</a>
</li>
</ul>
</div>
<div class="col-auto mt-3">
<div class="card card-outline-primary rounded-0 h-100 w-100 border-right-0 border-top-0 border-bottom-0" style="border-width:10px; border-style:double;">
</div>
</div>
<!-- traits -->
<div class="col-lg">
<div class="card rounded-0 p-2 mt-3" style="min-height:calc(100% - 1.5rem);">
<div class="card rounded-0 bg-faded p-2 tab-content">
<!-- common traits -->
<div class="tab-pane fade active show" id="common">
<div class="card-body">
<!-- heading -->
<h2 class="display-4 text-center mb-0">
Common Traits
</h2>
<hr class="w-100">
<div class="row">
<div class="col-lg-5">
<!-- base image -->
<div class="h-100 w-100">
<img src="https://i.imgur.com/hYcmYBs.png">
</div>
<!-- trait images - must be the same size as the base -->
<div id="commonTraitsCommon" class="carousel slide" data-ride="carousel" style="width:calc(100% - 30px); position:absolute; top:0px; left:.95rem;">
<div class="carousel-inner">
<!-- trait - only first should be active -->
<div class="carousel-item active">
<div>
<!-- image -->
<img src="https://i.imgur.com/DDoDhQf.png">
</div>
</div>
<!-- trait -->
<div class="carousel-item">
<div>
<!-- image -->
<img src="https://i.imgur.com/a9WPUMN.png">
</div>
</div>
<!-- trait -->
<div class="carousel-item">
<div>
<!-- image -->
<img src="https://i.imgur.com/q1xddsr.png">
</div>
</div>
<!-- trait -->
<div class="carousel-item">
<div>
<!-- image -->
<img src="https://i.imgur.com/6C2Rnz5.png">
</div>
</div>
<!-- trait -->
<div class="carousel-item">
<div>
<!-- image -->
<img src="https://i.imgur.com/6n0XqpU.png">
</div>
</div>
<!-- trait -->
<div class="carousel-item">
<div>
<!-- image -->
<img src="https://i.imgur.com/KBdGkDt.png">
</div>
</div>
</div>
<!-- next/prev buttons -->
<div class="mt-n5 px-3 py-2 d-flex justify-content-between" style="position:relative; z-index:3;">
<a class="" type="button" href="#commonTraitsCommon" data-slide="prev">
<i class="text-primary fas fa-chevron-left fa-2x"></i>
<span class="sr-only">Previous</span>
</a>
<a class="" type="button" href="#commonTraitsCommon" data-slide="next">
<i class="text-primary fas fa-chevron-right fa-2x"></i>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
<!-- traits info -->
<div class="col">
<div style="max-height:300px; overflow:auto; scrollbar-color:var(--color-primary) transparent; scrollbar-width:thin;">
<!-- trait -->
<div>
<!-- name -->
<h4 class="font-weight-light" style="font-size:1.75rem;">
Trait
</h4>
<!-- description -->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dignissim imperdiet massa eget porta.
</p>
</div>
<!-- trait -->
<div class="mt-2">
<!-- name -->
<h4 class="font-weight-light" style="font-size:1.75rem;">
Trait
</h4>
<!-- description -->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dignissim imperdiet massa eget porta.
</p>
</div>
<!-- trait -->
<div class="mt-2">
<!-- name -->
<h4 class="font-weight-light" style="font-size:1.75rem;">
Trait
</h4>
<!-- description -->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dignissim imperdiet massa eget porta.
</p>
</div>
<!-- color options -->
<div class="mt-2">
<h4 class="font-weight-light" style="font-size:1.75rem;">
Colors
</h4>
<!-- colors -->
<p style="font-family:monospace;">
<!-- color -->
<span style="background-color:#000000; color:#fff;" class="badge badge-pill">
#000000
</span>
<!-- color -->
<span style="background-color:#444; color:#fff;" class="badge badge-pill">
#444444
</span>
<!-- color -->
<span style="background-color:#808080; color:#fff;" class="badge badge-pill">
#808080
</span>
<!-- color -->
<span style="background-color:#ccc; color:#000;" class="badge badge-pill">
#cccccc
</span>
<!-- color -->
<span style="background-color:#fff; color:#000;" class="badge badge-pill">
#ffffff
</span>
</p>
<!-- colors -->
<p style="font-family:monospace;">
<!-- color -->
<span style="background-color:#000000; color:#fff;" class="badge badge-pill">
#000000
</span>
<!-- color -->
<span style="background-color:#444; color:#fff;" class="badge badge-pill">
#444444
</span>
<!-- color -->
<span style="background-color:#808080; color:#fff;" class="badge badge-pill">
#808080
</span>
<!-- color -->
<span style="background-color:#ccc; color:#000;" class="badge badge-pill">
#cccccc
</span>
<!-- color -->
<span style="background-color:#fff; color:#000;" class="badge badge-pill">
#ffffff
</span>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- common traits end -->
<!-- uncommon traits -->
<div class="tab-pane fade" id="uncommon">
<div class="card-body">
<!-- heading -->
<h3 class="display-4 text-center mb-0">
Uncommon
</h3>
<hr class="w-100">
<div class="row">
<div class="col-lg-5">
<!-- base image -->
<div class="h-100 w-100">
<img src="https://i.imgur.com/hYcmYBs.png">
</div>
<!-- trait images - must be the same size as the base -->
<div id="uncommonTraits" class="carousel slide" data-ride="carousel" style="width:calc(100% - 30px); position:absolute; top:0px; left:.95rem;">
<div class="carousel-inner">
<!-- trait - only first should be active -->
<div class="carousel-item active">
<div>
<!-- image -->
<img src="https://i.imgur.com/Q3FwgPn.png">
</div>
</div>
<!-- trait -->
<div class="carousel-item">
<div>
<!-- image -->
<img src="https://i.imgur.com/nmk8Mdn.png">
</div>
</div>
<!-- trait -->
<div class="carousel-item">
<div>
<!-- image -->
<img src="https://i.imgur.com/zLW7LGT.png">
</div>
</div>
</div>
<!-- next/prev buttons -->
<div class="mt-n5 px-3 py-2 d-flex justify-content-between" style="position:relative; z-index:3;">
<a class="" type="button" href="#uncommonTraits" data-slide="prev">
<i class="text-primary fas fa-chevron-left fa-2x"></i>
<span class="sr-only">Previous</span>
</a>
<a class="" type="button" href="#uncommonTraits" data-slide="next">
<i class="text-primary fas fa-chevron-right fa-2x"></i>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
<!-- traits info -->
<div class="col">
<div style="max-height:300px; overflow:auto; scrollbar-color:var(--color-primary) transparent; scrollbar-width:thin;">
<!-- trait -->
<div>
<!-- name -->
<h4 class="font-weight-light" style="font-size:1.75rem;">
Trait
</h4>
<!-- description -->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dignissim imperdiet massa eget porta.
</p>
</div>
<!-- trait -->
<div class="mt-2">
<!-- name -->
<h4 class="font-weight-light" style="font-size:1.75rem;">
Trait
</h4>
<!-- description -->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dignissim imperdiet massa eget porta.
</p>
</div>
<!-- trait -->
<div class="mt-2">
<!-- name -->
<h4 class="font-weight-light" style="font-size:1.75rem;">
Trait
</h4>
<!-- description -->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dignissim imperdiet massa eget porta.
</p>
</div>
<!-- color options -->
<div class="mt-2">
<h4 class="font-weight-light" style="font-size:1.75rem;">
Colors
</h4>
<!-- colors -->
<p style="font-family:monospace;">
<!-- color -->
<span style="background-color:#000000; color:#fff;" class="badge badge-pill">
#000000
</span>
<!-- color -->
<span style="background-color:#444; color:#fff;" class="badge badge-pill">
#444444
</span>
<!-- color -->
<span style="background-color:#808080; color:#fff;" class="badge badge-pill">
#808080
</span>
<!-- color -->
<span style="background-color:#ccc; color:#000;" class="badge badge-pill">
#cccccc
</span>
<!-- color -->
<span style="background-color:#fff; color:#000;" class="badge badge-pill">
#ffffff
</span>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- uncommon traits end -->
<!-- rare traits -->
<div class="tab-pane fade" id="rare">
<div class="card-body">
<!-- heading -->
<h3 class="display-4 text-center mb-0">
Rare
</h3>
<hr class="w-100">
<div class="row">
<div class="col-lg-5">
<!-- base image -->
<div class="h-100 w-100">
<img src="https://i.imgur.com/hYcmYBs.png">
</div>
<!-- trait images - must be the same size as the base -->
<div id="rareTraits" class="carousel slide" data-ride="carousel" style="width:calc(100% - 30px); position:absolute; top:0px; left:.95rem;">
<div class="carousel-inner">
<!-- trait - only first should be active -->
<div class="carousel-item active">
<div>
<!-- image -->
<img src="https://i.imgur.com/orb3lws.png">
</div>
</div>
<!-- trait -->
<div class="carousel-item">
<div>
<!-- image -->
<img src="https://i.imgur.com/hoE27kS.png">
</div>
</div>
<!-- trait -->
<div class="carousel-item">
<div>
<!-- image -->
<img src="https://i.imgur.com/oPfestN.png">
</div>
</div>
</div>
<!-- next/prev buttons -->
<div class="mt-n5 px-3 py-2 d-flex justify-content-between" style="position:relative; z-index:3;">
<a class="" type="button" href="#rareTraits" data-slide="prev">
<i class="text-primary fas fa-chevron-left fa-2x"></i>
<span class="sr-only">Previous</span>
</a>
<a class="" type="button" href="#rareTraits" data-slide="next">
<i class="text-primary fas fa-chevron-right fa-2x"></i>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
<!-- traits info -->
<div class="col">
<div style="max-height:300px; overflow:auto; scrollbar-color:var(--color-primary) transparent; scrollbar-width:thin;">
<!-- trait -->
<div>
<!-- name -->
<h4 class="font-weight-light" style="font-size:1.75rem;">
Trait
</h4>
<!-- description -->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dignissim imperdiet massa eget porta.
</p>
</div>
<!-- trait -->
<div class="mt-2">
<!-- name -->
<h4 class="font-weight-light" style="font-size:1.75rem;">
Trait
</h4>
<!-- description -->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dignissim imperdiet massa eget porta.
</p>
</div>
<!-- trait -->
<div class="mt-2">
<!-- name -->
<h4 class="font-weight-light" style="font-size:1.75rem;">
Trait
</h4>
<!-- description -->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dignissim imperdiet massa eget porta.
</p>
</div>
<!-- color options -->
<div class="mt-2">
<h4 class="font-weight-light" style="font-size:1.75rem;">
Colors
</h4>
<!-- colors -->
<p style="font-family:monospace;">
<!-- color -->
<span style="background-color:#000000; color:#fff;" class="badge badge-pill">
#000000
</span>
<!-- color -->
<span style="background-color:#444; color:#fff;" class="badge badge-pill">
#444444
</span>
<!-- color -->
<span style="background-color:#808080; color:#fff;" class="badge badge-pill">
#808080
</span>
<!-- color -->
<span style="background-color:#ccc; color:#000;" class="badge badge-pill">
#cccccc
</span>
<!-- color -->
<span style="background-color:#fff; color:#000;" class="badge badge-pill">
#ffffff
</span>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- rare traits end -->
<!-- mythical traits -->
<div class="tab-pane fade" id="mythical">
<div class="card-body">
<!-- heading -->
<h3 class="display-4 text-center mb-0">
Mythical
</h3>
<hr class="w-100">
<div class="row">
<div class="col-lg-5">
<!-- base image -->
<div class="h-100 w-100">
<img src="https://i.imgur.com/hYcmYBs.png">
</div>
<!-- trait images - must be the same size as the base -->
<div id="mythicalTraits" class="carousel slide" data-ride="carousel" style="width:calc(100% - 30px); position:absolute; top:0px; left:.95rem;">
<div class="carousel-inner">
<!-- trait - only first should be active -->
<div class="carousel-item active">
<div>
<!-- image -->
<img src="https://i.imgur.com/Wexm2cg.png">
</div>
</div>
<!-- trait -->
<div class="carousel-item">
<div>
<!-- image -->
<img src="https://i.imgur.com/sdAxObx.png">
</div>
</div>
</div>
<!-- next/prev buttons -->
<div class="mt-n5 px-3 py-2 d-flex justify-content-between" style="position:relative; z-index:3;">
<a class="" type="button" href="#mythicalTraits" data-slide="prev">
<i class="text-primary fas fa-chevron-left fa-2x"></i>
<span class="sr-only">Previous</span>
</a>
<a class="" type="button" href="#mythicalTraits" data-slide="next">
<i class="text-primary fas fa-chevron-right fa-2x"></i>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
<!-- traits info -->
<div class="col">
<div style="max-height:300px; overflow:auto; scrollbar-color:var(--color-primary) transparent; scrollbar-width:thin;">
<!-- trait -->
<div>
<!-- name -->
<h4 class="font-weight-light" style="font-size:1.75rem;">
Trait
</h4>
<!-- description -->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dignissim imperdiet massa eget porta.
</p>
</div>
<!-- trait -->
<div class="mt-2">
<!-- name -->
<h4 class="font-weight-light" style="font-size:1.75rem;">
Trait
</h4>
<!-- description -->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dignissim imperdiet massa eget porta.
</p>
</div>
<!-- trait -->
<div class="mt-2">
<!-- name -->
<h4 class="font-weight-light" style="font-size:1.75rem;">
Trait
</h4>
<!-- description -->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dignissim imperdiet massa eget porta.
</p>
</div>
<!-- color options -->
<div class="mt-2">
<h4 class="font-weight-light" style="font-size:1.75rem;">
Colors
</h4>
<!-- colors -->
<p style="font-family:monospace;">
<!-- color -->
<span style="background-color:#000000; color:#fff;" class="badge badge-pill">
#000000
</span>
<!-- color -->
<span style="background-color:#444; color:#fff;" class="badge badge-pill">
#444444
</span>
<!-- color -->
<span style="background-color:#808080; color:#fff;" class="badge badge-pill">
#808080
</span>
<!-- color -->
<span style="background-color:#ccc; color:#000;" class="badge badge-pill">
#cccccc
</span>
<!-- color -->
<span style="background-color:#fff; color:#000;" class="badge badge-pill">
#ffffff
</span>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- mythical traits end -->
</div>
</div>
</div>
</div>
<!-- featured characters -->
<div class="row">
<!-- featured -->
<div class="col-sm-4">
<div class="card p-2 mt-3" style="border-radius:50% 50% 0 0;">
<div class="card bg-faded pt-sm-4 pt-3 text-center" style="border-radius:50% 50% 0 0;">
<!-- character link -->
<a href="CHAR_URL">
<!-- image -->
<img src="https://i.imgur.com/IGtqaCF.png">
</a>
<!-- label -->
<h3 class="display-4">
Featured
</h3>
</div>
</div>
</div>
<!-- featured -->
<div class="col-sm-4">
<div class="card p-2 mt-3" style="border-radius:50% 50% 0 0;">
<div class="card bg-faded pt-sm-4 pt-3 text-center" style="border-radius:50% 50% 0 0;">
<!-- character link -->
<a href="CHAR_URL">
<!-- image -->
<img src="https://i.imgur.com/qqIha05.png">
</a>
<!-- label -->
<h3 class="display-4">
Featured
</h3>
</div>
</div>
</div>
<!-- featured -->
<div class="col-sm-4">
<div class="card p-2 mt-3" style="border-radius:50% 50% 0 0;">
<div class="card bg-faded pt-sm-4 pt-3 text-center" style="border-radius:50% 50% 0 0;">
<!-- character link -->
<a href="CHAR_URL">
<!-- image -->
<img src="https://i.imgur.com/p6NdZ12.png">
</a>
<!-- label -->
<h3 class="display-4">
Featured
</h3>
</div>
</div>
</div>
</div>
<!-- credit -->
<div class="text-center mt-3">
<a href="https://toyhou.se/HTMLobster" data-toggle="tooltip" title="Code by HTMLobster">
<i class="fa-solid fa-lobster fa-fw"></i>
</a>
</div>
</div>Copy
<!------------------------------------
Archway - World
by HTMLobster
TOS: https://toyhou.se/~bulletins/2899311.terms-of-service
------------------------------------->
<!-- edit accent color here -->
<div class="container" style="--color-accent:#de70ad;">
<!-- heading image -->
<div class="row">
<div class="col-auto mx-auto">
<div class="card p-2 mx-sm-5 mx-3 d-flex" style="border-radius:50% 50% 0 0; border-bottom:none;">
<div class="card bg-faded pt-5" style="border-radius:50% 50% 0 0;">
<!-- image -->
<img style="position:relative; z-index:2;" src="image_url">
</div>
</div>
<div class="mx-sm-5 mx-3" style="border-style:double; border-width:9px; border-top:none; border-left:none !important; border-right:none !important; color:var(--color-accent);"></div>
<div class="d-flex justify-content-center">
<div class="card border-0">
<div class="card card-outline-primary p-2 rounded-0 mt-n5" style="background:inherit; border-width:3px; border-color:var(--color-accent);">
<!-- species name -->
<h1 class="card rounded-0 bg-faded display-3 p-2 mb-0">
Species Name
</h1>
</div>
</div>
</div>
</div>
</div>
<!-- about -->
<div class="row no-gutters mt-3">
<!-- overview -->
<div class="col-lg mt-3">
<div class="card rounded-0 p-2 h-100" style="min-height:calc(100% - 1.5rem);">
<div class="card bg-faded p-2 rounded-0 h-100">
<!-- heading -->
<h2 class="display-4 p-2 mb-0 text-center">
Overview
</h2>
<hr class="w-100">
<!-- content -->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dignissim imperdiet massa eget porta. Etiam sed leo tellus. Morbi ex diam, pulvinar et congue quis, aliquam ac lacus. Sed venenatis porta est non vestibulum. Sed sit amet dolor non sem sodales pretium at a lectus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla dictum est in dolor malesuada mattis.
</p>
<p>
Donec rhoncus accumsan massa, in placerat ipsum tempus in. Aenean metus odio, maximus et orci a, interdum ullamcorper arcu. Phasellus tincidunt, ex volutpat lobortis sodales, dolor ante aliquet neque, ut venenatis nisl est non tellus.
</p>
<p>
Praesent ac sem in ante cursus pharetra. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque eu sapien et turpis condimentum ultricies. Nulla venenatis sollicitudin elit et ultrices. Nulla laoreet dictum velit, eu porta mauris pellentesque at. Aenean at dui sed risus varius convallis in vitae libero. Praesent at risus mauris.
</p>
</div>
</div>
</div>
<div class="col-auto mt-3">
<div class="card card-outline-primary rounded-0 h-100 w-100 border-right-0 border-top-0 border-bottom-0" style="border-width:10px; border-style:double; border-color:var(--color-accent);">
</div>
</div>
<!-- links -->
<div class="col-lg-3 col my-lg-auto">
<div>
<!-- lore -->
<div class="card card-outline-primary border-left-0 p-2 mt-3" style="border-radius:0 5rem 5rem 0; border-width:3px; border-color:var(--color-accent);">
<!-- link url -->
<a class="card btn bg-faded w-100 p-2 display-4" style="border-radius:0 5rem 5rem 0; font-size:1.5em; color:var(--color-accent);" href="#">
Lore
</a>
</div>
<!-- masterlist -->
<div class="card card-outline-primary border-left-0 p-2 mt-3" style="border-radius:0 5rem 5rem 0; border-width:3px; border-color:var(--color-accent);">
<!-- link url -->
<a class="card btn bg-faded w-100 p-2 display-4" style="border-radius:0 5rem 5rem 0; font-size:1.5em; color:var(--color-accent);" href="#">
Masterlist
</a>
</div>
<!-- rules -->
<div class="card card-outline-primary border-left-0 p-2 mt-3" style="border-radius:0 5rem 5rem 0; border-width:3px; border-color:var(--color-accent);">
<!-- link url -->
<a class="card btn bg-faded w-100 p-2 display-4" style="border-radius:0 5rem 5rem 0; font-size:1.5em; color:var(--color-accent);" href="#">
Rules
</a>
</div>
<!-- members -->
<div class="card card-outline-primary border-left-0 p-2 mt-3" style="border-radius:0 5rem 5rem 0; border-width:3px; border-color:var(--color-accent);">
<!-- link url -->
<a class="card btn bg-faded w-100 p-2 display-4" style="border-radius:0 5rem 5rem 0; font-size:1.5em; color:var(--color-accent);" href="#">
Members
</a>
</div>
</div>
</div>
</div>
<!-- events & announcements -->
<div class="row">
<!-- events -->
<div class="col-lg-3 my-lg-auto mt-3 pt-lg-3">
<div class="card card-outline-primary p-2" style="border-radius:5rem 5rem 0 5rem; height:250px; border-width:3px; border-color:var(--color-accent);">
<div class="card bg-faded p-2 h-100 overflow-hidden" style="border-radius:5rem 5rem 0 5rem;">
<!-- heading -->
<h3 class="display-4 text-center mb-0">
Events
</h3>
<hr class="w-75">
<!-- content -->
<div class="d-block d-lg-flex flex-column">
<div class="px-2 pb-4 overflow-auto" style="flex:1 1 154px; min-height:154px; scrollbar-color:var(--color-accent) transparent; scrollbar-width:thin;">
<!-- event -->
<div>
<!-- event name & link -->
<a href="event_url" style="color:var(--color-accent);">
Current event:
</a>
<!-- description -->
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<!-- notes -->
<p class="text-muted">
note - note - note
</p>
</div>
<!-- event -->
<div>
<!-- event name & link -->
<a href="event_url" style="color:var(--color-accent);">
Current event:
</a>
<!-- description -->
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<!-- notes -->
<p class="text-muted">
note - note - note
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-auto mt-3 pr-0 mr-n3">
<div class="card card-outline-primary rounded-0 h-100 w-100 border-right-0 border-top-0 border-bottom-0" style="border-width:10px; border-style:double; border-color:var(--color-accent);">
</div>
</div>
<!-- announcements -->
<div class="col">
<div class="card p-2 mt-3 rounded-0" style="min-height:calc(100% - 1.5rem);">
<div class="card p-2 bg-faded rounded-0">
<!-- heading -->
<h2 class="display-4 text-center mb-0">
Announcements
</h2>
<hr class="w-100">
<!-- announcement -->
<p>
<!-- date -->
<span style="color:var(--color-accent);">DD.MM.YYYY:</span>
<!-- description -->
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dignissim imperdiet massa eget porta. Etiam sed leo tellus. Morbi ex diam, pulvinar et congue quis, aliquam ac lacus.
</p>
<!-- announcement -->
<p>
<!-- date -->
<span style="color:var(--color-accent);">DD.MM.YYYY:</span>
<!-- description -->
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dignissim imperdiet massa eget porta. Etiam sed leo tellus.
</p>
<!-- announcement -->
<p>
<!-- date -->
<span style="color:var(--color-accent);">DD.MM.YYYY:</span>
<!-- description -->
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dignissim imperdiet massa eget porta. Etiam sed leo tellus. Morbi ex diam, pulvinar et congue quis, aliquam ac lacus.
</p>
<!-- announcement -->
<p>
<!-- date -->
<span style="color:var(--color-accent);">DD.MM.YYYY:</span>
<!-- description -->
Sed venenatis porta est non vestibulum. Sed sit amet dolor non sem sodales pretium at a lectus.
</p>
</div>
</div>
</div>
</div>
<!-- staff & affiliates -->
<div class="row">
<!-- staff -->
<div class="col-sm">
<div class="card p-2 mt-3 rounded-0" style="height:calc(100% - 1rem);">
<div class="card p-2 bg-faded rounded-0 h-100">
<!-- heading -->
<h2 class="display-4 text-center mb-0" id="staff">
Staff
</h2>
<hr class="w-100 mb-0">
<!-- staff members -->
<div class="row">
<!-- member -->
<div class="col-lg-4 col-md-6 mt-3 align-items-center">
<div class="card p-2 rounded-0">
<!-- link url & icon -->
<a href="staff_url" class="btn rounded-0 p-4" style="background:url(image_url) center; background-size:cover;"></a>
</div>
<!-- info -->
<div class="ml-3">
<!-- name/username -->
<h3 class="font-weight-light mb-0">
name
</h3>
<!-- role -->
<p class="text-muted">
admin, artist
</p>
</div>
</div>
<!-- member -->
<div class="col-lg-4 col-md-6 mt-3 align-items-center">
<div class="card p-2 rounded-0">
<!-- link url & icon -->
<a href="staff_url" class="btn rounded-0 p-4" style="background:url(image_url) center; background-size:cover;"></a>
</div>
<!-- info -->
<div class="ml-3">
<!-- name/username -->
<h3 class="font-weight-light mb-0">
name
</h3>
<!-- role -->
<p class="text-muted">
moderator
</p>
</div>
</div>
<!-- member -->
<div class="col-lg-4 col-md-6 mt-3 align-items-center">
<div class="card p-2 rounded-0">
<!-- link url & icon -->
<a href="staff_url" class="btn rounded-0 p-4" style="background:url(image_url) center; background-size:cover;"></a>
</div>
<!-- info -->
<div class="ml-3">
<!-- name/username -->
<h3 class="font-weight-light mb-0">
name
</h3>
<!-- role -->
<p class="text-muted">
guest artist
</p>
</div>
</div>
<!-- member -->
<div class="col-lg-4 col-md-6 mt-3 align-items-center">
<div class="card p-2 rounded-0">
<!-- link url & icon -->
<a href="staff_url" class="btn rounded-0 p-4" style="background:url(image_url) center; background-size:cover;"></a>
</div>
<!-- info -->
<div class="ml-3">
<!-- name/username -->
<h3 class="font-weight-light mb-0">
name
</h3>
<!-- role -->
<p class="text-muted">
guest artist
</p>
</div>
</div>
<!-- member -->
<div class="col-lg-4 col-md-6 mt-3 align-items-center">
<div class="card p-2 rounded-0">
<!-- link url & icon -->
<a href="staff_url" class="btn rounded-0 p-4" style="background:url(image_url) center; background-size:cover;"></a>
</div>
<!-- info -->
<div class="ml-3">
<!-- name/username -->
<h3 class="font-weight-light mb-0">
name
</h3>
<!-- role -->
<p class="text-muted">
guest artist
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-auto mt-3 pl-0 ml-n3">
<div class="card card-outline-primary rounded-0 h-100 w-100 border-right-0 border-top-0 border-bottom-0" style="border-width:10px; border-style:double; border-color:var(--color-accent)">
</div>
</div>
<!-- affiliates -->
<div class="col-lg-3 my-lg-auto mt-sm-3 pt-lg-3">
<div class="card card-outline-primary p-2" style="border-radius:5rem 5rem 5rem 0; height:calc(100% - 1rem); border-width:3px; border-color:var(--color-accent)">
<div class="card bg-faded p-2 h-100 overflow-hidden" style="border-radius:5rem 5rem 5rem 0;">
<!-- heading -->
<h3 class="display-4 text-center mb-0">
Affiliates
</h3>
<hr class="w-75 mb-0">
<!-- affiliates - best to use all the same ratio of image (e.g. all square or all landscape) -->
<div class="d-block d-lg-flex flex-column">
<div class="row mb-lg-0 mb-3" style="flex:1 1 89px; min-height:89px; overflow-y:auto; overflow-x:hidden; scrollbar-color:transparent transparent; scrollbar-width:thin;">
<!-- affiliate -->
<div class="col-6">
<div class="card p-2 rounded-0 d-inline-block mt-3">
<!-- link -->
<a href="affiliate_url">
<!-- image -->
<img src="image_url">
</a>
</div>
</div>
<!-- affiliate -->
<div class="col-6">
<div class="card p-2 rounded-0 d-inline-block mt-3">
<!-- link -->
<a href="affiliate_url">
<!-- image -->
<img src="image_url">
</a>
</div>
</div>
<!-- affiliate -->
<div class="col-6">
<div class="card p-2 rounded-0 d-inline-block mt-3">
<!-- link -->
<a href="affiliate_url">
<!-- image -->
<img src="image_url">
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- traits -->
<div class="row no-gutters mt-n3 mt-lg-0">
<!-- nav buttons -->
<div class="col-lg-3 col my-lg-auto">
<ul class="nav flex-column">
<!-- common -->
<li class="nav-item mt-3 card card-outline-primary border-right-0 p-2" style="border-radius:5rem 0 0 5rem; border-width:3px; border-color:var(--color-accent);">
<a class="nav-link card btn bg-faded w-100 p-2 display-4 active" style="border-radius:5rem 0 0 5rem; font-size:1.5em; box-shadow:none; color:var(--color-accent);" data-toggle="tab" href="#common1">
Common
</a>
</li>
<!-- uncommon -->
<li class="nav-item mt-3 card card-outline-primary border-right-0 p-2" style="border-radius:5rem 0 0 5rem; border-width:3px; border-color:var(--color-accent);">
<a class="nav-link card btn bg-faded w-100 p-2 display-4" style="border-radius:5rem 0 0 5rem; font-size:1.5em; box-shadow:none; color:var(--color-accent);" data-toggle="tab" href="#uncommon1">
Uncommon
</a>
</li>
<!-- rare -->
<li class="nav-item mt-3 card card-outline-primary border-right-0 p-2" style="border-radius:5rem 0 0 5rem; border-width:3px; border-color:var(--color-accent);">
<a class="nav-link card btn bg-faded w-100 p-2 display-4" style="border-radius:5rem 0 0 5rem; font-size:1.5em; box-shadow:none; color:var(--color-accent);" data-toggle="tab" href="#rare1">
Rare
</a>
</li>
<!-- mythical -->
<li class="nav-item mt-3 card card-outline-primary border-right-0 p-2" style="border-radius:5rem 0 0 5rem; border-width:3px; border-color:var(--color-accent);">
<a class="nav-link card btn bg-faded w-100 p-2 display-4" style="border-radius:5rem 0 0 5rem; font-size:1.5em; box-shadow:none; color:var(--color-accent);" data-toggle="tab" href="#mythical1">
Mythical
</a>
</li>
</ul>
</div>
<div class="col-auto mt-3">
<div class="card card-outline-primary rounded-0 h-100 w-100 border-right-0 border-top-0 border-bottom-0" style="border-width:10px; border-style:double; border-color:var(--color-accent);">
</div>
</div>
<!-- traits -->
<div class="col-lg">
<div class="card rounded-0 p-2 mt-3" style="min-height:calc(100% - 1.5rem);">
<div class="card rounded-0 bg-faded p-2 tab-content">
<!-- common traits -->
<div class="tab-pane fade active show" id="common1">
<div class="card-body">
<!-- heading -->
<h2 class="display-4 text-center mb-0">
Common Traits
</h2>
<hr class="w-100">
<div class="row">
<div class="col-lg-5">
<!-- base image -->
<div class="h-100 w-100">
<img src="image_url">
</div>
<!-- trait images - must be the same size as the base -->
<div id="commonTraits1" class="carousel slide" data-ride="carousel" style="width:calc(100% - 30px); position:absolute; top:0px; left:.95rem;">
<div class="carousel-inner">
<!-- trait - only first should be active -->
<div class="carousel-item active">
<div>
<!-- image -->
<img src="image_url">
</div>
</div>
<!-- trait -->
<div class="carousel-item">
<div>
<!-- image -->
<img src="image_url">
</div>
</div>
<!-- trait -->
<div class="carousel-item">
<div>
<!-- image -->
<img src="image_url">
</div>
</div>
</div>
<!-- next/prev buttons -->
<div class="mt-n5 px-3 py-2 d-flex justify-content-between" style="position:relative; z-index:3;">
<a class="" type="button" href="#commonTraits1" data-slide="prev">
<i class="fas fa-chevron-left fa-2x" style="color:var(--color-accent);"></i>
<span class="sr-only">Previous</span>
</a>
<a class="" type="button" href="#commonTraits1" data-slide="next">
<i class="fas fa-chevron-right fa-2x" style="color:var(--color-accent);"></i>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
<!-- traits info -->
<div class="col">
<div style="max-height:300px; overflow:auto; scrollbar-color:var(--color-accent) transparent; scrollbar-width:thin;">
<!-- trait -->
<div>
<!-- name -->
<h4 class="font-weight-light" style="font-size:1.75rem;">
Trait
</h4>
<!-- description -->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dignissim imperdiet massa eget porta.
</p>
</div>
<!-- trait -->
<div class="mt-2">
<!-- name -->
<h4 class="font-weight-light" style="font-size:1.75rem;">
Trait
</h4>
<!-- description -->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dignissim imperdiet massa eget porta.
</p>
</div>
<!-- trait -->
<div class="mt-2">
<!-- name -->
<h4 class="font-weight-light" style="font-size:1.75rem;">
Trait
</h4>
<!-- description -->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dignissim imperdiet massa eget porta.
</p>
</div>
<!-- color options -->
<div class="mt-2">
<h4 class="font-weight-light" style="font-size:1.75rem;">
Colors
</h4>
<!-- colors -->
<p style="font-family:monospace;">
<!-- color -->
<span style="background-color:#000000; color:#fff;" class="badge badge-pill">
#000000
</span>
<!-- color -->
<span style="background-color:#444; color:#fff;" class="badge badge-pill">
#444444
</span>
<!-- color -->
<span style="background-color:#808080; color:#fff;" class="badge badge-pill">
#808080
</span>
<!-- color -->
<span style="background-color:#ccc; color:#000;" class="badge badge-pill">
#cccccc
</span>
<!-- color -->
<span style="background-color:#fff; color:#000;" class="badge badge-pill">
#ffffff
</span>
</p>
<!-- colors -->
<p style="font-family:monospace;">
<!-- color -->
<span style="background-color:#000000; color:#fff;" class="badge badge-pill">
#000000
</span>
<!-- color -->
<span style="background-color:#444; color:#fff;" class="badge badge-pill">
#444444
</span>
<!-- color -->
<span style="background-color:#808080; color:#fff;" class="badge badge-pill">
#808080
</span>
<!-- color -->
<span style="background-color:#ccc; color:#000;" class="badge badge-pill">
#cccccc
</span>
<!-- color -->
<span style="background-color:#fff; color:#000;" class="badge badge-pill">
#ffffff
</span>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- common traits end -->
<!-- uncommon traits -->
<div class="tab-pane fade" id="uncommon1">
<div class="card-body">
<!-- heading -->
<h3 class="display-4 text-center mb-0">
Uncommon
</h3>
<hr class="w-100">
<div class="row">
<div class="col-lg-5">
<!-- base image -->
<div class="h-100 w-100">
<img src="image_url">
</div>
<!-- trait images - must be the same size as the base -->
<div id="uncommonTraits1" class="carousel slide" data-ride="carousel" style="width:calc(100% - 30px); position:absolute; top:0px; left:.95rem;">
<div class="carousel-inner">
<!-- trait - only first should be active -->
<div class="carousel-item active">
<div>
<!-- image -->
<img src="image_url">
</div>
</div>
<!-- trait -->
<div class="carousel-item">
<div>
<!-- image -->
<img src="image_url">
</div>
</div>
<!-- trait -->
<div class="carousel-item">
<div>
<!-- image -->
<img src="image_url">
</div>
</div>
</div>
<!-- next/prev buttons -->
<div class="mt-n5 px-3 py-2 d-flex justify-content-between" style="position:relative; z-index:3;">
<a class="" type="button" href="#uncommonTraits1" data-slide="prev">
<i class="fas fa-chevron-left fa-2x" style="color:var(--color-accent);"></i>
<span class="sr-only">Previous</span>
</a>
<a class="" type="button" href="#uncommonTraits1" data-slide="next">
<i class="fas fa-chevron-right fa-2x" style="color:var(--color-accent);"></i>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
<!-- traits info -->
<div class="col">
<div style="max-height:300px; overflow:auto; scrollbar-color:var(--color-accent) transparent; scrollbar-width:thin;">
<!-- trait -->
<div>
<!-- name -->
<h4 class="font-weight-light" style="font-size:1.75rem;">
Trait
</h4>
<!-- description -->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dignissim imperdiet massa eget porta.
</p>
</div>
<!-- trait -->
<div class="mt-2">
<!-- name -->
<h4 class="font-weight-light" style="font-size:1.75rem;">
Trait
</h4>
<!-- description -->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dignissim imperdiet massa eget porta.
</p>
</div>
<!-- trait -->
<div class="mt-2">
<!-- name -->
<h4 class="font-weight-light" style="font-size:1.75rem;">
Trait
</h4>
<!-- description -->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dignissim imperdiet massa eget porta.
</p>
</div>
<!-- color options -->
<div class="mt-2">
<h4 class="font-weight-light" style="font-size:1.75rem;">
Colors
</h4>
<!-- colors -->
<p style="font-family:monospace;">
<!-- color -->
<span style="background-color:#000000; color:#fff;" class="badge badge-pill">
#000000
</span>
<!-- color -->
<span style="background-color:#444; color:#fff;" class="badge badge-pill">
#444444
</span>
<!-- color -->
<span style="background-color:#808080; color:#fff;" class="badge badge-pill">
#808080
</span>
<!-- color -->
<span style="background-color:#ccc; color:#000;" class="badge badge-pill">
#cccccc
</span>
<!-- color -->
<span style="background-color:#fff; color:#000;" class="badge badge-pill">
#ffffff
</span>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- uncommon traits end -->
<!-- rare traits -->
<div class="tab-pane fade" id="rare1">
<div class="card-body">
<!-- heading -->
<h3 class="display-4 text-center mb-0">
Rare
</h3>
<hr class="w-100">
<div class="row">
<div class="col-lg-5">
<!-- base image -->
<div class="h-100 w-100">
<img src="image_url">
</div>
<!-- trait images - must be the same size as the base -->
<div id="rareTraits1" class="carousel slide" data-ride="carousel" style="width:calc(100% - 30px); position:absolute; top:0px; left:.95rem;">
<div class="carousel-inner">
<!-- trait - only first should be active -->
<div class="carousel-item active">
<div>
<!-- image -->
<img src="image_url">
</div>
</div>
<!-- trait -->
<div class="carousel-item">
<div>
<!-- image -->
<img src="image_url">
</div>
</div>
<!-- trait -->
<div class="carousel-item">
<div>
<!-- image -->
<img src="image_url">
</div>
</div>
</div>
<!-- next/prev buttons -->
<div class="mt-n5 px-3 py-2 d-flex justify-content-between" style="position:relative; z-index:3;">
<a class="" type="button" href="#rareTraits1" data-slide="prev">
<i class="fas fa-chevron-left fa-2x" style="color:var(--color-accent);"></i>
<span class="sr-only">Previous</span>
</a>
<a class="" type="button" href="#rareTraits1" data-slide="next">
<i class="fas fa-chevron-right fa-2x" style="color:var(--color-accent);"></i>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
<!-- traits info -->
<div class="col">
<div style="max-height:300px; overflow:auto; scrollbar-color:var(--color-accent) transparent; scrollbar-width:thin;">
<!-- trait -->
<div>
<!-- name -->
<h4 class="font-weight-light" style="font-size:1.75rem;">
Trait
</h4>
<!-- description -->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dignissim imperdiet massa eget porta.
</p>
</div>
<!-- trait -->
<div class="mt-2">
<!-- name -->
<h4 class="font-weight-light" style="font-size:1.75rem;">
Trait
</h4>
<!-- description -->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dignissim imperdiet massa eget porta.
</p>
</div>
<!-- trait -->
<div class="mt-2">
<!-- name -->
<h4 class="font-weight-light" style="font-size:1.75rem;">
Trait
</h4>
<!-- description -->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dignissim imperdiet massa eget porta.
</p>
</div>
<!-- color options -->
<div class="mt-2">
<h4 class="font-weight-light" style="font-size:1.75rem;">
Colors
</h4>
<!-- colors -->
<p style="font-family:monospace;">
<!-- color -->
<span style="background-color:#000000; color:#fff;" class="badge badge-pill">
#000000
</span>
<!-- color -->
<span style="background-color:#444; color:#fff;" class="badge badge-pill">
#444444
</span>
<!-- color -->
<span style="background-color:#808080; color:#fff;" class="badge badge-pill">
#808080
</span>
<!-- color -->
<span style="background-color:#ccc; color:#000;" class="badge badge-pill">
#cccccc
</span>
<!-- color -->
<span style="background-color:#fff; color:#000;" class="badge badge-pill">
#ffffff
</span>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- rare traits end -->
<!-- mythical traits -->
<div class="tab-pane fade" id="mythical1">
<div class="card-body">
<!-- heading -->
<h3 class="display-4 text-center mb-0">
Mythical
</h3>
<hr class="w-100">
<div class="row">
<div class="col-lg-5">
<!-- base image -->
<div class="h-100 w-100">
<img src="image_url">
</div>
<!-- trait images - must be the same size as the base -->
<div id="mythicalTraits1" class="carousel slide" data-ride="carousel" style="width:calc(100% - 30px); position:absolute; top:0px; left:.95rem;">
<div class="carousel-inner">
<!-- trait - only first should be active -->
<div class="carousel-item active">
<div>
<!-- image -->
<img src="image_url">
</div>
</div>
<!-- trait -->
<div class="carousel-item">
<div>
<!-- image -->
<img src="image_url">
</div>
</div>
</div>
<!-- next/prev buttons -->
<div class="mt-n5 px-3 py-2 d-flex justify-content-between" style="position:relative; z-index:3;">
<a class="" type="button" href="#mythicalTraits1" data-slide="prev">
<i class="fas fa-chevron-left fa-2x" style="color:var(--color-accent);"></i>
<span class="sr-only">Previous</span>
</a>
<a class="" type="button" href="#mythicalTraits1" data-slide="next">
<i class="fas fa-chevron-right fa-2x" style="color:var(--color-accent);"></i>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
<!-- traits info -->
<div class="col">
<div style="max-height:300px; overflow:auto; scrollbar-color:var(--color-accent) transparent; scrollbar-width:thin;">
<!-- trait -->
<div>
<!-- name -->
<h4 class="font-weight-light" style="font-size:1.75rem;">
Trait
</h4>
<!-- description -->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dignissim imperdiet massa eget porta.
</p>
</div>
<!-- trait -->
<div class="mt-2">
<!-- name -->
<h4 class="font-weight-light" style="font-size:1.75rem;">
Trait
</h4>
<!-- description -->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dignissim imperdiet massa eget porta.
</p>
</div>
<!-- trait -->
<div class="mt-2">
<!-- name -->
<h4 class="font-weight-light" style="font-size:1.75rem;">
Trait
</h4>
<!-- description -->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dignissim imperdiet massa eget porta.
</p>
</div>
<!-- color options -->
<div class="mt-2">
<h4 class="font-weight-light" style="font-size:1.75rem;">
Colors
</h4>
<!-- colors -->
<p style="font-family:monospace;">
<!-- color -->
<span style="background-color:#000000; color:#fff;" class="badge badge-pill">
#000000
</span>
<!-- color -->
<span style="background-color:#444; color:#fff;" class="badge badge-pill">
#444444
</span>
<!-- color -->
<span style="background-color:#808080; color:#fff;" class="badge badge-pill">
#808080
</span>
<!-- color -->
<span style="background-color:#ccc; color:#000;" class="badge badge-pill">
#cccccc
</span>
<!-- color -->
<span style="background-color:#fff; color:#000;" class="badge badge-pill">
#ffffff
</span>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- mythical traits end -->
</div>
</div>
</div>
</div>
<!-- featured characters -->
<div class="row">
<!-- featured -->
<div class="col-sm-4">
<div class="card p-2 mt-3" style="border-radius:50% 50% 0 0;">
<div class="card bg-faded pt-sm-4 pt-3 text-center" style="border-radius:50% 50% 0 0;">
<!-- character link -->
<a href="CHAR_URL">
<!-- image -->
<img src="image_url">
</a>
<!-- label -->
<h3 class="display-4">
Featured
</h3>
</div>
</div>
</div>
<!-- featured -->
<div class="col-sm-4">
<div class="card p-2 mt-3" style="border-radius:50% 50% 0 0;">
<div class="card bg-faded pt-sm-4 pt-3 text-center" style="border-radius:50% 50% 0 0;">
<!-- character link -->
<a href="CHAR_URL">
<!-- image -->
<img src="image_url">
</a>
<!-- label -->
<h3 class="display-4">
Featured
</h3>
</div>
</div>
</div>
<!-- featured -->
<div class="col-sm-4">
<div class="card p-2 mt-3" style="border-radius:50% 50% 0 0;">
<div class="card bg-faded pt-sm-4 pt-3 text-center" style="border-radius:50% 50% 0 0;">
<!-- character link -->
<a href="CHAR_URL">
<!-- image -->
<img src="image_url">
</a>
<!-- label -->
<h3 class="display-4">
Featured
</h3>
</div>
</div>
</div>
</div>
<!-- credit -->
<div class="text-center mt-3">
<a href="https://toyhou.se/HTMLobster" data-toggle="tooltip" title="Code by HTMLobster">
<i class="fa-solid fa-lobster fa-fw"></i>
</a>
</div>
</div>