davidmbedford/index.html

## index.html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>JavaScript demo</title>
  <style>
    /* General styles */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    h1 {
      color: #6b3737;
      font-weight: 600;
      font-size: 2rem;
      opacity: 0.8;
    }

    h2,
    p {
      color: #6b3737;
      font-weight: 500;
    }

    h3 {
      color: #964242;
      font-weight: 600;
      opacity: 0.8;
    }

    img {
      max-width: 200px;
      margin: 0px 5px;
    }

    main {
      font-family: Verdana, Geneva, Tahoma, sans-serif;
      min-height: 100vh;
      background: linear-gradient(to right top, #df6565, #eb6c6c);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    section {
      min-height: 80vh;
      max-height: 95vh;
      max-width: 65%;
      background: linear-gradient(to right bottom,
          rgba(250, 250, 250, 0.7),
          rgba(250, 250, 250, 0.3));
      border-radius: 2rem;
      z-index: 2;
      backdrop-filter: blur(1.5rem);
      display: flex;
      visibility: hidden;
    }

    /* Subsections */
    .side-panel {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-evenly;
      text-align: center;
      background: linear-gradient(to right bottom,
          rgba(250, 250, 250, 0.7),
          rgba(250, 250, 250, 0.3));
      border-radius: 2rem;
      visibility: visible;
    }

    .main-header {
      margin-bottom: 3em;
    }

    .main-panel {
      flex: 2;
      margin: 5em;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      overflow-y: auto;
    }

    .card {
      display: flex;
      background: linear-gradient(to left top,
        rgba(250, 250, 250, 0.8),
        rgba(250, 250, 250, 0.5));
      border-radius: 1rem;
      margin: 2rem 0rem;
      padding: 2rem;
      box-shadow: 6px 6px 20px rgba(122, 122, 122, 0.212);
      justify-content: space-between;
    }

    .card-text {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .card-text p {
      margin-bottom: 10px;
    }

    /* Button and Effects */
    .reveal {
      visibility: visible !important;
    }

    #mainbutton {
      padding: 5px;
      margin-top: 10px;
      font-size: 1rem;
      font-weight: bold;
      box-shadow: 0px 5px 0px -2px rgb(151, 151, 151);
    }

    #mainbutton:hover {
      box-shadow: 0px 6px 1px -1px rgb(151, 151, 151)
    }

    @media only screen and (max-width: 1400px) {
      section {
        max-width: 80%;
      }
    }

    @media only screen and (max-width: 1200px) {
      section {
        max-width: 95%;
      }
    }
  </style>
</head>

<body>
  <main>
    <section id="reveal">

      <div class="side-panel">
        <div>
          <img src="https://vuejs.org/images/logo.png" alt="Vue logo" />
          <h3>Our First Vue App</h3>
          <button id="mainbutton" onclick="hide()">Click here</button>
        </div>
      </div>

      <div>
        <div class="main-panel">
          <div class="main-header">
            <h1>So You've Opened the Main Panel...</h1>
          </div>

          <div class="card">
            <div class="card-text">
              <p>And as it turns out, there's not much to see here. This app was made for the sole purpose of
                demonstrating how easy it is to migrate code to a Vue application. The only JavaScript in this app
                is the `reveal()` function attached to the button.
              </p>

              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in scelerisque arcu.
                Phasellus tellus diam, laoreet a nisl ac, aliquam ullamcorper leo. Pellentesque
                vehicula in purus vitae molestie. Fusce non sagittis justo. Sed id accumsan libero.
                Morbi ipsum elit, molestie a ligula at, pharetra congue orci. Integer dictum enim in
                lacus tincidunt, aliquam venenatis turpis cursus. Sed a egestas diam. Morbi pulvinar
                congue congue. Vivamus finibus ultricies metus scelerisque pellentesque.
              </p>

            </div>
          </div>
        </div>
      </div>

    </section>
  </main>

  <script>
    function hide() {
      document.getElementById("reveal").classList.toggle("reveal")
    }
  </script>
</body>

</html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>JavaScript demo</title>
	<style>
	/* General styles */
	* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	}

	h1 {
	color: #6b3737;
	font-weight: 600;
	font-size: 2rem;
	opacity: 0.8;
	}

	h2,
	p {
	color: #6b3737;
	font-weight: 500;
	}

	h3 {
	color: #964242;
	font-weight: 600;
	opacity: 0.8;
	}

	img {
	max-width: 200px;
	margin: 0px 5px;
	}

	main {
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	min-height: 100vh;
	background: linear-gradient(to right top, #df6565, #eb6c6c);
	display: flex;
	align-items: center;
	justify-content: center;
	}

	section {
	min-height: 80vh;
	max-height: 95vh;
	max-width: 65%;
	background: linear-gradient(to right bottom,
	rgba(250, 250, 250, 0.7),
	rgba(250, 250, 250, 0.3));
	border-radius: 2rem;
	z-index: 2;
	backdrop-filter: blur(1.5rem);
	display: flex;
	visibility: hidden;
	}

	/* Subsections */
	.side-panel {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-evenly;
	text-align: center;
	background: linear-gradient(to right bottom,
	rgba(250, 250, 250, 0.7),
	rgba(250, 250, 250, 0.3));
	border-radius: 2rem;
	visibility: visible;
	}

	.main-header {
	margin-bottom: 3em;
	}

	.main-panel {
	flex: 2;
	margin: 5em;
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	overflow-y: auto;
	}

	.card {
	display: flex;
	background: linear-gradient(to left top,
	rgba(250, 250, 250, 0.8),
	rgba(250, 250, 250, 0.5));
	border-radius: 1rem;
	margin: 2rem 0rem;
	padding: 2rem;
	box-shadow: 6px 6px 20px rgba(122, 122, 122, 0.212);
	justify-content: space-between;
	}

	.card-text {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	}

	.card-text p {
	margin-bottom: 10px;
	}

	/* Button and Effects */
	.reveal {
	visibility: visible !important;
	}

	#mainbutton {
	padding: 5px;
	margin-top: 10px;
	font-size: 1rem;
	font-weight: bold;
	box-shadow: 0px 5px 0px -2px rgb(151, 151, 151);
	}

	#mainbutton:hover {
	box-shadow: 0px 6px 1px -1px rgb(151, 151, 151)
	}

	@media only screen and (max-width: 1400px) {
	section {
	max-width: 80%;
	}
	}

	@media only screen and (max-width: 1200px) {
	section {
	max-width: 95%;
	}
	}
	</style>
	</head>

	<body>
	<main>
	<section id="reveal">

	<div class="side-panel">
	<div>
	<img src="https://vuejs.org/images/logo.png" alt="Vue logo" />
	<h3>Our First Vue App</h3>
	<button id="mainbutton" onclick="hide()">Click here</button>
	</div>
	</div>

	<div>
	<div class="main-panel">
	<div class="main-header">
	<h1>So You've Opened the Main Panel...</h1>
	</div>

	<div class="card">
	<div class="card-text">
	<p>And as it turns out, there's not much to see here. This app was made for the sole purpose of
	demonstrating how easy it is to migrate code to a Vue application. The only JavaScript in this app
	is the `reveal()` function attached to the button.
	</p>

	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in scelerisque arcu.
	Phasellus tellus diam, laoreet a nisl ac, aliquam ullamcorper leo. Pellentesque
	vehicula in purus vitae molestie. Fusce non sagittis justo. Sed id accumsan libero.
	Morbi ipsum elit, molestie a ligula at, pharetra congue orci. Integer dictum enim in
	lacus tincidunt, aliquam venenatis turpis cursus. Sed a egestas diam. Morbi pulvinar
	congue congue. Vivamus finibus ultricies metus scelerisque pellentesque.
	</p>

	</div>
	</div>
	</div>
	</div>

	</section>
	</main>

	<script>
	function hide() {
	document.getElementById("reveal").classList.toggle("reveal")
	}
	</script>
	</body>

	</html>