<!-- 20 || DRAW THE LINE REMASTERED by icecreampizzeria (CUSTOM COLORS)
BOOTSTRAP VER can be found here: https://toyhou.se/12878944.20-draw-the-line-remastered/18166215.code-bootstrap-
RULES:
- Don't remove my credit please!
- Feel free to modify/frankenstein as much as you want!
- Don't redistribute my codes please!
COLOR GUIDE:
#F0E9DC - universal text color
#707837 - whole background
#3A3725 - content background
#FAFF7D - primary text color
#BFE767 - secondary text color
find (ctrl + f) URLHERE for links, IMGHERE for image addresses. To change icons, visit https://fontawesome.com !
Please be careful with deleting sections! There's some parts that makes the navigation work, so avoid deleting parts where '<a id="number"></a>' is contained in. It's easy to avoid if you're using the code as is though!
-->
<!-- //////////////////// WHOLE THING //////////////////// -->
<div class="container p-0" style="max-width: 950px; color: #F0E9DC;">
<div class="row no-gutters p-3" style="
background-color: #707837;
border-radius: 5px">
<!-- //////////////////// TITLE //////////////////// -->
<div class="col-lg-12 card border-0 p-3 mb-3" style="background: #3A3725">
<div class="d-flex justify-content-between display-3" style="color: #FAFF7D;">
<p>NAME</p>
<hr class="flex-fill my-auto mx-2" style="background: #BFE767">
<i class="fad fa-seedling my-auto text-right"></i>
</div>
</div>
<!-- //////////////////// END TITLE //////////////////// -->
<!-- //////////////////// FIRST COLUMN //////////////////// -->
<div class="col-lg-4 mb-lg-0 mb-3">
<div class="card border-0" style="background: #3A3725; overflow: hidden;">
<!-- //////////////////// SIDEBAR IMAGE //////////////////// -->
<div style="
background: url(IMGURL) top center no-repeat;
background-size: cover;
height: 350px;"></div>
<!-- //////////////////// BASICS TABS //////////////////// -->
<div class="tab-content">
<!-- //////////////////// GEN INFO //////////////////// -->
<div id="one" class="tab-pane fade show active p-3">
<div class="d-flex justify-content-between mb-2">
<p style="color: #FAFF7D;">NAME</p>
<hr class="flex-fill my-auto mx-2" style="background: #BFE767; opacity: 0.3;">
<span class="text-right">
content
</span>
</div>
<div class="d-flex justify-content-between mb-2">
<p style="color: #FAFF7D;">GENDER</p>
<hr class="flex-fill my-auto mx-2" style="background: #BFE767; opacity: 0.3;">
<span class="text-right">
content
</span>
</div>
<div class="d-flex justify-content-between mb-2">
<p style="color: #FAFF7D;">AGE</p>
<hr class="flex-fill my-auto mx-2" style="background: #BFE767; opacity: 0.3;">
<span class="text-right">
content
</span>
</div>
<div class="d-flex justify-content-between mb-2">
<p style="color: #FAFF7D;">SPECIES</p>
<hr class="flex-fill my-auto mx-2" style="background: #BFE767; opacity: 0.3;">
<span class="text-right">
content
</span>
</div>
<div class="d-flex justify-content-between mb-2">
<p style="color: #FAFF7D;">ORIENTATION</p>
<hr class="flex-fill my-auto mx-2" style="background: #BFE767; opacity: 0.3;">
<span class="text-right">
content
</span>
</div>
<div class="d-flex justify-content-between mb-2">
<p style="color: #FAFF7D;">OCCUPATION</p>
<hr class="flex-fill my-auto mx-2" style="background: #BFE767; opacity: 0.3;">
<span class="text-right">
content
</span>
</div>
<div class="d-flex justify-content-between">
<p style="color: #FAFF7D;">BIRTHDAY</p>
<hr class="flex-fill my-auto mx-2" style="background: #BFE767; opacity: 0.3;">
<span class="text-right">
content
</span>
</div>
</div>
<!-- //////////////////// END GEN INFO //////////////////// -->
<!-- //////////////////// STATS - to change stats, edit 'fas' (solid) and 'fal' (light) according to your needs :] //////////////////// -->
<div id="two" class="tab-pane fade p-3">
<div class="d-flex justify-content-between mb-2">
<p style="color: #FAFF7D;">EXTRAVERSION</p>
<hr class="flex-fill my-auto mx-2" style="background: #BFE767; opacity: 0.3;">
<span class="text-right">
<i class="fas fa-circle"></i>
<i class="fas fa-circle"></i>
<i class="fas fa-circle"></i>
<i class="fal fa-circle"></i>
<i class="fal fa-circle"></i>
</span>
</div>
<div class="d-flex justify-content-between mb-2">
<p style="color: #FAFF7D;">EMPATHY</p>
<hr class="flex-fill my-auto mx-2" style="background: #BFE767; opacity: 0.3;">
<span class="text-right">
<i class="fas fa-circle"></i>
<i class="fas fa-circle"></i>
<i class="fas fa-circle"></i>
<i class="fal fa-circle"></i>
<i class="fal fa-circle"></i>
</span>
</div>
<div class="d-flex justify-content-between mb-2">
<p style="color: #FAFF7D;">CHARISMA</p>
<hr class="flex-fill my-auto mx-2" style="background: #BFE767; opacity: 0.3;">
<span class="text-right">
<i class="fas fa-circle"></i>
<i class="fas fa-circle"></i>
<i class="fas fa-circle"></i>
<i class="fal fa-circle"></i>
<i class="fal fa-circle"></i>
</span>
</div>
<div class="d-flex justify-content-between mb-2">
<p style="color: #FAFF7D;">HUMOR</p>
<hr class="flex-fill my-auto mx-2" style="background: #BFE767; opacity: 0.3;">
<span class="text-right">
<i class="fas fa-circle"></i>
<i class="fas fa-circle"></i>
<i class="fas fa-circle"></i>
<i class="fal fa-circle"></i>
<i class="fal fa-circle"></i>
</span>
</div>
<div class="d-flex justify-content-between mb-2">
<p style="color: #FAFF7D;">PATIENCE</p>
<hr class="flex-fill my-auto mx-2" style="background: #BFE767; opacity: 0.3;">
<span class="text-right">
<i class="fas fa-circle"></i>
<i class="fas fa-circle"></i>
<i class="fas fa-circle"></i>
<i class="fal fa-circle"></i>
<i class="fal fa-circle"></i>
</span>
</div>
<div class="d-flex justify-content-between mb-2">
<p style="color: #FAFF7D;">INTELLECT</p>
<hr class="flex-fill my-auto mx-2" style="background: #BFE767; opacity: 0.3;">
<span class="text-right">
<i class="fas fa-circle"></i>
<i class="fas fa-circle"></i>
<i class="fas fa-circle"></i>
<i class="fal fa-circle"></i>
<i class="fal fa-circle"></i>
</span>
</div>
<div class="d-flex justify-content-between">
<p style="color: #FAFF7D;">CREATIVITY</p>
<hr class="flex-fill my-auto mx-2" style="background: #BFE767; opacity: 0.3;">
<span class="text-right">
<i class="fas fa-circle"></i>
<i class="fas fa-circle"></i>
<i class="fas fa-circle"></i>
<i class="fal fa-circle"></i>
<i class="fal fa-circle"></i>
</span>
</div>
</div>
<!-- //////////////////// END STATS //////////////////// -->
<!-- //////////////////// CREDITS //////////////////// -->
<div id="three" class="tab-pane fade p-3">
<div class="d-flex justify-content-between mb-2">
<p style="color: #FAFF7D;">WORTH</p>
<hr class="flex-fill my-auto mx-2" style="background: #BFE767; opacity: 0.3;">
<span class="text-right">
content
</span>
</div>
<div class="d-flex justify-content-between mb-2">
<p style="color: #FAFF7D;">DESIGNER</p>
<hr class="flex-fill my-auto mx-2" style="background: #BFE767; opacity: 0.3;">
<a href="URLHERE" class="text-right" style="color: #FAFF7D;">
user
</a>
</div>
<div class="d-flex justify-content-between mb-2">
<p style="color: #FAFF7D;">SIDEBAR</p>
<hr class="flex-fill my-auto mx-2" style="background: #BFE767; opacity: 0.3;">
<a href="URLHERE" class="text-right" style="color: #FAFF7D;">
user
</a>
</div>
<div class="d-flex justify-content-between mb-2">
<p style="color: #FAFF7D;">BACKGROUND</p>
<hr class="flex-fill my-auto mx-2" style="background: #BFE767; opacity: 0.3;">
<a href="URLHERE" class="text-right" style="color: #FAFF7D;">
source
</a>
</div>
<div class="d-flex justify-content-between mb-2">
<p style="color: #FAFF7D;">IMAGE ONE</p>
<hr class="flex-fill my-auto mx-2" style="background: #BFE767; opacity: 0.3;">
<a href="URLHERE" class="text-right" style="color: #FAFF7D;">
source
</a>
</div>
<div class="d-flex justify-content-between mb-2">
<p style="color: #FAFF7D;">IMAGE TWO</p>
<hr class="flex-fill my-auto mx-2" style="background: #BFE767; opacity: 0.3;">
<a href="URLHERE" class="text-right" style="color: #FAFF7D;">
source
</a>
</div>
<div class="d-flex justify-content-between">
<p style="color: #FAFF7D;">IMAGE THREE</p>
<hr class="flex-fill my-auto mx-2" style="background: #BFE767; opacity: 0.3;">
<a href="URLHERE" class="text-right" style="color: #FAFF7D;">
source
</a>
</div>
</div>
<!-- //////////////////// END CREDITS //////////////////// -->
</div>
<!-- //////////////////// END BASICS TABS //////////////////// -->
</div>
<!-- //////////////////// SIDEBAR NAVI //////////////////// -->
<ul class="nav border-0 justify-content-center">
<!-- //////////////////// GEN INFO //////////////////// -->
<li class="nav-item mx-1 d-flex" style="background: #3A3725; border-radius: 0 0 10px 10px; overflow: hidden;">
<a href="#one" class="nav-link active rounded-0 border-0 btn btn-outline-primary d-flex" data-toggle="tab" style="color: #FAFF7D; width: 50px;">
<i class="fas fa-star fa-lg m-auto py-3 fa-fw"></i></a>
</li>
<!-- //////////////////// STATS //////////////////// -->
<li class="nav-item mx-1 d-flex" style="background: #3A3725; border-radius: 0 0 10px 10px; overflow: hidden;">
<a href="#two" class="nav-link rounded-0 border-0 btn btn-outline-primary d-flex" data-toggle="tab" style="color: #FAFF7D; width: 50px;">
<i class="fas fa-chart-bar fa-lg m-auto py-3 fa-fw"></i></a>
</li>
<!-- //////////////////// CREDITS //////////////////// -->
<li class="nav-item mx-1 d-flex" style="background: #3A3725; border-radius: 0 0 10px 10px; overflow: hidden;">
<a href="#three" class="nav-link rounded-0 border-0 btn btn-outline-primary d-flex" data-toggle="tab" style="color: #FAFF7D; width: 50px;">
<i class="fas fa-info fa-lg m-auto py-3 fa-fw"></i></a>
</li>
</ul>
<!-- //////////////////// END SIDEBAR NAVI //////////////////// -->
</div>
<!-- //////////////////// END FIRST COLUMN //////////////////// -->
<!-- //////////////////// SECOND COLUMN //////////////////// -->
<div class="col-lg ml-lg-3">
<!-- //////////////////// MAIN CONTENT NAVI //////////////////// -->
<ul class="nav border-0 justify-content-center">
<!-- //////////////////// ABOUT //////////////////// -->
<li class="nav-item mx-1 d-flex" style="background: #3A3725; border-radius: 10px 10px 0 0; overflow: hidden;">
<a href="#abt" class="nav-link active rounded-0 border-0 btn btn-outline-primary d-flex" data-toggle="tab" style="color: #FAFF7D; width: 50px;">
<i class="fas fa-user fa-lg m-auto py-3 fa-fw"></i></a>
</li>
<!-- //////////////////// DESIGN //////////////////// -->
<li class="nav-item mx-1 d-flex" style="background: #3A3725; border-radius: 10px 10px 0 0; overflow: hidden;">
<a href="#des" class="nav-link rounded-0 border-0 btn btn-outline-primary d-flex" data-toggle="tab" style="color: #FAFF7D; width: 50px;">
<i class="fas fa-pencil fa-lg m-auto py-3 fa-fw"></i></a>
</li>
<!-- //////////////////// BIO //////////////////// -->
<li class="nav-item mx-1 d-flex" style="background: #3A3725; border-radius: 10px 10px 0 0; overflow: hidden;">
<a href="#bio" class="nav-link rounded-0 border-0 btn btn-outline-primary d-flex" data-toggle="tab" style="color: #FAFF7D; width: 50px;">
<i class="fas fa-book fa-lg m-auto py-3 fa-fw"></i></a>
</li>
<!-- //////////////////// SHIPS //////////////////// -->
<li class="nav-item mx-1 d-flex" style="background: #3A3725; border-radius: 10px 10px 0 0; overflow: hidden;">
<a href="#ship" class="nav-link rounded-0 border-0 btn btn-outline-primary d-flex" data-toggle="tab" style="color: #FAFF7D; width: 50px;">
<i class="fas fa-link fa-lg m-auto py-3 fa-fw"></i></a>
</li>
<!-- //////////////////// OTHER //////////////////// -->
<li class="nav-item mx-1 d-flex" style="background: #3A3725; border-radius: 10px 10px 0 0; overflow: hidden;">
<a href="#misc" class="nav-link rounded-0 border-0 btn btn-outline-primary d-flex" data-toggle="tab" style="color: #FAFF7D; width: 50px;">
<i class="fas fa-thumbtack fa-lg m-auto py-3 fa-fw"></i></a>
</li>
</ul>
<!-- //////////////////// END MAIN CONTENT NAVI //////////////////// -->
<!-- //////////////////// MAIN CONTENT //////////////////// -->
<div class="card border-0 mb-3 tab-content" style="background: #3A3725;">
<!-- //////////////////// ABOUT TAB //////////////////// -->
<div id="abt" class="tab-pane fade show active">
<!-- //////////////////// TITLE //////////////////// -->
<div class="display-4 p-3 d-flex justify-content-between" style="font-size: 1.8rem; color: #FAFF7D;">
<p>ABOUT</p>
<hr class="flex-fill my-auto ml-2" style="background: #BFE767;">
</div>
<!-- //////////////////// CONTENT //////////////////// -->
<div class="px-3 pb-3" style="overflow: auto; height: 360px;">
<!-- //////////////////// QUOTE //////////////////// -->
<p class="display-4" style="color: #BFE767; font-size: 1.2rem; font-style: italic;">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit."
</p>
<p>A summary of your character can be placed here! Plus a personality rundown if you're into that. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<!-- //////////////////// add more paragraphs ABOVE this line! //////////////////// -->
</div>
<!-- //////////////////// END CONTENT //////////////////// -->
</div>
<!-- //////////////////// END ABOUT TAB //////////////////// -->
<!-- //////////////////// DESIGN TAB //////////////////// -->
<div id="des" class="tab-pane fade">
<!-- //////////////////// TITLE //////////////////// -->
<div class="display-4 p-3 d-flex justify-content-between" style="font-size: 1.8rem; color: #FAFF7D;">
<p>DESIGN</p>
<hr class="flex-fill my-auto ml-2" style="background: #BFE767;">
</div>
<!-- //////////////////// CONTENT //////////////////// -->
<div class="px-3 pb-3" style="overflow: auto; height: 360px;">
<!-- //////////////////// REF IMAGE //////////////////// -->
<div class="card border-0 p-2" style="
background: url(IMGHERE) center no-repeat;
background-size: contain;
height: 300px;">
</div>
<!-- //////////////////// END REF IMAGE //////////////////// -->
<div class="d-flex justify-content-between mt-2">
<hr class="flex-fill my-auto mr-2" style="background: #FAFF7D; opacity: 0.3;">
<!-- //////////////////// REF LINK //////////////////// -->
<a href="URLHERE" class="btn border-0 font-weight-light" style="font-size: 1rem; background: #707837; color: #FAFF7D;">FULL REFERENCE</a>
<hr class="flex-fill my-auto ml-2" style="background: #FAFF7D; opacity: 0.3;">
</div>
<!-- //////////////////// COLOR PALETTE - copy a line and paste anywhere above the </div> for more colors B] //////////////////// -->
<div class="row no-gutters my-3">
<div class="col card border-0 py-3 mx-1" style="background: #707837;"></div>
<div class="col card border-0 py-3 mx-1" style="background: #8DB255;"></div>
<div class="col card border-0 py-3 mx-1" style="background: #BFE767;"></div>
<div class="col card border-0 py-3 mx-1" style="background: #FAFF7D;"></div>
</div>
<!-- //////////////////// END COLOR PALETTE //////////////////// -->
<!-- //////////////////// NOTES - copy from <li> to </li> and paste anywhere above the </ul> B] //////////////////// -->
<ul style="list-style-type: none; margin-left: -40px;">
<li><i class="fas fa-pencil mr-1"></i>
design note here.
</li>
<li><i class="fas fa-pencil mr-1"></i>
design note here.
</li>
<li><i class="fas fa-pencil mr-1"></i>
design note here.
</li>
<li><i class="fas fa-pencil mr-1"></i>
design note here.
</li>
</ul>
<!-- //////////////////// END NOTES //////////////////// -->
</div>
<!-- //////////////////// END CONTENT //////////////////// -->
</div>
<!-- //////////////////// END DESIGN TAB //////////////////// -->
<!-- //////////////////// BIO TAB //////////////////// -->
<div id="bio" class="tab-pane fade">
<!-- //////////////////// TITLE //////////////////// -->
<div class="display-4 p-3 d-flex justify-content-between" style="font-size: 1.8rem; color: #FAFF7D;">
<p>BACKGROUND</p>
<hr class="flex-fill my-auto ml-2" style="background: #BFE767;">
</div>
<!-- //////////////////// CONTENT //////////////////// -->
<div class="px-3 pb-3" style="overflow: auto; height: 360px;">
<!-- //////////////////// HEADER //////////////////// -->
<div class="d-flex justify-content-between mb-2">
<p class="display-4" style="font-size: 1.5rem; color: #BFE767;">HEADER ONE</p>
<hr class="flex-fill my-auto ml-2" style="background: #FAFF7D; opacity: 0.3;">
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<!-- //////////////////// HEADER //////////////////// -->
<div class="d-flex justify-content-between mb-2">
<p class="display-4" style="font-size: 1.5rem; color: #BFE767;">HEADER TWO</p>
<hr class="flex-fill my-auto ml-2" style="background: #FAFF7D; opacity: 0.3;">
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<!-- //////////////////// HEADER //////////////////// -->
<div class="d-flex justify-content-between mb-2">
<p class="display-4" style="font-size: 1.5rem; color: #BFE767;">HEADER THREE</p>
<hr class="flex-fill my-auto ml-2" style="background: #FAFF7D; opacity: 0.3;">
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<!-- //////////////////// add more sections/paragraphs ABOVE this line! //////////////////// -->
</div>
<!-- //////////////////// END CONTENT //////////////////// -->
</div>
<!-- //////////////////// END BIO TAB //////////////////// -->
<!-- //////////////////// SHIP TAB //////////////////// -->
<div id="ship" class="tab-pane fade">
<!-- //////////////////// TITLE //////////////////// -->
<div class="display-4 p-3 d-flex justify-content-between" style="font-size: 1.8rem; color: #FAFF7D;">
<p>RELATIONSHIPS</p>
<hr class="flex-fill my-auto ml-2" style="background: #BFE767;">
</div>
<!-- //////////////////// CONTENT //////////////////// -->
<div class="px-3" style="overflow: auto; height: 360px;">
<!-- //////////////////// CHARACTER (LEFT) - to add more characters, copy from this comment to END CHARACTER (LEFT), and paste wherever above the comment indicated for you! It's best if you alternate the LEFT and RIGHT characters. //////////////////// -->
<div class="row no-gutters mb-3">
<!-- //////////////////// 1ST COL - ICON //////////////////// -->
<div class="col-lg-3 mb-2 d-flex">
<div class="m-auto" style="
background: url(IMGHERE) center no-repeat;
background-size: cover;
height: 120px;
width: 120px;">
</div>
</div>
<!-- //////////////////// DESC - to adjust heart meter, change 'fas' (solid) to 'fal' (light) and vice versa //////////////////// -->
<div class="col-lg">
<div class="d-flex justify-content-between mb-2">
<a href="URLHERE" class="display-4" style="color: #FAFF7D; font-size: 1.5rem;">
NAME
</a>
<hr class="flex-fill my-auto mx-2" style="background: #BFE767; opacity: 0.3;">
<span class="text-right my-auto">
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
<i class="fal fa-heart"></i>
<i class="fal fa-heart"></i>
</span>
</div>
<p>Describe their relationship here! This section will adjust with the length of the text, so go wild! Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<!-- //////////////////// END CHARACTER (LEFT) //////////////////// -->
<!-- //////////////////// CHARACTER (RIGHT) - to add more characters, copy from this comment to END CHARACTER (RIGHT), and paste wherever above the comment indicated for you! It's best if you alternate the LEFT and RIGHT characters. //////////////////// -->
<div class="row no-gutters mb-3">
<!-- //////////////////// 2ND COL - ICON (the icon is at the right, but it'll be shown on top of the description in mobile) //////////////////// -->
<div class="col-lg-3 push-lg-9 mb-2 d-flex">
<div class="m-auto" style="
background: url(IMGHERE) center no-repeat;
background-size: cover;
height: 120px;
width: 120px;">
</div>
</div>
<!-- //////////////////// DESC - to adjust heart meter, change 'fas' (solid) to 'fal' (light) and vice versa //////////////////// -->
<div class="col-lg pull-lg-3">
<div class="d-flex justify-content-between mb-2">
<a href="URLHERE" class="display-4" style="color: #FAFF7D; font-size: 1.5rem;">
NAME
</a>
<hr class="flex-fill my-auto mx-2" style="background: #BFE767; opacity: 0.3;">
<span class="text-right my-auto">
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
<i class="fal fa-heart"></i>
<i class="fal fa-heart"></i>
</span>
</div>
<p>Describe their relationship here! This section will adjust with the length of the text, so go wild! Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<!-- //////////////////// END CHARACTER (RIGHT) //////////////////// -->
<!-- //////////////////// CHARACTER (LEFT) - to add more characters, copy from this comment to END CHARACTER (LEFT), and paste wherever above the comment indicated for you! It's best if you alternate the LEFT and RIGHT characters. //////////////////// -->
<div class="row no-gutters mb-3">
<!-- //////////////////// 1ST COL - ICON //////////////////// -->
<div class="col-lg-3 mb-2 d-flex">
<div class="m-auto" style="
background: url(IMGHERE) center no-repeat;
background-size: cover;
height: 120px;
width: 120px;">
</div>
</div>
<!-- //////////////////// DESC - to adjust heart meter, change 'fas' (solid) to 'fal' (light) and vice versa //////////////////// -->
<div class="col-lg">
<div class="d-flex justify-content-between mb-2">
<a href="URLHERE" class="display-4" style="color: #FAFF7D; font-size: 1.5rem;">
NAME
</a>
<hr class="flex-fill my-auto mx-2" style="background: #BFE767; opacity: 0.3;">
<span class="text-right my-auto">
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
<i class="fal fa-heart"></i>
<i class="fal fa-heart"></i>
</span>
</div>
<p>Describe their relationship here! This section will adjust with the length of the text, so go wild! Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<!-- //////////////////// END CHARACTER (LEFT) //////////////////// -->
<!-- //////////////////// CHARACTER (RIGHT) - to add more characters, copy from this comment to END CHARACTER (RIGHT), and paste wherever above the comment indicated for you! It's best if you alternate the LEFT and RIGHT characters. //////////////////// -->
<div class="row no-gutters mb-3">
<!-- //////////////////// 2ND COL - ICON (the icon is at the right, but it'll be shown on top of the description in mobile) //////////////////// -->
<div class="col-lg-3 push-lg-9 mb-2 d-flex">
<div class="m-auto" style="
background: url(IMGHERE) center no-repeat;
background-size: cover;
height: 120px;
width: 120px;">
</div>
</div>
<!-- //////////////////// DESC - to adjust heart meter, change 'fas' (solid) to 'fal' (light) and vice versa //////////////////// -->
<div class="col-lg pull-lg-3">
<div class="d-flex justify-content-between mb-2">
<a href="URLHERE" class="display-4" style="color: #FAFF7D; font-size: 1.5rem;">
NAME
</a>
<hr class="flex-fill my-auto mx-2" style="background: #BFE767; opacity: 0.3;">
<span class="text-right my-auto">
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
<i class="fal fa-heart"></i>
<i class="fal fa-heart"></i>
</span>
</div>
<p>Describe their relationship here! This section will adjust with the length of the text, so go wild! Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<!-- //////////////////// END CHARACTER (RIGHT) //////////////////// -->
<!-- //////////////////// add more characters ABOVE this line! //////////////////// -->
</div>
<!-- //////////////////// END CONTENT //////////////////// -->
</div>
<!-- //////////////////// END SHIP TAB //////////////////// -->
<!-- //////////////////// OTHER TAB //////////////////// -->
<div id="misc" class="tab-pane fade">
<!-- //////////////////// TITLE //////////////////// -->
<div class="display-4 p-3 d-flex justify-content-between" style="font-size: 1.8rem; color: #FAFF7D;">
<p>OTHER</p>
<hr class="flex-fill my-auto ml-2" style="background: #BFE767;">
</div>
<!-- //////////////////// CONTENT //////////////////// -->
<div class="px-3 pb-3" style="overflow: auto; height: 360px;">
<div class="row no-gutters">
<!-- //////////////////// LIKES //////////////////// -->
<div class="col-lg-6">
<!-- //////////////////// TITLE //////////////////// -->
<div class="d-flex justify-content-between mb-2">
<p class="display-4" style="color: #BFE767; font-size: 1.5rem;">LIKES</p>
<hr class="flex-fill my-auto ml-2 mr-lg-3" style="background: #FAFF7D; opacity: 0.3;">
</div>
<!-- //////////////////// add more bullet points by copying from <li> to </li> and pasting it anywhere above </ul> B] //////////////////// -->
<ul style="list-style-type: none; margin-left: -40px;">
<li><i class="fas fa-check mr-1"></i>
content
</li>
<li><i class="fas fa-check mr-1"></i>
content
</li>
<li><i class="fas fa-check mr-1"></i>
content
</li>
<li><i class="fas fa-check mr-1"></i>
content
</li>
</ul>
</div>
<!-- //////////////////// END LIKES //////////////////// -->
<!-- //////////////////// DISLIKES //////////////////// -->
<div class="col-lg-6">
<!-- //////////////////// TITLE //////////////////// -->
<div class="d-flex justify-content-between mb-2">
<p class="display-4" style="color: #BFE767; font-size: 1.5rem;">DISLIKES</p>
<hr class="flex-fill my-auto ml-2" style="background: #FAFF7D; opacity: 0.3;">
</div>
<!-- //////////////////// add more bullet points by copying from <li> to </li> and pasting it anywhere above </ul> B] //////////////////// -->
<ul style="list-style-type: none; margin-left: -40px;">
<li><i class="fas fa-times mr-1"></i>
content
</li>
<li><i class="fas fa-times mr-1"></i>
content
</li>
<li><i class="fas fa-times mr-1"></i>
content
</li>
<li><i class="fas fa-times mr-1"></i>
content
</li>
</ul>
</div>
<!-- //////////////////// END DISLIKES //////////////////// -->
<!-- //////////////////// TRIVIA //////////////////// -->
<div class="col-lg-12">
<!-- //////////////////// TITLE //////////////////// -->
<div class="d-flex justify-content-between mb-2">
<p class="display-4" style="color: #BFE767; font-size: 1.5rem;">TRIVIA</p>
<hr class="flex-fill my-auto ml-2" style="background: #FAFF7D; opacity: 0.3;">
</div>
<!-- //////////////////// add more bullet points by copying from <li> to </li> and pasting anywhere above the </ul> //////////////////// -->
<ul style="list-style-type: none; margin-left: -40px;">
<li><i class="fas fa-thumbtack mr-1"></i>
talk about some fun fax about your oc here! :]
</li>
<li><i class="fas fa-thumbtack mr-1"></i>
I physically cannot. look at the old code anymore bc I'd implode from cringe. Here's a remaster bc it's literally the least I could do for all of you
</li>
<li><i class="fas fa-thumbtack mr-1"></i>
content
</li>
<li><i class="fas fa-thumbtack mr-1"></i>
content
</li>
</ul>
</div>
<!-- //////////////////// END TRIVIA //////////////////// -->
<!-- //////////////////// PLAYLIST //////////////////// -->
<div class="col-lg-12">
<!-- //////////////////// TITLE //////////////////// -->
<div class="d-flex justify-content-between mb-3">
<p class="display-4" style="color: #BFE767; font-size: 1.5rem;">PLAYLIST</p>
<hr class="flex-fill my-auto ml-2" style="background: #FAFF7D; opacity: 0.3;">
</div>
<!-- //////////////////// SONG - copy from this comment to END SONG and paste it anywhere above the comment indicated for you! //////////////////// -->
<div class="d-flex justify-content-between mb-2">
<a href="URLHERE" style="color: #FAFF7D;">
MUSIC TITLE
</a>
<hr class="flex-fill my-auto mx-2" style="background: #FAFF7D; opacity: 0.3;">
<span class="text-right">
Music Artist
</span>
</div>
<!-- //////////////////// END SONG //////////////////// -->
<!-- //////////////////// SONG - copy from this comment to END SONG and paste it anywhere above the comment indicated for you! //////////////////// -->
<div class="d-flex justify-content-between mb-2">
<a href="URLHERE" style="color: #FAFF7D;">
MUSIC TITLE
</a>
<hr class="flex-fill my-auto mx-2" style="background: #FAFF7D; opacity: 0.3;">
<span class="text-right">
Music Artist
</span>
</div>
<!-- //////////////////// END SONG //////////////////// -->
<!-- //////////////////// SONG - copy from this comment to END SONG and paste it anywhere above the comment indicated for you! //////////////////// -->
<div class="d-flex justify-content-between mb-2">
<a href="URLHERE" style="color: #FAFF7D;">
MUSIC TITLE
</a>
<hr class="flex-fill my-auto mx-2" style="background: #FAFF7D; opacity: 0.3;">
<span class="text-right">
Music Artist
</span>
</div>
<!-- //////////////////// END SONG //////////////////// -->
<!-- //////////////////// SONG - copy from this comment to END SONG and paste it anywhere above the comment indicated for you! //////////////////// -->
<div class="d-flex justify-content-between mb-2">
<a href="URLHERE" style="color: #FAFF7D;">
MUSIC TITLE
</a>
<hr class="flex-fill my-auto mx-2" style="background: #FAFF7D; opacity: 0.3;">
<span class="text-right">
Music Artist
</span>
</div>
<!-- //////////////////// END SONG //////////////////// -->
<!-- //////////////////// add more songs ABOVE this line! //////////////////// -->
</div>
<!-- //////////////////// END PLAYLIST //////////////////// -->
</div>
</div>
<!-- //////////////////// END CONTENT //////////////////// -->
</div>
<!-- //////////////////// END OTHER TAB //////////////////// -->
</div>
<!-- //////////////////// END MAIN CONTENT //////////////////// -->
<!-- //////////////////// AES IMAGES //////////////////// -->
<div class="row no-gutters">
<!-- //////////////////// IMG ONE //////////////////// -->
<div class="card col border-0 mr-3" style="
background: url(IMGHERE) center no-repeat;
background-size: cover;
height: 140px;">
</div>
<!-- //////////////////// IMG TWO //////////////////// -->
<div class="card col border-0 mr-3" style="
background: url(IMGHERE) center no-repeat;
background-size: cover;
height: 140px;">
</div>
<!-- //////////////////// IMG THREE //////////////////// -->
<div class="card col border-0" style="
background: url(IMGHERE) center no-repeat;
background-size: cover;
height: 140px;">
</div>
</div>
<!-- //////////////////// END AES IMAGES //////////////////// -->
</div>
<!-- //////////////////// END SECOND COLUMN //////////////////// -->
</div>
<!-- //////////////////// CREDITS - please don't remove! <3 //////////////////// -->
<p class="text-right mt-2 text-muted" style="font-size: 0.7rem;">code by icecreampizzeria</p>
</div>
<!-- //////////////////// END WHOLE THING //////////////////// -->