prof3ssorSt3v3/one.html

## one.html
<!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>Animating A Box</title>
    <style>
      html {
        font-size: 20px;
        line-height: 1.5;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
      }
      body {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
      }
      body > p {
        display: fixed;
        z-index: -1;
        top: 20px;
        left: 20px;
        width: 40vw;
      }
      .message {
        border: 1px solid hsl(290, 80%, 40%);
        background-color: hsl(290, 80%, 40%);
        color: hsl(290, 0%, 100%);
        text-align: center;
        width: 30ch;
        box-shadow: 2px 2px 8px #999;
        overflow: hidden;
        /*
        What is the default state on the screen for the box.
        */
      }
      .message h1 {
        font-size: 2rem;
        font-weight: 300;
        text-align: center;
        color: hsl(60, 80%, 50%);
        margin: 0;
        /*
        What is the default state for the heading in the box
        */
      }
      .message p {
        font-size: 1rem;
        font-weight: 100;
        padding: 0.5rem 1rem;
        /*
        What is the default state on the screen for the paragraph in the box.
        */
      }
      .message button {
        font-size: 1.2rem;
        font-weight: 500;
        width: 100%;
        background-color: hsl(290, 0%, 100%);
        color: hsl(290, 80%, 40%);
        padding: 1rem;
        text-transform: uppercase;
        /*
        What is the default state on the screen for the button in the box.
        */
      }
      button:active,
      button:focus {
        outline: none;
      }
      .message.off {
        transform: translateY(-400%); /* <-- this is just an example */
        /* What happens to the box when the user clicks the button */
      }
      .message.off h1 {
        /* What happens to the heading when the .off class is added */
      }
      .message.off p {
        /* What happens to the paragraph when the .off class is added */
      }
      .message.off button {
        /* What happens to the button when the .off class is added */
      }
    </style>
  </head>
  <body>
    <p>
      Instructions: Using only CSS `opacity`, `transform` and `transition`
      properties, create a starting point for the box, the paragraph, the
      heading, and the button which is used when the class `.off` is added to
      the box. Then create the default styles that are applied when the `.off`
      class is not added to the box. Then add a different transition to each of
      the four elements - the message box, the heading, the paragraph, and the
      button.
    </p>
    <div class="message">
      <h1>Message</h1>
      <p>
        This is an important message within a message box. This is important
        information about the important message.
      </p>
      <button>Click for More</button>
    </div>
    <script>
      document.addEventListener("DOMContentLoaded", () => {
        let box = document.querySelector(".message");
        let btn = box.querySelector("button");
        btn.addEventListener("click", ev => {
          box.classList.add("off");
          setTimeout(function() {
            box.classList.remove("off");
          }, 2000);
        });
      });
    </script>
  </body>
</html>
	<!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>Animating A Box</title>
	<style>
	html {
	font-size: 20px;
	line-height: 1.5;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
	Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
	}
	body {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	}
	body > p {
	display: fixed;
	z-index: -1;
	top: 20px;
	left: 20px;
	width: 40vw;
	}
	.message {
	border: 1px solid hsl(290, 80%, 40%);
	background-color: hsl(290, 80%, 40%);
	color: hsl(290, 0%, 100%);
	text-align: center;
	width: 30ch;
	box-shadow: 2px 2px 8px #999;
	overflow: hidden;
	/*
	What is the default state on the screen for the box.
	*/
	}
	.message h1 {
	font-size: 2rem;
	font-weight: 300;
	text-align: center;
	color: hsl(60, 80%, 50%);
	margin: 0;
	/*
	What is the default state for the heading in the box
	*/
	}
	.message p {
	font-size: 1rem;
	font-weight: 100;
	padding: 0.5rem 1rem;
	/*
	What is the default state on the screen for the paragraph in the box.
	*/
	}
	.message button {
	font-size: 1.2rem;
	font-weight: 500;
	width: 100%;
	background-color: hsl(290, 0%, 100%);
	color: hsl(290, 80%, 40%);
	padding: 1rem;
	text-transform: uppercase;
	/*
	What is the default state on the screen for the button in the box.
	*/
	}
	button:active,
	button:focus {
	outline: none;
	}
	.message.off {
	transform: translateY(-400%); /* <-- this is just an example */
	/* What happens to the box when the user clicks the button */
	}
	.message.off h1 {
	/* What happens to the heading when the .off class is added */
	}
	.message.off p {
	/* What happens to the paragraph when the .off class is added */
	}
	.message.off button {
	/* What happens to the button when the .off class is added */
	}
	</style>
	</head>
	<body>
	<p>
	Instructions: Using only CSS `opacity`, `transform` and `transition`
	properties, create a starting point for the box, the paragraph, the
	heading, and the button which is used when the class `.off` is added to
	the box. Then create the default styles that are applied when the `.off`
	class is not added to the box. Then add a different transition to each of
	the four elements - the message box, the heading, the paragraph, and the
	button.
	</p>
	<div class="message">
	<h1>Message</h1>
	<p>
	This is an important message within a message box. This is important
	information about the important message.
	</p>
	<button>Click for More</button>
	</div>
	<script>
	document.addEventListener("DOMContentLoaded", () => {
	let box = document.querySelector(".message");
	let btn = box.querySelector("button");
	btn.addEventListener("click", ev => {
	box.classList.add("off");
	setTimeout(function() {
	box.classList.remove("off");
	}, 2000);
	});
	});
	</script>
	</body>
	</html>