Added previews for gallery, switched images around & changed text
This commit is contained in:
parent
eea4ba3f3d
commit
26e19298a5
256
Jax.html
256
Jax.html
|
|
@ -37,29 +37,47 @@
|
||||||
<!-- /// main content///-->
|
<!-- /// main content///-->
|
||||||
<div class="row">
|
<div class="row">
|
||||||
|
|
||||||
<!-- /// Character image /// -->
|
|
||||||
<div class="col-sm-5">
|
<div class="col-sm-5">
|
||||||
|
|
||||||
<!--image-->
|
<!-- Main card -->
|
||||||
<div class="card bg-faded character-image character-image-jax image-credit-icon">
|
<div
|
||||||
<a href="./img/jax.png" class="character-image character-image-jax lightbox" data-caption="Art by @river_stubs@instagram.com" data-group="gallery">
|
class="card bg-dark text-white character-image character-image-jax image-credit-icon position-relative">
|
||||||
|
|
||||||
<!--Image credit-->
|
<a href="./img/jax.png" class="character-image character-image-jax lightbox"
|
||||||
<span class="image-credit">
|
data-caption="Art by @river_stubs@instagram.com" data-group="gallery">
|
||||||
<i class="fa-solid fa-image"></i>
|
<span class="image-credit">
|
||||||
</span>
|
<i class="fa-solid fa-image"></i>
|
||||||
</a>
|
</span>
|
||||||
|
</a>
|
||||||
|
<!-- Mini squares with background images -->
|
||||||
|
<div class="d-flex w-100 p-2">
|
||||||
|
<a href="./img/jax_yume.png" class="lightbox flex-fill mx-1 rounded bg-secondary mini-bg-box"
|
||||||
|
style="background-image: url('./img/jax_yume_thumb.png'); "
|
||||||
|
data-caption="Art by vgen.co/yumeshirokuro" data-group="gallery"></a>
|
||||||
|
|
||||||
<!--top-right decor-->
|
<a href="./img/jax_bulge.png" class="lightbox flex-fill mx-1 rounded bg-secondary mini-bg-box"
|
||||||
|
style="background-image: url('./img/jax_bulge_thumb.png'); "
|
||||||
|
data-caption="Art by linktr.ee/lontongs_" data-group="gallery"></a>
|
||||||
|
|
||||||
|
<a href="./img/jax_daki.jpg" class="lightbox flex-fill mx-1 rounded bg-secondary mini-bg-box"
|
||||||
|
style="background-image: url('./img/jax_daki_thumb.png'); "
|
||||||
|
data-caption="Art by Ori Ottero (orifans.com)" data-group="gallery"></a>
|
||||||
|
</div>
|
||||||
|
<!-- Top-right and bottom-left decor -->
|
||||||
<div class="p-2 decor-tr"></div>
|
<div class="p-2 decor-tr"></div>
|
||||||
|
|
||||||
<!--Bottom-left decor-->
|
|
||||||
<div class="p-2 decor-bl"></div>
|
<div class="p-2 decor-bl"></div>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!-- /// End Character image /// -->
|
<!-- /// End Character image /// -->
|
||||||
|
|
||||||
<!-- /// Info section /// -->
|
<!-- /// Info section /// -->
|
||||||
|
|
@ -76,7 +94,7 @@
|
||||||
<!--basic info-->
|
<!--basic info-->
|
||||||
<div
|
<div
|
||||||
class="d-flex flex-wrap align-items-center text-white py-1 px-2 mb-2 character-info character-info-jax-light">
|
class="d-flex flex-wrap align-items-center text-white py-1 px-2 mb-2 character-info character-info-jax-light">
|
||||||
Nonbinary (they/them) <!--Gender Identity and Pronouns-->
|
Nonbinary (they/them) | Pansexual <!--Gender Identity, Pronouns and Sexuality-->
|
||||||
<i class="ml-auto fa-solid fa-comment"></i>
|
<i class="ml-auto fa-solid fa-comment"></i>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -117,11 +135,10 @@
|
||||||
<p>✨slut✨</p>
|
<p>✨slut✨</p>
|
||||||
<p>
|
<p>
|
||||||
Jax is my pansexual, nonbinary Sea Elf OC. They started out as my PC in our current
|
Jax is my pansexual, nonbinary Sea Elf OC. They started out as my PC in our current
|
||||||
Dungeons and Dragons campaign and turned into my first actual OC pretty quickly.
|
Dungeons and Dragons campaign and turned into my first actual OC and now <a
|
||||||
They love their Grandpa more than anyone in the world, they're afraid of heights and
|
href="https://link.jaxoff.tv" target="_blank">VTube Avatar</a> pretty quickly.
|
||||||
a huge slut lol.
|
There are two version of Jax. Pirate and Femboy. This page is about Femboy Jax.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- /// End About /// -->
|
<!-- /// End About /// -->
|
||||||
|
|
@ -162,75 +179,80 @@
|
||||||
|
|
||||||
<!--pic 3-->
|
<!--pic 3-->
|
||||||
<div class=" col-6">
|
<div class=" col-6">
|
||||||
<a href="./img/jax_aes3.jpg" class="lightbox" data-group="aesthetic">
|
<a href="./img/jax_aes3.jpg" class="lightbox" data-group="aesthetic">
|
||||||
<div class="text-white m-1 aesthetic-img"
|
<div class="text-white m-1 aesthetic-img"
|
||||||
style="background-image:url(./img/jax_aes3.jpg);"></div>
|
style="background-image:url(./img/jax_aes3.jpg);"></div>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!--pic 4-->
|
|
||||||
<div class="col-6">
|
|
||||||
<a href="./img/jax_aes4.jpg" class="lightbox" data-group="aesthetic">
|
|
||||||
<div class="text-white m-1 aesthetic-img"
|
|
||||||
style="background-image:url(./img/jax_aes4.jpg);">
|
|
||||||
</div>
|
</div>
|
||||||
</a>
|
|
||||||
|
|
||||||
|
|
||||||
|
<!--pic 4-->
|
||||||
|
<div class="col-6">
|
||||||
|
<a href="./img/jax_aes4.jpg" class="lightbox" data-group="aesthetic">
|
||||||
|
<div class="text-white m-1 aesthetic-img"
|
||||||
|
style="background-image:url(./img/jax_aes4.jpg);">
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<hr class="my-2" style="border-width:3px;border-radius:5px;">
|
||||||
|
|
||||||
|
<p class="text-center"
|
||||||
|
style="font-weight: bold;font-style: italic; font-size: 2em;">"I was not
|
||||||
|
made to be subtle."</p>
|
||||||
|
|
||||||
|
<hr class="my-2" style="border-width:3px;border-radius:5px;">
|
||||||
|
|
||||||
|
<a href="https://www.youtube.com/watch?v=pa14VNsdSYM" target="_blank"
|
||||||
|
class="link-song">
|
||||||
|
<i class="fa-solid fa-play"></i>
|
||||||
|
Only Girl (In The World) - Rihanna
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<br class="mb-2">
|
||||||
|
|
||||||
|
<a href="https://www.youtube.com/watch?v=n3M4GrEEQTI" target="_blank"
|
||||||
|
class="link-song">
|
||||||
|
<i class="fa-solid fa-play"></i>
|
||||||
|
Bubblegum Bitch - MARINA
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<br class="mb-2">
|
||||||
|
|
||||||
|
<a href="https://www.youtube.com/watch?v=6p-lDYPR2P8" target="_blank"
|
||||||
|
class="link-song">
|
||||||
|
<i class="fa-solid fa-play"></i>
|
||||||
|
Material Girl - Madonna
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<br class="mb-2">
|
||||||
|
|
||||||
|
<hr class="my-2" style="border-width:3px;border-radius:5px;">
|
||||||
|
|
||||||
|
<div style="text-align:center;font-size:2em;letter-spacing:3px">
|
||||||
|
<i class="fa-regular fa-heart"></i>
|
||||||
|
<i class="fa-regular fa-star"></i>
|
||||||
|
<i class="fa-solid fa-music"></i>
|
||||||
|
<i class="fa-solid fa-record-vinyl"></i>
|
||||||
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<hr class="my-2" style="border-width:3px;border-radius:5px;">
|
|
||||||
|
|
||||||
<p class="text-center" style="font-weight: bold;font-style: italic; font-size: 2em;">"I was not made to be subtle."</p>
|
|
||||||
|
|
||||||
<hr class="my-2" style="border-width:3px;border-radius:5px;">
|
|
||||||
|
|
||||||
<a href="https://www.youtube.com/watch?v=pa14VNsdSYM" target="_blank" class="link-song">
|
|
||||||
<i class="fa-solid fa-play"></i>
|
|
||||||
Only Girl (In The World) - Rihanna
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<br class="mb-2">
|
|
||||||
|
|
||||||
<a href="https://www.youtube.com/watch?v=n3M4GrEEQTI" target="_blank" class="link-song">
|
|
||||||
<i class="fa-solid fa-play"></i>
|
|
||||||
Bubblegum Bitch - MARINA
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<br class="mb-2">
|
|
||||||
|
|
||||||
<a href="https://www.youtube.com/watch?v=6p-lDYPR2P8" target="_blank" class="link-song">
|
|
||||||
<i class="fa-solid fa-play"></i>
|
|
||||||
Material Girl - Madonna
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<br class="mb-2">
|
|
||||||
|
|
||||||
<hr class="my-2" style="border-width:3px;border-radius:5px;">
|
|
||||||
|
|
||||||
<div style="text-align:center;font-size:2em;letter-spacing:3px">
|
|
||||||
<i class="fa-regular fa-heart"></i>
|
|
||||||
<i class="fa-regular fa-star"></i>
|
|
||||||
<i class="fa-solid fa-music"></i>
|
|
||||||
<i class="fa-solid fa-record-vinyl"></i>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<!-- /// End Aesthetic /// -->
|
<!-- /// End Aesthetic /// -->
|
||||||
|
|
||||||
<!-- /// Trivia /// -->
|
<!-- /// Trivia /// -->
|
||||||
<div class="tab-pane fade" id="triv" role="tabpanel" aria-labelledby="profile-tab">
|
<div class="tab-pane fade" id="triv" role="tabpanel" aria-labelledby="profile-tab">
|
||||||
<div class="card-body p-3">
|
<div class="card-body p-3">
|
||||||
|
|
||||||
<div class="text-white py-1 px-2 my-2 tab-title">
|
<div class="text-white py-1 px-2 my-2 tab-title">
|
||||||
<i class="fa-solid fa-bookmark"></i> Trivia
|
<i class="fa-solid fa-bookmark"></i> Trivia
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
<i class="fa-regular fa-circle"></i>
|
<i class="fa-regular fa-circle"></i>
|
||||||
|
|
@ -244,38 +266,41 @@
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
<i class="fa-regular fa-circle"></i>
|
<i class="fa-regular fa-circle"></i>
|
||||||
Being the person who gave Jax their first guitar, Jax absolutely adores their Grandpa.
|
They own a bar in which they work as a bartender.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- /// End Trivia /// -->
|
|
||||||
|
|
||||||
<!-- /// Colours /// -->
|
|
||||||
<div class="popup" id="popup"> Copied color: <span id="popupText"></span> </div>
|
|
||||||
<div class="tab-pane fade" id="colours" role="tabpanel" aria-labelledby="contact-tab">
|
|
||||||
<div class="card-body p-3">
|
|
||||||
|
|
||||||
<div class="text-white py-1 px-2 mb-2 tab-title">
|
|
||||||
<i class="fa-regular fa-circle"></i> Colours
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- /// End Trivia /// -->
|
||||||
|
|
||||||
|
<!-- /// Colours /// -->
|
||||||
|
<div class="popup" id="popup"> Copied color: <span id="popupText"></span> </div>
|
||||||
|
<div class="tab-pane fade" id="colours" role="tabpanel" aria-labelledby="contact-tab">
|
||||||
|
<div class="card-body p-3">
|
||||||
|
|
||||||
|
<div class="text-white py-1 px-2 mb-2 tab-title">
|
||||||
|
<i class="fa-regular fa-circle"></i> Colours
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<div class="row no-gutters d-flex flex-wrap align-items-center m-2">
|
<div class="row no-gutters d-flex flex-wrap align-items-center m-2">
|
||||||
|
|
||||||
<!--Colour 1-->
|
<!--Colour 1-->
|
||||||
<div class="col m-1">
|
<div class="col m-1">
|
||||||
<div class="color light" style="background-color: #A8C5DB;">Skin<br>#A8C5DB</div>
|
<div class="color light" style="background-color: #A8C5DB;">Skin<br>#A8C5DB
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!--Colour 2-->
|
<!--Colour 2-->
|
||||||
<div class="col m-1">
|
<div class="col m-1">
|
||||||
<div class="color light" style="background-color: #F5A9B8;">Dyed Hair<br>#F5A9B8</div>
|
<div class="color light" style="background-color: #F5A9B8;">Dyed
|
||||||
|
Hair<br>#F5A9B8</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!--Colour 3-->
|
<!--Colour 3-->
|
||||||
<div class="col m-1">
|
<div class="col m-1">
|
||||||
<div class="color" style="background-color: #12354B;">Natural Hair<br>#12354B</div>
|
<div class="color" style="background-color: #12354B;">Natural
|
||||||
|
Hair<br>#12354B</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -288,7 +313,8 @@
|
||||||
|
|
||||||
<!--Colour 5-->
|
<!--Colour 5-->
|
||||||
<div class="col m-1">
|
<div class="col m-1">
|
||||||
<div class="color" style="background-color: #12404B;">Freckles<br>#12404B</div>
|
<div class="color" style="background-color: #12404B;">Freckles<br>#12404B
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!--Colour 6
|
<!--Colour 6
|
||||||
|
|
@ -303,7 +329,8 @@
|
||||||
<div class="col m-1 color-download" style="background-color: #42769E;">
|
<div class="col m-1 color-download" style="background-color: #42769E;">
|
||||||
<a href="./assets/jax_swatch.ase" class="text-decoration-none text-reset">
|
<a href="./assets/jax_swatch.ase" class="text-decoration-none text-reset">
|
||||||
<b>
|
<b>
|
||||||
<i class="fa-solid fa-link"></i> <i class="fa-solid fa-palette"></i> <br/>
|
<i class="fa-solid fa-link"></i> <i class="fa-solid fa-palette"></i>
|
||||||
|
<br />
|
||||||
Download Colour Palette (.ase)
|
Download Colour Palette (.ase)
|
||||||
</b>
|
</b>
|
||||||
</a>
|
</a>
|
||||||
|
|
@ -312,26 +339,27 @@
|
||||||
<div class="col m-1 color-download" style="background-color: #42769E;">
|
<div class="col m-1 color-download" style="background-color: #42769E;">
|
||||||
<a href="./assets/jax_swatch.aco" class="text-decoration-none text-reset">
|
<a href="./assets/jax_swatch.aco" class="text-decoration-none text-reset">
|
||||||
<b>
|
<b>
|
||||||
<i class="fa-solid fa-link"></i> <i class="fa-solid fa-palette"></i> <br/>
|
<i class="fa-solid fa-link"></i> <i class="fa-solid fa-palette"></i>
|
||||||
|
<br />
|
||||||
Download Colour Palette (.aco)
|
Download Colour Palette (.aco)
|
||||||
</b>
|
</b>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
<!-- /// End Links /// -->
|
<!-- /// End Links /// -->
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
<!-- /// End Info section /// -->
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<!-- /// End Info section /// -->
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<!-- /// end main content///-->
|
<!-- /// end main content///-->
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -388,18 +416,10 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!--Images for Gallery-->
|
<!--Images for Gallery-->
|
||||||
<a href="./img/jax_ori.png" class="lightbox img-invisible" data-caption="Art by Ori Ottero (orifans.com)"
|
<a href="./img/jax_chibi1.png" class="lightbox img-invisible" data-caption="Art by vgen.co/yumeshirokuro" data-group="gallery"></a>
|
||||||
data-group="gallery"></a>
|
<a href="./img/jax_chibi2.png" class="lightbox img-invisible" data-caption="Art by vgen.co/yumeshirokuro" data-group="gallery"></a>
|
||||||
<a href="./img/jax_yume.png" class="lightbox img-invisible" data-caption="Art by @yumeshirokuro.bsky.social"
|
<a href="./img/jax_plush.png" class="lightbox img-invisible" data-caption="Art by Ori Ottero (orifans.com)" data-group="gallery"></a>
|
||||||
data-group="gallery"></a>
|
<a href="./img/jax_yan.png" class="lightbox img-invisible" data-caption="Art by @yanorion@instagram.com" data-group="gallery"></a>
|
||||||
<a href="./img/jax_skhema.png" class="lightbox img-invisible" data-caption="Art by @_skhema@instagram.com"
|
|
||||||
data-group="gallery"></a>
|
|
||||||
<a href="./img/jax_plush.png" class="lightbox img-invisible" data-caption="Art by Ori Ottero (orifans.com)"
|
|
||||||
data-group="gallery"></a>
|
|
||||||
<a href="./img/jax_chibi1.png" class="lightbox img-invisible" data-caption="Art by @yumeshirokuro.bsky.social"
|
|
||||||
data-group="gallery"></a>
|
|
||||||
<a href="./img/jax_chibi2.png" class="lightbox img-invisible" data-caption="Art by @yumeshirokuro.bsky.social"
|
|
||||||
data-group="gallery"></a>
|
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
const colors = document.querySelectorAll(".color");
|
const colors = document.querySelectorAll(".color");
|
||||||
|
|
@ -432,14 +452,12 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"
|
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"
|
||||||
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
|
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous">
|
||||||
crossorigin="anonymous">
|
</script>
|
||||||
</script>
|
|
||||||
|
|
||||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"
|
||||||
integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct"
|
integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous">
|
||||||
crossorigin="anonymous">
|
</script>
|
||||||
</script>
|
|
||||||
|
|
||||||
<script src="./js/parvus.js"></script>
|
<script src="./js/parvus.js"></script>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -160,7 +160,7 @@ small {
|
||||||
width: 60px;
|
width: 60px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: -20px;
|
left: -20px;
|
||||||
bottom: 30px;
|
bottom: 120px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.image-credit {
|
.image-credit {
|
||||||
|
|
@ -286,3 +286,10 @@ small {
|
||||||
.test11 {
|
.test11 {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.mini-bg-box {
|
||||||
|
height: 5em;
|
||||||
|
background-size: cover; /* Ensures the image covers the whole box */
|
||||||
|
background-position: center; /* Keeps the image centered */
|
||||||
|
background-repeat: no-repeat; /* Prevents tiling */
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 247 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 107 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 307 KiB |
BIN
img/jax_ori.png
BIN
img/jax_ori.png
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 206 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 888 KiB |
Loading…
Reference in New Issue