<!---
DUO USERS / by cati/dogboy
NOTES
accent: #7268A6
bg color: #86A3C3
(use ctrl+f + replace for 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">
<!--- user 1 --->
<div class="col-lg-5 p-2">
<div class="card h-100" 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:70px;"></i>
<img class="rounded-circle" style="height:130px;width:130px;border:8px solid #86A3C3;margin-top:-100px;" src="https://64.media.tumblr.com/154ebe605f8cbb8bef51f929ca85b1ef/tumblr_plt1zsD9fa1x73yfbo3_400.jpg">
<i class="fas fa-heart m-3" style="color:#7268A6;font-size:70px;"></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;">
name - pronouns - adj
</h3>
</div>
<div class="card p-3" style="background:#FFF;border:0px;border-radius:0px;margin:0px 13px 15px;height:250px;overflow:auto;">
<!--- self intro --->
<p class="text-center" style="color:#7268A6;font-weight:350;">
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. Aenean ultrices, nulla in maximus consectetur, libero eros efficitur ex, vel faucibus sapien sem et leo. Pellentesque massa est, pretium sed euismod sit amet, iaculis sit amet justo. 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. Aenean ultrices, nulla in maximus consectetur, libero eros efficitur ex, vel faucibus sapien sem et leo. Pellentesque massa est, pretium sed euismod sit amet, iaculis sit amet justo.
</p>
</div>
<div class="card p-2" style="background:#FFF;border:0px;border-radius:0px;margin:0px 13px 15px;height:350px;overflow:auto;">
<!--- characters --->
<div class="row no-gutters">
<div class="col-6 text-center">
<h3 class="font-italic" style="color:#7268A6;letter-spacing:1px;font-weight:400;"><a href="URLHERE" style="color:#7268A6;">Name</a></h3>
<img class="fr-rounded" style="width:130px;border:4px solid #7268A6;" src="https://64.media.tumblr.com/3eede4cb6812a5dd09529b1429df105a/96097ee6e9240477-e7/s250x400/8c73e70f8d3ace2fd55980cf861b50972d497f19.png">
</div>
<div class="col-6 text-center">
<h3 class="font-italic" style="color:#7268A6;letter-spacing:1px;font-weight:400;"><a href="URLHERE" style="color:#7268A6;">Name</a></h3>
<img class="fr-rounded" style="width:130px;border:4px solid #7268A6;" src="https://64.media.tumblr.com/3eede4cb6812a5dd09529b1429df105a/96097ee6e9240477-e7/s250x400/8c73e70f8d3ace2fd55980cf861b50972d497f19.png">
</div>
<div class="col-6 mt-2 text-center">
<h3 class="font-italic" style="color:#7268A6;letter-spacing:1px;font-weight:400;"><a href="URLHERE" style="color:#7268A6;">Name</a></h3>
<img class="fr-rounded" style="width:130px;border:4px solid #7268A6;" src="https://64.media.tumblr.com/3eede4cb6812a5dd09529b1429df105a/96097ee6e9240477-e7/s250x400/8c73e70f8d3ace2fd55980cf861b50972d497f19.png">
</div>
<div class="col-6 mt-2 text-center">
<h3 class="font-italic" style="color:#7268A6;letter-spacing:1px;font-weight:400;"><a href="URLHERE" style="color:#7268A6;">Name</a></h3>
<img class="fr-rounded" style="width:130px;border:4px solid #7268A6;" src="https://64.media.tumblr.com/3eede4cb6812a5dd09529b1429df105a/96097ee6e9240477-e7/s250x400/8c73e70f8d3ace2fd55980cf861b50972d497f19.png">
</div>
</div>
</div>
</div>
</div>
<!--- middle --->
<div class="col-lg-2 p-2">
<div class="card h-100 hidden-sm-down" style="background:#86A3C3;border:0px;">
<!--- image --->
<div class="card h-100 m-3" style="background:url('https://static.wikia.nocookie.net/lovecommittee/images/c/c2/LIPXLIP_fiancee.png/revision/latest?cb=20190821012203');background-size:cover;background-position:center;"></div>
</div>
</div>
<!--- user 2 --->
<div class="col-lg-5 p-2">
<div class="card h-100" 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:70px;"></i>
<img class="rounded-circle" style="height:130px;width:130px;border:8px solid #86A3C3;margin-top:-100px;" src="https://64.media.tumblr.com/9ff17d2dab48f5049464abb7b2c01a74/tumblr_prkktyRT5Q1v1p4nw_400.jpg">
<i class="fas fa-heart m-3" style="color:#7268A6;font-size:70px;"></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;">
name - pronouns - adj
</h3>
</div>
<div class="card p-3" style="background:#FFF;border:0px;border-radius:0px;margin:0px 13px 15px;height:250px;overflow:auto;">
<!--- self intro --->
<p class="text-center" style="color:#7268A6;font-weight:350;">
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. Aenean ultrices, nulla in maximus consectetur, libero eros efficitur ex, vel faucibus sapien sem et leo. Pellentesque massa est, pretium sed euismod sit amet, iaculis sit amet justo. 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. Aenean ultrices, nulla in maximus consectetur, libero eros efficitur ex, vel faucibus sapien sem et leo. Pellentesque massa est, pretium sed euismod sit amet, iaculis sit amet justo.
</p>
</div>
<div class="card p-2" style="background:#FFF;border:0px;border-radius:0px;margin:0px 13px 15px;height:350px;overflow:auto;">
<!--- characters --->
<div class="row no-gutters">
<div class="col-6 text-center">
<h3 class="font-italic" style="color:#7268A6;letter-spacing:1px;font-weight:400;"><a href="URLHERE" style="color:#7268A6;">Name</a></h3>
<img class="fr-rounded" style="width:130px;border:4px solid #7268A6;" src="https://64.media.tumblr.com/3eede4cb6812a5dd09529b1429df105a/96097ee6e9240477-e7/s250x400/8c73e70f8d3ace2fd55980cf861b50972d497f19.png">
</div>
<div class="col-6 text-center">
<h3 class="font-italic" style="color:#7268A6;letter-spacing:1px;font-weight:400;"><a href="URLHERE" style="color:#7268A6;">Name</a></h3>
<img class="fr-rounded" style="width:130px;border:4px solid #7268A6;" src="https://64.media.tumblr.com/3eede4cb6812a5dd09529b1429df105a/96097ee6e9240477-e7/s250x400/8c73e70f8d3ace2fd55980cf861b50972d497f19.png">
</div>
<div class="col-6 mt-2 text-center">
<h3 class="font-italic" style="color:#7268A6;letter-spacing:1px;font-weight:400;"><a href="URLHERE" style="color:#7268A6;">Name</a></h3>
<img class="fr-rounded" style="width:130px;border:4px solid #7268A6;" src="https://64.media.tumblr.com/3eede4cb6812a5dd09529b1429df105a/96097ee6e9240477-e7/s250x400/8c73e70f8d3ace2fd55980cf861b50972d497f19.png">
</div>
<div class="col-6 mt-2 text-center">
<h3 class="font-italic" style="color:#7268A6;letter-spacing:1px;font-weight:400;"><a href="URLHERE" style="color:#7268A6;">Name</a></h3>
<img class="fr-rounded" style="width:130px;border:4px solid #7268A6;" src="https://64.media.tumblr.com/3eede4cb6812a5dd09529b1429df105a/96097ee6e9240477-e7/s250x400/8c73e70f8d3ace2fd55980cf861b50972d497f19.png">
</div>
</div>
</div>
</div>
</div>
</div>
<!--- credit, dont remove pls! --->
<a class="d-block text-muted text-right mr-2" href="9474641" style="font-size:0.6em;">code by cati <i class="fad fa-rainbow"></i></a>
</div>
