<!------------------------------------------------------------
Third code - Inspired by the indie game 'Who's Lila' (which you should all play)
Feel free to edit and frankenstein. If you make it unrecognizeable, you can remove the credit IDGAF
It's basically your code at that point
Color guide
- COLOR ONE: #471919 (the dark one)
- COLOR TWO: #ebf6f2 (the light one)
Go on fontawesome to find new icons if you wanna change those
Disable WYSIWYG, use Circlejourney's live code editor if you love yourself (<- google it)
If you have questions or need help: Learn HTML
Make sure you read all the little notes I left when you're editing it
---------------------------------------------------------->
<div class="container p-0" style="max-width:550px;font-size:12pt;font-family:ms gothic">
<div class="row no-gutters" style="border:solid 1px #471919;">
<div class="col">
<div class="p-2" style="background:#ebf6f2;color:#471919">
<!-----------------------------------------
CHARACTER DESCRIPTION, WILL SCROLL
BUT FOR THE LOVE OF GOD...
DO NOT MAKE NEW PARAGRAPH TAGS <p> !!!!!!!!
IT WILL BREAK THE CODE!!!!!!!!!!!!!!!!!!!!!
TO ADD A LINE/PARAGRAPH BREAK JUST PUT IN
"<br/><br/>" BEFORE THE NEW PARAGRAPH/BIT
------------------------------------------>
<p class="text-justify p-1 mb-2" style="max-height:200px;overflow-y:auto;background-color:#471919;color:#ebf6f2">
Who's Lila? is a video game developed by Russian independent game studio Garage Heathen, released in February 2022. Described as a "reverse-detective adventure", the game is an adventure game notable for using the manipulation of facial expressions as the means that the player uses to communicate with characters in the game.
<br/><br/>
Who's Lila? is played from the perspective of the protagonist, William, a teenager who finds it "difficult to express emotions" and has to make "a conscious decision each time [he] moves a muscle". The game features a nonlinear narrative surrounding the disappearance of classmate Tanya Kennedy, as William must act naturally in the face of suspicion from classmates and authorities as the last person who saw her alive. The player is required to make branching choices through multiple playthroughs to discover multiple endings that provide greater insight into several emerging mysteries in the game, including the circumstances of Tanya's disappearance, the deeper aspects of William's psyche, and the identity of the titular Lila.
</p>
<!-----------------------------------------
END DESC, BEGIN BASIC INFO
------------------------------------------>
<div class="d-flex justify-content-between pr-1 pl-1">
<b><i class="fas fa-calendar fw-l"></i>
AGE
</b><span><i>
[age]
</i></span></div>
<div class="d-flex justify-content-between pr-1 pl-1">
<b><i class="fas fa-transgender fw-l"></i>
PRONOUNS
</b><span><i>
[pronouns]
</i></span></div>
<div class="d-flex justify-content-between pr-1 pl-1">
<b><i class="fas fa-heart fw-l"></i>
SEXUALITY
</b><span><i>
[sexuality]
</i></span></div>
<div class="d-flex justify-content-between pr-1 pl-1">
<b><i class="fas fa-briefcase fw-l"></i>
JOB
</b><span><i>
[job]
</i></span></div>
</div></div>
<!-----------------------------------------
END BASIC INFO, BEGIN SIDEBAR IMAGE
REPLACE URL WITH LINK TO DESIRED IMAGE
WILL AUTOCROP/FILL THE SPACE
------------------------------------------>
<div class="col-5"><div style="background:url(
https://i.ibb.co/fGjq5Xg/image.png
) no-repeat center -6px;background-size:cover;height:100%;border: solid #642d2d;border-width: 0px 0px 0px 1px">
<!-----------------------------------------
MUSIC PLAYER. REPLACE THE STRING OF TEXT
AFTER /embed/ WITH THE STRING OF TEXT FROM
YOUR DESIRED YT VIDEO... SHOULD BE AFTER
"/watch?v=" IN THE URL
------------------------------------------>
<i class="fas fa-volume tooltipster" style="position:absolute;right:7px;top:6px;font-size:25px;text-shadow:-2px 0 #ebf6f2, 0 2px #ebf6f2, 2px 0 #ebf6f2, 0 -2px #ebf6f2;color:#471919" title="
SONG TITLE - ARTIST NAME
"></i><iframe frameborder="0" style="height:25px;width:20px;opacity:.005;position:absolute;right:16px;top:6px;"
src="https://www.youtube.com/embed/dgrjLD9CbPg">
</iframe>
<!-----------------------------------------
END MUSIC PLAYER. THIS IS THE SPOT FOR THE
NAME/WHATEVER ELSE. WHATEVERS AFTER title=
WILL APPEAR WHEN YOU HOVER OVER THE ICON
THING... LIKE HIDDEN DIALOGUE OR SOMETHING
DON'T MAKE THE TEXT FOR THE NAME TOO LONG
IT DOESN'T SCROLL OR EXPAND. LOL
------------------------------------------>
<div class="p-1" style="position:absolute;bottom:0px;background-color:#471919;width:100%;height:31px;color:#ebf6f2;font-size:16px"><p class="pl-1"><b>
<i class="fa-solid fa-comments tooltipster"
title="The name is Lila.">
</i>
WILLIAM CLARKE</b></p></div>
</div></div></div></div>
<!-----------------------------------------
CREDIT <3 IF YOU LOVE ME YOU'LL KEEP IT &
IF YOU DELETE IT EVERY CHARACTER IN STEVEN
UNIVERSE HATES YOU
------------------------------------------>
<a href="https://toyhou.se/Wraether/"><p style="text-align:center;font-size:12px;"><i>CODE BY WRAETHER</i></p></a></div>
<!-----------------------------------------
END OF THE CODE
------------------------------------------>
<!-----------------------------------------------------------------------------------
|| / | / / // ) ) // | | // / / /__ ___/ // / / // / / // ) )
|| / | / / //___/ / //__| | //____ / / //___ / / //____ //___/ /
|| / /||/ / / ___ ( / ___ | / ____ / / / ___ / / ____ / ___ (
||/ / | / // | | // | | // / / // / / // // | |
| / | / // | | // | | //____/ / / / // / / //____/ / // | |
------------------------------------------------------------------------------------>
