<div class="container p-0">
<div class="card d-block rounded-0 p-2 mb-2" style="border-style:dashed;">
<h1 class="bg-primary text-white p-2 text-uppercase display-4" style="letter-spacing: 2px;">
<i class="fas fa-list pull-right" /> Wishlist</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at tellus sodales, sodales libero quis, maximus tellus. Ut sed pulvinar nisi. Phasellus eu massa leo. Praesent metus erat, hendrerit accumsan sagittis et, auctor id enim. Cras eget magna vestibulum, varius tellus euismod, semper metus. Suspendisse potenti. Praesent eu enim ut risus rutrum pharetra. Quisque tempus tortor vel nunc malesuada pretium. Praesent eu mollis augue.</p>
<!--------------- DESIGNERS SECTION -------------------------------------------------->
<h2 class="text-uppercase mt-4" style="letter-spacing:1px; font-weight: 300; border-bottom-width: 1px; border-bottom-style:solid;">
Designers</h2>
<div class="row">
<!------- LEFT SIDE ---------------->
<div class="col-md-6">
<ul class="mb-0">
<li class="mb-2"><a href="DESIGNER LINK" target="_BLANK">Designer Name</a>
<ul><li>
types of designs you are seeking from that designer
</li></ul>
</li>
<li class="mb-2"><a href="DESIGNER LINK" target="_BLANK">Designer Name</a>
<ul><li>
seeking description
</li></ul>
</li>
<li class="mb-2"><a href="DESIGNER LINK" target="_BLANK">Designer Name</a>
<ul><li>
seeking description
</li></ul>
</li>
<li class="mb-2"><a href="DESIGNER LINK" target="_BLANK">Designer Name</a>
<ul><li>
seeking description
</li></ul>
</li>
</ul>
</div>
<div class="col-md-6">
<!------- RIGHT SIDE ---------------->
<ul class="mb-0">
<li class="mb-2"><a href="DESIGNER LINK" target="_BLANK">Designer Name</a>
<ul><li>
seeking description
</li></ul>
</li>
<li class="mb-2"><a href="DESIGNER LINK" target="_BLANK">Designer Name</a>
<ul><li>
seeking description
</li></ul>
</li>
<li class="mb-2"><a href="DESIGNER LINK" target="_BLANK">Designer Name</a>
<ul><li>
seeking description
</li></ul>
</li>
<li class="mb-2"><a href="DESIGNER LINK" target="_BLANK">Designer Name</a>
<ul><li>
seeking description
</li></ul>
</li>
</ul>
</div>
</div>
<!--------------- SPECIES SECTION -------------------------------------------------->
<h2 class="text-uppercase mt-4" style="letter-spacing:1px; font-weight: 300; border-bottom-width: 1px; border-bottom-style:solid;">
Closed Species</h2>
<div class="row">
<!------- LEFT SIDE ---------------->
<div class="col-md-6">
<ul class="mb-0">
<li class="mb-2">Species Name
<ul><li>
traits you are looking for</li></ul>
</li>
<li class="mb-2">Species Name
<ul><li>
traits you are looking for</li></ul>
</li>
<li class="mb-2">Species Name
<ul><li>
traits you are looking for</li></ul>
</li>
</ul>
</div>
<div class="col-md-6">
<!------- RIGHT SIDE ---------------->
<ul class="mb-0">
<li class="mb-2">Species Name
<ul><li>
traits you are looking for</li></ul>
</li>
<li class="mb-2">Species Name
<ul><li>
traits you are looking for</li></ul>
</li>
<li class="mb-2">Species Name
<ul><li>
traits you are looking for</li></ul>
</li>
</ul>
</div>
</div>
<!--------------- INTERESTS SECTION -------------------------------------------------->
<h2 class="text-uppercase mt-4" style="letter-spacing:1px; font-weight: 300; border-bottom-width: 1px; border-bottom-style:solid;">
General Interests</h2>
<div class="row">
<!-------------- SEEKING -------------------------->
<div class="col-md-6">
<h4 style="letter-spacing:1px; font-weight: 400;"><i class="fal fa-check fa-fw"/> Seeking</h4>
<ul class="mb-0">
<li class="mb-2">content</li>
<li class="mb-2">content</li>
<li class="mb-2">content</li>
<li class="mb-2">content</li>
<li class="mb-2">content</li>
</ul>
</div>
<!-------------- NOT INTERESTED -------------------------->
<div class="col-md-6">
<h4 style="letter-spacing:1px; font-weight: 400;"><i class="fal fa-times fa-fw"/> Not Interested</h4>
<ul class="mb-0">
<li class="mb-2">content</li>
<li class="mb-2">content</li>
<li class="mb-2">content</li>
<li class="mb-2">content</li>
<li class="mb-2">content</li>
</ul>
</div>
</div>
</div>
<p class="text-right small">HTML by @Pinky</p>
</div>