yiler-button-test [Light]

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
<html>
<body onload="removeBootstrapStyle()">
   <script>
   
   function redirectPage(url) {
    window.location.href = url;
}

  function removeBootstrapStyle(){
    [...document.getElementsByClassName("button btn")].forEach(e => e.className = "button");
    [...document.getElementsByClassName("title page-header pb-3 mb-4 mt-5")].forEach(f => f.className = "title");
  }
</script>
    <style>
        .button {
            width: 400px;
            height: 400px;
            background-color: none;
            position: relative;
            overflow: hidden;
            margin: 3px;
        }

        .image {
            width: 100%;
            height: 100%;
        }

        .overlay {
            width: 100%;
            height: 50%;
            background-color: black;
            position: absolute;
            transform-origin: left;
            transform: scaleX(0);
            transition: transform 0.45s;
            opacity: 0.8;
        }

        .overlay2 {
            width: 100%;
            height: 50%;
            top: 50%;
            background-color: black;
            position: absolute;
            transform-origin: right;
            transform: scaleX(0);
            transition: transform 0.45s;
            opacity: 0.8;
        }

        .button:hover {
            cursor: pointer;
        }

        .button:hover .overlay {
            transform: scaleX(1);
        }

        .button:hover .overlay2 {
            transform: scaleX(1);
        }

        .title {
            font-family: 'helvetica', 'Arial', sans-serif;
            position: absolute;
            top:  1.7%;
            left: 10%;
            font-size: 40px;
            color: white;
            font-weight:650;
            overflow-wrap: normal;
            word-break: normal;
            max-width: 350px;
        }

        .description {
            line-height: 1.2;
            position: absolute;
            top: 150%;
            left: 10%;
            font-size: 21px;
            color: white;
            transition: top 0.45s ease-in-out;
            overflow-wrap: normal;
            word-break: normal;
            max-width: 330px;
        }

        .button:hover .description {
            top: 25%
        }

        .button:hover .title {
            animation: glow 0.5s ease-in;
            animation-delay: 0.2s;
            animation-fill-mode: forwards;
        }

        .button {
            float: left;
            font-family: Arial, Helvetica, sans-serif;
        }

        @-webkit-keyframes glow {
            from {
                text-shadow: 0 0 0px rgb(170, 170, 170);
            }

            to {
                text-shadow: 0 0 20px rgb(170, 170, 170), 0 0 30px rgb(170, 170, 170), 0 0 40px rgb(170, 170, 170);
            }
        }
    </style>

    <div onclick="redirectPage('https://renickbell.net/ed/2023light/doku.php?id=light')" class="button">
        <div class="overlay"></div>
        <div class="overlay2"></div>
        <h1 class="title">Light</h1>
        <p class="description">Light makes apparent what our most often relied upon sense can observe. The absence of light hides what might otherwise be obvious. In addition to observable light, light which is beyond the scope of normal human vision also affects and is utilized by us on a daily basis.</p>
        <img class="image" src="https://renickbell.net/ed/2023light/lib/exe/fetch.php?media=button-light.jpg">
    </div>
    <div onclick="redirectPage('https://renickbell.net/ed/2023light/doku.php?id=perception')" class="button">
        <div class="overlay"></div>
        <div class="overlay2"></div>
        <h1 class="title">Perception</h1>
        <p class="description">The process of perception starts with sensory input. The class learned about our five main senses, and other senses that that science has identified. We learned about how sensory input might be ignored or misreceived based on different factors.</p>
        <img class="image" src="https://renickbell.net/ed/2023light/lib/exe/fetch.php?media=button-perception.jpg">
    </div>
    <div onclick="redirectPage('https://renickbell.net/ed/2023light/doku.php?id=reality')" class="button">
        <div class="overlay"></div>
        <div class="overlay2"></div>
        <h1 class="title">Reality</h1>
        <p class="description">We often define “reality” to refer to the state of existence or the world as it is, independent of subjective perception or interpretation. At the same time, we can’t help but wonder if reality can exist outside of observation and experience of an observer.</p>
        <img class="image" src="https://renickbell.net/ed/2023light/lib/exe/fetch.php?media=button-reality.jpg">
    </div>
    </div>
    <div onclick="redirectPage('https://renickbell.net/ed/2023light/doku.php?id=about-students')" class="button">
        <div class="overlay"></div>
        <div class="overlay2"></div>
        <h1 class="title">Our Students</h1>
        <p class="description">This education program currently involves a small group of students. Each is unique and talented in their own way, with different strengths and contributions to our team. We are incredibly proud of the growth that each has made and see their potential to become great achievers in varying fields in the future.</p>
        <img class="image" src="https://renickbell.net/ed/2023light/lib/exe/fetch.php?media=button-placeholder.png">
    </div>
    </div>
    <div onclick="redirectPage('https://renickbell.net/ed/2023light/doku.php?id=about-website')" class="button">
        <div class="overlay"></div>
        <div class="overlay2"></div>
        <h1 class="title">This Website</h1>
        <p class="description">What is “real”, what is “reality”? How can we be sure that we see the world as it really is, and afterwards are making decisions and conducting actions based on logical thinking and reliable facts? The main topic of this period deals with reality, light, perception, and shaping behavior through shaping perception.</p>
        <img class="image" src="https://renickbell.net/ed/2023light/lib/exe/fetch.php?media=button-placeholder.png">
    </div>
    </div>
    <div onclick="redirectPage('https://renickbell.net/ed/2023light/doku.php?id=photos-art')" class="button">
        <div class="overlay"></div>
        <div class="overlay2"></div>
        <h1 class="title">Art Photography</h1>
        <p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
        <img class="image" src="https://renickbell.net/ed/2023light/lib/exe/fetch.php?media=button-art-photography.jpg">
    </div>
</body>

</html>