Genshin Impact

<!----------
layout & code by @dvdexe
editing OK but don't claim as your own
bootstrap colors used: primary, info, muted, faded
icons, materials, other images were linked directly from the wiki
v2: fixed spacing issues on mobile (navigation, ascension materials)
v3: fixed button sizing & misc spacing on mobile; updated relationships column sizing on mobile
---------->

<div class="container"><div class="row">
<!-- SIDEBAR -->
<div class="col-md-2 px-0">
    <div style="background-image:url('https://static.wikia.nocookie.net/gensin-impact/images/b/b9/Kaedehara_Kazuha_Multi_Wish.png');
    background-size:cover;background-position:center;min-height:20.8em;width:11.5em" class="img-thumbnail bg-faded d-md-block d-none"></div>
</div>
<!-- HEADER -->
<div class="col-md-10">
<div class="row"><div class="col-12 px-0"><h1>
  Kaedehara Kazuha
  <small class="text-muted">Scarlet Leaves Pursue Wild Waves</small>
  <img src="https://static.wikia.nocookie.net/gensin-impact/images/a/a4/Element_Anemo.png" style="height:25px" class="float-right" />
<p class="mx-0 p-0"><hr class="my-2" /></p>
</h1></div>

<!-- NAVIGATION -->
<div class="col-md-1 p-0 my-1 mb-3 my-md-0 mb-md-0">
<ul class="nav d-md-inline justify-content-between" style="margin-bottom:.2em">
<li><a class="btn btn-center btn-primary active mb-md-2 nav-link" data-toggle="tab" href="#attributes">
  <i class="fad fa-info-circle fa-2x"></i></a>
</li><li><a class="btn btn-center btn-primary mb-md-2 nav-link" data-toggle="tab" href="#combat">
  <i class="fad fa-swords fa-2x"></i></a>
</li><li><a class="btn btn-center btn-primary mb-md-2 nav-link" data-toggle="tab" href="#constellation">
  <i class="fad fa-sparkles fa-2x"></i></a>
</li><li><a class="btn btn-center btn-primary mb-md-2 nav-link" data-toggle="tab" href="#story">
  <i class="fad fa-books fa-2x"></i></a>
</li><li><a class="btn btn-center btn-primary nav-link" data-toggle="tab" href="#relationships">
  <i class="fad fa-users fa-2x"></i></a>
</li></ul></div>
<div class="col-md-11 tab-content px-0 px-md-3 pl-0 mb-0">

<!-- ATTRIBUTES -->
<div class="tab-pane active show fade in" style="height:18em;overflow:auto;overflow-x:hidden" id="attributes">
<h3 class="my-0 mb-1">Attributes</h3>
<div class="row"><div class="col-md-6">
<div class="justify-content-between">
  <div>Pronouns</div>
  <div>He/him</div>
</div><hr class="my-1"><div class="justify-content-between">
  <div>Birthday</div>
  <div>10/29</div>
</div><hr class="my-1"><div class="justify-content-between">
  <div>Region</div>
  <div>Inazuma</div>
</div><hr class="my-1"><div class="justify-content-between">
  <div>Affiliation</div>
  <div>The Crux</div>
</div><hr class="my-1"><div class="justify-content-between">
  <div>Constellation</div>
  <div>Acer Palmatum</div>
</div><hr class="my-1"><div class="justify-content-between">
  <div>Vision</div>
  <div>Anemo</div>
</div><hr class="my-1"><div class="justify-content-between">
  <div>Weapon</div>
  <div>Sword</div>
</div><hr class="my-1"><div class="justify-content-between">
  <div>Rarity</div>
  <div class="text-info"><i class="fa fa-star" /><i class="fa fa-star" /><i class="fa fa-star" /><i class="fa fa-star" /><i class="fa fa-star" /></div>
</div></div>
<div class="col-md-6 mx-0 mt-md-0 mt-2">
    <p>A wandering samurai from Inazuma who is currently with Liyue's Crux Fleet. A gentle and carefree soul whose heart hides a great many burdens from the past.<br />
    It's hard to say if weathering life's storms has eroded any sharp edges he once had or his reserved nature keeps them hidden from view. The first time most people meet Kaedehara Kazuha, they presume he is just another trainee crew member aboard The Crux.</p>
</div></div></div>

<!-- COMBAT -->
<div class="tab-pane fade in" style="height:18em;overflow:auto;overflow-x:hidden" id="combat">
<h3 class="my-0 mb-1">Ascension Materials</h3>
<div class="row mb-3 text-center no-md-gutters">
  <div class="col"><img src="https://static.wikia.nocookie.net/gensin-impact/images/3/32/Item_Vayuda_Turquoise_Gemstone.png"
class="img-thumbnail" style="height:5em;"/></div>
  <div class="col"><img src="https://static.wikia.nocookie.net/gensin-impact/images/1/1d/Item_Marionette_Core.png"
class="img-thumbnail" style="height:5em"/></div>
  <div class="col"><img src="https://static.wikia.nocookie.net/gensin-impact/images/6/6d/Item_Sea_Ganoderma.png"
class="img-thumbnail" style="height:5em"/></div>
<div class="d-md-none d-block py-2 py-md-0 w-100"></div>
  <div class="col"><img src="https://static.wikia.nocookie.net/gensin-impact/images/7/71/Item_Golden_Raven_Insignia.png"
class="img-thumbnail" style="height:5em"/></div>
  <div class="col"><img src="https://static.wikia.nocookie.net/gensin-impact/images/c/c2/Item_Philosophies_of_Diligence.png"
class="img-thumbnail" style="height:5em"/></div>
  <div class="col"><img src="https://static.wikia.nocookie.net/gensin-impact/images/e/e1/Item_Gilded_Scale.png"
class="img-thumbnail" style="height:5em"/></div></div>

<h3 class="my-0 mb-1">Weapon</h3>
<div class="row mb-3 no-gutters">
<div class="col-2">
  <img src="https://static.wikia.nocookie.net/gensin-impact/images/9/90/Weapon_Favonius_Sword.png" class="img-thumbnail" style="width:10em" />
</div><div class="col-10 px-0 pl-3">
  <div class="badge badge-info float-right px-1">1</div>
  <h4>Favonious Sword
  <small class="text-muted">Lv.70
   <i class="fa fa-star" /><i class="fa fa-star" /><i class="fa fa-star" /><i class="fa fa-star" /></small>
  </h4>
<div class="justify-content-between">
  <div>Base ATK</div>
  <div>347</div>
</div><hr class="my-1"><div class="justify-content-between mb-2">
  <div>Energy Recharge</div>
  <div>50.5%</div>
</div>
  <p class="font-italic">A standard-issue longsword of the Knights of Favonius. When you're armed with this agile and sharp weapon, channeling the power of the elements has never been so easy!</p>
</div></div>

<h3 class="my-0 mb-1">Talents</h3>
<table class="table table-striped table-sm mb-0"><thead><tr>
<th width="15%">Icon</th><th width="30%">Name</th><th width="50%">Type</th></tr></thead>
<tbody><tr>
  <td><img src="https://static.wikia.nocookie.net/gensin-impact/images/d/db/Talent_Garyuu_Bladework.png" style="width:50px" /></td>
  <td>Garyuu Bladework</td>
  <td>Normal Attack</td>
</tr><tr>
  <td colspan="3"><b>Normal Attack:</b> Perform up to 5 rapid strikes.<br /><br />
  <b>Charged Attack:</b> Consumes a certain amount of Stamina to unleash 2 rapid sword strikes.<br />
  <b>Plunging Attack:</b> Plunges from mid-air to strike the ground below, damaging opponents along the path and dealing AoE DMG upon impact. If this Plunging Attack is triggered by Chihayaburu, it will be converted to Plunging Attack: Midare Ranzan.<br />
  <b>Plunging Attack: Midare Ranzan:</b> When a Plunging Attack is performed using the effects of the Elemental Skill Chihayaburu, Plunging Attack DMG is converted to Anemo DMG and will create a small wind tunnel via a secret blade technique that pulls in nearby objects and opponents.</td>
</tr><tr>
  <td><img src="https://static.wikia.nocookie.net/gensin-impact/images/2/22/Talent_Chihayaburu.png" style="width:50px" /></td>
  <td>Chihayaburu</td>
  <td>Elemental Skill</td>
</tr><tr>
  <td colspan="3">Unleashes a secret technique as fierce as the rushing wind that pulls objects and opponents towards Kazuha's current position before launching opponents within the AoE, dealing Anemo DMG and lifting Kazuha into the air on a rushing gust of wind.<br />
  <b>Press:</b> Can be used in mid-air.<br />
  <b>Hold:</b> Charges up before unleashing greater Anemo DMG over a larger AoE than Press Mode.<br />
  <b>Plunging Attack: Midare Ranzan:</b> Within 10s of remaining airborne after casting Chihayaburu, Kazuha can unleash a powerful Plunging Attack known as Midare Ranzan.<br />
  When a Plunging Attack is performed using the effects of the Elemental Skill Chihayaburu, Plunging Attack DMG is converted to Anemo DMG. On landing, Kazuha creates a small wind tunnel via a secret blade technique that pulls in nearby objects and opponents. Midare Ranzan's DMG is considered Plunging Attack DMG.</td>
</tr><tr>
  <td><img src="https://static.wikia.nocookie.net/gensin-impact/images/0/06/Talent_Kazuha_Slash.png" style="width:50px" /></td>
  <td>Kazuha Slash</td>
  <td>Elemental Burst</td>
</tr><tr>
  <td colspan="3">The signature technique of Kazuha's self-styled bladework — a single slash that strikes with the force of the first winds of autumn, dealing AoE Anemo DMG. The blade's passage will leave behind a field named "Autumn Whirlwind" that periodically deals AoE Anemo DMG to opponents within its range.<br />Elemental Absorption: If Autumn Whirlwind comes into contact with Hydro/Pyro/Cryo/Electro, it will deal additional elemental DMG of that type. Elemental Absorption may only occur once per use.</td>
</tr><tr>
  <td><img src="https://static.wikia.nocookie.net/gensin-impact/images/1/16/Talent_Soumon_Swordsmanship.png" style="width:50px" /></td>
  <td>Souman Swordsmanship</td>
  <td>1st Ascension Passive</td>
</tr><tr>
  <td colspan="3">If Chihayaburu comes into contact with Hydro/Pyro/Cryo/Electro when cast, Chihayaburu will absorb that element and if Plunging Attack: Midare Ranzan is used before the effect expires, it will deal an additional 200% ATK of the absorbed elemental type as DMG. This will be considered Plunging Attack DMG.<br />Elemental Absorption may only occur once per use of Chihayaburu.</td>
</tr><tr>
  <td><img src="https://static.wikia.nocookie.net/gensin-impact/images/e/e4/Talent_Poetics_of_Fuubutsu.png" style="width:50px" /></td>
  <td>Poetics of Fuunbutsu</td>
  <td>4th Ascension Passive</td>
</tr><tr>
  <td colspan="3">Upon triggering a Swirl reaction, Kaedehara Kazuha will grant all party members a 0.04% Elemental DMG Bonus to the element absorbed by Swirl for every point of Elemental Mastery he has for 8s. Bonuses for different elements obtained through this method can co-exist.</td>
</tr><tr>
  <td><img src="https://static.wikia.nocookie.net/gensin-impact/images/b/b1/Talent_Cloud_Strider.png" style="width:50px" /></td>
  <td>Cloud Strider</td>
  <td>Utility Passive</td>
</tr><tr>
  <td colspan="3">Decreases sprinting Stamina consumption for your own party members by 20%.<br />Not stackable with Passive Talents that provide the exact same effects.</td>
</tr></tbody></table>
</div>

<!-- CONSTELLATION -->
<div class="tab-pane fade in" style="height:18em;overflow:auto;" id="constellation">
<h3 class="my-0 mb-1">Constellation</h3>
<table class="table table-striped table-sm mb-0"><thead><tr>
<th width="15%">Icon</th><th width="30%">Name</th><th width="50%">Effect</th></tr></thead>
<tbody><tr>
  <td><img src="https://static.wikia.nocookie.net/gensin-impact/images/6/6b/Constellation_Scarlet_Hills.png" style="width:50px" /></td>
  <td>Scarlet Hills</td>
  <td>Decreases Chihayaburu's CD by 10%.<br />Using Kazuha Slash resets the CD of Chihayaburu.</td>
</tr><tr>
  <td><img src="https://static.wikia.nocookie.net/gensin-impact/images/f/f2/Constellation_Yamaarashi_Tailwind.png" style="width:50px" /></td>
  <td>Yamaarashi Tailwind</td>
  <td>The Autumn Whirlwind field created by Kazuha Slash has the following effects:
  <ul class="pl-4 mb-0">
    <li>Increases Kaedehara Kazuha's own Elemental Mastery by 200.</li>
    <li>Increases the Elemental Mastery of characters within the field by 200.</li>
  </ul>
  The Elemental Mastery-increasing effects of this Constellation do not stack.</td>
</tr><tr>
  <td><img src="https://static.wikia.nocookie.net/gensin-impact/images/c/c3/Constellation_Maple_Monogatari.png" style="width:50px" /></td>
  <td>Maple Monogatari</td>
  <td>Increases the Level of Chihayaburu by 3.<br />Maximum upgrade level is 15.</td>
</tr><tr>
  <td><img src="https://static.wikia.nocookie.net/gensin-impact/images/0/07/Constellation_Oozora_Genpou.png" style="width:50px" /></td>
  <td>Oozora Genpou</td>
  <td>When Kaedehara Kazuha's Energy is lower than 45, he obtains the following effects:
  <ul class="pl-4 mb-0">
    <li>Pressing or Holding Chihayaburu regenerates 3 or 4 Energy for Kaedehara Kazuha, respectively.</li>
    <li>When gliding, Kaedehara Kazuha regenerates 2 Energy per second.</li>
  </ul></td>
</tr><tr>
  <td><img src="https://static.wikia.nocookie.net/gensin-impact/images/f/f7/Constellation_Wisdom_of_Bansei.png" style="width:50px" /></td>
  <td>Wisdom of Bansei</td>
  <td>Increases the Level of Kazuha Slash by 3.<br />Maximum upgrade level is 15.</td>
</tr><tr>
  <td><img src="https://static.wikia.nocookie.net/gensin-impact/images/8/87/Constellation_Crimson_Momiji.png" style="width:50px" /></td>
  <td>Crimson Momiji</td>
  <td>After using Chihayaburu or Kazuha Slash, Kaedehara Kazuha gains an Anemo Infusion for 5s. Additionally, each point of Elemental Mastery will increase the DMG dealt by Kaedehara Kazuha's Normal, Charged, and Plunging Attack by 0.2%.</td>
</tr></tbody></table>
</div>

<!-- STORY -->
<div class="tab-pane fade in" style="height:18em;overflow:auto;" id="story">
<h3 class="my-0 mb-1">Story 1</h3>
  <p>The Crux, an armed fleet from Liyue, spends much of the year on the high seas, and its sailors are quite used to the vagaries of life in other nations. So they were more curious than surprised when an outlander began serving as a sailor on their flagship, the Alcor.<br />
  The sailor in question was picked up when the Alcor docked at the Inazuman port of Ritou.<br />
  Beidou had made friends with this young man, and when he came on board, she told her crew, "This guy's gonna be staying with us for a while. Take care of him, now."<br />
  The sailors trusted Beidou's judgment and admired the newcomer for his martial prowess, not to mention his ability to predict the weather, so they were happy to overlook his reticence to discuss his past, and welcomed him aboard.<br />
  Still, their curiosity did not abate, and they would often find all sorts of excuses to try and ply him for information about his experiences.<br />
  "I've heard that they make some sweet blades there in Inazuma and that the bigger the fish you are, the swankier the sword. So, uh... how's yours measure up?"<br />
  "..."<br />
  Kazuha would remain silent in the face of all such queries.<br />
  Over time, after countless attempts to garner a response proved futile, the sailors would simply give up asking.<br />
  Eventually, it was an off-the-cuff remark from Chief Mate, Juza, just a few days later that finally managed to elicit a reply.<br />
  "Hey, Inazuma boy. What are the lads supposed to call you if they don't even know your name?"<br />
  The young sailor wiped the sweat from his brow with his callused hands.<br />
  "My name is Kaedehara Kazuha, a wandering samurai. I am in your debt for taking me in, so just call me 'Kazuha.'"</p>
<h3 class="my-0 my-1">Trivia</h3>
  <ul class="pl-4 mb-2">
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
  </ul>
<h3 class="my-0 mb-1">Voicelines</h3>
<table class="table table-striped table-sm mb-0"><thead><tr>
<th width="25%">Title</th><th width="70%">Transcription</th></tr></thead>
<tbody><tr>
  <td>Hello</td>
  <td>"Come driving rain or winds that churn, I shall return, by blade alone, armed, if barefoot, to my home..." I am Kaedehara Kazuha, a wanderer who roams the land. Since we are both travelers, let us journey together for a time.</td>
</tr><tr>
  <td>Chat: Nature</td>
  <td>This scenery is wonderful... Surely enough to convince anyone to become a wanderer.</td>
</tr><tr>
  <td>Chat: Playing a Tune</td>
  <td>There are leaves around — and I know just the tune to accompany them, if you wish to hear it.</td>
</tr></tablebody></table>
</div>

<!-- RELATIONSHIPS -->
<div class="tab-pane fade in" style="height:18em;overflow:auto;" id="relationships">
<h3 class="my-0 mb-1">Relationships</h3>
<div class="row mb-0 no-gutters"><div class="col-4 col-md-2 mb-3">
  <img src="https://static.wikia.nocookie.net/gensin-impact/images/e/e1/Beidou_Icon.png"
class="img-thumbnail" style="width:10em" /></div><div class="col-8 col-md-10 px-0 pl-3 mb-3">
  <h4 class="m-0"><div class="text-info float-right"><i class="fa fa-heart" /><i class="fa fa-heart" /><i class="fa fa-heart" /><i class="far fa-heart" /><i class="far fa-heart" /><i class="far fa-heart" /></div>
  Beidou</h4>
<hr class="my-1">
  <p>Lorem ipsum dolor sit amet</p>
</div>
<!-- copy+paste the section below to add more relationships -->
<div class="col-4 col-md-2 mb-3">
  <img src="https://static.wikia.nocookie.net/gensin-impact/images/e/e0/Ningguang_Icon.png"
class="img-thumbnail" style="width:10em" /></div><div class="col-8 col-md-10 px-0 pl-3 mb-3">
  <h4 class="m-0"><div class="text-info float-right"><i class="fa fa-heart" /><i class="fa fa-heart" /><i class="fa fa-heart" /><i class="far fa-heart" /><i class="far fa-heart" /><i class="far fa-heart" /></div>
  Ningguang</h4>
<hr class="my-1">
  <p>Lorem ipsum dolor sit amet</p>
</div>
<!-- end copy+paste section; last relationship in list must not have 'mb-3' -->
<div class="col-4 col-md-2">
  <img src="https://static.wikia.nocookie.net/gensin-impact/images/f/f8/Wanderer_Icon.png"
class="img-thumbnail" style="width:10em" /></div><div class="col-8 col-md-10 px-0 pl-3 mb-3">
  <h4 class="m-0"><div class="text-info float-right"><i class="fa fa-heart" /><i class="fa fa-heart" /><i class="fa fa-heart" /><i class="far fa-heart" /><i class="far fa-heart" /><i class="far fa-heart" /></div>
  Wanderer</h4>
<hr class="my-1">
  <p>Lorem ipsum dolor sit amet</p>
</div></div>
</div></div>
</div></div>
</div></div>