<!--------------------- NOTES -----------------
- Turn WYSIWYG off while editing this code!
T.O.S
- Don't remove the credit.
- You may not take parts of this code and redistribute it as your own work
- Frankensteining this code with another for personal use is allowed as long as the other coder allows it as well.
- referencing my code is allowed as long as you aren't taking major parts and redistributing them unchanged
-------------------->
<!---------------- NOTES END ------------------->
<!----PROFILE START---->
<div class="container col-9 pl-3" style="background:#f7aab4;background-image:url(https://f2.toyhou.se/file/f2-toyhou-se/images/69740746_rENrypL6bjQZ1d9.png);background-size:cover;height:450px;min-width:900px;border-radius:10px;font-family:Century Gothic;">
<!---TABS START--->
<div style="position:absolute;z-index:100;left:-60px;top:110px;">
<div class="align-items-center justify-content-center h-100">
<ul class="nav nav-justified flex-sm-column flex-row align-items-center">
<li class="nav-item m-3 pr-1 pb-1" >
<a href="#about" class="nav-link mt-n2 mr-2" role="tab" style="color:#d81a46;border: 4px solid #d81a46;background:#f7aab4;border-radius:5px" data-toggle="pill">
<i class="fa-regular fa-heart fa-lg fa-fw"></i></a>
</li>
<li class="nav-item m-3 pr-1 pb-1">
<a href="#personality" class="nav-link mt-n2 mr-2" role="tab" style="color:#d81a46;border: 4px solid #d81a46;background:#f7aab4;border-radius:5px" data-toggle="pill"><i class="fa-regular fa-heart fa-lg fa-fw"></i></a>
</li>
<li class="nav-item m-3 pr-1 pb-1">
<a href="#backstory" class="nav-link mt-n2 mr-2" role="tab" style="color:#d81a46;border: 4px solid #d81a46;background:#f7aab4;border-radius:5px" data-toggle="pill"><i class="fa-regular fa-heart fa-lg fa-fw"></i></a>
</li>
<li class="nav-item m-3 pr-1 pb-1" >
<a href="#trivia" class="nav-link mt-n2 mr-2" role="tab" style="color:#d81a46;border: 4px solid #d81a46;background:#f7aab4;border-radius:5px" data-toggle="pill"><i class="fa-regular fa-heart fa-lg fa-fw"></i></a>
</li>
</ul>
</div>
</div>
<!---TABS END--->
<div class="container" style="position:absolute;left:35px;top:0px;z-index:99;background:#d81a46;background-image:url(URL_HERE);background-position:center;background-size:cover;height:230px;width:230px;transform:rotate(-10deg);z-index:10;clip-path:polygon(50% 10%, 81% 0, 100% 26%, 95% 56%, 80% 78%, 50% 100%, 22% 78%, 5% 56%, 0 27%, 20% 0);padding-right:10px;">
</div>
<i class="fa-solid fa-heart fa-fade" style="--fa-animation-duration: 2s; --fa-fade-opacity: 0.6;color:#f7aab4;font-size:40px;position:absolute;left:25px;top:12px;z-index:100;transform:rotate(-5deg)"></i>
<i class="fa-solid fa-heart fa-fade" style="--fa-animation-duration: 2s; --fa-fade-opacity: 0.6;color:#f7aab4;font-size:25px;position:absolute;left:15px;top:45px;z-index:100;transform:rotate(-15deg)"></i>
<i class="fa-solid fa-heart fa-fade" style="--fa-animation-duration: 2s; --fa-fade-opacity: 0.6;color:#f7aab4;font-size:50px;position:absolute;left:220px;top:150px;z-index:100;transform:rotate(10deg)"></i>
<div style="position:absolute;right:100px;top:-12px;z-index:99;font-size:45px;text-shadow:2px 1px #d81a46;color:#f9dad8;-webkit-text-stroke-width:1px;
-webkit-text-stroke-color:#d81a46;font-family:'Century Gothic';">"Let’s reload the warmth"</div>
<div style="position:absolute;right:-150px;top:210px;z-index:99;font-size:20px;color:#d81a46;transform:rotate(90deg)">umbilical —————————— yuno</div>
<div class="row no-gutters" style="padding-left:20px;padding-top:30px;">
<div>
<div class="container p-0" style="background:white;min-height:390px;min-width:223px; border-radius:5px;color:#d81a46;padding:auto;font-size:15px;">
<div class="container" style="height:170px;padding-top:200px;">
<div class="row no-gutters pb-1" style="border-bottom:dashed 1px ">
<div style="col margin:0;">
<i class="fa-regular fa-pen-field"></i> NAME
</div>
<div class="col text-right"> name</div>
</div>
<div class="row no-gutters pb-1" style="border-bottom:dashed 1px ">
<div style="col margin:0;">
<i class="fa-regular fa-calendar"></i> AGE
</div>
<div class="col text-right"> age</div>
</div>
<div class="row no-gutters pb-1" style="border-bottom:dashed 1px ">
<div style="col margin:0;">
<i class="fa-regular fa-venus-mars"></i> GENDER
</div>
<div class="col text-right"> gender</div>
</div>
<div class="row no-gutters pb-1" style="border-bottom:dashed 1px ">
<div style="col margin:0;">
<i class="fa-regular fa-cake-candles"></i> BIRTHDATE
</div>
<div class="col text-right"> birthdate</div>
</div>
<div class="row no-gutters pb-1" style="border-bottom:dashed 1px; ">
<div style="col margin:0;">
<i class="fa-regular fa-heart"></i> ORIENT.
</div>
<div class="col text-right">orient</div>
</div>
<div class="row no-gutters pb-1" style="border-bottom:dashed 1px ">
<div style="col margin:0;">
<i class="fa-solid fa-dna"></i> SPECIES
</div>
<div class="col text-right">species</div>
</div>
</div>
</div>
</div>
<div>
<div class="tab-content">
<!-- about tab -->
<div class="tab-pane fade in active show" id="about" role="tabpanel">
<div class="container-fluid p-0" style="background:white;border-radius:5px;margin-left:25px;min-height:390px;min-width:570px;">
<div class="row no-gutters">
<div class="container" style="font-size:15px;min-height:30px;color:#d81a46;margin-top:15px;border-bottom:dashed 1px">
<h1>About</h1>
</div>
</div>
<div class="row no-gutters">
<div class="container" style="border-radius:5px;background:#d81a46;
background-image:url(URL_HERE);background-size:cover;height:150px;width:470px;margin-top:10px">
</div>
</div>
<hr style="background-color:#d81a46;width:400px;">
<div class="container" style="overflow:auto;max-height:135px;max-width:537px;font-size:13px;color:#d81a46;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>
</div>
</div>
<!-- personality tab -->
<div class="tab-pane fade" id="personality" role="tabpanel">
<div class="container-fluid p-0" style="background:white;border-radius:5px;margin-left:25px;min-height:390px;min-width:570px;">
<div class="row no-gutters">
<div class="container" style="font-size:15px;min-height:30px;color:#d81a46;margin-top:15px;border-bottom:dashed 1px">
<h1>Personality</h1>
</div>
</div>
<div class="row no-gutters">
<div class="pt-3 pl-2 ml-4">
<!-- side image -->
<div class="container"
style="border-radius:5px;background:#d81a46;background-image:url(URL_HERE);
background-size:cover;background-position:center;height:310px;width:180px;">
</div>
<!---->
</div>
<div class="ml-2">
<div class="container m-2" style="overflow:auto;color:#d81a46;max-width:334px;max-height:320px;padding-left:2rem;font-size:13px;">
<!---QOUTE---->
<div class="card" style="margin-bottom:15px;border:dashed 1px;border-radius:10px;padding:5px;background-color:#F3ECED;">
<i><i class="fa-solid fa-quote-left"></i>
What type of girl do you like?
I want to become like that, but that’s probably too hard for me.
<i class="fa-solid fa-quote-right"></i></i>
</div>
<!---QOUTE END---->
<p>This box scrolls.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
</div>
</div>
<!-- personality end -->
<!-- backstory tab -->
<div class="tab-pane fade" id="backstory" role="tabpanel">
<div class="container-fluid p-0" style="background:white;border-radius:5px;margin-left:25px;min-height:390px;min-width:570px;">
<div class="row no-gutters">
<div class="container" style="font-size:15px;min-height:30px;color:#d81a46;margin-top:15px;border-bottom:dashed 1px">
<h1>Backstory</h1>
</div>
</div>
<div class="row no-gutters">
<div class="pt-3 pl-2 ml-2">
<div class="container" style="overflow:auto;max-height:155px;max-width:537px;font-size:13px;color:#d81a46;">
<p>This box scrolls.</p>
<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>
<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>
</div>
</div>
</div>
<hr style="background-color:#d81a46;width:400px;">
<div class="row no-gutters">
<div class="container " style="border-radius:5px;background:#d81a46;
background-image:url(URL_HERE);
background-size:cover;height:130px;width:470px;"></div>
</div>
</div>
</div>
<!---backstory end-->
<!-- trivia tab -->
<div class="tab-pane fade in" id="trivia" role="tabpanel">
<div class="container-fluid p-0" style="background:white;border-radius:5px;margin-left:25px;min-height:390px;min-width:570px;">
<div class="row no-gutters">
<div class="container" style="font-size:15px;min-height:30px;color:#d81a46;margin-top:15px;border-bottom:dashed 1px">
<h1>Trivia</h1>
</div>
</div>
<div class="row no-gutters">
<div class="pt-3 ml-1">
<div class="container m-2" style="overflow:auto;color:#d81a46;width:334px;max-height:340px;padding-left:2rem;font-size:13px;">
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<hr style="background-color:#d81a46;margin-top:10;">
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</div>
</div>
<div class="pt-3 pl-2">
<!-- side image -->
<div class="container" style="border-radius:5px;background:#d81a46;background-image:url(URL_HERE);background-size:cover;background-position:center;height:310px;width:180px;">
</div>
<!---->
</div>
</div>
</div>
</div>
<!-- triva end -->
</div>
<!--END-->
</div>
<div class="row no-gutters">
<div class="col-12" style="font-size:20px;text-align:right;margin-left:380px;color:#d81a46;"> — ♡ ♡ ♡
</div>
</div>
</div>
<!--- CREDIT DO NOT REMOVE--->
<a href="https://toyhou.se/skullgirl" data-toggle="tooltip" title="code by skullgirl" class="col-12" style="font-size:20px;text-align:right;color:#d81a46;width:100px;"><i class="fa-solid fa-skull"></i></a>
</div>
