first commit
This commit is contained in:
commit
2d8ea880fb
17 changed files with 14947 additions and 0 deletions
BIN
assets/jax_swatch.ase
Normal file
BIN
assets/jax_swatch.ase
Normal file
Binary file not shown.
12142
css/bootstrap.css
vendored
Normal file
12142
css/bootstrap.css
vendored
Normal file
File diff suppressed because it is too large
Load diff
281
css/custom.css
Normal file
281
css/custom.css
Normal file
|
|
@ -0,0 +1,281 @@
|
|||
small {
|
||||
font-size: 0.5em;
|
||||
}
|
||||
|
||||
/* Parvus CSS */
|
||||
|
||||
:root {
|
||||
--parvus-background-color: #161618;
|
||||
--parvus-color: #f2f5f4;
|
||||
--parvus-caption-color: #f2f5f4;
|
||||
--parvus-btn-background-color: #F5A9B8;
|
||||
--parvus-btn-color: #ffffff;
|
||||
--parvus-btn-disabled-background-color: #5BCEFA;
|
||||
--parvus-btn-disabled-color: #161618;
|
||||
}
|
||||
|
||||
.parvus-trigger:has(img) .parvus-zoom__indicator {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/*Terminal CSS */
|
||||
|
||||
.rect {
|
||||
height: 1.3em;
|
||||
fill: white;
|
||||
}
|
||||
|
||||
.animation-blink {
|
||||
animation: cursor-blink 1.5s steps(2) infinite;
|
||||
-webkit-animation: cursor-blink 1.5s steps(2) infinite;
|
||||
}
|
||||
|
||||
@keyframes cursor-blink {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes cursor-blink {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.palette-swatch {
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
.terminal-card {
|
||||
transition: all 200ms ease-in;
|
||||
box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.5);
|
||||
background-color: #252430;
|
||||
border-color: #2f3347;
|
||||
}
|
||||
|
||||
.terminal-card:hover {
|
||||
transition: all 200ms ease-in;
|
||||
}
|
||||
|
||||
.terminal-card-jax:hover {
|
||||
border-color: #F5A9B8;
|
||||
}
|
||||
|
||||
.terminal-card-aidan:hover {
|
||||
border-color: #93abbe;
|
||||
}
|
||||
|
||||
.terminal-card-jax .terminal-title {
|
||||
font-weight: bold;
|
||||
color: #F5A9B8;
|
||||
}
|
||||
|
||||
.terminal-card-aidan .terminal-title {
|
||||
font-weight: bold;
|
||||
color: #93abbe;
|
||||
}
|
||||
|
||||
.terminal-toolbar {
|
||||
font-weight: bold;
|
||||
letter-spacing: 1px;
|
||||
background-color: #2f3347;
|
||||
border-color: #2f3347;
|
||||
transition: all 200ms ease-in;
|
||||
}
|
||||
|
||||
.terminal-card:hover .terminal-toolbar-jax {
|
||||
background-color: #F5A9B8;
|
||||
}
|
||||
|
||||
.terminal-card:hover .terminal-toolbar-aidan {
|
||||
background-color: #93abbe;
|
||||
}
|
||||
|
||||
.terminal-command {
|
||||
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.terminal-card:hover .terminal-command {
|
||||
transition: all 250ms ease-in;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.terminal-card:hover .rect-hover {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.terminal-img {
|
||||
margin-left:auto;
|
||||
margin-right:auto;
|
||||
}
|
||||
|
||||
.terminal-img-jax {
|
||||
max-width:200px;
|
||||
}
|
||||
|
||||
.terminal-img-aidan {
|
||||
max-width:286px
|
||||
}
|
||||
|
||||
/* OC Site Config */
|
||||
|
||||
.img-invisible {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.character-image {
|
||||
height: 500px;
|
||||
border-radius: 15px;
|
||||
border-width: 3px;
|
||||
background-size: contain;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.character-image-jax {
|
||||
background-image: url(../img/jax.png);
|
||||
}
|
||||
|
||||
.character-image-aidan {
|
||||
background-image: url(../img/aidan.png);
|
||||
}
|
||||
|
||||
.decor-tr {
|
||||
background-color: #5BCEFA;
|
||||
z-index: 10;
|
||||
border-radius: 15px;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
position: absolute;
|
||||
right: -20px;
|
||||
top: 30px;
|
||||
}
|
||||
|
||||
.decor-bl {
|
||||
background-color: #f5a9b8;
|
||||
z-index: 10;
|
||||
border-radius: 15px;
|
||||
height: 60px;
|
||||
width: 60px;
|
||||
position: absolute;
|
||||
left: -20px;
|
||||
bottom: 30px;
|
||||
}
|
||||
|
||||
.image-credit {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
left: 10px;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
.image-credit-icon {
|
||||
color: #42769E;
|
||||
font-size: 20px;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
.character-name {
|
||||
font-size: 2.5em;
|
||||
font-weight: bold;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.character-info {
|
||||
font-weight: bold;
|
||||
letter-spacing: 1px;
|
||||
border-radius: 15px;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.character-info-jax-light {
|
||||
background-color: #42769E;
|
||||
}
|
||||
|
||||
.character-info-jax-dark {
|
||||
background-color: #274A68
|
||||
}
|
||||
|
||||
.tab-title {
|
||||
background-color: #42769E;
|
||||
font-weight: bold;
|
||||
letter-spacing: 1px;
|
||||
border-radius: 15px;
|
||||
font-size: 1.25em;
|
||||
}
|
||||
|
||||
.aesthetic-img {
|
||||
border-radius: 15px;
|
||||
height: 125px;
|
||||
background-color: #274A68;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.link-song {
|
||||
color: #42769E;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
.tab-link {
|
||||
font-size: 1.25em;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
.tab-link-light {
|
||||
background-color: #42769E;
|
||||
}
|
||||
|
||||
.tab-link-dark {
|
||||
background-color: #274A68;
|
||||
}
|
||||
|
||||
.card-info {
|
||||
height: 500px;
|
||||
border-radius: 15px;
|
||||
border-width: 3px;
|
||||
}
|
||||
|
||||
.popup {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
padding: 20px;
|
||||
background-color: #040404;
|
||||
color: white;
|
||||
border-radius: 10px;
|
||||
border-color: #fff;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.palette {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.color, .color-download{
|
||||
border-radius: 15px;
|
||||
height: 100px;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.tab-pane {
|
||||
overflow-x: hidden; /* Hide horizontal scrollbar */
|
||||
}
|
||||
|
||||
.spoiler {
|
||||
opacity: 0;
|
||||
transition: all 100ms ease-in-out;
|
||||
}
|
||||
|
||||
.character-info:hover .spoiler {
|
||||
opacity: 1;
|
||||
}
|
||||
228
css/parvus.css
Normal file
228
css/parvus.css
Normal file
|
|
@ -0,0 +1,228 @@
|
|||
:root {
|
||||
--parvus-transition-duration: 300ms;
|
||||
--parvus-transition-timing-function: cubic-bezier(0.62, 0.16, 0.13, 1.01);
|
||||
--parvus-background-color: hsl(23deg 44% 96%);
|
||||
--parvus-color: hsl(228deg 24% 23%);
|
||||
--parvus-btn-background-color: hsl(228deg 24% 23%);
|
||||
--parvus-btn-color: hsl(0deg 0% 100%);
|
||||
--parvus-btn-hover-background-color: hsl(229deg 24% 33%);
|
||||
--parvus-btn-hover-color: hsl(0deg 0% 100%);
|
||||
--parvus-btn-disabled-background-color: hsla(229deg 24% 33% / 60%);
|
||||
--parvus-btn-disabled-color: hsl(0deg 0% 100%);
|
||||
--parvus-caption-background-color: transparent;
|
||||
--parvus-caption-color: hsl(228deg 24% 23%);
|
||||
--parvus-loading-error-background-color: hsl(0deg 0% 100%);
|
||||
--parvus-loading-error-color: hsl(228deg 24% 23%);
|
||||
--parvus-loader-background-color: hsl(23deg 40% 96%);
|
||||
--parvus-loader-color: hsl(228deg 24% 23%);
|
||||
}
|
||||
|
||||
body:has(.parvus[aria-hidden=false]) {
|
||||
touch-action: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Parvus trigger
|
||||
*
|
||||
*/
|
||||
.parvus-trigger:has(img) {
|
||||
display: block;
|
||||
position: relative;
|
||||
}
|
||||
.parvus-trigger:has(img) .parvus-zoom__indicator {
|
||||
align-items: center;
|
||||
background-color: var(--parvus-btn-background-color);
|
||||
color: var(--parvus-btn-color);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 0.5rem;
|
||||
position: absolute;
|
||||
inset-inline-end: 0.5rem;
|
||||
inset-block-start: 0.5rem;
|
||||
}
|
||||
.parvus-trigger:has(img) img {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/**
|
||||
* Parvus
|
||||
*
|
||||
*/
|
||||
.parvus {
|
||||
box-sizing: border-box;
|
||||
contain: strict;
|
||||
inset: 0;
|
||||
overflow: hidden;
|
||||
overscroll-behavior: contain;
|
||||
position: fixed;
|
||||
z-index: 1337;
|
||||
}
|
||||
.parvus *, .parvus *::before, .parvus *::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.parvus[aria-hidden=true] {
|
||||
display: none;
|
||||
}
|
||||
.parvus__overlay {
|
||||
background-color: var(--parvus-background-color);
|
||||
color: var(--parvus-color);
|
||||
inset: 0;
|
||||
position: absolute;
|
||||
}
|
||||
.parvus__slider {
|
||||
inset: 0;
|
||||
position: absolute;
|
||||
}
|
||||
.parvus__slider[aria-hidden=true] {
|
||||
display: none;
|
||||
}
|
||||
@media screen and (prefers-reduced-motion: no-preference) {
|
||||
.parvus__slider--animate:not(.parvus__slider--is-dragging) {
|
||||
transition: transform var(--parvus-transition-duration) var(--parvus-transition-timing-function);
|
||||
will-change: transform;
|
||||
}
|
||||
}
|
||||
.parvus__slider--is-draggable {
|
||||
cursor: grab;
|
||||
}
|
||||
.parvus__slider--is-dragging {
|
||||
cursor: grabbing;
|
||||
}
|
||||
.parvus__slide {
|
||||
block-size: 100%;
|
||||
display: grid;
|
||||
inline-size: 100%;
|
||||
padding-block: 3.75rem 1rem;
|
||||
padding-inline: 1rem;
|
||||
place-items: center;
|
||||
}
|
||||
.parvus__slide img {
|
||||
block-size: auto;
|
||||
display: block;
|
||||
inline-size: auto;
|
||||
margin-inline: auto;
|
||||
transform-origin: left top;
|
||||
}
|
||||
.parvus__content--error {
|
||||
background-color: var(--parvus-loading-error-background-color);
|
||||
color: var(--parvus-loading-error-color);
|
||||
padding-block: 0.5rem;
|
||||
padding-inline: 1rem;
|
||||
}
|
||||
.parvus__caption {
|
||||
background-color: var(--parvus-caption-background-color);
|
||||
color: var(--parvus-caption-color);
|
||||
padding-block-start: 0.5rem;
|
||||
text-align: start;
|
||||
}
|
||||
.parvus__loader {
|
||||
display: inline-block;
|
||||
block-size: 6.25rem;
|
||||
inset-inline-start: 50%;
|
||||
position: absolute;
|
||||
inset-block-start: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
inline-size: 6.25rem;
|
||||
}
|
||||
.parvus__loader::before {
|
||||
animation: spin 1s infinite;
|
||||
border-radius: 100%;
|
||||
border: 0.25rem solid var(--parvus-loader-background-color);
|
||||
border-block-start-color: var(--parvus-loader-color);
|
||||
content: "";
|
||||
inset: 0;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
}
|
||||
.parvus__toolbar {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
inset-block-start: 1rem;
|
||||
inset-inline: 1rem;
|
||||
justify-content: space-between;
|
||||
position: absolute;
|
||||
}
|
||||
.parvus__controls {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
.parvus__btn {
|
||||
appearance: none;
|
||||
background-color: var(--parvus-btn-background-color);
|
||||
background-image: none;
|
||||
border-radius: 0;
|
||||
border: 0.0625rem solid transparent;
|
||||
color: var(--parvus-btn-color);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
font: inherit;
|
||||
padding: 0.3125rem;
|
||||
position: relative;
|
||||
touch-action: manipulation;
|
||||
will-change: transform, opacity;
|
||||
z-index: 7;
|
||||
}
|
||||
.parvus__btn:hover, .parvus__btn:focus-visible {
|
||||
background-color: var(--parvus-btn-hover-background-color);
|
||||
color: var(--parvus-btn-hover-color);
|
||||
}
|
||||
.parvus__btn--previous {
|
||||
inset-inline-start: 0;
|
||||
position: absolute;
|
||||
inset-block-start: calc(50svh - 1rem);
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
.parvus__btn--next {
|
||||
position: absolute;
|
||||
inset-inline-end: 0;
|
||||
inset-block-start: calc(50svh - 1rem);
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
.parvus__btn svg {
|
||||
pointer-events: none;
|
||||
}
|
||||
.parvus__btn[aria-hidden=true] {
|
||||
display: none;
|
||||
}
|
||||
.parvus__btn[aria-disabled=true] {
|
||||
background-color: var(--parvus-btn-disabled-background-color);
|
||||
color: var(--parvus-btn-disabled-color);
|
||||
}
|
||||
.parvus__counter {
|
||||
position: relative;
|
||||
z-index: 7;
|
||||
}
|
||||
.parvus__counter[aria-hidden=true] {
|
||||
display: none;
|
||||
}
|
||||
@media screen and (prefers-reduced-motion: no-preference) {
|
||||
.parvus__overlay, .parvus__counter, .parvus__btn--close, .parvus__btn--previous, .parvus__btn--next, .parvus__caption {
|
||||
transition: transform var(--parvus-transition-duration) var(--parvus-transition-timing-function), opacity var(--parvus-transition-duration) var(--parvus-transition-timing-function);
|
||||
will-change: transform, opacity;
|
||||
}
|
||||
.parvus--is-opening .parvus__overlay, .parvus--is-opening .parvus__counter, .parvus--is-opening .parvus__btn--close, .parvus--is-opening .parvus__btn--previous, .parvus--is-opening .parvus__btn--next, .parvus--is-opening .parvus__caption, .parvus--is-closing .parvus__overlay, .parvus--is-closing .parvus__counter, .parvus--is-closing .parvus__btn--close, .parvus--is-closing .parvus__btn--previous, .parvus--is-closing .parvus__btn--next, .parvus--is-closing .parvus__caption {
|
||||
opacity: 0;
|
||||
}
|
||||
.parvus--is-vertical-closing .parvus__counter, .parvus--is-vertical-closing .parvus__btn--close {
|
||||
transform: translateY(-100%);
|
||||
opacity: 0;
|
||||
}
|
||||
.parvus--is-vertical-closing .parvus__btn--previous {
|
||||
transform: translate(-100%, -50%);
|
||||
opacity: 0;
|
||||
}
|
||||
.parvus--is-vertical-closing .parvus__btn--next {
|
||||
transform: translate(100%, -50%);
|
||||
opacity: 0;
|
||||
}
|
||||
.parvus--is-vertical-closing .parvus__caption {
|
||||
transform: translateY(100%);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
BIN
img/aidan.png
Normal file
BIN
img/aidan.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 124 KiB |
BIN
img/jax.png
Normal file
BIN
img/jax.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 988 KiB |
BIN
img/jax_aes1.jpg
Normal file
BIN
img/jax_aes1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 161 KiB |
BIN
img/jax_aes2.jpg
Normal file
BIN
img/jax_aes2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 117 KiB |
BIN
img/jax_aes3.jpg
Normal file
BIN
img/jax_aes3.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 265 KiB |
BIN
img/jax_aes4.jpg
Normal file
BIN
img/jax_aes4.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 48 KiB |
BIN
img/jax_ori.png
Normal file
BIN
img/jax_ori.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
BIN
img/jax_plush.png
Normal file
BIN
img/jax_plush.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
BIN
img/jax_skhema.png
Normal file
BIN
img/jax_skhema.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.2 MiB |
BIN
img/jax_yume.png
Normal file
BIN
img/jax_yume.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1,024 KiB |
373
index.html
Normal file
373
index.html
Normal file
|
|
@ -0,0 +1,373 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"
|
||||
integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
|
||||
<link rel="stylesheet" href="./css/bootstrap.css">
|
||||
<link rel="stylesheet" href="./css/parvus.css">
|
||||
<link rel="stylesheet" href="./css/custom.css">
|
||||
<script src="https://kit.fontawesome.com/14a35c233c.js" crossorigin="anonymous"></script>
|
||||
<title>OC@Dalfuss : ~$</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container my-5">
|
||||
<div class="row">
|
||||
<div class="col-md-6" id="Jax">
|
||||
<!--window Jax-->
|
||||
<a class="card text-white mb-3 terminal-card terminal-card-jax text-decoration-none" href="./jax.html"
|
||||
target="_blank">
|
||||
|
||||
|
||||
<!--header-->
|
||||
|
||||
<div class="card-header py-1 px-2 terminal-toolbar terminal-toolbar-jax">
|
||||
|
||||
<span>Terminal</span>
|
||||
|
||||
<span class="pull-right" style="letter-spacing:2px">
|
||||
<i class="fa-solid fa-chevron-down"></i>
|
||||
<i class="fa-solid fa-chevron-up"></i>
|
||||
<i class="fa-solid fa-circle-x"></i>
|
||||
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!--end header-->
|
||||
|
||||
|
||||
<!--main info-->
|
||||
|
||||
<div class="card-body p-3">
|
||||
|
||||
<span><span class="terminal-title">Jax@Dalfuss</span> : ~$
|
||||
neofetch
|
||||
</span>
|
||||
|
||||
|
||||
<div class="row my-1">
|
||||
|
||||
<!--image-->
|
||||
|
||||
<div class="col-12 col-sm-6">
|
||||
<div class="card bg-transparent border-0">
|
||||
<img src="./img/jax.png" class="terminal-img terminal-img-jax">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--end image-->
|
||||
|
||||
|
||||
<!--main info-->
|
||||
|
||||
<div class="col-12 col-sm-6">
|
||||
|
||||
<span>
|
||||
<span class="terminal-title">Jax</span>
|
||||
@
|
||||
<span class="terminal-title">Dalfuss</span>
|
||||
</span>
|
||||
|
||||
<hr class="my-1" style="border-style:dashed;border-width:2px">
|
||||
|
||||
<span><span class="terminal-title">Name</span> :
|
||||
Jax P. Nolan
|
||||
</span>
|
||||
<br>
|
||||
|
||||
|
||||
<span><span class="terminal-title">Gender</span> :
|
||||
Nonbinary
|
||||
</span>
|
||||
<br>
|
||||
|
||||
|
||||
<span><span class="terminal-title">Pronouns</span> :
|
||||
they/them
|
||||
</span>
|
||||
<br>
|
||||
|
||||
|
||||
<span><span class="terminal-title">Species/Race</span> :
|
||||
Sea Elf
|
||||
</span>
|
||||
<br>
|
||||
|
||||
|
||||
<span><span class="terminal-title">Age</span> :
|
||||
103 (19)
|
||||
</span>
|
||||
<br>
|
||||
|
||||
|
||||
<span><span class="terminal-title">Orientation</span> :
|
||||
Pansexual
|
||||
</span>
|
||||
<br>
|
||||
|
||||
|
||||
<span><span class="terminal-title">Designer</span> :
|
||||
Sam Dalfuss (+ Ori Ottero)
|
||||
</span>
|
||||
<br>
|
||||
|
||||
<span><span class="terminal-title">Cover Art</span> :
|
||||
@river_stubs@instagram.com
|
||||
</span>
|
||||
|
||||
|
||||
<br>
|
||||
<br>
|
||||
|
||||
|
||||
<!--pallete-->
|
||||
|
||||
<div class="row no-gutters my-2">
|
||||
|
||||
<!--color 1-->
|
||||
<div class="col-2">
|
||||
<div class="card border-0 rounded-0 palette-swatch" data-toggle="tooltip" style="background-color:#f5a9b8" title="Dyed Hair | #f5a9b8"></div>
|
||||
</div>
|
||||
|
||||
<!--color 2-->
|
||||
<div class="col-2">
|
||||
<div class="card border-0 rounded-0 palette-swatch" data-toggle="tooltip" style="background-color:#a8c5db" title="Skin | #a8c5db"></div>
|
||||
</div>
|
||||
|
||||
<!--color 3-->
|
||||
<div class="col-2">
|
||||
<div class="card border-0 rounded-0 palette-swatch" data-toggle="tooltip" style="background-color:#12354b" title="Natural Hair | #12354b"></div>
|
||||
</div>
|
||||
|
||||
<!--color 4-->
|
||||
<div class="col-2">
|
||||
<div class="card border-0 rounded-0 palette-swatch" data-toggle="tooltip" style="background-color:#12404b" title="Freckles | #12404b"></div>
|
||||
</div>
|
||||
|
||||
<!--color 5-->
|
||||
<div class="col-2">
|
||||
<div class="card border-0 rounded-0 palette-swatch" data-toggle="tooltip" style="background-color:#105522" title="Eyes | #105522"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<span><span class="terminal-title">Jax@Dalfuss</span> : ~$
|
||||
<svg class="rect animation-blink rect-hover" xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px"
|
||||
viewBox="0 0 100 125" enable-background="new 0 0 100 100" xml:space="preserve">
|
||||
<rect x="27.9" y="4.4" width="45" height="90" />
|
||||
</svg>
|
||||
<span class="terminal-command"> cat jax.sheet
|
||||
<svg class="rect animation-blink" xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px"
|
||||
viewBox="0 0 100 125" enable-background="new 0 0 100 100" xml:space="preserve">
|
||||
<rect x="27.9" y="4.4" width="45" height="90" />
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
<!--end window-->
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="col-md-6" id="Aidan">
|
||||
|
||||
<!--window Aidan-->
|
||||
|
||||
<a class="card text-white mb-3 terminal-card terminal-card-aidan text-decoration-none" href="#">
|
||||
|
||||
|
||||
<!--header-->
|
||||
|
||||
<div class="card-header py-1 px-2 terminal-toolbar terminal-toolbar-aidan">
|
||||
|
||||
<span>Terminal</span>
|
||||
|
||||
<span class="pull-right" style="letter-spacing:2px">
|
||||
<i class="fa-solid fa-chevron-down"></i>
|
||||
<i class="fa-solid fa-chevron-up"></i>
|
||||
<i class="fa-solid fa-circle-x"></i>
|
||||
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!--end header-->
|
||||
|
||||
|
||||
<!--main info-->
|
||||
|
||||
<div class="card-body p-3">
|
||||
|
||||
<span>
|
||||
<span class="terminal-title">Aidan@Dalfuss</span> : ~$
|
||||
neofetch
|
||||
</span>
|
||||
|
||||
|
||||
<div class="row my-1">
|
||||
|
||||
<!--image-->
|
||||
|
||||
<div class="col-12 col-sm-6">
|
||||
<div class="card bg-transparent border-0">
|
||||
<img src="./img/aidan.png" class="terminal-img terminal-img-aidan">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--end image-->
|
||||
|
||||
|
||||
<!--main info
|
||||
|
||||
if you want to keep it just the pallete/not have anything happen when you hover over them, delete the data-toggle="tooltip" and title="(color)" classes-->
|
||||
|
||||
<div class="col-12 col-sm-6">
|
||||
|
||||
<span>
|
||||
<span class="terminal-title">Aidan</span>
|
||||
@
|
||||
<span class="terminal-title">Dalfuss</span>
|
||||
</span>
|
||||
|
||||
<hr class="my-1" style="border-style:dashed;border-width:2px">
|
||||
|
||||
<span><span class="terminal-title">Name</span> :
|
||||
Aidan Leahy
|
||||
</span>
|
||||
<br>
|
||||
|
||||
|
||||
<span><span class="terminal-title">Gender</span> :
|
||||
Male
|
||||
</span>
|
||||
<br>
|
||||
|
||||
|
||||
<span><span class="terminal-title">Pronouns</span> :
|
||||
he/him
|
||||
</span>
|
||||
<br>
|
||||
|
||||
|
||||
<span><span class="terminal-title">Species/Race</span> :
|
||||
Sea Elf
|
||||
</span>
|
||||
<br>
|
||||
|
||||
|
||||
<span><span class="terminal-title">Age</span> :
|
||||
118 (21)
|
||||
</span>
|
||||
<br>
|
||||
|
||||
|
||||
<span><span class="terminal-title">Orientation</span> :
|
||||
???
|
||||
</span>
|
||||
<br>
|
||||
|
||||
|
||||
<span><span class="terminal-title">Designer</span> :
|
||||
Sam Dalfuss
|
||||
</span>
|
||||
<br>
|
||||
|
||||
<span><span class="terminal-title">Cover Art</span> :
|
||||
Picrew/ぼわず
|
||||
</span>
|
||||
|
||||
|
||||
<br>
|
||||
<br>
|
||||
|
||||
|
||||
<!--pallete-->
|
||||
|
||||
<div class="row no-gutters my-2">
|
||||
|
||||
<!--color 1-->
|
||||
<div class="col-2">
|
||||
<div class="card border-0 rounded-0 palette-swatch" data-toggle="tooltip" style="background-color:#93abbe" title="Skin | #93abbe"></div>
|
||||
</div>
|
||||
|
||||
<!--color 2-->
|
||||
<div class="col-2">
|
||||
<div class="card border-0 rounded-0 palette-swatch" data-toggle="tooltip" style="background-color:#216240" title="Hair | #216240"></div>
|
||||
</div>
|
||||
|
||||
<!--color 3-->
|
||||
<div class="col-2">
|
||||
<div class="card border-0 rounded-0 palette-swatch" data-toggle="tooltip" style="background-color:#2ba2e6" title="Eyes | #2ba2e6"></div>
|
||||
</div>
|
||||
|
||||
<!--color 4
|
||||
<div class="col-2">
|
||||
<div class="card border-0 rounded-0 palette-swatch" data-toggle="tooltip" style="background-color:#12404b" title="#12404b"></div>
|
||||
</div>-->
|
||||
|
||||
<!--color 5
|
||||
<div class="col-2">
|
||||
<div class="card border-0 rounded-0 palette-swatch" data-toggle="tooltip" style="background-color:#105522" title="#105522"></div>
|
||||
</div>-->
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<span><span class="terminal-title">Aidan@Dalfuss</span> : ~$
|
||||
<svg class="rect animation-blink rect-hover" xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px"
|
||||
viewBox="0 0 100 125" enable-background="new 0 0 100 100" xml:space="preserve">
|
||||
<rect x="27.9" y="4.4" width="45" height="90" />
|
||||
</svg>
|
||||
<span class="terminal-command"> cat aidan.sheet
|
||||
<svg class="rect animation-blink" xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px"
|
||||
viewBox="0 0 100 125" enable-background="new 0 0 100 100" xml:space="preserve">
|
||||
<rect x="27.9" y="4.4" width="45" height="90" />
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!--end window-->
|
||||
|
||||
</div>
|
||||
|
||||
<!--Credit. You may move it, but please do not delete/remove-->
|
||||
|
||||
<small>
|
||||
<p style="text-align:right;margin-top:3px">
|
||||
HTML by
|
||||
<a href="https://toyhou.se/15218563" style="color:#62c3f7" target="_blank"><i class='fa-solid fa-heart'></i> Jade-Everstone</a>
|
||||
modified by
|
||||
<a href="https://dalfuss.link" target="_blank" style="color: #F5A9B8;">Sam Dalfuss</a>
|
||||
</p>
|
||||
</small>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"
|
||||
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
|
||||
crossorigin="anonymous"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"
|
||||
integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct"
|
||||
crossorigin="anonymous"></script>
|
||||
<script src="./js/parvus.js"></script>
|
||||
<script>
|
||||
const prvs = new Parvus()
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
435
jax.html
Normal file
435
jax.html
Normal file
|
|
@ -0,0 +1,435 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"
|
||||
integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
|
||||
<link rel="stylesheet" href="./css/bootstrap.css">
|
||||
<link rel="stylesheet" href="./css/parvus.css">
|
||||
<link rel="stylesheet" href="./css/custom.css">
|
||||
<script src="https://kit.fontawesome.com/14a35c233c.js" crossorigin="anonymous"></script>
|
||||
<title>Jax P. Nolan</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container my-5" style="max-width:900px">
|
||||
|
||||
<!-- /// Header /// -->
|
||||
<hr style="border-width:3px;border-radius:5px;margin-top:10px;margin-bottom:3px">
|
||||
|
||||
<div class="d-flex flex-wrap align-items-end">
|
||||
<span class="character-name">Jax P. Nolan</span>
|
||||
|
||||
<div class="ml-auto d-none d-sm-block" style="font-size:2.5em">
|
||||
<i class="fa-solid fa-circle" style="color: #5BCEFA;"></i>
|
||||
<i class="fa-solid fa-circle" style="color: #f5a9b8;"></i>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<hr style="border-width:3px;border-radius:5px;margin-top:3px;margin-bottom:10px">
|
||||
<!-- /// End Header /// -->
|
||||
|
||||
|
||||
<!-- /// main content///-->
|
||||
<div class="row">
|
||||
|
||||
<!-- /// Character image /// -->
|
||||
<div class="col-sm-5">
|
||||
|
||||
<!--image-->
|
||||
<div class="card bg-faded character-image character-image-jax">
|
||||
|
||||
<!--top-right decor-->
|
||||
<div class="p-2 decor-tr"></div>
|
||||
|
||||
<!--Bottom-left decor-->
|
||||
<div class="p-2 decor-bl"></div>
|
||||
|
||||
<!--Image credit-->
|
||||
<span class="image-credit">
|
||||
<a href="./img/jax.png" class="lightbox image-credit-icon"
|
||||
data-caption="Art by @river_stubs@instagram.com" data-group="gallery">
|
||||
<i class="fa-solid fa-image"></i>
|
||||
</a>
|
||||
</span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!-- /// End Character image /// -->
|
||||
|
||||
<!-- /// Info section /// -->
|
||||
<div class="col-sm-7">
|
||||
|
||||
<div class="card bg-faded table-responsive card-info">
|
||||
|
||||
<div class="tab-content" id="myTabContent">
|
||||
|
||||
<!-- /// About /// -->
|
||||
<div class="tab-pane fade show active" id="about" role="tabpanel" aria-labelledby="home-tab">
|
||||
<div class="card-body p-3">
|
||||
|
||||
<!--basic info-->
|
||||
<div
|
||||
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-->
|
||||
<i class="ml-auto fa-solid fa-comment"></i>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="d-flex flex-wrap align-items-center text-white py-1 px-2 mb-2 character-info character-info-jax-dark">
|
||||
Sea Elf <!--Race/Species-->
|
||||
<i class="ml-auto fa-solid fa-globe"></i>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="d-flex flex-wrap align-items-center text-white py-1 px-2 mb-2 character-info character-info-jax-light">
|
||||
103 (19) <!--Age-->
|
||||
<i class="ml-auto fa-solid fa-cake-candles"></i>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="d-flex flex-wrap align-items-center text-white py-1 px-2 mb-2 character-info character-info-jax-dark">
|
||||
1,86m (6'1") <!--Height-->
|
||||
<i class="ml-auto fa-solid fa-ruler-vertical"></i>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="d-flex flex-wrap align-items-center text-white py-1 px-2 mb-2 character-info character-info-jax-light">
|
||||
65kg (143lbs) <!--Weight-->
|
||||
<i class="ml-auto fa-solid fa-weight-scale"></i>
|
||||
</div>
|
||||
|
||||
<!--<div
|
||||
class="d-flex flex-wrap align-items-center text-white py-1 px-2 mb-2 character-info character-info-jax-dark">
|
||||
<span class="spoiler">18cm (7") Dicksize</span>
|
||||
<span class="ml-auto">🍆</span>
|
||||
</div>-->
|
||||
|
||||
|
||||
<hr class="my-2" style="border-width:3px;border-radius:5px;">
|
||||
|
||||
<!--intro-->
|
||||
<p>✨slut✨</p>
|
||||
<p>
|
||||
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.
|
||||
They love their Grandpa more than anyone in the world, they're afraid of heights and
|
||||
a huge slut lol.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!-- /// End About /// -->
|
||||
|
||||
<!-- /// Aesthetic /// -->
|
||||
|
||||
<div class="tab-pane fade" id="aes" 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-solid fa-heart"></i> Aesthetics
|
||||
</div>
|
||||
|
||||
<!--Moodboard-->
|
||||
<div class="row no-gutters">
|
||||
|
||||
<!--pic 1-->
|
||||
<div class="col-6">
|
||||
<a href="./img/jax_aes1.jpg" class="lightbox" data-group="aesthetic">
|
||||
<div class="text-white m-1 aesthetic-img"
|
||||
style="background-image: url(./img/jax_aes1.jpg)">
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!--pic 2-->
|
||||
<div class="col-6">
|
||||
<a href="./img/jax_aes2.jpg" class="lightbox" data-group="aesthetic">
|
||||
<div class="text-white m-1 aesthetic-img"
|
||||
style="background-image:url(./img/jax_aes2.jpg);"">
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!--pic 3-->
|
||||
<div class=" col-6">
|
||||
<a href="./img/jax_aes3.jpg" class="lightbox" data-group="aesthetic">
|
||||
<div class="text-white m-1 aesthetic-img"
|
||||
style="background-image:url(./img/jax_aes3.jpg);"></div>
|
||||
</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>
|
||||
</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>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- /// End Aesthetic /// -->
|
||||
|
||||
<!-- /// Trivia /// -->
|
||||
<div class="tab-pane fade" id="triv" role="tabpanel" aria-labelledby="profile-tab">
|
||||
<div class="card-body p-3">
|
||||
|
||||
<div class="text-white py-1 px-2 my-2 tab-title">
|
||||
<i class="fa-solid fa-bookmark"></i> Trivia
|
||||
</div>
|
||||
|
||||
<p>
|
||||
<i class="fa-regular fa-circle"></i>
|
||||
Jax plays the guitar and sings in a band.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<i class="fa-regular fa-circle"></i>
|
||||
Their favourite food is blue raspberries, a specialty from where they're from.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<i class="fa-regular fa-circle"></i>
|
||||
It has survived not only five centuries, but also the leap into electronic
|
||||
typesetting, remaining essentially unchanged.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!-- /// End Trivia /// -->
|
||||
|
||||
<!-- /// Links /// -->
|
||||
<div class="popup" id="popup"> Copied color: <span id="popupText"></span> </div>
|
||||
<div class="tab-pane fade" id="link" 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">
|
||||
|
||||
<!--Colour 1-->
|
||||
<div class="col m-1">
|
||||
<div class="color light" style="background-color: #A8C5DB;">Skin<br>#A8C5DB</div>
|
||||
</div>
|
||||
|
||||
<!--Colour 2-->
|
||||
<div class="col m-1">
|
||||
<div class="color light" style="background-color: #F5A9B8;">Dyed Hair<br>#F5A9B8</div>
|
||||
</div>
|
||||
|
||||
<!--Colour 3-->
|
||||
<div class="col m-1">
|
||||
<div class="color" style="background-color: #12354B;">Natural Hair<br>#12354B</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row no-gutters d-flex flex-wrap align-items-center m-2">
|
||||
|
||||
<!--Colour 4-->
|
||||
<div class="col m-1">
|
||||
<div class="color" style="background-color: #105522;">Eyes<br>#105522</div>
|
||||
</div>
|
||||
|
||||
<!--Colour 5-->
|
||||
<div class="col m-1">
|
||||
<div class="color" style="background-color: #12404B;">Freckles<br>#12404B</div>
|
||||
</div>
|
||||
|
||||
<!--Colour 6
|
||||
<div class="col m-1">
|
||||
<div class="color" style="background-color: #f5a9b8;">#F5A9B8</div>
|
||||
</div>-->
|
||||
</div>
|
||||
|
||||
<hr class="my-2" style="border-width:3px;border-radius:5px;">
|
||||
|
||||
<div class="row no-gutters d-flex flex-wrap align-items-center m-2">
|
||||
<div class="col m-1">
|
||||
<a href="./assets/jax_swatch.ase" class="text-decoration-none text-reset">
|
||||
<b><div class="color-download" style="background-color: #42769E;"><i class="fa-solid fa-link"> </i>  Download Colour Palette</div></b>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!-- /// End Links /// -->
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- /// End Info section /// -->
|
||||
|
||||
</div>
|
||||
<!-- /// end main content///-->
|
||||
|
||||
|
||||
<!-- /// Footer /// -->
|
||||
<hr style="border-width:3px;border-radius:5px;margin-top:10px;margin-bottom:3px">
|
||||
|
||||
<div class="d-flex flex-wrap align-items-start">
|
||||
|
||||
<div class="d-none d-sm-block" style="font-size:2.5em">
|
||||
<i class="fa-solid fa-circle" style="color: #f5a9b8;"></i>
|
||||
<i class="fa-solid fa-circle" style="color: #5BCEFA;"></i>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="ml-auto p-2 nav ">
|
||||
<!--Character info-->
|
||||
<a href="#about" data-toggle="tab" class="nav-link btn text-white mx-1 tab-link tab-link-light">
|
||||
<i class="fa-solid fa-user"></i>
|
||||
</a>
|
||||
|
||||
<!--Aesthetics-->
|
||||
<a href="#aes" data-toggle="tab" class="nav-link btn text-white mx-1 tab-link tab-link-dark">
|
||||
<i class="fa-solid fa-heart"></i>
|
||||
</a>
|
||||
|
||||
<!--trivia-->
|
||||
<a href="#triv" data-toggle="tab" class="nav-link btn text-white mx-1 tab-link tab-link-light">
|
||||
<i class="fa-solid fa-bookmark"></i>
|
||||
</a>
|
||||
|
||||
<!--links-->
|
||||
<a href="#link" data-toggle="tab" class="nav-link btn text-white mx-1 tab-link tab-link-light">
|
||||
<i class="fa-solid fa-palette"></i>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<hr style="border-width:3px;border-radius:5px;margin-top:3px;margin-bottom:10px">
|
||||
<!-- /// End footer /// -->
|
||||
|
||||
<!--Credit: you may move but please do not remove!-->
|
||||
<small>
|
||||
<p style="text-align:right;margin-top:3px">
|
||||
HTML by
|
||||
<a href="https://toyhou.se/15218563" style="color:#62c3f7" target="_blank"><i
|
||||
class='fa-solid fa-heart'></i> Jade-Everstone</a>
|
||||
modified by
|
||||
<a href="https://dalfuss.link" target="_blank" style="color: #F5A9B8;">Sam Dalfuss</a>
|
||||
</p>
|
||||
</small>
|
||||
|
||||
</div>
|
||||
|
||||
<!--Images for Gallery-->
|
||||
<a href="./img/jax_ori.png" class="lightbox img-invisible" data-caption="Art by Ori Ottero (orifans.com)"
|
||||
data-group="gallery"></a>
|
||||
<a href="./img/jax_yume.png" class="lightbox img-invisible" data-caption="Art by @yumeshirokuro.bsky.social"
|
||||
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>
|
||||
|
||||
<script>
|
||||
const colors = document.querySelectorAll(".color");
|
||||
const popup = document.getElementById("popup");
|
||||
const popupText = document.getElementById("popupText");
|
||||
|
||||
function rgbToHex(rgb) {
|
||||
const result = rgb.match(/^rgb\((\d+), (\d+), (\d+)\)$/);
|
||||
if (result) {
|
||||
const r = parseInt(result[1]).toString(16).padStart(2, '0');
|
||||
const g = parseInt(result[2]).toString(16).padStart(2, '0');
|
||||
const b = parseInt(result[3]).toString(16).padStart(2, '0');
|
||||
return `#${r}${g}${b}`;
|
||||
}
|
||||
return rgb; // Falls kein gültiger RGB-Wert gefunden wurde
|
||||
}
|
||||
|
||||
colors.forEach(color => {
|
||||
color.addEventListener("click", () => {
|
||||
const colorValue = color.style.backgroundColor;
|
||||
const hexColor = rgbToHex(colorValue); // Umwandlung in Hex-Code
|
||||
navigator.clipboard.writeText(hexColor); // Hex-Code in die Zwischenablage kopieren
|
||||
popupText.innerText = hexColor; // Anzeige des Hex-Codes im Popup
|
||||
popup.style.display = "block";
|
||||
setTimeout(() => {
|
||||
popup.style.display = "none";
|
||||
}, 2000);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"
|
||||
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
|
||||
crossorigin="anonymous">
|
||||
</script>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"
|
||||
integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct"
|
||||
crossorigin="anonymous">
|
||||
</script>
|
||||
|
||||
<script src="./js/parvus.js"></script>
|
||||
|
||||
<script>
|
||||
const prvs = new Parvus()
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
1488
js/parvus.js
Normal file
1488
js/parvus.js
Normal file
File diff suppressed because it is too large
Load diff
Loading…
Reference in a new issue