Profile
<!-------------------------------------------
| BOOKWORM |
| by Zylphide |
------------------------------------------>
<div class="container-fluid justify-content-center p-0" style="max-width:90% ">
<div class="row">
<div class="col-1 mt-5"></div>
<!-------- LEFT SIDE OF BOOK, CHANGE bg-primary TO bg-warning/success/etc TO CHANGE BOOK OUTER COLOR ------------>
<div class="col-lg-5 sm-7 rounded bg-primary pl-4 pr-0 py-2">
<!------ BOOK PAGES -------->
<div class="card outline-secondary rounded bg-faded pl-1 pr-0">
<div class="card outline-secondary rounded bg-faded pl-1 pr-0">
<div class="card outline-secondary rounded bg-faded pl-1 pr-0">
<div class="card outline-secondary rounded bg-faded pl-1 pr-0">
<div class="card outline-secondary rounded bg-faded pl-1 pr-0">
<!---------- LEFT BOOK PAGE CONTENT-------->
<div class="card py-3 px-3 bg-faded" style="height:740px">
<div class="row no-gutters">
<div class="col sm-7">
<!--------- IMAGE CAROUSEL, IMAGES GO HERE; IMAGES WILL STRETCH TO FIT THE PAGE (if you want the images to not crop and just be shoved wholesale onto the page, replace 9background-size:cover] with [background-size:contain; background-repeat: no-repeat] --------->
<div id="carousel2" class="carousel slide mx-auto p-1" data-interval="false">
<div class="carousel-inner">
<div class="carousel-item active">
<div style="background-image:url(#);height:700px;background-position:center; background-size: contain; background-repeat: no-repeat"></div>
</div>
<div class="carousel-item">
<div style="background-image:url(#);height: 700px;background-position:center;background-size:contain; background-repeat: no-repeat"></div>
</div>
<!---- ADD MORE IMAGES ABOVE ---->
</div>
<a class="carousel-control-prev" href="#carousel2" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carousel2" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!--------- IMAGE CAROUSEL END --------->
</div>
</div>
</div>
<!---------- END LEFT BOOK PAGE CONTENT-------->
</div>
</div>
</div>
</div>
</div>
</div>
<!-------- END LEFT SIDE OF BOOK------------>
<!-------- RIGHT SIDE OF BOOK, CHANGE bg-primary TO bg-warning/success/etc TO CHANGE BOOK OUTER COLOR------------>
<div class="col-lg-5 rounded bg-primary pr-4 pl-0 py-2">
<!------ BOOK PAGES -------->
<div class="card outline-secondary rounded bg-faded pr-1 pl-0">
<div class="card outline-secondary rounded bg-faded pr-1 pl-0">
<div class="card outline-secondary rounded bg-faded pr-1 pl-0">
<div class="card outline-secondary rounded bg-faded pr-1 pl-0">
<div class="card outline-secondary rounded bg-faded pr-1 pl-0">
<!---------- RIGHT BOOK PAGE CONTENT-------->
<div class="card rounded py-3 px-3 bg-faded" style="height:740px">
<!---- TAB CONTENT ---->
<div class="tab-content">
<!------ TAB 1 ------>
<div class="tab-pane fade active show" id="basics">
<div class="p-2">
<p class="justify-content-center text-uppercase pb-2" style="font-size: 30px"><bold>name</bold></p>
<!-------- BASIC INFO AREA --------->
<div class="row bg-faded mt-2 mb-4">
<div class="col-6 mb-3">
<span class="text-uppercase text-muted"><b>Aliases</b></span>
<span class="pull-right">info</span>
<hr class="mt-2 mb-0">
</div>
<div class="col-6 mb-3">
<span class="text-uppercase text-muted"><b>Gender</b></span>
<span class="pull-right">info</span>
<hr class="mt-2 mb-0">
</div>
<div class="col-6 mb-3">
<span class="text-uppercase text-muted"><b>Age</b></span>
<span class="pull-right">info </span>
<hr class="mt-2 mb-0">
</div>
<div class="col-6 mb-3">
<span class="text-uppercase text-muted"><b>Pronouns</b></span>
<span class="pull-right">info</span>
<hr class="mt-2 mb-0">
</div>
<div class="col-6 mb-3">
<span class="text-uppercase text-muted"><b>Birthday</b></span>
<span class="pull-right">info</span>
<hr class="mt-2 mb-0">
</div>
<div class="col-6 mb-0">
<span class="text-uppercase text-muted"><b>Orientation</b></span>
<span class="pull-right">info</span>
<hr class="mt-2 mb-0">
</div>
<div class="col-6 mb-3">
<span class="text-uppercase text-muted"><b>Height</b></span>
<span class="pull-right">info</span>
<hr class="mt-2 mb-0">
</div>
<div class="col-6 mb-0">
<span class="text-uppercase text-muted"><b>Species</b></span>
<span class="pull-right">info</span>
<hr class="mt-2 mb-0">
</div>
<div class="col-6 mb-0">
<span class="text-uppercase text-muted"><b>Role</b></span>
<span class="pull-right">info</span>
</div>
<div class="col-6 mb-0">
<span class="text-uppercase text-muted"><b>Theme</b></span>
<span class="pull-right"><a href="#">link</a></span>
</div>
<!----- ADD MORE LINES ABOVE THIS ---->
</div>
<!----- END BASIC INFO AREA ---->
<!-------- BASIC INFO PARAGRAPH, AUTO SCROLLS (remember to change height if you add more lines in the basic info area)----------->
<div class="container" style="height: 385px; overflow:auto;">
<p>Cat ipsum dolor sit amet, quis unde laborum for incididunt. Minim quae labore error. Proident anim, and sint eu and et yet sequi. Illum. Nulla dolore or vitae ab illum. Aspernatur amet. Ipsa odit. Accusantium. Veniam. Quasi rem, dolor yet laboriosam and quia. Veniam nesciunt excepteur and consequuntur or ab. Aliquam magna voluptate yet laboris consequatur laboris yet id. Cillum commodi yet quia. Exercitationem doloremque and nequeporro. Ex tempor. Unde magna magni so esse and magna so modi. Ea tempora. Excepteur consequatur laboris and beatae but molestiae aliquip or et. Veniam. </p>
<p>Pariatur vitae but suscipit unde nesciunt illo. Tempor corporis vel. Nostrum ex. Eos dolor, yet numquam. Eos voluptate. Excepteur occaecat. Quae commodo for sint vitae numquam and eu. Perspiciatis. Voluptas consequat yet fugiat dolorem labore. Sint proident and et nequeporro aspernatur and qui quaerat. Doloremque esse. Nequeporro veniam. Ea quia id yet esse irure and quia. Aute cillum cupidatat. Veritatis dicta et but sunt dolores. Fugiat velitesse eum so velit yet odit corporis. </p>
<p>Culpa sed ad aspernatur, for labore ullam. Incididunt aut and ab and sint anim yet quo. Ipsam nihil illum dolorem or quo. Non iste so nostrum or quisquam so exercitation sit. Sint. Ipsa lorem or magnam or omnis or ex amet and non. Autem eum quam but nostrud or qui.
</p>
<p>Quia voluptate sint and totam. Ut. Veniam mollit but sint so vitae pariatur yet id ullamco. Veritatis consequuntur, corporis and exercitationem ipsam so quaerat. Aute incididunt. Ad laborum. Velit. Elit laboris so aliquam so fugiat est for lorem for eum. Vel commodi and veritatis or commodi. Perspiciatis incidunt nisi, so voluptatem. Modi veritatis for nihil. Ipsum commodi adipisicing and aliquid yet sed and aliquid. Officia elit yet esse deserunt so aperiam nihil anim. Esse magna, numquam. Incidunt odit for fugit aperiam totam or nisi. </p>
</div>
<!-------- END BASIC BASIC INFO PARAGRAPH ----------->
</div>
<!------ END TAB 1 ------>
</div>
<!------ TAB 2 ------>
<div class="tab-pane fade" id="personality">
<div class="p-2">
<p class="justify-content-center text-uppercase pb-2" style="font-size: 30px"><bold>Personality</bold></p>
<div class="container" style="height: 625px; overflow:auto;">
<!-------- PERSONALITY STATS --------->
<div class="row mt-2 mb-4">
<div class="col-6 mb-3">
<span class="text-uppercase text-muted"><b>Charisma</b></span>
<span class="pull-right">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star faded"></i>
<i class="fas fa-star faded"></i>
</span>
<hr class="mt-2 mb-0">
</div>
<div class="col-6 mb-3">
<span class="text-uppercase text-muted"><b>Confidence</b></span>
<span class="pull-right">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star faded"></i>
<i class="fas fa-star faded"></i>
</span>
<hr class="mt-2 mb-0">
</div>
<div class="col-6 mb-3">
<span class="text-uppercase text-muted"><b>Intelligence</b></span>
<span class="pull-right">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star faded"></i>
<i class="fas fa-star faded"></i>
</span>
<hr class="mt-2 mb-0">
</div>
<div class="col-6 mb-3">
<span class="text-uppercase text-muted"><b>Wisdom</b></span>
<span class="pull-right">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star faded"></i>
<i class="fas fa-star faded"></i>
</span>
<hr class="mt-2 mb-0">
</div>
<div class="col-6 mb-3">
<span class="text-uppercase text-muted"><b>Empathy</b></span>
<span class="pull-right">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star faded"></i>
<i class="fas fa-star faded"></i>
</span>
<hr class="mt-2 mb-0">
</div>
<div class="col-6 mb-0">
<span class="text-uppercase text-muted"><b>Kindness</b></span>
<span class="pull-right">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star faded"></i>
<i class="fas fa-star faded"></i>
</span>
<hr class="mt-2 mb-0">
</div>
<div class="col-6 mb-0">
<span class="text-uppercase text-muted"><b>Temper</b></span>
<span class="pull-right">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star faded"></i>
<i class="fas fa-star faded"></i>
</span>
</div>
<div class="col-6 mb-0">
<span class="text-uppercase text-muted"><b>Humor</b></span>
<span class="pull-right">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star faded"></i>
<i class="fas fa-star faded"></i>
</span>
</div>
<!----- ADD MORE LINES ABOVE THIS ---->
</div>
<!----- END PERSONALITY STATS AREA ---->
<!----- LIKES/DISLIKES ----->
<div class="row bg-faded mt-2 mb-1">
<div class="col-lg-6">
<div class="container justify-content-center text-uppercase text-success">Likes</div>
<ul>
<li>info</li>
<li>info</li>
<li>info</li>
</ul>
</div>
<div class="col-lg-6">
<div class="container justify-content-center text-uppercase text-warning">Dislikes</div>
<ul>
<li>info</li>
<li>info</li>
<li>info</li>
</ul>
</div>
</div>
<!----- END LIKES/DISLIKES ----->
<!-------- PERSONALITY PARAGRAPH, AUTO SCROLLS (remember to change height if you add more lines in the [PERSONALITY STATS] or [LIKES/DISLIKES] areas)----------->
<div class="container" style="height: 325px; overflow:auto;">
<p>Cat ipsum dolor sit amet, quis unde laborum for incididunt. Minim quae labore error. Proident anim, and sint eu and et yet sequi. Illum. Nulla dolore or vitae ab illum. Aspernatur amet. Ipsa odit. Accusantium. Veniam. Quasi rem, dolor yet laboriosam and quia. Veniam nesciunt excepteur and consequuntur or ab. Aliquam magna voluptate yet laboris consequatur laboris yet id. Cillum commodi yet quia. Exercitationem doloremque and nequeporro. Ex tempor. Unde magna magni so esse and magna so modi. Ea tempora. Excepteur consequatur laboris and beatae but molestiae aliquip or et. Veniam. </p>
<p>Culpa sed ad aspernatur, for labore ullam. Incididunt aut and ab and sint anim yet quo. Ipsam nihil illum dolorem or quo. Non iste so nostrum or quisquam so exercitation sit. Sint. Ipsa lorem or magnam or omnis or ex amet and non. Autem eum quam but nostrud or qui.</p>
<p>Quia voluptate sint and totam. Ut. Veniam mollit but sint so vitae pariatur yet id ullamco. Veritatis consequuntur, corporis and exercitationem ipsam so quaerat. Aute incididunt. Ad laborum. Velit. Elit laboris so aliquam so fugiat est for lorem for eum. Vel commodi and veritatis or commodi. Perspiciatis incidunt nisi, so voluptatem. Modi veritatis for nihil. Ipsum commodi adipisicing and aliquid yet sed and aliquid. Officia elit yet esse deserunt so aperiam nihil anim. Esse magna, numquam. Incidunt odit for fugit aperiam totam or nisi. </p>
</div>
<!-------- PERSONALITY PARAGRAPH END ----------->
</div>
</div>
</div>
<!------ END TAB 2 ------>
<!------ TAB 3 ------>
<div class="tab-pane fade" id="history">
<div class="p-2">
<p class="justify-content-center text-uppercase pb-2" style="font-size: 30px"><bold>History</bold></p>
<!-------- HISTORY INFO PARAGRAPH, AUTO SCROLLS----------->
<div class="container" style="height: 625px; overflow:auto;">
<h1 class="text-muted">Subsection 1</h1>
<p>Cat ipsum dolor sit amet, quis unde laborum for incididunt. Minim quae labore error. Proident anim, and sint eu and et yet sequi. Illum. Nulla dolore or vitae ab illum. Aspernatur amet. Ipsa odit. Accusantium. Veniam. Quasi rem, dolor yet laboriosam and quia. Veniam nesciunt excepteur and consequuntur or ab. Aliquam magna voluptate yet laboris consequatur laboris yet id. Cillum commodi yet quia. Exercitationem doloremque and nequeporro. Ex tempor. Unde magna magni so esse and magna so modi. Ea tempora. Excepteur consequatur laboris and beatae but molestiae aliquip or et. Veniam. </p>
<h1 class="text-muted">Subsection 2</h1>
<p>Pariatur vitae but suscipit unde nesciunt illo. Tempor corporis vel. Nostrum ex. Eos dolor, yet numquam. Eos voluptate. Excepteur occaecat. Quae commodo for sint vitae numquam and eu. Perspiciatis. Voluptas consequat yet fugiat dolorem labore. Sint proident and et nequeporro aspernatur and qui quaerat. Doloremque esse. Nequeporro veniam. Ea quia id yet esse irure and quia. Aute cillum cupidatat. Veritatis dicta et but sunt dolores. Fugiat velitesse eum so velit yet odit corporis. </p>
<h1 class="text-muted">Subsection 3</h1>
<p>Consectetur quasi nisi tempora so doloremque, cillum or modi. Commodo laboriosam but ab fugit but excepteur tempor tempor. Molestiae. Commodo aliqua natus dolores. Adipisicing quaerat and aute so nostrud but laboris and fugit. Esse anim. </p>
</div>
<!-------- END HISTORY INFO PARAGRAPH ----------->
</div>
</div>
<!------ END TAB 3 ------>
<!------ TAB 4 ------>
<div class="tab-pane fade" id="design">
<div class="p-2">
<p class="justify-content-center text-uppercase pb-2" style="font-size: 30px"><bold>Notes</bold></p>
<!-------- HISTORY INFO PARAGRAPH, AUTO SCROLLS----------->
<div class="container" style="height: 625px; overflow:auto;">
<h1 class="text-muted">Design Info</h1>
<div class="card bg-faded mb-1 p-2">
<!----- DESIGN IMAGE GOES HERE, will crop to fit---->
<div style="background-image:url(https://images.unsplash.com/photo-1487621167305-5d248087c724?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MjN8fGZvcmVzdHxlbnwwfHwwfA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=400&q=60);height: 300px;background-position:center center;background-size:cover; background-repeat: no-repeat"></div>
</div>
<ul>
<li>something something design info</li>
<li>more design info</li>
<li>more design info</li>
</ul>
<h1 class="text-muted">Trivia / Misc.</h1>
<p>Cat ipsum dolor sit amet, quis unde laborum for incididunt. Minim quae labore error. Proident anim, and sint eu and et yet sequi. Illum. Nulla dolore or vitae ab illum. Aspernatur amet. Ipsa odit. Accusantium. Veniam. Quasi rem, dolor yet laboriosam and quia. Veniam nesciunt excepteur and consequuntur or ab. Aliquam magna voluptate yet laboris consequatur laboris yet id. Cillum commodi yet quia. Exercitationem doloremque and nequeporro. Ex tempor. Unde magna magni so esse and magna so modi. Ea tempora. Excepteur consequatur laboris and beatae but molestiae aliquip or et. Veniam. </p>
</div>
<!-------- END HISTORY INFO PARAGRAPH ----------->
</div>
</div>
<!------ END TAB 4 ------>
<!------ TAB 5 ------>
<div class="tab-pane fade" id="relationships">
<div class="p-2">
<p class="justify-content-center text-uppercase pb-2" style="font-size: 30px"><bold>Relationships</bold></p>
<!--------ENTIRE RELATIONSHIPS PAGE, AUTO SCROLLS----------->
<div class="container my-1" style="height: 625px; overflow:auto;">
<!----- CHARACTER 1 ---->
<div class="container-fluid p-2">
<div class="card p-2 pull-right ml-2" style="width: 150px; height: 150px">
<!----- CHARACTERB IMAGE GOES HERE, will crop to fit---->
<div style="background-image:url(https://images.unsplash.com/photo-1452570053594-1b985d6ea890?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80); height: 150px; background-position:center center;background-size:cover; background-repeat: no-repeat"></div>
</div>
<p class="text-muted text-uppercase m-0" style="font-size:20px">character 1</p>
<p><i>relationship</i></p>
<p>Cat ipsum dolor sit amet, quis unde laborum for incididunt. Minim quae labore error. Proident anim, and sint eu and et yet sequi. Illum. Nulla dolore or vitae ab illum. Aspernatur amet.</p>
</div>
<hr class="m-1">
<!----- END CHARACTER 1 ----->
<!----- CHARACTER 2 ---->
<div class="container p-2">
<div class="card p-2 pull-right ml-2" style="width: 150px; height: 150px">
<!----- CHARACTER IMAGE GOES HERE, will crop to fit---->
<div style="background-image:url(https://images.unsplash.com/photo-1452570053594-1b985d6ea890?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80); height: 150px; background-position:center center;background-size:cover; background-repeat: no-repeat"></div>
</div>
<p class="text-muted text-uppercase m-0" style="font-size:20px">character 2</p>
<p><i>relationship</i></p>
<p>Cat ipsum dolor sit amet, quis unde laborum for incididunt. Minim quae labore error. Proident anim, and sint eu and et yet sequi. Illum. Nulla dolore or vitae ab illum. Aspernatur amet. </p>
</div>
<hr class="m-1">
<!----- END CHARACTER 2 ----->
<!----- CHARACTER 3 ---->
<div class="container p-2">
<div class="card p-2 pull-right ml-2" style="width: 150px; height: 150px">
<!----- CHARACTER IMAGE GOES HERE, will crop to fit---->
<div style="background-image:url(https://images.unsplash.com/photo-1452570053594-1b985d6ea890?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80); height: 150px; background-position:center center;background-size:cover; background-repeat: no-repeat"></div>
</div>
<p class="text-muted text-uppercase m-0" style="font-size:20px">character 3</p>
<p><i>relationship</i></p>
<p>Cat ipsum dolor sit amet, quis unde laborum for incididunt. Minim quae labore error. Proident anim, and sint eu and et yet sequi. Illum. Nulla dolore or vitae ab illum. Aspernatur amet. </p>
</div>
<!----- END CHARACTER 3 ----->
<!----- ADD MORE CHARACTERS ABOVE THIS LINE ------->
</div>
<!-------- END HISTORY INFO PARAGRAPH ----------->
</div>
</div>
<!------ END TAB 5 ------>
</div>
<!----------- END TAB CONTENT ------------->
</div>
<!---------- END RIGHT BOOK PAGE CONTENT-------->
</div>
</div>
</div>
</div>
</div>
</div>
<!-------- END RIGHT SIDE OF BOOK ----------->
<!---------- SIDE TABS -------->
<div class="col-1 mt-5" style="margin-left: -65px; margin-top: 20px">
<ul class="nav nav-tabs row card-header-tabs">
<!------ TAB CODING START HERE ---->
<li class="col-12 mb-1" style="width: 90px; margin-left: -16px"><a class="container" data-toggle="tab" href="#basics">
<span class="fa-stack fa-2x">
<i class="fas fa-bookmark fa-rotate-270 fa-stack-2x text-warning"></i>
<i class="fas fa-user fa-stack-1x fa-inverse" style="margin-left: -5px"></i>
</span>
</a></li>
<li class="col-12 mb-1" style="width: 90px; margin-left: -13px"><a class="container" data-toggle="tab" href="#personality">
<span class="fa-stack fa-2x">
<i class="fas fa-bookmark fa-rotate-270 fa-stack-2x text-success"></i>
<i class="fas fa-head-side-brain fa-stack-1x fa-inverse" style="margin-left: -5px"></i>
</span>
</a></li>
<li class="col-12 mb-1" style="width: 90px; margin-left: -10px"><a class="container" data-toggle="tab" href="#history">
<span class="fa-stack fa-2x">
<i class="fas fa-bookmark fa-rotate-270 fa-stack-2x text-danger"></i>
<i class="fas fa-books fa-stack-1x fa-inverse" style="margin-left: -5px"></i>
</span>
</a></li>
<li class="col-12 mb-1" style="width: 90px; margin-left: -7px"><a class="container" data-toggle="tab" href="#design">
<span class="fa-stack fa-2x">
<i class="fas fa-bookmark fa-rotate-270 fa-stack-2x text-info"></i>
<i class="fas fa-sparkles fa-stack-1x fa-inverse" style="margin-left: -5px"></i>
</span>
</a></li>
<li class="col-12 mb-1" style="width: 90px; margin-left: -4px"><a class="container" data-toggle="tab" href="#relationships">
<span class="fa-stack fa-2x">
<i class="fas fa-bookmark fa-rotate-270 fa-stack-2x text-muted"></i>
<i class="fas fa-users fa-stack-1x fa-inverse" style="margin-left: -5px"></i>
</span>
</a></li>
<!---- ADD MORE TABS ABOVE THIS ---->
</ul>
</div>
<!---------- SIDE TABS END -------->
<!---------- if you want the tabs to be lined up instead of offset, replace everything between [TAB CODING START HERE] and [ADD MORE TABS ABOVE THIS] with this:
<li class="col-12 mb-0" style="width: 90px; margin-left: -11px;"><a class="container" data-toggle="tab" href="#basics">
<span class="fa-stack fa-2x">
<i class="fas fa-bookmark fa-rotate-270 fa-stack-2x text-warning"></i>
<i class="fas fa-user fa-stack-1x fa-inverse" style="margin-left: -5px"></i>
</span>
</a></li>
<li class="col-12 mb-1" style="width: 90px; margin-left: -11px"><a class="container" data-toggle="tab" href="#personality">
<span class="fa-stack fa-2x">
<i class="fas fa-bookmark fa-rotate-270 fa-stack-2x text-success"></i>
<i class="fas fa-head-side-brain fa-stack-1x fa-inverse" style="margin-left: -5px"></i>
</span>
</a></li>
<li class="col-12 mb-1" style="width: 90px; margin-left: -11px"><a class="container" data-toggle="tab" href="#history">
<span class="fa-stack fa-2x">
<i class="fas fa-bookmark fa-rotate-270 fa-stack-2x text-danger"></i>
<i class="fas fa-books fa-stack-1x fa-inverse" style="margin-left: -5px"></i>
</span>
</a></li>
<li class="col-12 mb-1" style="width: 90px; margin-left: -11px"><a class="container" data-toggle="tab" href="#design">
<span class="fa-stack fa-2x">
<i class="fas fa-bookmark fa-rotate-270 fa-stack-2x text-info"></i>
<i class="fas fa-sparkles fa-stack-1x fa-inverse" style="margin-left: -5px"></i>
</span>
</a></li>
<li class="col-12 mb-1" style="width: 90px; margin-left: -11px"><a class="container" data-toggle="tab" href="#relationships1">
<span class="fa-stack fa-2x">
<i class="fas fa-bookmark fa-rotate-270 fa-stack-2x text-muted"></i>
<i class="fas fa-users fa-stack-1x fa-inverse" style="margin-left: -5px"></i>
</span>
</a></li>
----->
</div>
</div>
<!--- credits, do not remove! --->
<div class="col-12 text-center text-primary"><a class="pt-2" style="font-size:12px;" href="https://toyhou.se/~forums/16.htmlcss-graphics/181004.-zyl-kamuiia-s-organic-html-new-12-8-"><i class="fa fa-dragon fa-flip-horizontal" data-placement="left" title="code by Zylphide"></i></a>
</div></div>
Recent Images
No images.