start [Worth]

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
<html>
<h1 class="sectionedit1 page-header pb-3 mb-4 mt-5" id="welcome_歡迎蒞臨">Social and Biological Factors of Individual Worth<br>個人價值的社會性和先天性因素<a class="anchorjs-link " href="#welcome_歡迎蒞臨" aria-label="Anchor link for: welcome_歡迎蒞臨" data-anchorjs-icon="" style="font-family: anchorjs-icons; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1; padding-left: 0.375em;"></a></h1>
</html>

<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;
        }
        
        @media only screen and (max-width: 767px) {
            .button {
            margin: 0;
  transform: scale(0.7, 0.7) translate(-20%, -20%);
  -ms-transform: scale(0.7, 0.7) translate(-20%, -20%); /* IE 9 */
  -webkit-transform: scale(0.7, 0.7) translate(-20%, -20%); /* Safari and Chrome */
  -o-transform: scale(0.7, 0.7) translate(-20%, -20%); /* Opera */
  -moz-transform: scale(0.7, 0.7) translate(-20%, -20%); /* Firefox */
}
        }
        
        .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: #c3e464ff;
        }

        .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: #c3e464ff;
        }

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

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

        .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: #a8cff0;
        }

        .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: #efdba5ff;
        }
        
        .title.genetics {
            position: absolute;
            top: -15%;
            opacity: 0;
            transition: opacity 0.2s, top 0.2s;
            color: #8fddf2ff;
        }
        
        .title.coding {
            position: absolute;
            top: -15%;
            opacity: 0;
            transition: opacity 0.2s, top 0.2s;
            color: #77da5c;
        }

        .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(10px);
            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 .title.coding {
            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?t=1706232797&w=500&h=500&tok=50b9ec&media=button-worth-and-value.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">The main topic of this period explored the issue of the worth of individuals, where our worth comes from, how society measures worth, and how these concepts and social understandings both shape our lives and are shaped by our beliefs and actions.</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?t=1706229658&w=500&h=500&tok=d4b197&media=button-success.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">Success can mean different things to different people. The estimation of our worth in the eyes of society will often depend on how much of “success” we are believed to have gained. The definition of success may change, depending on the situation, the social context, the realities of the time.</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?t=1706229658&w=500&h=500&tok=7e9071&media=button-gender-and-society.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">Most of us adhere to one of the two main genders that we usually genetically fall into. This is one of the biggest choices that we are not allowed to make in life, although it shapes, restricts, and facilitates our growth and development throughout it. </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?t=1706229658&w=500&h=500&tok=8aa010&media=button-women-workplace.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">Another factor that is often under consideration in measurements of worth of an individual is our work and our positions at work. Closely related to the topic of gender's effects and influences in society is the issue of women in the workplace. </p>
    </div>
        <div onclick="redirectPage('https://renickbell.net/ed/2024worth/doku.php?id=genetics')" class="button">
        <img class="image" src="https://renickbell.net/ed/2024worth/lib/exe/fetch.php?t=1706229658&w=500&h=500&tok=5d18da&media=button-genetics.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">This semester's science study gave students the theoretical and historical background which was necessary to consider the humanities theme of the semester. Students grappled with challenging real-world articles for adults, beginning with the basis of human life in DNA and then progressing through theories of evolution. </p>
    </div>
    <div onclick="redirectPage('https://renickbell.net/ed/2024worth/doku.php?id=coding')" class="button">
        <img class="image" src="https://renickbell.net/ed/2024worth/lib/exe/fetch.php?t=1706489091&w=500&h=500&tok=5e80b4&media=button-coding.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 coding">Coding</h1>
        <p class="description success">In this semester, each student spent the semester on a coding project more closely aligned to their interests. This also allowed them to focus on learning areas in which their skills required development. One commonality among their projects was the use of JavaScript, the world's most popular programming language.</p>
    </div>
</body>

</html>