<!-------------------------- NOTES ---------------------------
Type ctrl+f to locate and replace the color of any of the item below.
- Outer border: #BED5F0
- Inner border: #8B8B8B
- Background: #fff
- Text: #000
- X button: linear-gradient(180deg,rgba(247,169,148,1) 30%,rgba(186,81,65,1),rgba(186,81,65,1))
TERMS OF SERVICE:
- Please do not remove the credit. You can move them as long as they remain visible.
- Feel free to take parts and frankenstein any of my codes with another, as long as the other coder allows for it.
- Turn off WYSIWYG in your display settings. My codes aren't WYSIWYG-friendly and will break when used with it.
- This is optional, but please favorite this code or comment on my Coding Thread (https://toyhou.se/~forums/16.htmlcss-graphics/268113.-eskaep-codes-html) if you plan to or have used this code!
-------------------------------------------------------------->
<!--- 1ST CARD --->
<div class="container" style="max-width:500px;">
<!--- HEADER --->
<div class="card px-2 py-1" style="background:#BED5F0;border-bottom:0px;border-bottom-left-radius:0px;border-bottom-right-radius:0px;">
<div class="d-flex justify-content-between">
<span class="px-1" style="color:#000;"><i class="fal fa-file-xmark mr-1"></i>Totally Not Malware</span>
<!---CREDIT DO NOT DELETE--->
<span class="pull-right">
<a href="/eskaep-codes"><i class="fas fa-times p-1 text-white justify-content-center tooltipster" style="background:linear-gradient(180deg,rgba(247,169,148,1) 30%,rgba(186,81,65,1),rgba(186,81,65,1));border:1px solid white;border-radius:5px;width:55px;height:22px;" title="Code by eskaep"></i></a>
</span>
</div>
</div>
<!--- END HEADER --->
<!--- IMAGE AND CARD INFO --->
<div class="card" style="background:#fff;color:#000;border-width:0px 4px 4px 4px;border-top-left-radius:0px;border-top-right-radius:0px;border-color:#BED5F0;">
<div class="row no-gutters" style="border:1px solid #8B8B8B;">
<!------FOCAL IMAGE------>
<div class="col-lg-5" align="center">
<div class="h-100" style="background-image:url(https://via.placeholder.com/200);
background-position:center;
background-repeat:no-repeat;
background-size:cover;
min-height:200px;"></div>
</div>
<!------END FOCAL IMAGE------>
<!------CARD INFO------>
<div class="col-lg-7 p-2" style="font-size:14px;">
<p class="text-center mb-2">Hi-Hi there...
<br>Do you th-think I could have your credit card information, p-please?</p>
<div class="row no-gutters">
<div class="col-5 text-center mt-1">Card number:</div>
<div class="col-7 mt-1">
<div class="card rounded-0 pr-1" style="background-color:#fff;border:1px solid #8B8B8B;height:23px;">
<span class="px-1">
<!---insert above this line if you want to fill up the form--->
<i class="fas fa-minus fa-rotate-90 fa-fade"></i></span>
</div>
</div>
</div>
<div class="row no-gutters">
<div class="col-5 text-center mt-1">Expiry date:</div>
<div class="col-7 mt-1">
<div class="card rounded-0 px-1" style="background-color:#fff;border:1px solid #8B8B8B;height:23px;">
<span class="px-1">
<!---insert above this line if you want to fill up the form--->
</span>
</div>
</div>
</div>
<div class="row no-gutters mb-2">
<div class="col-5 text-center mt-1">Security code:</div>
<div class="col-7 mt-1">
<div class="card rounded-0 px-1" style="background-color:#fff;border:1px solid #8B8B8B;height:23px;">
<span class="px-1">
<!---insert above this line if you want to fill up the form--->
</span>
</div>
</div>
</div>
<!------BUTTON------>
<ul class="nav nav-pills justify-content-center">
<li class="nav-item"><a class="nav-link btn p-1" data-toggle="collapse" href="#cardexpand1" style="background:transparent;color:#000;border:1px solid #8B8B8B;">Th-thanks</a></li>
</ul>
<!------END BUTTON------>
</div>
<!------END CARD INFO------>
</div>
</div>
<!--- END IMAGE AND CARD INFO --->
</div>
<!--- END 1ST CARD --->
<!--- 2ND CARD --->
<div class="collapse" id="cardexpand1">
<div class="container pt-2" style="max-width:500px;">
<!--- HEADER --->
<div class="card px-2 py-1" style="background:#BED5F0;border-bottom:0px;border-bottom-left-radius:0px;border-bottom-right-radius:0px;">
<div class="d-flex justify-content-between">
<span class="px-1" style="color:#000;"><i class="fal fa-file-xmark mr-1"></i>About Me</span>
<span class="pull-right">
<i class="fas fa-times p-1 text-white justify-content-center" style="background:linear-gradient(180deg,rgba(247,169,148,1) 30%,rgba(186,81,65,1),rgba(186,81,65,1));border:1px solid white;border-radius:5px;width:55px;height:22px;"></i>
</span>
</div>
</div>
<!--- END HEADER --->
<!--- BIODATA --->
<div class="card" style="background:#fff;color:#000;border-width:0px 4px 4px 4px;border-top-left-radius:0px;border-top-right-radius:0px;border-color:#BED5F0;">
<div class="row no-gutters" style="border:1px solid #8B8B8B;">
<div class="col-lg-12 p-2" style="font-size:14px;">
<div class="row no-gutters flex-sm-nowrap">
<div class="col-sm">
<div class="d-flex justify-content-between mb-1">
<span class="pr-1">Name</span>
<span class="pull-right text-right px-1" style="min-width:110px;border:1px solid #8B8B8B;">content</span>
</div>
<div class="d-flex justify-content-between mb-1">
<span class="pr-1">Alias</span>
<span class="pull-right text-right px-1" style="min-width:110px;border:1px solid #8B8B8B;">content</span>
</div>
<div class="d-flex justify-content-between mb-1">
<span class="pr-1">Age</span>
<span class="pull-right text-right px-1" style="min-width:110px;border:1px solid #8B8B8B;">content</span>
</div>
<div class="d-flex justify-content-between mb-1">
<span class="pr-1">Birthday</span>
<span class="pull-right text-right px-1" style="min-width:110px;border:1px solid #8B8B8B;">content</span>
</div>
<div class="d-flex justify-content-between mb-1">
<span class="pr-1">Height</span>
<span class="pull-right text-right px-1" style="min-width:110px;border:1px solid #8B8B8B;">content</span>
</div>
<div class="d-flex justify-content-between mb-1">
<span class="pr-1">Species</span>
<span class="pull-right text-right px-1" style="min-width:110px;border:1px solid #8B8B8B;">content</span>
</div>
<div class="d-flex justify-content-between">
<span class="pr-1">Gender</span>
<span class="pull-right text-right px-1" style="min-width:110px;border:1px solid #8B8B8B;">content</span>
</div>
</div>
<div class="col-auto px-2 hidden-sm-down"><div class="card border-0 rounded-0 h-100" style="width:1px;background:#8B8B8B;"></div></div>
<div class="col-12 hidden-md-up"><hr class="my-2 w-100" style="background:#8B8B8B;"></div>
<div class="col-sm col-lg-6">
<div class="card rounded-0 p-1" style="background:transparent;border:1px solid #8B8B8B;max-height:150px;overflow-y:auto;">ABOUT ME
<br>Insert summary or description about your character here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sapien elit, ultrices ac risus sed, viverra volutpat velit. Nam consectetur lectus eget nisi ultrices, et viverra ex eleifend. Nam eget finibus mi. Cras et purus sit amet mauris rhoncus venenatis at a arcu. Integer et volutpat enim. Curabitur ultrices commodo lacus a dictum.
</div>
<!------BUTTON------>
<ul class="nav nav-pills justify-content-center pt-2">
<li class="nav-item"><a class="nav-link btn p-1" data-toggle="collapse" href="#cardexpand2" style="background:transparent;color:#000;border:1px solid #8B8B8B;">More info?</a></li>
</ul>
<!------END BUTTON------>
</div>
</div>
</div>
</div>
</div>
<!--- END BIODATA --->
</div>
</div>
<!--- END 2ND CARD --->
<!--- 3RD CARD --->
<div class="collapse" id="cardexpand2">
<div class="container pt-2" style="max-width:500px;">
<!--- HEADER --->
<div class="card px-2 py-1" style="background:#BED5F0;border-bottom:0px;border-bottom-left-radius:0px;border-bottom-right-radius:0px;">
<div class="d-flex justify-content-between">
<span class="px-1" style="color:#000;"><i class="fal fa-file-xmark mr-1"></i>More Info</span>
<span class="pull-right">
<i class="fas fa-times p-1 text-white justify-content-center" style="background:linear-gradient(180deg,rgba(247,169,148,1) 30%,rgba(186,81,65,1),rgba(186,81,65,1));border:1px solid white;border-radius:5px;width:55px;height:22px;"></i>
</span>
</div>
</div>
<!--- END HEADER --->
<!---MORE INFO---->
<div class="card" style="background:#fff;color:#000;border-width:0px 4px 4px 4px;border-top-left-radius:0px;border-top-right-radius:0px;border-color:#BED5F0;">
<div class="row no-gutters" style="border:1px solid #8B8B8B;">
<div class="col-lg-12 p-2" style="font-size:14px;">
<div class="row no-gutters flex-sm-nowrap">
<div class="col-sm">
<div class="card rounded-0 p-1 mb-1" style="background:transparent;border:1px solid #8B8B8B;max-height:90px;overflow-y:auto;">LIKES
<br>Insert your character's likes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sapien elit, ultrices ac risus sed, viverra volutpat velit. Nam consectetur lectus eget nisi ultrices, et viverra ex eleifend. Nam eget finibus mi.
</div>
<div class="card rounded-0 p-1" style="background:transparent;border:1px solid #8B8B8B;max-height:90px;overflow-y:auto;">DISLIKES
<br>Insert your character's dislikes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sapien elit, ultrices ac risus sed, viverra volutpat velit. Nam consectetur lectus eget nisi ultrices, et viverra ex eleifend. Nam eget finibus mi.
</div>
</div>
<div class="col-auto px-2 hidden-sm-down"><div class="card border-0 rounded-0 h-100" style="width:1px;background:#8B8B8B;"></div></div>
<div class="col-12 hidden-md-up"><hr class="my-2 w-100" style="background:#8B8B8B;"></div>
<div class="col-sm col-lg-6">
<div class="card rounded-0 p-1" style="background:transparent;border:1px solid #8B8B8B;max-height:150px;overflow-y:auto;">TRIVIA / DESIGN INFO
<ul class="fa-ul nav flex-column ml-4 mb-0">
<li><i class="fal fa-angle-right fa-li"></i>Insert trivia or design notes about your character here.
</li>
<li><i class="fal fa-angle-right fa-li"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</li>
<li><i class="fal fa-angle-right fa-li"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</li>
<li><i class="fal fa-angle-right fa-li"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</li>
<!---can add more above this line--->
</ul>
</div>
<!------BUTTON------>
<ul class="nav nav-pills justify-content-center pt-2">
<li class="nav-item"><a class="nav-link btn p-1" style="background:transparent;color:#000;border:1px solid #8B8B8B;">I think that's enough!</a></li>
</ul>
<!------END BUTTON------>
</div>
</div>
</div>
</div>
</div>
<!---END MORE INFO---->
</div>
</div>