Genshin Character Splash (Expanded)

<!--------------------------------------------------------------------------------

SPLASH profile by JUNI

This profile is based off the character splash pages on the MIHOYO website and
I do not claim the design as something of my original creation. That being
said, it is offered for free and should not be resold/redistributed for money.
You are free to edit it!

Please edit the code with WYSIWYG turned off and Code Editor turned on.
I personally recommend editing the code in a code editor like Visual Studio Code
OR using the very handy live-preview website:
https://th.circlejourney.net/
You may alter/relocate/restyle coding credit, but please do not remove it.

-------------------------------------------------------------------------------->

<div class="container px-0 py-3" style="max-width: 1200px; background-color: black; border-radius: 10px;">
<!--------------------------------------------------------------------------------

FOR BACKGROUND IMAGE
It is set to be left-aligned, non-repeating. You'll want something at least 650 x 710 px.
You can alter the positioning if you'd like by changing the "background-position" to "center".

GENSHIN COUNTRIES
Mondstadt, Daytime https://webstatic.hoyoverse.com/upload/uploadstatic/contentweb/20200211/2020021114281584004.jpg
Mondstadt, Evening https://webstatic.hoyoverse.com/upload/uploadstatic/contentweb/20200211/2020021114281985438.jpg
Liyue, Daytime https://webstatic.hoyoverse.com/upload/uploadstatic/contentweb/20200526/2020052612332536813.jpg
Liyue, Evening https://webstatic.hoyoverse.com/upload/uploadstatic/contentweb/20200526/2020052612332812636.jpg
Inazuma, Daytime https://webstatic.hoyoverse.com/upload/uploadstatic/contentweb/20210715/2021071516521972191.jpg
Inazuma, Evening https://webstatic.hoyoverse.com/upload/uploadstatic/contentweb/20210715/2021071516524062780.jpg
Sumeru, Daytime https://webstatic.hoyoverse.com/upload/contentweb/2022/08/15/04d542b08cdee91e5dabfa0e85b8995e_4692024198088601985.jpg
Sumeru, Evening https://webstatic.hoyoverse.com/upload/contentweb/2022/08/15/ab72edd8acc105904aa50da90e4e788e_3591306224895288914.jpg
Sumeru Desert, Daytime https://webstatic.hoyoverse.com/upload/contentweb/2022/08/15/f5ab150b05bbe5224d15fb4a6c0150da_1918724644361320115.jpg
Sumeru Desert, Evening https://webstatic.hoyoverse.com/upload/contentweb/2022/08/15/8d63c3dbf6f0cdb55478a18fecf2a196_4900903116299626729.jpg
Fontaine, Daytime https://webstatic.hoyoverse.com/upload/op-public/2023/08/10/34ec75c9ed70f793cdd698ad1a4764e5_6372539215282982604.jpg
Fontaine, Evening https://webstatic.hoyoverse.com/upload/op-public/2023/08/10/3ce8f43e9de08e1988aafc00fdff2410_3910309663611760914.jpg

-------------------------------------------------------------------------------->
<div class="container" style="max-width: 1200px; background-image: url('https://uploadstatic-sea.mihoyo.com/contentweb/20200211/2020021114281584004.jpg'); background-repeat: no-repeat; background-position: left; border-radius: 10px; overflow: hidden;">

<!-- Decorative Shapes -->
<div class="d-lg-flex d-none">
<img style="position: absolute; top: 0px; left: -15px;" src="https://f2.toyhou.se/file/f2-toyhou-se/images/37816583_jr7vq8m46u5fQC0.png">
<img style="position: absolute; top: 0px; left: 31px; opacity: .3" src="https://f2.toyhou.se/file/f2-toyhou-se/images/37816555_3ZMfJJO8CGgiHAF.png">
</div>
<div class="row">
<!--------------------------------------------------------------------------------

DESKTOP NAVIGATION
There is another section further below 'MOBILE NAVIGATION' be sure to alter both sections.

-------------------------------------------------------------------------------->
<div class="col-lg-2 pl-0 d-lg-flex d-none" style="margin-top: 100px;">
<ul class="nav flex-column" style="font-family: georgia; font-size: 1.4rem; text-shadow: 0px 0px 3px rgba(0,0,0,1);">
<!-- nav link -->
<li class="nav-item mb-3" style="background: linear-gradient(90deg,rgba(0,0,0,.5),rgba(0,0,0,0));">
<a class="text-white nav-link" data-toggle="tab" href="#tab1">
<span style="text-shadow: 0px 0px 3px rgb(255,0,0);">◈</span> Brief</a>
</li>
<!-- nav link -->
<li class="nav-item mb-3" style="background: linear-gradient(90deg,rgba(0,0,0,.5),rgba(0,0,0,0));">
<a class="text-white nav-link" data-toggle="tab" href="#tab2">
<span style="text-shadow: 0px 0px 3px rgb(255, 136, 0);">◈</span> Details</a>
</li>
<!-- nav link -->
<li class="nav-item mb-3" style="background: linear-gradient(90deg,rgba(0,0,0,.5),rgba(0,0,0,0));">
<a class="text-white nav-link" data-toggle="tab" href="#tab3">
<span style="text-shadow: 0px 0px 3px rgb(229, 255, 0);">◈</span> Psyche</a>
</li>
<!-- nav link -->
<li class="nav-item mb-3" style="background: linear-gradient(90deg,rgba(0,0,0,.5),rgba(0,0,0,0));">
<a class="text-white nav-link" data-toggle="tab" href="#tab4">
<span style="text-shadow: 0px 0px 3px rgb(0, 255, 13);">◈</span> Story</a>
</li>
<!-- nav link -->
<li class="nav-item mb-3" style="background: linear-gradient(90deg,rgba(0,0,0,.5),rgba(0,0,0,0));">
<a class="text-white nav-link" data-toggle="tab" href="#tab5">
<span style="text-shadow: 0px 0px 3px rgb(0, 162, 255);">◈</span> Talents</a>
</li>
<!-- nav link -->
<li class="nav-item mb-3" style="background: linear-gradient(90deg,rgba(0,0,0,.5),rgba(0,0,0,0));">
<a class="text-white nav-link" data-toggle="tab" href="#tab6">
<span style="text-shadow: 0px 0px 3px rgb(174, 0, 255);">◈</span> Relations</a>
</li>
</ul>
</div>
<!---------------- Character Art ---------------->
<div class="col-lg-10" style="background-image: url('https://uploadstatic-sea.mihoyo.com/contentweb/20191009/2019100910335338023.png'); background-repeat: no-repeat; background-position: center top; background-size: cover;">
<!-- Content -->
<div class="row">
<div class="col-12 d-lg-flex d-none" style="margin-top: 80px;"></div>
<div class="col-lg-6 p-2 mx-md-4 mx-2">
<!--------------------------------------------------------------------------------

FOR BACKGROUND ELEMENT
It is a large white 400 x 420 px image.

GENSHIN ELEMENTS
Geo https://webstatic.hoyoverse.com/upload/uploadstatic/contentweb/20211203/2021120310392035265.png
Anemo https://webstatic.hoyoverse.com/upload/uploadstatic/contentweb/20210622/2021062217451457114.png
Electro https://webstatic.hoyoverse.com/upload/uploadstatic/contentweb/20210818/2021081811222419486.png
Pyro https://webstatic.hoyoverse.com/upload/uploadstatic/contentweb/20210730/2021073011363453824.png
Hydro https://webstatic.hoyoverse.com/upload/uploadstatic/contentweb/20210909/2021090910075066974.png
Cryo https://webstatic.hoyoverse.com/upload/uploadstatic/contentweb/20210715/2021071516535197325.png
Dendro https://webstatic.hoyoverse.com/upload/contentweb/2022/08/16/b131cb7706e97d71ecf3d4f2965b0ff1_5456263282195110475.png

-------------------------------------------------------------------------------->
<img style="position: absolute; top: -60px; left: -60px; opacity: .1; z-index: 0;" src="https://uploadstatic-sea.mihoyo.com/contentweb/20191009/2019100910341145525.png">
<hr style="position: relative; left: -24%; border: 2px solid; border-color: #E3BC8C; width: 50%;">
<!---------------- Character Name ---------------->
<h1 class="text-uppercase text-white" style="font-family: Georgia; font-size: 4.5rem; letter-spacing: 6px; text-shadow: 0px 0px 3px rgba(0,0,0,1);">Kaeya</h1>
<div class="col-12 d-lg-none d-flex" style="margin-top: 140px;"></div>
<div class="row no-gutters">
<div class="col-12 d-lg-flex d-none">
<div class="shadow-sm w-75" style="background-color: #E3BC8C; position: relative; z-index: 1; color: black;">
<div class="row m-0 p-0">
<div class="col-1 m-auto pr-4 text-center">
<p style="font-size: 1.8rem;">◈</p>
</div>
<div class="col m-auto">
<!---------------- Song Name ---------------->
<p class="text-uppercase" style="font-family: georgia; font-size: larger;">Dawn Winery Theme</p>
</div>
<div class="col-2 justify-content-end m-0 p-0">
<div class="d-flex">
<div class="card ml-auto" style="overflow: hidden; max-width: 50px; height: 50px; border-radius: 0px;">
<div style="display: inline-block; position:relative; top: -134px; left: -257px;">
<!--------------------------------------------------------------------------------

FOR YOUTUBE SONG
https://www.youtube.com/embed/YOUTUBE-ID

The YOUTUBE-ID is the string in the URL. Go to the video, click "Share" and check the link.
It should be in https://youtu.be/Q15xiaBTqqY format, in which case you take everything
after https://youtu.be/

-------------------------------------------------------------------------------->
<iframe width="560" height="315" src="https://www.youtube.com/embed/QWR3hosrk-I" frameborder="0" allowfullscreen=""></iframe>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-12 order-lg-1 order-2">
<!--------------------------------------------------------------------------------

MOBILE NAVIGATION
There is another section up above 'DESKTOP NAVIGATION' be sure to alter both sections.

-------------------------------------------------------------------------------->
<ul class="nav row m-0 d-lg-none d-flex justify-content-center text-center" style="font-family: georgia; font-size: 1rem; text-shadow: 0px 0px 3px rgba(0,0,0,1);">
<!-- nav link -->
<li class="col-4 p-0" style="background: rgba(0,0,0,.5);">
<a class="text-white nav-link" data-toggle="tab" href="#tab1">Brief</a>
</li>
<!-- nav link -->
<li class="col-4 p-0" style="background: rgba(0,0,0,.5);">
<a class="text-white nav-link" data-toggle="tab" href="#tab2">Details</a>
</li>
<!-- nav link -->
<li class="col-4 p-0" style="background: rgba(0,0,0,.5);">
<a class="text-white nav-link" data-toggle="tab" href="#tab3">Psyche</a>
</li>
<!-- nav link -->
<li class="col-4 p-0" style="background: rgba(0,0,0,.5);">
<a class="text-white nav-link" data-toggle="tab" href="#tab4">Story</a>
</li>
<!-- nav link -->
<li class="col-4 p-0" style="background: rgba(0,0,0,.5);">
<a class="text-white nav-link" data-toggle="tab" href="#tab5">Talents</a>
</li>
<!-- nav link -->
<li class="col-4 p-0" style="background: rgba(0,0,0,.5);">
<a class="text-white nav-link" data-toggle="tab" href="#tab6">Relations</a>
</li>
<!-- end nav links -->
</ul>
<div class="my-3" style="background-color: rgba(0,0,0,.5); text-shadow: 0px 0px 3px rgba(0,0,0,1); height: 180px;">
<div class="tab-content">
<!-- Info Box -->
<div class="tab-pane fade active show" id="tab1">
<div class="row text-white mx-0">
<div class="col-1 d-lg-flex d-none my-2 pr-4 text-center">
<p style="font-size: 1.8rem; text-shadow: 0px 0px 3px rgb(255,0,0);">◈</p>
</div>
<div class=" col my-3 mr-3 ml-lg-0 ml-3 pb-2 text-justify" style="height: 145px; overflow: auto;">
<p>In the Knights of Favonius, Kaeya is the most trusted aide for the Acting Grand Master Jean. You can always count on him to solve any intractable problems.</p>
<p>
Everyone in Mondstadt loves Kaeya, but no one knows what secrets this witty, charming knight has...</p>
</div>
</div>
</div>
<!-- Info Box -->
<div class="tab-pane fade" id="tab2">
<div class="row text-white mx-0">
<div class="col-1 d-lg-flex d-none my-2 pr-4 text-center">
<p style="font-size: 1.8rem; text-shadow: 0px 0px 3px rgb(255, 136, 0);">◈</p>
</div>
<div class=" col my-3 mr-3 ml-lg-0 ml-3 pb-2 text-justify" style="height: 145px; overflow: auto;">
<div class="d-flex justify-content-between">
<span class="text-uppercase">Name</span>
<span class="pull-right">Kaeya Alberich</span>
</div>
<hr class="m-1" style="border-color: rgba(255, 255, 255, .2);">
<div class="d-flex justify-content-between">
<span class="text-uppercase">Age</span>
<span class="pull-right">??</span>
</div>
<hr class="m-1" style="border-color: rgba(255, 255, 255, .2);">
<div class="d-flex justify-content-between">
<span class="text-uppercase">Gender</span>
<span class="pull-right">Male</span>
</div>
<hr class="m-1" style="border-color: rgba(255, 255, 255, .2);">
<div class="d-flex justify-content-between">
<span class="text-uppercase">Birthday</span>
<span class="pull-right">November 30th</span>
</div>
<hr class="m-1" style="border-color: rgba(255, 255, 255, .2);">
<div class="d-flex justify-content-between">
<span class="text-uppercase">Weapon</span>
<span class="pull-right">Blade</span>
</div>
<hr class="m-1" style="border-color: rgba(255, 255, 255, .2);">
<div class="d-flex justify-content-between">
<span class="text-uppercase">Vision</span>
<span class="pull-right">Cryo</span>
</div>
<hr class="m-1" style="border-color: rgba(255, 255, 255, .2);">
<div class="d-flex justify-content-between">
<span class="text-uppercase">Constellation</span>
<span class="pull-right">Pavo Ocellus</span>
</div>
<hr class="m-1" style="border-color: rgba(255, 255, 255, .2);">
<div class="d-flex justify-content-between">
<span class="text-uppercase">Nation</span>
<span class="pull-right">Mondstadt</span>
</div>
<hr class="m-1" style="border-color: rgba(255, 255, 255, .2);">
<div class="d-flex justify-content-between">
<span class="text-uppercase">Affiliation</span>
<span class="pull-right">Knights of Favonius</span>
</div>
<hr class="m-1" style="border-color: rgba(255, 255, 255, .2);">
<div class="d-flex justify-content-between">
<span class="text-uppercase">Occupation</span>
<span class="pull-right">Cavalry Captain</span>
</div>
<hr class="m-1" style="border-color: rgba(255, 255, 255, .2);">
<div class="d-flex justify-content-between">
<span class="text-uppercase">Special Dish</span>
<span class="pull-right">Fruity Skewers</span>
</div>
<hr class="m-1" style="border-color: rgba(255, 255, 255, .2);">
<div class="d-flex justify-content-between">
<span class="text-uppercase">Local Specialty</span>
<span class="pull-right">Calla Lily</span>
</div>
</div>
</div>
</div>
<!-- Info Box -->
<div class="tab-pane fade" id="tab3">
<div class="row text-white mx-0">
<div class="col-1 d-lg-flex d-none my-2 pr-4 text-center">
<p style="font-size: 1.8rem; text-shadow: 0px 0px 3px rgb(229, 255, 0);">◈</p>
</div>
<div class=" col my-3 mr-3 ml-lg-0 ml-3 pb-2 text-justify" style="height: 145px; overflow: auto;">
<p>Kaeya is an outwardly confident and charming individual with a flair for the dramatic. He is sometimes seen as overly laid-back and even lazy, but he takes his work seriously. He is surprisingly popular among the elderly of Mondstadt, even earning himself the title of "top candidate for grandson-in-law." His charisma and determination have earned him the admiration, respect, and favor of many people in Mondstadt—yet, his love for provoking others has also gained him the exasperation of those same people.</p>
</div>
</div>
</div>
<!-- Info Box -->
<div class="tab-pane fade" id="tab4">
<div class="row text-white mx-0">
<div class="col-1 d-lg-flex d-none my-2 pr-4 text-center">
<p style="font-size: 1.8rem;text-shadow: 0px 0px 3px rgb(0, 255, 13);">◈</p>
</div>
<div class=" col my-3 mr-3 ml-lg-0 ml-3 pb-2 text-justify" style="height: 145px; overflow: auto;">
<p>Kaeya Alberich is an adopted son to the Ragnvindr Family, the renowned wine tycoons.</p>

<p>It has been a long time since he last called Diluc Ragnvindr "brother".</p>

<p>Kaeya currently serves as the Cavalry Captain of the Knights of Favonius, and is trusted by Jean. Kaeya is often the one wrapping things up in every incident that occurs in Mondstadt's vicinity.</p>
</div>
</div>
</div>
<!-- Info Box -->
<div class="tab-pane fade" id="tab5">
<div class="row text-white mx-0">
<div class="col-1 d-lg-flex d-none my-2 pr-4 text-center">
<p style="font-size: 1.8rem; text-shadow: 0px 0px 3px rgb(0, 162, 255);">◈</p>
</div>
<div class=" col my-3 mr-3 ml-lg-0 ml-3 pb-2 text-justify" style="height: 145px; overflow: auto;">
<!-- skill -->
<div class="d-flex justify-content-between">
<span class="text-uppercase">Elemental Skill</span>
<span class="pull-right">Frostgnaw</span>
</div>
<p>Unleashes a frigid blast, dealing Cryo DMG to opponents in front of Kaeya.</p>
<hr class="m-1 p-1" style="border-color: rgba(255, 255, 255, .2);">
<!-- skill -->
<div class="d-flex justify-content-between">
<span class="text-uppercase">Elemental Burst</span>
<span class="pull-right">Glacial Waltz</span>
</div>
<p>Coalescing the frost in the air, Kaeya summons 3 icicles that revolve 4 times around him for 8 seconds.
These icicles will follow the character around and deal Cryo DMG to opponents in their path for so long as they persist.</p>
<hr class="m-1 p-1" style="border-color: rgba(255, 255, 255, .2);">
<!-- skill -->
<div class="d-flex justify-content-between">
<span class="text-uppercase">Alternate Sprint</span>
<span class="pull-right">--</span>
</div>
<p>--</p>
<hr class="m-1 p-1" style="border-color: rgba(255, 255, 255, .2);">
<!-- skill -->
<div class="d-flex justify-content-between">
<span class="text-uppercase">Utility Passive</span>
<span class="pull-right">Hidden Strength</span>
</div>
<p>Decreases sprinting Stamina consumption of your characters in the party by 20%.
Not stackable with Passive Talents that provide the exact same effects.</p>
</div>
</div>
</div>
<!-- Info Box -->
<div class="tab-pane fade" id="tab6">
<div class="row text-white mx-0">
<div class="col-1 d-lg-flex d-none my-2 pr-4 text-center">
<p style="font-size: 1.8rem; text-shadow: 0px 0px 3px rgb(174, 0, 255);">◈</p>
</div>
<div class="col my-3 mr-3 ml-lg-0 ml-3 pb-2 text-justify" style="height: 145px; overflow: auto;">
<!-- link -->
<div class="row">
<div class="col-lg-3 col-12 mr-lg-0 pr-lg-0 justify-content-center">
<div style="border-radius: 50%; border: 1px solid; border-color: rgba(255, 255, 255, .2); height: 100px; width: 100px; background-color: rgba(0, 0, 0, .5); background-image: url('https://uploadstatic-sea.mihoyo.com/contentweb/20200316/2020031619490965086.png'); background-position: center; background-repeat: no-repeat;"></div>
</div>
<div class="col">
<p class="mb-2 text-lg-left text-center text-uppercase">Kaeya Alberich</p>
<p>"Is the Abyss Order causing you trouble? If there's anything bothering you, you know you can talk to me."</p>
</div>
</div>
<hr class="mb-3" style="border-color: rgba(255, 255, 255, .2);">
<!-- link -->
<div class="row">
<div class="col-lg-3 col-12 mr-lg-0 pr-lg-0 justify-content-center">
<div style="border-radius: 50%; border: 1px solid; border-color: rgba(255, 255, 255, .2); height: 100px; width: 100px; background-color: rgba(0, 0, 0, .5); background-image: url('https://uploadstatic-sea.mihoyo.com/contentweb/20200316/2020031619504030315.png'); background-position: center; background-repeat: no-repeat;"></div>
</div>
<div class="col">
<p class="mb-2 text-lg-left text-center text-uppercase">Diluc Ragnvindr</p>
<p>"Diluc? He was cute as a young lad. But nowadays he just seems to be in a world of his own... Overall, not much fun to hang out with."</p>
</div>
</div>
<hr class="mb-3" style="border-color: rgba(255, 255, 255, .2);">
<!-- link -->
<div class="row">
<div class="col-lg-3 col-12 mr-lg-0 pr-lg-0 justify-content-center">
<div style="border-radius: 50%; border: 1px solid; border-color: rgba(255, 255, 255, .2); height: 100px; width: 100px; background-color: rgba(0, 0, 0, .5); background-image: url('https://uploadstatic-sea.mihoyo.com/contentweb/20210325/2021032514581037601.png'); background-position: center; background-repeat: no-repeat;"></div>
</div>
<div class="col">
<p class="mb-2 text-lg-left text-center text-uppercase">Rosaria</p>
<p>"Ahaha, you want to know about the secrets of Sister Rosaria? That... I cannot tell you. Though my impression of her is not bad — certainly better than a certain someone whose name I won't bother to mention. She's honest with herself. She casts off that which she has no time for and she doesn't feign motivation for affairs that do not interest her."</p>
</div>
</div>
</div>
</div>
</div>
<!-- End Info Boxes -->
</div>
</div>
</div>
<!-- Quote -->
<div class="col-12 text-white text-nowrap order-lg-2 order-1" style="font-family: georgia; font-size: 1.4rem; text-shadow: 0px 0px 3px rgba(0,0,0,1);">
<div class="mb-1 ml-3 pt-2 pl-4 text-left" style="background-image: url('https://f2.toyhou.se/file/f2-toyhou-se/images/37816737_IJINN8GWOI7c4EA.png'); background-repeat: no-repeat; background-position: top left; min-height: 50px;">
<p>A knight's duty</p>
</div>
<div class="mb-4 mr-3 pt-1 pr-4 text-right" style="background-image: url('https://f2.toyhou.se/file/f2-toyhou-se/images/37843183_tXbdbTa8i8lGdeL.png'); background-repeat: no-repeat; background-position: bottom right; min-height: 50px;">
<p>goes beyond the sword.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<p class="text-white" style="font-size: .6rem; position: absolute; right: 10px; bottom: 1px;"><a href="/12087247.-genshin-character-splash" style="color: rgb(255, 115, 0);"><span data-toggle="tooltip" data-placement="left" title="code by junijwi"><i class="fas fa-code"></i></span></a></p>
</div>