|
|
| Line 1: |
Line 1: |
| __NOTOC__ | | __NOTOC__ |
| {{#css:
| | [[Category:Characters]] |
| @import 'https://fonts.googleapis.com/css2?family=Aboreto';
| | [[Category:Tremere]] |
| @import 'https://fonts.googleapis.com/css2?family=Open+Sans';
| | [[Category:Vampire]] |
| .bg-black {background-color:#000;}
| | <div style="background-color: #000000; width: 100%; margin: 0 auto; text-align: center;"> |
| .bg-white {background-color:#FFF;}
| | <div style="background-color: #000000; padding: 0em"> |
| .bg-grey {background-color:#808080;}
| | [[File:JoeNew1.jpg|right]] |
| .bg-lavender {background-color:#E6E6FA;}
| | <div style="background-color: #000000; border-bottom: 5px double yellow; border-radius: 30px"><br>[[File:JoeLogo.png|500px]]</h3> |
| .fg-black {color:#000;}
| | </div> |
| .fg-white {color:#FFF;}
| | <div style="background-color: #000000; border-top: 5px double #ffb40a; border-bottom: 5px double #ffb40a; border-radius: 30px; text-align: center;"> |
| .fg-grey {color:#808080;}
| | <h3 style="color: yellow; text-shadow: white 0px 3px 3px; font-size:25px; text-align: center">BIG TROUBLE IN LITTLE TOKYO</h3> |
| .fg-lavender {color:#E6E6FA;}
| | <p style="color: #E6E6E6; text-align: center;padding:10px; text-shadow: white 0px 2px 2px; font-size:18px">Those who feel out the vibrant criminal underworld of Little Tokyo find it diverse--money laundering, gambling rings, prostitution, chop shops, and racketeering are common Yakuza pastimes. For the traditional clans led by old and careful oyabun, violence and the resulting exposure is frowned upon. Conversely, the young and rebellious bosozoku--pseudo-Yakuza biker gangs--don't shy away from violence and theft. In past decades the lines between these two groups have grown blurry in Los Angeles; most, like Joe, find themselves somewhere in the middle. Those who venture into Little Tokyo seeking the anathemas of polite society might just find the solution to their problems. </p> <br> |
| .feature-title {
| | </div> |
| font-size: 1.75rem;
| | <div style="background-color: #000000; padding: 10px; border-top: 5px double #e1781e; border-bottom: 5px double #e1781e; border-radius: 30px; text-align: center;"><h3 style="color: yellow; text-align: center; text-shadow: white 0px 3px 3px; font-size:25px">BROKEN KNUCKLES, BUSTED FANGS</h3><p style="color: #E6E6E6; text-shadow: white 0px 2px 2px; font-size:18px;">Embraced into the Camarilla during the heart of the 80's, Joe is a veteran of the Kindred warzone that is California. From the Bay Area down past Los Angeles, Joe has been involved in multiple wars involving the Sabbat and the Kuei-Jin. In single-minded pursuit of these enemies, he's earned a reputation as a slippery sword-for-hire with brow-raising contacts in both the Free States and the Los Angeles Praxis. This progressive attitude is softened by his reluctance to get involved in disputes between the Anarchs and the Camarilla. Instead, he makes himself useful by dealing with paranormal phenomena, renegade supernaturals, and the eradication of troublesome Sabbat and Cathayan nests.</p> <br> |
| }
| |
| .feature-subtitle {
| |
| font-size: 1.25rem;
| |
| }
| |
| .small-title {
| |
| font-weight: bold;
| |
| }
| |
| .text-center {
| |
| text-align: center;
| |
| }
| |
| .text-right {
| |
| text-align: right;
| |
| }
| |
| .photo-header {
| |
| width: calc(100% - 2rem);
| |
| margin: auto;
| |
| padding: 0px;
| |
| border-top: 1px #E6E6FA solid;
| |
| border-left: 1px #E6E6FA solid;
| |
| border-right: 1px #E6E6FA solid;
| |
| }
| |
| .character-name {
| |
| font-family: "Aboreto",serif;
| |
| font-size: 3rem;
| |
| font-weight: bold;
| |
| text-align: center;
| |
| width: calc(100% - 2rem);
| |
| margin: auto;
| |
| border-left: 1px #E6E6FA solid;
| |
| border-right: 1px #E6E6FA solid;
| |
| }
| |
| /* calc function to fill available space minus 2rem on either side */
| |
| .container {
| |
| font-family: "Open Sans", sans-serif;
| |
| width: calc(100% - 2rem);
| |
| margin: auto;
| |
| height: auto;
| |
| overflow: auto;
| |
| border-left: 1px #E6E6FA solid;
| |
| border-right: 1px #E6E6FA solid;
| |
| border-bottom: 1px #E6E6FA solid;
| |
| }
| |
| .quote-banner {
| |
| background-color: #141414;
| |
| border-top: 1px #E6E6FA solid;
| |
| border-bottom: 1px #E6E6FA solid;
| |
| width:100%;
| |
| }
| |
| .img-responsive {
| |
| width: 100%;
| |
| height: auto;
| |
| }
| |
| .hooks {
| |
| background-image: url('https://media.istockphoto.com/id/1091733134/vector/black-tartan-plaid-seamless-pattern-background.jpg?s=612x612&w=0&k=20&c=5wbejag1txdnW5apGBQFbDCFZ_gIgK61GOU08lR-irg=');
| |
| padding: 1.0rem 0.5rem;
| |
| }
| |
| .hooks-table {
| |
| width: 100%;
| |
| padding: 1.0rem 0.5rem;
| |
| }
| |
| .hook-name {
| |
| width: 25%;
| |
| }
| |
| .hook-note {
| |
| width: 75%;
| |
| }
| |
| .stats {
| |
| padding: 1.5rem 0.5rem;
| |
| }
| |
| .stats-table {
| |
| width: 100%;
| |
| padding: 1.0rem 0.25rem;
| |
| }
| |
| .stat-name {
| |
| width: 50%;
| |
| }
| |
| .stat-note {
| |
| width: 50%;
| |
| }
| |
| .contacts-table {
| |
| width: 100%;
| |
| background-image: url('https://media.istockphoto.com/id/1091733134/vector/black-tartan-plaid-seamless-pattern-background.jpg?s=612x612&w=0&k=20&c=5wbejag1txdnW5apGBQFbDCFZ_gIgK61GOU08lR-irg=');
| |
| padding: 1.0rem 0.1rem;
| |
| }
| |
| .contact-name {
| |
| width: 20%;
| |
| }
| |
| .contact-note {
| |
| width: 80%;
| |
| }
| |
| .music {
| |
| list-style: none;
| |
| padding: 1.0rem 0.25rem!important;
| |
| margin:0;
| |
| }
| |
| /* flex box toolkit taken from W3C reference */
| |
| .flex-container {
| |
| display: flex;
| |
| flex-direction: row;
| |
| text-align: left;
| |
| }
| |
| .flex-container > .flex-33 {
| |
| flex: 33%;
| |
| margin: auto;
| |
| padding: 0.5rem 1.0rem;
| |
| }
| |
| .flex-container > .flex-25 {
| |
| flex: 25%;
| |
| margin: auto;
| |
| padding: 0.5rem 1.0rem;
| |
| }
| |
| .flex-container > .flex-50 {
| |
| flex: 50%;
| |
| margin: auto;
| |
| padding: 0.5rem 1.0rem;
| |
| }
| |
| .flex-container > .demographics {
| |
| flex: 40%;
| |
| margin: auto;
| |
| padding: 0.5rem 1.0rem;
| |
| }
| |
| .flex-container > .introduction {
| |
| flex: 60%;
| |
| margin: auto;
| |
| padding: 0.5rem 1.0rem;
| |
| }
| |
| .flex-gallery {
| |
| display: flex;
| |
| flex-direction: row;
| |
| justify-content: center;
| |
| }
| |
| .flex-gallery .gal-img {
| |
| flex: 33%;
| |
| margin: auto;
| |
| padding: 0.5rem 0.5rem;
| |
| }
| |
| .hidden {
| |
| display: none;
| |
| }
| |
| .col-33 {
| |
| width: 33%;
| |
| }
| |
| .col-25 {
| |
| width: 25%;
| |
| }
| |
| .col-50 {
| |
| width: 50%;
| |
| }
| |
| .col-100 {
| |
| width: 100%;
| |
| }
| |
| .m-0 {
| |
| margin: 0px;
| |
| }
| |
| .m-1 {
| |
| margin: 1px;
| |
| }
| |
| .m-2 {
| |
| margin: 2px;
| |
| }
| |
| .m-3 {
| |
| margin: 3px;
| |
| }
| |
| .m-4 {
| |
| margin: 4px;
| |
| }
| |
| .m-5 {
| |
| margin: 5px;
| |
| }
| |
| .m-auto {
| |
| margin: auto;
| |
| }
| |
|
| |
| .p-0 {
| |
| padding: 0px;
| |
| }
| |
|
| |
| .p-1 {
| |
| padding: 1px;
| |
| }
| |
|
| |
| .p-2 {
| |
| padding: 2px;
| |
| }
| |
|
| |
| .p-3 {
| |
| padding: 3px;
| |
| }
| |
|
| |
| .p-4 {
| |
| padding: 4px;
| |
| }
| |
|
| |
| .p-5 {
| |
| padding: 5px;
| |
| }
| |
|
| |
| .py-0 {
| |
| padding-top: 0px;
| |
| padding-bottom: 0px;
| |
| }
| |
|
| |
| .py-1 {
| |
| padding-top: 1px;
| |
| padding-bottom: 1px;
| |
| }
| |
| .py-2 {
| |
| padding-top: 2px;
| |
| padding-bottom: 2px;
| |
| }
| |
| .py-3 {
| |
| padding-top: 3px;
| |
| padding-bottom: 3px;
| |
| }
| |
| .py-4 {
| |
| padding-top: 4px;
| |
| padding-bottom: 4px;
| |
| }
| |
| .py-5 {
| |
| padding-top: 5px;
| |
| padding-bottom: 5px;
| |
| }
| |
| .v-top {
| |
| vertical-align: top;
| |
| }
| |
| #MainBody a,#MainBody a:hover,#MainBody a:visited {color:#E6E6FA;}
| |
| #rpg-logs a,#rpg-logs a:hover,#rpg-logs a:visited {color:#FFF!important;}
| |
| #info-table {
| |
| border-right: 1px #808080 solid;
| |
| }
| |
| #rpg-logs {
| |
| padding: 1rem 0.5rem;
| |
| }
| |
| /* DPL plugin formatting */
| |
| #rpg-logs ul {
| |
| display: flex;
| |
| flex-direction: row;
| |
| text-align: left;
| |
| padding: 1.0rem 0.5rem;
| |
| }
| |
| #rpg-logs li {
| |
| flex: 33%;
| |
| }
| |
| /* adjustments for mobile screen size */
| |
| @media (max-width: 650px) {
| |
| .flex-gallery {
| |
| flex-direction: column;
| |
| }
| |
| .gal-img {
| |
| flex:100%;
| |
| }
| |
| .flex-container {
| |
| flex-direction: column;
| |
| }
| |
| .flex-33 {
| |
| flex: 100%;
| |
| }
| |
| .demographics {
| |
| flex: 100%;
| |
| }
| |
| .introduction {
| |
| flex: 100%;
| |
| }
| |
| .character-name {
| |
| font-size: 2rem;
| |
| }
| |
| #info-table {
| |
| border: 0px;
| |
| }
| |
| .hooks {
| |
| padding: 0rem;
| |
| }
| |
| .hooks-table {
| |
| flex: 100%;
| |
| padding: 0.25rem 1.0rem;
| |
| }
| |
| .hook-note {
| |
| padding-left: 0.5rem;
| |
| }
| |
| .stats {
| |
| padding: 0rem;
| |
| }
| |
| .stats-table {
| |
| flex: 100%;
| |
| padding: 0rem;
| |
| }
| |
| .stat-name {
| |
| flex: 50%;
| |
| }
| |
| .stat-note {
| |
| flex: 50%;
| |
| }
| |
| .contacts-table {
| |
| flex: 100%;
| |
| padding: 0rem;
| |
| }
| |
| .contact-name {
| |
| flex: 25%;
| |
| }
| |
| .contact-note {
| |
| flex: 75%;
| |
| }
| |
| .quote-banner {
| |
| flex:100%;
| |
| }
| |
| .feature-title {
| |
| text-align: center;
| |
| }
| |
| br {
| |
| display: none;
| |
| }
| |
| #rpg-logs ul {
| |
| flex-direction: column;
| |
| }
| |
| #rpg-logs li {
| |
| flex: 100%;
| |
| }
| |
| }
| |
| }}
| |
| <div class="photo-header bg-black" id="charbit-header">[[Image:Ninja.jpg|class=img-responsive|link=]]</div>
| |
| <div class="character-name bg-black fg-grey" id="charbit-name">Joe Sakai</div> | |
| <div class="container bg-black" id="MainBody">
| |
| <div class="flex-container fg-white" id="DemoIntro">
| |
| <div class="demographics" id="demo">
| |
| <table class="col-100" id="info-table">
| |
| <tr>
| |
| <td class="col-50 fg-lavender small-title v-top">Appears As:</td>
| |
| <td class="col-50 v-top">Joe</td>
| |
| </tr>
| |
| <tr>
| |
| <td class="col-50 fg-lavender small-title v-top">Apparent Age:</td>
| |
| <td class="col-50" v-top>Mid Twenties</td>
| |
| </tr>
| |
| <tr>
| |
| <td class="col-50 fg-lavender small-title v-top">Pronouns:</td>
| |
| <td class="col-50" v-top>He/Him</td>
| |
| </tr>
| |
| <tr>
| |
| <td class="col-50 fg-lavender small-title v-top">Demeanor:</td>
| |
| <td class="col-50 v-top">Loner</td>
| |
| </tr>
| |
| <tr>
| |
| <td class="col-50 fg-lavender small-title">Occupation:</td>
| |
| <td class="col-50 v-top">Problem Solver</td>
| |
| </tr>
| |
| </table>
| |
| </div>
| |
| <div class="introduction" id="intro">
| |
| <div class="feature-title fg-lavender p-2">Life's an Ashtray</div>
| |
| <p class="p-2">There's not much to say about the owner of Red Light Motors. He's barely in the shop, except for the odd night shift. Once in a while, you'll catch him meditating or going for a run in Little Tokyo. More often he's on his bike navigating the traffic, going bar hopping, or whatever it is that 20-something motorheads do in LA. <br><br> People say there's rough folks that get work done at Red Light Motors, but Joe seems polite enough. He contributes to the Little Tokyo community with the occasional charity ride or donation at the local Temple. Overall, he's not a showy person in his appearance or demeanor.
| |
| </p>
| |
| </div>
| |
| </div>
| |
| <div class="hooks" id="rpg-hooks">
| |
| <div class="feature-title fg-lavender p-2 text-center">RP Hooks</div>
| |
| <table class="hooks-table fg-white">
| |
| <tr>
| |
| <td class="hook-name fg-lavender v-top py-5">Focused, Driven</td>
| |
| <td class="hook-note v-top py-5">Enjoys practicing martial arts.</td>
| |
| </tr>
| |
| <tr>
| |
| <td class="hook-name fg-lavender v-top py-5">Motivated, Direct</td>
| |
| <td class="hook-note v-top py-5">Has a small, robust garden, tended often.</td>
| |
| </tr>
| |
| <tr>
| |
| <td class="hook-name fg-lavender v-top py-5">Energetic, Sharp</td>
| |
| <td class="hook-note v-top py-5">Passionate about street racing.</td>
| |
| </tr>
| |
| </table>
| |
| </div>
| |
| <div class="m-0 p-0" id="skyline-deco">[[Image:JosephSkylineBanner.jpg|class=img-responsive|link=]]</div>
| |
| <div class="flex-container fg-white" id="misc1">
| |
| <div class="flex-33 stats">
| |
| <div class="feature-title text-center fg-lavender p-2">You wanna see my what?</div>
| |
| <table class="stats-table">
| |
| <tr>
| |
| <td class="stat-name fg-lavender v-top">Determination</td>
| |
| <td class="stat-note v-top">🔴🔴🔴🔴🔴🔴</td>
| |
| </tr>
| |
| <tr>
| |
| <td class="stat-name fg-lavender v-top">Sitting Still</td>
| |
| <td class="stat-note v-top">⭕️⚫️⚫️⚫️⚫️⚫️</td>
| |
| </tr>
| |
| <td class="stat-name fg-lavender v-top">Merits</td>
| |
| <td class="stat-note v-top">Tough as Nails</td>
| |
| </tr>
| |
| <tr>
| |
| <td class="stat-name fg-lavender v-top">Flaws</td>
| |
| <td class="stat-note v-top">Never Slows Down</td>
| |
| </tr>
| |
| </table>
| |
| </div>
| |
| <div class="flex-33">
| |
| <!-- [[Image:OccultMoth.png|class=img-responsive m-auto|link=]] -->
| |
| [[Image:JosephGif.gif|class=img-responsive m-auto|link=]]</div>
| |
| <div class="flex-33" style="min-height:100%;">
| |
| <div class="feature-title text-center fg-lavender p-2">Music</div>
| |
| <ul class="Music">
| |
| [https://www.youtube.com/watch?v=hbe3CQamF8k Angel] -Massive Attack <br><br>You are my angel<br>Come from way above<br>To bring me love (To bring me love)<br>Her eyes<br>She's on the dark side<br>Neutralize<br>Every man in sight<br>Love you, love you, love you<br>Love you, love you, love you<br>Love you, love you, love you...<br>You are my angel<br>Come from way above<br>Love you, love you, love you<br>Love you, love you, love you<br>Love you, love you, love you...<br><br>
| |
| </ul>
| |
| </div>
| |
| </div>
| |
| <div class="quote-banner fg-white text-center py-5">
| |
| <blockquote>“Fall down seven times, get up eight times.”
| |
| </blockquote> | |
| <small>- Japanese Proverb</small>
| |
| </div>
| |
| <div class="fg-white py-5" id="contacts">
| |
| <div class="feature-title fg-lavender p-5 text-center">Contacts</div>
| |
| <div class="flex-container">
| |
| <div class="flex-33">
| |
| <p class="feature-subtitle text-center">Group A</p>
| |
| <table class="contacts-table">
| |
| <tr>
| |
| <td class="contact-name v-top">NAME</td>
| |
| <td class="contact-note v-top">About them.</td>
| |
| </tr>
| |
| <tr>
| |
| <td class="contact-name v-top">NAME</td>
| |
| <td class="contact-note v-top">About them.</td>
| |
| </tr>
| |
| </table>
| |
| </div>
| |
| <div class="flex-33">
| |
| <p class="feature-subtitle text-center">Group B</p>
| |
| <table class="contacts-table">
| |
| <tr>
| |
| <td class="contact-name v-top">Test</td>
| |
| <td class="contact-note v-top">Test.</td>
| |
| </tr>
| |
| <tr>
| |
| <td class="contact-name v-top">NAME</td>
| |
| <td class="contact-note v-top">About them.</td>
| |
| </tr>
| |
| </table>
| |
| </div>
| |
| <div class="flex-33">
| |
| <p class="feature-subtitle text-center">Group C</p>
| |
| <table class="contacts-table">
| |
| <tr>
| |
| <td class="contact-name v-top">NAME</td>
| |
| <td class="contact-note v-top">About them.</td>
| |
| </tr>
| |
| <tr>
| |
| <td class="contact-name v-top">NAME</td>
| |
| <td class="contact-note v-top">About them.</td>
| |
| </tr>
| |
| </table>
| |
| </div>
| |
| </div>
| |
| </div>
| |
|
| |
| <div class="fg-white" id="galleryRow1">
| |
| <div class="feature-title fg-lavender p-2 text-center">Gallery</div>
| |
| <div class="flex-container p-2">
| |
| <div class="flex-33 text-center">[[Image:JosephB2.png|250px]]</div>
| |
| <div class="flex-33 text-center">[[Image:JosephB3.png|250px]]</div>
| |
| <div class="flex-33 text-center">[[Image:JosephB4.png|250px]]</div>
| |
| </div>
| |
| </div>
| |
|
| |
| <div class="fg-white" id="rpg-logs">
| |
| <div class="feature-title fg-lavender p-2 text-center">Logs</div>
| |
| {{#dpl:
| |
| |linksto={{PAGENAME}}
| |
| |category=Logs
| |
| |columns=3
| |
| |noresultsheader=<p class="text-center p-5">No logs have been uploaded or attributed to this page.</p>
| |
| }}
| |
| </div>
| |
| <div class="m-0 p-0" id="footer">[[Image:Joemotor.jpg|class=img-responsive|link=]]</div>
| |
| </div> | | </div> |
| [[Category:Characters]][[Category:Active]][[Category:PC]]
| | <div style="background-color: #000000; padding: 10px; border-top: 5px double #cf3c13; border-bottom: 5px double #cf3c13; border-radius: 30px; text-align: center;"> |
| | <h3 style="color: yellow; text-align: center; text-shadow: white 0px 3px 3px; font-size:25px">FALLING UP THE STAIRS</h3> |
| | <p style="color: #E6E6E6; text-shadow: white 0px 2px 2px; font-size:18px;">To the Warlocks of Los Angeles, Joe Sakai is something of an enigma. This is partially due to him being a transplant from Joseph Ravenfeather's San Jose Chantry, but also due to an aloof attitude and focus on 'field work' over study. Despite or perhaps because of his significant accomplishments on the field of war, Joe has not yet risen to the top of the Apprentice ranks in the Pyramid. It could also be that a vaguely transitionalist mindset has stifled his upward mobility, yet his recent work has not gone unnoticed. He's seeking Angeleno Tremere to train with on his pursuit of the mysteries, signaling that he could be starting to buckle down after all. </p> <br> |
| | </div> |
| | <br> |
| | <div style="float:left; background-color: #000000; border-bottom: 5px double #880808; border-top: 5px double #880808; border-radius: 30px; padding: 10px; text-align: center; width: 45%;"> |
| | <h3 style="color: yellow; text-align: left; text-shadow: white 0px 3px 3px; font-size:25px">C O N T A C T S</h3> |
| | <p style="color: #E6E6E6; text-align: left; text-shadow: white 0px 2px 2px; font-size:18px;">* Contacts <br>* Go <br>* Here </p> |
| | </div> |
| | <div style="float:right; border-bottom: 5px double #5f0606; border-top: 5px double #5f0606; background-color: #000000; border-radius: 30px; padding: 10px; text-align: center; width: 45%;"> |
| | <h3 style="color: yellow; text-align: right; text-shadow: white 0px 3px 3px; font-size:25px">R U M O R S</h3> |
| | <p style="color: #E6E6E6; text-align: right; text-shadow: white 0px 2px 2px; font-size:18px;"> |
| | Rumors -<br> |
| | Go -<br> |
| | Here -<br></p> |
| | </div> |
| | <br><br><br><br><br><br><br><br><br><br><br><br> |
| | </div> |
