BOOTSTRAP VERSION:
<!---
YUME FANFARE (BS) / by cati/dogboy
NOTES
awesomefont icon: fas fa-heart and far fa-heart
(use ctrl+f + replace for icon replacement)
mobile friendly + bootstrap cplors! ✔✔✔
RULES & DISCLAIMERS
- fav/comment if using pls!
- not wysiwyg friendly so please turn that off!
- feel free to edit/frakenstein/etc if you feel, just pls dont remove my credit!!
- have a nice day!!
--->
<div class="container" style="background:none;max-width:1030px;margin:70px auto;">
<div class="row">
<!--- character 1 --->
<div class="col-lg-4 p-2">
<div class="card bg-primary" style="position:relative;border:0px;">
<div class="text-center" style="z-index:2;">
<div class="w-100 d-block mx-auto" style="position:absolute;">
<!--- hearts and icon --->
<i class="fas fa-heart m-3 text-danger" style="font-size:50px;"></i>
<img class="rounded-circle" style="height:120px;width:120px;border:8px solid;margin-top:-55px;" src="https://64.media.tumblr.com/77f5f54c93594489577bc10d0649ca14/tumblr_prkkykQqUv1v1p4nw_400.jpg">
<i class="fas fa-heart m-3 text-danger" style="font-size:50px;"></i>
</div>
</div>
<div class="card" style="background:#FFF;z-index:1;border:0px;margin:13px;border-radius:0px;">
<!--- name --->
<h3 class="text-center p-3" style="margin-top:70px;color:#7268A6;font-weight:300;letter-spacing:0.09em;">
<a href="URLHERE" class="text-dark" style="font-size:25px;">NAME OR TITLE HERE</a>
</h3>
</div>
<div class="card p-3" style="background:#FFF;border:0px;border-radius:0px;margin:0px 13px 15px;height:150px;overflow:auto;">
<!--- anecdotal and description --->
<p class="m-2 text-center text-dark" style="font-size:15px;font-weight:350;"><i class="m-1 fa-lg fas fa-quote-left float-left" />This box scrolls, so feel free to type as much as you'd like. It's supposed to be an anecdotal from the character, when you ask them about the other character!<i class="m-1 fa-lg fas fa-quote-right float-right" /></p>
<hr class="text-dark" style="width:95%;">
<p class="text-center text-dark" style="font-weight:350;font-size:13px;">
A small description about the character. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non auctor lorem. Maecenas et viverra nibh. Duis eget dignissim dolor. Ut eu turpis porta, bibendum odio vitae, efficitur leo.
</p>
</div>
<div class="card p-2" style="background:#FFF;border:0px;border-radius:0px;margin:0px 13px 15px;height:180px;overflow:auto;">
<div class="row no-gutters m-2">
<!--- likes and dislikes --->
<div class="col-lg-6">
<h1 class="text-uppercase text-center text-dark" style="font-size:22px;letter-spacing:1px;font-weight:350;">LIKES <i class="fas fa-heart"></i></h1>
<ul class="mt-2 text-dark">
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
</div>
<div class="col-lg-6">
<h1 class="text-uppercase text-center text-dark" style="font-size:22px;letter-spacing:1px;font-weight:350;">DISLIKES <i class="fas fa-heart-broken"></i></h1>
<ul class="mt-2 text-dark">
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
</div>
</div>
</div>
<div class="card p-3" style="background:#FFF;border:0px;border-radius:0px;margin:0px 13px 15px;">
<!--- stats, "fr fas-heart" is an empty heart and "fas fa-heart" is a full one! --->
<div class="justify-content-between text-dark" style="font-size:20px;">
<div><span style="letter-spacing:1px;font-weight:350;">AFFECTION</span></div>
<div><span><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="fas fa-heart"></i></span><i class="far fa-heart"></i></div>
</div>
<div class="justify-content-between my-2 text-dark" style="font-size:20px;">
<div><span style="letter-spacing:1px;font-weight:350;">TRUST</span></div>
<div><span><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="fas fa-heart"></i></span><i class="far fa-heart"></i></div>
</div>
<div class="justify-content-between text-dark" style="font-size:20px;">
<div><span style="letter-spacing:1px;font-weight:350;">JEALOUSY</span></div>
<div><span><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="fas fa-heart"></i></span><i class="far fa-heart"></i></div>
</div>
<div class="justify-content-between my-2 text-dark" style="font-size:20px;">
<div><span style="letter-spacing:1px;font-weight:350;">ATTACHMENT</span></div>
<div><span><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="fas fa-heart"></i></span><i class="far fa-heart"></i></div>
</div>
</div>
</div>
</div>
<!--- middle column --->
<div class="col-lg-4 p-2">
<div class="card h-100 bg-primary" style="border:0px;">
<!--- image --->
<div class="card m-2" style="background:url('https://static.wikia.nocookie.net/lovecommittee/images/2/29/Chocokano.png/revision/latest?cb=20190711003647');background-size:cover;background-position:center;height:200px;border-radius:3px;"></div>
<div class="card p-3" style="background:#FFF;border:0px;border-radius:0px;margin:10px 10px 15px;height:170px;overflow:auto;">
<!--- relationship description --->
<p class="text-center text-dark" style="font-weight:350;font-size:14px;">
A short description about their relationship. Can be about how they met, why they love each other so much, etc. This box scrolls, so you can go ham. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vie. Lorem ipsum dolor sit.
</p>
</div>
<!--- hearts --->
<p class="mb-3 justify-content-center text-danger">
<i class="far fa-heart" style="font-size:40px;"></i><i class="fas fa-heart mx-1" style="font-size:40px;"></i><i class="far fa-heart" style="font-size:40px;"></i><i class="fas fa-heart mx-1" style="font-size:40px;"></i><i class="far fa-heart" style="font-size:40px;"></i>
</p>
<div class="card p-3 text-center text-dark" style="background:#FFF;border:0px;border-radius:0px;margin:0px 10px;height:170px;overflow:auto;">
<!--- music player and playlist, paste the end of a yt link after the "youtube.com/embed/" / credit to Strabi + phasmology for music code ! --->
<span><iframe class="flex-fill" style="height:3em;width:3em;opacity:0;position:absolute;z-index:1;" frameborder="0" allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen
src="https://www.youtube.com/embed/URLHERE"></iframe><i class="far fa-play-circle fa-spin fa-3x" style="animation-duration:10s;"></i></span>
<div class="row mt-2">
<div class="col-12">
<span class="text-uppercase" style="font-weight:350;letter-spacing:0.05em;font-size:16px;">song name / <i>artist</i></span>
</div>
<div class="col-12">
<span class="text-uppercase" style="font-weight:350;letter-spacing:0.05em;font-size:16px;">song name / <i>artist</i></span>
</div>
<div class="col-12">
<span class="text-uppercase" style="font-weight:350;letter-spacing:0.05em;font-size:16px;">song name / <i>artist</i></span>
</div>
<div class="col-12">
<span class="text-uppercase" style="font-weight:350;letter-spacing:0.05em;font-size:16px;">song name / <i>artist</i></span>
</div>
<div class="col-12">
<span class="text-uppercase" style="font-weight:350;letter-spacing:0.05em;font-size:16px;">song name / <i>artist</i></span>
</div>
</div>
</div>
<!--- hearts --->
<p class="m-3 justify-content-center text-danger">
<i class="far fa-heart" style="font-size:40px;"></i><i class="fas fa-heart mx-1" style="font-size:40px;"></i><i class="far fa-heart" style="font-size:40px;"></i><i class="fas fa-heart mx-1" style="font-size:40px;"></i><i class="far fa-heart" style="font-size:40px;"></i>
</p>
</div>
</div>
<!--- user 2 --->
<div class="col-lg-4 p-2">
<div class="card bg-primary" style="position:relative;border:0px;">
<div class="text-center" style="z-index:2;">
<div class="w-100 d-block mx-auto" style="position:absolute;">
<!--- hearts and icon --->
<i class="fas fa-heart m-3 text-danger" style="font-size:50px;"></i>
<img class="rounded-circle" style="height:120px;width:120px;border:8px solid;margin-top:-55px;" src="https://64.media.tumblr.com/6edda020ce9e2bfe701b1edef980b8df/tumblr_prkkykTGQJ1v1p4nw_400.jpg">
<i class="fas fa-heart m-3 text-danger" style="font-size:50px;"></i>
</div>
</div>
<div class="card" style="background:#FFF;z-index:1;border:0px;margin:13px;border-radius:0px;">
<!--- name --->
<h3 class="text-center p-3" style="margin-top:70px;color:#7268A6;font-weight:300;letter-spacing:0.09em;">
<a href="URLHERE" class="text-dark" style="font-size:25px;">NAME OR TITLE HERE</a>
</h3>
</div>
<div class="card p-3" style="background:#FFF;border:0px;border-radius:0px;margin:0px 13px 15px;height:150px;overflow:auto;">
<!--- anecdotal and description --->
<p class="m-2 text-center text-dark" style="font-size:15px;font-weight:350;"><i class="m-1 fa-lg fas fa-quote-left float-left" />This box scrolls, so feel free to type as much as you'd like. It's supposed to be an anecdotal from the character, when you ask them about the other character!<i class="m-1 fa-lg fas fa-quote-right float-right" /></p>
<hr class="text-dark" style="width:95%;">
<p class="text-center text-dark" style="font-weight:350;font-size:13px;">
A small description about the character. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non auctor lorem. Maecenas et viverra nibh. Duis eget dignissim dolor. Ut eu turpis porta, bibendum odio vitae, efficitur leo.
</p>
</div>
<div class="card p-2" style="background:#FFF;border:0px;border-radius:0px;margin:0px 13px 15px;height:180px;overflow:auto;">
<div class="row no-gutters m-2">
<!--- likes and dislikes --->
<div class="col-lg-6">
<h1 class="text-uppercase text-center text-dark" style="font-size:22px;letter-spacing:1px;font-weight:350;">LIKES <i class="fas fa-heart"></i></h1>
<ul class="mt-2 text-dark">
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
</div>
<div class="col-lg-6">
<h1 class="text-uppercase text-center text-dark" style="font-size:22px;letter-spacing:1px;font-weight:350;">DISLIKES <i class="fas fa-heart-broken"></i></h1>
<ul class="mt-2 text-dark">
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
</div>
</div>
</div>
<div class="card p-3" style="background:#FFF;border:0px;border-radius:0px;margin:0px 13px 15px;">
<!--- stats, "fr fas-heart" is an empty heart and "fas fa-heart" is a full one! --->
<div class="justify-content-between text-dark" style="font-size:20px;">
<div><span style="letter-spacing:1px;font-weight:350;">AFFECTION</span></div>
<div><span><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="fas fa-heart"></i></span><i class="far fa-heart"></i></div>
</div>
<div class="justify-content-between my-2 text-dark" style="font-size:20px;">
<div><span style="letter-spacing:1px;font-weight:350;">TRUST</span></div>
<div><span><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="fas fa-heart"></i></span><i class="far fa-heart"></i></div>
</div>
<div class="justify-content-between text-dark" style="font-size:20px;">
<div><span style="letter-spacing:1px;font-weight:350;">JEALOUSY</span></div>
<div><span><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="fas fa-heart"></i></span><i class="far fa-heart"></i></div>
</div>
<div class="justify-content-between my-2 text-dark" style="font-size:20px;">
<div><span style="letter-spacing:1px;font-weight:350;">ATTACHMENT</span></div>
<div><span><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="fas fa-heart"></i></span><i class="far fa-heart"></i></div>
</div>
</div>
</div>
</div>
</div>
<!--- credit, dont remove pls! --->
<a class="d-block text-muted text-right mr-2" href="9486580" style="font-size:0.6em;">code by cati <i class="fad fa-rainbow"></i></a>
</div>
CUSTOM COLORS:
<!---
YUME FANFARE (CC) / by cati/dogboy
NOTES
accent: #7268A6
bg color: #86A3C3
awesomefont icon: fas fa-heart and far fa-heart
(use ctrl+f + replace for icon & accent replacement)
mobile friendly + custom colors! ✔✔✔
RULES & DISCLAIMERS
- fav/comment if using pls!
- not wysiwyg friendly so please turn that off!
- feel free to edit/frakenstein/etc if you feel, just pls dont remove my credit!!
- have a nice day!!
--->
<div class="container" style="background:none;max-width:1030px;margin:70px auto;">
<div class="row">
<!--- character 1 --->
<div class="col-lg-4 p-2">
<div class="card" style="position:relative;background-color:#86A3C3;border:0px;">
<div class="text-center" style="z-index:2;">
<div class="w-100 d-block mx-auto" style="position:absolute;">
<!--- hearts and icon --->
<i class="fas fa-heart m-3" style="color:#7268A6;font-size:50px;"></i>
<img class="rounded-circle" style="height:120px;width:120px;border:8px solid #86A3C3;margin-top:-55px;" src="https://64.media.tumblr.com/77f5f54c93594489577bc10d0649ca14/tumblr_prkkykQqUv1v1p4nw_400.jpg">
<i class="fas fa-heart m-3" style="color:#7268A6;font-size:50px;"></i>
</div>
</div>
<div class="card" style="background:#FFF;z-index:1;border:0px;margin:13px;border-radius:0px;">
<!--- name --->
<h3 class="text-center p-3" style="margin-top:70px;color:#7268A6;font-weight:300;letter-spacing:0.09em;">
<a href="URLHERE" style="color:#7268A6;font-size:25px;">NAME OR TITLE HERE</a>
</h3>
</div>
<div class="card p-3" style="background:#FFF;border:0px;border-radius:0px;margin:0px 13px 15px;height:150px;overflow:auto;">
<!--- anecdotal and description --->
<p class="m-2 text-center" style="color:#7268A6;font-size:15px;font-weight:350;"><i class="m-1 fa-lg fas fa-quote-left float-left" style="color:#7268A6" />This box scrolls, so feel free to type as much as you'd like. It's supposed to be an anecdotal from the character, when you ask them about the other character!<i class="m-1 fa-lg fas fa-quote-right float-right" style="color:#7268A6" /></p>
<hr style="width:95%;background-color:#7268A6;">
<p class="text-center" style="color:#7268A6;font-weight:350;font-size:13px;">
A small description about the character. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non auctor lorem. Maecenas et viverra nibh. Duis eget dignissim dolor. Ut eu turpis porta, bibendum odio vitae, efficitur leo.
</p>
</div>
<div class="card p-2" style="background:#FFF;border:0px;border-radius:0px;margin:0px 13px 15px;height:180px;overflow:auto;">
<div class="row no-gutters m-2">
<!--- likes and dislikes --->
<div class="col-lg-6">
<h1 class="text-uppercase text-center" style="color:#7268A6;font-size:22px;letter-spacing:1px;font-weight:350;">LIKES <i class="fas fa-heart"></i></h1>
<ul class="mt-2" style="color:#7268A6;">
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
</div>
<div class="col-lg-6">
<h1 class="text-uppercase text-center" style="color:#7268A6;font-size:22px;letter-spacing:1px;font-weight:350;">DISLIKES <i class="fas fa-heart-broken"></i></h1>
<ul class="mt-2" style="color:#7268A6;">
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
</div>
</div>
</div>
<div class="card p-3" style="background:#FFF;border:0px;border-radius:0px;margin:0px 13px 15px;">
<!--- stats, "fr fas-heart" is an empty heart and "fas fa-heart" is a full one! --->
<div class="justify-content-between" style="color:#7268A6;font-size:20px;">
<div><span style="color:#7268A6;letter-spacing:1px;font-weight:350;">AFFECTION</span></div>
<div><span><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="fas fa-heart"></i></span><i class="far fa-heart"></i></div>
</div>
<div class="justify-content-between my-2" style="color:#7268A6;font-size:20px;">
<div><span style="color:#7268A6;letter-spacing:1px;font-weight:350;">TRUST</span></div>
<div><span><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="fas fa-heart"></i></span><i class="far fa-heart"></i></div>
</div>
<div class="justify-content-between" style="color:#7268A6;font-size:20px;">
<div><span style="color:#7268A6;letter-spacing:1px;font-weight:350;">JEALOUSY</span></div>
<div><span><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="fas fa-heart"></i></span><i class="far fa-heart"></i></div>
</div>
<div class="justify-content-between my-2" style="color:#7268A6;font-size:20px;">
<div><span style="color:#7268A6;letter-spacing:1px;font-weight:350;">ATTACHMENT</span></div>
<div><span><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="fas fa-heart"></i></span><i class="far fa-heart"></i></div>
</div>
</div>
</div>
</div>
<!--- middle column --->
<div class="col-lg-4 p-2">
<div class="card h-100" style="background:#86A3C3;border:0px;">
<!--- image --->
<div class="card m-2" style="background:url('https://static.wikia.nocookie.net/lovecommittee/images/2/29/Chocokano.png/revision/latest?cb=20190711003647');background-size:cover;background-position:center;height:200px;border-radius:3px;"></div>
<div class="card p-3" style="background:#FFF;border:0px;border-radius:0px;margin:10px 10px 15px;height:170px;overflow:auto;">
<!--- relationship description --->
<p class="text-center" style="color:#7268A6;font-weight:350;font-size:14px;">
A short description about their relationship. Can be about how they met, why they love each other so much, etc. This box scrolls, so you can go ham. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vie. Lorem ipsum dolor sit.
</p>
</div>
<!--- hearts --->
<p class="mb-3 justify-content-center">
<i class="far fa-heart" style="font-size:40px;color:#7268A6"></i><i class="fas fa-heart mx-1" style="font-size:40px;color:#7268A6"></i><i class="far fa-heart" style="font-size:40px;color:#7268A6"></i><i class="fas fa-heart mx-1" style="font-size:40px;color:#7268A6"></i><i class="far fa-heart" style="font-size:40px;color:#7268A6"></i>
</p>
<div class="card p-3 text-center" style="background:#FFF;border:0px;border-radius:0px;margin:0px 10px;height:170px;overflow:auto;">
<!--- music player and playlist, paste the end of a yt link after the "youtube.com/embed/" / credit to Strabi + phasmology for music code ! --->
<span><iframe class="flex-fill" style="height:3em;width:3em;opacity:0;position:absolute;z-index:1;" frameborder="0" allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen
src="https://www.youtube.com/embed/URLHERE"></iframe><i class="far fa-play-circle fa-spin fa-3x" style="animation-duration:10s;color:#7268A6;"></i></span>
<div class="row mt-2">
<div class="col-12">
<span class="text-uppercase" style="color:#7268A6;font-weight:350;letter-spacing:0.05em;font-size:16px;">song name / <i>artist</i></span>
</div>
<div class="col-12">
<span class="text-uppercase" style="color:#7268A6;font-weight:350;letter-spacing:0.05em;font-size:16px;">song name / <i>artist</i></span>
</div>
<div class="col-12">
<span class="text-uppercase" style="color:#7268A6;font-weight:350;letter-spacing:0.05em;font-size:16px;">song name / <i>artist</i></span>
</div>
<div class="col-12">
<span class="text-uppercase" style="color:#7268A6;font-weight:350;letter-spacing:0.05em;font-size:16px;">song name / <i>artist</i></span>
</div>
<div class="col-12">
<span class="text-uppercase" style="color:#7268A6;font-weight:350;letter-spacing:0.05em;font-size:16px;">song name / <i>artist</i></span>
</div>
</div>
</div>
<!--- hearts --->
<p class="m-3 justify-content-center">
<i class="far fa-heart" style="font-size:40px;color:#7268A6"></i><i class="fas fa-heart mx-1" style="font-size:40px;color:#7268A6"></i><i class="far fa-heart" style="font-size:40px;color:#7268A6"></i><i class="fas fa-heart mx-1" style="font-size:40px;color:#7268A6"></i><i class="far fa-heart" style="font-size:40px;color:#7268A6"></i>
</p>
</div>
</div>
<!--- user 2 --->
<div class="col-lg-4 p-2">
<div class="card" style="position:relative;background-color:#86A3C3;border:0px;">
<div class="text-center" style="z-index:2;">
<div class="w-100 d-block mx-auto" style="position:absolute;">
<!--- hearts and icon --->
<i class="fas fa-heart m-3" style="color:#7268A6;font-size:50px;"></i>
<img class="rounded-circle" style="height:120px;width:120px;border:8px solid #86A3C3;margin-top:-55px;" src="https://64.media.tumblr.com/6edda020ce9e2bfe701b1edef980b8df/tumblr_prkkykTGQJ1v1p4nw_400.jpg">
<i class="fas fa-heart m-3" style="color:#7268A6;font-size:50px;"></i>
</div>
</div>
<div class="card" style="background:#FFF;z-index:1;border:0px;margin:13px;border-radius:0px;">
<!--- name --->
<h3 class="text-center p-3" style="margin-top:70px;color:#7268A6;font-weight:300;letter-spacing:0.09em;">
<a href="URLHERE" style="color:#7268A6;font-size:25px;">NAME OR TITLE HERE</a>
</h3>
</div>
<div class="card p-3" style="background:#FFF;border:0px;border-radius:0px;margin:0px 13px 15px;height:150px;overflow:auto;">
<!--- anecdotal and description --->
<p class="m-2 text-center" style="color:#7268A6;font-size:15px;font-weight:350;"><i class="m-1 fa-lg fas fa-quote-left float-left" style="color:#7268A6" />This box scrolls, so feel free to type as much as you'd like. It's supposed to be an anecdotal from the character, when you ask them about the other character!<i class="m-1 fa-lg fas fa-quote-right float-right" style="color:#7268A6" /></p>
<hr style="width:95%;background-color:#7268A6;">
<p class="text-center" style="color:#7268A6;font-weight:350;font-size:13px;">
A small description about the character. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non auctor lorem. Maecenas et viverra nibh. Duis eget dignissim dolor. Ut eu turpis porta, bibendum odio vitae, efficitur leo.
</p>
</div>
<div class="card p-2" style="background:#FFF;border:0px;border-radius:0px;margin:0px 13px 15px;height:180px;overflow:auto;">
<div class="row no-gutters m-2">
<!--- likes and dislikes --->
<div class="col-lg-6">
<h1 class="text-uppercase text-center" style="color:#7268A6;font-size:22px;letter-spacing:1px;font-weight:350;">LIKES <i class="fas fa-heart"></i></h1>
<ul class="mt-2" style="color:#7268A6;">
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
</div>
<div class="col-lg-6">
<h1 class="text-uppercase text-center" style="color:#7268A6;font-size:22px;letter-spacing:1px;font-weight:350;">DISLIKES <i class="fas fa-heart-broken"></i></h1>
<ul class="mt-2" style="color:#7268A6;">
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
</div>
</div>
</div>
<div class="card p-3" style="background:#FFF;border:0px;border-radius:0px;margin:0px 13px 15px;">
<!--- stats, "fr fas-heart" is an empty heart and "fas fa-heart" is a full one! --->
<div class="justify-content-between" style="color:#7268A6;font-size:20px;">
<div><span style="color:#7268A6;letter-spacing:1px;font-weight:350;">AFFECTION</span></div>
<div><span><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="fas fa-heart"></i></span><i class="far fa-heart"></i></div>
</div>
<div class="justify-content-between my-2" style="color:#7268A6;font-size:20px;">
<div><span style="color:#7268A6;letter-spacing:1px;font-weight:350;">TRUST</span></div>
<div><span><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="fas fa-heart"></i></span><i class="far fa-heart"></i></div>
</div>
<div class="justify-content-between" style="color:#7268A6;font-size:20px;">
<div><span style="color:#7268A6;letter-spacing:1px;font-weight:350;">JEALOUSY</span></div>
<div><span><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="fas fa-heart"></i></span><i class="far fa-heart"></i></div>
</div>
<div class="justify-content-between my-2" style="color:#7268A6;font-size:20px;">
<div><span style="color:#7268A6;letter-spacing:1px;font-weight:350;">ATTACHMENT</span></div>
<div><span><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="fas fa-heart"></i></span><i class="far fa-heart"></i></div>
</div>
</div>
</div>
</div>
</div>
<!--- credit, dont remove pls! --->
<a class="d-block text-muted text-right mr-2" href="9486580" style="font-size:0.6em;">code by cati <i class="fad fa-rainbow"></i></a>
</div>
