initial layout & first draft
This commit is contained in:
dalfuss
parent
d6e8feff40
commit
b67f7061dd
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
.twitch {
|
||||
color: #9146ff;
|
||||
}
|
||||
|
||||
.twitter {
|
||||
color: #1DA1F2;
|
||||
}
|
||||
|
||||
.vgen {
|
||||
color: #B8FF26;
|
||||
}
|
||||
194
index.html
194
index.html
|
|
@ -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">
|
||||
<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" />
|
||||
</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>
|
||||
<!-- 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="./static/yume_emotes.jpeg" class="img-fluid rounded" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-8">
|
||||
|
||||
<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 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" />
|
||||
</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>
|
||||
</div>
|
||||
|
||||
</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="./static/bg_rig_logo.png" class="img-fluid rounded" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-8">
|
||||
|
||||
<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>
|
||||
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 923 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 142 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 909 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 190 KiB |
83
test.html
83
test.html
|
|
@ -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>
|
||||
Loading…
Reference in New Issue