squish
created by:peachiibon
Mixed ColorsHTMLCharacter
Copy
<!--
[ 08 | SQUISH ]
turn OFF WYSIWYG
turn ON code editor
use chevrons on the side to stay organized
<- over here
DO NOT REMOVE CREDIT
~ RESOURCES ~
♡ free live code editor : https://th.circlejourney.net/
♡ coding help forum : https://toyhou.se/~forums/16.htmlcss-graphics/48845.-help-thread-ask-your-questions-here-
♡ how to edit icons : https://toyhou.se/3536712.
♡ coding resources : https://toyhou.se/Elithian/characters/folder:881832
~ COLORS ~
♡ accent : #555
♡ text on accent : #fff
use ctrl+f to quickly change colors
-->
<div class="mx-auto" style="max-width: 250px; font-family: courier new; font-size: 10.5px; line-height: 12px;">
<div class="row no-gutters">
<!-- IMAGE ============= -->
<div class="col-8 card border-0" style="background: url(IMG_URL_HERE) center no-repeat; background-size: cover; height: 120px; border-radius: 25px 0 0 0;"></div>
<!-- END IMAGE ========= -->
<!-- NAV =============== -->
<div class="col-4 card border-0 overflow-hidden p-2" style="background: #555; border-radius: 0 25px 0 0; font-size: 15px;">
<ul class="nav nav-pills h-100 flex-column">
<li class="nav-item w-100 h-100">
<a href="#one" data-toggle="tab" class="nav-link active w-100 h-100 align-items-center justify-content-center bg-transparent" style="border-radius: 0; box-shadow: none; color: #fff;">
<i class="fa-duotone fa-comet fa-fw"></i>
</a>
</li>
<li class="nav-item w-100 h-100">
<a href="#two" data-toggle="tab" class="nav-link w-100 h-100 align-items-center justify-content-center bg-transparent" style="border-radius: 0; box-shadow: none; color: #fff;">
<i class="fa-duotone fa-book-open fa-fw"></i>
</a>
</li>
<li class="nav-item w-100 h-100">
<a href="#thr" data-toggle="tab" class="nav-link w-100 h-100 align-items-center justify-content-center bg-transparent" style="border-radius: 0; box-shadow: none; color: #fff;">
<i class="fa-duotone fa-heartbeat fa-fw"></i>
</a>
</li>
</ul>
</div>
<!-- END NAV =========== -->
<!-- QUOTE/MUSIC ======= -->
<div class="col-6 card border-0 text-center align-items-center justify-content-center p-3" style="background: #555; color: #fff; border-radius: 0 0 0 25px;">
<!-- SONG =============
- replace 'rmRHecZZGvs' with the last line of numbers/letters of your youtube link
- KEEP the /embed/ or it won't work
======================= -->
<iframe
class="flex-fill m-n1"
style="opacity: 0.00001; position: absolute; z-index: 1; height: 120px; width: 120px;"
frameborder="0"
allow="accelerometer; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
src="
https://www.youtube.com/embed/rmRHecZZGvs
"
></iframe>
<!-- LYRIC // <br> is a line break -->
<div class="font-italic">
We're living in this
<br />
universe
<br />
right now!
</div>
<!-- ICON -->
<i class="fa-solid fa-music" style="position: absolute; font-size: 50px; opacity: 0.2;"></i>
</div>
<!-- END QUOTE/MUSIC === -->
<!-- CONTENT =========== -->
<div class="col-6 card border-0 bg-faded p-2" style="border-radius: 0 0 25px 0; height: 120px; overflow: auto; scrollbar-width: none;">
<div class="tab-content h-100">
<!-- PAGE 01 ====== -->
<div id="one" class="tab-pane fade h-100 active show">
<div class="h-100 flex-column">
<div class="justify-content-between align-items-center">
<span><i class="fa-light fa-user fa-fw" style="color: #555;"></i></span>
<span>Name Surname</span>
</div>
<div class="h-100"><hr class="m-0"></div>
<div class="justify-content-between align-items-center">
<span><i class="fa-light fa-clock fa-fw" style="color: #555;"></i></span>
<span>Age</span>
</div>
<div class="h-100"><hr class="m-0"></div>
<div class="justify-content-between align-items-center">
<span><i class="fa-light fa-venus-mars fa-fw" style="color: #555;"></i></span>
<span>Gender</span>
</div>
<div class="h-100"><hr class="m-0"></div>
<div class="justify-content-between align-items-center">
<span><i class="fa-light fa-comments fa-fw" style="color: #555;"></i></span>
<span>Pro/noun</span>
</div>
<div class="h-100"><hr class="m-0"></div>
<div class="justify-content-between align-items-center">
<span><i class="fa-light fa-heart fa-fw" style="color: #555;"></i></span>
<span>Sexuality</span>
</div>
<div class="h-100"><hr class="m-0"></div>
<div class="justify-content-between align-items-center">
<span><i class="fa-light fa-briefcase fa-fw" style="color: #555;"></i></span>
<span>Occupation</span>
</div>
</div>
</div>
<!-- END PAGE 01 == -->
<!-- PAGE 02 ====== -->
<div id="two" class="tab-pane fade text-justify">
<!-- HEADER =========== -->
<div class="text-uppercase" style="color: #555;">
<i class="fa-light fa-bookmark"></i> Background
</div>
<!-- DIVIDER ========== -->
<hr class="my-1">
<!-- BACKGROUND ======= -->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
</p>
<!-- END BACKGROUND === -->
</div>
<!-- END PAGE 02 == -->
<!-- PAGE 03 ====== -->
<div id="thr" class="tab-pane fade">
<div class="row no-gutters">
<!-- CHAR 01 ====== -->
<div class="col-6" style="padding: 2px;">
<a href="CHAR_URL" class="tooltipster" title="Character Name">
<img src="IMG_URL_HERE" class="w-100" style="height: 50px; object-fit: cover; border-radius: 10px;">
</a>
</div>
<!-- END CHAR 01 == -->
<!-- CHAR 02 ====== -->
<div class="col-6" style="padding: 2px;">
<a href="CHAR_URL" class="tooltipster" title="Character Name">
<img src="IMG_URL_HERE" class="w-100" style="height: 50px; object-fit: cover; border-radius: 10px;">
</a>
</div>
<!-- END CHAR 02 == -->
<!-- CHAR 03 ====== -->
<div class="col-6" style="padding: 2px;">
<a href="CHAR_URL" class="tooltipster" title="Character Name">
<img src="IMG_URL_HERE" class="w-100" style="height: 50px; object-fit: cover; border-radius: 10px;">
</a>
</div>
<!-- END CHAR 03 == -->
<!-- CHAR 04 ====== -->
<div class="col-6" style="padding: 2px;">
<a href="CHAR_URL" class="tooltipster" title="Character Name">
<img src="IMG_URL_HERE" class="w-100" style="height: 50px; object-fit: cover; border-radius: 10px;">
</a>
</div>
<!-- END CHAR 04 == -->
<!-- ADD MORE ABOVE HERE // BOX WILL SCROLL -->
</div>
</div>
<!-- END PAGE 03 == -->
</div>
</div>
<!-- END CONTENT ======= -->
</div>
<!-- CREDITS // DO NOT REMOVE -->
<div class="text-center mt-1">
<!-- IMAGE CREDIT -->
<a href="URL_HERE" class="tooltipster text-muted" title="image credits">
<i class="fa-light fa-image"></i>
</a>
<!-- CODE CREDIT -->
<a href="https://toyhou.se/13780652.08-squish" class="tooltipster text-muted" title="code by venus">
<i class="fa-light fa-heart"></i>
</a>
</div>
</div>