Safe's editor, editing: Path by Togo

Contact me if you need help
← Go Back
Template Information

Path by Togo

Notice

Please visit the author and give your support for the theme.
Learn more
Author's Rules

The author, Togo, has a set of rules that you must follow when using the template. Please check them here.
See the rules
Form

Profile +

Properties +

Alignments +

Moodboard +

History +

Design +

Design Notes +

Personality +

Big Relationships +

Small Relationships +

Preview

Images may render weird or be placed wrongly within their container.
NAME SURNAME
adjective • adjective • adjective
NICKNAME
•
content
AGE
•
content
GENDER
•
content
ORIENTATION
•
content
OCCUPATION
•
content
ROLE
•
content
STATUS
•
content
reserved
friendly
immature
serious
timid
brave
sincere
deceptive
sensitive
tough
lazy
diligent
history
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla viverra quis enim nec accumsan. In hac habitasse platea dictumst. Mauris blandit scelerisque augue et sollicitudin. Integer eget dignissim massa. Cras gravida nulla sit amet justo malesuada vestibulum. Praesent posuere commodo tellus at convallis. Sed in lectus feugiat, hendrerit elit vel, tempor ante. Integer interdum luctus lorem, eu euismod diam sagittis eget. Nulla et tempor augue. Maecenas pulvinar blandit arcu vel fringilla.
"A quote, title or tagline goes here."
HEIGHT
content
WEIGHT
content
BUILD
content
SPECIES
content
HAIR
color
SKIN
color
EYES
color
design notes
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Aliquam massa quam, pellentesque vitae vulputate ac
WORTH $0
MBTI // ALIGNMENT // ZODIAC // ELEMENT
personality
NAME
relationship
••
A short relationship summary goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sollicitudin, velit et mattis hendrerit.
NAME
relationship
••
These boxes will not scroll, so keep them short! Aenean vestibulum interdum enim sed sollicitudin. Integer non quam nunc. Curabitur commodo eros nec ornare varius.
NAME
relationship
NAME
relationship
NAME
relationship
Results

<!--==========================================

    [06] PATH by TOGO

    TEMPLATE AUTO-EDITED BY @SAFE HTTPS://TOYHOU.SE/SAFE || TEMPLATES GIVEN WITH EXPLICIT PERMISSION BY AUTHOR.
    
    -- -- -- -- -- -- -- -- -- -- -- -- -- -- 
    anything you need to edit should be
    tabbed and clearly marked - i've also
    added comments for light code edits you 
    may want to do. feel free to change
    any themed elements to your needs!
    -- -- -- -- -- -- -- -- -- -- -- -- -- --
    
    > do not use with WYSIWYG on, it will
      break the code.
    > keep my credit in.
    > direct any questions to my comments,
      PMs or discord. thank you!

===========================================-->

<!-- MAIN CONTAINER =======================-->

<div class="mx-auto my-5 p-5" style="max-width: 1000px; 

    background-image: url(https://images.unsplash.com/photo-1575489272413-cb506258027e); 
    background-size: cover;
    /* | background image - change background-size to a pixel value if you're using a seamless pattern */;

background-position: center; border-radius: 15px;">
<div class="row justify-content-center">
<div class="col-auto order-lg-1 flex-column">

<!-- ICON + NAME (MIDDLE) CARD ============-->

<div class="card mb-4 p-3 border-0" style="flex: 1 1 0; max-width: 232px; border-radius: 116px 116px 15px 15px; box-shadow: 0 0 10px rgba(0,0,0,.4);">
<img class="bg-success rounded-circle" 

    src="/img/placeholder-transparent.png" style="width: 200px;">
    <!-- icon - 200x200 looks best -->
    
<p class="mt-3 mb-0 text-center text-success" style="font-size: 22px; letter-spacing: 1px; font-variant: small-caps;">
    
    NAME SURNAME

</p>
<div class="row no-gutters align-items-center my-1">
<div class="col">
<hr class="m-0">
</div>
<div class="col-auto">
  
    <i class="fad fa-seedling mx-3 text-success"></i>

</div>
<div class="col">
<hr class="m-0">
</div>
</div>
<p class="text-center text-muted">
    
    adjective • adjective • adjective

</p>
<hr class="w-100 my-3">

<!-- MUSIC PLAYER =======================-->

<div style="position: relative; height: 100px; border-radius: 10px; overflow: hidden;">
<iframe width="200" height="300" 

    src="https://www.youtube.com/embed/nx-qpEMUzes?controls=0" frameborder="0" style="position: absolute; top: -100px;"></iframe>
    <!-- replace with youtube embed, keep ?controls=0 at the end -->
    
</div>
</div>
</div>
<div class="col-lg flex-column mt-lg-5 pt-lg-5">
  
<!-- FIELDS (LEFT) CARD ====================
 
  > you can edit the names and values of
    fields, but keep the amount the same -
    if they're not the cards will end up 
    with empty spaces at the bottom.
    
=========================================-->

<div class="card mt-lg-5 mb-4 p-3 text-monospace text-muted border-0" style="flex: 1 1 0; border-radius: 60px 15px 15px 15px; box-shadow: 0 0 10px rgba(0,0,0,.4);">
<hr class="m-0" style="position: absolute; top: 32px; right: 64px; left: 40px;">
<p class="text-right mb-1">

    <i class="fad fa-tree-alt text-success" style="font-size: 32px;"></i>

</p>
<div class="row no-gutters align-items-center">
<div class="col text-success">
    
    NICKNAME

</div>
<div class="col-auto mx-2 text-success">
•
</div>
<div class="col text-right">

    content

</div>
</div>
<hr class="w-100 my-2">
<!--====================================-->
<div class="row no-gutters align-items-center">
<div class="col text-success">

    AGE

</div>
<div class="col-auto mx-2 text-success">
•
</div>
<div class="col text-right">

    content

</div>
</div>
<hr class="w-100 my-2">
<!--====================================-->
<div class="row no-gutters align-items-center">
<div class="col text-success">

    GENDER

</div>
<div class="col-auto mx-2 text-success">
•
</div>
<div class="col text-right">

    content

</div>
</div>
<hr class="w-100 my-2">
<!--====================================-->
<div class="row no-gutters align-items-center">
<div class="col text-success">

    ORIENTATION

</div>
<div class="col-auto mx-2 text-success">
•
</div>
<div class="col text-right">

    content

</div>
</div>
<hr class="w-100 my-2">
<!--====================================-->
<div class="row no-gutters align-items-center">
<div class="col text-success">

    OCCUPATION

</div>
<div class="col-auto mx-2 text-success">
•
</div>
<div class="col text-right">

    content

</div>
</div>
<hr class="w-100 my-2">
<!--====================================-->
<div class="row no-gutters align-items-center">
<div class="col text-success">

    ROLE

</div>
<div class="col-auto mx-2 text-success">
•
</div>
<div class="col text-right">

    content

</div>
</div>
<hr class="w-100 my-2">
<!--====================================-->
<div class="row no-gutters align-items-center">
<div class="col text-success">

    STATUS

</div>
<div class="col-auto mx-2 text-success">
•
</div>
<div class="col text-right">

    content

</div>
</div>
</div>
</div>
<div class="col-lg order-lg-2 flex-column mt-lg-5 pt-lg-5">

<!-- PERSONALITY BARS (RIGHT) CARD =========
 
  > like fields you can edit the names on
    the sides of the progress bars, but 
    keep the same amount !
  
=========================================-->

<div class="card mt-lg-5 mb-4 p-3 text-monospace text-muted border-0" style="flex: 1 1 0; font-size: 18px; font-variant: small-caps; border-radius: 15px 60px 15px 15px; box-shadow: 0 0 10px rgba(0,0,0,.4);">
<hr class="m-0" style="position: absolute; top: 32px; right: 40px; left: 64px;">
<p>

    <i class="fad fa-acorn text-success" style="font-size: 32px;"></i>

</p>
<div class="row no-gutters align-items-center">
<div class="col text-truncate">
    
    reserved

</div>
<div class="col-6">
<div class="progress mt-1 mx-2 rounded-0" style="height: 2px; overflow: visible;">
<div class="progress-bar" style="height: 100%; 

    width: 50%; 

background-color: transparent;"></div>
<div class="bg-success" style="height: 8px; width: 8px; margin: -3px 0 0 -4px; border-radius: 50%;"></div>
</div>
</div>
<div class="col text-right text-truncate">

    friendly

</div>
</div>
<hr class="w-100 my-2">
<!--====================================-->
<div class="row no-gutters align-items-center">
<div class="col text-truncate">

    immature

</div>
<div class="col-6">
<div class="progress mt-1 mx-2 rounded-0" style="height: 2px; overflow: visible;">
<div class="progress-bar" style="height: 100%; 
    
    width: 50%; 

background-color: transparent;"></div>
<div class="bg-success" style="height: 8px; width: 8px; margin: -3px 0 0 -4px; border-radius: 50%;"></div>
</div>
</div>
<div class="col text-right text-truncate">
    
    serious

</div>
</div>
<hr class="w-100 my-2">
<!--====================================-->
<div class="row no-gutters align-items-center">
<div class="col text-truncate">

    timid

</div>
<div class="col-6">
<div class="progress mt-1 mx-2 rounded-0" style="height: 2px; overflow: visible;">
<div class="progress-bar" style="height: 100%; 

    width: 50%; 

background-color: transparent;"></div>
<div class="bg-success" style="height: 8px; width: 8px; margin: -3px 0 0 -4px; border-radius: 50%;"></div>
</div>
</div>
<div class="col text-right text-truncate">

    brave

</div>
</div>
<hr class="w-100 my-2">
<!--====================================-->
<div class="row no-gutters align-items-center">
<div class="col text-truncate">

    sincere

</div>
<div class="col-6">
<div class="progress mt-1 mx-2 rounded-0" style="height: 2px; overflow: visible;">
<div class="progress-bar" style="height: 100%; 

    width: 50%; 

background-color: transparent;"></div>
<div class="bg-success" style="height: 8px; width: 8px; margin: -3px 0 0 -4px; border-radius: 50%;"></div>
</div>
</div>
<div class="col text-right text-truncate">
    
    deceptive

</div>
</div>
<hr class="w-100 my-2">
<!--====================================-->
<div class="row no-gutters align-items-center">
<div class="col text-truncate">
  
    sensitive

</div>
<div class="col-6">
<div class="progress mt-1 mx-2 rounded-0" style="height: 2px; overflow: visible;">
<div class="progress-bar" style="height: 100%; 

    width: 50%; 
    
background-color: transparent;"></div>
<div class="bg-success" style="height: 8px; width: 8px; margin: -3px 0 0 -4px; border-radius: 50%;"></div>
</div>
</div>
<div class="col text-right text-truncate">
    
    tough

</div>
</div>
<hr class="w-100 my-2">
<!--====================================-->
<div class="row no-gutters align-items-center">
<div class="col text-truncate">

    lazy

</div>
<div class="col-6">
<div class="progress mt-1 mx-2 rounded-0" style="height: 2px; overflow: visible;">
<div class="progress-bar" style="height: 100%; 

    width: 50%; 

background-color: transparent;"></div>
<div class="bg-success" style="height: 8px; width: 8px; margin: -3px 0 0 -4px; border-radius: 50%;"></div>
</div>
</div>
<div class="col text-right text-truncate">
    
    diligent

</div>
</div>
</div>
</div>
</div>

<!-- MOODBOARD ==========================-->

<div class="card p-2 mb-5 border-0" style="border-radius: 15px; box-shadow: 0 0 10px rgba(0,0,0,.4);">
<div class="row no-gutters">
<div class="col-6 col-lg-3 p-2">
<div class="w-100 bg-faded" style="padding-bottom: 100%; 

    background-image: url(/img/placeholder-solid.png); 

background-size: cover; background-position: center; border-radius: 8px;"></div>
</div>
<div class="col-6 col-lg-3 p-2">
<div class="w-100 bg-faded" style="padding-bottom: 100%; 

    background-image: url(/img/placeholder-solid.png); 

background-size: cover; background-position: center; border-radius: 8px;"></div>
</div>
<div class="col-6 col-lg-3 p-2">
<div class="w-100 bg-faded" style="padding-bottom: 100%; 

    background-image: url(/img/placeholder-solid.png); 
    
background-size: cover; background-position: center; border-radius: 8px;"></div>
</div>
<div class="col-6 col-lg-3 p-2">
<div class="w-100 bg-faded" style="padding-bottom: 100%; 

    background-image: url(/img/placeholder-solid.png); 
    
background-size: cover; background-position: center; border-radius: 8px;"></div>
</div>
</div>
</div>

<!-- HISTORY ============================-->

<div class="row flex-lg-row-reverse my-4">
<div class="col-lg-auto text-center">

    <img src="/img/placeholder-transparent.png" class="mb-4" style="max-width: 300px;" >
    <!-- pagedoll - looks best transparent -->

</div>
<div class="col-lg flex-column">
<div class="card d-block d-lg-flex mb-4 p-3 border-0" style="flex: 1 1 0; border-radius: 15px; box-shadow: 0 0 10px rgba(0,0,0,.4);">
<div class="row no-gutters align-items-center mb-2">
<div class="col-auto">
<p class="text-success mt-n2" style="font-size: 28px; letter-spacing: 1px; font-variant: small-caps;">
      
    history

</p>
</div>
<div class="col">
<hr class="my-0 mx-3">
</div>
<div class="col-auto">
  
    <i class="fad fa-tree-large text-success" style="font-size: 24px;"></i>

</div>
</div>
<div style="flex: 1 1 0; overflow-y: auto;">
  
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla viverra quis enim nec accumsan. In hac habitasse platea dictumst. Mauris blandit scelerisque augue et sollicitudin. Integer eget dignissim massa. Cras gravida nulla sit amet justo malesuada vestibulum. Praesent posuere commodo tellus at convallis. Sed in lectus feugiat, hendrerit elit vel, tempor ante. Integer interdum luctus lorem, eu euismod diam sagittis eget. Nulla et tempor augue. Maecenas pulvinar blandit arcu vel fringilla. </p>

</div>
<p class="mt-3 text-monospace text-right text-success"><i>
  
    "A quote, title or tagline goes here."

</i></p>
</div>
</div>
</div>

<!-- DESIGN =============================-->

<div class="row justify-content-center align-items-center">
<div class="col-lg-auto order-lg-1 text-center">
  
    <img src="/img/placeholder-transparent.png" class="w-100 mb-4" style="max-width: 550px;">
    <!-- main fullbody image - looks best transparent -->

</div>
<div class="col-auto order-lg-2">
    
<!-- COLOUR SCHEME ======================-->

<div class="card flex-row flex-lg-column p-2 mb-4 border-0" style="border-radius: 30px; box-shadow: 0 0 10px rgba(0,0,0,.4);">
<div class="mr-2 mr-lg-0 mb-lg-2" style="

    background-color: #000000; 

width: 40px; height: 40px; border-radius: 50%;"></div>
<div class="mr-2 mr-lg-0 mb-lg-2" style="

    background-color: #111; 

width: 40px; height: 40px; border-radius: 50%;"></div>
<div class="mr-2 mr-lg-0 mb-lg-2" style="

    background-color: #222; 

width: 40px; height: 40px; border-radius: 50%;"></div>
<div class="mr-2 mr-lg-0 mb-lg-2" style="

    background-color: #333; 

width: 40px; height: 40px; border-radius: 50%;"></div>
<div style="

    background-color: #444; 

width: 40px; height: 40px; border-radius: 50%;"></div>
</div>
    
</div>
<div class="col-lg">

<!-- DESIGN DETAILS + NOTES =============-->

<div class="card mb-2 p-3 text-monospace border-0" style="border-radius: 25px 25px 5px 5px; box-shadow: 0 0 10px rgba(0,0,0,.4);">
<div class="row no-gutters align-items-center">
<div class="col text-success">

    HEIGHT

</div>
<div class="col-auto mx-2 text-success">
//
</div>
<div class="col text-right">

    content

</div>
</div>
<hr class="w-100 my-1">
<!--====================================-->
<div class="row no-gutters align-items-center">
<div class="col text-success">

    WEIGHT

</div>
<div class="col-auto mx-2 text-success">
//
</div>
<div class="col text-right">

    content

</div>
</div>
<hr class="w-100 my-1">
<!--====================================-->
<div class="row no-gutters align-items-center">
<div class="col text-success">

    BUILD

</div>
<div class="col-auto mx-2 text-success">
//
</div>
<div class="col text-right">

    content

</div>
</div>
<hr class="w-100 my-1">
<!--====================================-->
<div class="row no-gutters align-items-center">
<div class="col text-success">

    SPECIES

</div>
<div class="col-auto mx-2 text-success">
//
</div>
<div class="col text-right">

    content

</div>
</div>
</div>
<!--====================================-->
<div class="card mb-4 p-3 text-monospace border-0" style="border-radius: 5px 5px 25px 25px; box-shadow: 0 0 10px rgba(0,0,0,.4);">
<div class="row no-gutters align-items-center">
<div class="col text-success">

    HAIR

</div>
<div class="col-auto mx-2 text-success">
//
</div>
<div class="col text-right">

    color

</div>
</div>
<hr class="w-100 my-1">
<!--====================================-->
<div class="row no-gutters align-items-center">
<div class="col text-success">

    SKIN

</div>
<div class="col-auto mx-2 text-success">
//
</div>
<div class="col text-right">

    color

</div>
</div>
<hr class="w-100 my-1">
<!--====================================-->
<div class="row no-gutters align-items-center">
<div class="col text-success">

    EYES

</div>
<div class="col-auto mx-2 text-success">
//
</div>
<div class="col text-right">

    color

</div>
</div>
</div>
<div class="card mb-4 p-3 border-0" style="border-radius: 15px; box-shadow: 0 0 10px rgba(0,0,0,.4);">
<p class="mt-n2 text-monospace text-success" style="font-size: 20px; letter-spacing: 1px; font-variant: small-caps;">
  
      design notes

</p>
<ul class="mb-0 pl-3">

    <li class="text-success">
    <span class="text-body">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit
    </span>
  </li>
<li class="text-success">
    <span class="text-body">
      Aliquam massa quam, pellentesque vitae vulputate ac
    </span>
  </li>
    
</ul>
</div>
<div class="row no-gutters mb-4" style="height: 50px;">
<div class="col-auto mr-2">
  
<!-- DESIGNER CREDIT + WORTH ============-->
  
<a 

    href="https://toyhou.se/safe" 
    
    title="Designers Page" 
    
data-toggle="tooltip" data-placement="bottom" class="btn btn-success d-flex justify-content-center align-items-center" style="height: 50px; width: 50px; font-size: 18px; border-radius: 25px 5px 5px 25px; box-shadow: 0 0 10px rgba(0,0,0,.4);">

    <i class="fad fa-pencil-ruler"></i>

</a>
</div>
<div class="col">
<div class="card px-3 text-monospace text-success border-0" style="height: 50px; border-radius: 5px 25px 25px 5px; box-shadow: 0 0 10px rgba(0,0,0,.4);">
<div class="row no-gutters align-items-center h-100">
<div class="col">
<hr class="m-0" style="margin-bottom: -2px; border-width: 4px; border-top-style: dotted;">
</div>
<div class="col-auto ml-3">
  
    WORTH $0

</div>
</div>
</div>
</div>
</div>
</div>
</div>

<!-- PERSONALITY ========================-->

<div class="row my-4">
<div class="col-lg-auto text-center">
  
    <img src="/img/placeholder-transparent.png" class="mb-4" style="max-width: 300px;">
    <!-- pagedoll - looks best transparent -->
    
</div>
<div class="col-lg flex-column">
<div class="card d-block d-lg-flex mb-4 p-3 border-0" style="flex: 1 1 0; border-radius: 15px; box-shadow: 0 0 10px rgba(0,0,0,.4);">
<p class="mb-2 text-monospace text-success"><i>
  
    MBTI // ALIGNMENT // ZODIAC // ELEMENT
    
</i></p>
<div style="flex: 1 1 0; overflow-y: auto;">
  
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla viverra quis enim nec accumsan. In hac habitasse platea dictumst. Mauris blandit scelerisque augue et sollicitudin. Integer eget dignissim massa. Cras gravida nulla sit amet justo malesuada vestibulum. Praesent posuere commodo tellus at convallis. Sed in lectus feugiat, hendrerit elit vel, tempor ante. Integer interdum luctus lorem, eu euismod diam sagittis eget. Nulla et tempor augue. Maecenas pulvinar blandit arcu vel fringilla. </p>
    
</div>
<div class="row no-gutters align-items-center mt-2 mb-n1">
<div class="col-auto">
  
    <i class="fad fa-leaf-oak text-success" style="font-size: 24px;"></i>

</div>
<div class="col">
<hr class="my-0 mx-3">
</div>
<div class="col-auto">
<p class="text-success mt-n2" style="font-size: 28px; letter-spacing: 1px; font-variant: small-caps;">
  
    personality
  
</p>
</div>
</div>
</div>
</div>
</div>
<div class="row">

<!-- BIG LINKS (LEFT) ===================-->

<div class="col-lg flex-column">
<div class="card flex-grow-1 p-3 mb-3 ml-lg-4 border-0" style="border-radius: 100px 15px 15px 15px; box-shadow: 0 0 10px rgba(0,0,0,.4);">
<div class="row no-gutters">
<div class="col-lg-auto mb-3 mb-lg-0 mr-lg-3">
<div class="bg-success" style="min-width: 150px; height: 100%; padding-bottom: 100%; 

    background-image: url(/img/placeholder-transparent.png);
    /* icon */;
    
background-size: cover; background-position: center; border-radius: 85px 5px 5px 5px;"></div>
</div>
<div class="col flex-column">
<div class="row no-gutters align-items-center">
<div class="col-auto mt-n2 mr-3">

    <a href="https://toyhou.se/" class="text-body" style="font-size: 20px; letter-spacing: 1px; font-variant: small-caps;">
      NAME
    </a>
    
</div>
<div class="col text-monospace text-right text-muted">
    
    relationship

</div>
</div>
<hr class="w-100 my-1">
<div class="text-center text-success">
•

    <!-- relationship level - fas are filled hearts, far are empty -->
    <span class="mx-2">
      <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>
    </span>

•
</div>
<div class="flex-grow-1 flex-column justify-content-center text-center font-italic" style="font-size: 13px;">
    
    <p>
      A short relationship summary goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sollicitudin, velit et mattis hendrerit. 
    </p>
    
</div>
</div>
</div>
</div>
<!--====================================-->
<div class="card flex-grow-1 p-3 mb-4 border-0" style="border-radius: 15px 15px 15px 100px; box-shadow: 0 0 10px rgba(0,0,0,.4);">
<div class="row flex-lg-row-reverse no-gutters">
<div class="col flex-column">
<div class="row no-gutters align-items-center">
<div class="col-auto mt-n2 mr-3">
    
    <a href="https://toyhou.se/" class="text-body" style="font-size: 20px; letter-spacing: 1px; font-variant: small-caps;">
      NAME
    </a>
    
</div>
<div class="col text-monospace text-right text-muted">
    
    relationship

</div>
</div>
<hr class="w-100 my-1">
<div class="text-center text-success">
•

    <span class="mx-2">
    <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>
    </span>

•
</div>
<div class="flex-grow-1 flex-column justify-content-center text-center font-italic" style="font-size: 13px;">
  
    <p>
      These boxes will not scroll, so keep them short! Aenean vestibulum interdum enim sed sollicitudin. Integer non quam nunc. Curabitur commodo eros nec ornare varius. 
    </p>

</div>
</div>
<div class="col-lg-auto mt-3 mt-lg-0 mr-lg-3 ">
<div class="bg-secondary" style="min-width: 150px; height: 100%; padding-bottom: 100%; 
    
    background-image: url(/img/placeholder-transparent.png); 
    
background-size: cover; background-position: center; border-radius: 5px 5px 5px 85px;"></div>
</div>
</div>
</div>
</div>

<!-- SMALL LINKS (RIGHT) ================-->

<div class="col-lg-auto flex-column justify-content-center">
<div class="card p-2 mb-3 border-0" style="border-radius: 15px 65px 65px 15px; box-shadow: 0 0 10px rgba(0,0,0,.4);">
<div class="row no-gutters h-100">
<div class="col align-self-center mx-2">
<p class="mb-0">
    
    <a href="https://toyhou.se/" class="text-body" style="font-size: 20px; letter-spacing: 1px; font-variant: small-caps;">
      NAME
    </a>
    
    <i class="fad fa-leaf text-success" style="font-size: 16px;"></i>
    <!-- little decorative icon. pick one that matches the character! -->
    
</p>
<hr class="my-1">
<div class="row no-gutters">
<div class="col mr-3 text-monospace text-muted">
    
  relationship
    
</div>
<div class="col-auto text-success">
  
    <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>
<div class="col-auto">
<div class="bg-success" style="width: 100px; height: 100%; padding-bottom: 100%; 

    background-image: url(/img/placeholder-transparent.png); 
    /* icon */;
    
background-size: cover; background-position: center; border-radius: 50px;"></div>
</div>
</div>
</div>
<!--====================================-->
<div class="card p-2 mb-3 mr-lg-4 border-0" style="border-radius: 15px 65px 65px 15px; box-shadow: 0 0 10px rgba(0,0,0,.4);">
<div class="row no-gutters h-100">
<div class="col align-self-center mx-2">
<p class="mb-0">
    
    <a href="https://toyhou.se/" class="text-body" style="font-size: 20px; letter-spacing: 1px; font-variant: small-caps;">
      NAME
    </a>
    
    <i class="fad fa-flower text-success" style="font-size: 16px;"></i>

</p>
<hr class="my-1">
<div class="row no-gutters">
<div class="col mr-3 text-monospace text-muted">

    relationship

</div>
<div class="col-auto text-success">
  
    <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>
<div class="col-auto">
<div class="bg-secondary" style="width: 100px; height: 100%; padding-bottom: 100%; 

    background-image: url(/img/placeholder-transparent.png); 
    
background-size: cover; background-position: center; border-radius: 50px;"></div>
</div>
</div>
</div>
<!--====================================-->
<div class="card p-2 mb-4 mr-lg-5 border-0" style="border-radius: 15px 65px 65px 15px; box-shadow: 0 0 10px rgba(0,0,0,.4);">
<div class="row no-gutters h-100">
<div class="col align-self-center mx-2">
<p class="mb-0">
    
    <a href="https://toyhou.se/" class="text-body" style="font-size: 20px; letter-spacing: 1px; font-variant: small-caps;">
      NAME
    </a>
    
    <i class="fad fa-wheat text-success" style="font-size: 16px;"></i>

</p>
<hr class="my-1">
<div class="row no-gutters">
<div class="col mr-3 text-monospace text-muted">
    
    relationship  

</div>
<div class="col-auto text-success">
  
    <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>
<div class="col-auto">
<div class="bg-success" style="width: 100px; height: 100%; padding-bottom: 100%; 

    background-image: url(/img/placeholder-transparent.png); 
    
background-size: cover; background-position: center; border-radius: 50px;"></div>
</div>
</div>
</div>
</div>
</div>
<!-- CREDIT =============================-->
<div class="row no-gutters justify-content-end mr-n5 mb-n5">
<div class="col-auto">
<div class="card p-2 pt-3 pl-3 border-0" style="width: auto; font-size: 18px; border-radius: 40px 0 12px 0;">
<a href="https://toyhou.se/Togo" class="text-success">
<i class="fal fa-code"></i>
</a>
</div>
</div>
</div>
<!-- TEMPLATE AUTO-EDITED BY @SAFE HTTPS://TOYHOU.SE/SAFE || TEMPLATES GIVEN WITH EXPLICIT PERMISSION BY AUTHOR. -->
</div>