shortcake
created by:8byte
HTMLCustom ColorsCharacter
Copy
<!---
==== Shortcake
==== HTML by 8byte, Base Code by SparklyCodes, Layout by Togo
----
==== Colors
---- For easier changes, use Ctrl F and then
---- click the plus icon at the bottom to
---- replace all.
====
#e37e7e - main accent (the icons)
#9d7c75 - title card/accent one
#ffffff - title card font
#eebcbb - title card font striked
#dfdad3 - accent two (the line dividers)
#c9c9c9 - accent three (the gray borders)
#b95050 - accent four (quote)
#090909 - main font
--->
<div class="m-3 px-1 mx-auto card shadow border-0" style="background: #efeae1; max-width: 850px; border-radius: 20px;">
<div class="p-2 row no-gutters">
<!-- ................ HEADER LINE -->
<div class="p-1 col-12">
<div style="border-bottom: 3px solid #dfdad3;"></div>
</div>
<!-- ................ NAME -->
<div class="px-1 col-12" style="z-index: 99;">
<h1 class="font-weight-light" style="color:#ffffff; margin-top: -18px; margin-bottom: -10px; font-size: 30px;">
<span style="background: #9d7c75; border-radius: 25px; text-transform: uppercase;" class="px-3 py-1 ml-3">
<!--- name surname --->
<del style="color:#eebcbb;">N</del>ame <del style="color:#eebcbb;">S</del>urname.
</span>
</h1>
</div>
<!-- ................ ICON -->
<div class="p-1 col-lg-3" style="z-index: 9;">
<div style="background: url(IMGURL); background-size: cover; border: 3px solid #c9c9c9; border-radius: 10px; padding-top: 100%;"></div>
</div>
<!-- ................ BASICS -->
<div class="p-1 col-lg-9">
<div class="row no-gutters overflow-auto mt-4 ml-md-3" style="height: 185px; line-height: 14px;">
<!-- field -->
<div class="col-md-3 col-6 p-1">
<span class="d-flex flex-row">
<!--- icon --->
<span><i class="fal fa-moon fa-3x mr-1" style="color: #e37e7e;"></i></span>
<span class="d-flex flex-column">
<!--- title --->
<span style="color: #9d7c75; text-transform: uppercase; letter-spacing: 1px;">field</span>
<!--- fill in content here --->
<span class="ml-2 mt-2" style="font-size: 18px; color: #090909; text-transform: uppercase;">content</span>
</span>
</span>
</div>
<!-- field -->
<div class="col-md-3 col-6 p-1">
<span class="d-flex flex-row">
<!--- icon --->
<span><i class="fal fa-moon fa-3x mr-1" style="color: #e37e7e;"></i></span>
<span class="d-flex flex-column">
<!--- title --->
<span style="color: #9d7c75; text-transform: uppercase; letter-spacing: 1px;">field</span>
<!--- fill in content here --->
<span class="ml-2 mt-2" style="font-size: 18px; color: #090909; text-transform: uppercase;">content</span>
</span>
</span>
</div>
<!-- field -->
<div class="col-md-3 col-6 p-1">
<span class="d-flex flex-row">
<!--- icon --->
<span><i class="fal fa-moon fa-3x mr-1" style="color: #e37e7e;"></i></span>
<span class="d-flex flex-column">
<!--- title --->
<span style="color: #9d7c75; text-transform: uppercase; letter-spacing: 1px;">field</span>
<!--- fill in content here --->
<span class="ml-2 mt-2" style="font-size: 18px; color: #090909; text-transform: uppercase;">content</span>
</span>
</span>
</div>
<!-- field -->
<div class="col-md-3 col-6 p-1">
<span class="d-flex flex-row">
<!--- icon --->
<span><i class="fal fa-moon fa-3x mr-1" style="color: #e37e7e;"></i></span>
<span class="d-flex flex-column">
<!--- title --->
<span style="color: #9d7c75; text-transform: uppercase; letter-spacing: 1px;">field</span>
<!--- fill in content here --->
<span class="ml-2 mt-2" style="font-size: 18px; color: #090909; text-transform: uppercase;">content</span>
</span>
</span>
</div>
<!-- field -->
<div class="col-md-3 col-6 p-1">
<span class="d-flex flex-row">
<!--- icon --->
<span><i class="fal fa-moon fa-3x mr-1" style="color: #e37e7e;"></i></span>
<span class="d-flex flex-column">
<!--- title --->
<span style="color: #9d7c75; text-transform: uppercase; letter-spacing: 1px;">field</span>
<!--- fill in content here --->
<span class="ml-2 mt-2" style="font-size: 18px; color: #090909; text-transform: uppercase;">content</span>
</span>
</span>
</div>
<!-- field -->
<div class="col-md-3 col-6 p-1">
<span class="d-flex flex-row">
<!--- icon --->
<span><i class="fal fa-moon fa-3x mr-1" style="color: #e37e7e;"></i></span>
<span class="d-flex flex-column">
<!--- title --->
<span style="color: #9d7c75; text-transform: uppercase; letter-spacing: 1px;">field</span>
<!--- fill in content here --->
<span class="ml-2 mt-2" style="font-size: 18px; color: #090909; text-transform: uppercase;">content</span>
</span>
</span>
</div>
<!-- field -->
<div class="col-md-3 col-6 p-1">
<span class="d-flex flex-row">
<!--- icon --->
<span><i class="fal fa-moon fa-3x mr-1" style="color: #e37e7e;"></i></span>
<span class="d-flex flex-column">
<!--- title --->
<span style="color: #9d7c75; text-transform: uppercase; letter-spacing: 1px;">field</span>
<!--- fill in content here --->
<span class="ml-2 mt-2" style="font-size: 18px; color: #090909; text-transform: uppercase;">content</span>
</span>
</span>
</div>
<!-- field -->
<div class="col-md-3 col-6 p-1">
<span class="d-flex flex-row">
<!--- icon --->
<span><i class="fal fa-moon fa-3x mr-1" style="color: #e37e7e;"></i></span>
<span class="d-flex flex-column">
<!--- title --->
<span style="color: #9d7c75; text-transform: uppercase; letter-spacing: 1px;">field</span>
<!--- fill in content here --->
<span class="ml-2 mt-2" style="font-size: 18px; color: #090909; text-transform: uppercase;">content</span>
</span>
</span>
</div>
<!-- field -->
<div class="col-md-3 col-6 p-1">
<span class="d-flex flex-row">
<!--- icon --->
<span><i class="fal fa-moon fa-3x mr-1" style="color: #e37e7e;"></i></span>
<span class="d-flex flex-column">
<!--- title --->
<span style="color: #9d7c75; text-transform: uppercase; letter-spacing: 1px;">field</span>
<!--- fill in content here --->
<span class="ml-2 mt-2" style="font-size: 18px; color: #090909; text-transform: uppercase;">content</span>
</span>
</span>
</div>
<!-- field -->
<div class="col-md-3 col-6 p-1">
<span class="d-flex flex-row">
<!--- icon --->
<span><i class="fal fa-moon fa-3x mr-1" style="color: #e37e7e;"></i></span>
<span class="d-flex flex-column">
<!--- title --->
<span style="color: #9d7c75; text-transform: uppercase; letter-spacing: 1px;">field</span>
<!--- fill in content here --->
<span class="ml-2 mt-2" style="font-size: 18px; color: #090909; text-transform: uppercase;">content</span>
</span>
</span>
</div>
<!-- field -->
<div class="col-md-3 col-6 p-1">
<span class="d-flex flex-row">
<!--- icon --->
<span><i class="fal fa-moon fa-3x mr-1" style="color: #e37e7e;"></i></span>
<span class="d-flex flex-column">
<!--- title --->
<span style="color: #9d7c75; text-transform: uppercase; letter-spacing: 1px;">field</span>
<!--- fill in content here --->
<span class="ml-2 mt-2" style="font-size: 18px; color: #090909; text-transform: uppercase;">content</span>
</span>
</span>
</div>
<!-- field -->
<div class="col-md-3 col-6 p-1">
<span class="d-flex flex-row">
<!--- icon --->
<span><i class="fal fa-moon fa-3x mr-1" style="color: #e37e7e;"></i></span>
<span class="d-flex flex-column">
<!--- title --->
<span style="color: #9d7c75; text-transform: uppercase; letter-spacing: 1px;">field</span>
<!--- fill in content here --->
<span class="ml-2 mt-2" style="font-size: 18px; color: #090909; text-transform: uppercase;">content</span>
</span>
</span>
</div>
<!--- end fields --->
</div>
</div>
<!-- ................ MIDDLE LINE -->
<div class="p-1 col-12">
<div style="border-bottom: 3px solid #dfdad3"></div>
</div>
<!-- ................ ABOUT -->
<div class="p-1 col-lg-4 d-flex flex-column" style="max-height: 280px;">
<!--- quote goes here --->
<h1 class="text-center" style="text-transform: uppercase; color: #b95050;">
“Quote”
</h1>
<div class="overflow-auto" style="color: #090909;">
<!--- about section --->
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</div>
<!-- ................ MOODBOARD -->
<div class="p-1 col-lg-4"> <div class="row no-gutters">
<div class="p-1 col-6">
<!--- image --->
<div style="background: url(IMGURL); background-size: cover; background-postion: center; border: 3px solid #c9c9c9; border-top-left-radius: 10px; padding-top: 100%;"></div>
</div>
<div class="p-1 col-6">
<!--- image --->
<div style="background: url(IMGURL); background-size: cover; background-postion: center; border: 3px solid #9d7c75; border-top-right-radius: 10px; padding-top: 100%;"></div>
</div>
<div class="p-1 col-6">
<!--- image --->
<div style="background: url(IMGURL); background-size: cover; background-postion: center; border: 3px solid #9d7c75; border-bottom-left-radius: 10px; padding-top: 100%;"></div>
</div>
<div class="p-1 col-6">
<!--- image --->
<div style="background: url(IMGURL); background-size: cover; background-position: bottom; border: 3px solid #c9c9c9; border-bottom-right-radius: 10px; padding-top: 100%;"></div>
</div>
</div> </div>
<!-- ................ RELATIONSHIPS -->
<div class="p-1 col-lg-4"> <div class="overflow-auto text-secondary" style="height: 280px;">
<!-- LINK -->
<div class="p-1 row no-gutters">
<!-- IMG -->
<div class="p-1 col-4">
<div style="background: url(IMGURL); background-size: cover; border: 3px solid #9d7c75; padding-top: 100%; border-radius: 50%;"></div>
</div>
<!-- TEXT -->
<div class="p-1 col-8 align-items-center">
<div class="d-flex flex-column w-100">
<!--- name and link --->
<a href="LINK" style="color: #090909; text-transform: uppercase;"><h5>Name</h5></a>
<div class="w-100" style="border-bottom: 3px solid #dfdad3"></div>
<div class="d-flex flex-row w-100" style="font-size: 12px;">
<!--- type of relationship --->
<span style="color: #9d7c75; text-transform: uppercase">Relationship</span>
<span class="text-right w-100" style="color: #e37e7e;">
<i class="fas fa-heart"></i> <!--- solid heart --->
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
<i class="fal fa-heart"></i> <!--- lined heart --->
<i class="fal fa-heart"></i>
</span>
</div>
</div>
</div>
</div>
<!-- LINK -->
<div class="p-1 row no-gutters">
<!-- IMG -->
<div class="p-1 col-4 order-2">
<div style="background: url(IMGURL); background-size: cover; border: 3px solid #9d7c75; padding-top: 100%; border-radius: 50%;"></div>
</div>
<!-- TEXT -->
<div class="p-1 col-8 align-items-center order-1">
<div class="d-flex flex-column w-100">
<!--- name and link --->
<a href="LINK" style="color: #090909; text-transform: uppercase;"><h5>Name</h5></a>
<div class="w-100" style="border-bottom: 3px solid #dfdad3"></div>
<div class="d-flex flex-row w-100" style="font-size: 12px;">
<!--- type of relationship --->
<span style="color: #9d7c75; text-transform: uppercase">Relationship</span>
<span class="text-right w-100" style="color: #e37e7e;">
<i class="fas fa-heart"></i> <!--- solid heart --->
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
<i class="fal fa-heart"></i> <!--- lined heart --->
<i class="fal fa-heart"></i>
</span>
</div>
</div>
</div>
</div>
<!-- LINK -->
<div class="p-1 row no-gutters">
<!-- IMG -->
<div class="p-1 col-4">
<div style="background: url(IMGURL); background-size: cover; border: 3px solid #9d7c75; padding-top: 100%; border-radius: 50%;"></div>
</div>
<!-- TEXT -->
<div class="p-1 col-8 align-items-center">
<div class="d-flex flex-column w-100">
<!--- name and link --->
<a href="LINK" style="color: #090909; text-transform: uppercase;"><h5>Name</h5></a>
<div class="w-100" style="border-bottom: 3px solid #dfdad3"></div>
<div class="d-flex flex-row w-100" style="font-size: 12px;">
<!--- type of relationship --->
<span style="color: #9d7c75; text-transform: uppercase">Relationship</span>
<span class="text-right w-100" style="color: #e37e7e;">
<i class="fas fa-heart"></i> <!--- solid heart --->
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
<i class="fal fa-heart"></i> <!--- lined heart --->
<i class="fal fa-heart"></i>
</span>
</div>
</div>
</div>
</div>
<!-- LINK -->
<div class="p-1 row no-gutters">
<!-- IMG -->
<div class="p-1 col-4 order-2">
<div style="background: url(IMGURL); background-size: cover; border: 3px solid #9d7c75; padding-top: 100%; border-radius: 50%;"></div>
</div>
<!-- TEXT -->
<div class="p-1 col-8 align-items-center order-1">
<div class="d-flex flex-column w-100">
<!--- name and link --->
<a href="LINK" style="color: #090909; text-transform: uppercase;"><h5>Name</h5></a>
<div class="w-100" style="border-bottom: 3px solid #dfdad3"></div>
<div class="d-flex flex-row w-100" style="font-size: 12px;">
<!--- type of relationship --->
<span style="color: #9d7c75; text-transform: uppercase">Relationship</span>
<span class="text-right w-100" style="color: #e37e7e;">
<i class="fas fa-heart"></i> <!--- solid heart --->
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
<i class="fal fa-heart"></i> <!--- lined heart --->
<i class="fal fa-heart"></i>
</span>
</div>
</div>
</div>
</div>
<!--- end links --->
</div> </div>
<!-- ................ FOOTER LINE -->
<div class="p-1 col-12">
<div style="border-bottom: 3px solid #dfdad3"></div>
</div>
<!-- ................ CREDITS -->
<div class="px-1 col-12"> <p class="mr-2 text-right" style="margin-top: -18px;">
<span style="background: #9d7c75; color: #ffffff; text-transform: uppercase; border-radius: 25px;" class="p-1 px-2">
<a data-toggle="tooltip" data-placement="bottom" title="Togo" style="color: #ffffff;" href="/Togo">
<del style="color:#eebcbb;">L</del>ayout.
</a> /
<a data-toggle="tooltip" data-placement="bottom" title="SparklyCodes" style="color: #ffffff;" href="/SparklyCodes">
<del style="color:#eebcbb;">B</del>ase Code.
</a> /
<a data-toggle="tooltip" data-placement="bottom" title="8byte" style="color: #ffffff;" href="/8byte">
<del style="color:#eebcbb;">S</del>tyling.
</a>
</span>
</p> </div>
</div>
</div>