Genshin Character Splash (Minimal)

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

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: 130px;">
<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(0,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="#tab3">
<span style="text-shadow: 0px 0px 3px rgb(0,0,255);">◈</span> Story</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">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="#tab3">Story</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(0,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="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(0,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;">
<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>
<!-- 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>