<!------------------------------
[ TERMS OF SERVICE ]
> Please do not remove credit.
> You may edit and frankenstein with credits/permission from everyone involved.
> You may use my codes as reference but don't heavily reference or steal chunks of it.
> Do not steal, claim, redistribute or make profit from my codes. This also applies to edits.
> You are responsible for your own edits.
[ NOTES ]
> Always have WYSIWYG turned OFF and Code Editor turned ON when editing. Otherwise the code will break.
[ TIPS ]
> To change the colours:
- Press ctrl + F
- Type in hex code you want to replace
- Click on + and replace "all" with a different hex code
> To change the images, replace the URL in the brackets -> background: url( LINK_HERE )
> Get hex codes here: https://www.w3schools.com/colors/colors_picker.asp
> Get more icons here: https://fontawesome.com/icons?d=gallery
[ ACCENT COLOURS ]
> Theme: #88ddf2
> Boxes: rgba(0,0,0,0.8)
> Text: #fff
-------------------------------->
<div class="my-md-5 mx-auto text-justify" style="max-width: 910px; font-size: 12px; letter-spacing: .6px; color: #fff;">
<!-- TOP -------------------->
<div class="m-2 p-3" style="border-radius: 16px;">
<div class="text-center faded mb-2">
<!-- SYMBOL -->
<i class="fad fa-clouds" style="font-size: 30px; color: #88ddf2;"></i>
</div>
<!-- QUOTE -->
<div class="faded text-center text-muted" style="font-size: 16px; letter-spacing: 1.6px;">
<em>Write a quote here</em>
</div>
</div>
<!-- /TOP ------------------>
<div class="row no-gutters">
<!-- PROFILE ------------->
<div class="col-lg-4 p-2">
<div class="p-2" style="border-radius: 16px; background: rgba(0,0,0,0.8);">
<div class="d-flex justify-content-between faded px-1" style="font-size: 1.6em; letter-spacing: 4px;">
<i class="fad fa-sparkles my-auto"/>profile
</div>
<hr class="my-2">
<div class="p-2" style="overflow-y: auto; height: 227px;">
<div class="d-flex justify-content-between mb-2">
<span class="w-50 faded text-right mx-2">[ name ]</span>
<span class="w-75 text-left mx-2">info</span>
</div>
<div class="d-flex justify-content-between mb-2">
<span class="w-50 faded text-right mx-2">[ gender ]</span>
<span class="w-75 text-left mx-2">info</span>
</div>
<div class="d-flex justify-content-between mb-2">
<span class="w-50 faded text-right mx-2">[ age ]</span>
<span class="w-75 text-left mx-2">info</span>
</div>
<div class="d-flex justify-content-between mb-2">
<span class="w-50 faded text-right mx-2">[ birthday ]</span>
<span class="w-75 text-left mx-2">info</span>
</div>
<div class="d-flex justify-content-between mb-2">
<span class="w-50 faded text-right mx-2">[ species ]</span>
<span class="w-75 text-left mx-2">info</span>
</div>
<div class="d-flex justify-content-between mb-2">
<span class="w-50 faded text-right mx-2">[ height ]</span>
<span class="w-75 text-lef mx-2">info</span>
</div>
<div class="d-flex justify-content-between mb-2">
<span class="w-50 faded text-right mx-2">[ job ]</span>
<span class="w-75 text-left mx-2">info</span>
</div>
<div class="d-flex justify-content-between mb-2">
<span class="w-50 faded text-right mx-2">[ worth ]</span>
<span class="w-75 text-left mx-2">info</span>
</div>
</div>
</div>
</div>
<!-- /PROFILE ------------>
<!-- PIC 1 | Replace URL in brackets to change image -->
<div class="col-lg-4 p-2">
<div style="border-radius: 16px; height: 288px;
background: url(https://images.unsplash.com/photo-1522441815192-d9f04eb0615c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=627&q=80) center no-repeat; background-size:cover;">
</div>
</div>
<!-- /PIC 1 -------------->
<!-- PERSONALITY --------->
<div class="col-lg-4 p-2">
<div class="p-2" style="border-radius: 16px; background: rgba(0,0,0,0.8);">
<div class="d-flex justify-content-between faded px-1" style="font-size: 1.6em; letter-spacing: 4px;">
<i class="fad fa-heartbeat my-auto"/>personality
</div>
<hr class="my-2">
<div class="p-3" style="overflow-y: auto; height: 227px;">
<!-- TIP: Change the width % to adjust the bars -->
<div class="row no-gutters mb-3">
<div class="col-4 faded text-right">[ courage ]</div>
<div class="col-8 my-auto pl-3">
<div class="progress" style="border-radius: 8px; height: 8px; background: rgba(0,0,0,0.5); background: rgba(0,0,0,0.5);">
<div class="progress-bar" style="background: #88ddf2; width: 50%"></div>
</div>
</div>
</div>
<div class="row no-gutters mb-3">
<div class="col-4 faded text-right">[ intellect ]</div>
<div class="col-8 my-auto pl-3">
<div class="progress" style="border-radius: 8px; height: 8px; background: rgba(0,0,0,0.5);">
<div class="progress-bar" style="background: #88ddf2; width: 50%"></div>
</div>
</div>
</div>
<div class="row no-gutters mb-3">
<div class="col-4 faded text-right">[ empathy ]</div>
<div class="col-8 my-auto pl-3">
<div class="progress" style="border-radius: 8px; height: 8px; background: rgba(0,0,0,0.5);">
<div class="progress-bar" style="background: #88ddf2; width: 50%"></div>
</div>
</div>
</div>
<div class="row no-gutters mb-3">
<div class="col-4 faded text-right">[ temper ]</div>
<div class="col-8 my-auto pl-3">
<div class="progress" style="border-radius: 8px; height: 8px; background: rgba(0,0,0,0.5);">
<div class="progress-bar" style="background: #88ddf2; width: 50%"></div>
</div>
</div>
</div>
<div class="row no-gutters mb-3">
<div class="col-4 faded text-right">[ charisma ]</div>
<div class="col-8 my-auto pl-3">
<div class="progress" style="border-radius: 8px; height: 8px; background: rgba(0,0,0,0.5);">
<div class="progress-bar" style="background: #88ddf2; width: 50%"></div>
</div>
</div>
</div>
<div class="row no-gutters">
<div class="col-4 faded text-right">[ humor ]</div>
<div class="col-8 my-auto pl-3">
<div class="progress" style="border-radius: 8px; height: 8px; background: rgba(0,0,0,0.5);">
<div class="progress-bar" style="background: #88ddf2; width: 50%"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /PERSONALITY -------->
<!-- PIC 2 | Replace URL in brackets to change image -->
<div class="col-lg-4 p-2">
<div style="border-radius: 16px; height: 288px;
background: url(https://images.unsplash.com/photo-1507039915464-9d829b6d2d78?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1000&q=80) center no-repeat; background-size:cover;">
</div></div>
<!-- /PIC 2 -------------->
<!-- STORY --------------->
<div class="col-lg-4 p-2">
<div class="p-2" style="border-radius: 16px; background: rgba(0,0,0,0.8);">
<div class="d-flex justify-content-between faded px-1" style="font-size: 1.6em; letter-spacing: 4px;">
<i class="fad fa-feather my-auto"/>story
</div>
<hr class="my-2">
<div class="p-2" style="overflow-y: auto; height: 227px;">
<!-- Writing Area -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam in sodales massa, eget mollis lorem. Aliquam erat volutpat. Sed et dui turpis. Integer at ante nibh. Nunc mattis lorem sed suscipit condimentum. Donec nisl nulla, mattis sit amet mollis vitae, pretium sit amet erat. Vestibulum hendrerit augue lorem.</p>
<p>Morbi diam enim, vestibulum vel ullamcorper dapibus, ultrices eu nibh. Donec facilisis velit a quam feugiat, quis faucibus est dapibus. Morbi at euismod dui, a commodo sapien. Suspendisse potenti. Duis dapibus metus quis venenatis hendrerit. Donec turpis augue, feugiat quis neque et, venenatis porttitor quam. Nam accumsan lobortis tincidunt. Sed felis dui, condimentum non luctus ac, tristique non nisi.</p>
<!-- Writing Area -->
</div>
</div>
</div>
<!-- /STORY -------------->
<!-- PIC 3 | Replace URL in brackets to change image -->
<div class="col-lg-4 p-2">
<div style="border-radius: 16px; height:288px;
background: url(https://images.unsplash.com/photo-1541415569148-c6782ebe7e2c?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D) center no-repeat; background-size:cover;">
</div>
</div>
<!-- /PIC 3 -------------->
<!-- TRIVIA -------------->
<div class="col-lg-4 p-2">
<div class="p-2" style="border-radius: 16px; background: rgba(0,0,0,0.8);">
<div class="d-flex justify-content-between faded px-1" style="font-size: 1.6em; letter-spacing: 4px;">
<i class="fad fa-chess my-auto"/>trivia
</div>
<hr class="my-2">
<div class="p-2" style="overflow-y: auto; height: 227px;">
<!-- LIKES -->
<ul class="fa-ul">
<li class="mb-1"><span class="fa-li"><i class="fas fa-heart faded mr-2"/></span>like</li>
<li class="mb-1"><span class="fa-li"><i class="fas fa-heart faded mr-2"/></span>like</li>
<!-- Add more above this line -->
</ul>
<hr>
<!-- DISLIKES -->
<ul class="fa-ul">
<li class="mb-1"><span class="fa-li"><i class="fas fa-times faded mr-2"/></span>dislike</li>
<li class="mb-1"><span class="fa-li"><i class="fas fa-times faded mr-2"/></span>dislike</li>
<!-- Add more above this line -->
</ul>
<hr>
<!-- OTHER NOTES -->
<ul class="fa-ul">
<li class="mb-1"><span class="fa-li"><i class="fas fa-pencil faded mr-2"/></span>Aliquam tincidunt mauris eu risus.</li>
<li class="mb-1"><span class="fa-li"><i class="fas fa-pencil faded mr-2"/></span>Vestibulum auctor dapibus neque.</li>
<!-- Add more above this line -->
</ul>
</div>
</div>
</div>
<!-- /TRIVIA ------------->
<!-- PIC 4 | Replace URL in brackets to change image -->
<div class="col-lg-4 p-2">
<div style="border-radius: 16px; height: 288px;
background: url(https://images.unsplash.com/photo-1515266591878-f93e32bc5937?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1yZWxhdGVkfDJ8fHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&w=500&q=60) center no-repeat; background-size:cover;">
</div>
</div>
<!-- /PIC 4 -------------->
<!-- RELATIONSHIPS ------->
<div class="col-lg-4 p-2">
<div class="p-2" style="border-radius: 16px; background: rgba(0,0,0,0.8);">
<div class="d-flex justify-content-between faded px-1" style="font-size: 1.6em; letter-spacing: 4px;">
<i class="fad fa-chain my-auto"/>relationships
</div>
<hr class="my-2">
<div class="p-2" style="overflow-y: auto; height: 227px;">
<!-- TIP:
- Full heart: <i class="fas fa-heart"/>
- Empty heart: <i class="far fa-heart"/>
-->
<!-- 01 --------------------->
<div class="row no-gutters">
<div class="col-6 pr-1">
<div style="min-height: 72px;
background: url(https://images.unsplash.com/photo-1516715094483-75da7dee9758?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1074&q=80) center no-repeat; background-size:cover;">
</div>
</div>
<div class="col-6 pl-1">
<!-- Name | Replace # with URL to character -->
<div class="mb-2" style="letter-spacing: 1.6px;">
<a href="#" style="color: #88ddf2;">Name</a>
</div>
<!-- Relation -->
<div class="faded mb-2">
[ relation ]
</div>
<!-- Hearts -->
<div class="d-flex justify-content-between mt-3" style="color: #88ddf2;">
<i class="fas fa-heart"/>
<i class="fas fa-heart"/>
<i class="fas fa-heart"/>
<i class="far fa-heart"/>
<i class="far fa-heart"/>
</div>
</div>
</div><hr>
<!-- ------------------------>
<!-- 02 --------------------->
<div class="row no-gutters">
<div class="col-6 pr-1">
<div style="min-height: 72px;
background: url(https://images.unsplash.com/photo-1516715094483-75da7dee9758?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1074&q=80) center no-repeat; background-size:cover;">
</div>
</div>
<div class="col-6 pl-1">
<!-- Name | Replace # with URL to character -->
<div class="mb-2" style="letter-spacing: 1.6px;">
<a href="#" style="color: #88ddf2;">Name</a>
</div>
<!-- Relation -->
<div class="faded mb-2">
[ relation ]
</div>
<!-- Hearts -->
<div class="d-flex justify-content-between mt-3" style="color: #88ddf2;">
<i class="fas fa-heart"/>
<i class="fas fa-heart"/>
<i class="fas fa-heart"/>
<i class="far fa-heart"/>
<i class="far fa-heart"/>
</div>
</div>
</div><hr>
<!-- ------------------------>
<!-- 03 --------------------->
<div class="row no-gutters">
<div class="col-6 pr-1">
<div style="min-height: 72px;
background: url(https://images.unsplash.com/photo-1516715094483-75da7dee9758?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1074&q=80) center no-repeat; background-size:cover;">
</div>
</div>
<div class="col-6 pl-1">
<!-- Name | Replace # with URL to character -->
<div class="mb-2" style="letter-spacing: 1.6px;">
<a href="#" style="color: #88ddf2;">Name</a>
</div>
<!-- Relation -->
<div class="faded mb-2">
[ relation ]
</div>
<!-- Hearts -->
<div class="d-flex justify-content-between mt-3" style="color: #88ddf2;">
<i class="fas fa-heart"/>
<i class="fas fa-heart"/>
<i class="fas fa-heart"/>
<i class="far fa-heart"/>
<i class="far fa-heart"/>
</div>
</div>
</div><hr>
<!-- ------------------------>
<!-- Add more above this line -->
</div>
</div>
</div>
<!-- /RELATIONSHIPS ------>
</div>
<!-- CREDIT | Please do not remove! ------->
<div class="faded text-center" style="font-size: 10px;">
<a href="https://toyhou.se/14721777.-f2u-cloud-nine"><i class="far fa-clouds text-muted tooltipster" title="Code by Sealkitty"></i></a>
</div>
</div>