<!-- [F2U] clickbait by macroura
- heavily inspired by those carrd tutorials where u make the same "psychologists HATE him" meme thing but in a carrd. it's way easier on carrd btw i'm never doing this again ;A;
- ft. chongyun genshin impact my little meow meow
notes:
- has a collapse & accordion! i would recommend not messing around with the accordion too much since it's very easy to break. collapse can be removed by removing the id="..." and collapse from class="..."
- uses custom colors!!
> accent text & button: #FF0000
> background: #fff
> text: #000
i went pretty simple with it to stick to the original image as close as possible, but can be customized to your heart's content!
- no bs colors for now.....im too tired lol
- need an live code editor? try [ https://th.circlejourney.net/ ]
- need an easy palette generator? try [ https://coolors.co/ ]
-->
<div class="container" style="max-width:300px; font-family:helvetica; font-size:12px;">
<div class="row no-gutters">
<!--top card, aka the actual meme-->
<div class="card p-1 col-12" style="background:#fff; border-radius:10px 10px 0px 0px; border-color:#000; color:#000">
<div class="row no-gutters">
<div class="col-12 p-0 bg-none">
<h4 style="font-weight:700; letter-spacing:-1px;"> PSYCHOLOGISTS
<h2 style="color:#FF0000; float:right; font-weight:900; margin:-30px 0px 1px 5px;">HATE Him!</h2>
</h4>
</div>
<div class="col-5">
<img class="img-thumbnail rounded-0 p-0" style="object-fit:cover; height:120px; width:100px; border:2px solid #000" src="IMG_LINK">
</div>
<div class="col-7">
<hr class="mt-auto" style="border-color:#000">
<p style="font-weight:800; font-size:12px; line-height:14px; text-align:center">He gives FREE therapy sessions & comfort to MILLIONS a day</p>
<p style="font-weight:800; font-size:11px; line-height:14px; text-align:center">Friendly neighbourhood cat exposes shocking secrets to life.</p>
<a role="button" class="btn btn p-1 mt-2 pull-right" data-toggle="collapse" href="#yunyun" style="font-size:11px;color:#fff; font-weight:700; background:red">LEARN THE TRUTH NOW</a>
</div>
</div>
</div>
</div>
<!--bottom card
- you can remove collapse by deleting the class="collapse" and id="...", or change the id by just. changing the name lawl. be sure to change the button link above as well!
-->
<div class="collapse" id="yunyun" style="color:#000">
<div class="row no-gutters my-1">
<div class="card col-12 p-0 overflow-auto" style="background:#fff; border-radius:0px 0px 10px 10px; border-color:#000; max-height:300px">
<div class="row no-gutters my-2 mx-1 bg">
<!-- accordion start
- you can change the accordion id attribute, but make sure to change the id name for each of the collapse tabs or the accordion will break!
-->
<div class="accordion md-accordion" id="icy" role="tablist" aria-multiselectable="true" style="width:270px">
<!-- first tab, shown (at a glance info) -->
<div role="tab" id="one" class="row no-gutters mb-1">
<!-- PLEASE DO NOT MESS WITH ANYTHING BETWEEN HERE AND THE MAIN CONTENT OR ELSE THE ACCORDION MIGHT BREAK!!! anything within the style="..." is fair game! -->
<div class="card px-1 col-12 rounded-0" style="border:1px solid #000; background:#fff;">
<a class="stretched-link" style="color:#000; font-weight:bold; text-decoration:none" data-toggle="collapse" data-parent="#icy" href="#basics" aria-expanded="true" aria-controls="basics"> BASICS </a>
</div>
<div class="collapse show w-100" id="basics" role="tabpanel" aria-labelledby="one" data-parent="#icy" style="border:1px solid #000; border-top:none">
<!-- main content -->
<div class="row no-gutters">
<div class="col-12 m-0">
<div class="justify-content-between p-1">
<p><strong> name(s) </strong></p>
<span class="text-right">blank, blank, blank</span>
</div>
<div class="justify-content-between p-1">
<p><strong> pronouns </strong></p>
<span class="text-right">pro/nouns</span>
</div>
<div class="justify-content-between p-1">
<p><strong> age </strong></p>
<span class="text-right">00</span>
</div>
<div class="justify-content-between p-1">
<p><strong> birthday </strong></p>
<span class="text-right">00/00</span>
</div>
<div class="justify-content-between p-1">
<p><strong> occupation </strong></p>
<span class="text-right">job, or not</span>
</div>
<div class="justify-content-between p-1">
<p><strong> status </strong></p>
<span class="text-right">content</span>
</div>
<!-- add more stuff above this end tag! just ctrl+c/v from <div class="justify-content..."></div> -->
</div>
</div>
</div>
</div>
<!-- end first tab -->
<!--second tab, about section-->
<div role="tab" id="two" class="row no-gutters mb-1">
<div class="card px-1 col-12 rounded-0" style="border:1px solid #000; background:#fff">
<!-- PLEASE DO NOT MESS WITH ANYTHING BETWEEN HERE AND THE MAIN CONTENT OR ELSE THE ACCORDION MIGHT BREAK!!! anything within the style="..." is fair game! -->
<a class="collapsed stretched-link" style="color:#000;font-weight:bold" data-toggle="collapse" data-parent="#icy" href="#about" aria-expanded="false" aria-controls="about"> ABOUT </a>
</div>
<div class="collapse w-100" id="about" role="tabpanel" aria-labelledby="two" data-parent="#icy" style="border:1px solid #000; border-top:none">
<!-- main content -->
<div class="p-1">
<div class="d-flex mb-2 justify-content-center">
<p class="my-0">
SUBHEADER
<hr class="w-100 m-1 align-self-center" style="border-color:#000">
</p>
</div>
<!-- add ur text here B) -->
<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 class="d-flex my-2 justify-content-center">
<p class="my-0">
SUBHEADER
<hr class="w-100 m-1 align-self-center" style="border-color:#000">
</p>
</div>
<!-- and more text down here -->
<p>me when i. when i umm. haha hold on this is me when im. when im when i do the uhm and the uhhhhhhh</p>
</div>
</div>
</div>
<!-- end second tab -->
<!--third tab, trivia / likes/dislikes / design notes-->
<div role="tab" id="three" class="row no-gutters mb-1">
<div class="card px-1 col-12 rounded-0" style="border:1px solid #000; background:#fff">
<!-- PLEASE DO NOT MESS WITH ANYTHING BETWEEN HERE AND THE MAIN CONTENT OR ELSE THE ACCORDION MIGHT BREAK!!! anything within the style="..." is fair game! -->
<a class="collapsed stretched-link" style="color:#000;font-weight:bold" data-toggle="collapse" data-parent="#icy" href="#misc" aria-expanded="false" aria-controls="misc"> EXTRAS </a>
</div>
<div class="collapse w-100" id="misc" role="tabpanel" aria-labelledby="three" data-parent="#icy" style="border:1px solid #000; border-top:none">
<!-- main content -->
<div class="row no-gutters p-1">
<!-- trivia -->
<div class="col-12" style="border-bottom:1px solid #000">
<p style="font-size:13px;">TRIVIA</p>
<ul style="margin-left:-15px">
<li>thing</li>
<li>another thing</li>
<li>and another??? holy crap!!!!</li>
</ul>
</div>
<!-- likes -->
<div class="col-6 pr-1" style="border-right:1px solid #000">
<p style="font-size:13px;"> LIKES </p>
<ul class="fa-ul" style="margin-left:17px">
<li><span class="fa-li"><i class="far fa-check"></i></span>something</li>
<li><span class="fa-li"><i class="far fa-check"></i></span>another thing</li>
<li><span class="fa-li"><i class="far fa-check"></i></span>even more things</li>
<li><span class="fa-li"><i class="far fa-check"></i></span>super cool thing</li>
</ul>
</div>
<!-- and dislikes -->
<div class="col-6 pl-1">
<p style="font-size:13px"> DISLIKES </p>
<ul class="fa-ul" style="margin-left:17px">
<li><span class="fa-li"><i class="far fa-times"></i></span>something</li>
<li><span class="fa-li"><i class="far fa-times"></i></span>another thing</li>
<li><span class="fa-li"><i class="far fa-times"></i></span>even more things</li>
<li><span class="fa-li"><i class="far fa-times"></i></span>super cool thing</li>
</ul>
</div>
<!-- design notes -->
<div class="col-12" style="border-top:1px solid #000">
<p style="font-size:13px"> DESIGN NOTES </p>
<ul style="margin-left:-15px">
<li>thing</li>
<li>another thing</li>
<ul>
<li>sub-thing B)</li>
</ul>
<li>last but not least!! thing!!!!</li>
</ul>
<!-- color palette
- replace #HEXCODE with hex of choice! allows for a max of 12 colors :)
-->
<div class="row no-gutters d-flex justify-content-between" style="border:1px solid #000">
<div class="col tooltipster p-3" style="background:#HEXCODE; border-right:1px solid #000" title="#HEXCODE"></div>
<div class="col tooltipster p-3" style="background:#HEXCODE; border-right:1px solid #000" title="#HEXCODE"></div>
<div class="col tooltipster p-3" style="background:#HEXCODE; border-right:1px solid #000" title="#HEXCODE"></div>
<div class="col tooltipster p-3" style="background:#HEXCODE; border-right:1px solid #000" title="#HEXCODE"></div>
<div class="col tooltipster p-3" style="background:#HEXCODE" title="#HEXCODE"></div>
</div>
</div>
</div>
</div>
</div>
<!-- end third tab -->
<!--fourth tab, relationships-->
<div role="tab" id="four" class="row no-gutters mb-1">
<div class="card px-1 col-12 rounded-0" style="border:1px solid #000; background:#fff">
<!-- PLEASE DO NOT MESS WITH ANYTHING BETWEEN HERE AND THE MAIN CONTENT OR ELSE THE ACCORDION MIGHT BREAK!!! anything within the style="..." is fair game! -->
<a class="collapsed stretched-link" style="color:#000;font-weight:bold" data-toggle="collapse" data-parent="#icy" href="#ships" aria-expanded="false" aria-controls="ships"> RELATIONSHIPS</a>
</div>
<div class="collapse w-100" id="ships" role="tabpanel" aria-labelledby="four" data-parent="#icy" style="border:1px solid #000; border-top:none">
<!-- main content -->
<!-- note:
fas fa-heart: solid heart
far fa-heart: outlined heart
-->
<!-- character one -->
<div class="row no-gutters">
<div class="col-4">
<img class="img-thumbnail rounded-0 p-0 m-1" style="border-color:#000; height:90px; width:90px; object-fit:cover" src="IMG_LINK">
</div>
<div class="col-8 p-1">
<div class="row no-gutters ml-2 justify-content-between">
<p style="font-size:12px; margin:0px 1px">XIANGLING</p>
<div style="color: #FF0000">
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
<i class="far fa-heart"></i>
</div>
</div>
<div class="row no-gutters overflow-auto" style="height:75px">
<blockquote class="blockquote ml-2 mb-3" style="font-size:11px; border-left:solid 1px; padding: 2px 5px">
this box will scroll!! Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</blockquote>
</div>
</div>
</div>
<!-- character two -->
<div class="row no-gutters">
<div class="col-4">
<img class="img-thumbnail rounded-0 p-0 m-1" style="border-color:#000; height:90px; width:90px; object-fit:cover" src="IMG_LINK">
</div>
<div class="col-8 p-1">
<div class="row no-gutters ml-2 justify-content-between">
<p style="font-size:12px; margin:0px 1px">XINGQIU</p>
<div style="color: #FF0000;">
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
<i class="far fa-heart"></i>
</div>
</div>
<div class="row no-gutters overflow-auto" style="height:75px">
<blockquote class="blockquote ml-2 mb-3" style="font-size:11px; border-left:solid 1px; padding: 2px 5px">
this box will scroll!! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.
</blockquote>
</div>
</div>
</div>
<!-- character three -->
<div class="row no-gutters">
<div class="col-4">
<img class="img-thumbnail rounded-0 p-0 m-1" style="border-color:#000; height:90px; width:90px; object-fit:cover" src="IMG_LINK">
</div>
<div class="col-8 p-1">
<div class="row no-gutters ml-2 justify-content-between">
<p style="font-size:12px; margin:0px 1px">XIAO</p>
<div style="color: #FF0000;">
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
<i class="far fa-heart"></i>
<i class="far fa-heart"></i>
</div>
</div>
<div class="row no-gutters overflow-auto" style="height:75px">
<blockquote class="blockquote ml-2 mb-3" style="font-size:11px; border-left:solid 1px; padding: 2px 5px">
this box will scroll!! Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</blockquote>
</div>
</div>
</div>
<!-- ctrl+c/v more relationship profiles above this end tag! -->
</div>
</div>
<!--END ALL COLLAPSE TABS-->
</div>
</div>
</div>
</div>
</div>
<!--creds (dont remove)-->
<a class="pull-right mt-1" href="https://toyhou.se/sharkadelic"><i class="fal fa-feather-alt tooltipster" title="by shark"></i></a>
</div>