<!--layout-->
<div style="color:#ffffff;
font-family:helvetica,sans-serif;
letter-spacing:1px;
font-weight:100;">
<div class="row mx-auto">
<!--pagedoll-->
<div><!--layout-->
<div style="color:#ffffff;
font-family:helvetica,sans-serif;
letter-spacing:1px;
font-weight:100;">
<div class="row justify-content-cengter">
<!--pagedoll-->
<div>
<div class="card m-3 hidden-md-down hidden-sm-down" style="width:240px;
position:sticky;
top:1px;
background-image:url(https://f2.toyhou.se/file/f2-toyhou-se/images/113572985_64HEQLE798EtUGK.png);
min-height:210px;
background-position:center;
background-size:160px;
background-repeat:no-repeat;
background-color:transparent;
border:none;"></div>
</div>
<!--pagedoll-->
<!-- Image slot blizzard (hidden in mobile) -->
<div class="hidden-md-down hidden-sm-down" style="height:210px;
width:40px;
background:url(https://file.garden/aDimhxnzZTNZok8q/Beautiful%20blizzard%20RayG.jpeg);
background-position:center;
background-size:cover;
float:left;
margin-top:178px;
margin-right:0px">
</div>
<!-- Image slot blizzard (hidden in mobile) -->
<!-- PART 1 -->
<div class="col-lg-6 col-md-12" style="overflow:hidden;">
<h1 style="font-family:'garamond'; font-size:4rem; display:inline-block;"><i>Emrys Blackhood</i></h1>
<div class="mb-2" style="display:inline-block; border:solid 1px white; border-radius:0px; height:40px; line-height:40px; padding:0 10px; vertical-align:middle; margin-left:8px;">He/him</div>
<div class="ml-1" style="border:solid 1px #fff; font-family:'garamond'; font-style:italic; text-align:center; padding:10px; max-width:670px;">
<i class="fa-solid fa-quote-left" style="opacity:0.5;"></i> a quote here <i class="fa-solid fa-quote-right" style="opacity:0.5;"></i>
</div>
<!-- Overview -->
<div class="ml-1 mt-1" style="background:url(https://i.pinimg.com/564x/20/fd/ab/20fdabedcff0022d169c398d0728e679.jpg);
background-size:cover; color:#585765; padding:21px;
max-width:620px;">
<div style="color:#fff; background-color:#6e757a; color:white; width:120px; padding:4px 8px; margin-bottom:10px;">
<i class="fa-regular fa-diamond fa-fw"></i> <b>Overview</b>
</div>
<p style="max-width:500px;">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.</p>
<!-- Stat diamond (hidden on mobile) -->
<div class="hidden-sm-down hidden-md-down" style="position:absolute; top:130px; right:20px; transform:translateY(-50%); z-index:0;">
<div style="transform:rotate(45deg); border:solid 1px #5c6267; display:inline-block; padding:8px;">
<div style="height:90px; width:90px; background-color:#5c6267;"></div>
</div>
<div style="position:absolute; top:10%; left:50%; transform:translate(-50%,0%); line-height:200%; color:white; text-align:center; pointer-events:none;">
<p style="font-size:11px; margin:0;">LEVEL<br><span style="font-size:52px; line-height:1;">00</span></p>
</div>
</div>
</div>
<!-- Fields -->
<div class="m-1 p-2" style="max-width:700px;
border:none;
background:url(https://i.pinimg.com/564x/20/fd/ab/20fdabedcff0022d169c398d0728e679.jpg);
background-size:cover;
color:#585765;">
<div class="row no-gutters">
<span class="mr-2 p-1 col-2 m-1 col-sm-6" style="color:#fff; background-color:#6e757a; font-weight:400;">Gender</span>
<p class="m-1">Male</p>
<span class="mr-2 p-1 m-1 col-2" style="color:#fff; background-color:#6e757a;r:#6e757a; font-weight:400;">Species</span>
<p class="m-1">Tiefling</p>
<span class="m-1 mr-2 p-1 col-2" style="color:#fff; background-color:#6e757a;r:#6e757a; font-weight:400;">Age</span>
<p class="m-1">25</p>
<span class="m-1 mr-2 p-1 col-2" style="color:#fff; background-color:#6e757a;r:#6e757a; font-weight:400;">Height</span>
<p class="m-1">5'5</p>
<span class="mr-2 p-1 m-1 col-2" style="color:#fff; background-color:#6e757a;r:#6e757a; font-weight:400;">Bday</span>
<p class="m-1">December 2nd</p>
</div>
</div>
</div>
<!-- dnd Stats (hidden in mobile)-->
<div class="hidden-sm-down hidden-md-down" style="margin-top:1px">
<!--stat-->
<div class="col-12" style="position:relative; min-height:2px; z-index:2;">
<div style="transform:rotate(45deg); border:solid 1px #5c6267; display:inline-block; padding:8px;">
<div style="height:50px; width:50px; background-color:#5c6267;"></div>
</div>
<div style="position:absolute; top:8%; left:13%; transform:translate(90%, 20%); line-height:130%; color:white; text-align:center;">
<p style="font-size:9px">STAT<br><span style="font-size:16px;">00</span></p>
</div>
</div>
<!--stat-->
<!--stat-->
<div class="col-12" style="position:relative; min-height:2px; z-index:2;">
<div style="transform:rotate(45deg); border:solid 1px #5c6267; display:inline-block; padding:8px;">
<div style="height:50px; width:50px; background-color:#5c6267;"></div>
</div>
<div style="position:absolute; top:8%; left:13%; transform:translate(90%,20%); line-height:130%; color:white; text-align:center;">
<p style="font-size:9px">STAT<br><span style="font-size:16px;">00</span></p>
</div>
</div>
<!--stat-->
<!--stat-->
<div class="col-12" style="position:relative; min-height:2px; z-index:2;">
<div style="transform:rotate(45deg); border:solid 1px #5c6267; display:inline-block; padding:8px;">
<div style="height:50px; width:50px; background-color:#5c6267;"></div>
</div>
<div style="position:absolute; top:8%; left:13%; transform:translate(90%,20%); line-height:130%; color:white; text-align:center;">
<p style="font-size:9px">STAT<br><span style="font-size:16px;">00</span></p>
</div>
</div>
<!--stat-->
<!--stat-->
<div class="col-12" style="position:relative; min-height:2px; z-index:2;">
<div style="transform:rotate(45deg); border:solid 1px #5c6267; display:inline-block; padding:8px;">
<div style="height:50px; width:50px; background-color:#5c6267;"></div>
</div>
<div style="position:absolute; top:8%; left:13%; transform:translate(90%,20%); line-height:130%; color:white; text-align:center;">
<p style="font-size:9px">STAT<br><span style="font-size:16px;">00</span></p>
</div>
</div>
<!--stat-->
</div>
<!-- dnd Stats (hidden in mobile)-->
<!--=====part 1======-->
<!--==PART 2==-->
<!--==INVENTORY (mobile version)==-->
<h1 class="m-1 d-xl-none" style="font-family:'garamond';
font-size:4rem;"><i>Inventory</i></h1>
<div class="card mx-auto m-1 p-2 d-xl-none col-12 text-center" style="max-width:360px;
border:none;
border-radius:0px;
background:url(https://i.pinimg.com/564x/20/fd/ab/20fdabedcff0022d169c398d0728e679.jpg);
color:#5c6267;">
<!--Item-->
<div class="card m-2 mx-auto" style="height:140px;
width:140px;
background-image:url(https://www.pokepedia.fr/images/e/e7/Pikachu-RFVF.png);
background-position:center;
background-size:contain;
background-repeat:no-repeat;
background-color:transparent;
border:none;"></div>
<div class="card p-1 m-1" style="border-radius:0;background-color:#5c6267; font-weight:800;color:#fff">Item</div>
<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>
<!--Item-->
<!--Item-->
<div class="card m-2 mx-auto" style="height:140px;
width:140px;
background-image:url(https://www.pokepedia.fr/images/e/e7/Pikachu-RFVF.png);
background-position:center;
background-size:contain;
background-repeat:no-repeat;
background-color:transparent;
border:none;"></div>
<div class="card p-1 m-1" style="border-radius:0;background-color:#5c6267; font-weight:800;color:#fff">Item</div>
<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>
<!--Item-->
</div>
<!--==INVENTORY (mobile version) END ==-->
<!--==INVENTORY (Pc version) ==-->
<div class="row no-gutters m-1 justify-content-end">
<div class="col-6 hidden-md-down hidden-sm-down m-0">
<h1 class="m-1" style="font-family:'garamond'; font-size:4rem;"><i>Inventory</i></h1>
<div class="card m-1 mt-2 p-3" style="border:none;
border-radius:0rem;
background:url(https://i.pinimg.com/564x/20/fd/ab/20fdabedcff0022d169c398d0728e679.jpg);
max-width:480px;">
<div class="row">
<div class="card m-2" style="height:140px; width:140px;
background-image:url(https://www.pokepedia.fr/images/e/e7/Pikachu-RFVF.png);
background-position:center;
background-size:contain;
background-repeat:no-repeat;
background-color:transparent;
border:none;"></div>
<div class="col">
<div class="card p-1 m-1" style="border-radius:0;background-color:#5c6267; font-weight:800;">Item</div>
<p style="color:#5c6267;">Lorem ipsum...</p>
</div>
</div>
<div class="row" style="flex-direction: row-reverse;">
<div class="card m-2" style="height:140px; width:140px; background-image:url(https://www.pokepedia.fr/images/e/e7/Pikachu-RFVF.png); background-position:center; background-size:contain; background-repeat:no-repeat; background-color:transparent; border:none;"></div>
<div class="col-8">
<div class="card p-1 m-1" style="border-radius:0;background-color:#5c6267; font-weight:800;">Item</div>
<p style="color:#5c6267;float:right">Long description here or it will look weird</p>
</div>
</div>
<div class="row">
<div class="card m-2" style="height:140px; width:140px; background-image:url(https://www.pokepedia.fr/images/e/e7/Pikachu-RFVF.png); background-position:center; background-size:contain; background-repeat:no-repeat; background-color:transparent; border:none;"></div>
<div class="col">
<div class="card p-1 m-1" style="border-radius:0;background-color:#5c6267; font-weight:800;">Item</div>
<p style="color:#5c6267;">Lorem ipsum...</p>
</div>
</div>
</div>
<!--inventory (pc version) END-->
<!--Image slot (pc version)-->
<div class="card m-1 hidden-sm-down hidden-md-down" style="width:480px;
height:60px;
border:none;
border-radius:0;
background-image:url(https://i.pinimg.com/736x/d0/f3/e1/d0f3e19fe2cbe89e678d488175d7c567.jpg);
background-position:center;
background-size:cover;
background-repeat:no-repeat;"></div>
<!--Image slot (pc version)-->
<!--Image slot (mobile version)-->
<div class="card m-1 d-xl-none mx-auto" style="width:360px;
height:60px;
border:none;
border-radius:0;
background-image:url(https://i.pinimg.com/736x/d0/f3/e1/d0f3e19fe2cbe89e678d488175d7c567.jpg);
background-position:center;
background-size:cover;
background-repeat:no-repeat;"></div>
</div>
<!---appearance (pc version)-->
<div class="col hidden-sm-down hidden-md-down">
<div class="row no-gutters m-1">
<div class="card p-1 ml-0 col-5" style="min-height:10px;
width:300px;
border:none;
background:url(https://i.pinimg.com/736x/98/c4/20/98c4205853f85111d5b1da70f6261ed2.jpg);
background-position: center;
background-size:280px;
background-repeat:no-repeat;">
<img src="https://file.garden/aDimhxnzZTNZok8q/IMG_7533.png" style="min-width:490px;z-index:1;position:relative;
left:-80px">
</div>
<div class="card p-2 ml-0 col-7" style="height:575px;
width:300px;
margin-top:0px
margin-left:40px;
border-radius:0px;
border:none;
background-image:url(https://i.pinimg.com/564x/20/fd/ab/20fdabedcff0022d169c398d0728e679.jpg);
background-repeat:no-repeat;
background-size:cover;
height:580px;
margin-top:75px">
<div class="row no-gutters justify-content-end" style="position:sticky;
top:100px">
<div class="card col-12 p-2 m-1 mb-4" style="border-radius:0;background-color:#5c6267;font-weight:800">Palette</div>
<div class="card p-1 ml-0 mb-2" style="height:40px;
width:190px;
border-radius:0;
border:none;
margin-right:-8px;
background-color:#398a6b">#HEXCODE</div>
<div class="card p-1 ml-2 mb-2" style="height:40px;
width:190px;
border-radius:0;
border:none;
margin-right:-8px;
background-color:#8ed7bb">#HEXCODE</div>
<div class="card p-1 ml-2 mb-2" style="height:40px;
width:190px;
border-radius:0;
border:none;
margin-right:-8px;
background-color:#ecfff8">#HEXCODE</div>
<div class="card p-1 ml-2 mb-2" style="height:40px;
width:190px;
border-radius:0;
border:none;
margin-right:-8px;
background-color:#8eb4d7">#HEXCODE</div>
<div class="card p-1 ml-2 mb-2" style="height:40px;
width:190px;
border-radius:0;
border:none;
margin-right:-8px;
background-color:#1f1875">#HEXCODE</div>
</div>
<!--Design notes (pc version)-->
<div class="card p-2 hidden-sm-down hidden-md-down" style="width:120px;border:none;border-radius:0;background-color:#6e757a;
position:absolute;bottom:22px;right:220px;z-index:2">
<div id="accordion">
<p class="text-center" style="font-size:20px;">Design notes</p>
<!--- button -->
<a class="btn btn-block rounded-0 p-1 " data-toggle="collapse" style="color:white;background-color:none;" data-target="#item1"> <i class="fa-sharp fa-arrow-down"></i>
</a>
<!-- end button -->
<div id="item1" class="collapse" data-parent="#accordion" style="transition:all 0.8s">
<!-- item -->
<ul class="text-center">
<li>content</li>
<li>content</li>
</ul>
<!-- item -->
</div>
</div>
<!--===================-->
</div>
<!--Design notes (pc version)-->
</div>
</div>
</div>
<!---appearance (pc version)-->
</div>
<!--Image slot (mobile version)-->
<!--appearance (mobile)-->
<div class="d-lg-none">
<img src="https://file.garden/aDimhxnzZTNZok8q/IMG_7533.png">
<div class="card mx-auto m-1 p-2 text-center" style="width:350px;
border-radius:0;
border:none;
background-color:#398a6b;">#HEXCODE</div>
<div class="card mx-auto m-1 p-2 text-center" style="width:350px;
border-radius:0;
border:none;
background-color:#8ed7bb;">#HEXCODE</div>
<div class="card mx-auto m-1 p-2 text-center" style="width:350px;
border-radius:0;
border:none;
background-color:#ecfff8;">#HEXCODE</div>
<div class="card mx-auto m-1 p-2 text-center" style="width:350px;
border-radius:0;
border:none;
background-color:#8eb4d7;">#HEXCODE</div>
<div class="card mx-auto m-1 p-2 text-center" style="width:350px;
border-radius:0;
border:none;
background-color:#1f1875;">#HEXCODE</div>
<!--Design notes-->
<div class="card rounded p-2 mx-auto" style="max-width:350px;border:none;border-radius:0;background-color:#6e757a">
<div id="accordion">
<p class="text-center" style="font-size:20px;">Design notes</p>
<!--- button -->
<a class="btn btn-block rounded-0 p-1 " data-toggle="collapse" style="color:white;background-color:none;" data-target="#item1"> <i class="fa-sharp fa-arrow-down"></i>
</a>
<!-- end button -->
<div id="item1" class="collapse" data-parent="#accordion" style="transition:all 0.8s">
<!-- item -->
<ul class="text-center">
<li>content</li>
<li>content</li>
</ul>
<!-- item -->
</div>
</div>
<!--===================-->
</div>
<!--Design notes-->
</div>
<!--appearance (mobile)-->
</div>
<!--==PART 2==-->
<!--==PART 3==-->
<div class="row no-gutters justify-content-center">
<!--Backstory section-->
<div class="row no-gutters mt-0" style="width:350px;">
<ul class="nav mb-0 mt-4">
<li class="mb-0 ml-0 mr-0">
<a class="card p-2 m-0 text-center" style="width:120px;
border-radius:0;
border:none;
background-color:#5c6267;
color:white" data-toggle="tab" href="#reg1">
<p style="font-family:'georgia'">I</p>
</a>
</li>
<li class="mb-0 ml-0 mr-0">
<a class="card p-2 m-0 text-center" style="width:120px;
border-radius:0;
border:none;
background-color:#5c6267;
color:white" data-toggle="tab" href="#reg2">
<p style="font-family:'georgia'">II</p>
</a>
</li>
<li class="mb-0 ml-0 mb-0 mr-0">
<a class="card p-2 m-0 text-center" style="width:110px;
border-radius:0;
border:none;
background-color:#5c6267;
color:white" data-toggle="tab" href="#reg3">
<p style="font-family:'georgia'">III</p>
</a>
</li>
</ul>
<!---->
<div class="card p-3 mt-0 col-12" style="max-width:350px;
height:280px;
min-height:280px;
border-radius:0;
border:none;
background:url(https://i.pinimg.com/564x/20/fd/ab/20fdabedcff0022d169c398d0728e679.jpg);
overflow:auto;
margin-bottom:30px;
color:#5c6267;">
<div class="tab-content">
<!-- ===================== TAB 1 ===================== -->
<div class="tab-pane fade in active show" id="reg1">
<p class="m-1" style="color:#fff;font-weight:900;font-size:12px;">
<span class="p-1" style="background-color:#5c6267;"> Arc 1 </span>
</p>
<p style="#5c6267">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>
<!-- ===================== TAB 1 ===================== -->
<!-- ===================== TAB 2 ===================== -->
<div class="tab-pane fade" id="reg2">
<p class="m-1" style="color:#fff;font-weight:900;font-size:12px;">
<span class="p-1" style="background-color:#5c6267;"> Arc 2 </span>
</p>
<p style="#5c6267">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>
<!-- ===================== TAB 2 ===================== -->
<!-- ===================== TAB 3 ===================== -->
<div class="tab-pane fade" id="reg3">
<p class="m-1" style="color:#fff;font-weight:900;font-size:12px;">
<span class="p-1" style="background-color:#5c6267;"> Arc 3 </span>
</p>
<p style="#5c6267">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>
<!-- ===================== TAB 3 ===================== -->
</div>
</div>
<!---->
<!-- FIN TAB CONTENT -->
</div>
<!-- image slot -->
<div class="card p-2 hidden-sm-down hidden-md-down" style="width:430px;
border-radius:0;
border:none;
background-image:url(https://i.pinimg.com/1200x/d1/a1/dc/d1a1dc851821c136d25fb11696e82570.jpg)"></div>
<!--image slot -->
<!--Backstory section-->
</div>
<!--==PART 3==-->
<!--===PART 4==-->
<div class="row justify-content-center mt-5">
<!--relationship-->
<div class="card m-2" style="width:300px;
height:500px;
border:none;
border-radius:0;
background:url(https://i.pinimg.com/564x/20/fd/ab/20fdabedcff0022d169c398d0728e679.jpg);
color:#5c6267;
overflow:auto">
<div class="card p-2 m-0 text-center" style="height:40px;
border-radius:0px;
border:none;
font-size:20px;
background-color:#5c6267">
<a href="URL_HERE" style="color:white">character name</a>
<div class="card m-2 mt-4 mx-auto" style="min-height:170px;
width:170px;
border-radius:0px;
border:none;
background-image:url(https://i.pinimg.com/1200x/10/e7/5d/10e75ddf2307de856efe886238410cc1.jpg);
background-size:contain;
background-position:center;
background-repeat:no-repeat"></div>
<p style="font-size:16px;letter-spacing:0px"> relationship > <i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart"></i>
<i class="fa-regular fa-heart"></i>
</p>
<div class="row no-gutters">
<div class="card p-1 m-1 col-1" style="height:120px;
max-width:1px;
border-radius:0;
background:#5c6267;
border:none"></div>
<div class="col mt-2 text-left">
<p style="font-size:13px">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>
</div>
<!--relationship-->
<!--relationship-->
<div class="card m-2" style="width:300px;
height:500px;
border:none;
border-radius:0;
background:url(https://i.pinimg.com/564x/20/fd/ab/20fdabedcff0022d169c398d0728e679.jpg);
color:#5c6267;
overflow:auto">
<div class="card p-2 m-0 text-center" style="height:40px;
border-radius:0px;
border:none;
font-size:20px;
background-color:#5c6267">
<a href="URL_HERE" style="color:white">character name</a>
<div class="card m-2 mt-4 mx-auto" style="min-height:170px;
width:170px;
border-radius:0px;
border:none;
background-image:url(https://i.pinimg.com/1200x/10/e7/5d/10e75ddf2307de856efe886238410cc1.jpg);
background-size:contain;
background-position:center;
background-repeat:no-repeat"></div>
<p style="font-size:16px;letter-spacing:0px"> relationship > <i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart"></i>
<i class="fa-regular fa-heart"></i>
</p>
<div class="row no-gutters">
<div class="card p-1 m-1 col-1" style="height:120px;
max-width:1px;
border-radius:0;
background:#5c6267;
border:none"></div>
<div class="col mt-2 text-left">
<p style="font-size:13px">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>
</div>
<!--relationship-->
<!--relationship-->
<div class="card m-2" style="width:300px;
height:500px;
border:none;
border-radius:0;
background:url(https://i.pinimg.com/564x/20/fd/ab/20fdabedcff0022d169c398d0728e679.jpg);
color:#5c6267;
overflow:auto">
<div class="card p-2 m-0 text-center" style="height:40px;
border-radius:0px;
border:none;
font-size:20px;
background-color:#5c6267">
<a href="URL_HERE" style="color:white">character name</a>
<div class="card m-2 mt-4 mx-auto" style="min-height:170px;
width:170px;
border-radius:0px;
border:none;
background-image:url(https://i.pinimg.com/1200x/10/e7/5d/10e75ddf2307de856efe886238410cc1.jpg);
background-size:contain;
background-position:center;
background-repeat:no-repeat"></div>
<p style="font-size:16px;letter-spacing:0px"> relationship > <i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart"></i>
<i class="fa-regular fa-heart"></i>
</p>
<div class="row no-gutters">
<div class="card p-1 m-1 col-1" style="height:120px;
max-width:1px;
border-radius:0;
background:#5c6267;
border:none"></div>
<div class="col mt-2 text-left">
<p style="font-size:13px">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>
</div>
<!--add more below-->
<!--relationship)-->
<!--credits-->
<a class="col-12 text-center tooltipster" data-toggle="tooltip" title="custom code by jakuma :)" href="https://toyhou.se/jakuma"><i class="fa-sharp fa-code"></i></a>
<!---->
</div>
<!--===PART 4==-->
</div>
<!-- layout end-->
<!--CODE END-->
