<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Final Project</title> <style> body { font-family: sans-serif; font-size: 14px; } h1 { border: 1px dotted #8064e9; padding: 5px; box-shadow: 2px 2px #9d86ee; } h2 { text-align: center; font-weight: lighter; color: #ffffff; background-color: #8064e9; padding: 20px; border-radius: 25px; } h3 { font-weight: lighter; } h2 { line-height: 1.4em; margin: 20px auto; padding: 30px; border-radius: 25px; background: linear-gradient( 45deg, #8064e9 0%, #8064e9 35%, #e52128 75% ); } .h2p { text-align: left; } .question { font-size: 28px; font-family: Arial; } hr { display: block; margin-block-start: 0.3em; margin-block-end: 0.3em; border-style:inset; border-width: 3px; } .quiz-field { text-align: center; border-radius: 25px; margin: 20px auto; padding: 30px; color: #ffffff; background: linear-gradient( 45deg, #8064e9 0%, #8064e9 35%, #e52128 75% ); } .personality-type { font-size: 28px; font-family: Arial; } .gallery { display: flex; border: 1px dotted #8064e9; margin: auto; box-shadow: 2px 2px #9d86ee; } figure { width: 900px; } figure img { width: 100%; } figure figcaption { font-size: 18px; text-size-adjust:inherit; } button { margin: 0 auto; display: block; width: 10%; font-size: 20px; color: #ffffff; position: relative; padding: 15px; border: 2px solid #ffffff; border-radius: 25px; background-color: transparent; transition: all 200ms ease; } button:hover { background-color: #ffffff; color: #7e4293; cursor: pointer; } </style> </head> <body> <h1> be <strong> <span style="font-family: Arial Black"> bold </span> </strong> <br /> not <em> italic </em> <br /> never <span style="font-family: Courier"> regular </span> </h1> <h2> <span class="question"> <strong> BEHAVIORAL GUIDELINES </strong> </span> <hr /> <p class="h2p"> People tend to lose control over their non-verbal behavior in challenging and unfamiliar situations. The 2-day =i =ػ <a href="https://www.shecodes.io"> SheCodes </a> workshop created by Mattieu Delac is one of the real-life scenarios where cognitive load, resulted from diverse external factors such as an unfamiliar technical vocabulary, a limited time, and density of estrogen per square meter among others, affected participants' non-verbal expressions to a significant degree. Some preliminary obsarvations of a conspicious behavior were detected by the hired scientific stuff and summarized below. Can you relate to some of the behavior? If so, press "Quiz" and check your personality type. </p> </h2> <div class="gallery"> <figure> <img src="https://i.imgur.com/ltaxZMD.jpg" alt="pic1" /> <figcaption> Staring at Matt. </figcaption> </figure> <figure> <img src="https://i.imgur.com/mroN19w.jpg" alt="pic2" /> <figcaption> Staring at Matt with an open mouth. </figcaption> </figure> <figure> <img src="https://i.imgur.com/4qfgwjW.jpg" alt="pic3" /> <figcaption> Staring at Matt and fearing for your life whenever the word "Excercise" pops up. </figcaption> </figure> <figure> <img src="https://i.imgur.com/t8F47Z8.jpg" alt="pic4" /> <figcaption> Staring at Matt and thinking: "Chinese is easier than JavaScript. </figcaption> </figure> <figure> <img src="https://i.imgur.com/2a9EQoA.jpg" alt="pic5" /> <figcaption> Staring at your laptop and searching for a missing bracket, dot or semicolon. </figcaption> </figure> <figure> <img src="https://i.imgur.com/z2UWHdj.jpg" alt="pic6" /> <figcaption> Staring at the only male participant in the room and asking yourself why is he here. </figcaption> </figure> </div> <div class="quiz-field"> <div class="personality-type"> <strong> PERSONALITY TYPE </strong> </div> <br /> <button> Quiz </button> </div> </div> <script> function apply() { let firstName = prompt("What is your first name?"); let age = prompt("How old are you?"); let behaviorQuestion = prompt("Have you observed some of this type of behavior during the SheCodes workshop? (i.e. yes, no)"); if (age >= 18 && behaviorQuestion =="yes") { alert("Hi " + firstName + " ! You are over 18 and haven't noticed it's a prank? Shame on you! you have been played by a SheCodes rookie, the entire page is a fake!"); } else { alert("Hi " + firstName + " ! Sorry, you have been played by a SheCodes rookie, the entire page is a fake!"); } } let button = document.querySelector("button"); button.addEventListener("click", apply); </script> </body> </html>