F2U┆Baby Cottonee (code)

sorry if its messy!!

<!----------- background ----------->
<div style='position: absolute; top: 0px; bottom: 0px; left: 0px; background: url("IMG_HERE"); width: 100%; background-attachment: fixed; z-index: -1; postion: inherit;'>.</div>
<!----------- icon decore ----------->
<div style="position:absolute;top:75px;left:75px;z-index: 10000; transform: rotate(-15deg); font-size:18px;"><i class="fas fa-beat fa-fw fa-3x"><img src="IMG_HERE" style="color: rgb(215, 250, 241); filter: drop-shadow(rgb(79, 113, 255) 0px 0px 5px);" class="fr-fic fr-dii" width="40" height="40"></i></div>
<!----------- code ----------->
<div class="row no-gutters">
<div class="col-12 p-1">
<div class="card p-4" style="border-radius: 25px 25px 0px 0px; text-align: center;"><strong><img src="IMG_HERE" class="fr-fic fr-dii" width="50" height="50"><span style="font-size: 36px;">OC NAME</span><img src="IMG_HERE" class="fr-fic fr-dii" width="50" height="50"></strong></div>

<p>
<br>
</p>
<div class="carousel slide mx-auto p-1 pointer-event" data-ride="carousel" id="carousel4">
<div class="carousel-inner">
<div class="carousel-item">
<div style="background-image:url(IMG_HERE);height:400px;background-position:center center;background-size:cover;">
<br>
</div>
<div class="carousel-caption d-none d-md-block">
<div class="p-1" style="background-color:rgba(250,250,250,0.5);color:rgb(0,0,0);">

<p><span style="font-size:3rem;">Title1</span>
<br>Caption text1</p>
</div>
</div>
</div>
<div class="carousel-item">
<div style="background-image:url(IMG_HERE);height:400px;background-position:center center;background-size:cover;">
<br>
</div>
<div class="carousel-caption d-none d-md-block">
<div class="p-1" style="background-color:rgba(250,250,250,0.5);color:rgb(0,0,0);">

<p><span style="font-size:3rem;">Title2</span>
<br>Caption text2</p>
</div>
</div>
</div>
<div class="carousel-item active">
<div style="background-image:url(IMG_HERE);height:400px;background-position:center center;background-size:cover;">
<br>
</div>
<div class="carousel-caption d-none d-md-block">
<div class="p-1" style="background-color:rgba(250,250,250,0.5);color:rgb(0,0,0);">

<p><span style="font-size:3rem;">Title3</span>
<br>Caption text3</p>
</div>
</div>
</div>

<ul class="nav nav-tabs card-header-tabs row mb-1">
<li class="col-md-4 mb-1">
<hr>
<a class="btn bg-primary btn-block btn-outline-secondary show active" data-toggle="tab" href="#reg1"><img src="IMG_HERE" class="fr-fic fr-dii" width="32" height="32"><span style="color: #8ee57e;">Info</span><img src="IMG_HERE" class="fr-fic fr-dii" width="32" height="32"></a>
</li>
<li class="col-md-4 mb-1">
<hr>
<a class="btn bg-primary btn-block btn-outline-secondary show" data-toggle="tab" href="#reg2"><img src="IMG_HERE" class="fr-fic fr-dii" width="30" height="30"><span style="color: #8ee57e;">Stats</span><img src="IMG_HERE" class="fr-fic fr-dii" width="30" height="30"></a>
</li>
<li class="col-md-4 mb-1">
<hr>
<a class="btn bg-primary btn-block btn-outline-secondary show" data-toggle="tab" href="#reg3"><img src="IMG_HERE" class="fr-fic fr-dii" width="32" height="32"><span style="color: #8ee57e;">Relation<img src="IMG_HERE" class="fr-fic fr-dii" width="32" height="32"></span></a>
</li>
<li>
<br>
</li>
</ul>
<div class="card p-3">
<div class="tab-content">
<div class="tab-pane fade active show" id="reg1">
<div class="card p-3" style="color: rgb(255, 240, 157); border-color: rgb(39, 73, 89); background-color: rgb(137, 163, 61); text-align: center;"><span style="font-size: 30px;"><strong>INFO</strong></span>
<br><img src="IMG_HERE" class="fr-fic fr-dib" width="200" height="207.825">
<br>
<div style='background-image: url("https://upload.wikimedia.org/wikipedia/commons/7/71/Black.png"); text-align: center;'>
<br>"quote here"
<br>
<br>
</div>
<br>
<div class="mt-2" style="font-family:arial black; text-align:center;">
<div class=" card card-block " style="Color:#abf5bf;Border-color:#00ffaa;Background-color:#ccffee;"><span style="color: #1c90a5;">Name: <br>Gender:<br>Nationality:<br>Sexuality:<br>uhhhh:</span></div>

<h1>
<br>Story
<br>
<br>
</h1>
</div>
<!--- header end --->
<div class="card bg-primary progress-bar-striped progress-bar-animated">
<br>
</div>
<div class="container" style="height:200px;overflow-y:scroll;">
<br><strong>write here a your oc story!</strong>
<br>or idk
<br>do something ig
<br>
<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula massa ut lorem tempor, at venenatis augue tincidunt. Integer ac ipsum arcu. Nam a viverra arcu. Sed ut faucibus mauris. Aliquam volutpat velit neque, at pretium enim gravida non. Aenean viverra leo mi, non eleifend turpis pulvinar ac. Proin vitae mollis ipsum. Aenean mollis quam nulla, non rhoncus nisi porta vel. Nam ut enim enim. Donec sit amet dolor et ex gravida dapibus. Quisque id mi metus. Quisque ut eleifend mauris, id pharetra augue. Nam dignissim turpis massa. Suspendisse dignissim tortor vel ullamcorper blandit. Nulla facilisi. Nam efficitur iaculis malesuada. Vivamus placerat a diam sed tristique. Curabitur sem sem, cursus eget ullamcorper euismod, posuere ac lectus. Phasellus cursus velit sed egestas finibus. Maecenas bibendum libero vitae fermentum consectetur. Integer vulputate enim vulputate laoreet pharetra. Morbi rutrum et augue a sollicitudin. Nullam enim eros, finibus vel lectus ac, tristique vulputate enim. Phasellus malesuada velit eu lobortis pretium. Quisque in vulputate justo. Nam ullamcorper odio et dui auctor, gravida tempor orci tempus. Etiam vehicula rhoncus purus ac eleifend. Aliquam aliquet turpis non nisl tempus pretium. In laoreet accumsan lacus, in pretium justo posuere quis. Aenean vulputate eros eget ipsum elementum, sagittis varius lorem dictum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque dui malesuada, mollis ex eget, aliquet turpis. Mauris scelerisque mauris ac sapien pellentesque lobortis. Sed commodo enim vel metus vulputate sagittis. Proin porta lorem in aliquet condimentum. Etiam magna nisl, vulputate feugiat vehicula sed, suscipit quis metus. Morbi ac vulputate eros. Pellentesque dapibus blandit purus placerat auctor. Integer tristique, velit at sagittis viverra, lectus nulla hendrerit mauris, ut consequat eros velit eget libero. Praesent at mi nec nisl molestie elementum. Nullam consequat diam eget lacinia laoreet. Etiam quis gravida libero. Maecenas porttitor aliquam ultricies. Aliquam urna lorem, luctus ut hendrerit eget, venenatis ac sapien. Vivamus quis convallis purus. Donec congue dolor non elementum cursus. Duis pellentesque lacus lorem, nec rutrum enim sodales at. Fusce augue mi, ultricies sed pretium at, ultrices et metus. Donec egestas mauris eleifend neque euismod pharetra. Nullam dictum, erat et malesuada maximus, ligula ipsum lacinia magna, at auctor purus leo quis sapien. Fusce vel dui lobortis, rhoncus leo quis, ultrices ex. Nam nec ante maximus, faucibus leo ut, eleifend dui. Integer mollis purus vitae velit malesuada convallis. Suspendisse ut odio in metus efficitur mattis sed nec arcu. Vivamus tempor eros lectus, nec convallis leo imperdiet nec. Suspendisse mollis id ipsum eu interdum. Nunc sed interdum nulla. Nulla ut lectus quis eros vestibulum vehicula vitae vitae ex. Duis ligula tellus, condimentum ac diam id, semper ornare arcu.</div>
</div>
</div>
<div class="tab-pane fade" id="reg2">
<div class="p-3" style="color: rgb(255, 240, 157); border-color: rgb(39, 73, 89); background-color: rgb(137, 163, 61); text-align: center;"><span style="font-size: 30px;"><strong>STATS</strong></span>
<br><img src="IMG_HERE" class="fr-fic fr-dib" width="200" height="207.825">Something here
<br>
<br>
<div class=" card card-block " style="Color:#bbfae1;Border-color:#bbfae1;Background-color:#69ffc3;"><span style="color: rgb(29, 102, 73);"><strong>Level: 69</strong></span>
<br><strong><span style="color: rgb(29, 102, 73);">Power</span></strong>
<div class="progress my-2 rounded-0">
<div class="progress-bar bg-danger progress-bar-striped progress-bar-animated" style="width:50%;height:16px;">
<br>
</div>
</div>
<br><span style="color: rgb(29, 102, 73);"><strong>Luck</strong></span>
<div class="progress my-2 rounded-0">
<div class="progress-bar bg-primary progress-bar-striped progress-bar-animated" style="width:50%;height:16px;">69</div>
</div>
<br><span style="color: rgb(29, 102, 73);"><strong>Agility</strong></span>
<div class="progress my-2 rounded-0">
<div class="progress-bar bg-danger progress-bar-striped progress-bar-animated" style="width:50%;height:16px;">69</div>
</div><strong><br></strong><span style="color: rgb(29, 102, 73);"><strong>Hp:</strong></span>
<div class="progress my-2 rounded-0">
<div class="progress-bar bg-primary progress-bar-striped progress-bar-animated" style="width:50%;height:16px;">69 hp
<br>
<br><span style="color: rgb(29, 102, 73);">Level:</span></div>
</div>
</div>
<br><strong><span style="font-size: 24px;"><img src="IMG_HERE" class="fr-fic fr-dii" width="25" height="25">Ribbons display<img src="IMG_HERE" class="fr-fic fr-dii" width="20" height="20"></span></strong>
<br>
<!------------------------------------->
<div class="container">
<div class="row">
<!--------------- Column --------------->
<div class="col" style="padding:10px;">
<div class="card-block rounded bg-faded text-left" style="white-space:normal;">
<div align="center">
<div class="row"><img src="IMG_HERE" class="fr-fic fr-dib" width="43" height="62"></div>

<p align="center" style="text-align: center;"><strong> <span style="color: #44a95f;">Ribbon Name</span></strong><span style="color: #44a95f;"><br>Ribbon Description</span></p>
</div>
</div>
</div>
<!------------------------------------->
<!--------------- Column --------------->
<div class="col" style="padding:10px;">
<div class="card-block rounded bg-faded text-left" style="white-space:normal;">
<div align="center">
<div class="row"><img src="IMG_HERE" class="fr-fic fr-dib" width="43" height="62"></div>

<p align="center" style="text-align: center;"><strong><span style="color: #44a95f;"> Ribbon Name</span></strong><span style="color: #44a95f;"><br>Ribbon Description</span></p>
</div>
</div>
</div>
<!------------------------------------->
<!--------------- Column --------------->
<div class="col" style="padding:10px;">
<div class="card-block rounded bg-faded text-left" style="white-space:normal;">
<div align="center">
<div class="row"><img src="IMG_HERE" class="fr-fic fr-dib" width="43" height="62"></div>

<p align="center" style="text-align: center;"><strong><span style="color: #44a95f;"> Ribbon Name</span></strong><span style="color: #44a95f;"><br>Ribbon Description</span></p>
</div>
</div>
</div>
<!------------------------------------->
<!--------------- Column --------------->
<div class="col" style="padding:10px;">
<div class="card-block rounded bg-faded text-left" style="white-space:normal;">
<div align="center">
<div class="row"><img src="IMG_HERE" class="fr-fic fr-dib" width="43" height="62"></div>

<p align="center" style="text-align: center;"><span style="color: rgb(68, 169, 95);"><strong> Ribbon Name</strong><br>Ribbon Description</span></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="reg3">
<div class="p-3" style="color: rgb(255, 240, 157); border-color: rgb(39, 73, 89); background-color: rgb(137, 163, 61); text-align: center;"><span style="color: rgb(255, 240, 157);"><span style="font-size: 30px;"><strong>RELETIONSHIP</strong></span></span>
</div>
<div class="p-3" style="color: rgb(255, 240, 157); border-color: rgb(39, 73, 89); background-color: rgb(137, 163, 61); text-align: center;"><span style="color: rgb(255, 240, 157);">✦✦✦✦✦✦✦✦✦✦✦✦✦✦✦✦✦✦✦✦✦<br><img src="IMG_HERE" class="fr-fic fr-dii" width="63" height="71"><br><br>✦ Name ✦<br><br>relationship info</span>
<br><span style="color: rgb(255, 240, 157);"><br><span style="color: rgb(255, 240, 157);">✦✦✦✦✦✦✦✦✦✦✦✦✦✦✦✦✦✦✦✦✦</span>
<br><img src="IMG_HERE" class="fr-fic fr-dib" width="63" height="71">
<br>✦ Name ✦
<br>
<br>relationship info
<br>
<br><span style="color: rgb(255, 240, 157);">✦✦✦✦✦✦✦✦✦✦✦✦✦✦✦✦✦✦✦✦✦</span></span>
</div>
</div>
</div>
</div>
</div><span style="color: rgb(68, 169, 95);"><a class="carousel-control-prev" data-slide="prev" href="#carousel4"><span class="sr-only">fffPrevious</span></a>
</span><a class="carousel-control-next" data-slide="next" href="#carousel4"><span class="sr-only">Next</span></a></div>
</div>
<div class="col-6 p-1">
<div class="card p-4 mb-3" style="border-radius: 0px 0px 0px 25px; text-align: center;"><img src="IMG_HERE" class="fr-fic fr-dib" width="20" height="20">Something here!</div>
</div>
<div class="col-6 p-1">
<div class="card p-4 mb-3" style="border-radius: 0px 0px 25px; text-align: center;"><img src="IMG_HERE" class="fr-fic fr-dib" width="20" height="20">something here!</div>
</div>
</div>
<!----------- ! CODING CREDIT ! please do not remove ----------->

<p class="text-center my-2">
<a class="text-muted tooltipster" href="https://toyhou.se/Lyriix_Codes" id="" title="Code by Lyriix_Codes"><img src="https://media.discordapp.net/attachments/895336751395115110/1085695467955949658/Senza_titolo_644_20230226195918.png" class="fr-fic fr-dii" width="26" height="26"></a><a class="text-muted tooltipster" href="https://toyhou.se/Lyriix_52" id="" title="Imagine credit"><i class="fas fa-camera"> </i></a><a class="text-muted tooltipster" href="https://toyhou.se/Doxiie" id="" title="Imagine credit"><i class="fas fa-star"></i></a></p>