[f2u] Space Comet - Pastebin.com

<!--

=================================================

highlight color 1: #a3dfff

highlight color 2: #e0fff9

icons info:

fontawesome.com

=================================================

-->

<!---===== background image ===============================================

=====================-->

<div class="card" style="

background-image: url('https://images.unsplash.com/photo-1489183988443-b37b7e119ba6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1744&q=80');

background-repeat: no-repeat; background-attachment: fixed; background-size: cover; padding-top: 80px; padding-bottom: 80px; padding-left: 20px; padding-right: 20px; border: 0px; border-radius: 0px; margin: -15px ;

margin-top: -60px;">

Firstname Lastname

</span>

<a class="nav-link active btn m-1" data-toggle="tab" href="#basics" style="background: rgba(0, 0, 0, 0.55); color: #ffffff; text-shadow: 0px 0px 6px #e0fff9;"> <i class="fa-duotone fa-id-card-clip"></i> Basics</a>

</li>

<a class="nav-link btn m-1" data-toggle="tab" href="#design" style="background: rgba(0, 0, 0, 0.55); color: #ffffff; text-shadow: 0px 0px 6px #e0fff9;"> <i class="fa-duotone fa-camera-retro"></i> Design</a>

</li>

<a class="nav-link btn m-1" data-toggle="tab" href="#personality" style="background: rgba(0, 0, 0, 0.55); color: #ffffff; text-shadow: 0px 0px 6px #e0fff9;"> <i class="fa-duotone fa-chart-bar"></i> Personality</a>

</li>

</li>

<a class="nav-link btn m-1" data-toggle="tab" href="#trivia" style="background: rgba(0, 0, 0, 0.55); color: #ffffff; text-shadow: 0px 0px 6px #e0fff9;"> <i class="fa-duotone fa-message-question"></i> Trivia</a>

</li>

<a class="nav-link btn m-1" data-toggle="tab" href="#details" style="background: rgba(0, 0, 0, 0.55); color: #ffffff; text-shadow: 0px 0px 6px #e0fff9;"> <i class="fa-duotone fa-chart-simple-horizontal"></i> Details</a>

</li>

<a class="nav-link btn m-1" data-toggle="tab" href="#combat" style="background: rgba(0, 0, 0, 0.55); color: #ffffff; text-shadow: 0px 0px 6px #e0fff9;"> <i class="fa-duotone fa-swords"></i> Combat</a>

</li>

<a class="nav-link btn m-1" data-toggle="tab" href="#inventory" style="background: rgba(0, 0, 0, 0.55); color: #ffffff; text-shadow: 0px 0px 6px #e0fff9;"> <i class="fa-duotone fa-treasure-chest"></i> Inventory</a>

</li>

<a class="nav-link btn m-1" data-toggle="tab" href="#links" style="background: rgba(0, 0, 0, 0.55); color: #ffffff; text-shadow: 0px 0px 6px #e0fff9;"> <i class="fa-duotone fa-link"></i> Links</a>

</li>

</li>

</ul>

</p>

<div style="background-image:url(https://images.unsplash.com/photo-1526336024174-e58f5cdd8e13?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80);

min-height:420px; background-size:cover; background-position: center; border: rgba(255, 255, 255) solid 1px; border-radius: 14px; box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2); margin-top: 10px; padding: 10px;">

</div>

</p>

</div>

<span> content</span>

</div>

</div>

<i class="fa-duotone fa-message-quote"></i> Nickname </span>

<span> content</span>

</div>

</div>

<i class="fa-duotone fa-language"></i> [language] Name </span>

<span> content</span>

</div>

</div>

<span> content</span>

</div>

</div>

<i class="fa-duotone fa-balloons"></i> Birthday </span>

<span> content</span>

</div>

</div>

<i class="fa-duotone fa-venus-mars"></i> Gender </span>

<span> content</span>

</div>

</div>

<i class="fa-duotone fa-comment-pen"></i> Pronouns </span>

<span> content</span>

</div>

</div>

<i class="fa-duotone fa-head-side-heart"></i> Orientation </span>

<span> content</span>

</div>

</div>

<i class="fa-duotone fa-dna"></i> Species </span>

<span> content</span>

</div>

</div>

<i class="fa-duotone fa-earth-americas"></i> Ethnicity </span>

</div>

</div>

<i class="fa-duotone fa-scale-unbalanced-flip"></i> Alignment </span>

<span> content</span>

</div>

</div>

<i class="fa-duotone fa-ruler-vertical"></i> Height </span>

<span> content</span>

</div>

</div>

<i class="fa-duotone fa-briefcase"></i> Occupation </span>

<span> content</span>

</div>

</div>

<i class="fa-duotone fa-location-crosshairs"></i> Location </span>

<span> content</span>

</div>

</div>

Languages </span>

<span> content</span>

</div>

</div>

MBTI </span>

<span> content</span>

</div>

</div>

<i class="fa-duotone fa-sun"></i> Western Zodiac </span>

<span> content</span>

</div>

</div>

<i class="fa-duotone fa-dragon"></i> Eastern Zodiac </span>

<span> content</span>

</div>

</div>

Dominant hand </span>

<span> content</span>

</div>

</div>

Blood type </span>

<span> content</span>

</div>

</div>

Birthplace </span>

<span> content</span>

</div>

</div>

<i class="fa-duotone fa-book-sparkles"></i> Religion </span>

<span> or beliefs</span>

</div>

</div>

Relationship status </span>

<span> content</span>

</div>

</div>

Status </span>

<span> content</span>

</div>

</div>

<p>

intro / short description.

<p>

the entire box will scroll. 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.

</p>

</div>

</div>

Appearance

</span>

<p>

describe appearance. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis blandit turpis cursus in hac habitasse platea dictumst quisque. Proin sagittis nisl rhoncus mattis rhoncus urna.

</p>

Height </span>

<span> content</span>

</div>

</div>

Weight </span>

<span> content</span>

</div>

</div>

Body type </span>

<span> content</span>

</div>

</div>

Skin </span>

<span> content</span>

</div>

</div>

Eyes </span>

<span> content</span>

</div>

</div>

Hair color </span>

<span> content</span>

</div>

</div>

Hairstyle </span>

<span> content</span>

</div>

</div>

custom_trait </span>

<span> content</span>

</div>

</div>

custom_trait </span>

<span> content</span>

</div>

</div>

custom_trait </span>

<span> content</span>

</div>

</div>

custom_trait </span>

<span> content</span>

</div>

</div>

<span style="font-variant:small-caps; color: #e0fff9; font-weight: 700; font-size: 125%;"> Design notes <i class="fa-duotone fa-paintbrush"></i></i></span>

<ul>

<li>write</li>

<li>design</li>

<li>notes</li>

</ul>

</div>

Personality

</span>

stat </span>

<span>

</span>

</div>

</div>

stat </span>

<span>

</span>

</div>

</div>

stat </span>

<span>

</span>

</div>

</div>

stat </span>

<span>

</span>

</div>

</div>

stat </span>

<span>

</span>

</div>

</div>

stat </span>

<span>

</span>

</div>

</div>

stat </span>

<span>

</span>

</div>

</div>

stat </span>

<span>

</span>

</div>

</div>

<span style="font-variant:small-caps; color: #e0fff9; font-weight: 700; font-size: 125%;"> Likes <i class="fa-duotone fa-heart-pulse"></i></span>

<ul>

<li>content</li>

</ul>

</div>

<span style="font-variant:small-caps; color: #e0fff9; font-weight: 700; font-size: 125%;"> Dislikes <i class="fa-duotone fa-heart-crack"></i></span>

<ul>

<li>content</li>

</ul>

</div>

<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>

Header</h2>

<p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis blandit turpis cursus in hac habitasse platea dictumst quisque. Proin sagittis nisl rhoncus mattis rhoncus urna. Blandit cursus risus at ultrices mi tempus. Felis imperdiet proin fermentum leo vel. Et malesuada fames ac turpis egestas integer eget aliquet. Tempus egestas sed sed risus pretium quam vulputate dignissim suspendisse. Nec tincidunt praesent semper feugiat nibh sed. Id venenatis a condimentum vitae sapien pellentesque habitant. Phasellus egestas tellus rutrum tellus. Faucibus interdum posuere lorem ipsum dolor sit amet. Eleifend mi in nulla posuere sollicitudin aliquam ultrices sagittis orci. Quisque id diam vel quam elementum pulvinar. Magna sit amet purus gravida quis blandit turpis cursus.

</p>

Header</h2>

<p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis blandit turpis cursus in hac habitasse platea dictumst quisque. Proin sagittis nisl rhoncus mattis rhoncus urna. Blandit cursus risus at ultrices mi tempus. Felis imperdiet proin fermentum leo vel. Et malesuada fames ac turpis egestas integer eget aliquet. Tempus egestas sed sed risus pretium quam vulputate dignissim suspendisse. Nec tincidunt praesent semper feugiat nibh sed. Id venenatis a condimentum vitae sapien pellentesque habitant. Phasellus egestas tellus rutrum tellus. Faucibus interdum posuere lorem ipsum dolor sit amet. Eleifend mi in nulla posuere sollicitudin aliquam ultrices sagittis orci. Quisque id diam vel quam elementum pulvinar. Magna sit amet purus gravida quis blandit turpis cursus.

</p>

<p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis blandit turpis cursus in hac habitasse platea dictumst quisque. Proin sagittis nisl rhoncus mattis rhoncus urna. Blandit cursus risus at ultrices mi tempus. Felis imperdiet proin fermentum leo vel. Et malesuada fames ac turpis egestas integer eget aliquet. Tempus egestas sed sed risus pretium quam vulputate dignissim suspendisse. Nec tincidunt praesent semper feugiat nibh sed. Id venenatis a condimentum vitae sapien pellentesque habitant. Phasellus egestas tellus rutrum tellus. Faucibus interdum posuere lorem ipsum dolor sit amet. Eleifend mi in nulla posuere sollicitudin aliquam ultrices sagittis orci. Quisque id diam vel quam elementum pulvinar. Magna sit amet purus gravida quis blandit turpis cursus.

</p>

Header</h2>

<p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis blandit turpis cursus in hac habitasse platea dictumst quisque. Proin sagittis nisl rhoncus mattis rhoncus urna. Blandit cursus risus at ultrices mi tempus. Felis imperdiet proin fermentum leo vel. Et malesuada fames ac turpis egestas integer eget aliquet. Tempus egestas sed sed risus pretium quam vulputate dignissim suspendisse. Nec tincidunt praesent semper feugiat nibh sed. Id venenatis a condimentum vitae sapien pellentesque habitant. Phasellus egestas tellus rutrum tellus. Faucibus interdum posuere lorem ipsum dolor sit amet. Eleifend mi in nulla posuere sollicitudin aliquam ultrices sagittis orci. Quisque id diam vel quam elementum pulvinar. Magna sit amet purus gravida quis blandit turpis cursus.

</div>

Trivia

</span>

<ul>

<li> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </li>

<li> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis blandit turpis cursus in hac habitasse platea dictumst quisque. Proin sagittis nisl rhoncus mattis rhoncus urna. Blandit cursus risus at ultrices mi tempus.</li>

</ul>

</div>

Favorites

</span>

Color </span>

<span> content</span>

</div>

</div>

Food </span>

<span> content</span>

</div>

</div>

Drink </span>

<span> content</span>

</div>

</div>

Animal </span>

<span> content</span>

</div>

</div>

Place </span>

<span> content</span>

</div>

</div>

Time of day </span>

<span> content</span>

</div>

</div>

Weather </span>

<span> content</span>

</div>

</div>

Season </span>

<span> content</span>

</div>

</div>

Genre </span>

<span> content</span>

</div>

</div>

Style </span>

<span> content</span>

</div>

</div>

Strengths

</span>

<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis blandit turpis cursus in hac habitasse platea dictumst quisque.

</p>

Weaknesses

</span>

<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis blandit turpis cursus in hac habitasse platea dictumst quisque.

</p>

Fears

</span>

<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis blandit turpis cursus in hac habitasse platea dictumst quisque.

</p>

Flaws

</span>

<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis blandit turpis cursus in hac habitasse platea dictumst quisque.

</p>

</div>

Combat

</span>

stat </span>

<span>

</span>

</div>

</div>

stat </span>

<span>

</span>

</div>

</div>

stat </span>

<span>

</span>

</div>

</div>

stat </span>

<span>

</span>

</div>

</div>

stat </span>

<span>

</span>

</div>

</div>

stat </span>

<span>

</span>

</div>

</div>

stat </span>

<span>

</span>

</div>

</div>

stat </span>

<span>

</span>

</div>

</div>

Skill name

</span>

<span>

type

</span>

</div>

<p>

description. 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>

Skill name

</span>

<span>

type

</span>

</div>

<p>

description. 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>

Skill name

</span>

<span>

type

</span>

</div>

<p>

description. 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>

Inventory

</span>

<div style="background-image:url(https://images.unsplash.com/photo-1536481351195-04a50ee18278?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80);

min-height:200px; max-width: 200px; margin: auto; background-size:cover; background-position:center; border-radius: 14px; box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2);"></div>

</div>

Title here

</span>

<span>

content (remove if not needed)

</span>

</div>

<p>

description here. 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 style="background-image:url(https://images.unsplash.com/photo-1536481351195-04a50ee18278?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80);

min-height:200px; max-width: 200px; margin: auto; background-size:cover; background-position:center; border-radius: 14px; box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2);"></div>

</div>

Title here

</span>

<span>

content (remove if not needed)

</span>

</div>

<p>

description here. 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 style="background-image:url(https://images.unsplash.com/photo-1536481351195-04a50ee18278?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80);

min-height:200px; max-width: 200px; margin: auto; background-size:cover; background-position:center; border-radius: 14px; box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2);"></div>

</div>

Title here

</span>

<span>

content (remove if not needed)

</span>

</div>

<p>

description here. 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>

Links

</span>

<div style="background-image:url(https://images.unsplash.com/photo-1536481351195-04a50ee18278?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80);

min-height:200px; max-width: 200px; margin: auto; background-size:cover; background-position:center; border-radius: 14px; box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2);"></div>

</div>

<span>

Name Here

</span>

<br>

<span>

Relation

</span>

<span>

</span>

</div>

<p>

description here. 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 style="background-image:url(https://images.unsplash.com/photo-1536481351195-04a50ee18278?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80);

min-height:200px; max-width: 200px; margin: auto; background-size:cover; background-position:center; border-radius: 14px; box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2);"></div>

</div>

<span>

Name Here

</span>

<br>

<span>

Relation

</span>

<span>

</span>

</div>

<p>

description here. 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 style="background-image:url(https://images.unsplash.com/photo-1536481351195-04a50ee18278?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80);

min-height:200px; max-width: 200px; margin: auto; background-size:cover; background-position:center; border-radius: 14px; box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2);"></div>

</div>

<span>

Name Here

</span>

<br>

<span>

Relation

</span>

<span>

</span>

</div>

<p>

description here. 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>

Creation date </span>

<span> content</span>

</div>

First creation medium </span>

<span> content</span>

</div>

Design: version </span>

<span> content</span>

</div>

Lore: version </span>

<span> content</span>

</div>

Author notes</span>

<p> extra info. 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>

___

</span>

</div>

</div>

</div>

</div>

</div>

<!--= extra text/icon==============================

remove if not needed

===-->

Text Here

</span>

</div>

</div>