<!--
#1 || Loser
My first code! It's probably really messy and stuff, but I did my best.
-->
<div style="margin: 100px;"></div>
<div class="container bg-faded text-secondary" style="border: 3px solid; width:1000px; border-radius: 7px; height: 550px;">
<!-- name -->
<div class="container align-items-center text-monospace bg-faded text-secondary" style="border: 3px solid; width: 450px; border-radius: 7px; height: 60px; position: absolute; top: -40px; right: 335px;">
<p class="text-primary" style="color:#ff017e; font-size: 35px; text-transform: uppercase;">Name</p>
</div>
<!-- motto or soemthing -->
<div class="container align-items-center text-monospace bg-faded text-secondary" style="border: 3px solid; width: 300px; border-radius: 7px; height: 30px; position: absolute; top: 30px; right: 485px;">
<p class="font-italic text-light" style="font-size: 15px; text-transform: uppercase;"><i class="fa-solid fa-quote-left" style="font-size: 10px;"></i>⠀quote or something⠀<i class="fa-solid fa-quote-right" style="font-size: 10px;"></i></p>
</div>
<div style="position: absolute; font-size: 80px; right: 367px; top: -42px; transform: rotate(5deg); color:#ff017e;">
<i class="fa-solid fa-claw-marks text-primary"></i>
</div>
<div style="position: absolute; font-size: 80px; right: 375px; top: -42px; transform: rotate(5deg);">
<i class="fa-solid fa-claw-marks text-light"></i>
</div>
<!-- funny icon image-->
<div class="container text-light" style="border: 3px solid; width:200px; border-radius: 7px; height: 200px; position: relative; top: -90px; right: 380px;
background-image: url(https://media.istockphoto.com/vectors/thumbnail-image-vector-graphic-vector-id1147544807?k=20&m=1147544807&s=612x612&w=0&h=pBhz1dkwsCMq37Udtp9sfxbjaMl27JUapoyYpQm0anc=);
background-size: cover; background-position: center;">
</div>
<div style="position: absolute; font-size: 50px; right: 958px; top: -100px; transform: rotate(8deg);">
<i class="fa-solid fa-xmark text-light"></i>
</div>
<div style="position: absolute; font-size: 50px; right: 763px; top: 7px; transform: rotate(-8deg);">
<i class="fa-solid fa-xmark text-light"></i>
</div>
<!-- music, replace youtube with the youtube link of a song
example: https://www.youtube.com/watch?v=wMmvMU7XDig, replace YOUTUBE with wMmvMU7XDig-->
<div style="position: absolute; font-size: 15px; right: 545px; top: 83px;">
<p class="text-monospace text-light" style="text-transform: uppercase;"><i class="fa-solid fa-play"></i>⠀⠀song name - artist</p>
<iframe src="https://www.youtube-nocookie.com/embed/YOUTUBE?modestbranding=1" class="border-0" style="position: absolute; height: 25px; width: 25px; opacity: 0; right: 178px; top: -2px; "></iframe>
</div>
<!-- Side bar-->
<div class="container p-3" style="border: 3px solid; width:300px; border-radius: 7px; height: 500px; position: absolute; top: 25px; right: 18px;">
<div class="row" >
<div class="col-sm"><span class="text-monospace text-primary" style="text-transform: uppercase; font-size: 18px;"><i class="fa-solid fa-pencil"></i> Name</span></div>
<div class="col-sm"><span class="text-monospace text-light" style="font-size: 18px;">Name</span></div>
</div>
<div class="my-2"></div>
<div class="row" >
<div class="col-sm"><span class="text-monospace text-primary" style="text-transform: uppercase; font-size: 18px;"><i class="fa-solid fa-cake-candles"></i> Age</span></div>
<div class="col-sm"><span class="text-monospace text-light" style="font-size: 18px;">Age</span></div>
</div>
<div class="my-2"></div>
<div class="row" >
<div class="col-sm"><span class="text-monospace text-primary" style="text-transform: uppercase; font-size: 18px;"><i class="fa-solid fa-venus-mars" style="font-size: 15px;"></i> pronouns</span></div>
<div class="col-sm"><span class="text-monospace text-light" style="font-size: 18px;">pronouns</span></div>
</div>
<div class="my-2"></div>
<div class="row" >
<div class="col-sm"><span class="text-monospace text-primary" style="text-transform: uppercase; font-size: 18px;"><i class="fa-solid fa-heart"></i> orient</span></div>
<div class="col-sm"><span class="text-monospace text-light" style="font-size: 18px;">sexuality</span></div>
</div>
<div class="my-2"></div>
<div class="row" >
<div class="col-sm"><span class="text-monospace text-primary" style="color:#ff017e; text-transform: uppercase; font-size: 18px;"><i class="fa-solid fa-user"></i> species</span></div>
<div class="col-sm"><span class="text-monospace text-light" style="font-size: 18px;">species</span></div>
</div>
<div class="my-2"></div>
<div class="row" >
<div class="col-sm"><span class="text-monospace text-primary" style="color:#ff017e; text-transform: uppercase; font-size: 18px;"><i class="fa-solid fa-thumbtack"></i> Extra</span></div>
<div class="col-sm"><span class="text-monospace text-light" style="font-size: 18px;">notes</span></div>
</div>
<div class="my-2"></div>
<div>
<hr class="my-4 bg-secondary">
</div>
<!-- stats, replace regular with solid and vice versa-->
<div class="row no-gutters">
<div class="col-sm text-light" style="font-size: 18px;"> INTELLIGENCE </div>
<div class="col-sm text-primary" style="font-size: 18px;"> <i class="fa-solid fa-diamond"></i> <i class="fa-solid fa-diamond"></i> <i class="fa-solid fa-diamond"></i> <i class="fa-regular fa-diamond"></i> <i class="fa-regular fa-diamond"></i> </div>
</div>
<div class="my-2"></div>
<div class="row no-gutters">
<div class="col-sm text-light" style="font-size: 18px;"> CONFIDENCE </div>
<div class="col-sm text-primary" style="font-size: 18px;"> <i class="fa-solid fa-diamond"></i> <i class="fa-solid fa-diamond"></i> <i class="fa-solid fa-diamond"></i> <i class="fa-regular fa-diamond"></i> <i class="fa-regular fa-diamond"></i> </div>
</div>
<div class="my-2"></div>
<div class="row no-gutters">
<div class="col-sm text-light" style="font-size: 18px;"> CHARISMA </div>
<div class="col-sm text-primary" style="font-size: 18px;"> <i class="fa-solid fa-diamond"></i> <i class="fa-solid fa-diamond"></i> <i class="fa-solid fa-diamond"></i> <i class="fa-regular fa-diamond"></i> <i class="fa-regular fa-diamond"></i> </div>
</div>
<div class="my-2"></div>
<div class="row no-gutters">
<div class="col-sm text-light" style="font-size: 18px;"> CREATIVITY </div>
<div class="col-sm text-primary" style="font-size: 18px;"> <i class="fa-solid fa-diamond"></i> <i class="fa-solid fa-diamond"></i> <i class="fa-solid fa-diamond"></i> <i class="fa-regular fa-diamond"></i> <i class="fa-regular fa-diamond"></i> </div>
</div>
<div class="my-2"></div>
<div class="row no-gutters">
<div class="col-sm text-light" style="font-size: 18px;"> EMPATHY </div>
<div class="col-sm text-primary" style="font-size: 18px;"> <i class="fa-solid fa-diamond"></i> <i class="fa-solid fa-diamond"></i> <i class="fa-solid fa-diamond"></i> <i class="fa-regular fa-diamond"></i> <i class="fa-regular fa-diamond"></i> </div>
</div>
<div class="my-2"></div>
<div class="row no-gutters">
<div class="col-sm text-light" style="font-size: 18px;"> HUMOUR </div>
<div class="col-sm text-primary" style="font-size: 18px;"> <i class="fa-solid fa-diamond"></i> <i class="fa-solid fa-diamond"></i> <i class="fa-solid fa-diamond"></i> <i class="fa-regular fa-diamond"></i> <i class="fa-regular fa-diamond"></i> </div>
</div>
<div class="my-2"></div>
</div>
<div class="row no-gutters">
<div class="col-md-2 px-5 mb-3" style="right: 120px; top: -75px;">
<ul class="nav nav-tabs row card-header-tabs">
<li class="nav-item"><a class="nav-link active mx-5 my-2 bg-faded text-secondary" style="border: 3px solid; border-radius: 10px; width: 55px;" data-toggle="pill" href="#vert2"><i class="fa-solid fa-message-smile text-primary"></i></a></li>
<li class="nav-item"><a class="nav-link mx-5 my-2 bg-faded text-secondary" style="border: 3px solid; border-radius: 10px; width: 55px;" data-toggle="pill" href="#backstory"><i class="fa-solid fa-book text-primary"></i></a></li>
<li class="nav-item"><a class="nav-link mx-5 my-2 bg-faded text-secondary" style="border: 3px solid; border-radius: 10px; width: 55px;" data-toggle="pill" href="#vert1"><i class="fa-solid fa-swords text-primary"></i></a></li>
<li class="nav-item"><a class="nav-link mx-5 my-2 bg-faded text-secondary" style="border: 3px solid; border-radius: 10px; width: 55px;" data-toggle="pill" href="#vert3"><i class="fa-solid fa-paintbrush text-primary"></i></a></li>
<li class="nav-item"><a class="nav-link mx-5 my-2 bg-faded text-secondary" style="border: 3px solid; border-radius: 10px; width: 55px;" data-toggle="pill" href="#vert4"><i class="fa-solid fa-question text-primary"></i></a></li>
</ul>
</div>
<div class="container text-secondary bg-faded" style="border: 3px solid; width:641px; border-radius: 7px; height: 400px; position: absolute; top: 125px; right: 336px;"></div>
<div class="col-md-5">
<div class="tab-content">
<div class="tab-pane fade active show" id="vert2">
<div class="container p-3 text-secondary bg-faded" style="border: 3px solid; width:641px; border-radius: 7px; height: 400px; position: absolute; top: -75px; right: -80px;">
<p class="text-monospace text-primary" style="text-transform: uppercase; font-size: 20px;"><i class="fa-solid fa-pencil"></i> basic info</p>
<div>
<hr class="my-2 bg-secondary">
</div>
<div class="row mx-3 my-3 text-primary" style="text-transform: uppercase">
<div class="col-sm align-items-center justify-content-center mx-2 bg-light" style="width: 140px; border-radius: 7px; height: 30px;"> adjective </div>
<div class="col-sm align-items-center justify-content-center mx-2 bg-light" style="width: 140px; border-radius: 7px; height: 100;"> adjective </div>
<div class="col-sm align-items-center justify-content-center mx-2 bg-light" style="width: 140px; border-radius: 7px; height: 100;"> adjective </div>
</div>
<!-- write bout you character here, it scrolls so you can write as much as you want-->
<div class="container" style="height: 260px; overflow: auto;">
<span class="text-monospace text-light">
<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>
<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>
<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>
</span>
</div>
</div>
</div>
<div class="tab-pane fade" id="backstory">
<div class="container p-3" style="border: 3px solid; width:641px; border-radius: 7px; height: 400px; position: absolute; top: -75px; right: -80px;">
<div class="container" style="height: 360px; overflow: auto;">
<p class="text-monospace text-primary" style="text-transform: uppercase; font-size: 20px;"><i class="fa-solid fa-book-open-cover"></i> Backstory</p>
<div>
<hr class="my-2 bg-secondary">
</div>
<span class="text-monospace text-light">
<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>
<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>
</span>
<div class="my-2"></div>
<p class="text-monospace text-primary" style="text-transform: uppercase; font-size: 20px;"><i class="fa-solid fa-book-open-cover"></i> Backstory</p>
<div>
<hr class="my-2 bg-secondary">
</div>
<span class="text-monospace text-light">
<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>
<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>
</span>
<!-- add more after here-->
</div>
</div>
</div>
<div class="tab-pane fade" id="vert1">
<div class="container p-3" style="border: 3px solid; width:641px; border-radius: 7px; height: 400px; position: absolute; top: -75px; right: -80px;">
<div class="container p-3" style="border: 2px solid; width:250px; border-radius: 7px; height: 380px; position: relative; top: -10px; right: 185px;">
<p class="text-monospace text-primary" style="text-transform: uppercase; font-size: 20px;"><i class="fa-solid fa-swords"></i> combat</p>
<div>
<hr class="my-2 bg-secondary">
</div>
<!-- fighting style whatever-->
<div class="container" style="height: 180px; overflow: auto;">
<span class="text-monospace text-light">
<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>
</span>
</div>
<div class="m-4"></div>
<div class="container">
<div class="row no-gutters">
<div class="col-sm text-light"> ATK </div>
<div class="col-sm text-primary"> <i class="fa-solid fa-diamond"></i> <i class="fa-solid fa-diamond"></i> <i class="fa-solid fa-diamond"></i> <i class="fa-regular fa-diamond"></i> <i class="fa-regular fa-diamond"></i> </div>
</div>
</div>
<div class="m-2"></div>
<div class="container">
<div class="row no-gutters">
<div class="col-sm text-light"> DEF </div>
<div class="col-sm text-primary"> <i class="fa-solid fa-diamond"></i> <i class="fa-solid fa-diamond"></i> <i class="fa-solid fa-diamond"></i> <i class="fa-regular fa-diamond"></i> <i class="fa-regular fa-diamond"></i> </div>
</div>
</div>
<div class="m-2"></div>
<div class="container">
<div class="row no-gutters">
<div class="col-sm text-light"> SPD </div>
<div class="col-sm text-primary"> <i class="fa-solid fa-diamond"></i> <i class="fa-solid fa-diamond"></i> <i class="fa-solid fa-diamond"></i> <i class="fa-regular fa-diamond"></i> <i class="fa-regular fa-diamond"></i> </div>
</div>
</div>
</div>
<!-- abilities-->
<div class="container p-3" style="border: 2px solid; width:365px; border-radius: 7px; height: 380px; position: absolute; top: 6px; right: 7px;">
<p class="text-monospace text-primary" style="text-transform: uppercase; font-size: 20px;"><i class="fa-solid fa-swords"></i> ABILITY NAME</p>
<div>
<hr class="my-2 bg-secondary">
</div>
<div class="container" style="height: 120px; overflow: auto;">
<span class="text-monospace text-light">
<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>
</span>
</div>
<div class="my-2"></div>
<p class="text-monospace text-primary" style="text-transform: uppercase; font-size: 20px;"><i class="fa-solid fa-swords"></i> ABILITY NAME</p>
<div>
<hr class="my-2 bg-secondary">
</div>
<div class="container" style="height: 120px; overflow: auto;">
<span class="text-monospace text-light">
<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>
</span>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="vert3">
<div class="container p-3" style="border: 3px solid; width:641px; border-radius: 7px; height: 400px; position: absolute; top: -75px; right: -80px;">
<!-- image of you character-->
<div class="container" style="border: 2px solid; width:320px; border-radius: 7px;
background-image: url(https://media.istockphoto.com/vectors/thumbnail-image-vector-graphic-vector-id1147544807?k=20&m=1147544807&s=612x612&w=0&h=pBhz1dkwsCMq37Udtp9sfxbjaMl27JUapoyYpQm0anc=);
background-size: cover; background-position: center; height: 332px; position: relative; top: -10px; right: 150px;">
</div>
<div class="container p-3" style="border: 2px solid; width:290px; border-radius: 7px; height: 332px; position: absolute; top: 6px; right: 8px;">
<p class="text-monospace text-primary" style="text-transform: uppercase; font-size: 20px;"><i class="fa-solid fa-palette"></i> DESIGN</p>
<div>
<hr class="my-2 bg-secondary">
</div>
<ul class="fa-ul mb-n2 ml-4">
<!-- design notes-->
<li class="mb-2">
<span class="fa-li pr-1 text-monospace"><i class="fa-solid fa-diamond"></i></span>
<p class="text-monospace text-light">Lorem ipsum dolor sit amet</p>
<li class="mb-2">
<span class="fa-li pr-1 text-monospace"><i class="fa-solid fa-diamond"></i></span>
<p class="text-monospace text-light">Lorem ipsum dolor sit amet</p>
</li>
<li class="mb-2">
<span class="fa-li pr-1 text-monospace"><i class="fa-solid fa-diamond"></i></span>
<p class="text-monospace text-light">Lorem ipsum dolor sit amet</p>
</li>
<li class="mb-2">
<span class="fa-li pr-1 text-monospace"><i class="fa-solid fa-diamond"></i></span>
<p class="text-monospace text-light">Lorem ipsum dolor sit amet</p>
</li>
</ul>
</div>
<!-- add more colors is needed-->
<div class="container" style="border: 2px solid; width:620px; height: 40px; right: 7px;">
<div class="row" style="height: 36px;">
<div class="flex-grow-1 p-2" style="background-color: #5d4038;"></div>
<div class="flex-grow-1 p-2" style="background-color: #795547;"></div>
<div class="flex-grow-1 p-2" style="background-color: #8c6e63;"></div>
<div class="flex-grow-1 p-2" style="background-color: #bcaba4;"></div>
<div class="flex-grow-1 p-2" style="background-color: #d7ccc8;"></div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="vert4">
<div class="container p-3" style="border: 3px solid; width:641px; border-radius: 7px; height: 400px; position: absolute; top: -75px; right: -80px;">
<div class="container p-3" style="border: 2px solid; width:220px; border-radius: 7px; height: 380px; position: absolute; top: 6px; right: 407px;">
<p class="text-monospace text-primary" style="; text-transform: uppercase; font-size: 20px;"><i class="fa-solid fa-check"></i> LIKES</p>
<div>
<hr class="my-2 bg-secondary">
</div>
<div class="container" style="height: 120px; overflow: auto;">
<ul class="fa-ul mb-n2 ml-4">
<!-- likes, add as much as you want-->
<li class="mb-2">
<span class="fa-li pr-1 text-monospace text-secondary"><i class="fa-solid fa-diamond"></i></span>
<p class="text-monospace text-light">likes</p>
</li>
<li class="mb-2">
<span class="fa-li pr-1 text-monospace text-secondary"><i class="fa-solid fa-diamond"></i></span>
<p class="text-monospace text-light">likes</p>
</li>
<li class="mb-2">
<span class="fa-li pr-1 text-monospace text-secondary"><i class="fa-solid fa-diamond"></i></span>
<p class="text-monospace text-light">likes</p>
</li>
</ul>
</div>
<div class="my-2"></div>
<p class="text-monospace text-primary" style="text-transform: uppercase; font-size: 20px;"><i class="fa-solid fa-xmark"></i> DISLIKES</p>
<div>
<hr class="my-2 bg-secondary">
</div>
<div class="container" style="height: 120px; overflow: auto;">
<ul class="fa-ul mb-n2 ml-4">
<!-- dislikes, add stuff-->
<li class="mb-2">
<span class="fa-li pr-1 text-monospace text-secondary"><i class="fa-solid fa-diamond"></i></span>
<p class="text-monospace text-light">dislikes</p>
</li>
<li class="mb-2">
<span class="fa-li pr-1 text-monospace text-secondary"><i class="fa-solid fa-diamond"></i></span>
<p class="text-monospace text-light">dislikes</p>
</li>
<li class="mb-2">
<span class="fa-li pr-1 text-monospace text-secondary"><i class="fa-solid fa-diamond"></i></span>
<p class="text-monospace text-light">dislikes</p>
</li>
</ul>
</div>
<div class="container p-3" style="border: 2px solid; width:393px; border-radius: 7px; height: 380px; position: absolute; top: -2px; right: -402px;">
<p class="text-monospace text-primary" style="text-transform: uppercase; font-size: 20px;"><i class="fa-solid fa-question"></i> TRIVIA</p>
<div>
<hr class="my-2 bg-secondary">
</div>
<div class="container" style="height: 296px; overflow: auto;">
<ul class="fa-ul mb-n2 ml-4">
<!-- trivia-->
<li class="mb-2">
<span class="fa-li pr-1 text-monospace text-secondary"><i class="fa-solid fa-diamond"></i></span>
<p class="text-monospace text-light">Lorem ipsum dolor sit amet</p>
</li>
<li class="mb-2">
<span class="fa-li pr-1 text-monospace text-secondary"><i class="fa-solid fa-diamond"></i></span>
<p class="text-monospace text-light">Lorem ipsum dolor sit amet</p>
</li>
<li class="mb-2">
<span class="fa-li pr-1 text-monospace text-secondary"><i class="fa-solid fa-diamond"></i></span>
<p class="text-monospace text-light">Lorem ipsum dolor sit amet</p>
</li>
<li class="mb-2">
<span class="fa-li pr-1 text-monospace text-secondary"><i class="fa-solid fa-diamond"></i></span>
<p class="text-monospace text-light">#Your #Mom</p>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- code credit, DONT REMOVE-->
<div class="my-2"></div>
<div class="container" style="position: center; width: 10px;">
<a href="https://toyhou.se/AncientToys"><i class="fa-solid fa-code text-secondary"></i></a>
</div>