reef
created by:8byte
BootstrapHTMLWorld
Copy
<!---
==== Coral - V1
==== HTML by 8byte
----
==== Colors
---- This code uses bootstrap colors.
--->
<div>
<div class="row no-gutters">
<div class="col-md-8 p-2">
<div class="card rounded-0">
<!--- header --->
<div class="card-header align-items-center justify-content-center" style="background: url(IMGURL); background-size: cover; height: 150px; border-radius: 0;">
<h1 class="display-2 text-center text-white mb-0" style="text-shadow: 0 0 3px #ffffff;">welcome</h1>
</div>
<div class="card-body p-md-3 p-2">
<!--- short introduction to the world --->
<p>Suspendisse posuere ex in sapien efficitur, a porta mi convallis. Fusce lacinia diam eros, ac efficitur dolor vehicula in. Quisque eu massa condimentum, vehicula augue sed, vulputate nulla.</p>
<hr>
<h3 class="text-center text-primary">Quick Links</h3>
<div class="p-1"></div>
<div class="d-flex flex-row flex-wrap justify-content-center">
<!--- link --->
<div class="rounded-circle" style="background: url(IMGURL); background-size: cover; position: relative; width: 125px;">
<div class="w-100 h-100 align-items-center justify-content-center" style="position: absolute;">
<!--- link title --->
<h3 class="font-weight-normal text-white mb-0" style="text-shadow: 0 0 3px #ffffff;">Species</h3>
</div>
<!--- link to page --->
<a href="LINK" class="rounded-circle d-block w-100" style="padding-top: 100%; position: relative; z-index: 9;"></a>
</div>
<!--- divider ---><div class="p-1"></div>
<!--- link --->
<div class="rounded-circle" style="background: url(IMGURL); background-size: cover; position: relative; width: 125px;">
<div class="w-100 h-100 align-items-center justify-content-center" style="position: absolute;">
<!--- link title --->
<h3 class="font-weight-normal text-white mb-0" style="text-shadow: 0 0 3px #ffffff;">Shop</h3>
</div>
<!--- link to page --->
<a href="LINK" class="rounded-circle d-block w-100" style="padding-top: 100%; position: relative; z-index: 9;"></a>
</div>
<!--- divider ---><div class="p-1"></div>
<!--- link --->
<div class="rounded-circle" style="background: url(IMGURL); background-size: cover; position: relative; width: 125px;">
<div class="w-100 h-100 align-items-center justify-content-center" style="position: absolute;">
<!--- link title --->
<h3 class="font-weight-normal text-white mb-0" style="text-shadow: 0 0 3px #ffffff;">Rules</h3>
</div>
<!--- link to page --->
<a href="LINK" class="rounded-circle d-block w-100" style="padding-top: 100%; position: relative; z-index: 9;"></a>
</div>
<!--- end of links --->
</div>
</div>
</div>
<!--- divider ---><div class="p-2"></div>
<div class="card rounded-0">
<!--- about header --->
<div class="card-header text-center p-md-3 p-2" style="background: url(IMGURL); background-size: cover; border-radius: 0;">
<h1 class="display-4 text-center text-white mb-0" style="text-shadow: 0 0 3px #ffffff;">about/faq</h1>
</div>
<div class="card-body p-md-3 p-2">
<p>Donec eget elementum augue, a vehicula tellus. Vivamus vehicula egestas dui, molestie mattis libero consequat ac. Curabitur ac ipsum tempor, rutrum risus ac, elementum elit. Proin pharetra at ligula in egestas. Vivamus sem nunc, mattis sit amet posuere nec, volutpat vitae libero.</p>
<!--- faq ---><div class="p-1"></div>
<a href="#FAQ-1" data-toggle="collapse" class="font-weight-bold">Donec lacinia ex vel lacinia feugiat?</a>
<div class="collapse" id="FAQ-1">
<!--- answer --->
<p>Sed viverra mi at risus luctus semper. Etiam vel ipsum faucibus, molestie arcu vel, commodo ligula.</p>
</div>
<!--- faq ---><div class="p-1"></div>
<a href="#FAQ-2" data-toggle="collapse" class="font-weight-bold">Vivamus posuere felis nulla, vitae consectetur augue tincidunt ac?</a>
<div class="collapse" id="FAQ-2">
<!--- answer --->
<p>Duis in tincidunt lacus, porttitor consectetur sem. In eu dictum dui. Proin vitae efficitur libero, eget elementum dolor.</p>
</div>
<!--- end of faq --->
</div>
</div>
<!--- divider ---><div class="p-2"></div>
<div class="card rounded-0">
<!--- staff header --->
<div class="card-header text-center p-md-3 p-2" style="background: url(IMGURL); background-size: cover; border-radius: 0;">
<h1 class="display-4 text-center text-white mb-0" style="text-shadow: 0 0 3px #ffffff;">staff</h1>
</div>
<div class="card-body p-md-3 p-2">
<div class="d-flex flex-row flex-wrap justify-content-center align-items-center">
<!--- mod --->
<div class="flex-column align-items-center">
<!--- image --->
<div class="rounded-circle" style="background: url(IMGURL); background-size: cover; width: 125px;">
<!--- link to mod --->
<a href="LINK" class="rounded-circle d-block w-100" style="padding-top: 100%;"></a>
</div>
<!--- mod info --->
<h4 class="mt-2 mb-0">@founder</h4>
<span>[ role ]</span>
</div>
<!--- divider ---><div class="p-1"></div>
<div class="flex-column align-items-center">
<!--- image --->
<div class="rounded-circle" style="background: url(IMGURL); background-size: cover; width: 100px;">
<!--- link to mod --->
<a href="LINK" class="rounded-circle d-block w-100" style="padding-top: 100%;"></a>
</div>
<!--- mod info --->
<h5 class="mt-2 mb-0">@moderator</h5>
<span>[ role ]</span>
</div>
<!--- divider ---><div class="p-1"></div>
<div class="flex-column align-items-center">
<!--- image --->
<div class="rounded-circle" style="background: url(IMGURL); background-size: cover; width: 100px;">
<!--- link to mod --->
<a href="LINK" class="rounded-circle d-block w-100" style="padding-top: 100%;"></a>
</div>
<!--- mod info --->
<h5 class="mt-2 mb-0">@moderator</h5>
<span>[ role ]</span>
</div>
<!--- divider ---><div class="p-1"></div>
<div class="flex-column align-items-center">
<!--- image --->
<div class="rounded-circle" style="background: url(IMGURL); background-size: cover; width: 100px;">
<!--- link to mod --->
<a href="LINK" class="rounded-circle d-block w-100" style="padding-top: 100%;"></a>
</div>
<!--- mod info --->
<h5 class="mt-2 mb-0">@moderator</h5>
<span>[ role ]</span>
</div>
<!--- divider ---><div class="p-1"></div>
<div class="flex-column align-items-center">
<!--- image --->
<div class="rounded-circle" style="background: url(IMGURL); background-size: cover; width: 100px;">
<!--- link to mod --->
<a href="LINK" class="rounded-circle d-block w-100" style="padding-top: 100%;"></a>
</div>
<!--- mod info --->
<h5 class="mt-2 mb-0">@moderator</h5>
<span>[ role ]</span>
</div>
<!--- end of links --->
</div>
</div>
</div>
<!--- divider ---><div class="p-1"></div>
<div class="row no-gutters mx-n2">
<div class="col-md-6 p-2">
<div class="card h-100 flex-column rounded-0">
<!--- affiliates header --->
<div class="card-header text-center p-md-3 p-2" style="background: url(IMGURL); background-size: cover; border-radius: 0;">
<h1 class="display-4 text-center text-white mb-0" style="text-shadow: 0 0 3px #ffffff;">affiliates</h1>
</div>
<div class="card-body h-100 flex-column p-md-3 p-2">
<!--- affiliate --->
<div class="card rounded-0 p-2 h-100">
<!--- link to affiliate --->
<a href="LINK">
<!--- affiliate image --->
<img src="IMGURL" class="w-100">
</a>
</div>
<!--- divider ---><div class="p-1"></div>
<!--- affiliate --->
<div class="card rounded-0 p-2 h-100">
<!--- link to affiliate --->
<a href="LINK">
<!--- affiliate image --->
<img src="IMGURL" class="w-100">
</a>
</div>
<!--- end of affiliates --->
</div>
</div>
</div>
<div class="col-md-6 p-2">
<!--- external links --->
<div class="card h-100 flex-column rounded-0">
<!--- links header --->
<div class="card-header text-center p-md-3 p-2" style="background: url(IMGURL); background-size: cover; border-radius: 0;">
<h1 class="display-4 text-center text-white mb-0" style="text-shadow: 0 0 3px #ffffff;">links</h1>
</div>
<div class="card-body h-100 flex-column p-md-3 p-2">
<!--- link --->
<a href="LINK" class="btn btn-primary rounded-0 flex-fill justify-content-center align-items-center">
<i class="fab fa-discord fa-fw mr-2"></i> Discord Server
</a>
<!--- divider ---><div class="p-1"></div>
<!--- link --->
<a href="LINK" class="btn btn-primary rounded-0 flex-fill justify-content-center align-items-center">
<i class="fab fa-deviantart fa-fw mr-2"></i> Deviantart
</a>
<!--- divider ---><div class="p-1"></div>
<!--- link --->
<a href="LINK" class="btn btn-primary rounded-0 flex-fill justify-content-center align-items-center">
<i class="fab fa-weebly fa-fw mr-2"></i> Site
</a>
<!--- divider ---><div class="p-1"></div>
<!--- link --->
<a href="LINK" class="btn btn-primary rounded-0 flex-fill justify-content-center align-items-center">
<i class="fas fa-link fa-fw mr-2"></i> Link
</a>
<!--- divider ---><div class="p-1"></div>
<!--- link --->
<a href="LINK" class="btn btn-primary rounded-0 flex-fill justify-content-center align-items-center">
<i class="fas fa-link fa-fw mr-2"></i> Link
</a>
<!--- end of links --->
</div>
</div>
</div>
</div>
<!--- end --->
</div>
<!--- right sidebar --->
<div class="col-md-4 p-2">
<div class="sticky-top" style="top: 1rem;">
<!--- latest event --->
<div class="card rounded-0">
<!--- event image --->
<div class="card-body" style="background: url(IMGURL); background-size: cover; height: 175px;">
<!--- link to event --->
<a href="LINK" class="h-100 w-100 btn align-items-end justify-content-end">
<span class="h3 text-white" style="text-shadow: 0 0 3px #ffffff;">Event Name</span>
</a>
</div>
</div>
<!--- divider ---><div class="p-2"></div>
<!--- updates --->
<div class="card rounded-0">
<!--- updates header --->
<div class="card-header text-center p-md-3 p-2" style="background: url(IMGURL); background-size: cover; border-radius: 0;">
<h1 class="text-center text-white mb-0" style="text-shadow: 0 0 3px #ffffff;">updates</h1>
</div>
<div class="card-body p-md-3 p-2 overflow-auto" style="max-height: 200px;">
<div class="row no-gutters">
<!--- update --->
<div class="col-md-4 p-1">
<div class="justify-content-between align-items-center">
<strong>mm/dd</strong>
<i class="fas fa-fish fa-fw mr-2 mt-1"></i>
</div>
</div>
<div class="col-md-8 p-1">
<p>Nullam euismod, nunc et mattis sollicitudin, risus sem luctus arcu.</p>
</div>
<!--- update --->
<div class="col-md-4 p-1">
<div class="justify-content-between align-items-center">
<strong>mm/dd</strong>
<i class="fas fa-fish fa-fw mr-2 mt-1"></i>
</div>
</div>
<div class="col-md-8 p-1">
<p>Nullam euismod, nunc et mattis sollicitudin, risus sem luctus arcu.</p>
</div>
<!--- update --->
<div class="col-md-4 p-1">
<div class="justify-content-between align-items-center">
<strong>mm/dd</strong>
<i class="fas fa-fish fa-fw mr-2 mt-1"></i>
</div>
</div>
<div class="col-md-8 p-1">
<p>Nullam euismod, nunc et mattis sollicitudin, risus sem luctus arcu.</p>
</div>
<!--- end of updates --->
</div>
</div>
</div>
<!--- divider ---><div class="p-2"></div>
<!--- featured character --->
<div class="card rounded-0">
<!--- character header --->
<div class="card-header text-center p-md-3 p-2" style="background: url(IMGURL); background-size: cover; border-radius: 0;">
<h1 class="text-center text-white mb-0" style="text-shadow: 0 0 3px #ffffff;">featured character</h1>
</div>
<div class="card-body p-md-3 p-2">
<div class="align-items-center">
<!--- character image --->
<div class="rounded-circle" style="background: url(IMGURL); background-size: cover; width: 125px;">
<!--- link to character --->
<a href="LINK" class="rounded-circle d-block w-100" style="padding-top: 100%;"></a>
</div>
<div class="ml-md-3 ml-2">
<h4 class="mt-2 mb-0">
<!--- character info --->
<a href="LINK">
Character Name
</a>
</h4>
<span>[ owned by @owner ]</span>
</div>
</div>
</div>
</div>
<!--- divider ---><div class="p-2"></div>
<div class="card rounded-0 text-center p-1">
<small>code by @8byte</small>
</div>
</div>
</div>
</div>
</div>Copy
<!---
==== Coral - V2
==== HTML by 8byte
----
==== Colors
---- This code uses bootstrap colors.
--->
<div>
<div class="row no-gutters mx-n2 mt-n2">
<!--- welcome box --->
<div class="col-md-8 p-2">
<div class="card p-md-3 p-2">
<h1 class="text-primary align-items-center">
<i class="far fa-sparkles fa-2x mr-n4" style="opacity: .2;"></i>
<span>welcome to the world</span>
</h1>
<!--- blurb about the world --->
<p>Maecenas non fringilla tortor. Fusce et erat condimentum, dapibus est vitae, ornare dui. Integer a aliquam dui. Fusce ut porta metus. Vestibulum aliquam auctor diam, ac lacinia sem bibendum ut. Aenean suscipit magna ut leo viverra sodales. Aliquam sit amet eros sem. Pellentesque a massa cursus, feugiat libero ut, aliquam lacus. Maecenas bibendum at tortor et consequat. Nunc in sapien pulvinar, dictum augue quis, placerat urna. Nunc volutpat pulvinar odio in tempor. Phasellus ultrices scelerisque nunc id maximus. Duis auctor lacinia tellus, ut fermentum ante laoreet vel. Integer sed sapien sit amet augue tincidunt lobortis id in nisi. Aenean faucibus iaculis nisi sit amet vehicula.</p>
</div>
<div class="p-2"></div>
<div class="row no-gutters mx-n2 mt-n2">
<!--- mascot(s) --->
<div class="col-md-5 p-2">
<div class="card h-100">
<!--- header image --->
<div class="card-header p-md-3 p-2" style="background: url(IMGURL); background-size: cover; background-position: center; border-radius: 0;">
<!--- title --->
<h1 class="text-white align-items-center mb-0" style="text-shadow: 0 0 3px #ffffff;">
<i class="fas fa-dragon fa-fw mr-n2" style="opacity: .2;"></i>
Mascots
</h1>
</div>
<div class="card-body h-100 p-md-3 p-2">
<!--- link to character --->
<a href="LINK" class="img-thumbnail">
<img src="IMGURL">
</a>
<h5 class="text-primary text-center">Character Name</h5>
</div>
</div>
</div>
<!--- staff --->
<div class="col-md-7 p-2">
<div class="card">
<!--- header image --->
<div class="card-header p-md-3 p-2" style="background: url(IMGURL); background-size: cover; background-position: center; border-radius: 0;">
<!--- title --->
<h1 class="text-white align-items-center mb-0" style="text-shadow: 0 0 3px #ffffff;">
<i class="fas fa-users fa-fw mr-n2" style="opacity: .2;"></i>
Staff
</h1>
</div>
<div class="card-body p-md-2 p-1">
<div class="row no-gutters">
<!--- founder --->
<div class="col-6 p-1">
<!--- link to founder --->
<a href="LINK" class="img-thumbnail">
<!--- image --->
<img src="IMGURL">
</a>
</div>
<div class="col-6 p-1 flex-column justify-content-center">
<h5>@username</h5>
<strong>[ founder ]</strong>
</div>
<!--- other staff --->
<div class="col-4 flex-column align-items-center p-1">
<!--- link --->
<a href="LINK" class="img-thumbnail">
<!--- image --->
<img src="IMGURL">
</a>
<strong>@username</strong><div></div>
<small>[ role in world ]</small>
</div>
<!--- other staff --->
<div class="col-4 flex-column align-items-center p-1">
<!--- link --->
<a href="LINK" class="img-thumbnail">
<!--- image --->
<img src="IMGURL">
</a>
<strong>@username</strong><div></div>
<small>[ role in world ]</small>
</div>
<!--- other staff --->
<div class="col-4 flex-column align-items-center p-1">
<!--- link --->
<a href="LINK" class="img-thumbnail">
<!--- image --->
<img src="IMGURL">
</a>
<strong>@username</strong><div></div>
<small>[ role in world ]</small>
</div>
<!--- end of staff --->
</div>
</div>
</div>
<!--- end --->
</div>
</div>
</div>
<!--- sticky sidebar --->
<div class="col-md-4 p-2">
<div class="sticky-top" style="top: 1rem;">
<!--- updates --->
<div class="card">
<!--- header image --->
<div class="card-header p-md-3 p-2" style="background: url(IMGURL); background-size: cover; background-position: center; border-radius: 0;">
<!--- title --->
<h1 class="text-white align-items-center mb-0" style="text-shadow: 0 0 3px #ffffff;">
<i class="fas fa-thumbtack fa-fw mr-n2" style="opacity: .2; transform: rotate(-15deg);"></i>
Updates
</h1>
</div>
<div class="card-body overflow-auto p-md-3 p-2" style="max-height: 150px;">
<div class="row no-gutters">
<!--- update --->
<div class="col-4"><strong>Mon DD</strong></div>
<div class="col-8">
<p>Cras justo odio, aliquet nec ornare finibus, blandit at ipsum.</p>
</div>
<!--- divider ---><div class="col-12"><hr class="w-100 my-2"></div>
<!--- update --->
<div class="col-4"><strong>Mon DD</strong></div>
<div class="col-8">
<p>Aliquam vel sapien quis nisi porttitor sollicitudin ac ut dui.</p>
</div>
<!--- divider ---><div class="col-12"><hr class="w-100 my-2"></div>
<!--- update --->
<div class="col-4"><strong>Mon DD</strong></div>
<div class="col-8">
<p> Phasellus fermentum aliquam tristique.</p>
</div>
<!--- end of updates --->
</div>
</div>
</div>
<!--- divider ---><div class="p-2"></div>
<!--- links --->
<div class="card">
<!--- header image --->
<div class="card-header p-md-3 p-2" style="background: url(IMGURL); background-size: cover; background-position: center; border-radius: 0;">
<!--- title --->
<h1 class="text-white align-items-center mb-0" style="text-shadow: 0 0 3px #ffffff;">
<i class="fas fa-link fa-fw mr-n2" style="opacity: .2;"></i>
Links
</h1>
</div>
<div class="card-body p-md-3 p-2">
<div class="row no-gutters mx-n1">
<!--- link --->
<div class="col-6 p-1">
<a href="LINK" class="btn btn-primary w-100">Link</a>
</div>
<!--- link --->
<div class="col-6 p-1">
<a href="LINK" class="btn btn-primary w-100">Link</a>
</div>
<!--- link --->
<div class="col-6 p-1">
<a href="LINK" class="btn btn-primary w-100">Link</a>
</div>
<!--- link --->
<div class="col-6 p-1">
<a href="LINK" class="btn btn-primary w-100">Link</a>
</div>
<!--- link --->
<div class="col-6 p-1">
<a href="LINK" class="btn btn-primary w-100">Link</a>
</div>
<!--- link --->
<div class="col-6 p-1">
<a href="LINK" class="btn btn-primary w-100">Link</a>
</div>
<!--- end of links --->
</div>
</div>
</div>
<!--- divider ---><div class="p-2"></div>
<div class="card p-1">
<div class="text-right">code by @8byte</div>
</div>
<!--- end --->
</div>
</div>
</div>
</div>