samalyx
/
credit.jaxoff.tv
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

initial layout & first draft

This commit is contained in:
dalfuss 2025-07-18 15:06:29 +02:00
parent d6e8feff40
commit b67f7061dd
8 changed files with 208 additions and 150 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
css/custom.css Normal file
View File

@ -0,0 +1,70 @@
: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;
--img-height: 12.5em;
--max-img-width: 22em; /* So breit wie das breiteste Bild */
}
body {
background-color: #161618;
color: #f2f5f4;
}
a:hover {
color: #f2f5f4;
}
a.lightbox {
margin: 10px;
}
.parvus-trigger:has(img) .parvus-zoom__indicator {
display: none;
}
.image-box {
height: var(--img-height);
width: var(--max-img-width);
display: flex;
align-items: center;
justify-content: center;
background-color: #222222;
border: 1px solid #222222;
border-radius: 0.5rem;
}
.image-box img {
max-height: 100%;
max-width: 100%;
object-fit: contain;
}
.page-title {
padding-bottom: 3em;
color: #F5A9B8;
}
.logo {
height: 8em;
width: auto;
}
a.svg-link {
display: inline-block;
line-height: 0;
padding: 0;
margin: 0;
}
a.svg-link svg {
display: block;
width: 3em;
height: max-content;
}

11
css/sites.css Normal file
View File

@ -0,0 +1,11 @@
.twitch {
color: #9146ff;
}
.twitter {
color: #1DA1F2;
}
.vgen {
color: #B8FF26;
}

168
index.html
View File

@ -1,86 +1,145 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Liste mit zentrierten Bildern</title>
<title>JaxOffTV Art Credits</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-LN+7fdVzj6u52u30Kp6M/trliBMCMKTyK833zpbD+pXdCLuTusPj697FH4R/5mcr" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ndDqU0Gzau9qJ1lfW4pNLlhNTkCfHzAVBReH9diLvGRem5+R9g2FzA8ZGN954O5Q"
crossorigin="anonymous"></script>
<link href="https://bootswatch.com/5/darkly/bootstrap.min.css" rel="stylesheet" />
<style>
:root {
--img-height: 12.5em;
--max-img-width: 18.75em; /* So breit wie das breiteste Bild */
}
<link rel="stylesheet" href="./css/sites.css">
<link rel="stylesheet" href="./css/custom.css">
.image-box {
height: var(--img-height);
width: var(--max-img-width);
display: flex;
align-items: center;
justify-content: center;
background-color: #222222;
border: 1px solid #222222;
border-radius: 0.5rem;
}
.image-box img {
max-height: 100%;
max-width: 100%;
object-fit: contain;
}
</style>
</head>
<body>
<div class="container py-5">
<!-- Sektion 1 -->
<div class="row align-items-center mb-5">
<div class="col-md-4 d-flex justify-content-center">
<div class="image-box">
<img src="https://samalyx.gay/i/background.png" alt="Bild 1" class="img-fluid rounded" />
</div>
</div>
<div class="col-md-8">
<h2>Titel 1</h2>
<p class="text-muted">Dies ist eine kurze Beschreibung.</p>
<ul class="list-unstyled">
<li><a href="#">🔗 Link A</a></li>
</ul>
<div class="row text-center page-title">
<div class="col align-self-center">
<p>
<img src="./static/jaxoff_logo.png" class="logo" />
<h1>Credits</h1>
</p>
</div>
</div>
<!-- Sektion 2 -->
<div class="row align-items-center mb-5">
<!-- Twitch Emotes by Yume Shirokuro -->
<div class="row align-items-center mb-5">
<div class="col-md-4 d-flex justify-content-center">
<div class="image-box">
<img src="https://ref.jaxoff.tv/img/jax.png" alt="Bild 2" class="img-fluid rounded" />
<img src="./static/yume_emotes.jpeg" class="img-fluid rounded" />
</div>
</div>
<div class="col-md-8">
<h2>Titel 2</h2>
<p class="text-muted">Kleineres Bild, aber trotzdem zentriert im Container.</p>
<ul class="list-unstyled">
<li><a href="#">🔗 Link B</a></li>
</ul>
</div>
<h2>Twitch Emotes</h2>
<p class="fs-4">by Yume Shirokuro</p></br>
<div class="d-flex gap-3">
<!-- VGen Link -->
<a class="svg-link vgen" href="https://vgen.co/YumeShirokuro" target="_blank">
<svg class="svg" version="1.0" xmlns="http://www.w3.org/2000/svg" fill="currentcolor" viewBox="18.3 34.08 166.6 150"><g transform="translate(0 200) scale(.1 -.1)"><path d="m1151 1644c-184-49-336-213-374-403l-13-64-58 72c-31 39-74 82-94 96-136 88-327 36-396-108-75-157-30-265 222-529 220-230 387-330 572-345 234-18 483 152 731 498 99 138 112 173 107 275-4 75-9 93-52 180-39 78-63 111-129 177-121 121-227 167-382 166-44 0-104-7-134-15zm246-157c73-38 115-77 172-162 51-76 75-151 64-196-15-59-203-303-299-388-229-202-400-212-631-35-86 66-236 220-318 328-50 65-60 85-60 118s7 46 33 69c18 16 44 29 58 29 35 0 78-24 98-55 39-60 199-235 265-290 88-74 176-125 217-125 30 0 91 20 106 35 4 4-29 48-73 98-94 108-119 164-119 267 0 152 92 280 233 326 68 22 191 13 254-19z"></path><path d="m1183 1304c-46-23-73-71-73-129 0-46 3-50 79-128 43-45 83-77 89-73 27 17 132 169 132 192 0 34-22 73-64 113-43 41-111 52-163 25z"></path></g></svg>
</a>
<!-- Twitter Link -->
<a class="svg-link twitter" href="https://twitter.com/YShirokuro" target="_blank">
<svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0.98 1.48 246.2 200.05"><path d="M221.95 51.29c.15 2.17.15 4.34.15 6.53 0 66.73-50.8 143.69-143.69 143.69v-.04c-27.44.04-54.31-7.82-77.41-22.64 3.99.48 8 .72 12.02.73 22.74.02 44.83-7.61 62.72-21.66-21.61-.41-40.56-14.5-47.18-35.07 7.57 1.46 15.37 1.16 22.8-.87-23.56-4.76-40.51-25.46-40.51-49.5v-.64c7.02 3.91 14.88 6.08 22.92 6.32C11.58 63.31 4.74 33.79 18.14 10.71c25.64 31.55 63.47 50.73 104.08 52.76-4.07-17.54 1.49-35.92 14.61-48.25 20.34-19.12 52.33-18.14 71.45 2.19 11.31-2.23 22.15-6.38 32.07-12.26-3.77 11.69-11.66 21.62-22.2 27.93 10.01-1.18 19.79-3.86 29-7.95-6.78 10.16-15.32 19.01-25.2 26.16z"></path></svg>
</a>
<!-- Twitch Link -->
<a class="svg-link twitch" href="https://twitch.tv/yume_shirokuro" target="_blank">
<svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="24.27 0 463.45 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M391.2 103.5H352.5v109.7h38.6zM285 103H246.4V212.8H285zM120.8 0 24.3 91.4V420.6H140.1V512l96.5-91.4h77.3L487.7 256V0zM449.1 237.8l-77.2 73.1H294.6l-67.6 64v-64H140.1V36.6H449.1z"></path></svg>
</a>
</div>
<!-- Sektion 3 -->
<div class="row align-items-center mb-5">
</div>
</div>
<!-- Logo, Background & Rigging by A3l_is -->
<div class="row align-items-center mb-5">
<div class="col-md-4 d-flex justify-content-center">
<div class="image-box">
<img src="https://storage.googleapis.com/vgen-production-storage/uploads/8cfb49b3-ea07-47d1-9737-56f7f0396945/services/3ecb2bfd-0a25-4039-acc3-951fe270b795.webp" alt="Bild 2" class="img-fluid rounded" />
<img src="./static/bg_rig_logo.png" class="img-fluid rounded" />
</div>
</div>
<div class="col-md-8">
<h2>Titel 3</h2>
<p class="text-muted">Kleineres Bild, aber trotzdem zentriert im Container.</p>
<ul class="list-unstyled">
<li><a href="#">🔗 Link B</a></li>
</ul>
<h2>Logo, Background & Rigging</h2>
<p class="fs-4">by A3l_is</p></br>
<div class="d-flex gap-3">
<!-- VGen Link -->
<a class="svg-link vgen" href="https://vgen.co/A3l_is" target="_blank">
<svg class="svg" version="1.0" xmlns="http://www.w3.org/2000/svg" fill="currentcolor" viewBox="18.3 34.08 166.6 150"><g transform="translate(0 200) scale(.1 -.1)"><path d="m1151 1644c-184-49-336-213-374-403l-13-64-58 72c-31 39-74 82-94 96-136 88-327 36-396-108-75-157-30-265 222-529 220-230 387-330 572-345 234-18 483 152 731 498 99 138 112 173 107 275-4 75-9 93-52 180-39 78-63 111-129 177-121 121-227 167-382 166-44 0-104-7-134-15zm246-157c73-38 115-77 172-162 51-76 75-151 64-196-15-59-203-303-299-388-229-202-400-212-631-35-86 66-236 220-318 328-50 65-60 85-60 118s7 46 33 69c18 16 44 29 58 29 35 0 78-24 98-55 39-60 199-235 265-290 88-74 176-125 217-125 30 0 91 20 106 35 4 4-29 48-73 98-94 108-119 164-119 267 0 152 92 280 233 326 68 22 191 13 254-19z"></path><path d="m1183 1304c-46-23-73-71-73-129 0-46 3-50 79-128 43-45 83-77 89-73 27 17 132 169 132 192 0 34-22 73-64 113-43 41-111 52-163 25z"></path></g></svg>
</a>
<!-- Twitter Link -->
<a class="svg-link twitter" href="https://twitter.com/A3l_is" target="_blank">
<svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0.98 1.48 246.2 200.05"><path d="M221.95 51.29c.15 2.17.15 4.34.15 6.53 0 66.73-50.8 143.69-143.69 143.69v-.04c-27.44.04-54.31-7.82-77.41-22.64 3.99.48 8 .72 12.02.73 22.74.02 44.83-7.61 62.72-21.66-21.61-.41-40.56-14.5-47.18-35.07 7.57 1.46 15.37 1.16 22.8-.87-23.56-4.76-40.51-25.46-40.51-49.5v-.64c7.02 3.91 14.88 6.08 22.92 6.32C11.58 63.31 4.74 33.79 18.14 10.71c25.64 31.55 63.47 50.73 104.08 52.76-4.07-17.54 1.49-35.92 14.61-48.25 20.34-19.12 52.33-18.14 71.45 2.19 11.31-2.23 22.15-6.38 32.07-12.26-3.77 11.69-11.66 21.62-22.2 27.93 10.01-1.18 19.79-3.86 29-7.95-6.78 10.16-15.32 19.01-25.2 26.16z"></path></svg>
</a>
<!-- Twitch Link -->
<a class="svg-link twitch" href="https://twitch.tv/a3l_is" target="_blank">
<svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="24.27 0 463.45 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M391.2 103.5H352.5v109.7h38.6zM285 103H246.4V212.8H285zM120.8 0 24.3 91.4V420.6H140.1V512l96.5-91.4h77.3L487.7 256V0zM449.1 237.8l-77.2 73.1H294.6l-67.6 64v-64H140.1V36.6H449.1z"></path></svg>
</a>
</div>
</div>
</div>
<!-- Model Art by Milky Blanc -->
<div class="row align-items-center mb-5">
<div class="col-md-4 d-flex justify-content-center">
<div class="image-box">
<img src="./static/model.png" class="img-fluid rounded" />
</div>
</div>
<div class="col-md-8">
<h2>Model Art</h2>
<p class="fs-4">by Milky Blanc</p></br>
<div class="d-flex gap-3">
<!-- VGen Link -->
<a class="svg-link vgen" href="https://vgen.co/m1lkyblanc" target="_blank">
<svg class="svg" version="1.0" xmlns="http://www.w3.org/2000/svg" fill="currentcolor" viewBox="18.3 34.08 166.6 150"><g transform="translate(0 200) scale(.1 -.1)"><path d="m1151 1644c-184-49-336-213-374-403l-13-64-58 72c-31 39-74 82-94 96-136 88-327 36-396-108-75-157-30-265 222-529 220-230 387-330 572-345 234-18 483 152 731 498 99 138 112 173 107 275-4 75-9 93-52 180-39 78-63 111-129 177-121 121-227 167-382 166-44 0-104-7-134-15zm246-157c73-38 115-77 172-162 51-76 75-151 64-196-15-59-203-303-299-388-229-202-400-212-631-35-86 66-236 220-318 328-50 65-60 85-60 118s7 46 33 69c18 16 44 29 58 29 35 0 78-24 98-55 39-60 199-235 265-290 88-74 176-125 217-125 30 0 91 20 106 35 4 4-29 48-73 98-94 108-119 164-119 267 0 152 92 280 233 326 68 22 191 13 254-19z"></path><path d="m1183 1304c-46-23-73-71-73-129 0-46 3-50 79-128 43-45 83-77 89-73 27 17 132 169 132 192 0 34-22 73-64 113-43 41-111 52-163 25z"></path></g></svg>
</a>
<!-- Twitter Link -->
<a class="svg-link twitter" href="https://twitter.com/m1lkyblanc" target="_blank">
<svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0.98 1.48 246.2 200.05"><path d="M221.95 51.29c.15 2.17.15 4.34.15 6.53 0 66.73-50.8 143.69-143.69 143.69v-.04c-27.44.04-54.31-7.82-77.41-22.64 3.99.48 8 .72 12.02.73 22.74.02 44.83-7.61 62.72-21.66-21.61-.41-40.56-14.5-47.18-35.07 7.57 1.46 15.37 1.16 22.8-.87-23.56-4.76-40.51-25.46-40.51-49.5v-.64c7.02 3.91 14.88 6.08 22.92 6.32C11.58 63.31 4.74 33.79 18.14 10.71c25.64 31.55 63.47 50.73 104.08 52.76-4.07-17.54 1.49-35.92 14.61-48.25 20.34-19.12 52.33-18.14 71.45 2.19 11.31-2.23 22.15-6.38 32.07-12.26-3.77 11.69-11.66 21.62-22.2 27.93 10.01-1.18 19.79-3.86 29-7.95-6.78 10.16-15.32 19.01-25.2 26.16z"></path></svg>
</a>
</div>
</div>
</div>
<!-- Weitere Sektionen hier -->
@ -88,4 +147,5 @@
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

BIN
static/bg_rig_logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 923 KiB

BIN
static/jaxoff_logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 142 KiB

BIN
static/model.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 909 KiB

BIN
static/yume_emotes.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 190 KiB

83
test.html
View File

@ -1,83 +0,0 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Grid mit unbeschnittenen Bildern</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<style>
.card-img-wrapper {
height: 200px;
background-color: #f8f9fa;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.card-img-wrapper img {
max-height: 100%;
max-width: 100%;
object-fit: contain;
}
</style>
</head>
<body>
<div class="container py-5">
<div class="row g-4">
<!-- Karte 1 -->
<div class="col-md-6 col-lg-4">
<div class="card h-100 shadow-sm">
<div class="card-img-wrapper">
<img src="https://storage.googleapis.com/vgen-production-storage/uploads/8cfb49b3-ea07-47d1-9737-56f7f0396945/services/3ecb2bfd-0a25-4039-acc3-951fe270b795.webp" alt="Bild 1">
</div>
<div class="card-body">
<h5 class="card-title">Titel 1</h5>
<p class="card-text text-muted">Bild mit Standardverhältnis.</p>
<ul class="list-unstyled mb-0">
<li><a href="#">🔗 Link A</a></li>
</ul>
</div>
</div>
</div>
<!-- Karte 2 -->
<div class="col-md-6 col-lg-4">
<div class="card h-100 shadow-sm">
<div class="card-img-wrapper">
<img src="https://via.placeholder.com/300x700" alt="Bild 2">
</div>
<div class="card-body">
<h5 class="card-title">Titel 2</h5>
<p class="card-text text-muted">Sehr hohes Bild – trotzdem zentriert & sichtbar.</p>
<ul class="list-unstyled mb-0">
<li><a href="#">🔗 Link B</a></li>
</ul>
</div>
</div>
</div>
<!-- Karte 3 -->
<div class="col-md-6 col-lg-4">
<div class="card h-100 shadow-sm">
<div class="card-img-wrapper">
<img src="https://via.placeholder.com/1000x300" alt="Bild 3">
</div>
<div class="card-body">
<h5 class="card-title">Titel 3</h5>
<p class="card-text text-muted">Panoramabild – vollständig skaliert.</p>
<ul class="list-unstyled mb-0">
<li><a href="#">🔗 Link C</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>