flip
created by:peachiibon
Custom ColorsHTMLCharacter
Copy
<!-- ===================================
[ 24 | FLIP ]
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 ~
♡ text & dark bg : #000
♡ background : #eee
♡ accent : #555
use ctrl+f to quickly change colors
FOR THE PATTERNED BACKGROUNDS:
if the background color is lighter and the pattern isnt showing,
CTRL+F the image url with [https://www.transparenttextures.com/patterns/black-thread.png]
==================================== -->
<div class="mx-auto text-justify p-3" style="max-width: 700px; font-family: georgia; color: #000; font-size: 12px; line-height: 15px;">
<div class="row no-gutters justify-content-center">
<!-- LEFT CARD ========== -->
<div class="col-lg-4 col-7 mt-2 order-2 order-lg-1" style="transform: rotate(3deg); height: 309px;">
<!-- FRONT ============= -->
<div class="flip collapse fade show h-100">
<div class="p-1 overflow-hidden h-100" style="background: #eee; border-radius: 15px; box-shadow: -2px 2px 10px rgba(0,0,0,0.5);">
<div class="p-2 h-100" style="border-radius: 15px;">
<div class="h-100 flex-column align-items-center">
<!-- NAME BANNER ================= -->
<div class="px-5 pt-1 pb-3 text-center font-weight-bold" style="background-color: #000; background-image: url(https://www.transparenttextures.com/patterns/black-thread-light.png); clip-path:polygon(10% 0,10% 15%,0 15%,5% 52%,0 100%,17% 100%,17% 80%,83% 80%,83% 100%,100% 100%,97% 52%,100% 15%,90% 15%,90% 0); font-variant: small-caps; line-height: 15px; letter-spacing: 2px; font-size: 15px; color: #eee;">
<span style="color: #555;">N</span>ame
<span style="color: #555;">S</span>urname
</div>
<!-- END NAME BANNER ============= -->
<!-- TOP DECORATION ============== -->
<div class="border-bottom-0" style="background: #eee; border: 2px solid #000; height: 15px; width: 120px; margin-bottom: -3px; z-index: 1"></div>
<!-- END TOP DECORATION ========== -->
<!-- TEXT BOX ==================== -->
<div class="h-100 w-100 overflow-auto p-2" style="border: 2px solid #000; border-radius: 0 0 15px 15px;">
<div class="h-100 flex-column">
<!-- TITLE / if you change it, keep it small -->
<div class="font-weight-bold text-center mt-n2" style="font-variant: small-caps; font-size: 15px;">
<span style="color: #555;">I</span>ntro
</div>
<!-- DIVIDER -->
<div><hr class="my-1" style="border-top: 2px solid #555;"></div>
<!-- WRITTEN INTRO -->
<div class="h-100 overflow-auto" style="scrollbar-width: none;">
<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.
</p>
<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>
</div>
<!-- END WRITTEN INTRO -->
<!-- DIVIDER -->
<div><hr class="my-1" style="border-top: 2px solid #555;"></div>
<!-- TRIVIA -->
<div class="row no-gutters mb-1">
<div class="col">
<!-- HEADER -->
<div class="font-weight-bold" style="font-variant: small-caps;"><span style="color: #555;">L</span>ikes</div>
<ul class="pl-3 m-0" style="list-style-type: square;">
<!-- LIKES -->
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</div>
<div class="col-auto mx-1" style="border-right: 2px solid #555;"></div>
<div class="col">
<!-- HEADER -->
<div class="font-weight-bold" style="font-variant: small-caps;"><span style="color: #555;">D</span>islikes</div>
<ul class="pl-3 m-0" style="list-style-type: square;">
<!-- DISLIKES -->
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</div>
</div>
</div>
</div>
<!-- END TEXT BOX ================ -->
<!-- BOTTOM DECORATION =========== -->
<div class="text-center card border-0 mb-n1" style="background: #eee; width: 60px; margin-top: -10px;">
<p style="color: #555;">
<i class="fa-solid fa-bracket-round" style="color: #000;"></i>
<i class="fa-brands fa-pagelines fa-flip-horizontal faded"></i>
<i class="fa-regular fa-spa fa-fw fa-lg"></i>
<i class="fa-brands fa-pagelines faded"></i>
<i class="fa-solid fa-bracket-round fa-flip-horizontal" style="color: #000"></i>
</p>
</div>
<!-- END BOTTOM DECORATION ======= -->
</div>
</div>
</div>
</div>
<!-- END FRONT ========= -->
<!-- BACK ============== -->
<div class="flip collapse fade h-100">
<div class="p-1 overflow-hidden h-100" style="background: #eee; border-radius: 15px; box-shadow: -2px 2px 10px rgba(0,0,0,0.5);">
<div class="p-2 h-100" style="border-radius: 15px;">
<div class="h-100 flex-column align-items-center">
<!-- TITLE BANNER ================ -->
<div class="px-5 pt-1 pb-3 text-center font-weight-bold" style="background-color: #000; background-image: url(https://www.transparenttextures.com/patterns/black-thread-light.png); clip-path:polygon(10% 0,10% 15%,0 15%,5% 52%,0 100%,17% 100%,17% 80%,83% 80%,83% 100%,100% 100%,97% 52%,100% 15%,90% 15%,90% 0); font-variant: small-caps; line-height: 15px; letter-spacing: 2px; font-size: 15px; color: #eee;">
<span style="color: #555;">T</span>he
<span style="color: #555;">T</span>itle
<span style="color: #555;">E</span>ver
</div>
<!-- END TITLE BANNER ============ -->
<!-- TOP DECORATION ============== -->
<div class="border-bottom-0" style="background: #eee; border: 2px solid #000; height: 15px; width: 120px; margin-bottom: -3px; z-index: 1"></div>
<!-- END TOP DECORATION ========== -->
<!-- TEXT BOX ==================== -->
<div class="h-100 w-100 overflow-auto p-2" style="border: 2px solid #000; border-radius: 0 0 15px 15px;">
<div class="h-100 flex-column">
<!-- TITLE / if you change it, keep it small -->
<div class="font-weight-bold text-center mt-n2" style="font-variant: small-caps; font-size: 15px;">
<span style="color: #555;">B</span>ackground
</div>
<!-- DIVIDER -->
<div><hr class="my-1" style="border-top: 2px solid #555;"></div>
<!-- WRITTEN BACKGROUND -->
<div class="h-100 overflow-auto my-1" style="scrollbar-width: none;">
<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.
</p>
<!-- SUBHEADER -->
<div class="font-weight-bold" style="font-variant: small-caps;">
<span style="color: #555;">H</span>eader
</div>
<!-- DIVIDER -->
<hr class="my-1" style="border-top: 2px solid #555;">
<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>
</div>
<!-- END WRITTEN INTRO -->
</div>
</div>
<!-- END TEXT BOX ================ -->
<!-- BOTTOM DECORATION =========== -->
<div class="text-center card border-0 mb-n1" style="background: #eee; width: 60px; margin-top: -10px;">
<p style="color: #555;">
<i class="fa-solid fa-bracket-round" style="color: #000;"></i>
<i class="fa-brands fa-pagelines fa-flip-horizontal faded"></i>
<i class="fa-regular fa-book-open fa-fw fa-lg"></i>
<i class="fa-brands fa-pagelines faded"></i>
<i class="fa-solid fa-bracket-round fa-flip-horizontal" style="color: #000"></i>
</p>
</div>
<!-- END BOTTOM DECORATION ======= -->
</div>
</div>
</div>
</div>
<!-- END FRONT ========= -->
</div>
<!-- END LEFT CARD ====== -->
<!-- MIDDLE CARD ========== -->
<div class="col-lg-4 col-7 mx-n2 order-1 order-lg-2" style="z-index: 1;">
<!-- FRONT ============= -->
<div class="flip collapse show fade">
<div class="p-2 overflow-hidden" style="background: #eee; border-radius: 15px; box-shadow: 0 2px 10px rgba(0,0,0,0.5);">
<!-- BUTTON ======== -->
<a data-target=".flip" data-toggle="collapse" class="btn btn-outline-warning h-100 w-100 m-n2 border-0" style="position: absolute; z-index: 10; border-radius: 15px; box-shadow: none; mix-blend-mode: screen; opacity: 0.1; cursor: pointer;"></a>
<!-- END BUTTON ==== -->
<div class="p-2" style="background-color: #000; background-image: url(https://www.transparenttextures.com/patterns/black-thread-light.png); border-radius: 15px;">
<div style="border: 2px solid #555; border-radius: 15px;">
<div class="pt-4 justify-content-center" style="border-radius: 60px; border: 4px double #555; margin-bottom: -23px;">
<!-- ICON CIRCLE ========= -->
<div class="p-1" style="background: #eee; border-radius: 50%; position: absolute; top: 6px;">
<div class="p-1 align-items-center justify-content-center" style="border-radius: 50%; border: 2px solid #555; height: 35px; width: 35px; color: #555;">
<!-- ICON -->
<i class="fa-regular fa-star"></i>
</div>
</div>
<!-- END ICON CIRCLE ===== -->
<div class="card border-0 mx-n3 p-2 align-items-center" style="background: #eee; border-radius: 200px 200px 0 0; height: 280px;">
<div class="p-1" style="border: 3px solid #555; border-radius: 50%; height: 210px; width: 210px;">
<div class="h-100 w-100 p-3" style="border: 2px solid #555; border-radius: 50%;">
<div class="h-100 w-100" style="border: 4px double #555; border-radius: 50%;">
<!-- IMAGE ================
to edit positioning, edit the "top" number
=========================== -->
<div class="w-100" style="background: url(URL_HERE) center no-repeat; background-size: cover; height: 320px; position: absolute; left: 0;
top: -20px;
"></div>
<!-- END IMAGE =========== -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- END FRONT ========= -->
<!-- BACK ============== -->
<div class="flip collapse fade">
<div class="p-2 overflow-hidden" style="background: #eee; border-radius: 15px; box-shadow: 0px 2px 10px rgba(0,0,0,0.5);">
<!-- BUTTON ======== -->
<a data-target=".flip" data-toggle="collapse" class="btn btn-outline-warning h-100 w-100 m-n2 border-0" style="position: absolute; z-index: 10; border-radius: 15px; box-shadow: none; mix-blend-mode: screen; opacity: 0.1; cursor: pointer;"></a>
<!-- END BUTTON ==== -->
<div class="p-2" style="background-color: #000; background-image: url(https://www.transparenttextures.com/patterns/black-thread-light.png); border-radius: 15px;">
<div style="border: 2px solid #555; border-radius: 15px;">
<div class="pt-4 justify-content-center" style="border-radius: 60px; border: 4px double #555; margin-bottom: -23px;">
<!-- ICON CIRCLE ========= -->
<div class="p-1" style="background: #eee; border-radius: 50%; position: absolute; top: 6px;">
<div class="p-1 align-items-center justify-content-center" style="border-radius: 50%; border: 2px solid #555; height: 35px; width: 35px; color: #555;">
<!-- ICON -->
<i class="fa-regular fa-star"></i>
</div>
</div>
<!-- END ICON CIRCLE ===== -->
<div class="card border-0 mx-n3 p-2 align-items-center" style="background: #eee; border-radius: 200px 200px 0 0; height: 280px;">
<div class="p-1" style="border: 3px solid #555; border-radius: 50%; height: 210px; width: 210px;">
<div class="h-100 w-100 p-3" style="border: 2px solid #555; border-radius: 50%;">
<div class="h-100 w-100" style="border: 4px double #555; border-radius: 50%;">
<!-- IMAGE ================
to edit positioning, edit the "top" number
=========================== -->
<div class="w-100" style="background: url(URL_HERE) center no-repeat; background-size: cover; height: 320px; position: absolute; left: 0;
top: -20px;
"></div>
<!-- END IMAGE =========== -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- END BACK ========== -->
</div>
<!-- END MIDDLE CARD ====== -->
<!-- RIGHT CARD ========== -->
<div class="col-lg-4 col-7 mt-2 order-3" style="transform: rotate(-3deg); height: 309px;">
<!-- FRONT ============= -->
<div class="flip collapse fade show h-100">
<div class="p-1 overflow-hidden h-100" style="background: #eee; border-radius: 15px; box-shadow: 2px 2px 10px rgba(0,0,0,0.5);">
<div class="p-2 h-100" style="border-radius: 15px; height: 310px;">
<div class="h-100 flex-column">
<!-- HEADER ====================== -->
<div class="p-2 text-center font-weight-bold" style="background-color: #000; background-image: url(https://www.transparenttextures.com/patterns/black-thread-light.png); font-variant: small-caps; line-height: 15px; letter-spacing: 2px; font-size: 15px; color: #eee; border-radius: 15px 15px 0 0;">
<span style="color: #555;">B</span>asic
<span style="color: #555;">I</span>nfo
</div>
<!-- END HEADER ================== -->
<!-- CONTENT BOX ================= -->
<div class="h-100 overflow-auto my-2" style="scrollbar-width: none;">
<div class="h-100 flex-column">
<!-- ITEM ====== -->
<div class="row no-gutters">
<div class="col-auto p-1 font-weight-bold mr-1 align-items-center" style="background: #555; font-variant: small-caps; color: #eee;">Name</div>
<div class="col p-1" style="border: 2px solid #555;">Content</div>
</div>
<!-- END ITEM == -->
<div class="h-100"></div>
<!-- ITEM ====== -->
<div class="row no-gutters">
<div class="col-auto p-1 font-weight-bold mr-1 align-items-center" style="background: #555; font-variant: small-caps; color: #eee;">Age</div>
<div class="col p-1" style="border: 2px solid #555;">Content</div>
</div>
<!-- END ITEM == -->
<div class="h-100"></div>
<!-- ITEM ====== -->
<div class="row no-gutters">
<div class="col-auto p-1 font-weight-bold mr-1 align-items-center" style="background: #555; font-variant: small-caps; color: #eee;">Birthday</div>
<div class="col p-1" style="border: 2px solid #555;">Content</div>
</div>
<!-- END ITEM == -->
<div class="h-100"></div>
<!-- ITEM ====== -->
<div class="row no-gutters">
<div class="col-auto p-1 font-weight-bold mr-1 align-items-center" style="background: #555; font-variant: small-caps; color: #eee;">Gender</div>
<div class="col p-1" style="border: 2px solid #555;">Content <small>(pro/nouns)</small></div>
</div>
<!-- END ITEM == -->
<div class="h-100"></div>
<!-- ITEM ====== -->
<div class="row no-gutters">
<div class="col-auto p-1 font-weight-bold mr-1 align-items-center" style="background: #555; font-variant: small-caps; color: #eee;">Sexuality</div>
<div class="col p-1" style="border: 2px solid #555;">Content</div>
</div>
<!-- END ITEM == -->
<div class="h-100"></div>
<!-- ITEM ====== -->
<div class="row no-gutters">
<div class="col-auto p-1 font-weight-bold mr-1 align-items-center" style="background: #555; font-variant: small-caps; color: #eee;">Home</div>
<div class="col p-1" style="border: 2px solid #555;">Content</div>
</div>
<!-- END ITEM == -->
<div class="h-100"></div>
<!-- ITEM ====== -->
<div class="row no-gutters">
<div class="col-auto p-1 font-weight-bold mr-1 align-items-center" style="background: #555; font-variant: small-caps; color: #eee;">Song</div>
<div class="col p-1" style="border: 2px solid #555;">
<!-- SONG =============
- replace 'diDsFjpV8yw' 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: 24px; width: 20px;" frameborder="0" allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen src="
https://www.youtube.com/embed/diDsFjpV8yw
"></iframe>
<!-- ICON -->
<i class="fa-solid fa-play fa-fade fa-fw" style="color: #555"></i>
Song Name <small>Artist</small>
</div>
</div>
<!-- END ITEM == -->
</div>
</div>
<!-- END CONTENT BOX ============= -->
<!-- FOOTER ====================== -->
<div class="text-center font-weight-bold" style="background-color: #000; background-image: url(https://www.transparenttextures.com/patterns/black-thread-light.png); font-variant: small-caps; line-height: 15px; letter-spacing: 2px; font-size: 15px; color: #eee; border-radius: 0 0 15px 15px;height: 30px;"></div>
<!-- END FOOTER ================== -->
</div>
</div>
</div>
</div>
<!-- END FRONT ========= -->
<!-- BACK ============== -->
<div class="flip collapse fade h-100">
<div class="p-1 overflow-hidden h-100" style="background: #eee; border-radius: 15px; box-shadow: 2px 2px 10px rgba(0,0,0,0.5);">
<div class="p-2 h-100" style="border-radius: 15px; height: 310px;">
<div class="h-100 flex-column">
<!-- HEADER ====================== -->
<div class="p-2 text-center font-weight-bold" style="background-color: #000; background-image: url(https://www.transparenttextures.com/patterns/black-thread-light.png); font-variant: small-caps; line-height: 15px; letter-spacing: 2px; font-size: 15px; color: #eee; border-radius: 15px 15px 0 0;">
<span style="color: #555;">R</span>elationships
</div>
<!-- END HEADER ================== -->
<!-- CONTENT BOX ================= -->
<div class="h-100 overflow-auto my-2" style="scrollbar-width: none;">
<!-- CHARACTER 01 ======== -->
<div class="row no-gutters p-1" style="border: 2px solid #555;">
<!-- IMAGE -->
<div class="col-auto" style="background: url(URL_HERE) center no-repeat; background-size: cover; height: 65px; width: 65px;"></div>
<div class="col-auto mx-1" style="border-right: 2px solid #555;"></div>
<div class="col h-100">
<a href="LINK_HERE" class=" font-weight-bold" style="color: #555;">
Name Surname
</a>
<div style="height: 50px; overflow: auto; font-size: 10px; scrollbar-width: none; line-height: 10px;">
<!-- WRITTEN RELATIONSHIP -->
<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>
</div>
</div>
</div>
<!-- END CHARACTER 01 ==== -->
<!-- SPACER ============== -->
<hr class="my-1" style="opacity: 0;">
<!-- CHARACTER 02 ======== -->
<div class="row no-gutters p-1" style="border: 2px solid #555;">
<!-- IMAGE -->
<div class="col-auto" style="background: url(URL_HERE) center no-repeat; background-size: cover; height: 65px; width: 65px;"></div>
<div class="col-auto mx-1" style="border-right: 2px solid #555;"></div>
<div class="col h-100">
<a href="LINK_HERE" class=" font-weight-bold" style="color: #555;">
Name Surname
</a>
<div style="height: 50px; overflow: auto; font-size: 10px; scrollbar-width: none; line-height: 10px;">
<!-- WRITTEN RELATIONSHIP -->
<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>
</div>
</div>
</div>
<!-- END CHARACTER 02 ==== -->
<!-- SPACER ============== -->
<hr class="my-1" style="opacity: 0;">
<!-- CHARACTER 03 ======== -->
<div class="row no-gutters p-1" style="border: 2px solid #555;">
<!-- IMAGE -->
<div class="col-auto" style="background: url(URL_HERE) center no-repeat; background-size: cover; height: 65px; width: 65px;"></div>
<div class="col-auto mx-1" style="border-right: 2px solid #555;"></div>
<div class="col h-100">
<a href="LINK_HERE" class=" font-weight-bold" style="color: #555;">
Name Surname
</a>
<div style="height: 50px; overflow: auto; font-size: 10px; scrollbar-width: none; line-height: 10px;">
<!-- WRITTEN RELATIONSHIP -->
<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>
</div>
</div>
</div>
<!-- END CHARACTER 03 ==== -->
<!-- ADD MORE ABOVE HERE -->
</div>
<!-- END CONTENT BOX ============= -->
<!-- FOOTER ====================== -->
<div class="text-center font-weight-bold" style="background-color: #000; background-image: url(https://www.transparenttextures.com/patterns/black-thread-light.png); font-variant: small-caps; line-height: 15px; letter-spacing: 2px; font-size: 15px; color: #eee; border-radius: 0 0 15px 15px;height: 30px;"></div>
<!-- END FOOTER ================== -->
</div>
</div>
</div>
</div>
<!-- END BACK ========== -->
</div>
<!-- END RIGHT CARD ====== -->
</div>
<!-- CREDIT / DO NOT REMOVE -->
<div class="text-center mt-3 mb-n3">
<a href="https://toyhou.se/27592041.24-flip" class="tooltipster" title="code by venus" style="color: #555;">
<i class="fa-regular fa-bookmark fa-sm"></i>
</a>
</div>
</div>