<!--- Notes ---
- This profile uses custom colors, meaning you can change the colors to your liking.
- Use ctrl+f to find and replace each color
- Color 1: #a4b3bf
- Color 2: #ecbfba
- Color 3: #e4a29b
- Rules and more info: https://toyhou.se/~forums/16.htmlcss-graphics/39007.-free-html-templates
--------------->
<div class="container">
<div class="card card-block rounded-0 text-white display-2 shadow" style="background:linear-gradient(135deg,#a4b3bf,#ecbfba);border:transparent;border-top-right-radius:15px;border-top-left-radius:15px;">
<p><i class="far fa-heart"></i> Welcome</p>
</div>
<div class="card card-block mb-4 shadow bg-faded rounded-0" style="border:transparent;border-bottom-right-radius:15px;border-bottom-left-radius:15px;">
<div class="row justify-content-between">
<div class="col-lg-4">
<ul class="list-unstyled mb-0" style="color:#e4a29b;letter-spacing:1px;font-size:25px;letter-spacing:2px">
<li class="mb-2">
<span class="mb-0 text-uppercase">
Name
</span>
<span class="pull-right mb-0">
<!-- Put Name Here -->
name
</span>
<hr class="mt-2" style="border:1px dashed;">
</li>
<li class="mb-2">
<span class="mb-0 text-uppercase">
Age
</span>
<span class="pull-right mb-0">
<!-- Put Name Here -->
age
</span>
<hr class="mt-2" style="border:1px dashed;">
</li>
<li class="mb-2">
<span class="mb-0 text-uppercase">
Pronouns
</span>
<span class="pull-right mb-0">
<!-- Put Name Here -->
pronouns
</span>
<hr class="mt-2" style="border:1px dashed;">
</li>
</ul>
</div>
<div class="col-lg-8">
<p class="mb-1 text-center" style="color:#e4a29b;font-size:25px;letter-spacing:2px;font-weight:400;">
<!-- Put Adjectives Here -->
adjective - adjective - adjective
</p>
<!-- Paragraphs -->
<p class="mb-1" style="text-align:justify; color:#e4a29b;font-size:20px">Nam posuere, ex ac posuere aliquet, ex lorem convallis mi, a rutrum nunc ligula a odio. Aliquam erat volutpat. Mauris finibus fringilla erat, sit amet eleifend nisi vestibulum id. In venenatis lorem elit, quis mattis lectus consectetur non. Vivamus non purus id leo mollis semper.</p>
<p class="mt-4 text-center">
<!----------- Link 1 ----------->
<a href="PUT LINK HERE" class="badge badge-pill display-4 tooltipster text-white" title="PUT BLURB HERE" style="background-color:#a4b3bf;font-weight:400;font-size:20px;letter-spacing:2px;padding:1px 9px 3px 9px;line-height:30px;margin:1px">
link 1
</a>
<!----------- Link 2 ----------->
<a href="PUT LINK HERE" class="badge badge-pill display-4 tooltipster text-white" title="PUT BLURB HERE" style="background-color:#ecbfba;font-weight:400;font-size:20px;letter-spacing:2px;padding:1px 9px 3px 9px;line-height:30px;margin:1px">
link 2
</a>
<!----------- Link 3 ----------->
<a href="PUT LINK HERE" class="badge badge-pill display-4 tooltipster text-white" title="PUT BLURB HERE" style="background-color:#a4b3bf;font-weight:400;font-size:20px;letter-spacing:2px;padding:1px 9px 3px 9px;line-height:30px;margin:1px">
link 3
</a>
</p>
<p class="mb-2 text-center">
<!----------- Link 4 ----------->
<a href="PUT LINK HERE" class="badge badge-pill display-4 tooltipster text-white" title="PUT BLURB HERE" style="background-color:#a4b3bf;font-weight:400;font-size:20px;letter-spacing:2px;padding:1px 9px 3px 9px;line-height:30px;margin:1px">
link 4
</a>
<!----------- Link 5 ----------->
<a href="PUT LINK HERE" class="badge badge-pill display-4 tooltipster text-white" title="PUT BLURB HERE" style="background-color:#ecbfba;font-weight:400;font-size:20px;letter-spacing:2px;padding:1px 9px 3px 9px;line-height:30px;margin:1px">
link 5
</a>
<!----------- Link 6 ----------->
<a href="PUT LINK HERE" class="badge badge-pill display-4 tooltipster text-white" title="PUT BLURB HERE" style="background-color:#a4b3bf;font-weight:400;font-size:20px;letter-spacing:2px;padding:1px 9px 3px 9px;line-height:30px;margin:1px">
link 6
</a>
<!----------- Link 7 ----------->
<a href="PUT LINK HERE" class="badge badge-pill display-4 tooltipster text-white" title="PUT BLURB HERE" style="background-color:#ecbfba;font-weight:400;font-size:20px;letter-spacing:2px;padding:1px 9px 3px 9px;line-height:30px;margin:1px">
link 7
</a>
<!----------- Link 8 ----------->
<a href="PUT LINK HERE" class="badge badge-pill display-4 tooltipster text-white" title="PUT BLURB HERE" style="background-color:#a4b3bf;font-weight:400;font-size:20px;letter-spacing:2px;padding:1px 9px 3px 9px;line-height:30px;margin:1px">
link 8
</a>
</p>
</div>
</div>
</div>
<div id="collapse1" class="w-100 panel-collpase collapse">
<div class="row justify-content-between">
<!----------------------- Likes Section ----------------------->
<div class="col-lg-4">
<div class="card card-block rounded-0 text-white display-4 shadow" style="background:linear-gradient(135deg,#a4b3bf,#ecbfba);border:transparent;border-top-right-radius:15px;border-top-left-radius:15px;">
<p><i class="far fa-check"></i> Likes</p>
</div>
<div class="card card-block mb-4 rounded-0 bg-faded shadow" style="border:transparent;border-bottom-right-radius:15px;border-bottom-left-radius:15px;">
<ul class="list-unstyled" style="color:#e4a29b;">
<li class="mb-2">
<i class="far fa-arrow-right"></i>
Praesent vestibulum aliquet
</li>
<li class="mb-2">
<i class="far fa-arrow-right"></i>
Fusce mattis dignissim
</li>
<li class="mb-2">
<i class="far fa-arrow-right"></i>
Etiam tellus
</li>
<li class="mb-0">
<i class="far fa-arrow-right"></i>
Vehicula bibendum dolor
</li>
</ul>
</div>
</div>
<!--------------------- Likes Section End --------------------->
<!---------------------- Dislikes Section ---------------------->
<div class="col-lg-4">
<div class="card card-block rounded-0 text-white display-4 shadow" style="background:linear-gradient(135deg,#a4b3bf,#ecbfba);border:transparent;border-top-right-radius:15px;border-top-left-radius:15px;">
<p><i class="far fa-times"></i> Dislikes</p>
</div>
<div class="card card-block mb-4 rounded-0 bg-faded shadow" style="border:transparent;border-bottom-right-radius:15px;border-bottom-left-radius:15px;">
<ul class="list-unstyled" style="color:#e4a29b;">
<li class="mb-2">
<i class="far fa-arrow-right"></i>
Praesent vestibulum aliquet
</li>
<li class="mb-2">
<i class="far fa-arrow-right"></i>
Fusce mattis dignissim
</li>
<li class="mb-2">
<i class="far fa-arrow-right"></i>
Etiam tellus
</li>
<li class="mb-0">
<i class="far fa-arrow-right"></i>
Vehicula bibendum dolor
</li>
</ul>
</div>
</div>
<!-------------------- Dislikes Section End -------------------->
<!----------------------- Hobbies Section ----------------------->
<div class="col-lg-4">
<div class="card card-block rounded-0 text-white display-4 shadow" style="background:linear-gradient(135deg,#a4b3bf,#ecbfba);border:transparent;border-top-right-radius:15px;border-top-left-radius:15px;">
<p><i class="far fa-cog"></i> Hobbies</p>
</div>
<div class="card card-block mb-4 rounded-0 bg-faded shadow" style="border:transparent;border-bottom-right-radius:15px;border-bottom-left-radius:15px;">
<ul class="list-unstyled" style="color:#e4a29b;">
<li class="mb-2">
<i class="far fa-arrow-right"></i>
Praesent vestibulum aliquet
</li>
<li class="mb-2">
<i class="far fa-arrow-right"></i>
Fusce mattis dignissim
</li>
<li class="mb-2">
<i class="far fa-arrow-right"></i>
Etiam tellus
</li>
<li class="mb-0">
<i class="far fa-arrow-right"></i>
Vehicula bibendum dolor
</li>
</ul>
</div>
</div>
<!--------------------- Hobbies Section End --------------------->
</div>
</div>
<!-- Credits, Don't Remove -->
<a class="tooltipster pull-right" style="color:#ecbfba" href="https://toyhou.se/hukiolukio" title="code by hukiolukio">
<i class="fa-solid fa-code"></i>
</a>
<div class="row justify-content-center">
<a data-toggle="collapse" href="#collapse1" class="col-2 btn btn-lg d-inline text-left text-center display-1 text-white p-3 shadow shadow-none" style="letter-spacing:7px;border-radius:15px;background-color:#ecbfba;border:transparent;"><i class="fal fa-chevron-circle-down"></i></a>
</div>
</div>