Profile
Coding Resources
Collection of coding resources. A tip though, google + stack overflow on their own can help a LOT to solve problems.
W3Schools, Get Bootstrap, Bootstrap build & Dev Mozilla
Websites for learning coding
Circlejourney
Live code editor
Pexels & Unsplash
Websites for images
Clip-path maker by Bennett Feely
Fully customizable vector shapes to put images and/or color into.
Can put text in as well, but remember that text will still behave as though it is in a default rectangle/square card.
Resources by MoolkY
Many many resources, probably includes everything below too but... I'm not going to check
Coding Resources #1 #2 #3 by Elithian
Good guides all around
~ Coding Snippet Goldmine by Starlipop
Cards and buttons
HTML Snippet SHORTCUTS by mushroom_boar
Images, columns, flexboxes, icons, text, etc
Snippets by SparklyCodes
Borders, dividers, tabs, lists, etc
F2U Snippets Resources by BunBox
Useful misc
! HTML/CSS Cheat Sheet by NebulaNumbat
Text, backgrounds, border styles, gradients, collapse divs, etc
F2U Code Snippets by NebulaNumbat
Fixed background, 3d effect, music player, etc
Carousel by Get Bootstrap
cArOuSeL
Icons + Animating Icons by Font Awesome
All the usable icons + added icon animations
[F2U HTML] Expanding Palette by StormyStarlight
Nice for quick color grabbing
Password Protected Code by Doxiie
Very fun password code
Popup Code + PI Character Profile Code by Doxiie
Literally so many potential uses for this
Fullscreen Code by Doxiie
Fullscreen backgrounds
[Snippet] Hovered Definition + [Snippet] Inline Spoiler Text by Aurorean
Dotted underlines + tooltip & togglable spoiler text
Info Badges by Crowman
Nice little badges with icon and tooltip
2. Top/Bottom Buttons by CloudyCode
Nav buttons
[Snippet] Banners and Toggles by Aurorean
Quick banner tabs
Shift Link & Button Hues by VynxCodes
Use of filter:; to shift theme colors. This also works on progress bars, even if they're animated [custom colors works on animated progress bars too though-]
My simple snippets
Very simple snips. Take whatever you want!
Custom Color Tabs
UPDATE: cleaned up some of the code.
Adding mix-blend-mode: luminosity; with a btn-outline allows an active, custom color tab to change color like a regular bootstrap color tab.
- There are more mix-blend-mode options if you'd like to try.
- If you remove color:#fff, icons and text can react to mouse-hovers (for ex. see the caret on the dropdown button.) Careful when doing this to text alone, as it might make visibility difficult on certain themes.
-- If you want an icon to react, but not text, put span style="color:#fff;" around the text only.
<ul class="nav row no-gutters text-center" style="font-size:1.1rem;letter-spacing:1px;">
<!--TAB 1-->
<li class="col nav-item mr-2 mb-2" style="background:#242c5f;border:1px solid #1a214e;">
<a class="nav-link active btn-outline-danger p-1" style="border-radius:0;mix-blend-mode:luminosity;filter:grayscale(100%);color:#fff;" data-toggle="tab" href="#TabA">tab 1</a>
</li>
<!--TAB 2-->
<li class="col nav-item mr-2 mb-2" style="background:#242c5f;border:1px solid #1a214e;">
<a class="nav-link btn-outline-danger p-1" style="border-radius:0;mix-blend-mode:luminosity;filter:grayscale(100%);color:#fff;" data-toggle="tab" href="#TabB">tab 2</a>
</li>
<!--Dropdown menu: these buttons are currently coded to select individual collapsibles.-->
<li class="col nav-item dropdown mb-2" style="background:#242c5f;border:1px solid #1a214e;">
<a class="nav-link dropdown-toggle btn-outline-danger p-1 text-truncate" style="border-radius:0;mix-blend-mode:luminosity;filter:grayscale(100%);" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span style="color:#fff;">dropdown</span><span class="caret"></span>
</a>
<div class="dropdown-menu w-100 text-center rounded-0 p-1" style="z-index:999;background:rgba(36,44,95,.75);">
<a class="nav-link btn-outline-danger p-1 col" style="border-radius:0;mix-blend-mode:luminosity;color:#fff;filter:grayscale(100%);" data-toggle="collapse" href="#" data-target=".TAG1">option a</a>
<a class="nav-link btn-outline-danger p-1 col" style="border-radius:0;mix-blend-mode:luminosity;color:#fff;filter:grayscale(100%);" data-toggle="collapse" href="#" data-target=".TAG2">option b</a>
<a class="nav-link btn-outline-danger p-1 col" style="border-radius:0;mix-blend-mode:luminosity;color:#fff;filter:grayscale(100%);" data-toggle="collapse" href="#" data-target=".TAG3">option c</a>
</div>
</li>
</ul>Custom Shape Tabs
UPDATE: cleaned up some code.
Tabs, but whatever shape you want!
- Can be very finicky if you choose to use text in them, so I prefer just using icons.
- Once you choose another shape, you will have to adjust margins and padding.
- If you remove color:#fff; icons' color will react to hover. Remember to be mindful of the visibility across themes.
<!--Replace to change custom shape clip-path:polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%); (find/make shapes: https://bennettfeely.com/clippy/ )
Replace background:#242c5f; with preferred color
Replace to adjust the spacing between buttons: mr-n4
Replace to adjust the padding inside buttons: px-lg-5 py-lg-2-->
<ul class="nav row no-gutters text-center justify-content-center" style="font-size:1.1rem;letter-spacing:1px;">
<!--TAB 1-->
<li class="col col-lg-auto nav-item mr-n4 mb-2" style="background:#242c5f;clip-path:polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);">
<a class="nav-link active btn-outline-danger px-lg-5 py-lg-2" style="border-radius:0;mix-blend-mode:luminosity;filter:grayscale(100%);color:#fff;" data-toggle="tab" href="#TabA"><i class="fas fa-heart"></i></a>
</li>
<!--TAB 2-->
<li class="col col-lg-auto nav-item mr-n4 mb-2" style="background:#242c5f;clip-path:polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);">
<a class="nav-link btn-outline-danger px-lg-5 py-lg-2" style="border-radius:0;mix-blend-mode:luminosity;filter:grayscale(100%);color:#fff;" data-toggle="tab" href="#TabB"><i class="fas fa-books"></i></a>
</li>
<!--TAB 3-->
<li class="col col-lg-auto nav-item mb-2" style="background:#242c5f;clip-path:polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);">
<a class="nav-link btn-outline-danger px-lg-5 py-lg-2" style="border-radius:0;mix-blend-mode:luminosity;filter:grayscale(100%);color:#fff;" data-toggle="tab" href="#TabC"><i class="fas fa-paperclip"></i></a>
</li>
</ul>Icon Progress Bar
Works best using fa-awesome icons that don't have negative space / holes inside the icon. If changing icon, you may need some margin adjustments to center both shapes back onto the progress bar.
<div class="progress my-2" style="overflow:visible;">
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="height:5px;background-color:#297e7e;width:50%;">
<span class="fa-stack pull-right" style="margin-right:-18px;">
<i class="fas fa-rhombus fa-stack-2x" style="font-size:1.5rem;margin-top:-34%;"></i>
<i class="fas fa-rhombus fa-stack-1x" style="font-size:1rem;margin-top:-27%;color:#297e7e;"></i>
</span>
</div>
</div>Info badge revival
I wanted to remake the nice looking, icon-tooltip badges by Crowman, which, to my knowledge, are now completely gone..
Made a couple of my own variations as well.
<div class="mx-auto justify-content-center">
<!--Default button-->
<div class="btn btn-default mx-1 py-1 tooltipster" style="border-radius:25px;letter-spacing:1px;font-size:1.05rem;" title="this one is default-colored"><i class="far fa-heart"></i> Tag Here</div>
<!--Hue-rotated... uh opposite color.. shifting one?-->
<div class="btn btn-outline-danger mx-1 py-1 tooltipster" style="border-radius:25px;letter-spacing:1px;font-size:1.05rem;filter:hue-rotate(265deg)" title="this one uses hue-rotate to get more colorful-y"><i class="far fa-paintbrush"></i> Tag Here</div>
<!--Custom color info badge. If it's given no bounds, it might stretch out as far as the space allows-->
<div class="card text-white" style="background-color:#242c5f;border-radius:25px;">
<a class="btn btn-outline-danger py-1 tooltipster" style="border-radius:25px;letter-spacing:1px;font-size:1.05rem;mix-blend-mode:luminosity;" title="this one can be aaaany color!"><i class="far fa-paintbrush"></i> Tag Here</a>
</div>
</div>Toggle Switches
Toggler using fa-awesome icons. Must share the data-target of whatever it is responsible for collapsing. Can also be used as switching tabs (add data-parent). If you want to use two icons that differ in width, add fa-fw to both icon divs
<!--TOGGLE SWITCH-->
<div class="row no-gutters">
<a href="#" class="mr-2" style="margin-top:10px;" data-toggle="collapse" data-target=".TOGGLE1">
<i class="TOGGLE1 collapse fade show fas fa-toggle-on fa-xl" style="transition:none 0s;position:absolute;color:#297e7e;"></i>
<i class="TOGGLE1 collapse fade far fa-toggle-off fa-xl" style="transition:none 0s;position:absolute;color:#297e7e;"></i>
</a>
<span class="ml-4 tooltipster" title="description if wanted, if not remove tooltipster and title">Tag</span>
</div>
<!--CHECKBOX-->
<div class="row no-gutters">
<a href="#" style="margin-top:10px;" data-toggle="collapse" data-target=".TOGGLE2">
<i class="TOGGLE2 collapse fade show fas fa-square-check fa-lg" style="transition:none 0s;position:absolute;color:#297e7e;"></i>
<i class="TOGGLE2 collapse fade far fa-square fa-lg" style="transition:none 0s;position:absolute;color:#297e7e;"></i>
</a>
<span class="ml-4 tooltipster" title="description if wanted, if not remove tooltipster and title">Tag</span>
</div>Toggle Switches V.2
UPDATE: tried a slightly different method to make the toggles and text more consistently centered. Also: is chonkier
Toggler using fa-awesome icons.
<!--When choosing another icon, change margin-right:rem; to another number if the spacing needs to be fixed.-->
<!--TOGGLE SWITCH-->
<div class="justify-content-center align-items-center" style="font-size:1.25rem;">
<a href="#" style="margin-right:2.8rem;color:#6b75b6;font-size:1rem;" data-toggle="collapse" data-target=".TOGG1">
<i class="TOGG1 collapse fade show fas fa-toggle-on fa-fw fa-2xl" style="transition:none 0s;position:absolute;"></i>
<i class="TOGG1 collapse fade far fa-toggle-off fa-fw fa-2xl" style="transition:none 0s;position:absolute;"></i>
</a>
<span class="text-truncate">Tag</span>
</div>
<!--TOGGLE BOX-->
<div class="justify-content-center align-items-center" style="font-size:1.25rem;">
<a href="#" style="margin-right:2.2rem;color:#6b75b6;font-size:1rem;" data-toggle="collapse" data-target=".TOGG2">
<i class="TOGG2 collapse fade show fas fa-square-check fa-fw fa-xl" style="transition:none 0s;position:absolute;"></i>
<i class="TOGG2 collapse fade far fa-square fa-fw fa-xl" style="transition:none 0s;position:absolute;"></i>
</a>
<span class="text-truncate">Tag</span>
</div>
My WIP snippets
Snippets here are somewhat finished (LET ME KNOW IF SOMETHING'S BROKEN !), but are much longer & should have individual pages later. Will have their own profiles once I get tutorials done on how to use. Feel free to take if you're willing to try figuring them out! [Oh, I've forgotten to put credits on any of them,,, might do that later, but eh. Still feel free to take without :P]
Functional numpad
Code is 123! Try wrong inputs too
WIP: Working on an update to shorten this code significantly & make it easier to edit. The keyboard code currently has these updates :>
Inspired by Password Protected Code by Doxiie. I wanted to build a code that could be reset without a refresh & show previous inputs. Which resulted in my code being much longer, unfortunately.
This is a keypad to hide a link or profile behind a passcode. Not fully secure or anything, there are multiple ways to break past this without knowing the code. Will work on a setup tutorial for this later.
[want to make it more difficult? change "START" & "FAIL" to look similar to the correct data-targets, for ex using o + 0, or l + I to make it less obvious on hover]
<!--NUMPAD-->
<div class="KEYPAD justify-content-center">
<div class="text-center card bg-faded p-2">
<!--START-->
<div class="START collapse show" data-parent=".KEYPAD" style="transition:none 0s;">
<div class="card text-white bg-dark mb-2 py-3" style="width:275px">
<p class="p-2" style="letter-spacing:4px;">
<i class="fas fa-dash fa-2xl fa-beat-fade"></i>
<i class="fas fa-dash fa-2xl fa-beat-fade"></i>
<i class="fas fa-dash fa-2xl fa-beat-fade"></i>
</p>
</div>
<div class="row no-gutters mt-3 justify-content-center text-white">
<div class="rounded" style="background-color:#297e7e; width:60px">
<a href="#" class="w-100 btn btn-outline-success rounded-0 text-reset" style="mix-blend-mode: luminosity;" data-toggle="collapse" data-parent=".KEYPAD" data-target=".o">1</a>
</div>
<div class="rounded-0 mx-3" style="background-color:#297e7e; width:60px">
<a href="#" class="w-100 btn btn-outline-success rounded-0 text-reset" style="mix-blend-mode: luminosity;" data-toggle="collapse" data-parent=".KEYPAD" data-target=".FAIL">2</a>
</div>
<div class="rounded" style="background-color:#297e7e; width:60px">
<a href="#" class="w-100 btn btn-outline-success rounded-0 text-reset" style="mix-blend-mode: luminosity;" data-toggle="collapse" data-parent=".KEYPAD" data-target=".FAIL">3</a>
</div>
</div>
<div class="row no-gutters mt-3 justify-content-center text-white">
<div class="rounded" style="background-color:#297e7e; width:60px">
<a href="#" class="w-100 btn btn-outline-success rounded-0 text-reset" style="mix-blend-mode: luminosity;" data-toggle="collapse" data-parent=".KEYPAD" data-target=".FAIL">4</a>
</div>
<div class="rounded-0 mx-3" style="background-color:#297e7e; width:60px">
<a href="#" class="w-100 btn btn-outline-success rounded-0 text-reset" style="mix-blend-mode: luminosity;" data-toggle="collapse" data-parent=".KEYPAD" data-target=".FAIL">5</a>
</div>
<div class="rounded" style="background-color:#297e7e; width:60px">
<a href="#" class="w-100 btn btn-outline-success rounded-0 text-reset" style="mix-blend-mode: luminosity;" data-toggle="collapse" data-parent=".KEYPAD" data-target=".FAIL">6</a>
</div>
</div>
<div class="row no-gutters mt-3 justify-content-center text-white">
<div class="rounded" style="background-color:#297e7e; width:60px">
<a href="#" class="w-100 btn btn-outline-success rounded-0 text-reset" style="mix-blend-mode: luminosity;" data-toggle="collapse" data-parent=".KEYPAD" data-target=".FAIL">7</a>
</div>
<div class="rounded-0 mx-3" style="background-color:#297e7e; width:60px">
<a href="#" class="w-100 btn btn-outline-success rounded-0 text-reset" style="mix-blend-mode: luminosity;" data-toggle="collapse" data-parent=".KEYPAD" data-target=".FAIL">8</a>
</div>
<div class="rounded" style="background-color:#297e7e; width:60px">
<a href="#" class="w-100 btn btn-outline-success rounded-0 text-reset" style="mix-blend-mode: luminosity;" data-toggle="collapse" data-parent=".KEYPAD" data-target=".FAIL">9</a>
</div>
</div>
<div class="row no-gutters mt-3 mb-2 justify-content-center text-white">
<div class="rounded" style="background-color:#297e7e; width:60px;">
<a href="#" class="w-100 btn btn-outline-success rounded-0 text-reset" style="mix-blend-mode: luminosity;" data-toggle="collapse" data-parent=".KEYPAD" data-target=".START"><i class="fas fa-caret-left"></i></a>
</div>
<div class="rounded-0 mx-3" style="background-color:#297e7e; width:60px;">
<a href="#" class="w-100 btn btn-outline-success rounded-0 text-reset" style="mix-blend-mode: luminosity;" data-toggle="collapse" data-parent=".KEYPAD" data-target=".FAIL">0</a>
</div>
<div class="rounded" style="background-color:#297e7e; width:60px;">
<a href="#" class="w-100 btn btn-outline-success rounded-0 text-reset" style="mix-blend-mode: luminosity;" data-toggle="collapse" data-parent=".KEYPAD" data-target=".START">#</a>
</div>
</div>
</div>
<!--CORRECT 1-->
<div class="o collapse" data-parent=".KEYPAD" style="transition:none 0s;">
<div class="card text-white bg-dark mb-2 py-3" style="width:275px">
<p class="p-2" style="letter-spacing:4px;">
<i class="fas fa-2xl fa-beat-fade">1</i>
<i class="fas fa-dash fa-2xl fa-beat-fade"></i>
<i class="fas fa-dash fa-2xl fa-beat-fade"></i>
</p>
</div>
<div class="row no-gutters mt-3 justify-content-center text-white">
<div class="rounded" style="background-color:#297e7e; width:60px">
<a href="#" class="w-100 btn btn-outline-success rounded-0 text-reset" style="mix-blend-mode: luminosity;" data-toggle="collapse" data-parent=".KEYPAD" data-target=".FAIL">1</a>
</div>
<div class="rounded-0 mx-3" style="background-color:#297e7e; width:60px">
<a href="#" class="w-100 btn btn-outline-success rounded-0 text-reset" style="mix-blend-mode: luminosity;" data-toggle="collapse" data-parent=".KEYPAD" data-target=".oo">2</a>
</div>
<div class="rounded" style="background-color:#297e7e; width:60px">
<a href="#" class="w-100 btn btn-outline-success rounded-0 text-reset" style="mix-blend-mode: luminosity;" data-toggle="collapse" data-parent=".KEYPAD" data-target=".FAIL">3</a>
</div>
</div>
<div class="row no-gutters mt-3 justify-content-center text-white">
<div class="rounded" style="background-color:#297e7e; width:60px">
<a href="#" class="w-100 btn btn-outline-success rounded-0 text-reset" style="mix-blend-mode: luminosity;" data-toggle="collapse" data-parent=".KEYPAD" data-target=".FAIL">4</a>
</div>
<div class="rounded-0 mx-3" style="background-color:#297e7e; width:60px">
<a href="#" class="w-100 btn btn-outline-success rounded-0 text-reset" style="mix-blend-mode: luminosity;" data-toggle="collapse" data-parent=".KEYPAD" data-target=".FAIL">5</a>
</div>
<div class="rounded" style="background-color:#297e7e; width:60px">
<a href="#" class="w-100 btn btn-outline-success rounded-0 text-reset" style="mix-blend-mode: luminosity;" data-toggle="collapse" data-parent=".KEYPAD" data-target=".FAIL">6</a>
</div>
</div>
<div class="row no-gutters mt-3 justify-content-center text-white">
<div class="rounded" style="background-color:#297e7e; width:60px">
<a href="#" class="w-100 btn btn-outline-success rounded-0 text-reset" style="mix-blend-mode: luminosity;" data-toggle="collapse" data-parent=".KEYPAD" data-target=".FAIL">7</a>
</div>
<div class="rounded-0 mx-3" style="background-color:#297e7e; width:60px">
<a href="#" class="w-100 btn btn-outline-success rounded-0 text-reset" style="mix-blend-mode: luminosity;" data-toggle="collapse" data-parent=".KEYPAD" data-target=".FAIL">8</a>
</div>
<div class="rounded" style="background-color:#297e7e; width:60px">
<a href="#" class="w-100 btn btn-outline-success rounded-0 text-reset" style="mix-blend-mode: luminosity;" data-toggle="collapse" data-parent=".KEYPAD" data-target=".FAIL">9</a>
</div>
</div>
<div class="row no-gutters mt-3 mb-2 justify-content-center text-white">
<div class="rounded" style="background-color:#297e7e; width:60px;">
<a href="#" class="w-100 btn btn-outline-success rounded-0 text-reset" style="mix-blend-mode: luminosity;" data-toggle="collapse" data-parent=".KEYPAD" data-target=".START"><i class="fas fa-caret-left"></i></a>
</div>
<div class="rounded-0 mx-3" style="background-color:#297e7e; width:60px;">
<a href="#" class="w-100 btn btn-outline-success rounded-0 text-reset" style="mix-blend-mode: luminosity;" data-toggle="collapse" data-parent=".KEYPAD" data-target=".FAIL">0</a>
</div>
<div class="rounded" style="background-color:#297e7e; width:60px;">
<a href="#" class="w-100 btn btn-outline-success rounded-0 text-reset" style="mix-blend-mode: luminosity;" data-toggle="collapse" data-parent=".KEYPAD" data-target=".START">#</a>
</div>
</div>
</div>
<!--CORRECT 2-->
<div class="oo collapse" data-parent=".KEYPAD" style="transition:none 0s;">
<div class="card text-white bg-dark mb-2 py-3" style="width:275px">
<p class="p-2" style="letter-spacing:4px;">
<i class="fas fa-2xl fa-beat-fade">1</i>
<i class="fas fa-2xl fa-beat-fade">2</i>
<i class="fas fa-dash fa-2xl fa-beat-fade"></i>
</p>
</div>
<div class="row no-gutters mt-3 justify-content-center text-white">
<div class="rounded" style="background-color:#297e7e; width:60px">
<a href="#" class="w-100 btn btn-outline-success rounded-0 text-reset" style="mix-blend-mode: luminosity;" data-toggle="collapse" data-parent=".KEYPAD" data-target=".FAIL">1</a>
</div>
<div class="rounded-0 mx-3" style="background-color:#297e7e; width:60px">
<a href="#" class="w-100 btn btn-outline-success rounded-0 text-reset" style="mix-blend-mode: luminosity;" data-toggle="collapse" data-parent=".KEYPAD" data-target=".FAIL">2</a>
</div>
<div class="rounded" style="background-color:#297e7e; width:60px">
<a href="#" class="w-100 btn btn-outline-success rounded-0 text-reset" style="mix-blend-mode: luminosity;" data-toggle="collapse" data-parent=".KEYPAD" data-target=".ooo">3</a>
</div>
</div>
<div class="row no-gutters mt-3 justify-content-center text-white">
<div class="rounded" style="background-color:#297e7e; width:60px">
<a href="#" class="w-100 btn btn-outline-success rounded-0 text-reset" style="mix-blend-mode: luminosity;" data-toggle="collapse" data-parent=".KEYPAD" data-target=".FAIL">4</a>
</div>
<div class="rounded-0 mx-3" style="background-color:#297e7e; width:60px">
<a href="#" class="w-100 btn btn-outline-success rounded-0 text-reset" style="mix-blend-mode: luminosity;" data-toggle="collapse" data-parent=".KEYPAD" data-target=".FAIL">5</a>
</div>
<div class="rounded" style="background-color:#297e7e; width:60px">
<a href="#" class="w-100 btn btn-outline-success rounded-0 text-reset" style="mix-blend-mode: luminosity;" data-toggle="collapse" data-parent=".KEYPAD" data-target=".FAIL">6</a>
</div>
</div>
<div class="row no-gutters mt-3 justify-content-center text-white">
<div class="rounded" style="background-color:#297e7e; width:60px">
<a href="#" class="w-100 btn btn-outline-success rounded-0 text-reset" style="mix-blend-mode: luminosity;" data-toggle="collapse" data-parent=".KEYPAD" data-target=".FAIL">7</a>
</div>
<div class="rounded-0 mx-3" style="background-color:#297e7e; width:60px">
<a href="#" class="w-100 btn btn-outline-success rounded-0 text-reset" style="mix-blend-mode: luminosity;" data-toggle="collapse" data-parent=".KEYPAD" data-target=".FAIL">8</a>
</div>
<div class="rounded" style="background-color:#297e7e; width:60px">
<a href="#" class="w-100 btn btn-outline-success rounded-0 text-reset" style="mix-blend-mode: luminosity;" data-toggle="collapse" data-parent=".KEYPAD" data-target=".FAIL">9</a>
</div>
</div>
<div class="row no-gutters mt-3 mb-2 justify-content-center text-white">
<div class="rounded" style="background-color:#297e7e; width:60px;">
<a href="#" class="w-100 btn btn-outline-success rounded-0 text-reset" style="mix-blend-mode: luminosity;" data-toggle="collapse" data-parent=".KEYPAD" data-target=".START"><i class="fas fa-caret-left"></i></a>
</div>
<div class="rounded-0 mx-3" style="background-color:#297e7e; width:60px;">
<a href="#" class="w-100 btn btn-outline-success rounded-0 text-reset" style="mix-blend-mode: luminosity;" data-toggle="collapse" data-parent=".KEYPAD" data-target=".FAIL">0</a>
</div>
<div class="rounded" style="background-color:#297e7e; width:60px;">
<a href="#" class="w-100 btn btn-outline-success rounded-0 text-reset" style="mix-blend-mode: luminosity;" data-toggle="collapse" data-parent=".KEYPAD" data-target=".START">#</a>
</div>
</div>
</div>
<!--SUCCESS-->
<div class="ooo collapse" data-parent=".KEYPAD" style="transition:none 0s;width:275px">
<div class="card bg-dark mb-2 py-3" style="width:275px">
<p class="p-2 text-white" style="letter-spacing:4px;">
<i class="fas fa-2xl fa-beat-fade">1</i>
<i class="fas fa-2xl fa-beat-fade">2</i>
<i class="fas fa-2xl fa-beat-fade">3</i>
</p>
</div>
<p>oh stuff can go here. Like a link to a profile, or you can get rid of the above keypad pieces all together, remove width:275px, & put a full profile instead</p>
</div>
<!--FAIL-->
<div class="FAIL collapse" data-parent=".KEYPAD" style="transition:none 0s;">
<div class="card text-white bg-dark mb-2 py-3" style="width:275px">
<p class="p-2" style="letter-spacing:4px;">
<i class="fas fa-xmark fa-2xl fa-beat-fade"></i>
<i class="fas fa-xmark fa-2xl fa-beat-fade"></i>
<i class="fas fa-xmark fa-2xl fa-beat-fade"></i>
</p>
</div>
<div class="row no-gutters mt-3 justify-content-center text-white">
<div class="rounded" style="background-color:#297e7e; width:60px">
<a href="#" class="w-100 btn btn-outline-success rounded-0 text-reset" style="mix-blend-mode: luminosity;" data-toggle="collapse" data-parent=".KEYPAD" data-target=".START">1</a>
</div>
<div class="rounded-0 mx-3" style="background-color:#297e7e; width:60px">
<a href="#" class="w-100 btn btn-outline-success rounded-0 text-reset" style="mix-blend-mode: luminosity;" data-toggle="collapse" data-parent=".KEYPAD" data-target=".START">2</a>
</div>
<div class="rounded" style="background-color:#297e7e; width:60px">
<a href="#" class="w-100 btn btn-outline-success rounded-0 text-reset" style="mix-blend-mode: luminosity;" data-toggle="collapse" data-parent=".KEYPAD" data-target=".START">3</a>
</div>
</div>
<div class="row no-gutters mt-3 justify-content-center text-white">
<div class="rounded" style="background-color:#297e7e; width:60px">
<a href="#" class="w-100 btn btn-outline-success rounded-0 text-reset" style="mix-blend-mode: luminosity;" data-toggle="collapse" data-parent=".KEYPAD" data-target=".START">4</a>
</div>
<div class="rounded-0 mx-3" style="background-color:#297e7e; width:60px">
<a href="#" class="w-100 btn btn-outline-success rounded-0 text-reset" style="mix-blend-mode: luminosity;" data-toggle="collapse" data-parent=".KEYPAD" data-target=".START">5</a>
</div>
<div class="rounded" style="background-color:#297e7e; width:60px">
<a href="#" class="w-100 btn btn-outline-success rounded-0 text-reset" style="mix-blend-mode: luminosity;" data-toggle="collapse" data-parent=".KEYPAD" data-target=".START">6</a>
</div>
</div>
<div class="row no-gutters mt-3 justify-content-center text-white">
<div class="rounded" style="background-color:#297e7e; width:60px">
<a href="#" class="w-100 btn btn-outline-success rounded-0 text-reset" style="mix-blend-mode: luminosity;" data-toggle="collapse" data-parent=".KEYPAD" data-target=".START">7</a>
</div>
<div class="rounded-0 mx-3" style="background-color:#297e7e; width:60px">
<a href="#" class="w-100 btn btn-outline-success rounded-0 text-reset" style="mix-blend-mode: luminosity;" data-toggle="collapse" data-parent=".KEYPAD" data-target=".START">8</a>
</div>
<div class="rounded" style="background-color:#297e7e; width:60px">
<a href="#" class="w-100 btn btn-outline-success rounded-0 text-reset" style="mix-blend-mode: luminosity;" data-toggle="collapse" data-parent=".KEYPAD" data-target=".START">9</a>
</div>
</div>
<div class="row no-gutters mt-3 mb-2 justify-content-center text-white">
<div class="rounded-0 fa-beat-fade" style="background-color:#297e7e; width:60px;">
<a href="#" class="w-100 btn btn-outline-success rounded-0 text-reset" style="mix-blend-mode: luminosity;" data-toggle="collapse" data-parent=".KEYPAD" data-target=".START"><i class="fas fa-caret-left"></i></a>
</div>
<div class="rounded-0 mx-3" style="background-color:#297e7e; width:60px;">
<a href="#" class="w-100 btn btn-outline-success rounded-0 text-reset" style="mix-blend-mode: luminosity;" data-toggle="collapse" data-parent=".KEYPAD" data-target=".START">0</a>
</div>
<div class="rounded" style="background-color:#297e7e; width:60px;">
<a href="#" class="w-100 btn btn-outline-success rounded-0 text-reset" style="mix-blend-mode: luminosity;" data-toggle="collapse" data-parent=".KEYPAD" data-target=".START">#</a>
</div>
</div>
</div>
<!---->
</div>
</div>
<!--END NUMPAD-->Functional, custom-colored keyboard
pass is,,, "pass"
UPDATED: Half the size of my previous code, from +600 lines now down to about 300.
!!! Looks best when allowed to be on col-12/full width. Otherwise, the keys might misalign if your window is small. If it is on col-12/full width, it should even be mobile friendly!
Words & numbers password game; buttons are custom colored, easily resetable. Its own page + tutorial on how to use is coming: eventually (sorry).
<!--KEYBOARD source:https://toyhou.se/20943192.my-snippets-resources-->
<div class="KBKEYS mx-auto text-center card bg-faded p-2" style="max-width:32.75rem;border-width:1px 1px 3px;">
<!--KBSTART-->
<div class="KBSTART NEXT collapse show" data-parent=".KBKEYS" style="transition:none 0s;">
<div class="card text-white bg-dark" style="letter-spacing:4px;height:5rem;">
<div class="row no-gutters justify-content-center align-items-center" style="overflow:hidden auto;position:absolute;top:0;bottom:0;left:0;right:0;">
<div>
<span class="O-1 collapse fade show"><i class="O-1 fas fa-dash fa-2xl fa-beat-fade pr-2"></i></span>
<span class="O-1 collapse fade"><i class="fas fa-2xl pr-2">P</i></span>
</div>
<div>
<span class="O-2 collapse fade show"><i class="O-1 fas fa-dash fa-2xl fa-beat-fade pr-2"></i></span>
<span class="O-2 collapse fade"><i class="fas fa-2xl pr-2">A</i></span>
</div>
<div>
<span class="O-3 collapse fade show"><i class="O-1 fas fa-dash fa-2xl fa-beat-fade pr-2"></i></span>
<span class="O-3 collapse fade"><i class="fas fa-2xl pr-2">S</i></span>
</div>
<div>
<span class="O-4 collapse fade show"><i class="O-1 fas fa-dash fa-2xl fa-beat-fade"></i></span>
<span class="O-4 collapse fade"><i class="fas fa-2xl">S</i></span>
</div>
</div>
</div>
<div class="row no-gutters mt-1 justify-content-center text-white">
<div class="card border-0 rounded-0 overflow-hidden" style="background-color:#242c5f;">
<a href="#" class="p-2 px-sm-3 btn btn-sm btn-outline-danger rounded-0 text-reset" style="mix-blend-mode: luminosity;border-radius:0;border-width:1px 1px 2px;font-weight:500;" data-toggle="collapse" data-target=".II, .KBFAIL">1</a>
</div>
<div class="card border-0 rounded-0 mx-1 overflow-hidden" style="background-color:#242c5f;">
<a href="#" class="p-2 px-sm-3 btn btn-sm btn-outline-danger rounded-0 text-reset" style="mix-blend-mode: luminosity;border-radius:0;border-width:1px 1px 2px;font-weight:500;" data-toggle="collapse" data-target=".II, .KBFAIL">2</a>
</div>
<div class="card border-0 rounded-0 overflow-hidden" style="background-color:#242c5f;">
<a href="#" class="p-2 px-sm-3 btn btn-sm btn-outline-danger rounded-0 text-reset" style="mix-blend-mode: luminosity;border-radius:0;border-width:1px 1px 2px;font-weight:500;" data-toggle="collapse" data-target=".II, .KBFAIL">3</a>
</div>
<div class="card border-0 rounded-0 mx-1 overflow-hidden" style="background-color:#242c5f;">
<a href="#" class="p-2 px-sm-3 btn btn-sm btn-outline-danger rounded-0 text-reset" style="mix-blend-mode: luminosity;border-radius:0;border-width:1px 1px 2px;font-weight:500;" data-toggle="collapse" data-target=".II, .KBFAIL">4</a>
</div>
<div class="card border-0 rounded-0 overflow-hidden" style="background-color:#242c5f;">
<a href="#" class="p-2 px-sm-3 btn btn-sm btn-outline-danger rounded-0 text-reset" style="mix-blend-mode: luminosity;border-radius:0;border-width:1px 1px 2px;font-weight:500;" data-toggle="collapse" data-target=".II, .KBFAIL">5</a>
</div>
<div class="card border-0 rounded-0 mx-1 overflow-hidden" style="background-color:#242c5f;">
<a href="#" class="p-2 px-sm-3 btn btn-sm btn-outline-danger rounded-0 text-reset" style="mix-blend-mode: luminosity;border-radius:0;border-width:1px 1px 2px;font-weight:500;" data-toggle="collapse" data-target=".II, .KBFAIL">6</a>
</div>
<div class="card border-0 rounded-0 overflow-hidden" style="background-color:#242c5f;">
<a href="#" class="p-2 px-sm-3 btn btn-sm btn-outline-danger rounded-0 text-reset" style="mix-blend-mode: luminosity;border-radius:0;border-width:1px 1px 2px;font-weight:500;" data-toggle="collapse" data-target=".II, .KBFAIL">7</a>
</div>
<div class="card border-0 rounded-0 mx-1 overflow-hidden" style="background-color:#242c5f;">
<a href="#" class="p-2 px-sm-3 btn btn-sm btn-outline-danger rounded-0 text-reset" style="mix-blend-mode: luminosity;border-radius:0;border-width:1px 1px 2px;font-weight:500;" data-toggle="collapse" data-target=".II, .KBFAIL">8</a>
</div>
<div class="card border-0 rounded-0 overflow-hidden" style="background-color:#242c5f;">
<a href="#" class="p-2 px-sm-3 btn btn-sm btn-outline-danger rounded-0 text-reset" style="mix-blend-mode: luminosity;border-radius:0;border-width:1px 1px 2px;font-weight:500;" data-toggle="collapse" data-target=".II, .KBFAIL">9</a>
</div>
<div class="card border-0 rounded-0 mx-1 overflow-hidden" style="background-color:#242c5f;">
<a href="#" class="p-2 px-sm-3 btn btn-sm btn-outline-danger rounded-0 text-reset" style="mix-blend-mode: luminosity;border-radius:0;border-width:1px 1px 2px;font-weight:500;" data-toggle="collapse" data-target=".II, .KBFAIL">0</a>
</div>
<div class="card border-0 rounded-0 overflow-hidden" style="background-color:#242c5f;">
<a href="#" class="p-2 px-sm-3 btn btn-sm btn-outline-danger rounded-0 text-reset" style="mix-blend-mode: luminosity;border-radius:0;border-width:1px 1px 2px;font-weight:500;" data-toggle="collapse" data-target=".II, .KBFAIL">-</a>
</div>
</div>
<div class="row no-gutters mt-1 justify-content-center text-white">
<div class="card border-0 rounded-0 overflow-hidden" style="background-color:#242c5f;">
<a href="#" class="p-2 px-sm-3 btn btn-sm btn-outline-danger rounded-0 text-reset" style="mix-blend-mode: luminosity;border-radius:0;border-width:1px 1px 2px;font-weight:500;" data-toggle="collapse" data-target=".II, .KBFAIL">Q</a>
</div>
<div class="card border-0 rounded-0 mx-1 overflow-hidden" style="background-color:#242c5f;">
<a href="#" class="p-2 px-sm-3 btn btn-sm btn-outline-danger rounded-0 text-reset" style="mix-blend-mode: luminosity;border-radius:0;border-width:1px 1px 2px;font-weight:500;" data-toggle="collapse" data-target=".II, .KBFAIL">W</a>
</div>
<div class="card border-0 rounded-0 overflow-hidden" style="background-color:#242c5f;">
<a href="#" class="p-2 px-sm-3 btn btn-sm btn-outline-danger rounded-0 text-reset" style="mix-blend-mode: luminosity;border-radius:0;border-width:1px 1px 2px;font-weight:500;" data-toggle="collapse" data-target=".II, .KBFAIL">E</a>
</div>
<div class="card border-0 rounded-0 mx-1 overflow-hidden" style="background-color:#242c5f;">
<a href="#" class="p-2 px-sm-3 btn btn-sm btn-outline-danger rounded-0 text-reset" style="mix-blend-mode: luminosity;border-radius:0;border-width:1px 1px 2px;font-weight:500;" data-toggle="collapse" data-target=".II, .KBFAIL">R</a>
</div>
<div class="card border-0 rounded-0 overflow-hidden" style="background-color:#242c5f;">
<a href="#" class="p-2 px-sm-3 btn btn-sm btn-outline-danger rounded-0 text-reset" style="mix-blend-mode: luminosity;border-radius:0;border-width:1px 1px 2px;font-weight:500;" data-toggle="collapse" data-target=".II, .KBFAIL">T</a>
</div>
<div class="card border-0 rounded-0 mx-1 overflow-hidden" style="background-color:#242c5f;">
<a href="#" class="p-2 px-sm-3 btn btn-sm btn-outline-danger rounded-0 text-reset" style="mix-blend-mode: luminosity;border-radius:0;border-width:1px 1px 2px;font-weight:500;" data-toggle="collapse" data-target=".II, .KBFAIL">Y</a>
</div>
<div class="card border-0 rounded-0 overflow-hidden" style="background-color:#242c5f;">
<a href="#" class="p-2 px-sm-3 btn btn-sm btn-outline-danger rounded-0 text-reset" style="mix-blend-mode: luminosity;border-radius:0;border-width:1px 1px 2px;font-weight:500;" data-toggle="collapse" data-target=".II, .KBFAIL">U</a>
</div>
<div class="card border-0 rounded-0 mx-1 overflow-hidden" style="background-color:#242c5f;">
<a href="#" class="p-2 px-sm-3 btn btn-sm btn-outline-danger rounded-0 text-reset" style="mix-blend-mode: luminosity;border-radius:0;border-width:1px 1px 2px;font-weight:500;" data-toggle="collapse" data-target=".II, .KBFAIL">I</a>
</div>
<div class="card border-0 rounded-0 overflow-hidden" style="background-color:#242c5f;">
<a href="#" class="p-2 px-sm-3 btn btn-sm btn-outline-danger rounded-0 text-reset" style="mix-blend-mode: luminosity;border-radius:0;border-width:1px 1px 2px;font-weight:500;" data-toggle="collapse" data-target=".II, .KBFAIL">O</a>
</div>
<div class="card border-0 rounded-0 ml-1 overflow-hidden" style="background-color:#242c5f;">
<a href="#" class="p-2 px-sm-3 btn btn-sm btn-outline-danger rounded-0 text-reset" style="mix-blend-mode: luminosity;border-radius:0;border-width:1px 1px 2px;font-weight:500;" data-toggle="collapse" data-target=".II, .KBFAIL">P</a>
<div class="Il collapse show rounded" data-parent=".NEXT" style="background-color:#242c5f;position:absolute;top:0;left:0;bottom:0;right:0;transition:none 0s;">
<a href="#" class="p-2 px-sm-3 btn btn-sm btn-outline-danger rounded-0 text-reset" style="mix-blend-mode: luminosity;border-radius:0;border-width:1px 1px 2px;font-weight:500;" data-toggle="collapse" data-target=".Ill, .O-1, .DIG-1">P</a>
</div>
</div>
</div>
<div class="row no-gutters mt-1 justify-content-center text-white">
<div class="card border-0 rounded-0 overflow-hidden" style="background-color:#242c5f;">
<a href="#" class="p-2 px-sm-3 btn btn-sm btn-outline-danger rounded-0 text-reset" style="mix-blend-mode: luminosity;border-radius:0;border-width:1px 1px 2px;font-weight:500;" data-toggle="collapse" data-target=".II, .KBFAIL">A</a>
<div class="Ill collapse rounded" data-parent=".NEXT" style="background-color:#242c5f;position:absolute;top:0;left:0;bottom:0;right:0;transition:none 0s;">
<a href="#" class="p-2 px-sm-3 btn btn-sm btn-outline-danger rounded-0 text-reset" style="mix-blend-mode: luminosity;border-radius:0;border-width:1px 1px 2px;font-weight:500;" data-toggle="collapse" data-target=".Illl, .O-2, .DIG-2">A</a>
</div>
</div>
<div class="card border-0 rounded-0 mx-1 overflow-hidden" style="background-color:#242c5f;">
<a href="#" class="p-2 px-sm-3 btn btn-sm btn-outline-danger rounded-0 text-reset" style="mix-blend-mode: luminosity;border-radius:0;border-width:1px 1px 2px;font-weight:500;" data-toggle="collapse" data-target=".II, .KBFAIL">S</a>
<div class="Illl collapse rounded" data-parent=".NEXT" style="background-color:#242c5f;position:absolute;top:0;left:0;bottom:0;right:0;transition:none 0s;">
<a href="#" class="p-2 px-sm-3 btn btn-sm btn-outline-danger rounded-0 text-reset" style="mix-blend-mode: luminosity;border-radius:0;border-width:1px 1px 2px;font-weight:500;" data-toggle="collapse" data-target=".Illll, .O-3, .DIG-3">S</a>
</div>
<div class="Illll collapse rounded" data-parent=".NEXT" style="background-color:#242c5f;position:absolute;top:0;left:0;bottom:0;right:0;transition:none 0s;">
<a href="#" class="p-2 px-sm-3 btn btn-sm btn-outline-danger rounded-0 text-reset" style="mix-blend-mode: luminosity;border-radius:0;border-width:1px 1px 2px;font-weight:500;" data-toggle="collapse" data-target=".Illlll, .O-4, .DIG4">S</a>
</div>
</div>
<div class="card border-0 rounded-0 overflow-hidden" style="background-color:#242c5f;">
<a href="#" class="p-2 px-sm-3 btn btn-sm btn-outline-danger rounded-0 text-reset" style="mix-blend-mode: luminosity;border-radius:0;border-width:1px 1px 2px;font-weight:500;" data-toggle="collapse" data-target=".II, .KBFAIL">D</a>
</div>
<div class="card border-0 rounded-0 mx-1 overflow-hidden" style="background-color:#242c5f;">
<a href="#" class="p-2 px-sm-3 btn btn-sm btn-outline-danger rounded-0 text-reset" style="mix-blend-mode: luminosity;border-radius:0;border-width:1px 1px 2px;font-weight:500;" data-toggle="collapse" data-target=".II, .KBFAIL">F</a>
</div>
<div class="card border-0 rounded-0 overflow-hidden" style="background-color:#242c5f;">
<a href="#" class="p-2 px-sm-3 btn btn-sm btn-outline-danger rounded-0 text-reset" style="mix-blend-mode: luminosity;border-radius:0;border-width:1px 1px 2px;font-weight:500;" data-toggle="collapse" data-target=".II, .KBFAIL">G</a>
</div>
<div class="card border-0 rounded-0 mx-1 overflow-hidden" style="background-color:#242c5f;">
<a href="#" class="p-2 px-sm-3 btn btn-sm btn-outline-danger rounded-0 text-reset" style="mix-blend-mode: luminosity;border-radius:0;border-width:1px 1px 2px;font-weight:500;" data-toggle="collapse" data-target=".II, .KBFAIL">H</a>
</div>
<div class="card border-0 rounded-0 overflow-hidden" style="background-color:#242c5f;">
<a href="#" class="p-2 px-sm-3 btn btn-sm btn-outline-danger rounded-0 text-reset" style="mix-blend-mode: luminosity;border-radius:0;border-width:1px 1px 2px;font-weight:500;" data-toggle="collapse" data-target=".II, .KBFAIL">J</a>
</div>
<div class="card border-0 rounded-0 mx-1 overflow-hidden" style="background-color:#242c5f;">
<a href="#" class="p-2 px-sm-3 btn btn-sm btn-outline-danger rounded-0 text-reset" style="mix-blend-mode: luminosity;border-radius:0;border-width:1px 1px 2px;font-weight:500;" data-toggle="collapse" data-target=".II, .KBFAIL">K</a>
</div>
<div class="card border-0 rounded-0 overflow-hidden" style="background-color:#242c5f;">
<a href="#" class="p-2 px-sm-3 btn btn-sm btn-outline-danger rounded-0 text-reset" style="mix-blend-mode: luminosity;border-radius:0;border-width:1px 1px 2px;font-weight:500;" data-toggle="collapse" data-target=".II, .KBFAIL">L</a>
</div>
</div>
<div class="row no-gutters mt-1 justify-content-center text-white">
<div class="card border-0 rounded-0 overflow-hidden" style="background-color:#242c5f;">
<a href="#" class="p-2 px-sm-3 btn btn-sm btn-outline-danger rounded-0 text-reset" style="mix-blend-mode: luminosity;border-radius:0;border-width:1px 1px 2px;font-weight:500;" data-toggle="collapse" data-target=".II, .KBFAIL">Z</a>
</div>
<div class="card border-0 rounded-0 mx-1 overflow-hidden" style="background-color:#242c5f;">
<a href="#" class="p-2 px-sm-3 btn btn-sm btn-outline-danger rounded-0 text-reset" style="mix-blend-mode: luminosity;border-radius:0;border-width:1px 1px 2px;font-weight:500;" data-toggle="collapse" data-target=".II, .KBFAIL">X</a>
</div>
<div class="card border-0 rounded-0 overflow-hidden" style="background-color:#242c5f;">
<a href="#" class="p-2 px-sm-3 btn btn-sm btn-outline-danger rounded-0 text-reset" style="mix-blend-mode: luminosity;border-radius:0;border-width:1px 1px 2px;font-weight:500;" data-toggle="collapse" data-target=".II, .KBFAIL">C</a>
</div>
<div class="card border-0 rounded-0 mx-1 overflow-hidden" style="background-color:#242c5f;">
<a href="#" class="p-2 px-sm-3 btn btn-sm btn-outline-danger rounded-0 text-reset" style="mix-blend-mode: luminosity;border-radius:0;border-width:1px 1px 2px;font-weight:500;" data-toggle="collapse" data-target=".II, .KBFAIL">V</a>
</div>
<div class="card border-0 rounded-0 overflow-hidden" style="background-color:#242c5f;">
<a href="#" class="p-2 px-sm-3 btn btn-sm btn-outline-danger rounded-0 text-reset" style="mix-blend-mode: luminosity;border-radius:0;border-width:1px 1px 2px;font-weight:500;" data-toggle="collapse" data-target=".II, .KBFAIL">B</a>
</div>
<div class="card border-0 rounded-0 mx-1 overflow-hidden" style="background-color:#242c5f;">
<a href="#" class="p-2 px-sm-3 btn btn-sm btn-outline-danger rounded-0 text-reset" style="mix-blend-mode: luminosity;border-radius:0;border-width:1px 1px 2px;font-weight:500;" data-toggle="collapse" data-target=".II, .KBFAIL">N</a>
</div>
<div class="card border-0 rounded-0 overflow-hidden" style="background-color:#242c5f;">
<a href="#" class="p-2 px-sm-3 btn btn-sm btn-outline-danger rounded-0 text-reset" style="mix-blend-mode: luminosity;border-radius:0;border-width:1px 1px 2px;font-weight:500;" data-toggle="collapse" data-target=".II, .KBFAIL">M</a>
</div>
</div>
<div class="card border-0 rounded-0 mt-1 mx-auto" style="background-color:#242c5f; width:50%">
<a href="#" class="w-100 py-3 btn btn-sm btn-outline-danger rounded-0 text-reset" style="mix-blend-mode: luminosity;border-radius:0;border-width:1px 1px 2px;" data-toggle="collapse" data-target=".II, .KBFAIL"></a>
</div>
<div class="II collapse" data-parent=".NEXT" style="visibility:hidden;position:absolute;top:0;left:0;transition:none 0s;">
</div>
</div>
<!--KBFAIL-->
<div class="KBFAIL RES collapse" data-parent=".KBKEYS" style="transition:none 0s;">
<div class="card text-white bg-dark" style="letter-spacing:4px;height:5rem;">
<div class="row no-gutters justify-content-center align-items-center" style="overflow:hidden auto;position:absolute;top:0;bottom:0;left:0;right:0;">
<i class="fas fa-xmark fa-2xl fa-beat-fade pr-2"></i>
<i class="fas fa-xmark fa-2xl fa-beat-fade pr-2"></i>
<i class="fas fa-xmark fa-2xl fa-beat-fade pr-2"></i>
<i class="fas fa-xmark fa-2xl fa-beat-fade"></i>
</div>
</div>
<div class="row no-gutters mt-1 justify-content-center text-white">
<div class="card border-0 rounded-0 overflow-hidden" style="background-color:#242c5f;">
<a href="#KBKEYS" class="p-2 px-sm-3 btn btn-sm btn-outline-danger rounded-0 text-reset" style="mix-blend-mode: luminosity;border-radius:0;border-width:1px 1px 2px;font-weight:500;">1</a>
</div>
<div class="card border-0 rounded-0 mx-1 overflow-hidden" style="background-color:#242c5f;">
<a href="#KBKEYS" class="p-2 px-sm-3 btn btn-sm btn-outline-danger rounded-0 text-reset" style="mix-blend-mode: luminosity;border-radius:0;border-width:1px 1px 2px;font-weight:500;">2</a>
</div>
<div class="card border-0 rounded-0 overflow-hidden" style="background-color:#242c5f;">
<a href="#KBKEYS" class="p-2 px-sm-3 btn btn-sm btn-outline-danger rounded-0 text-reset" style="mix-blend-mode: luminosity;border-radius:0;border-width:1px 1px 2px;font-weight:500;">3</a>
</div>
<div class="card border-0 rounded-0 mx-1 overflow-hidden" style="background-color:#242c5f;">
<a href="#KBKEYS" class="p-2 px-sm-3 btn btn-sm btn-outline-danger rounded-0 text-reset" style="mix-blend-mode: luminosity;border-radius:0;border-width:1px 1px 2px;font-weight:500;">4</a>
</div>
<div class="card border-0 rounded-0 overflow-hidden" style="background-color:#242c5f;">
<a href="#KBKEYS" class="p-2 px-sm-3 btn btn-sm btn-outline-danger rounded-0 text-reset" style="mix-blend-mode: luminosity;border-radius:0;border-width:1px 1px 2px;font-weight:500;">5</a>
</div>
<div class="card border-0 rounded-0 mx-1 overflow-hidden" style="background-color:#242c5f;">
<a href="#KBKEYS" class="p-2 px-sm-3 btn btn-sm btn-outline-danger rounded-0 text-reset" style="mix-blend-mode: luminosity;border-radius:0;border-width:1px 1px 2px;font-weight:500;">6</a>
</div>
<div class="card border-0 rounded-0 overflow-hidden" style="background-color:#242c5f;">
<a href="#KBKEYS" class="p-2 px-sm-3 btn btn-sm btn-outline-danger rounded-0 text-reset" style="mix-blend-mode: luminosity;border-radius:0;border-width:1px 1px 2px;font-weight:500;">7</a>
</div>
<div class="card border-0 rounded-0 mx-1 overflow-hidden" style="background-color:#242c5f;">
<a href="#KBKEYS" class="p-2 px-sm-3 btn btn-sm btn-outline-danger rounded-0 text-reset" style="mix-blend-mode: luminosity;border-radius:0;border-width:1px 1px 2px;font-weight:500;">8</a>
</div>
<div class="card border-0 rounded-0 overflow-hidden" style="background-color:#242c5f;">
<a href="#KBKEYS" class="p-2 px-sm-3 btn btn-sm btn-outline-danger rounded-0 text-reset" style="mix-blend-mode: luminosity;border-radius:0;border-width:1px 1px 2px;font-weight:500;">9</a>
</div>
<div class="card border-0 rounded-0 mx-1 overflow-hidden" style="background-color:#242c5f;">
<a href="#KBKEYS" class="p-2 px-sm-3 btn btn-sm btn-outline-danger rounded-0 text-reset" style="mix-blend-mode: luminosity;border-radius:0;border-width:1px 1px 2px;font-weight:500;">0</a>
</div>
<div class="card border-0 rounded-0 fa-beat-fade overflow-hidden" style="background-color:#242c5f;">
<a href="#KBKEYS" class="p-2 px-sm-3 btn btn-sm btn-outline-danger rounded-0 text-reset" style="mix-blend-mode: luminosity;border-radius:0;border-width:1px 1px 2px;font-weight:500;">-</a>
<div class="DIG-0 collapse show rounded" data-parent=".RES" style="background-color:#242c5f;position:absolute;top:0;left:0;bottom:0;right:0;transition:none 0s;">
<a href="#" class="p-2 px-sm-3 btn btn-sm btn-outline-danger rounded-0 text-reset" style="mix-blend-mode: luminosity;border-radius:0;border-width:1px 1px 2px;font-weight:500;" data-toggle="collapse" data-target=".KBSTART, .Il">-</a>
</div>
<div class="DIG-1 collapse rounded" data-parent=".RES" style="background-color:#242c5f;position:absolute;top:0;left:0;bottom:0;right:0;transition:none 0s;">
<a href="#" class="p-2 px-sm-3 btn btn-sm btn-outline-danger rounded-0 text-reset" style="mix-blend-mode: luminosity;border-radius:0;border-width:1px 1px 2px;font-weight:500;" data-toggle="collapse" data-target=".KBSTART, .Il, .O-1, .DIG-0">-</a>
</div>
<div class="DIG-2 collapse rounded" data-parent=".RES" style="background-color:#242c5f;position:absolute;top:0;left:0;bottom:0;right:0;transition:none 0s;">
<a href="#" class="p-2 px-sm-3 btn btn-sm btn-outline-danger rounded-0 text-reset" style="mix-blend-mode: luminosity;border-radius:0;border-width:1px 1px 2px;font-weight:500;" data-toggle="collapse" data-target=".KBSTART, .Il, .O-1, .O-2, .DIG-0">-</a>
</div>
<div class="DIG-3 collapse rounded" data-parent=".RES" style="background-color:#242c5f;position:absolute;top:0;left:0;bottom:0;right:0;transition:none 0s;">
<a href="#" class="p-2 px-sm-3 btn btn-sm btn-outline-danger rounded-0 text-reset" style="mix-blend-mode: luminosity;border-radius:0;border-width:1px 1px 2px;font-weight:500;" data-toggle="collapse" data-target=".KBSTART, .Il, .O-1, .O-2, .O-3, .DIG-0">-</a>
</div>
</div>
</div>
<div class="row no-gutters mt-1 justify-content-center text-white">
<div class="card border-0 rounded-0 overflow-hidden" style="background-color:#242c5f;">
<a href="#KBKEYS" class="p-2 px-sm-3 btn btn-sm btn-outline-danger rounded-0 text-reset" style="mix-blend-mode: luminosity;border-radius:0;border-width:1px 1px 2px;font-weight:500;">Q</a>
</div>
<div class="card border-0 rounded-0 mx-1 overflow-hidden" style="background-color:#242c5f;">
<a href="#KBKEYS" class="p-2 px-sm-3 btn btn-sm btn-outline-danger rounded-0 text-reset" style="mix-blend-mode: luminosity;border-radius:0;border-width:1px 1px 2px;font-weight:500;">W</a>
</div>
<div class="card border-0 rounded-0 overflow-hidden" style="background-color:#242c5f;">
<a href="#KBKEYS" class="p-2 px-sm-3 btn btn-sm btn-outline-danger rounded-0 text-reset" style="mix-blend-mode: luminosity;border-radius:0;border-width:1px 1px 2px;font-weight:500;">E</a>
</div>
<div class="card border-0 rounded-0 mx-1 overflow-hidden" style="background-color:#242c5f;">
<a href="#KBKEYS" class="p-2 px-sm-3 btn btn-sm btn-outline-danger rounded-0 text-reset" style="mix-blend-mode: luminosity;border-radius:0;border-width:1px 1px 2px;font-weight:500;">R</a>
</div>
<div class="card border-0 rounded-0 overflow-hidden" style="background-color:#242c5f;">
<a href="#KBKEYS" class="p-2 px-sm-3 btn btn-sm btn-outline-danger rounded-0 text-reset" style="mix-blend-mode: luminosity;border-radius:0;border-width:1px 1px 2px;font-weight:500;">T</a>
</div>
<div class="card border-0 rounded-0 mx-1 overflow-hidden" style="background-color:#242c5f;">
<a href="#KBKEYS" class="p-2 px-sm-3 btn btn-sm btn-outline-danger rounded-0 text-reset" style="mix-blend-mode: luminosity;border-radius:0;border-width:1px 1px 2px;font-weight:500;">Y</a>
</div>
<div class="card border-0 rounded-0 overflow-hidden" style="background-color:#242c5f;">
<a href="#KBKEYS" class="p-2 px-sm-3 btn btn-sm btn-outline-danger rounded-0 text-reset" style="mix-blend-mode: luminosity;border-radius:0;border-width:1px 1px 2px;font-weight:500;">U</a>
</div>
<div class="card border-0 rounded-0 mx-1 overflow-hidden" style="background-color:#242c5f;">
<a href="#KBKEYS" class="p-2 px-sm-3 btn btn-sm btn-outline-danger rounded-0 text-reset" style="mix-blend-mode: luminosity;border-radius:0;border-width:1px 1px 2px;font-weight:500;">I</a>
</div>
<div class="card border-0 rounded-0 overflow-hidden" style="background-color:#242c5f;">
<a href="#KBKEYS" class="p-2 px-sm-3 btn btn-sm btn-outline-danger rounded-0 text-reset" style="mix-blend-mode: luminosity;border-radius:0;border-width:1px 1px 2px;font-weight:500;">O</a>
</div>
<div class="card border-0 rounded-0 ml-1 overflow-hidden" style="background-color:#242c5f;">
<a href="#KBKEYS" class="p-2 px-sm-3 btn btn-sm btn-outline-danger rounded-0 text-reset" style="mix-blend-mode: luminosity;border-radius:0;border-width:1px 1px 2px;font-weight:500;">P</a>
</div>
</div>
<div class="row no-gutters mt-1 justify-content-center text-white">
<div class="card border-0 rounded-0 overflow-hidden" style="background-color:#242c5f;">
<a href="#KBKEYS" class="p-2 px-sm-3 btn btn-sm btn-outline-danger rounded-0 text-reset" style="mix-blend-mode: luminosity;border-radius:0;border-width:1px 1px 2px;font-weight:500;">A</a>
</div>
<div class="card border-0 rounded-0 mx-1 overflow-hidden" style="background-color:#242c5f;">
<a href="#KBKEYS" class="p-2 px-sm-3 btn btn-sm btn-outline-danger rounded-0 text-reset" style="mix-blend-mode: luminosity;border-radius:0;border-width:1px 1px 2px;font-weight:500;">S</a>
</div>
<div class="card border-0 rounded-0 overflow-hidden" style="background-color:#242c5f;">
<a href="#KBKEYS" class="p-2 px-sm-3 btn btn-sm btn-outline-danger rounded-0 text-reset" style="mix-blend-mode: luminosity;border-radius:0;border-width:1px 1px 2px;font-weight:500;">D</a>
</div>
<div class="card border-0 rounded-0 mx-1 overflow-hidden" style="background-color:#242c5f;">
<a href="#KBKEYS" class="p-2 px-sm-3 btn btn-sm btn-outline-danger rounded-0 text-reset" style="mix-blend-mode: luminosity;border-radius:0;border-width:1px 1px 2px;font-weight:500;">F</a>
</div>
<div class="card border-0 rounded-0 overflow-hidden" style="background-color:#242c5f;">
<a href="#KBKEYS" class="p-2 px-sm-3 btn btn-sm btn-outline-danger rounded-0 text-reset" style="mix-blend-mode: luminosity;border-radius:0;border-width:1px 1px 2px;font-weight:500;">G</a>
</div>
<div class="card border-0 rounded-0 mx-1 overflow-hidden" style="background-color:#242c5f;">
<a href="#KBKEYS" class="p-2 px-sm-3 btn btn-sm btn-outline-danger rounded-0 text-reset" style="mix-blend-mode: luminosity;border-radius:0;border-width:1px 1px 2px;font-weight:500;">H</a>
</div>
<div class="card border-0 rounded-0 overflow-hidden" style="background-color:#242c5f;">
<a href="#KBKEYS" class="p-2 px-sm-3 btn btn-sm btn-outline-danger rounded-0 text-reset" style="mix-blend-mode: luminosity;border-radius:0;border-width:1px 1px 2px;font-weight:500;">J</a>
</div>
<div class="card border-0 rounded-0 mx-1 overflow-hidden" style="background-color:#242c5f;">
<a href="#KBKEYS" class="p-2 px-sm-3 btn btn-sm btn-outline-danger rounded-0 text-reset" style="mix-blend-mode: luminosity;border-radius:0;border-width:1px 1px 2px;font-weight:500;">K</a>
</div>
<div class="card border-0 rounded-0 overflow-hidden" style="background-color:#242c5f;">
<a href="#KBKEYS" class="p-2 px-sm-3 btn btn-sm btn-outline-danger rounded-0 text-reset" style="mix-blend-mode: luminosity;border-radius:0;border-width:1px 1px 2px;font-weight:500;">L</a>
</div>
</div>
<div class="row no-gutters mt-1 justify-content-center text-white">
<div class="card border-0 rounded-0 overflow-hidden" style="background-color:#242c5f;">
<a href="#KBKEYS" class="p-2 px-sm-3 btn btn-sm btn-outline-danger rounded-0 text-reset" style="mix-blend-mode: luminosity;border-radius:0;border-width:1px 1px 2px;font-weight:500;">Z</a>
</div>
<div class="card border-0 rounded-0 mx-1 overflow-hidden" style="background-color:#242c5f;">
<a href="#KBKEYS" class="p-2 px-sm-3 btn btn-sm btn-outline-danger rounded-0 text-reset" style="mix-blend-mode: luminosity;border-radius:0;border-width:1px 1px 2px;font-weight:500;">X</a>
</div>
<div class="card border-0 rounded-0 overflow-hidden" style="background-color:#242c5f;">
<a href="#KBKEYS" class="p-2 px-sm-3 btn btn-sm btn-outline-danger rounded-0 text-reset" style="mix-blend-mode: luminosity;border-radius:0;border-width:1px 1px 2px;font-weight:500;">C</a>
</div>
<div class="card border-0 rounded-0 mx-1 overflow-hidden" style="background-color:#242c5f;">
<a href="#KBKEYS" class="p-2 px-sm-3 btn btn-sm btn-outline-danger rounded-0 text-reset" style="mix-blend-mode: luminosity;border-radius:0;border-width:1px 1px 2px;font-weight:500;">V</a>
</div>
<div class="card border-0 rounded-0 overflow-hidden" style="background-color:#242c5f;">
<a href="#KBKEYS" class="p-2 px-sm-3 btn btn-sm btn-outline-danger rounded-0 text-reset" style="mix-blend-mode: luminosity;border-radius:0;border-width:1px 1px 2px;font-weight:500;">B</a>
</div>
<div class="card border-0 rounded-0 mx-1 overflow-hidden" style="background-color:#242c5f;">
<a href="#KBKEYS" class="p-2 px-sm-3 btn btn-sm btn-outline-danger rounded-0 text-reset" style="mix-blend-mode: luminosity;border-radius:0;border-width:1px 1px 2px;font-weight:500;">N</a>
</div>
<div class="card border-0 rounded-0 overflow-hidden" style="background-color:#242c5f;">
<a href="#KBKEYS" class="p-2 px-sm-3 btn btn-sm btn-outline-danger rounded-0 text-reset" style="mix-blend-mode: luminosity;border-radius:0;border-width:1px 1px 2px;font-weight:500;">M</a>
</div>
</div>
<div class="card border-0 rounded-0 mt-1 mx-auto" style="background-color:#242c5f; width:50%">
<a href="#KBKEYS" class="w-100 py-3 btn btn-sm btn-outline-danger rounded-0 text-reset" style="mix-blend-mode: luminosity;border-radius:0;border-width:1px 1px 2px;"></a>
</div>
</div>
<!---->
</div>
<!--END KEYBOARD-->Chatty Pagedoll
UPDATED: just a little better lookin.
- Hides itself on small windows + mobile
- Each phrase can have its own set time held, edit data-interval="" to change the hold-time. (1000 = 1sec)
- Move the tick-mark by changing left:70px. (If you want it favoring the right, I recommend changing it to right: and changing the px, instead of just adding a bunch of px to left:)
NameHere
<div class="hidden-sm-down text-center" style="z-index:99;position:fixed;bottom:0;right:0;">
<div class="card border-0 rounded-0 bg-transparent mx-auto px-sm-2 mb-1" style="min-width:300px;max-width:400px;">
<div class="card rounded-0 text-white px-3 flex-row align-items-center" style="border-radius:30px;background:#242c5f;border-bottom-width:2px;border-right-width:2px;z-index:5;position:absolute;margin-top:-0.75rem;margin-left:25px;font-size:1rem;"><i class="fas fa-heart pr-2"></i>NameHere</div>
<div class="card rounded-0" style="position:absolute;bottom:-17px;left:70px;border-width:2px 0 0 2px;border-style:solid;transform:rotate(-135deg);height:35px;width:35px;z-index:2;"></div>
<div class="card rounded-0 overflow-hidden justify-content-center w-100" style="min-height:5.5rem;border-radius:30px;border-width:2px;">
<div class="p-3 card border-0 rounded-0" style="overflow-y:auto;z-index:3;">
<div id="PagedollCarousel1" class="carousel slide" data-ride="carousel">
<div class="carousel-inner text-center">
<div class="carousel-item active" style="transition:none 0s;" data-interval="5000"> "HELLO, this is a pagedoll."</div>
<div class="carousel-item" style="transition:none 0s;" data-interval="5000"> ... </div>
<div class="carousel-item" style="transition:none 0s;" data-interval="5000"> "It uses a carousel to talk." </div>
<div class="carousel-item" style="transition:none 0s;" data-interval="1600"> . </div>
<div class="carousel-item" style="transition:none 0s;" data-interval="1600"> . . </div>
<div class="carousel-item" style="transition:none 0s;" data-interval="3200"> . . . </div>
<div class="carousel-item" style="transition:none 0s;" data-interval="10000"> "That is all." :) </div>
</div>
</div>
</div>
</div>
</div>
<img style="max-width:200px;" src="https://f2.toyhou.se/file/f2-toyhou-se/characters/20943192?1680653404">
</div>Recent Images
No images.