basics
created by:8byte
HTMLCustom ColorsMixed ColorsBootstrapUser
Copy
<!---
==== Hello Kitty
==== HTML by 8byte
----
==== Colors
---- For easier changes, use Ctrl F and then
---- click the plus icon at the bottom to
---- replace all.
====
#efefef - background
#020202 - text
#fecbd2 - accent
--->
<div class="container" style="max-width: 600px;">
<!--- background --->
<div class="card p-3 border-0" style="background-image: url('IMGURL'); background-size: cover; background-attachment: fixed; border-radius: 30px;">
<div class="row no-gutters">
<div class="col-md-4 col-12 p-2">
<!--- profile picture --->
<div class="card w-100 border-0" style="background-image: url('IMGURL'); background-size: cover; padding-top: 100%; border-radius: 30px; box-shadow: 5px 5px 0px 1px #fecbd2;"></div>
</div>
<div class="col-md-8 col-12 p-2">
<div class="card p-3 border-0 h-100" style="background: #efefef; color: #020202; border-radius: 30px; box-shadow: 5px 5px 0px 1px #fecbd2;">
<div class="overflow-auto text-center" style="max-height: 130px;">
<!--- more info about yourself --->
<p>
Nullam quis iaculis quam, non pretium ante. Fusce vitae semper justo, eget sagittis erat. Praesent quis aliquet turpis.
</p>
<p>
In varius sit amet nisi non volutpat. Duis ac auctor mi. Fusce dapibus laoreet viverra.
</p>
</div>
</div>
</div>
<div class="col-md-8 col-12 p-2">
<div class="card flex-column p-3 border-0 h-100" style="background: #efefef; color: #020202; border-radius: 30px; box-shadow: 5px 5px 0px 1px #fecbd2;">
<!--- quick quote --->
<h3 class="text-center font-weight-normal text-uppercase">Integer ultrices porta nulla id scelerisque.</h3>
<!--- basic info --->
<div class="mt-auto row no-gutters">
<div class="col-md-3 col-6 py-2"><strong>Name</strong></div>
<div class="col-md-3 col-6 py-2">name</div>
<!---->
<div class="col-md-3 col-6 py-2"><strong>Age</strong></div>
<div class="col-md-3 col-6 py-2">00</div>
<!---->
<div class="col-md-3 col-6 py-2"><strong>Pronouns</strong></div>
<div class="col-md-3 col-6 py-2">prn/prn</div>
<!---->
<div class="col-md-3 col-6 py-2"><strong>Lang/TZ</strong></div>
<div class="col-md-3 col-6 py-2">eng/cn, est</div>
<!--- end --->
</div>
</div>
</div>
<div class="col-md-4 col-12">
<div class="row no-gutters">
<!--- character --->
<div class="col-6 p-1">
<!--- link + image --->
<a href="LINK" class="d-block w-100" style="background-image: url('IMGURL'); background-color: #efefef; background-size: cover; padding-top: 100%; border-radius: 30px; box-shadow: 5px 5px 0px 1px #fecbd2;"></a>
</div>
<!--- character --->
<div class="col-6 p-1">
<!--- link + image --->
<a href="LINK" class="d-block w-100" style="background-image: url('IMGURL'); background-color: #efefef; background-size: cover; padding-top: 100%; border-radius: 30px; box-shadow: 5px 5px 0px 1px #fecbd2;"></a>
</div>
<!--- character --->
<div class="col-6 p-1">
<!--- link + image --->
<a href="LINK" class="d-block w-100" style="background-image: url('IMGURL'); background-color: #efefef; background-size: cover; padding-top: 100%; border-radius: 30px; box-shadow: 5px 5px 0px 1px #fecbd2;"></a>
</div>
<!--- character --->
<div class="col-6 p-1">
<!--- link + image --->
<a href="LINK" class="d-block w-100" style="background-image: url('IMGURL'); background-color: #efefef; background-size: cover; padding-top: 100%; border-radius: 30px; box-shadow: 5px 5px 0px 1px #fecbd2;"></a>
</div>
<!--- end --->
</div>
</div>
</div>
</div>
<div class="mt-2 justify-content-end w-100">
<div class="card p-2 border-0" style="background: #fecbd2; max-width: 360px; width: 100%; color: #020202; border-radius: 30px;">
<div class="justify-content-between py-1">
<!--- social links --->
<a href="LINK" class="px-2" style="color: #020202;"><i class="fab fa-twitter"></i></a>
<a href="LINK" class="px-2" style="color: #020202;"><i class="fab fa-tumblr"></i></a>
<a href="LINK" class="px-2" style="color: #020202;"><i class="fab fa-deviantart"></i></a>
<a href="#" class="px-2" style="color: #020202;"><i class="fab fa-discord"></i></a>
<a href="LINK" class="px-2" style="color: #020202;"><i class="fas fa-id-card"></i></a>
<a href="/8byte" class="px-2" style="color: #020202;"><i class="fas fa-code"></i></a>
</div>
</div>
</div>
</div>Copy
<!---
==== Pompompurin
==== HTML by 8byte
----
==== Accent
---- For easier changes, use Ctrl F and then
---- click the plus icon at the bottom to
---- replace all.
====
#fcaf26 - yellow
--->
<div class="mx-auto" style="max-width: 400px;">
<div style="background: #fcaf26; height: 20px;"></div>
<div class="bg-faded p-3">
<div class="justify-content-center">
<div class="img-thumbnail p-1">
<!--- profile picture --->
<div class="bg-dark" style="background-image: url('IMGURL'); background-size: cover; height: 100px; width: 100px;"></div>
</div>
</div>
<!--- info --->
<div class="mx-auto" style="max-width: 250px;">
<!--- short about --->
<p class="text-center text-muted font-italic my-2">In hac habitasse platea dictumst. Aenean id nisl suscipit, lacinia magna sed, volutpat risus. Duis sodales sodales ante, a cursus nisi consectetur sed.</p>
<div class="justify-content-between">
<strong class="text-uppercase" style="color: #fcaf26;">Name</strong>
<span class="text-muted font-italic">name</span>
</div>
<!---->
<div class="justify-content-between">
<strong class="text-uppercase" style="color: #fcaf26;">Pronouns</strong>
<span class="text-muted font-italic">prn/prn</span>
</div>
<!---->
<div class="justify-content-between">
<strong class="text-uppercase" style="color: #fcaf26;">Age</strong>
<span class="text-muted font-italic">00</span>
</div>
<!---->
<div class="justify-content-between">
<strong class="text-uppercase" style="color: #fcaf26;">Name</strong>
<span class="text-muted font-italic">name</span>
</div>
<!---->
<div class="justify-content-between">
<strong class="text-uppercase" style="color: #fcaf26;">Languages</strong>
<span class="text-muted font-italic">eng/cn</span>
</div>
<!---->
<div class="justify-content-between">
<strong class="text-uppercase" style="color: #fcaf26;">Timezone</strong>
<span class="text-muted font-italic">EST</span>
</div>
<!--- music box --->
<div class="justify-content-center">
<div style="position: relative;">
<div class="w-100 h-100" style="position: absolute; top: 0; left: 0; z-index: 101;">
<!--- paste youtube code here, only the numbers after the watch?v= in the youtube link --->
<iframe class="flex-fill" style="height: 100%; width: 100%; opacity: 0.01;" frameborder="0" allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen src="https://www.youtube.com/embed/YOUTUBECODE?modestbranding=1"></iframe>
</div>
<i class="fas fa-circle-play fa-2x" style="color: #fcaf26;"></i>
</div>
</div>
</div>
<!--- general rules/tos --->
<div class="align-items-center my-2">
<hr class="flex-fill my-0">
<h5 class="text-uppercase font-weight-bold mb-0 mx-2">Terms of Service</h5>
<hr class="flex-fill my-0">
</div>
<p>
<strong class="text-uppercase text-muted">Design Rules</strong> Ut pretium sed mi non dictum. Maecenas tristique commodo vulputate. Fusce malesuada diam et blandit bibendum.
</p>
<p>
<strong class="text-uppercase text-muted">Boundaries</strong> Suspendisse pretium efficitur massa, nec dapibus elit tempus nec. Vivamus sagittis, ex sed consectetur pulvinar, sem dui pellentesque sapien, sed venenatis turpis ligula sed erat.
</p>
<p>
<strong class="text-uppercase text-muted">Blacklist</strong> @user @user @user
</p>
<!--- social links --->
<div class="align-items-center my-2">
<hr class="flex-fill my-0">
<h5 class="text-uppercase font-weight-bold mb-0 mx-2">Socials</h5>
<hr class="flex-fill my-0">
</div>
<div class="justify-content-center">
<a href="LINK" class="mx-2" style="color: #fcaf26;"><i class="fab fa-twitter"></i></a>
<a href="LINK" class="mx-2" style="color: #fcaf26;"><i class="fab fa-tumblr"></i></a>
<a href="LINK" class="mx-2" style="color: #fcaf26;"><i class="fab fa-deviantart"></i></a>
<a href="LINK" class="mx-2" style="color: #fcaf26;"><i class="fab fa-discord"></i></a>
<a href="LINK" class="mx-2" style="color: #fcaf26;"><i class="fas fa-id-card"></i></a>
</div>
<!--- featured characters --->
<div class="align-items-center my-2">
<hr class="flex-fill my-0">
<h5 class="text-uppercase font-weight-bold mb-0 mx-2">Featured</h5>
<hr class="flex-fill my-0">
</div>
<div class="row no-gutters">
<!--- character --->
<div class="col-4 p-1">
<div class="img-thumbnail w-100">
<!--- link and image --->
<a href="LINK" class="bg-dark d-block" style="background-image: url('IMGURL'); background-size: cover; padding-top: 100%;"></a>
</div>
</div>
<!--- character --->
<div class="col-4 p-1">
<div class="img-thumbnail w-100">
<!--- link and image --->
<a href="LINK" class="bg-dark d-block" style="background-image: url('IMGURL'); background-size: cover; padding-top: 100%;"></a>
</div>
</div>
<!--- character --->
<div class="col-4 p-1">
<div class="img-thumbnail w-100">
<!--- link and image --->
<a href="LINK" class="bg-dark d-block" style="background-image: url('IMGURL'); background-size: cover; padding-top: 100%;"></a>
</div>
</div>
</div>
<!--- friends --->
<div class="align-items-center my-2">
<hr class="flex-fill my-0">
<h5 class="text-uppercase font-weight-bold mb-0 mx-2">Friends</h5>
<hr class="flex-fill my-0">
</div>
<p class="text-center">
@user @user @user
</p>
</div>
<div class="text-center"><small>code by @8byte</small></div>
</div>Copy
<!---
==== Kuromi
==== HTML by 8byte
----
==== Colors
---- This code uses bootstrap colors.
--->
<div class="container p-0" style="max-width: 450px;">
<div class="card" style="border-radius: 10px; overflow: hidden;">
<!--- header image --->
<div class="card rounded-0" style="background: url('IMGURL'); background-size: cover; height: 100px; border-top: 0; border-left: 0; border-right: 0;"></div>
<div class="row no-gutters">
<div class="col-md-8"></div>
<div class="col-md-4 px-2" style="margin-top: -65px;">
<div class="card rounded-circle bg-faded p-2 mx-auto" style="width: 130px; height: 130px;">
<!--- profile pic --->
<div class="rounded-circle bg-dark h-100 w-100" style="background-image: url('IMGURL'); background-size: cover; position: relative; z-index: 99;"></div>
</div>
</div>
</div>
<div class="bg-faded p-2" style="margin-top: -65px; position: relative; z-index: 9;">
<div class="row no-gutters">
<div class="col-md-8 p-2">
<!--- color palette --->
<div class="d-flex mx-n1 mb-2">
<div class="card flex-fill m-1" style="background: #000; border-radius: 10px; height: 15px;"></div>
<div class="card flex-fill m-1" style="background: #000; border-radius: 10px; height: 15px;"></div>
<div class="card flex-fill m-1" style="background: #000; border-radius: 10px; height: 15px;"></div>
<div class="card flex-fill m-1" style="background: #000; border-radius: 10px; height: 15px;"></div>
<div class="card flex-fill m-1" style="background: #000; border-radius: 10px; height: 15px;"></div>
</div>
<!--- short about --->
<div class="card overflow-auto p-2" style="border-radius: 10px; height: 150px;">
<p>Maecenas id ligula vel arcu efficitur lacinia. Vestibulum vel dolor varius, interdum mi quis, dictum dui. Morbi laoreet tortor elit, ac malesuada nisi tincidunt non. Aliquam quis varius leo. Nulla augue eros, sollicitudin vulputate purus et, pellentesque iaculis lectus. Sed nec sem vel eros ornare varius. Nulla mi leo, imperdiet ac quam a, efficitur aliquet nulla. Vestibulum mattis neque odio, a placerat nulla tristique sit amet.</p>
</div>
</div>
<div class="col-md-4 p-2">
<div style="height: 50px;"></div>
<!--- basics --->
<h1 class="text-center">
<strong>username</strong>
</h1>
<ul class="list-unstyled">
<!--- basic info --->
<li class="m-1 flex-row justify-content-between">
<span class="badge badge-primary">pronouns</span>
<small>prn/prn</small>
</li>
<li class="m-1 flex-row justify-content-between">
<span class="badge badge-primary">age</span>
<small>00</small>
</li>
<li class="m-1 flex-row justify-content-between">
<span class="badge badge-primary">lang/tz</span>
<small>eng/cn, est</small>
</li>
<li class="m-1 flex-row justify-content-between">
<span class="badge badge-primary">links</span>
<small>
<!--- links --->
<a href="LINK" class="mx-1"><i class="fab fa-twitter"></i></a>
<a href="LINK" class="mx-1"><i class="fab fa-deviantart"></i></a>
<a href="LINK" class="mx-1"><i class="fas fa-id-card"></i></a>
</small>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="text-right"><small>code by @8byte</small></div>
</div>Copy
<!---
==== Melody
==== HTML by 8byte
----
==== Colors
---- This code uses bootstrap colors.
--->
<div class="mx-auto" style="max-width: 500px;">
<div class="card rounded-0">
<div class="bg-dark d-flex" style="background-image: url('IMGURL'); background-size: cover; height: 30px;">
<div class="bg-primary" style="flex-grow: 1; opacity: .3;"></div>
<div class="bg-primary" style="flex-grow: 2; opacity: .5;"></div>
<div class="bg-primary" style="flex-grow: 3;"></div>
</div>
<div class="card rounded-0" style="border-left: none; border-right: none;">
<ul class="nav nav-fill">
<li class="nav-item"><a href="#ONE" data-toggle="tab" class="nav-link">one.</a></li>
<li class="nav-item"><a href="#TWO" data-toggle="tab" class="nav-link">two.</a></li>
<li class="nav-item"><a href="#THREE" data-toggle="tab" class="nav-link">three.</a></li>
<li class="nav-item"><a href="#FOUR" data-toggle="tab" class="nav-link">four.</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="ONE">
<div class="row no-gutters">
<div class="col-md-5 p-3">
<div class="bg-faded p-2">
<!--- profile picture --->
<div class="bg-dark" style="background-image: url('IMGURL'); background-size: cover; padding-top: 100%;"></div>
</div>
</div>
<div class="col-md-7 p-3">
<!--- name or username --->
<h3 class="text-center mb-0">username</h3>
<!--- basics --->
<h5 class="text-center text-primary font-weight-normal font-italic">
<span>prn/prn</span>
<span class="mx-1">-</span>
<span>age</span>
<span class="mx-1">-</span>
<span>lang(s)</span>
</h5>
<div class="overflow-auto" style="height: 120px;">
<!--- more info about yourself --->
<p>Cras faucibus quam eget quam faucibus consectetur. Curabitur ultricies nibh ex, sit amet accumsan diam mollis nec. Curabitur id venenatis purus, sit amet aliquam sapien. Nullam pellentesque, tellus non accumsan hendrerit, massa mi sagittis massa, ac pellentesque mi eros a dui. Integer nunc lorem, ultricies id imperdiet et, finibus in est. In feugiat magna ornare, mattis nisl quis, feugiat nisi. </p>
</div>
</div>
<div class="col-12 px-3 mb-3">
<div class="card flex-row justify-content-around rounded-0 p-2">
<!--- social media links --->
<a href="LINK"><i class="fab fa-twitter"></i></a>
<a href="LINK"><i class="fab fa-tumblr"></i></a>
<a href="LINK"><i class="fab fa-deviantart"></i></a>
<a href="LINK"><i class="fas fa-id-card"></i></a>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="TWO">
<div class="p-3">
<!--- major warnings --->
<div class="alert alert-danger rounded-0">
<strong class="text-uppercase"><i class="fas fa-triangle-exclamation mr-1"></i> Warnings: </strong>Vestibulum nec nulla sed dolor placerat bibendum. Fusce eu velit eu ipsum accumsan volutpat.
</div>
<!--- personal boundaries --->
<p>
<strong class="text-uppercase">Boundaries:</strong> List personal boundaries. Phasellus ligula purus, sagittis luctus libero sit amet, finibus pretium metus.
</p>
<!--- blacklisted users --->
<p>
<strong class="text-uppercase">Blacklist:</strong> List personal boundaries. Phasellus ligula purus, sagittis luctus libero sit amet, finibus pretium metus.
</p>
</div>
</div>
<div class="tab-pane" id="THREE">
<!--- featured characters --->
<div class="row no-gutters p-2">
<!--- character --->
<div class="col-md-4 col-6 p-2">
<div class="bg-faded p-2">
<!--- character image --->
<div class="bg-dark" style="background-image: url('IMGURL'); background-size: cover; height: 100px;">
<!--- link to character --->
<a href="LINK" class="btn rounded-0 border-0 btn-outline-primary w-100 h-100"></a>
</div>
</div>
</div>
<!--- character --->
<div class="col-md-4 col-6 p-2">
<div class="bg-faded p-2">
<!--- character image --->
<div class="bg-dark" style="background-image: url('IMGURL'); background-size: cover; height: 100px;">
<!--- link to character --->
<a href="LINK" class="btn rounded-0 border-0 btn-outline-primary w-100 h-100"></a>
</div>
</div>
</div>
<!--- character --->
<div class="col-md-4 col-6 p-2">
<div class="bg-faded p-2">
<!--- character image --->
<div class="bg-dark" style="background-image: url('IMGURL'); background-size: cover; height: 100px;">
<!--- link to character --->
<a href="LINK" class="btn rounded-0 border-0 btn-outline-primary w-100 h-100"></a>
</div>
</div>
</div>
<!--- end of characters --->
</div>
<!--- progress tracker --->
<div class="row no-gutters p-2 mt-n2">
<!--- project --->
<div class="col-4 align-items-center p-2">
<strong class="text-uppercase">Project/Comm</strong>
</div>
<div class="col-8 align-items-center p-2">
<div class="progress w-100 card rounded-0" style="height: 10px;">
<!--- change width here --->
<div class="progress-bar" style="width: 35%;"></div>
</div>
</div>
<!--- project --->
<div class="col-4 align-items-center p-2">
<strong class="text-uppercase">Project/Comm</strong>
</div>
<div class="col-8 align-items-center p-2">
<div class="progress w-100 card rounded-0" style="height: 10px;">
<!--- change width here --->
<div class="progress-bar" style="width: 35%;"></div>
</div>
</div>
<!--- project --->
<div class="col-4 align-items-center p-2">
<strong class="text-uppercase">Project/Comm</strong>
</div>
<div class="col-8 align-items-center p-2">
<div class="progress w-100 card rounded-0" style="height: 10px;">
<!--- change width here --->
<div class="progress-bar" style="width: 35%;"></div>
</div>
</div>
<!--- project --->
<div class="col-4 align-items-center p-2">
<strong class="text-uppercase">Project/Comm</strong>
</div>
<div class="col-8 align-items-center p-2">
<div class="progress w-100 card rounded-0" style="height: 10px;">
<!--- change width here --->
<div class="progress-bar" style="width: 35%;"></div>
</div>
</div>
<!--- end of project --->
</div>
</div>
<div class="tab-pane" id="FOUR">
<!--- mutuals --->
<div class="row no-gutters p-2">
<!--- mutual --->
<div class="col-md-3 col-6 p-2">
<div class="bg-faded p-2">
<div class="bg-dark" style="background-image: url('IMGURL'); background-size: cover;">
<!--- link to mutual --->
<a href="LINK" class="btn rounded-0 border-0 btn-outline-primary w-100" style="padding-top: 100%;"></a>
</div>
</div>
</div>
<!--- mutual --->
<div class="col-md-3 col-6 p-2">
<div class="bg-faded p-2">
<div class="bg-dark" style="background-image: url('IMGURL'); background-size: cover;">
<!--- link to mutual --->
<a href="LINK" class="btn rounded-0 border-0 btn-outline-primary w-100" style="padding-top: 100%;"></a>
</div>
</div>
</div>
<!--- mutual --->
<div class="col-md-3 col-6 p-2">
<div class="bg-faded p-2">
<div class="bg-dark" style="background-image: url('IMGURL'); background-size: cover;">
<!--- link to mutual --->
<a href="LINK" class="btn rounded-0 border-0 btn-outline-primary w-100" style="padding-top: 100%;"></a>
</div>
</div>
</div>
<!--- mutual --->
<div class="col-md-3 col-6 p-2">
<div class="bg-faded p-2">
<div class="bg-dark" style="background-image: url('IMGURL'); background-size: cover;">
<!--- link to mutual --->
<a href="LINK" class="btn rounded-0 border-0 btn-outline-primary w-100" style="padding-top: 100%;"></a>
</div>
</div>
</div>
<!--- mutual --->
<div class="col-md-3 col-6 p-2">
<div class="bg-faded p-2">
<div class="bg-dark" style="background-image: url('IMGURL'); background-size: cover;">
<!--- link to mutual --->
<a href="LINK" class="btn rounded-0 border-0 btn-outline-primary w-100" style="padding-top: 100%;"></a>
</div>
</div>
</div>
<!--- mutual --->
<div class="col-md-3 col-6 p-2">
<div class="bg-faded p-2">
<div class="bg-dark" style="background-image: url('IMGURL'); background-size: cover;">
<!--- link to mutual --->
<a href="LINK" class="btn rounded-0 border-0 btn-outline-primary w-100" style="padding-top: 100%;"></a>
</div>
</div>
</div>
<!--- mutual --->
<div class="col-md-3 col-6 p-2">
<div class="bg-faded p-2">
<div class="bg-dark" style="background-image: url('IMGURL'); background-size: cover;">
<!--- link to mutual --->
<a href="LINK" class="btn rounded-0 border-0 btn-outline-primary w-100" style="padding-top: 100%;"></a>
</div>
</div>
</div>
<!--- mutual --->
<div class="col-md-3 col-6 p-2">
<div class="bg-faded p-2">
<div class="bg-dark" style="background-image: url('IMGURL'); background-size: cover;">
<!--- link to mutual --->
<a href="LINK" class="btn rounded-0 border-0 btn-outline-primary w-100" style="padding-top: 100%;"></a>
</div>
</div>
</div>
<!--- end --->
</div>
</div>
</div>
</div>
<div class="bg-dark d-flex" style="background-image: url('IMGURL'); background-size: cover; height: 30px;">
<div class="bg-primary" style="flex-grow: 3;"></div>
<div class="bg-primary" style="flex-grow: 2; opacity: .5;"></div>
<div class="bg-primary" style="flex-grow: 1; opacity: .3;"></div>
</div>
</div>
<div class="text-center">
<small>code by @8byte</small>
</div>
</div>Copy
<div style="max-width: 600px;" class="container">
<div style="background-image: url('{{u!Background Image!}}'); background-size: cover; background-attachment: fixed; border-radius: {{n!Roundness!}}px;" class="card p-3 border-0">
<div class="row no-gutters">
<div class="col-md-4 col-12 p-2">
<div style="background-image: url('{{u!Profile Picture!}}'); background-size: cover; padding-top: 100%; border-radius: {{n!Roundness!}}px; box-shadow: 5px 5px 0px 1px {{c!Accent Color!}};" class="card w-100 border-0"></div>
</div>
<div class="col-md-8 col-12 p-2">
<div style="background: {{c!Background Color!}}; color: {{c!Text Color!}}; border-radius: {{n!Roundness!}}px; box-shadow: 5px 5px 0px 1px {{c!Accent Color!}};" class="card p-3 border-0 h-100">
<div style="max-height: 1{{n!Roundness!}}px;" class="overflow-auto text-center">
<p>
{{l!Bio Text!}}
</p>
</div>
</div>
</div>
<div class="col-md-8 col-12 p-2">
<div style="background: {{c!Background Color!}}; color: {{c!Text Color!}}; border-radius: {{n!Roundness!}}px; box-shadow: 5px 5px 0px 1px {{c!Accent Color!}};" class="card flex-column p-3 border-0 h-100">
<h3 class="text-center font-weight-normal text-uppercase">{{!Quote!}}</h3>
<div class="mt-auto row no-gutters">
<div class="col-md-3 col-6 py-2"><strong>Name</strong></div>
<div class="col-md-3 col-6 py-2">{{!Name!}}</div>
<div class="col-md-3 col-6 py-2"><strong>Age</strong></div>
<div class="col-md-3 col-6 py-2">{{!Age!}}</div>
<div class="col-md-3 col-6 py-2"><strong>Pronouns</strong></div>
<div class="col-md-3 col-6 py-2">{{!Pronouns!}}</div>
<div class="col-md-3 col-6 py-2"><strong>Lang/TZ</strong></div>
<div class="col-md-3 col-6 py-2">{{!Languages/Timezone!}}</div>
</div>
</div>
</div>
<div class="col-md-4 col-12">
<div class="row no-gutters">
{{%Characters%
<div class="col-6 p-1">
<a style="background-image: url('{{u%Image%}}'); background-color: {{c!Background Color!}}; background-size: cover; padding-top: 100%; border-radius: {{n!Roundness!}}px; box-shadow: 5px 5px 0px 1px {{c!Accent Color!}};" class="d-block w-100" href="{{u%Link%}}"></a>
</div>
%end%}}
</div>
</div>
</div>
</div>
<div class="mt-2 justify-content-end w-100">
<div style="background: {{c!Accent Color!}}; max-width: 360px; width: 100%; color: {{c!Text Color!}}; border-radius: {{n!Roundness!}}px;" class="card p-2 border-0">
<div class="justify-content-between py-1">
{{%Socials%
<a style="color: {{c!Text Color!}};" class="px-2" href="{{u%Link%}}"><i class="{{i%Icon%}}"></i></a>
%end%}}
<a style="color: {{c!Text Color!}};" class="px-2" href="/8byte"><i class="fas fa-code"></i></a>
</div>
</div>
</div>
</div>Copy
<div style="max-width: 400px;" class="mx-auto">
<div style="background: #fcaf26; height: 20px;"></div>
<div class="bg-faded p-3">
<div class="justify-content-center">
<div class="img-thumbnail p-1">
<div style="background-image: url('{{u!Profile Pic!}}'); background-size: cover; height: 100px; width: 100px;" class="bg-dark"></div>
</div>
</div>
<div style="max-width: 250px;" class="mx-auto">
<p class="text-center text-muted font-italic my-2">{{l!Short About Blurb!}}</p>
<div class="justify-content-between">
<strong style="color: #fcaf26;" class="text-uppercase">Name</strong>
<span class="text-muted font-italic">{{!Name!}}</span>
</div>
<div class="justify-content-between">
<strong style="color: #fcaf26;" class="text-uppercase">Pronouns</strong>
<span class="text-muted font-italic">{{!Pronouns!}}</span>
</div>
<div class="justify-content-between">
<strong style="color: #fcaf26;" class="text-uppercase">Age</strong>
<span class="text-muted font-italic">{{!Age!}}</span>
</div>
<div class="justify-content-between">
<strong style="color: #fcaf26;" class="text-uppercase">Languages</strong>
<span class="text-muted font-italic">{{!Languages!}}</span>
</div>
<div class="justify-content-between">
<strong style="color: #fcaf26;" class="text-uppercase">Timezone</strong>
<span class="text-muted font-italic">{{!Timezone!}}</span>
</div>
<div class="justify-content-center">
<div style="position: relative;">
<div style="position: absolute; top: 0; left: 0; z-index: 101;" class="w-100 h-100">
<iframe src="https://www.youtube.com/embed/{{y!Youtube Code!}}?modestbranding=1" style="height: 100%; width: 100%; opacity: 0.01;" class="flex-fill"></iframe>
</div>
<i style="color: #fcaf26;" class="fas fa-circle-play fa-2x"></i>
</div>
</div>
</div>
<div class="align-items-center my-2">
<hr class="flex-fill my-0">
<h5 class="text-uppercase font-weight-bold mb-0 mx-2">Terms of Service</h5>
<hr class="flex-fill my-0">
</div>
<p>
<strong class="text-uppercase text-muted">Design Rules</strong> {{l!Design Rules!}}
</p>
<p>
<strong class="text-uppercase text-muted">Boundaries</strong> {{l!Boundaires!}}
</p>
<p>
<strong class="text-uppercase text-muted">Blacklist</strong> {{l!Blacklist!}}
</p>
<div class="align-items-center my-2">
<hr class="flex-fill my-0">
<h5 class="text-uppercase font-weight-bold mb-0 mx-2">Socials</h5>
<hr class="flex-fill my-0">
</div>
<div class="justify-content-center">
{{%Socials%
<a style="color: #fcaf26;" class="mx-2" href="{{u%Link%}}"><i class="{{i%Icon%}}"></i></a>
%end%}}
</div>
<div class="align-items-center my-2">
<hr class="flex-fill my-0">
<h5 class="text-uppercase font-weight-bold mb-0 mx-2">Featured</h5>
<hr class="flex-fill my-0">
</div>
<div class="row no-gutters">
{{%Characters%
<div class="col-4 p-1">
<div class="img-thumbnail w-100">
<a style="background-image: url('{{u%Image%}}'); background-size: cover; padding-top: 100%;" class="bg-dark d-block" href="{{u%Link%}}"></a>
</div>
</div>
%end%}}
</div>
<div class="align-items-center my-2">
<hr class="flex-fill my-0">
<h5 class="text-uppercase font-weight-bold mb-0 mx-2">Friends</h5>
<hr class="flex-fill my-0">
</div>
<p class="text-center">
{{!Friends!}}
</p>
</div>
<div class="text-center"><small>code by @8byte</small></div>
</div>Copy
<div style="max-width: 450px;" class="container p-0">
<div style="border-radius: 10px; overflow: hidden;" class="card">
<div style="background: url('{{u!Header Image!}}'); background-size: cover; height: 100px; border-top: 0; border-left: 0; border-right: 0;" class="card rounded-0"></div>
<div class="row no-gutters">
<div class="col-md-8"></div>
<div style="margin-top: -65px;" class="col-md-4 px-2">
<div style="width: 130px; height: 130px;" class="card rounded-circle bg-faded p-2 mx-auto">
<div style="background-image: url('{{u!Icon Image!}}'); background-size: cover; position: relative; z-index: 99;" class="rounded-circle bg-dark h-100 w-100"></div>
</div>
</div>
</div>
<div style="margin-top: -65px; position: relative; z-index: 9;" class="bg-faded p-2">
<div class="row no-gutters">
<div class="col-md-8 p-2">
<div class="d-flex mx-n1 mb-2">
{{%Color Palette%
<div style="background: {{c%Color%}}; border-radius: 10px; height: 15px;" class="card flex-fill m-1"></div>
%end%}}
</div>
<div style="border-radius: 10px; height: 150px;" class="card overflow-auto p-2">
<p>{{l!Long Text!}}</p>
</div>
</div>
<div class="col-md-4 p-2">
<div style="height: 50px;"></div>
<h1 class="text-center">
<strong>{{!Username or Name!}}</strong>
</h1>
<ul class="list-unstyled">
<li class="m-1 flex-row justify-content-between">
<span class="badge badge-primary">pronouns</span>
<small>{{!Pronouns!}}</small>
</li>
<li class="m-1 flex-row justify-content-between">
<span class="badge badge-primary">age</span>
<small>{{!Age!}}</small>
</li>
<li class="m-1 flex-row justify-content-between">
<span class="badge badge-primary">lang/tz</span>
<small>{{!Language/Timezone!}}</small>
</li>
<li class="m-1 flex-row justify-content-between">
<span class="badge badge-primary">links</span>
<small>
{{%Socials%
<a class="mx-1" href="{{u%Link%}}"><i class="{{i%Icon%}}"></i></a>
%end%}}
</small>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="text-right"><small>code by @8byte</small></div>
</div>Copy
<div style="max-width: 500px;" class="mx-auto">
<div class="card rounded-0">
<div style="background-image: url('{{u!Decor Image!}}'); background-size: cover; height: 30px;" class="bg-dark d-flex">
<div style="flex-grow: 1; opacity: .3;" class="bg-primary"></div>
<div style="flex-grow: 2; opacity: .5;" class="bg-primary"></div>
<div style="flex-grow: 3;" class="bg-primary"></div>
</div>
<div style="border-left: none; border-right: none;" class="card rounded-0">
<ul class="nav nav-fill">
<li class="nav-item"><a class="nav-link" data-toggle="tab" href="#ONE">one.</a></li>
<li class="nav-item"><a class="nav-link" data-toggle="tab" href="#TWO">two.</a></li>
<li class="nav-item"><a class="nav-link" data-toggle="tab" href="#THREE">three.</a></li>
<li class="nav-item"><a class="nav-link" data-toggle="tab" href="#FOUR">four.</a></li>
</ul>
<div class="tab-content">
<div id="ONE" class="tab-pane active">
<div class="row no-gutters">
<div class="col-md-5 p-3">
<div class="bg-faded p-2">
<div style="background-image: url('{{u!Profile Pic!}}'); background-size: cover; padding-top: 100%;" class="bg-dark"></div>
</div>
</div>
<div class="col-md-7 p-3">
<h3 class="text-center mb-0">{{!Username!}}</h3>
<h5 class="text-center text-primary font-weight-normal font-italic">
<span>{{!Pronouns!}}</span>
<span class="mx-1">-</span>
<span>{{!Age!}}</span>
<span class="mx-1">-</span>
<span>{{!Languages!}}</span>
</h5>
<div style="height: 120px;" class="overflow-auto">
<p>{{l!Bio Text!}} </p>
</div>
</div>
<div class="col-12 px-3 mb-3">
<div class="card flex-row justify-content-around rounded-0 p-2">
{{%Socials%
<a href="{{u%Link%}}"><i class="{{i%Icon%}}"></i></a>
%end%}}
</div>
</div>
</div>
</div>
<div id="TWO" class="tab-pane">
<div class="p-3">
<div class="alert alert-danger rounded-0">
<strong class="text-uppercase"><i class="fas fa-triangle-exclamation mr-1"></i> Warnings: </strong> {{l!Warnings!}}
</div>
<p>
<strong class="text-uppercase">Boundaries:</strong> {{l!Boundaries!}}
</p>
<p>
<strong class="text-uppercase">Blacklist:</strong> {{l!Blacklist!}}
</p>
</div>
</div>
<div id="THREE" class="tab-pane">
<div class="row no-gutters p-2">
{{%Characters%
<div class="col-md-4 col-6 p-2">
<div class="bg-faded p-2">
<div style="background-image: url('{{u%Image%}}'); background-size: cover; height: 100px;" class="bg-dark">
<a class="btn rounded-0 border-0 btn-outline-primary w-100 h-100" href="{{u%Link%}}"></a>
</div>
</div>
</div>
%end%}}
</div>
<div class="row no-gutters p-2 mt-n2">
{{%Progress%
<div class="col-4 align-items-center p-2">
<strong class="text-uppercase">{{%Title%}}</strong>
</div>
<div class="col-8 align-items-center p-2">
<div style="height: 10px;" class="progress w-100 card rounded-0">
<div style="width: {{n%Completion%}}%;" class="progress-bar"></div>
</div>
</div>
%end%}}
</div>
</div>
<div id="FOUR" class="tab-pane">
<div class="row no-gutters p-2">
{{%Friends%
<div class="col-md-3 col-6 p-2">
<div class="bg-faded p-2">
<div style="background-image: url('{{u%Profile Pic%}}'); background-size: cover;" class="bg-dark">
<a style="padding-top: 100%;" class="btn rounded-0 border-0 btn-outline-primary w-100" href="{{u%Link%}}"></a>
</div>
</div>
</div>
%end%}}
</div>
</div>
</div>
</div>
<div style="background-image: url('{{u!Decor Image!}}'); background-size: cover; height: 30px;" class="bg-dark d-flex">
<div style="flex-grow: 3;" class="bg-primary"></div>
<div style="flex-grow: 2; opacity: .5;" class="bg-primary"></div>
<div style="flex-grow: 1; opacity: .3;" class="bg-primary"></div>
</div>
</div>
<div class="text-center">
<small>code by @8byte</small>
</div>
</div>