Profile
<!--==========================================
[06] PATH by TOGO
-- -- -- -- -- -- -- -- -- -- -- -- -- --
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 d-block d-lg-flex 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="IMAGE URL" 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/ponjw2FgL_k?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 d-block d-lg-flex 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 d-block d-lg-flex 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(IMAGE URL);
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(IMAGE URL);
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(IMAGE URL);
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(IMAGE URL);
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="IMAGE URL" 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>
Write about your characters' history here. This box will scroll!
</p>
<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="IMAGE URL" 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: #674447;
width: 40px; height: 40px; border-radius: 50%;"></div>
<div class="mr-2 mr-lg-0 mb-lg-2" style="
background-color: #b1372d;
width: 40px; height: 40px; border-radius: 50%;"></div>
<div class="mr-2 mr-lg-0 mb-lg-2" style="
background-color: #6e6544;
width: 40px; height: 40px; border-radius: 50%;"></div>
<div class="mr-2 mr-lg-0 mb-lg-2" style="
background-color: #a46753;
width: 40px; height: 40px; border-radius: 50%;"></div>
<div style="
background-color: #d4ac95;
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">
colour
</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">
colour
</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">
colour
</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">
Write design notes like this! You can copy+paste as many
li:s as you need - but make sure they look the same as
this one or they won't be styled correctly!
</span>
</li>
<li class="text-success">
<span class="text-body">
A design note.
</span>
</li>
<li class="text-success">
<span class="text-body">
Another design note.
</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="DESIGNER URL"
title="Design by Designer Name"
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="IMAGE URL" 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>
Write about your characters' personality here. This box will scroll!
</p>
<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(IMAGE URL);
/* 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="CHARACTER URL" 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 -->
<i class="fas fa-heart ml-2"></i>
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
<i class="far fa-heart"></i>
<i class="far fa-heart mr-2"></i>
•
</div>
<div class="flex-grow-1 flex-column justify-content-center text-center font-italic" style="font-size: 13px;">
<p>
A little relationship summary goes here. This will not scroll, so keep it short!
</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="CHARACTER URL" 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">
•
<i class="fas fa-heart ml-2"></i>
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
<i class="far fa-heart"></i>
<i class="far fa-heart mr-2"></i>
•
</div>
<div class="flex-grow-1 flex-column justify-content-center text-center font-italic" style="font-size: 13px;">
<p>
Relationship summary.
</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(IMAGE URL);
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="CHARACTER URL" 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(IMAGE URL);
/* 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="CHARACTER URL" 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(IMAGE URL);
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="CHARACTER URL" 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(IMAGE URL);
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>
</div>
Recent Images
No images.