| Both sides previous revision Previous revision Next revision | Previous revision |
| yiler-button-test [2023/06/04 17:59] – yiler.huang | yiler-button-test [2023/06/04 20:00] (current) – yiler.huang |
|---|
| width: 100%; | width: 100%; |
| height: 100%; | height: 100%; |
| } | |
| |
| .description{ | |
| line-height: 1.2; | |
| } | } |
| |
| |
| .title { | .title { |
| 'Helvetica', 'Arial', sans-serif; | font-family: 'helvetica', 'Arial', sans-serif; |
| position: absolute; | position: absolute; |
| top: 1.7%; | top: 1.7%; |
| color: white; | color: white; |
| font-weight:650; | font-weight:650; |
| | overflow-wrap: normal; |
| | word-break: normal; |
| | max-width: 350px; |
| } | } |
| |
| .description { | .description { |
| | line-height: 1.2; |
| position: absolute; | position: absolute; |
| top: 150%; | top: 150%; |
| </style> | </style> |
| |
| <div onclick="redirectPage('http://stackoverflow.com')" class="button"> | <div onclick="redirectPage('https://renickbell.net/ed/2023light/doku.php?id=light')" class="button"> |
| <div class="overlay"></div> | <div class="overlay"></div> |
| <div class="overlay2"></div> | <div class="overlay2"></div> |
| <h1 class="title">Light</h1> | <h1 class="title">Light</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> | <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"> | <img class="image" src="https://renickbell.net/ed/2023light/lib/exe/fetch.php?media=button-light.jpg"> |
| </div> | </div> |
| <div onclick="redirectPage('http://stackoverflow.com')" class="button"> | <div onclick="redirectPage('https://renickbell.net/ed/2023light/doku.php?id=perception')" class="button"> |
| <div class="overlay"></div> | <div class="overlay"></div> |
| <div class="overlay2"></div> | <div class="overlay2"></div> |
| <h1 class="title">Perception</h1> | <h1 class="title">Perception</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> | <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"> | <img class="image" src="https://renickbell.net/ed/2023light/lib/exe/fetch.php?media=button-perception.jpg"> |
| </div> | </div> |
| <div onclick="redirectPage('http://stackoverflow.com')" class="button"> | <div onclick="redirectPage('https://renickbell.net/ed/2023light/doku.php?id=reality')" class="button"> |
| <div class="overlay"></div> | <div class="overlay"></div> |
| <div class="overlay2"></div> | <div class="overlay2"></div> |
| <h1 class="title">Reality</h1> | <h1 class="title">Reality</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> | <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"> | <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> | </div> |
| </body> | </body> |