<!-- THIS CODE USES CUSTOM COLORS
5. || Everlight || F2U
Below are all the colors you can SELECT and replace by
using Crl+F ==> + ==> Write your hex below ==> Click "All"
==============================
Dark bg color == #0C3142
Primary bg color == #13647C
Faded bg color == #89B7AF
Featured chars text == #160C02
White text + borders color == #fff
Fandom section background == #EAE9AC
Fandom section text == #A86226
!NOTICE!
========================
All link text is still marked with bootstrap text-light
so it'll have hover effect, but has custom colors underneath.
If you want links to be custom colored as the rest of white text
then simply delete all "text-light" from code!
-->
<div class="container p-0 mt-3" style="max-width: 800px; font-size: 16px; font-weight: 300;">
<div class="row no-gutters">
<div class="col-sm-12 col-lg-4 pr-2 pl-2 pl-lg-0 order-1 order-lg-0">
<!--
===============================
USEFUL INFO SECTION
===============================
-->
<div class="card p-1 mb-3 text-center" style="min-height: 400px; border: double 7px; background: #0C3142; color: #fff;">
<!-- DECORETIVE STARS IN THE CARD'S CORNERS-->
<i class="fas fa-sparkles" style="position: absolute; left: 6px; top: 8px; transform: rotate(45deg);"></i>
<i class="fas fa-sparkles fa-flip-horizontal" style="position: absolute; right: 6px; top: 8px; transform: rotate(135deg);"></i>
<!--=======================================-->
<p class="mt-1" style="font-size: 22px;">
Useful info
</p>
<!-- TEXT BUTTON-->
<a href="LINKHERE" class="btn m-1 ml-3 mr-3 text-light" style="background: #13647C; color: #fff;">
Your text link
</a>
<!-- TEXT BUTTON-->
<a href="LINKHERE" class="btn m-1 ml-3 mr-3 text-light" style="background: #13647C; color: #fff;">
Your text link
</a>
<!-- TEXT BUTTON-->
<a href="LINKHERE" class="btn m-1 ml-3 mr-3 text-light" style="background: #13647C; color: #fff;">
Your text link
</a>
<div class="row justify-content-center pt-3 pb-3">
<small><i class="fas fa-star"></i></small>
<i class="fas fa-star"></i>
<small><i class="fas fa-star"></i></small>
</div>
<!--
===============================
LINKS SECTION
You can change fa icons or delete
links you don't need!
===============================
-->
<a href="LINKHERE" class="text-left text-light pl-2 pr-2 pb-1" style="color: #fff;"><i class="
fab fa-deviantart fa-fw pull-right m-1"></i> Deviantart </a>
<a href="LINKHERE" class="text-left text-light pl-2 pr-2 pb-1" style="color: #fff;"><i class="
fas fa-paw pull-right fa-fw m-1"></i> Furaffinity </a>
<a href="LINKHERE" class="text-left text-light pl-2 pr-2 pb-1" style="color: #fff;"><i class="
fab fa-twitter pull-right fa-fw m-1"></i> Twitter </a>
<a href="LINKHERE" class="text-left text-light pl-2 pr-2 pb-1" style="color: #fff;"><i class="
fab fa-tumblr pull-right fa-fw m-1"></i> Tumblr </a>
<a href="LINKHERE" class="text-left text-light pl-2 pr-2 pb-1 " style="color: #fff;"><i class="
fab fa-discord pull-right fa-fw m-1"></i> #xxxxName </a>
</div>
<!-- VIDEO SECTION -- HIDDEN ON MOBILE -->
<div class="card border-0 hidden-sm-down" style="min-height: 200px; background: #89B7AF;">
<div class="card m-3" style="height: 168px; border: double 7px #fff; background: #0C3142;">
<!--
====================================================
VIDEO EMBED -- INSERT VIDEO ID BETWEEN "embed/" AND "?"
If you are struggling with what YT video ID is, let
me show you an example on the video that is embedded
here in code's blank.
Here's the whole video link:
https://www.youtube.com/watch?v=PZfqGU6Y5uU&ab_channel=ThunderLotusGames
And what we need is a string between "=" and "&":
https://www.youtube.com/watch?v= PZfqGU6Y5uU &ab_channel=ThunderLotusGames
And we put it here:
https://www.youtube.com/embed/ PZfqGU6Y5uU ?modestbranding=1
That's it!
====================================================
-->
<iframe width="212" height="154" src="https://www.youtube.com/embed/EMBEDID?modestbranding=1" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
<div class="col-sm-12 col-lg-4 pl-0 pl-lg-2 pr-0 pr-lg-2 mb-3 mb-lg-0">
<!-- PROFILE IMAGE -- INSERT YOUR LINK INSTEAD OF "URLHERE"-->
<div class="card border-0 mb-3" style="min-height: 200px;
background-image: url(URLHERE);
background-size: cover; background-position: center;"></div>
<div class="container col-11 col-lg-12 card border-0" style="height: 400px; overflow: hidden; background: #13647C; color: #fff;">
<!-- THAT'S THE DOTS IN THE CARD'S CORNERS-->
<i style="position: absolute; left: 10px; top:0px;">•</i>
<i style="position: absolute; right: 10px; top:0px;">•</i>
<i style="position: absolute; right: 10px; bottom:0px;">•</i>
<i style="position: absolute; left: 10px; bottom:0px;">•</i>
<!--======================================-->
<p class="text-center pt-2" style="font-size: 24px; font-weight: 400;">
Your Name
</p>
<p class="text-center" style="margin-top: -10px;">
content • content • content
</p>
<i class="far fa-star text-center mt-2 mb-2"></i>
<!-- INTRO SECTION -- YOU CAN ADD MORE PARAGRAPHS -->
<div class="text-justify p-0 small" style="height:268px; overflow: auto;">
<p>Write some info here. This box will scroll. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</p>
<p>Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
</div>
<!-- MY CREDIT -- DO NOT REMOVE!-->
<a href="https://toyhou.se/ChiiAka" title="Code by ChiiAka" class="text-center text-light tooltipster" style="color: #fff;"><i class="far fa-code mt-1"></i></a>
</div>
</div>
<div class="container card border-0 col-lg-4 pl-0 pl-lg-2 order-2" style="background:none;">
<!--
====================================
FEATURED CHARACTERS SECTION
====================================
-->
<div class="card border-0 mb-3 order-2 order-lg-0 ml-4 mr-4 ml-lg-0 mr-lg-0" style="min-height: 400px; background: #89B7AF; color: #160C02;">
<p class="mt-2 text-center" style="font-size: 22px;">Feautured characters</p>
<!-- LEFT CHARACTER -->
<div class="row no-gutters">
<a href="CHARLINK"
title="
Character Name
"
class="m-2 col-6 tooltipster" style="height: 100px;
background-image: url(URLHERE);
background-size: cover; background-position: center; border: solid 3px #13647C;"></a>
<div class="card-flex col-5 align-items-center justify-content-center">
<i>•</i>
<!-- STAR ICON AT CENTER-->
<i class="far fa-star ml-1 mr-1"></i>
<i>•</i>
</div>
</div>
<!-- RIGHT CHARACTER -->
<div class="row no-gutters">
<div class="card-flex col-5 align-items-center justify-content-center">
<i>•</i>
<!-- STAR ICON AT CENTER-->
<i class="far fa-star ml-1 mr-1"></i>
<i>•</i>
</div>
<a href="CHARLINK"
title="
Character Name
"
class="m-2 col-6 tooltipster" style="height: 100px;
background-image: url(URLHERE);
background-size: cover; background-position: center; border: solid 3px #13647C;"></a>
</div>
<!-- LEFT CHARACTER -->
<div class="row no-gutters">
<a href="CHARLINK"
title="
Character Name
"
class="m-2 col-6 tooltipster" style="height: 100px;
background-image: url(URLHERE);
background-size: cover; background-position: center; border: solid 3px #13647C;"></a>
<div class="card-flex col-5 align-items-center justify-content-center">
<i>•</i>
<!-- STAR ICON AT CENTER-->
<i class="far fa-star ml-1 mr-1"></i>
<i>•</i>
</div>
</div>
</div>
<!--
===================================
FANDOMS/FACTS/ETC SECTION
===================================
-->
<div class="card border-0 mb-3 mb-lg-0" style="height: 200px; overflow: hidden; background: #EAE9AC; color: #A86226;">
<p class="mt-1 text-center" style="font-size: 22px;">
Fandoms/other stuff:
</p>
<div style="overflow: auto; max-height: 163px;">
<!-- LIST OF CONTENTS-->
<ul class="list-group ml-5 mt-1 mr-2">
<li>Add a fandom</li>
<li>Or maybe you would like to add some facts?</li>
<li>You can add more, this box will scroll.</li>
<li>Content</li>
</ul>
</div>
</div>
</div>
</div>
</div>