berlyn/Artfight-HTML
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

sort files

Browse Source
This commit is contained in:
Berlyn
2026-07-02 00:52:29 -05:00
parent 8e27ab103f
commit 1d803211f7
25 changed files with 3505 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

359
My Characters/jotaro/jotaro-joestar.html Normal file
View File

@@ -0,0 +1,359 @@
<!DOCTYPE html> <!--Tells the computer that this is an HTML document-->
<html lang="en"><!--Tells the computer that the language is English-->
<body><!--Tells the computer that this is the code you see on the page-->
<div style="background-color:#101010; padding: 10px;">
<div style="text-align:center;">
<img src="https://files.catbox.moe/6z4hlj.gif">
</div>
<div style="text-align:center;">
<img src="https://file.garden/ZT2StWKGxCOellbN/Pride%20Pixels/trans.png" alt="trans.png">
<img src="https://file.garden/ZT2StWKGxCOellbN/Pride%20Pixels/gaymen.png" alt="gaymen.png">
<img src="https://file.garden/ZT2StWKGxCOellbN/Pride%20Pixels/autism.png" alt="autism.png">
</div>
<br>
<div style="text-align:center;">
<img src="https://files.catbox.moe/2ak9gs.png">
<img src="https://files.catbox.moe/tfjd4m.gif">
<img src="https://files.catbox.moe/e9q5nm.png">
</div>
<div style="background-color:#303030; color: #E3E3E3; border-radius: 10px; padding: 10px; margin-top: 10px;">
<h2><u>Notices</u></h2>
<ul>
<li>Profile Code under construction.
Contact me (Contacts on profile) and/or comment on his profile if you need any more information.
</li>
<li>Notice 2</li>
<li>Notice 3</li>
</ul>
</div>
<div class="row mx-auto g-4 justify-content-center" style="margin-top: 10px;">
<div class="col-md-5 p-1" style="background-color:#303030; color: #E3E3E3; border-radius: 10px; padding: 10px; margin-right: 10px;">
<!-- background color is the color of the box, color is the text color,
border-radius is the roundness of the corners,
padding is the space between the text and the border -->
<p>
<h2><u>Important Notes</u></h2>
<!--u means underline, margin-bottom is the space between the heading and the stuff below-->
<ul style="margin:0; padding:0; list-style:none;">
<li>On his hat there is a gold Male/Mars symbol. This is non-optional.</li>
<li>Jotaro can take off his shirt, jacket, hat, and Sarashi but he only does so around people he trusts</li>
<li>You're more than welcome to add custom accessories!</li>
</ul>
</p>
</div>
<div class="col-md-5 p-1" style="background-color:#303030; color: #E3E3E3; border-radius: 10px; padding: 10px;">
<!-- background color is the color of the box, color is the text color,
border-radius is the roundness of the corners,
padding is the space between the text and the border -->
<p>
<h2><u>Important Links:</u></h2>
<!--u means underline, margin-bottom is the space between the heading and the stuff below-->
<ul>
<li><a href="https://www.lavender-daydream.com/characters/fanon/jojos-aus/reverse-tarot-ship/jotaro-joestar.html" target="_blank">His profile on my website</a></li>
<li><a href="https://www.pinterest.com/LavenderDaydream/au-jotaro-joestar/artfight-attack-suggestions/" target="_blank">Pintrest Board with Attack Ideas/Suggestions</a></li>
<li><a href="https://www.pinterest.com/LavenderDaydream/au-tentarotaetaro/artfight-attack-suggestions/" target="_blank">Ship (with Tenmei) Pinterest Board with Attack Ideas/Suggestions</a></li>
<li><a href="https://youtube.com/playlist?list=PLPk_-OflFbln5JLzKDOnLIazjzkn3qZ3t&si=xOXV4z1otxWLDo0W" target="_blank">Character Playlist on Youtube</a></li>
<li><a href="https://open.spotify.com/playlist/3WazuH1YRN7bUoB7S01A4J?si=ba964c68fbb24e71" target="_blank">Character Playlist on Spotify</a></li>
</ul>
</p>
</div>
</div>
<div class="row mx-auto g-4 justify-content-center" style="margin-top: 10px;">
<div class="col-md-5 p-1" style="background-color:#303030; color: #E3E3E3; border-radius: 10px; padding: 10px; margin-right: 10px;">
<!-- background color is the color of the box, color is the text color,
border-radius is the roundness of the corners,
padding is the space between the text and the border -->
<p>
<h2><u>Basic Info:</u></h2>
<!--u means underline, margin-bottom is the space between the heading and the stuff below-->
<ul style="margin:0; padding:0; list-style:none;">
<li>Full Name: Jotaro Joestar</li>
<li>Nickname: Jojo, Joot, T-jo(Non-Canon Alias)</li>
<li>Birthday: October 31, 1970; 18 (Part 3), 29 (Part 4), 31 (Part 5), 43 (Part 6)</li>
<li>Sex: Trans-Man (Mid-Transition as of Part 3) </li>
<li>Gender: Male, Hypermasculine</li>
<li>Sexual Orientation: Gay (Closeted)</li>
<li>Height: 5'8" or 175 cm</li>
<li>Hair Color: Naturally Dark Brown, Dyed Black</li>
<li>Ethnicity: Half Japanese, Quarter British, Quarter Italian</li>
</ul>
</p>
</div>
<div class="col-md-5 p-1" style="background-color:#303030; color: #E3E3E3; border-radius: 10px; padding: 10px;">
<!-- background color is the color of the box, color is the text color,
border-radius is the roundness of the corners,
padding is the space between the text and the border -->
<p>
<h2><u>Typology:</u></h2>
<!--u means underline, margin-bottom is the space between the heading and the stuff below-->
<ul style="margin:0; padding:0; list-style:none;">
<li>Western Zodiac: Scorpio</li>
<li>Chinese Zodiac: Metal Dog</li>
<li>Blood Type: B</li>
<li>MBTI: ISTP</li>
<li>Enneagram: 6w5 8w9 4w5</li>
<li>Instinctual Variant: Sp/Soc</li>
</ul>
</p>
</div>
</div>
<br>
<div style="text-align:center;">
<img src="https://files.catbox.moe/lpq2r2.png">
<img src="https://files.catbox.moe/ge4k0t.png">
<img src="https://files.catbox.moe/70wv26.png">
</div>
<div style="background-color:#303030; color: #E3E3E3; border-radius: 10px; padding: 10px; margin-top: 10px;">
<h2><u>Appearance</u></h2>
<p>
Jotaro Joestar
<a href="https://jojowiki.com/Jotaro_Kujo/Gallery#Design_Sheets-3" target="_blank" rel="noreferrer noopener">
looks similar to Canon Jotaro</a>, but with minor Differences and optional acessories described/underlined below.
</p>
<p>
Jotaro is 5'8.9” / 175cm and subtlety muscular.
He has a sharp jawline and chin.
Unlike canon Jotaro, he has perma-stubble and short body hair.
On his chest there are horizontal contoured scars under his pectorals (top scars).
He almost always wears a sarashi underneath both to hide and protect his scars.
He wears a black open long gakuran/japanese high school uniform, but with some of his own customizations.
His gakuran has a stiff upright collar with a gold chain on the right side.
On the hat there is a gold button and A gold Mars/Male Symbol (NOT OPTIONAL).
He wears a black uniform hat that is torn at the back showing the hair on the back of his head.
Jotaro can take off his shirt, jacket, hat, and Sarashi but he only does so around people he trusts.
He usually goes to bed in a t-shirt/tank top and boxers because he gets hot while sleeping,
but he'll throw on some comfy shorts when getting out of bed around other people.
</p>
He has alternate accessories including:
<ul>
<li>A gold brim on his hat</li>
<li>Additional Gold accessories to his hat</li>
<li>A watch with a black leather band with gold pointed studs</li>
<li>Black leather belts with star like studs</li>
<li>Feel free to add/experiment with accessories that match his style!</li>
</ul>
<p>Triangle Shape language, sharp points in design. Minor use of squares/rectangles in design</p>
</div>
<br>
<div style="text-align:center;">
<img src="https://files.catbox.moe/qdsp2t.png">
<img src="https://files.catbox.moe/j709t5.png">
<img src="https://files.catbox.moe/oblioh.png">
</div>
<div style="background-color:#303030; color: #E3E3E3; border-radius: 10px; padding: 10px; margin-top: 10px;">
<h2><u>Personality</u></h2>
<h4>Surface Level</h4>
<p>
<a href="https://jojowiki.com/Jotaro_Kujo#Personality">Feel free to read this</a>
instead of this section, Or skip this "Surface Level" section if you have read/watched Part 3.
His general/surface level personality is the same as Canon Jotaro.
<br><br>
Jotaro Joestar is perpetually aloof and rude towards almost everyone he meets.
He's violent, especially to those who (he thinks) try to insult and degrade him.
Although being a rude and violent person, he is gentle and loyal with those he likes.
<br><br>
He also has a strong sense of justice.
He utterly despises those who take advantage of the weak, vulnerable, and innocent, especially Women and Children.
He will bring justice to others, and never seeks validation from others from doing the right thing.
<br><br>
Jotaro is very clearly uninterested in women.
He gets aggravated when a woman makes an advance/flirts with him,
and will yell at them if they continue after he shows he's not interested.
Jotaro despises being flirted with in general and comments about his appearance in an objectifying way.
</p>
<h4>Deeper Level</h4>
<p>
Jotaro realized from a young age that he will never really fit in;
No one will really, fully, respect him for him, so he lashes out.
“If no one will respect me for who I am, what's the point"
<br><br>
Jotaro uses his aloof, rough, and violent facade to protect himself from mental,
emotional, and physical harm from others.
As much as he would deny it, he is a sensitive person deep down.
This indirectly shows through his violence and anger towards others.
Jotaro greatly struggles to be vulnerable with others, including his friends and loved ones.
The only people he can even begin to be vulnerable with are his mother and his grandfather
(he will eventually become very close with Tenmei).
<br><br>
Jotaro has never been concerned or interested in romantic pursuits up to this point in his life.
For a long time, deep down, he knew he was only attracted to other men, but he refused to accept it.
He internalized that “Liking other men doesn't make me a real man.”
It wasn't until he saved Tenmei and, although unintentionally, showed clear signs of interest in Jotaro,
was he confronted with the question (internally).
For a while, he refuses the question to himself.
Asking and accepting that he might be gay would shatter his stoic,
hyper masculine image of himself and to others.
Jotaro is unwilling to do so, and brushes the signs off as though he didn't notice to keep up his facade
and self-image.
<br><br>
When in great mental/emotional stress, he withdraws from everyone/becomes reclusive.
</p>
<h4>Arrival to Egypt</h4>
<p>
During the long journey to Egypt, he eventually begins to come to terms with his orientation.
After arriving in Egypt and defeating N'doul, he goes out with Tenmei/Taeko.
They keep their relationship a secret from everyone but the other crusaders (and Holly after the Journey ends).
</p>
</div>
<div class="row mx-auto g-4 justify-content-center" style="margin-top: 10px;">
<div class="col-md-5 p-1" style="background-color:#303030; color: #E3E3E3; border-radius: 10px; padding: 10px; margin-right: 10px">
<!-- background color is the color of the box, color is the text color,
border-radius is the roundness of the corners,
padding is the space between the text and the border -->
<p>
<h2><u>Favorites:</u></h2>
<!--u means underline, margin-bottom is the space between the heading and the stuff below-->
<ul>
<li>Heavy Rock & Metal Music</li>
<li>Mystery / Detective Shows (Columbo)</li>
<li>Westerns</li>
<li>The Dollars Trilogy</li>
<li>Clint Eastwood</li>
<li>The Sea</li>
<li>Marine Life</li>
<li>Great White Sharks</li>
<li>Navy Blue</li>
<li>Black</li>
</ul>
</p>
</div>
<div class="col-md-5 p-1" style="background-color:#303030; color: #E3E3E3; border-radius: 10px; padding: 10px;">
<!-- background color is the color of the box, color is the text color,
border-radius is the roundness of the corners,
padding is the space between the text and the border -->
<p>
<h2><u>Hates:</u></h2>
<!--u means underline, margin-bottom is the space between the heading and the stuff below-->
<ul>
<li>Being Vulnerable</li>
<li>Being seen as weak or immasculine</li>
<li>Showing off his body</li>
<li>Being flirted with (especially by women)</li>
<li>Loud noises/voices</li>
<li>Any other strong/bad sensations</li>
</ul>
</p>
</div>
</div>
<div class="row mx-auto g-4 justify-content-center" style="margin-top: 10px;">
<div class="col-md-5 p-1" style="background-color:#303030; color: #E3E3E3; border-radius: 10px; padding: 10px; margin-right: 10px">
<!-- background color is the color of the box, color is the text color,
border-radius is the roundness of the corners,
padding is the space between the text and the border -->
<p>
<h2><u>Hobbies:</u></h2>
<!--u means underline, margin-bottom is the space between the heading and the stuff below-->
<ul>
<li>Working out / Staying in shape</li>
<li>Listening to Hard Rock / Heavy Metal</li>
<li>Hobby 3</li>
</ul>
</p>
</div>
<div class="col-md-5 p-1" style="background-color:#303030; color: #E3E3E3; border-radius: 10px; padding: 10px;">
<!-- background color is the color of the box, color is the text color,
border-radius is the roundness of the corners,
padding is the space between the text and the border -->
<p>
<h2><u>Fears:</u></h2>
<!--u means underline, margin-bottom is the space between the heading and the stuff below-->
<ul>
<li>Being Vulnerable</li>
<li>Not being able to protect himself and his loved ones</li>
<li>Fear 3</li>
</ul>
</p>
</div>
</div>
<div class="row mx-auto g-4 justify-content-center" style="margin-top: 10px;">
<div class="col-md-5 p-1" style="background-color:#303030; color: #E3E3E3; border-radius: 10px; padding: 10px; margin-right: 10px">
<!-- background color is the color of the box, color is the text color,
border-radius is the roundness of the corners,
padding is the space between the text and the border -->
<p>
<h2><u>Matching Songs:</u></h2>
<!--u means underline, margin-bottom is the space between the heading and the stuff below-->
<ul>
<li><a href="https://youtube.com/playlist?list=PLPk_-OflFbln5JLzKDOnLIazjzkn3qZ3t&si=xOXV4z1otxWLDo0W" target="_blank">Character Playlist on Youtube</a></li>
<li><a href="https://open.spotify.com/playlist/3WazuH1YRN7bUoB7S01A4J?si=ba964c68fbb24e71" target="_blank">Character Playlist on Spotify</a></li>
<li><a href="https://youtu.be/NFjE5A4UAJI?si=2d7xAr8LZBA5aR8k">Stardust Crusaders - Yugo Kanno</a></li>
<li><a href="https://youtu.be/tMDFv5m18Pw?si=ZoGXbKSUwgIYlTmt">Crazy Train - Ozzy Osbourne</a></li>
<li><a href="https://youtu.be/ZpUYjpKg9KY?si=GHbuLFAyoqpicIYU">Break Stuff - Limp Bizkit</a></li>
<li><a href="">Bad Reputation - Joan Jett</a></li>
<li><a href="">Back in Black - AC/DC</a></li>
<li><a href="">Help Me - Oingo Boingo</a></li>
<li><a href="">Just Another Day - Oingo Boingo</a></li>
<li><a href="">Come As You Are - Nirvana</a></li>
<li><a href="">I'm Still Standing - Elton John</a></li>
</ul>
</p>
</div>
<div class="col-md-5 p-1" style="background-color:#303030; color: #E3E3E3; border-radius: 10px; padding: 10px;">
<!-- background color is the color of the box, color is the text color,
border-radius is the roundness of the corners,
padding is the space between the text and the border -->
<p>
<h2><u>Matching Songs with other characters:</u></h2>
<!--u means underline, margin-bottom is the space between the heading and the stuff below-->
<ul>
<li><a href="https://open.spotify.com/playlist/0yOrnv4YAOZjZMf5Gr8WzH?si=82556c8322d0423d" target="_blank">Spotify Ship Playlist with Tenmei</a></li>
<li><a href="https://youtu.be/8eleGPkE9Gk?si=Wp4FTXIv5u9NFt6J">Sweet Leaf - Black Sabbath</a></li>
<li><a href="https://youtu.be/0nZE978JbYc?si=PmWp7Vadk9chrYrv">Not My Slave - Oingo Boingo</a></li>
<li><a href="https://youtu.be/2qS_ZcGZUD4?si=AbvOlhH9D3wGsjxq">Problems - Mother Mother</a></li>
<li><a href="https://youtu.be/MXB6rHTkDfM?si=swhpX2nPZQq2iurh">Fever - Judas Priest</a></li>
<li><a href="https://youtu.be/0kXro-Gi4b8?si=ILDaCywAPpKpZqJB">Shy Boy - Bananarama</a></li>
<li><a href="https://youtu.be/FNt8xXCJplY?si=y4kAr4WwzfFh8TwV">Two Time - Jack Stauber's Micropop</a></li>
<li><a href="https://youtu.be/tNvp-BMUZik?si=GkK4iSgEjqPvPAEy">Fighter - Jack Stauber's Micropop</a></li>
<li><a href="https://youtu.be/WGoDaYjdfSg?si=3nuA5G2PoXeKqDlP">Purple Haze - Jimi Hendrix</a></li>
</ul>
</p>
</div>
</div>
<div style="text-align: center; margin-top:30px;">
<p>
Thanks for reading!
</p>
<div style="text-align: right;">
<img src="https://files.catbox.moe/zhls1u.png">
</div>
</div>
</div>
</body> <!--End Body Code-->
</html> <!--End HTML Document-->