<!-- Copyright Manfred Zainhofer -->
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Zainhofer Virtuelle Welten</title>
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/5/w3.css">
    <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
    
    <style>
        body {
            font-family: "Raleway", Arial, sans-serif;
            background-color: #f5f5f5;
        }

        .w3-card {
            background: white;
            padding: 10px;
            border-radius: 10px;
            box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
            display: inline-block;
            text-align: center;
        }

        .card-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 10px; /* Abstand zwischen den Bildern */
        }

        .card-image {
            width: 100%;
            height: auto;
            border: 5px solid #ddd; /* Rahmen wie bei einem Foto */
            border-radius: 5px;
            transition: filter 0.3s ease;
        }

        .card-image:hover {
            filter: grayscale(100%);
        }

        .half-size .card-image {
            width: 50%; /* Bilder in der rechten Spalte halb so groß */
        }
    </style>
</head>
<body>

<!-- !PAGE CONTENT! -->
<div class="w3-content" style="max-width:1500px; padding: 20px;">

    <!-- Header -->
    <header class="w3-container w3-xlarge w3-padding-24 w3-center">
        <h1>Zainhofer Virtuelle Welten</h1>
        <p>Ein Metaversum sind viele kleine Räume, die nahtlos aneinander passen, sowie direkt sichtbar und begehbar sind, als wäre es aus einem Guss.</p>
    </header>

    <!-- Photo Grid -->
    <div class="w3-row-padding">
        
        <!-- Linke Spalte (normale Größe) -->
        <div class="w3-half">
            <div class="card-container">
                <div class="w3-card">
                    <img src="https://i.pinimg.com/1200x/61/75/2a/61752aabc2b0a5cbb8f805bb7c43043c.jpg" class="card-image">
                </div>
                <div class="w3-card">
                    <img src="https://i.pinimg.com/1200x/c9/6a/ce/c96ace1ab3fd968dc73af211c8934b6d.jpg" class="card-image">
                </div>
                <div class="w3-card">
                    <img src="https://i.pinimg.com/1200x/ad/89/f2/ad89f28215bddffc1f83f4c85394e4de.jpg" class="card-image">
                </div>
            </div>
        </div>

        <!-- Rechte Spalte (halbe Größe) -->
        <div class="w3-half half-size">
            <div class="card-container">
                <div class="w3-card">
                    <img src="https://i.pinimg.com/1200x/8a/cc/92/8acc922ade88c5843b0cce6ae9a4353a.jpg" class="card-image">
                </div>
                <div class="w3-card">
                    <img src="https://i.pinimg.com/1200x/4f/19/32/4f1932a515e6a2c54af09bd20e74f690.jpg" class="card-image">
                </div>
                <div class="w3-card">
                    <img src="https://i.pinimg.com/1200x/86/97/63/869763b706183a70b5628c2f98aee16c.jpg" class="card-image">
                </div>
                <div class="w3-card">
                    <img src="https://i.pinimg.com/1200x/a4/50/e9/a450e9d2db340a00a7df4e2ac44491fa.jpg" class="card-image">
                </div>
                <div class="w3-card">
                    <img src="https://i.pinimg.com/1200x/fc/1e/d5/fc1ed584692c5a6f00ebc2bdcf8ca136.jpg" class="card-image">
                </div>
            </div>
        </div>

    </div>

</div>

</body>
</html>
