Tabs: Pink & White (Code)

CheesyCodes

Profile

<div style="background: linear-gradient(to bottom, #de6fa1, #f1ddcf ); background-attachment: fixed; position: absolute; left: 0px; top: 0px; z-index: -1;" class="h-100 w-100"></div>



<div class="col-md-12 bg-secondary p-2" style="min-height:350px; width: 1500px;
background-image:url(https://images.unsplash.com/photo-1611025002797-1ac6d91f85db?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=387&q=80);
background-size:cover;
background-position:center;
">
<div class="col-md-12 bg-faded" style="background: rgba(0, 0, 0, 0.4); color: #f19cbb">

<div class="row mx-auto">
<div class="col-md-5 p-2">
<div class="col-12" style="width: 150px">
<div class="text-center text-pink p-2 bg-white" style="border-radius:12px 12px 0px 0px;">
<h4 class="text-uppercase mb-0" style="letter-spacing:1px;">Basics <i class="fa-solid fa-angles-down"></i></h4>
</div></div>
<div class="col-12 bg-white p-2" style="height: 305px; overflow: auto; ">


<div class="row no-gutters mx-auto my-2 p-1 justify-content-between">
<div class="col-12">
<span class="" style="font-variant:small-caps; font-weight:bold; color: #de6fa1">
Name
</span>
</div>
<div class="col-12 text-right">
First Middle Last, "nickname"
</div></div>

<div class="row no-gutters mx-auto my-2 justify-content-between">
<div class="col-12">
<span class="" style="font-variant:small-caps; font-weight:bold; color: #de6fa1">
Birthday & Age
</span>
</div>
<div class="col-12 text-right">
Month, day, year | 00/00/0000<br> 00 years
</div></div>

<div class="row no-gutters mx-auto my-2 justify-content-between">
<div class="col-12">
<span class="" style="font-variant:small-caps; font-weight:bold; color: #de6fa1">
Gender
</span>
</div>
<div class="col-12 text-right">
Gender | Pro/Nouns
</div></div>

<div class="row no-gutters mx-auto my-2 justify-content-between">
<div class="col-12">
<span class="" style="font-variant:small-caps; font-weight:bold; color: #de6fa1">
Species
</span>
</div>
<div class="col-12 text-right">
Elf<br><b>Subspecies</b>: High Elf
</div></div>

<div class="row no-gutters mx-auto my-2 justify-content-between">
<div class="col-12">
<span class="" style="font-variant:small-caps; font-weight:bold; color: #de6fa1">
Orientation
</span>
</div>
<div class="col-12 text-right">
<b>Sexual</b>: Asexual<br><b>Romantic</b>: Aromantic
</div></div>

<div class="row no-gutters mx-auto my-2 justify-content-between">
<div class="col-12">
<span class="" style="font-variant:small-caps; font-weight:bold; color: #de6fa1">
Occupation
</span>
</div>
<div class="col-12 text-right">
Content
</div></div>

<div class="row no-gutters mx-auto my-2 justify-content-between">
<div class="col-12">
<span class="" style="font-variant:small-caps; font-weight:bold; color: #de6fa1">
Voice Actor
</span>
</div>
<div class="col-12 text-right">
<a href="">Actor / Actress</a> as <br><a href="">Character</a>
</div></div>

</div></div>


<div class="col-md-2 bg-faded" style="height: 350px; background-image:url(https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/55489e69-68f4-4970-ae06-7181068c0b6b/de56agp-58ce9db6-2e94-4b82-852d-ce91c557fd40.png/v1/fill/w_786,h_1017,q_70,strp/aphrodite_by_mioree_art_de56agp-pre.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9MTA4MCIsInBhdGgiOiJcL2ZcLzU1NDg5ZTY5LTY4ZjQtNDk3MC1hZTA2LTcxODEwNjhjMGI2YlwvZGU1NmFncC01OGNlOWRiNi0yZTk0LTRiODItODUyZC1jZTkxYzU1N2ZkNDAucG5nIiwid2lkdGgiOiI8PTgzNSJ9XV0sImF1ZCI6WyJ1cm46c2VydmljZTppbWFnZS5vcGVyYXRpb25zIl19.eB2-zM1R0uTSqeDfkdsmdcOJcpf_1Zh6sRGqy8Elqk0);
background-size:cover;
background-position:center;
border-radius:12px 12px 0px 0px;">
</div>

<div class="col-md-5 p-2">
<div class="col-12" style="width: 150px">
<div class="text-center text-pink p-2 bg-white" style="border-radius:12px 12px 0px 0px;">
<h4 class="text-uppercase mb-0" style="letter-spacing:1px;">About <i class="fa-solid fa-angles-down"></i></h4>
</div></div>
<div class="col-12 bg-white p-2" style="height: 305px; overflow: auto;">
<p class="text-justify">Pink is the color of a namesake flower that is a pale tint of red. It was first used as a color name in the late 17th century. According to surveys in Europe and the United States, pink is the color most often associated with charm, politeness, sensitivity, tenderness, sweetness, childhood, femininity, and romance.</p>
<p class="text-justify">A combination of pink and white is associated with chastity and innocence, whereas a combination of pink and black links to eroticism and seduction. In the 21st century, pink is seen as a symbol of femininity, though this has not always been true; in the 1920s, pink was seen as a color that reflected masculinity.</p>
<p class="text-justify">The color pink is named after the flowers, pinks, flowering plants in the genus Dianthus, and derives from the frilled edge of the flowers. The verb "to pink" dates from the 14th century and means "to decorate with a perforated or punched pattern" (possibly from German picken, "to peck"). It has survived to the current day in pinking shears, hand-held scissors that cut a zig-zagged line to prevent fraying. In many European languages other than English the color is named after another flower -- the Rose. </p>
</div>
</div>
</div>



<div class="col-lg-12 col-xs-12 col-md-12 col-12 p-2">
<div class="row no-gutters p-2" style="background:#FFFFFF">
<div class="col text-left">
<div class="text-uppercase">
<p class="font-italic mb-1" style="font-weight:900; font-family:'georgia', serif; line-height:13px">
Emperor's New Clothes
</p>
<p style="font-family:courier new; line-height:13px">
by Panic! At The Disco
</p>
</div></div>
<span class="pull-right"><iframe class="flex-fill" style="width:100%;height:25px;width:25px;clip-path: polygon(25% 20%, 25% 100%, 80% 60%);opacity: 0.01;" frameborder="0" allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen src="https://www.youtube.com/embed/Pp6vLiPpEW4"></iframe><i class="fas fa-play text-info" style="margin-left:-20px;"></i></span>
</div></div>

</div></div>


<div class="col-md-12 bg-secondary p-2" style="min-height:350px; width: 1500px;
background-image:url(https://images.unsplash.com/photo-1611025002797-1ac6d91f85db?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=387&q=80);
background-size:cover;
background-position:center;
">

<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link text-uppercase bg-white active" style="color: #f19cbb; border-radius:12px 12px 0px 0px;" href="#personality" data-toggle="tab">Personality <i class="fa-solid fa-angles-down"></i></a>
</li>
<li class="nav-item">
<a class="nav-link text-uppercase bg-white" style="color: #f19cbb; border-radius:12px 12px 0px 0px;" href="#story" data-toggle="tab">Story <i class="fa-solid fa-angles-down"></i></a>
</li>
<li class="nav-item">
<a class="nav-link text-uppercase bg-white" style="color: #f19cbb; border-radius:12px 12px 0px 0px;" href="#design" data-toggle="tab">Design <i class="fa-solid fa-angles-down"></i></a>
</li>
<li class="nav-item">
<a class="nav-link text-uppercase bg-white" style="color: #f19cbb; border-radius:12px 12px 0px 0px;" href="#stats" data-toggle="tab">Stats <i class="fa-solid fa-angles-down"></i></a>
</li>
<li class="nav-item">
<a class="nav-link text-uppercase bg-white" style="color: #f19cbb; border-radius:12px 12px 0px 0px;" href="#rel" data-toggle="tab">Relationships <i class="fa-solid fa-angles-down"></i></a>
</li>
</ul>


<div class="tab-content col-md-12 bg-faded p-2" style="background: rgba(0, 0, 0, 0.4); color: #f19cbb">

<div class="tab-pane active show p-2" id="personality">
<div class="row no-gutters">
<div class="col-5 bg-white p-2" style="height: 305px; overflow: auto;">

<div class="row no-gutters mx-auto my-2 p-1 justify-content-between">
<div class="col-12">
<span class="" style="font-variant:small-caps; font-weight:bold; color: #de6fa1">
Enneagram
</span>
</div>
<div class="col-12 text-right">
?w?: The ???????
</div></div>

<div class="row no-gutters mx-auto my-2 p-1 justify-content-between">
<div class="col-12">
<span class="" style="font-variant:small-caps; font-weight:bold; color: #de6fa1">
MBTI
</span>
</div>
<div class="col-12 text-right">
????: The ????????
</div></div>

<div class="row no-gutters mx-auto my-2 p-1 justify-content-between">
<div class="col-12">
<span class="" style="font-variant:small-caps; font-weight:bold; color: #de6fa1">
Solar Rising Zodiac
</span>
</div>
<div class="col-12 text-right">
????, The ????????
</div></div>

<div class="row no-gutters mx-auto my-2 p-1 justify-content-between">
<div class="col-12">
<span class="" style="font-variant:small-caps; font-weight:bold; color: #de6fa1">
Lunar Rising Zodiac
</span>
</div>
<div class="col-12 text-right">
????, The ????????
</div></div>

<div class="row no-gutters mx-auto my-2 p-1 justify-content-between">
<div class="col-12">
<span class="" style="font-variant:small-caps; font-weight:bold; color: #de6fa1">
Chinese Zodiac
</span>
</div>
<div class="col-12 text-right">
???? | in Chinese here
</div></div>

<div class="row no-gutters mx-auto my-2 p-1 justify-content-between">
<div class="col-12">
<span class="" style="font-variant:small-caps; font-weight:bold; color: #de6fa1">
Decante
</span>
</div>
<div class="col-12 text-right">
????, The ????????
</div></div>

<div class="row no-gutters mx-auto my-2 p-1 justify-content-between">
<div class="col-12">
<span class="" style="font-variant:small-caps; font-weight:bold; color: #de6fa1">
Norse Rune
</span>
</div>
<div class="col-12 text-right">
????
</div></div>

<div class="row no-gutters mx-auto my-2 p-1 justify-content-between">
<div class="col-12">
<span class="" style="font-variant:small-caps; font-weight:bold; color: #de6fa1">
Tarot
</span>
</div>
<div class="col-12 text-right">
????
</div></div>

<div class="row no-gutters mx-auto my-2 p-1 justify-content-between">
<div class="col-12">
<span class="" style="font-variant:small-caps; font-weight:bold; color: #de6fa1">
Birth Colour
</span>
</div>
<div class="col-12 text-right">
???? (#)
</div></div></div>

<div class="col-md-2 bg-faded" style="height: 305px; background-image:url(https://images.unsplash.com/photo-1626208655973-78ae68dbbc30?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NjJ8fHBpbmt8ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=500&q=60);
background-size:cover;
background-position:center;
border-radius:12px 12px 0px 0px;">
</div>

<div class="col-5 bg-white p-2" style="height: 305px; overflow: auto;">
<h1 class="text-uppercase" style="font-size:15px; letter-spacing:7px">
<a href="#Traits" data-toggle="collapse" style="font-weight:bold; color: #de6fa1">
<i class="fas fa-list-tree mr-2"></i> Traits
</a>
</h1>
<div id="Traits" class="collapse">
<ul>
<li>Trait</li>
<ul>
<li>Trait explained</li>
</ul>
<li>Trait</li>
<ul>
<li>Trait explained</li>
</ul>
<li>Traits</li>
<ul>
<li>Trait explained</li>
</ul>
</ul>
</div>
<br>
<h1 class="text-uppercase" style="font-size:15px; letter-spacing:7px">
<a href="#Likes" data-toggle="collapse" style="font-weight:bold; color: #de6fa1">
<i class="fas fa-check mr-2"></i> Likes
</a>
</h1>
<div id="Likes" class="collapse">
<ul>
<li>Like</li>
<li>Like</li>
<li>Like</li>
<li>Like</li>
<li>Like</li>
</ul>
</div>
<br>
<h1 class="text-uppercase" style="font-size:15px; letter-spacing:7px">
<a href="#Dislikes" data-toggle="collapse" style="font-weight:bold; color: #de6fa1">
<i class="fas fa-times mr-2"></i>Dislikes
</a>
</h1>
<div id="Dislikes" class="collapse">
<ul>
<li>Dislike</li>
<li>Dislike</li>
<li>Dislike</li>
<li>Dislike</li>
<li>Dislike</li>
</ul>
</div>
</div></div></div>

<div class="tab-pane p-2" id="story">
<div class="row mx-auto">
<div class="col-8 bg-white p-2" style="height: 350px; overflow: auto;">

<div class="col-12" style=" background: rgba(0, 0, 0, 0.1); border-radius: 12px 12px 0px 0px;">
<div class="text-center text-pink p-2" style="">
<h4 class="text-uppercase mb-0" style="letter-spacing:1px;">Event One <i class="fa-solid fa-thumbtack"></i></h4>
</div></div>
<div class="col-12 p-2" style="background: rgba(0, 0, 0, 0.1);">
<p class="text-justify">The color pink has been described in literature since ancient times. In the Odyssey, written in approximately 800 BCE, Homer wrote "Then, when the child of morning, rosy-fingered dawn appeared..." Roman poets also described the color. Roseus is the Latin word meaning "rosy" or "pink." Lucretius used the word to describe the dawn in his epic poem On the Nature of Things (De rerum natura).</p>
<p class="text-justify">Pink was not a common color in the fashion of the Middle Ages; nobles usually preferred brighter reds, such as crimson. However, it did appear in women's fashion and religious art. In the 13th and 14th centuries, in works by Cimabue and Duccio, the Christ child was sometimes portrayed dressed in pink, the color associated with the body of Christ. </p>
</div>
<hr>

<div class="col-12" style=" background: rgba(0, 0, 0, 0.1); border-radius:12px 12px 0px 0px;">
<div class="text-center text-pink p-2" style="">
<h4 class="text-uppercase mb-0" style="letter-spacing:1px;">Event Two <i class="fa-solid fa-thumbtack"></i></h4>
</div></div>
<div class="col-12 p-2" style="background: rgba(0, 0, 0, 0.1);">
<p class="text-justify">In the high Renaissance painting the Madonna of the Pinks by Raphael, the Christ child is presenting a pink flower to the Virgin Mary. The pink was a symbol of marriage, showing a spiritual marriage between the mother and child.</p>
<p class="text-justify">During the Renaissance, pink was mainly used for the flesh color of faces and hands. The pigment commonly used for this was called light cinabrese; it was a mixture of the red earth pigment called sinopia, or Venetian red, and a white pigment called Bianco San Genovese, or lime white. In his famous 15th century manual on painting, Il Libro Dell'Arte, Cennino Cennini described it this way: "This pigment is made from the loveliest and lightest sinopia that is found and is mixed and mulled with St. John's white, as it is called in Florence; and this white is made from thoroughly white and thoroughly purified lime. And when these two pigments have been thoroughly mulled together (that is, two parts cinabrese and the third white), make little loaves of them like half walnuts and leave them to dry. When you need some, take however much of it seems appropriate. And this pigment does you great credit if you use it for painting faces, hands, and nudes on walls..."</p>
</div>


</div>

<div class="col-md-4 bg-faded" style="height: 350px; background-image:url(https://images.unsplash.com/photo-1510897345173-4d938815feb4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=880&q=80);
background-size:cover;
background-position:center;
border-radius: 0px 12px 0px 0px;">
</div>
</div></div>

<div class="tab-pane p-2" id="design">
<div class="row mx-auto">

<div class="col-5 bg-white p-2" style="height: 380px; overflow: auto;">

<div class="row no-gutters mx-auto my-2 p-1 justify-content-between">
<div class="col-12">
<span class="" style="font-variant:small-caps; font-weight:bold; color: #de6fa1">
Aesthetic
</span>
</div>
<div class="col-12 text-right">
??????
</div></div>

<div class="row no-gutters mx-auto my-2 p-1 justify-content-between">
<div class="col-12">
<span class="" style="font-variant:small-caps; font-weight:bold; color: #de6fa1">
Height
</span>
</div>
<div class="col-12 text-right">
??'??" ft | ??.??m | ?? cm
</div></div>

<div class="row no-gutters mx-auto my-2 p-1 justify-content-between">
<div class="col-12">
<span class="" style="font-variant:small-caps; font-weight:bold; color: #de6fa1">
Skin Colour
</span>
</div>
<div class="col-12 text-right">
#hex <i class="fa-solid fa-square fa-2xl" style="color: #dabfff;"></i>
</div></div>

<div class="row no-gutters mx-auto my-2 p-1 justify-content-between">
<div class="col-12">
<span class="" style="font-variant:small-caps; font-weight:bold; color: #de6fa1">
Eye Colour(s)
</span>
</div>
<div class="col-12 text-right">
#hex <i class="fa-solid fa-square fa-2xl" style="color: #dabfff;"></i>
</div></div>

<div class="row no-gutters mx-auto my-2 p-1 justify-content-between">
<div class="col-12">
<span class="" style="font-variant:small-caps; font-weight:bold; color: #de6fa1">
Hair Colour(s)
</span>
</div>
<div class="col-12 text-right">
#hex <i class="fa-solid fa-square fa-2xl" style="color: #dabfff;"></i>
</div></div>

<div class="row no-gutters mx-auto my-2 p-1 justify-content-between">
<div class="col-12">
<span class="" style="font-variant:small-caps; font-weight:bold; color: #de6fa1">
Makeup
</span>
</div>
<div class="col-12 text-right">
<b>Eye Shadow</b>: #hex <i class="fa-solid fa-square fa-2xl" style="color: #dabfff;"></i><br>
<b>Lipstick</b>: #hex <i class="fa-solid fa-square fa-2xl" style="color: #dabfff;"></i><br>
<b>Blush</b>: #hex <i class="fa-solid fa-square fa-2xl" style="color: #dabfff;"></i><br>
<b>Nail Polish</b>: #hex <i class="fa-solid fa-square fa-2xl" style="color: #dabfff;"></i>
</div></div>

<div class="row no-gutters mx-auto my-2 p-1 justify-content-between">
<div class="col-12">
<span class="" style="font-variant:small-caps; font-weight:bold; color: #de6fa1">
Outfit Colour(s)
</span>
</div>
<div class="col-12 text-right">
<b>Main</b>: #hex <i class="fa-solid fa-square fa-2xl" style="color: #dabfff;"></i><br>
<b>Secondary</b>: #hex <i class="fa-solid fa-square fa-2xl" style="color: #dabfff;"></i><br>
<b>Tertiary</b>: #hex <i class="fa-solid fa-square fa-2xl" style="color: #dabfff;"></i><br>
<b>Quaternary</b>: #hex <i class="fa-solid fa-square fa-2xl" style="color: #dabfff;"></i>
</div></div>
</div>

<div class="col-md-3 p-2 bg-white" style="min-height:380px;background-image:url(https://images.unsplash.com/photo-1515697260829-aea99da88f87?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=387&q=80);background-size:contain;background-position:center; background-repeat: no-repeat;">
</div>

<div class="col-4 bg-white p-2" style="height: 380px; overflow: auto;">
<ul class="mt-3">
<li class="mb-2">Design Notes go here!!! This Scrolls!!</li>
<li class="mb-2">In optics, the word "pink" can refer to any of the pale shades of colors between bluish red to red in hue, of medium to high lightness, and of low to moderate saturation. </li>
<li class="mb-2">Although pink is generally considered a tint of red, the colors of most tints of pink are slightly bluish, and lie between red and magenta. A few variations of pink, such as salmon color, lean toward orange.</li>
<li class="mb-2">As a ray of white sunlight travels through the atmosphere, some of the colors are scattered out of the beam by air molecules and airborne particles. This is called Rayleigh scattering.</li>
<li class="mb-2">Colors with a shorter wavelength, such as blue and green, scatter more strongly, and are removed from the light that finally reaches the eye.</li>
<li class="mb-2">At sunrise and sunset, when the path of the sunlight through the atmosphere to the eye is longest, the blue and green components are removed almost completely, leaving the longer wavelength orange, red and pink light. </li>
<li class="mb-2">The remaining pinkish sunlight can also be scattered by cloud droplets and other relatively large particles, which give the sky above the horizon a pink or reddish glow.</li>
<li class="mb-2">Pink is one of the most common colors of flowers; it serves to attract the insects and birds necessary for pollination and perhaps also to deter predators. The color comes from natural pigments called anthocyanins, which also provide the pink in raspberries. </li>
<li class="mb-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li class="mb-2">Suspendisse sit amet massa blandit, fermentum enim a, scelerisque velit. </li>
<li class="mb-2">Integer interdum urna ac dui sollicitudin sollicitudin.</li>
<li class="mb-2">In feugiat posuere nulla, eget lobortis ante. </li>
</ul>
</div>
</div></div>

<div class="tab-pane p-2" id="stats">
<div class="row no-gutters">

<div class="col-4 bg-white p-2" style="height: 305px; overflow: auto;">

<div class="row no-gutters mx-auto my-2 p-1 justify-content-between">
<div class="col-12">
<span class="" style="font-variant:small-caps; font-weight:bold; color: #de6fa1">
Strength
</span>
<div class="progress rounded-0" style="background-color:#f1ddcf;">
<div class="progress-bar progress-bar-striped" style="width:50%;background-color:#e4007C;">
</div></div></div></div>

<div class="row no-gutters mx-auto my-2 p-1 justify-content-between">
<div class="col-12">
<span class="" style="font-variant:small-caps; font-weight:bold; color: #de6fa1">
Defense
</span>
<div class="progress rounded-0" style="background-color:#f1ddcf;">
<div class="progress-bar progress-bar-striped" style="width:50%;background-color:#e4007C;">
</div></div></div></div>

<div class="row no-gutters mx-auto my-2 p-1 justify-content-between">
<div class="col-12">
<span class="" style="font-variant:small-caps; font-weight:bold; color: #de6fa1">
Constitution
</span>
<div class="progress rounded-0" style="background-color:#f1ddcf;">
<div class="progress-bar progress-bar-striped" style="width:50%;background-color:#e4007C;">
</div></div></div></div>

<div class="row no-gutters mx-auto my-2 p-1 justify-content-between">
<div class="col-12">
<span class="" style="font-variant:small-caps; font-weight:bold; color: #de6fa1">
Dexterity
</span>
<div class="progress rounded-0" style="background-color:#f1ddcf;">
<div class="progress-bar progress-bar-striped" style="width:50%;background-color:#e4007C;">
</div></div></div></div>

<div class="row no-gutters mx-auto my-2 p-1 justify-content-between">
<div class="col-12">
<span class="" style="font-variant:small-caps; font-weight:bold; color: #de6fa1">
Intelligence
</span>
<div class="progress rounded-0" style="background-color:#f1ddcf;">
<div class="progress-bar progress-bar-striped" style="width:50%;background-color:#e4007C;">
</div></div></div></div>

<div class="row no-gutters mx-auto my-2 p-1 justify-content-between">
<div class="col-12">
<span class="" style="font-variant:small-caps; font-weight:bold; color: #de6fa1">
Charisma
</span>
<div class="progress rounded-0" style="background-color:#f1ddcf;">
<div class="progress-bar progress-bar-striped" style="width:50%;background-color:#e4007C;">
</div></div></div></div>

<div class="row no-gutters mx-auto my-2 p-1 justify-content-between">
<div class="col-12">
<span class="" style="font-variant:small-caps; font-weight:bold; color: #de6fa1">
Wisdom
</span>
<div class="progress rounded-0" style="background-color:#f1ddcf;">
<div class="progress-bar progress-bar-striped" style="width:50%;background-color:#e4007C;">
</div></div></div></div>

<div class="row no-gutters mx-auto my-2 p-1 justify-content-between">
<div class="col-12">
<span class="" style="font-variant:small-caps; font-weight:bold; color: #de6fa1">
Willpower
</span>
<div class="progress rounded-0" style="background-color:#f1ddcf;">
<div class="progress-bar progress-bar-striped" style="width:50%;background-color:#e4007C;">
</div></div></div></div>

<div class="row no-gutters mx-auto my-2 p-1 justify-content-between">
<div class="col-12">
<span class="" style="font-variant:small-caps; font-weight:bold; color: #de6fa1">
Perception
</span>
<div class="progress rounded-0" style="background-color:#f1ddcf;">
<div class="progress-bar progress-bar-striped" style="width:50%;background-color:#e4007C;">
</div></div></div></div>

<div class="row no-gutters mx-auto my-2 p-1 justify-content-between">
<div class="col-12">
<span class="" style="font-variant:small-caps; font-weight:bold; color: #de6fa1">
Luck
</span>
<div class="progress rounded-0" style="background-color:#f1ddcf;">
<div class="progress-bar progress-bar-striped" style="width:50%;background-color:#e4007C;">
</div></div></div></div>


<div class="row no-gutters mx-auto my-2 p-1 justify-content-between">
<div class="col-12">
<span class="" style="font-variant:small-caps; font-weight:bold; color: #de6fa1">
Custom
</span>
<div class="progress rounded-0" style="background-color:#f1ddcf;">
<div class="progress-bar progress-bar-striped" style="width:50%;background-color:#e4007C;">
</div></div></div></div>
</div>


<div class="col-md-2 bg-faded" style="height: 305px; background-image:url(https://images.unsplash.com/photo-1567653418876-5bb0e566e1c2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=464&q=80);
background-size:cover;
background-position:center;
border-radius:12px 12px 0px 0px;">
</div>

<div class="col-6 bg-white p-2" style="height: 305px; overflow: auto;">
<h1 class="text-uppercase" style="font-size:15px; letter-spacing:7px">
<a href="#Pow1" data-toggle="collapse" style="font-weight:bold; color: #de6fa1">
<i class="fas fa-heart mr-2"></i> Ability Name
</a>
</h1>
<div id="Pow1" class="collapse">
<ul>
<li>des</li>
<ul>
<li>In the 17th century, the word pink or pinke was also used to describe a yellowish pigment, which was mixed with blue colors to yield greenish colors.</li>
<li>Although pink is generally considered a tint of red, the colors of most tints of pink are slightly bluish, and lie between red and magenta. </li>
<li>Thomas Jenner's A Book of Drawing, Limning, Washing (1652) categorises "Pink & blew bice" amongst the greens (p. 38), and specifies several admixtures of greenish colors made with pink—e.g. "Grasse-green is made of Pink and Bice, it is shadowed with Indigo and Pink … French-green of Pink and Indico [shadowed with] Indico" (pp. 38–40). In William Salmon's Polygraphice (1673), "Pink yellow" is mentioned amongst the chief yellow pigments (p. 96), and the reader is instructed to mix it with either Saffron or Ceruse for "sad" or "light" shades thereof, respectively. </li>
</ul>
</ul>
</div>
<br>
<h1 class="text-uppercase" style="font-size:15px; letter-spacing:7px">
<a href="#Pow2" data-toggle="collapse" style="font-weight:bold; color: #de6fa1">
<i class="fas fa-star mr-2"></i> Ability Name
</a>
</h1>
<div id="Pow2" class="collapse">
<ul>
<li>des</li>
<ul>
<li>Grow lights often use a combination of red and blue wavelengths, which generally appear pink to the human eye.</li>
<li>Pink neon signs are generally produced using one of two different methods. One method is to use neon gas and a blue or purple phosphor, which generally produces a warmer (more reddish) or more intense shade of pink. Another method is to use an argon/mercury blend and a red phosphor, which generally produces a cooler (more purplish) or softer shade of pink.</li>
<li>Pink LEDs can be produced using two methods, either with a blue LED using two phosphors (yellow for the first phosphor, and red, orange, or pink for the second), or by placing a pink dye on top of a white LED. Color shifting was a common issue with early pink LEDs, where the red, orange, or pink phosphors or dyes faded over time, causing the pink color to eventually shift towards white or blue. These issues have been mitigated by the more recent introduction of more fade-resistant phosphors.</li>
</ul>
</ul>
</div>

</div></div></div>

<div class="tab-pane p-2" id="rel">
<div class="row no-gutters">


<div class="col-md-3 bg-faded" style="height: 350px; background-image:url(https://images.unsplash.com/photo-1520052205864-92d242b3a76b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=869&q=80);
background-size:cover;
background-position:center;
border-radius:12px 0px 0px 0px;">
</div>

<div class="col-9 bg-white p-2" style="height: 350px; overflow: auto;">
<div class="row no-gutters">


<div class="col-md-4">
<div style="background-color: #FFD07B;background-image:url(https://images.unsplash.com/photo-1577915509669-e8daeb28b498?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=580&q=80);background-size:cover;background-position:center;background-repeat:no-repeat; min-height:260px; border-radius:12px 0px 0px 12px;">
<div class="pr-1 p-2">

<a style="color:#B3005E;" href="https://unsplash.com/photos/ChAZTyVXpNI"><i class="fas fa-info-circle"></i></a>
</div></div></div>

<div class="col-md-8">
<div class="" style="border-style: solid; border-color: #D14D72; background-color: #FCC8D1; color: #D75281; border-width: 5px; border-radius:0px 12px 12px 0px;">
<div class="col-lg-12 w-100 row no-gutters">
<div class="col-lg-12 col-xs-12 col-md-12 col-12 p-2" style="height:250px;overflow:auto;">
<div class="col-xl-12 col-sm-12 p-1 d-flex justify-content-between">
<span class="text-uppercase"><a style="color: #B3005E;" href="#">First Last</a></span>
<div class="p-1 col-4 text-right">
<i class="fas fa-heart" style="color: #B3005E;"></i>
<i class="fas fa-heart" style="color: #B3005E;"></i>
<i class="fas fa-heart" style="color: #B3005E;"></i>
<i class="fad fa-heart" style="color: #B3005E;"></i>
<i class="fad fa-heart" style="color: #B3005E;"></i>
</div></div>
<div class="text-left">
<span class="badge rounded-1 mb-2 p-1 px-2 text-uppercase" style="background-color: #D14D72; font-size: 0.7em;"> Realtionship</span>
<span class="badge rounded-1 mb-2 p-1 px-2 text-uppercase" style="background-color: #D14D72; font-size: 0.7em;">They/Them</span>
</div>
<p style="text-align: justify;">
<font size="1">This whole section scrolls now! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vulputate tristique ligula, non fringilla neque tempus sit amet. Maecenas ornare nulla quis hendrerit convallis. Nunc lobortis orci at congue aliquam. Pellentesque sollicitudin nec metus sit amet pharetra. Nulla diam ex, facilisis et velit quis, auctor dignissim lectus. Ut ac blandit lorem. Proin id eros ultricies, pellentesque est hendrerit, sollicitudin libero.
</p></font>
<p style="text-align: justify;">
<font size="1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vulputate tristique ligula, non fringilla neque tempus sit amet. Maecenas ornare nulla quis hendrerit convallis. Nunc lobortis orci at congue aliquam. Pellentesque sollicitudin nec metus sit amet pharetra. Nulla diam ex, facilisis et velit quis, auctor dignissim lectus. Ut ac blandit lorem. Proin id eros ultricies, pellentesque est hendrerit, sollicitudin libero.
</p></font>
</div></div></div></div>


<div class="col-md-12 p-2">
</div>



<div class="col-md-4">
<div style="background-color: #FFD07B;background-image:url(https://images.unsplash.com/photo-1562619371-b67725b6fde2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=870&q=80);background-size:cover;background-position:center;background-repeat:no-repeat; min-height:260px; border-radius:12px 0px 0px 12px;">
<div class="pr-1 p-2">

<a style="color:#B3005E;" href="https://unsplash.com/photos/hNrd99q5peI"><i class="fas fa-info-circle"></i></a>
</div></div></div>

<div class="col-md-8">
<div class="" style="border-style: solid; border-color: #D14D72; background-color: #FCC8D1; color: #D75281; border-width: 5px; border-radius:0px 12px 12px 0px;">
<div class="col-lg-12 w-100 row no-gutters">
<div class="col-lg-12 col-xs-12 col-md-12 col-12 p-2" style="height:250px;overflow:auto;">
<div class="col-xl-12 col-sm-12 p-1 d-flex justify-content-between">
<span class="text-uppercase"><a style="color: #B3005E;" href="#">First Last</a></span>
<div class="p-1 col-4 text-right">
<i class="fas fa-heart" style="color: #B3005E;"></i>
<i class="fas fa-heart" style="color: #B3005E;"></i>
<i class="fas fa-heart" style="color: #B3005E;"></i>
<i class="fad fa-heart" style="color: #B3005E;"></i>
<i class="fad fa-heart" style="color: #B3005E;"></i>
</div></div>
<div class="text-left">
<span class="badge rounded-1 mb-2 p-1 px-2 text-uppercase" style="background-color: #D14D72; font-size: 0.7em;"> Realtionship</span>
<span class="badge rounded-1 mb-2 p-1 px-2 text-uppercase" style="background-color: #D14D72; font-size: 0.7em;">They/Them</span>
</div>
<p style="text-align: justify;">
<font size="1">This whole section scrolls now! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vulputate tristique ligula, non fringilla neque tempus sit amet. Maecenas ornare nulla quis hendrerit convallis. Nunc lobortis orci at congue aliquam. Pellentesque sollicitudin nec metus sit amet pharetra. Nulla diam ex, facilisis et velit quis, auctor dignissim lectus. Ut ac blandit lorem. Proin id eros ultricies, pellentesque est hendrerit, sollicitudin libero.
</p></font>
<p style="text-align: justify;">
<font size="1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vulputate tristique ligula, non fringilla neque tempus sit amet. Maecenas ornare nulla quis hendrerit convallis. Nunc lobortis orci at congue aliquam. Pellentesque sollicitudin nec metus sit amet pharetra. Nulla diam ex, facilisis et velit quis, auctor dignissim lectus. Ut ac blandit lorem. Proin id eros ultricies, pellentesque est hendrerit, sollicitudin libero.
</p></font>
</div></div></div></div>


<div class="col-md-12 p-2">
</div>



<div class="col-md-4">
<div style="background-color: #FFD07B;background-image:url(https://images.unsplash.com/photo-1579792699702-bebd8d34d1f3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=870&q=80);background-size:cover;background-position:center;background-repeat:no-repeat; min-height:260px; border-radius:12px 0px 0px 12px;">
<div class="pr-1 p-2">

<a style="color:#B3005E;" href="https://unsplash.com/photos/0UMy_4q6QQE"><i class="fas fa-info-circle"></i></a>
</div></div></div>

<div class="col-md-8">
<div class="" style="border-style: solid; border-color: #D14D72; background-color: #FCC8D1; color: #D75281; border-width: 5px; border-radius:0px 12px 12px 0px;">
<div class="col-lg-12 w-100 row no-gutters">
<div class="col-lg-12 col-xs-12 col-md-12 col-12 p-2" style="height:250px;overflow:auto;">
<div class="col-xl-12 col-sm-12 p-1 d-flex justify-content-between">
<span class="text-uppercase"><a style="color: #B3005E;" href="#">First Last</a></span>
<div class="p-1 col-4 text-right">
<i class="fas fa-heart" style="color: #B3005E;"></i>
<i class="fas fa-heart" style="color: #B3005E;"></i>
<i class="fas fa-heart" style="color: #B3005E;"></i>
<i class="fad fa-heart" style="color: #B3005E;"></i>
<i class="fad fa-heart" style="color: #B3005E;"></i>
</div></div>
<div class="text-left">
<span class="badge rounded-1 mb-2 p-1 px-2 text-uppercase" style="background-color: #D14D72; font-size: 0.7em;"> Realtionship</span>
<span class="badge rounded-1 mb-2 p-1 px-2 text-uppercase" style="background-color: #D14D72; font-size: 0.7em;">They/Them</span>
</div>
<p style="text-align: justify;">
<font size="1">This whole section scrolls now! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vulputate tristique ligula, non fringilla neque tempus sit amet. Maecenas ornare nulla quis hendrerit convallis. Nunc lobortis orci at congue aliquam. Pellentesque sollicitudin nec metus sit amet pharetra. Nulla diam ex, facilisis et velit quis, auctor dignissim lectus. Ut ac blandit lorem. Proin id eros ultricies, pellentesque est hendrerit, sollicitudin libero.
</p></font>
<p style="text-align: justify;">
<font size="1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vulputate tristique ligula, non fringilla neque tempus sit amet. Maecenas ornare nulla quis hendrerit convallis. Nunc lobortis orci at congue aliquam. Pellentesque sollicitudin nec metus sit amet pharetra. Nulla diam ex, facilisis et velit quis, auctor dignissim lectus. Ut ac blandit lorem. Proin id eros ultricies, pellentesque est hendrerit, sollicitudin libero.
</p></font>
</div></div></div></div>

</div></div>

</div></div></div></div>

<center>
<span data-toggle="tooltip" title="Code by CheeseSatan" class=""><a href="https://toyhou.se/CheeseSatan"><i class="fas fa-cheese-swiss fa-fw text-info"></i></a></span>
|
<span data-toggle="tooltip" title="Relationship Code (Note: is heavily edited/frankenstein) & Code layout inspired by reanimatedcowboy"><a href="https://toyhou.se/20119097.-strife-f2u-html"><i class="fas fa-hat-cowboy fa-fw text-info"></i><i class="fas fa-skull fa-fw text-info"></i></a></span>
<div class="pull-right">

<span data-toggle="tooltip" title="Background Image by J Lee"><a href="https://unsplash.com/photos/hnRa6aO8cCM"><i class="far fa-circle fa-fw text-info"></i></a></span>
<span data-toggle="tooltip" title="Focal Image by mioree-art"><a href="https://www.deviantart.com/mioree-art/art/Aphrodite-855218041"><i class="fas fa-circle fa-fw text-info"></i></a></span>
<span data-toggle="tooltip" title="Aesthetic Image 1 by Bence Biczó"><a href="https://unsplash.com/photos/AOFIIhX1njQ"><i class="far fa-circle fa-fw text-info"></i></a></span>
<span data-toggle="tooltip" title="Aesthetic Image 2 by Karly Santiago"><a href="https://unsplash.com/photos/79Ut1cRYoQ0"><i class="fas fa-circle fa-fw text-info"></i></a></span>
<span data-toggle="tooltip" title="Design Image by Nathan Dumlao"><a href="https://unsplash.com/photos/vKiXuwnE6wU"><i class="far fa-circle fa-fw text-info"></i></a></span>
<span data-toggle="tooltip" title="Aesthetic Image 3 by Mae Mu"><a href="https://unsplash.com/photos/_C5zsV_p-YI"><i class="fas fa-circle fa-fw text-info"></i></a></span>
<span data-toggle="tooltip" title="Aesthetic Image 4 by Meiying Ng"><a href="https://unsplash.com/photos/OrwkD-iWgqg"><i class="far fa-circle fa-fw text-info"></i></a></span>
</div>
</center>

Tabs: Pink & White (Code)

CheesyCodes

Profile

Images