<!--
#1 || Loser
My first code! It's probably really messy and stuff, but I did my best.
Ctrl F the hex code, and replace all
Colors:
Background: #26283f
Border: #18e7ef
Accent: #ff017e
Main Text: #fff
-->
<div style="margin: 100px;"></div>
<div class="container" style="border: 3px solid #18e7ef; width:1000px; background: #26283f; border-radius: 7px; height: 550px; color: #fff;">
<!-- name -->
<div class="container align-items-center text-monospace" style="border: 3px solid #18e7ef; width: 450px; background: #26283f; border-radius: 7px; height: 60px; position: absolute; top: -40px; right: 335px;">
<p style="color:#ff017e; font-size: 35px; text-transform: uppercase;">Name</p>
</div>
<!-- motto or soemthing -->
<div class="container align-items-center text-monospace" style="border: 3px solid #18e7ef; width: 300px; background: #26283f; border-radius: 7px; height: 30px; position: absolute; top: 30px; right: 485px;">
<p class="font-italic" style="color:#fff; 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"></i>
</div>
<div style="position: absolute; font-size: 80px; right: 375px; top: -42px; transform: rotate(5deg);">
<i class="fa-solid fa-claw-marks"></i>
</div>
<!-- funny icon image-->
<div class="container" style="border: 3px solid #fff; 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); color: #fff;">
<i class="fa-solid fa-xmark"></i>
</div>
<div style="position: absolute; font-size: 50px; right: 763px; top: 7px; transform: rotate(-8deg); color: #fff;">
<i class="fa-solid fa-xmark"></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" style="text-transform: uppercase; color: #fff;"><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 #18e7ef; width:300px; background: #26283f; border-radius: 7px; height: 500px; position: absolute; top: 25px; right: 18px;">
<div class="row" >
<div class="col-sm"><span class="text-monospace" style="color:#ff017e; text-transform: uppercase; font-size: 18px;"><i class="fa-solid fa-pencil"></i> Name</span></div>
<div class="col-sm"><span class="text-monospace" style="color:#fff; font-size: 18px;">Name</span></div>
</div>
<div class="my-2"></div>
<div class="row" >
<div class="col-sm"><span class="text-monospace" style="color:#ff017e; 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" style="color:#fff; font-size: 18px;">Age</span></div>
</div>
<div class="my-2"></div>
<div class="row" >
<div class="col-sm"><span class="text-monospace" style="color:#ff017e; 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" style="color:#fff; font-size: 18px;">Pronouns</span></div>
</div>
<div class="my-2"></div>
<div class="row" >
<div class="col-sm"><span class="text-monospace" style="color:#ff017e; text-transform: uppercase; font-size: 18px;"><i class="fa-solid fa-heart"></i> orient</span></div>
<div class="col-sm"><span class="text-monospace" style="color:#fff; font-size: 18px;">sexuality</span></div>
</div>
<div class="my-2"></div>
<div class="row" >
<div class="col-sm"><span class="text-monospace" 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" style="color:#fff; font-size: 18px;">species</span></div>
</div>
<div class="my-2"></div>
<div class="row" >
<div class="col-sm"><span class="text-monospace" 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" style="color:#fff; font-size: 18px;">notes</span></div>
</div>
<div class="my-2"></div>
<div>
<hr class="my-4" style="border-color:#18e7ef;">
</div>
<!-- stats, replace regular with solid and vice versa-->
<div class="row no-gutters">
<div class="col-sm" style="font-size: 18px; color: #fff;"> INTELLIGENCE </div>
<div class="col-sm" style="color: #ff017e; 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" style="font-size: 18px; color: #fff;"> CONFIDENCE </div>
<div class="col-sm" style="color: #ff017e; 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" style="font-size: 18px; color: #fff;"> CHARISMA </div>
<div class="col-sm" style="color: #ff017e; 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" style="font-size: 18px; color: #fff;"> CREATIVITY </div>
<div class="col-sm" style="color: #ff017e; 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" style="font-size: 18px; color: #fff;"> EMPATHY </div>
<div class="col-sm" style="color: #ff017e; 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" style="font-size: 18px; color: #fff;"> HUMOUR </div>
<div class="col-sm" style="color: #ff017e; 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" style="border: 3px solid #18e7ef;background-color:#26283f;color:#ff017e; border-radius: 10px; width: 55px;" data-toggle="pill" href="#vert2"><i class="fa-solid fa-message-smile"></i></a></li>
<li class="nav-item"><a class="nav-link mx-5 my-2" style="border: 3px solid #18e7ef;background-color:#26283f;color:#ff017e; border-radius: 10px; width: 55px;" data-toggle="pill" href="#backstory"><i class="fa-solid fa-book"></i></a></li>
<li class="nav-item"><a class="nav-link mx-5 my-2" style="border: 3px solid #18e7ef;background-color:#26283f; color:#ff017e; border-radius: 10px; width: 55px;" data-toggle="pill" href="#vert1"><i class="fa-solid fa-swords"></i></a></li>
<li class="nav-item"><a class="nav-link mx-5 my-2" style="border: 3px solid #18e7ef;background-color:#26283f;color:#ff017e; border-radius: 10px; width: 55px;" data-toggle="pill" href="#vert3"><i class="fa-solid fa-paintbrush"></i></a></li>
<li class="nav-item"><a class="nav-link mx-5 my-2" style="border: 3px solid #18e7ef;background-color:#26283f;color:#ff017e; border-radius: 10px; width: 55px;" data-toggle="pill" href="#vert4"><i class="fa-solid fa-question"></i></a></li>
</ul>
</div>
<div class="container" style="border: 3px solid #18e7ef; width:641px; background: #26283f; 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" style="border: 3px solid #18e7ef; width:641px; background: #26283f; border-radius: 7px; height: 400px; position: absolute; top: -75px; right: -80px;">
<p class="text-monospace" style="color:#ff017e; text-transform: uppercase; font-size: 20px;"><i class="fa-solid fa-pencil"></i> basic info</p>
<div>
<hr class="my-2" style="border-color:#18e7ef;">
</div>
<div class="row mx-3 my-3" style="text-transform: uppercase; color:#ff017e;">
<div class="col-sm align-items-center justify-content-center mx-2" style="width: 140px; background: #fff; border-radius: 7px; height: 30px;"> adjective </div>
<div class="col-sm align-items-center justify-content-center mx-2" style="width: 140px; background: #fff; border-radius: 7px; height: 100;"> adjective </div>
<div class="col-sm align-items-center justify-content-center mx-2" style="width: 140px; background: #fff; 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; color: #fff;">
<span class="text-monospace">
<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 #18e7ef; width:641px; background: #26283f; border-radius: 7px; height: 400px; position: absolute; top: -75px; right: -80px;">
<div class="container" style="height: 360px; overflow: auto;">
<p class="text-monospace" style="color:#ff017e; text-transform: uppercase; font-size: 20px;"><i class="fa-solid fa-book-open-cover"></i> Backstory</p>
<div>
<hr class="my-2" style="border-color:#18e7ef;">
</div>
<span class="text-monospace" style="color: #fff;">
<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" style="color:#ff017e; text-transform: uppercase; font-size: 20px;"><i class="fa-solid fa-book-open-cover"></i> Backstory</p>
<div>
<hr class="my-2" style="border-color:#18e7ef;">
</div>
<span class="text-monospace" style="color: #fff;">
<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 #18e7ef; width:641px; background: #26283f; border-radius: 7px; height: 400px; position: absolute; top: -75px; right: -80px;">
<div class="container p-3" style="border: 2px solid #18e7ef; width:250px; background: #26283f; border-radius: 7px; height: 380px; position: relative; top: -10px; right: 185px;">
<p class="text-monospace" style="color:#ff017e; text-transform: uppercase; font-size: 20px;"><i class="fa-solid fa-swords"></i> combat</p>
<div>
<hr class="my-2" style="border-color:#18e7ef;">
</div>
<!-- fighting style whatever-->
<div class="container" style="height: 180px; overflow: auto;">
<span class="text-monospace" style="color: #fff;">
<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"> ATK </div>
<div class="col-sm" style="color: #ff017e;"> <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"> DEF </div>
<div class="col-sm" style="color: #ff017e;"> <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"> SPD </div>
<div class="col-sm" style="color: #ff017e;"> <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 #18e7ef; width:365px; background: #26283f; border-radius: 7px; height: 380px; position: absolute; top: 6px; right: 7px;">
<p class="text-monospace" style="color:#ff017e; text-transform: uppercase; font-size: 20px;"><i class="fa-solid fa-swords"></i> ABILITY NAME</p>
<div>
<hr class="my-2" style="border-color:#18e7ef;">
</div>
<div class="container" style="height: 120px; overflow: auto;">
<span class="text-monospace" style="color: #fff;">
<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" style="color:#ff017e; text-transform: uppercase; font-size: 20px;"><i class="fa-solid fa-swords"></i> ABILITY NAME</p>
<div>
<hr class="my-2" style="border-color:#18e7ef;">
</div>
<div class="container" style="height: 120px; overflow: auto;">
<span class="text-monospace" style="color: #fff;">
<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 #18e7ef; width:641px; background: #26283f; border-radius: 7px; height: 400px; position: absolute; top: -75px; right: -80px;">
<!-- image of you character-->
<div class="container" style="border: 2px solid #18e7ef; 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 #18e7ef; width:290px; border-radius: 7px; height: 332px; position: absolute; top: 6px; right: 8px;">
<p class="text-monospace" style="color:#ff017e; text-transform: uppercase; font-size: 20px;"><i class="fa-solid fa-palette"></i> DESIGN</p>
<div>
<hr class="my-2" style="border-color:#18e7ef;">
</div>
<ul class="fa-ul mb-n2 ml-4">
<!-- design notes-->
<li class="mb-2">
<span class="fa-li pr-1 text-monospace" style="color: #19E8F0;"><i class="fa-solid fa-diamond"></i></span>
<p class="text-monospace" style="color: #fff;">Lorem ipsum dolor sit amet</p>
</li>
<li class="mb-2">
<span class="fa-li pr-1 text-monospace" style="color: #19E8F0;"><i class="fa-solid fa-diamond"></i></span>
<p class="text-monospace" style="color: #fff;">Lorem ipsum dolor sit amet</p>
</li>
<li class="mb-2">
<span class="fa-li pr-1 text-monospace" style="color: #19E8F0;"><i class="fa-solid fa-diamond"></i></span>
<p class="text-monospace" style="color: #fff;">Lorem ipsum dolor sit amet</p>
</li>
<li class="mb-2">
<span class="fa-li pr-1 text-monospace" style="color: #19E8F0;"><i class="fa-solid fa-diamond"></i></span>
<p class="text-monospace" style="color: #fff;">Lorem ipsum dolor sit amet</p>
</li>
</ul>
</div>
<!-- add more colors is needed-->
<div class="container" style="border: 2px solid #18e7ef; width:620px; height: 40px; right: 7px;">
<div class="row" style="height: 36px;">
<div class="flex-grow-1 p-2" style="background-color: #fefef5;"></div>
<div class="flex-grow-1 p-2" style="background-color: #cddde5;"></div>
<div class="flex-grow-1 p-2" style="background-color: #95a8ba;"></div>
<div class="flex-grow-1 p-2" style="background-color: #6c809a;"></div>
<div class="flex-grow-1 p-2" style="background-color: #39415d;"></div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="vert4">
<div class="container p-3" style="border: 3px solid #18e7ef; width:641px; background: #26283f; border-radius: 7px; height: 400px; position: absolute; top: -75px; right: -80px;">
<div class="container p-3" style="border: 2px solid #18e7ef; width:220px; background: #26283f; border-radius: 7px; height: 380px; position: absolute; top: 6px; right: 407px;">
<p class="text-monospace" style="color:#ff017e; text-transform: uppercase; font-size: 20px;"><i class="fa-solid fa-check"></i> LIKES</p>
<div>
<hr class="my-2" style="border-color:#18e7ef;">
</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" style="color: #19E8F0;"><i class="fa-solid fa-diamond"></i></span>
<p class="text-monospace" style="color: #fff;">likes</p>
</li>
<li class="mb-2">
<span class="fa-li pr-1 text-monospace" style="color: #19E8F0;"><i class="fa-solid fa-diamond"></i></span>
<p class="text-monospace" style="color: #fff;">likes</p>
</li>
<li class="mb-2">
<span class="fa-li pr-1 text-monospace" style="color: #19E8F0;"><i class="fa-solid fa-diamond"></i></span>
<p class="text-monospace" style="color: #fff;">likes</p>
</li>
</ul>
</div>
<div class="my-2"></div>
<p class="text-monospace" style="color:#ff017e; text-transform: uppercase; font-size: 20px;"><i class="fa-solid fa-xmark"></i> DISLIKES</p>
<div>
<hr class="my-2" style="border-color:#18e7ef;">
</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" style="color: #19E8F0;"><i class="fa-solid fa-diamond"></i></span>
<p class="text-monospace" style="color: #fff;">dislikes</p>
</li>
<li class="mb-2">
<span class="fa-li pr-1 text-monospace" style="color: #19E8F0;"><i class="fa-solid fa-diamond"></i></span>
<p class="text-monospace" style="color: #fff;">dislikes</p>
</li>
<li class="mb-2">
<span class="fa-li pr-1 text-monospace" style="color: #19E8F0;"><i class="fa-solid fa-diamond"></i></span>
<p class="text-monospace" style="color: #fff;">dislikes</p>
</li>
</ul>
</div>
<div class="container p-3" style="border: 2px solid #18e7ef; width:393px; background: #26283f; border-radius: 7px; height: 380px; position: absolute; top: -2px; right: -402px;">
<p class="text-monospace" style="color:#ff017e; text-transform: uppercase; font-size: 20px;"><i class="fa-solid fa-question"></i> TRIVIA</p>
<div>
<hr class="my-2" style="border-color:#18e7ef;">
</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" style="color: #19E8F0;"><i class="fa-solid fa-diamond"></i></span>
<p class="text-monospace" style="color: #fff;">Lorem ipsum dolor sit amet</p>
</li>
<li class="mb-2">
<span class="fa-li pr-1 text-monospace" style="color: #19E8F0;"><i class="fa-solid fa-diamond"></i></span>
<p class="text-monospace" style="color: #fff;">Lorem ipsum dolor sit amet</p>
</li>
<li class="mb-2">
<span class="fa-li pr-1 text-monospace" style="color: #19E8F0;"><i class="fa-solid fa-diamond"></i></span>
<p class="text-monospace" style="color: #fff;">Lorem ipsum dolor sit amet</p>
</li>
<li class="mb-2">
<span class="fa-li pr-1 text-monospace" style="color: #19E8F0;"><i class="fa-solid fa-diamond"></i></span>
<p class="text-monospace" style="color: #fff;">#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" style="color: #18e7ef;"></i></a>
</div>