92 lines
2.8 KiB
HTML
92 lines
2.8 KiB
HTML
<!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>
|
|
<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 */
|
|
}
|
|
|
|
.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>
|
|
</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>
|
|
</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>
|
|
|
|
<!-- Weitere Sektionen hier -->
|
|
|
|
</div>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
|
</body>
|
|
</html>
|