Skip to content
Snippets Groups Projects
Select Git revision
  • main default protected
  • krukod5n-main-patch-83010
  • boehntxp-main-patch-81897
3 results
Blame Permalink
visionen_aquarium.html 2.63 KiB 
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            overflow: hidden; /* Prevent scrolling */
        }

        .aquarium {
            width: 100%;
            height: 100%;
            object-fit: cover; /* Ensure the image covers the screen without distortion */
        }
    
        h1 {
            display: none;
        }
    
        /* .controls {
            display: flex;
            gap: 10px;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            padding: 1em 0 0 0;
        }
    
        .controls label {
            display: flex;
            align-items: center;
        }
    
        .controls input {
            margin-right: 15px;
            padding: 5px;
            font-size: 16px; 
        } */
    </style>

    <!-- <div class="controls">
        <label for="heightInput">Height:</label>
        <input type="text" id="heightInput" placeholder="e.g., 200px, 50%, auto">
        
        <label for="widthInput">Width:</label>
        <input type="text" id="widthInput" placeholder="e.g., 300px, 75%, auto">
    </div> -->

    <img class="aquarium" src="/medien/visionen.jpg"></img>


    <!-- <script>
        // Wait for the DOM content to load before running the script
        document.addEventListener('DOMContentLoaded', () => {
            // Get references to the height and width input elements
            const heightInput = document.getElementById('heightInput');
            const widthInput = document.getElementById('widthInput');
            // Get a reference to the element with the class 'aquarium'
            const aquarium = document.querySelector('.aquarium');

            // Function to update the aquarium's height
            heightInput.addEventListener('input', () => {
                // Get the input value
                const newHeight = heightInput.value;
                // Set the aquarium's height to the input value
                aquarium.style.height = newHeight;
            });

            // Function to update the aquarium's width
            widthInput.addEventListener('input', () => {
                // Get the input value
                const newWidth = widthInput.value;
                // Set the aquarium's width to the input value
                aquarium.style.width = newWidth;
            });
        });
    </script> -->
</body>
</html>