button-test [Worth]

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
====== Button test ======

<html>

<head>

    <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");
            [...document.getElementsByClassName("title")].forEach(e => {
            e.className = `${e.className} ${e.id}`;
            e.removeAttribute('id');
            });
            [...document.getElementsByClassName("title")].filter(e => e.className == "title ")[0].className = "title line";
            [...document.getElementsByClassName("anchorjs-link ")].forEach(e => e.remove());
        }
    </script>
    <style>
        .button {
            width: 400px;
            height: 400px;
            background-color: none;
            position: relative;
            overflow: hidden;
            margin: 3px;
        }
        
        .image {
            position: absolute;
            width: 100%;
            height: 100%;
            filter: blur(0px);
            transition: filter 0.5s;
        }

        .title {
            font-family: 'Arial', sans-serif;
            position: absolute;
            top: -3%;
            left: 5%;
            font-size: 36px;
            color: white;
            font-weight: 650;
        }

        .description {
            line-height: 1.2;
            position: absolute;
            top: 15%;
            left: 5%;
            font-size: 21px;
            color: white;
            opacity: 0;
            transition: opacity 0.2s;
            overflow-wrap: normal;
            word-break: normal;
            max-width: 330px;
            color: #e7e7e7;
            font-weight: 900;
        }

        .title.worth {
            position: absolute;
            top: -15%;
            opacity: 0;
            transition: opacity 0.2s, top 0.2s;
            color: #FFECB3;
        }

        .title.and {
            position: absolute;
            left: 33.3%;
            opacity: 0;
            transition: opacity 0.2s;
            color: #e7e7e7;
        }

        .title.value {
            position: absolute;
            left: 60%;
            opacity: 0;
            transition: opacity 0.2s, left 0.2s;
            color: #8cb6de;
        }

        .title.success {
            position: absolute;
            top: -15%;
            opacity: 0;
            transition: opacity 0.2s, top 0.2s;
            color: #8bdaa5;
        }

        .title.gender {
            position: absolute;
            top: -15%;
            opacity: 0;
            transition: opacity 0.2s, top 0.2s;
            color: #b6b6f0;
        }

        .title.and-1 {
            position: absolute;
            left: 39%;
            opacity: 0;
            transition: opacity 0.2s;
            color: #e7e7e7;
        }

        .title.society {
            position: absolute;
            left: 64%;
            opacity: 0;
            transition: opacity 0.2s, left 0.2s;
            color: #96e3e3;
        }

        .title.women {
            position: absolute;
            top: -15%;
            opacity: 0;
            transition: opacity 0.2s, top 0.2s;
            color: #F7CAC9;
        }

        .title.line {
            position: absolute;
            left: 40%;
            opacity: 0;
            transition: opacity 0.2s;
            color: #e7e7e7;
        }

        .title.workplace {
            position: absolute;
            left: 50%;
            opacity: 0;
            transition: opacity 0.2s, left 0.2s;
            color: #a8cff0;
        }
        
        .title.genetics {
            position: absolute;
            top: -15%;
            opacity: 0;
            transition: opacity 0.2s, top 0.2s;
            color: #ddf0a8;
        }

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

        .overlay.two {
            top: 20%;
            transform-origin: right;
            transition-delay: 80ms;
        }

        .overlay.three {
            top: 40%;
            transition-delay: 240ms;
        }

        .overlay.four {
            top: 60%;
            transform-origin: right;
            transition-delay: 400ms;
        }

        .overlay.five {
            top: 80%;
            transition-delay: 560ms;
        }

        .button:hover {
            cursor: pointer;
        }


        .button:hover .image {
            filter: blur(7px);
            transition: filter 0.9s;
        }

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

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

        .button:hover .title.worth {
            transition: top 0.2s, opacity 0.2s;
            transition-delay: 0.75s;
            opacity: 1;
            top: -3%;
        }

        .button:hover .title.and {
            opacity: 1;
            transition: opacity 0.2s;
            transition-delay: 1s;
        }

        .button:hover .title.value {
            transition: left 0.2s, opacity 0.2s;
            transition-delay: 1.25s;
            opacity: 1;
            left: 51.8%;
        }

        .button:hover .title.success {
            transition: top 0.2s, opacity 0.2s;
            transition-delay: 0.75s;
            opacity: 1;
            top: -3%;
        }

        .button:hover .title.gender {
            transition: top 0.2s, opacity 0.2s;
            transition-delay: 0.75s;
            opacity: 1;
            top: -3%;
        }

        .button:hover .title.and-1 {
            opacity: 1;
            transition: opacity 0.2s;
            transition-delay: 1s;
        }

        .button:hover .title.society {
            transition: left 0.2s, opacity 0.2s;
            transition-delay: 1.25s;
            opacity: 1;
            left: 56.5%;
        }

        .button:hover .title.women {
            transition: top 0.2s, opacity 0.2s;
            transition-delay: 0.75s;
            opacity: 1;
            top: -3%;
        }

        .button:hover .title.line {
            opacity: 1;
            transition: opacity 0.2s;
            transition-delay: 1s;
        }

        .button:hover .title.workplace {
            transition: left 0.2s, opacity 0.2s;
            transition-delay: 1.25s;
            opacity: 1;
            left: 45.2%;
        }

        .button:hover .title.genetics {
            transition: top 0.2s, opacity 0.2s;
            transition-delay: 0.75s;
            opacity: 1;
            top: -3%;
        }

        .button:hover .description.worthAndValue {
            opacity: 1;
            transition: opacity 0.2s;
            transition-delay: 1.5s;
        }

        .button:hover .description.success {
            opacity: 1;
            transition: opacity 0.2s;
            transition-delay: 1s;
        }

        .button:hover .description.genderAndSociety {
            opacity: 1;
            transition: opacity 0.2s;
            transition-delay: 1.5s;
        }

        .button {
            float: left;
            font-family: Arial, Helvetica, sans-serif;
        }
    </style>
</head>

<body onload="removeBootstrapStyle()">
    <div onclick="redirectPage('https://renickbell.net/ed/2024worth/doku.php?id=worth-and-value')" class="button">
        <img class="image" src="https://renickbell.net/ed/2024worth/lib/exe/fetch.php?cache=&media=yiler-website-placeholder.png">
        <div class="overlay"></div>
        <div class="overlay two"></div>
        <div class="overlay three"></div>
        <div class="overlay four"></div>
        <div class="overlay five"></div>
        <h1 class="title worth">Worth</h1>
        <h1 class="title and">and</h1>
        <h1 class="title value">Value</h1>
        <p class="description worthAndValue">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>
    </div>
    <div onclick="redirectPage('https://renickbell.net/ed/2024worth/doku.php?id=success')" class="button">
        <img class="image" src="https://renickbell.net/ed/2024worth/lib/exe/fetch.php?cache=&media=yiler-website-placeholder.png">
        <div class="overlay"></div>
        <div class="overlay two"></div>
        <div class="overlay three"></div>
        <div class="overlay four"></div>
        <div class="overlay five"></div>
        <h1 class="title success">Success</h1>
        <p class="description success">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>
    </div>
    <div onclick="redirectPage('https://renickbell.net/ed/2024worth/doku.php?id=gender-and-society')" class="button">
        <img class="image" src="https://renickbell.net/ed/2024worth/lib/exe/fetch.php?cache=&media=yiler-website-placeholder.png">
        <div class="overlay"></div>
        <div class="overlay two"></div>
        <div class="overlay three"></div>
        <div class="overlay four"></div>
        <div class="overlay five"></div>
        <h1 class="title gender">Gender</h1>
        <h1 class="title and-1">and</h1>
        <h1 class="title society">Society</h1>
        <p class="description genderAndSociety">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>
    </div>
    <div onclick="redirectPage('https://renickbell.net/ed/2024worth/doku.php?id=women-workplace')" class="button">
        <img class="image" src="https://renickbell.net/ed/2024worth/lib/exe/fetch.php?cache=&media=yiler-website-placeholder.png">
        <div class="overlay"></div>
        <div class="overlay two"></div>
        <div class="overlay three"></div>
        <div class="overlay four"></div>
        <div class="overlay five"></div>
        <h1 class="title women">Women</h1>
        <h1 class="title line">-</h1>
        <h1 class="title workplace">Workplace</h1>
        <p class="description genderAndSociety">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>
    </div>
        <div onclick="redirectPage('https://renickbell.net/ed/2023light/doku.php?id=light')" class="button">
        <img class="image" src="https://renickbell.net/ed/2024worth/lib/exe/fetch.php?cache=&media=yiler-website-placeholder.png">
        <div class="overlay"></div>
        <div class="overlay two"></div>
        <div class="overlay three"></div>
        <div class="overlay four"></div>
        <div class="overlay five"></div>
        <h1 class="title genetics">Genetics</h1>
        <p class="description success">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>
    </div>
</body>

</html>