humphd/index.html

## index.html
<!doctype html>
<html>
  <head>
    <title>CSS Layout Example</title>
    <meta charset="utf-8">

    <!-- Deal with viewport sizing on mobile: https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Google Fonts: 1) body text - Oswald Regular; 2) headings Cardo Regular -->
    <link href="https://fonts.googleapis.com/css?family=Cardo:400,700|Oswald" rel="stylesheet">

    <!-- Syntax Highlighting via Highlight.js -->
    <link rel="stylesheet"
      href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/styles/github.min.css">

    <!-- Our styles -->
    <link rel="stylesheet" href="styles.css" type="text/css">
  </head>

  <body class="dark">
    <h1>CSS Example</h1>
    <p>A blog post example to practice using CSS.</p>

    <main>
      <article>
        <h2>Blog Post Main Title</h2>
        <p>Published <time datetime="2020-03-13">March, 13, 2020</time></p>

        <section>
          <h3>Subheading 1</h3>

          <!-- Lorem Ipsum placeholder text generated with https://www.lipsum.com/ -->
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi et orci ultrices, faucibus arcu sit amet, dictum mi. Sed mattis ultricies varius. Phasellus euismod sapien massa, eget facilisis est vestibulum non. In vehicula est ac laoreet vulputate. Quisque ac rutrum orci. Pellentesque faucibus mi urna, eu pellentesque sapien rutrum vel. Mauris eget elementum neque. Integer sem ligula, consectetur sed viverra a, rutrum sit amet quam. Cras dictum justo cursus mollis tincidunt. Sed molestie malesuada quam ac bibendum.</p>
          <p>Nam id sagittis risus. Nullam sodales eros in enim ultricies posuere. Mauris condimentum eros metus, ac iaculis sem ullamcorper non. Integer cursus dolor sed justo cursus, eget feugiat velit vulputate. Cras accumsan arcu ac laoreet auctor. Curabitur ac nunc enim. Pellentesque at purus pretium, congue dui id, eleifend metus. Donec sed egestas urna. Vivamus posuere egestas justo, eget egestas justo.</p>

          <ul>
            <li>Curabitur scelerisque fermentum metus</li>
            <li>Maecenas eget tortor non dolor varius facilisis</li>
            <li>Proin rhoncus nisi a orci mattis vehicula</li>
            <li>Mauris a arcu cursus, consequat ipsum sit amet, ultrices dui</li>
          </ul>

          <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque feugiat velit quis sem varius, in bibendum neque scelerisque. In euismod erat sed tristique dignissim.</p>

          <!-- https://unsplash.com/photos/tZc3vjPCk-Q -->
          <figure>
            <img src="ui.jpg" alt="UI design">
            <figcaption><a style="background-color:black;color:white;text-decoration:none;padding:4px 6px;font-family:-apple-system, BlinkMacSystemFont, 'San Francisco', 'Helvetica Neue', Helvetica, Ubuntu, Roboto, Noto, 'Segoe UI', Arial, sans-serif;font-size:12px;font-weight:bold;line-height:1.2;display:inline-block;border-radius:3px" href="https://unsplash.com/@halgatewood?utm_medium=referral&amp;utm_campaign=photographer-credit&amp;utm_content=creditBadge" target="_blank" rel="noopener noreferrer" title="Download free do whatever you want high-resolution photos from Hal Gatewood"><span style="display:inline-block;padding:2px 3px"><svg xmlns="http://www.w3.org/2000/svg" style="height:12px;width:auto;position:relative;vertical-align:middle;top:-2px;fill:white" viewBox="0 0 32 32"><title>unsplash-logo</title><path d="M10 9V0h12v9H10zm12 5h10v18H0V14h10v9h12v-9z"></path></svg></span><span style="display:inline-block;padding:2px 3px">Hal Gatewood</span></a></figcaption>
          </figure>

          <!-- Code block.  Use he.js and highlight.js to encode and syntax highlight-->
          <pre>
            <code>
/**
 * Practice Problem: a Morse Code translator
 */
var alpha = {
    A: '.-',
    B: '-...',
    C: '-.-.',
    D: '-..',
    E: '.',
    F: '..-.',
    G: '--.',
    H: '....',
    I: '..',
    J: '.---',
    K: '-.-',
    L: '.-..',
    M: '--',
    N: '-.',
    O: '---',
    P: '.--.',
    Q: '--.-',
    R: '.-.',
    S: '...',
    T: '-',
    U: '..-',
    V: '...-',
    W: '.--',
    X: '-..-',
    Y: '-.--',
    Z: '--..',
    ' ': '/'
  };

  // Object to provide lookup of letter (value) for a given morse code (key).
  var morse = {
      '.-': 'A',
      '-...': 'B',
      '-.-.': 'C',
      '-..': 'D',
      '.': 'E',
      '..-.': 'F',
      '--.': 'G',
      '....': 'H',
      '..': 'I',
      '.---': 'J',
      '-.-': 'K',
      '.-..': 'L',
      '--': 'M',
      '-.': 'N',
      '---': 'O',
      '.--.': 'P',
      '--.-': 'Q',
      '.-.': 'R',
      '...': 'S',
      '-': 'T',
      '..-': 'U',
      '...-': 'V',
      '.--': 'W',
      '-..-': 'X',
      '-.--': 'Y',
      '--..': 'Z',
      '/': ' '
  };

  // Return `true` if all characters are morse code.  Use a RegExp.
  function isMorse(characters) {
      return /^[.\- /]*$/.test(characters);
  }

  // Return `true` if all characters are part of the alphabet defined in `alpha`.  Use a RegExp.
  function isAlpha(characters) {
      return /^[A-Z ]*$/.test(characters);
  }

  // Given an alphabet message, convert and return in morse code.  Use your morse and/or alpha object.
  // Return undefined if text is not alpha.
  function textToMorse(text) {
      function convertWordToMorse(word) {
          var morse = '';
          var letter;

          // Loop across all letters in the word, convert to morse, and build a new string
          for(var i = 0; i < word.length; i++) {
              // Get the letter in the word at position i
              letter = word.charAt(i);
              // Look up the morse value for this, by using the letter as a key into the alpha object.
              // Each morse "letter" has a space after it.
              morse += alpha[letter] + ' ';
          }

          // Return this new morse string, removing the extra trailing whitespace
          return morse.trim();
      }

      // turn text into UPPER CASE (if not already)
      text = text.toUpperCase();

      // Split into separate words (break on spaces)
      words = text.split(' ');

      // Run each word through convertWordToMorse and build a new array
      var morse = words.map(function(word) {
          return convertWordToMorse(word);
      });

      // Return a string of all words converted to morse, joined by /
      return morse.join('/');
  }

  // Given a morse code message, convert and return in text.  Use your morse and/or alpha object.
  // Return undefined if morse is not proper code.
  function morseToText(data) {

      function convertMorstToWord(morseWord) {
          // Each morse letter is sparated by a space. Convert to an array.
          morseWord = morseWord.split(' ');

          // Build a new array by looking up each morse letter in the morse object, join together
          // into a string, and return.
          var letters = morseWord.map(function(morseLetter) {
              return morse[morseLetter];
          });

          return letters.join('');
      }

      // Split the morse into separate words (/ is the separator)
      var morseWords = data.split('/');

      // Go through each morse word, and convert into alpha, building a new array.
      var words = morseWords.map(function(morseWord) {
          return convertMorstToWord(morseWord);
      });

      return words.join(' ');
  }

  // Constructor function that takes a `message` (String), which can be either morse or alpha.
  // Use your functions above to decide how to store a value for `any` on `this`
  function Message(any) {
      // Store the value as UPPER CASE, since our objects work that way.
      this.msg = any.toUpperCase();
  }

  // Return the message as morse code, converting if necessary
  Message.prototype.toMorse = function() {
      if(isMorse(this.msg)) {
          return this.msg;
      }

      return textToMorse(this.msg);
  };

  // Return the message as alpha characters, converting if necessary
  Message.prototype.toAlpha = function() {
      if(isAlpha(this.msg)) {
          return this.msg;
      }

      return morseToText(this.msg);
  };


  var msg1 = new Message('--- -... .--- . -.-. - .../.. -./.--- .- ...- .- ... -.-. .-. .. .--. -/.- .-. ./...- . .-. -.--/.--. --- .-- . .-. ..-. ..- .-..');
  console.log(msg1.toAlpha());
  console.log(msg1.toMorse());

  var msg2 = new Message('I am learning how to use Objects in JavaScript');
  console.log(msg2.toMorse());
  console.log(msg2.toAlpha());
            </code>
          </pre>

          <p>Phasellus tincidunt mauris enim, a mollis lectus suscipit mollis. Suspendisse mollis ante at lectus placerat finibus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer nec felis eget magna dignissim commodo et eu est. Aliquam ac scelerisque erat. Nam sed scelerisque sapien, sollicitudin commodo urna. Nulla nec tristique neque, sit amet condimentum urna. Etiam at nisi ex. Donec non vehicula dolor, id aliquet urna. Integer eleifend, arcu et vestibulum porta, arcu massa laoreet ante, et suscipit lorem urna id nisl. Nunc consectetur tristique urna, quis ultrices lacus. Vivamus malesuada laoreet quam eget fermentum. Praesent fringilla diam in ultricies maximus. Nunc accumsan metus sit amet ipsum tincidunt commodo. Nullam sit amet pellentesque diam, nec ultricies mi.</p>

          <blockquote>Praesent dignissim metus rutrum ipsum vehicula ultricies. Cras laoreet sapien sed ex dictum tincidunt. Aliquam nec rhoncus mauris. Maecenas hendrerit, ipsum in feugiat pulvinar, nisl odio elementum nibh, sit amet lacinia urna ipsum vitae augue. Sed eget porttitor lacus. Vestibulum mattis in sapien vitae tincidunt. Vivamus consectetur dolor leo, id porttitor orci tempor eget. Suspendisse diam ligula, ultricies et risus at, sollicitudin fringilla nunc. Nunc non diam nibh.</blockquote>

          <h3>Subheading 2</h3>

          <p>Praesent mollis ex et pharetra imperdiet. Proin tincidunt nisi ac venenatis mattis. Nam pellentesque tincidunt quam, ac luctus tortor lacinia a. Nunc vel tortor eget sem aliquet luctus vitae tempor lacus. Fusce aliquet metus dui, sed finibus erat accumsan nec. Vestibulum vehicula sollicitudin fermentum. In finibus vulputate faucibus. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
          <p>Pellentesque dignissim ligula varius sapien porttitor rhoncus in at ligula. Sed viverra feugiat nunc. Aliquam mattis mauris diam, et placerat massa egestas ac. Suspendisse efficitur lacus augue, id posuere eros rutrum sit amet. Suspendisse tristique ante felis, ac convallis eros luctus sed. Phasellus eros augue, consequat sit amet ante ut, scelerisque aliquam eros. Nullam quis bibendum est. Integer lobortis ligula nec tortor dignissim iaculis quis ac mauris. Maecenas in sagittis mauris, sed eleifend quam. Maecenas rhoncus, purus sit amet eleifend iaculis, nulla nibh sollicitudin est, et tristique lectus erat non leo. Vestibulum a ultrices erat, nec lobortis sem. Ut rhoncus vulputate nulla nec consequat. Aenean volutpat non nulla non vehicula. Vestibulum tortor sem, porta et ultricies eu, aliquam nec eros. Vivamus sit amet nunc nibh.</p>
          <p>Quisque blandit massa ac condimentum molestie. Quisque cursus laoreet tellus, nec elementum nibh suscipit id. Pellentesque pharetra lacus vehicula eros elementum accumsan nec in tortor. Aliquam egestas metus nibh, non pellentesque nibh tincidunt malesuada. Suspendisse risus quam, porttitor a nisl malesuada, auctor cursus tortor. Nam vitae cursus est, non ultricies ipsum. Nunc et ultricies nulla. Mauris nec urna nisl. Curabitur interdum est eget neque egestas rutrum. In iaculis lectus lorem, non iaculis orci sollicitudin vitae. Sed maximus dolor sit amet orci vehicula viverra. Suspendisse nec massa mattis, tincidunt ante at, commodo mi. Proin sodales pretium dui id efficitur.</p>

          <h3>Subheading 3</h3>

          <p>Suspendisse sit amet luctus nisi. Quisque a rhoncus mi. Nulla fringilla blandit efficitur. Quisque maximus ornare quam, at pharetra sapien. Nulla justo libero, efficitur vitae porta id, luctus non sem. Donec id urna in libero maximus vulputate quis at lacus. Pellentesque suscipit purus eget eros posuere ultricies.</p>
          <p>Duis a urna id neque tincidunt efficitur. Duis est purus, imperdiet lobortis sagittis non, aliquet at risus. Sed pellentesque elit sit amet enim mattis vulputate. Sed posuere sagittis risus tempor maximus. Nam a lorem lectus. Pellentesque vitae ultrices sem. Integer varius enim ut ex convallis hendrerit. Aenean sed libero sed neque maximus ultricies. Etiam vel urna dapibus, suscipit quam vitae, varius risus. Mauris in elementum metus, vel blandit urna.</p>
        </section>
      </article>

      <!-- he.js: https://github.com/mathiasbynens/he, https://cdnjs.com/libraries/he -->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/he/1.2.0/he.min.js"></script>
      <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/highlight.min.js"></script>
      <script src="index.js"></script>
  </body>
</html>

## index.js
function escapeAndHighlightCode() {
  // https://github.com/mathiasbynens/he#heescapetext
  let code = document.querySelector('pre code');
  code.innerHTML = he.escape(code.innerHTML);

  // https://highlightjs.org/
  hljs.highlightBlock(code);
}

window.onload = function() {
  escapeAndHighlightCode();
};

## original.html
<!doctype html>
<html>
  <head>
    <title>CSS Layout Example</title>
    <meta charset="utf-8">
  </head>

  <body>
    <h1>CSS Example</h1>
    <p>A blog post example to practice using CSS.</p>

    <main>
      <article>
        <h2>Blog Post Main Title</h2>
        <p>Published <time datetime="2020-03-13">March, 13, 2020</time></p>

        <section>
          <h3>Subheading 1</h3>

          <!-- Lorem Ipsum placeholder text generated with https://www.lipsum.com/ -->
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi et orci ultrices, faucibus arcu sit amet, dictum mi. Sed mattis ultricies varius. Phasellus euismod sapien massa, eget facilisis est vestibulum non. In vehicula est ac laoreet vulputate. Quisque ac rutrum orci. Pellentesque faucibus mi urna, eu pellentesque sapien rutrum vel. Mauris eget elementum neque. Integer sem ligula, consectetur sed viverra a, rutrum sit amet quam. Cras dictum justo cursus mollis tincidunt. Sed molestie malesuada quam ac bibendum.</p>
          <p>Nam id sagittis risus. Nullam sodales eros in enim ultricies posuere. Mauris condimentum eros metus, ac iaculis sem ullamcorper non. Integer cursus dolor sed justo cursus, eget feugiat velit vulputate. Cras accumsan arcu ac laoreet auctor. Curabitur ac nunc enim. Pellentesque at purus pretium, congue dui id, eleifend metus. Donec sed egestas urna. Vivamus posuere egestas justo, eget egestas justo.</p>

          <ul>
            <li>Curabitur scelerisque fermentum metus</li>
            <li>Maecenas eget tortor non dolor varius facilisis</li>
            <li>Proin rhoncus nisi a orci mattis vehicula</li>
            <li>Mauris a arcu cursus, consequat ipsum sit amet, ultrices dui</li>
          </ul>

          <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque feugiat velit quis sem varius, in bibendum neque scelerisque. In euismod erat sed tristique dignissim.</p>

          <!-- Include Photo https://unsplash.com/photos/tZc3vjPCk-Q -->

          <!-- Code block.  Use he.js and highlight.js to encode and syntax highlight-->
          <pre>
            <code>
/**
 * Practice Problem: a Morse Code translator
 */
var alpha = {
    A: '.-',
    B: '-...',
    C: '-.-.',
    D: '-..',
    E: '.',
    F: '..-.',
    G: '--.',
    H: '....',
    I: '..',
    J: '.---',
    K: '-.-',
    L: '.-..',
    M: '--',
    N: '-.',
    O: '---',
    P: '.--.',
    Q: '--.-',
    R: '.-.',
    S: '...',
    T: '-',
    U: '..-',
    V: '...-',
    W: '.--',
    X: '-..-',
    Y: '-.--',
    Z: '--..',
    ' ': '/'
  };

  // Object to provide lookup of letter (value) for a given morse code (key).
  var morse = {
      '.-': 'A',
      '-...': 'B',
      '-.-.': 'C',
      '-..': 'D',
      '.': 'E',
      '..-.': 'F',
      '--.': 'G',
      '....': 'H',
      '..': 'I',
      '.---': 'J',
      '-.-': 'K',
      '.-..': 'L',
      '--': 'M',
      '-.': 'N',
      '---': 'O',
      '.--.': 'P',
      '--.-': 'Q',
      '.-.': 'R',
      '...': 'S',
      '-': 'T',
      '..-': 'U',
      '...-': 'V',
      '.--': 'W',
      '-..-': 'X',
      '-.--': 'Y',
      '--..': 'Z',
      '/': ' '
  };

  // Return `true` if all characters are morse code.  Use a RegExp.
  function isMorse(characters) {
      return /^[.\- /]*$/.test(characters);
  }

  // Return `true` if all characters are part of the alphabet defined in `alpha`.  Use a RegExp.
  function isAlpha(characters) {
      return /^[A-Z ]*$/.test(characters);
  }

  // Given an alphabet message, convert and return in morse code.  Use your morse and/or alpha object.
  // Return undefined if text is not alpha.
  function textToMorse(text) {
      function convertWordToMorse(word) {
          var morse = '';
          var letter;

          // Loop across all letters in the word, convert to morse, and build a new string
          for(var i = 0; i < word.length; i++) {
              // Get the letter in the word at position i
              letter = word.charAt(i);
              // Look up the morse value for this, by using the letter as a key into the alpha object.
              // Each morse "letter" has a space after it.
              morse += alpha[letter] + ' ';
          }

          // Return this new morse string, removing the extra trailing whitespace
          return morse.trim();
      }

      // turn text into UPPER CASE (if not already)
      text = text.toUpperCase();

      // Split into separate words (break on spaces)
      words = text.split(' ');

      // Run each word through convertWordToMorse and build a new array
      var morse = words.map(function(word) {
          return convertWordToMorse(word);
      });

      // Return a string of all words converted to morse, joined by /
      return morse.join('/');
  }

  // Given a morse code message, convert and return in text.  Use your morse and/or alpha object.
  // Return undefined if morse is not proper code.
  function morseToText(data) {

      function convertMorstToWord(morseWord) {
          // Each morse letter is sparated by a space. Convert to an array.
          morseWord = morseWord.split(' ');

          // Build a new array by looking up each morse letter in the morse object, join together
          // into a string, and return.
          var letters = morseWord.map(function(morseLetter) {
              return morse[morseLetter];
          });

          return letters.join('');
      }

      // Split the morse into separate words (/ is the separator)
      var morseWords = data.split('/');

      // Go through each morse word, and convert into alpha, building a new array.
      var words = morseWords.map(function(morseWord) {
          return convertMorstToWord(morseWord);
      });

      return words.join(' ');
  }

  // Constructor function that takes a `message` (String), which can be either morse or alpha.
  // Use your functions above to decide how to store a value for `any` on `this`
  function Message(any) {
      // Store the value as UPPER CASE, since our objects work that way.
      this.msg = any.toUpperCase();
  }

  // Return the message as morse code, converting if necessary
  Message.prototype.toMorse = function() {
      if(isMorse(this.msg)) {
          return this.msg;
      }

      return textToMorse(this.msg);
  };

  // Return the message as alpha characters, converting if necessary
  Message.prototype.toAlpha = function() {
      if(isAlpha(this.msg)) {
          return this.msg;
      }

      return morseToText(this.msg);
  };


  var msg1 = new Message('--- -... .--- . -.-. - .../.. -./.--- .- ...- .- ... -.-. .-. .. .--. -/.- .-. ./...- . .-. -.--/.--. --- .-- . .-. ..-. ..- .-..');
  console.log(msg1.toAlpha());
  console.log(msg1.toMorse());

  var msg2 = new Message('I am learning how to use Objects in JavaScript');
  console.log(msg2.toMorse());
  console.log(msg2.toAlpha());
            </code>
          </pre>

          <p>Phasellus tincidunt mauris enim, a mollis lectus suscipit mollis. Suspendisse mollis ante at lectus placerat finibus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer nec felis eget magna dignissim commodo et eu est. Aliquam ac scelerisque erat. Nam sed scelerisque sapien, sollicitudin commodo urna. Nulla nec tristique neque, sit amet condimentum urna. Etiam at nisi ex. Donec non vehicula dolor, id aliquet urna. Integer eleifend, arcu et vestibulum porta, arcu massa laoreet ante, et suscipit lorem urna id nisl. Nunc consectetur tristique urna, quis ultrices lacus. Vivamus malesuada laoreet quam eget fermentum. Praesent fringilla diam in ultricies maximus. Nunc accumsan metus sit amet ipsum tincidunt commodo. Nullam sit amet pellentesque diam, nec ultricies mi.</p>

          <blockquote>Praesent dignissim metus rutrum ipsum vehicula ultricies. Cras laoreet sapien sed ex dictum tincidunt. Aliquam nec rhoncus mauris. Maecenas hendrerit, ipsum in feugiat pulvinar, nisl odio elementum nibh, sit amet lacinia urna ipsum vitae augue. Sed eget porttitor lacus. Vestibulum mattis in sapien vitae tincidunt. Vivamus consectetur dolor leo, id porttitor orci tempor eget. Suspendisse diam ligula, ultricies et risus at, sollicitudin fringilla nunc. Nunc non diam nibh.</blockquote>

          <h3>Subheading 2</h3>

          <p>Praesent mollis ex et pharetra imperdiet. Proin tincidunt nisi ac venenatis mattis. Nam pellentesque tincidunt quam, ac luctus tortor lacinia a. Nunc vel tortor eget sem aliquet luctus vitae tempor lacus. Fusce aliquet metus dui, sed finibus erat accumsan nec. Vestibulum vehicula sollicitudin fermentum. In finibus vulputate faucibus. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
          <p>Pellentesque dignissim ligula varius sapien porttitor rhoncus in at ligula. Sed viverra feugiat nunc. Aliquam mattis mauris diam, et placerat massa egestas ac. Suspendisse efficitur lacus augue, id posuere eros rutrum sit amet. Suspendisse tristique ante felis, ac convallis eros luctus sed. Phasellus eros augue, consequat sit amet ante ut, scelerisque aliquam eros. Nullam quis bibendum est. Integer lobortis ligula nec tortor dignissim iaculis quis ac mauris. Maecenas in sagittis mauris, sed eleifend quam. Maecenas rhoncus, purus sit amet eleifend iaculis, nulla nibh sollicitudin est, et tristique lectus erat non leo. Vestibulum a ultrices erat, nec lobortis sem. Ut rhoncus vulputate nulla nec consequat. Aenean volutpat non nulla non vehicula. Vestibulum tortor sem, porta et ultricies eu, aliquam nec eros. Vivamus sit amet nunc nibh.</p>
          <p>Quisque blandit massa ac condimentum molestie. Quisque cursus laoreet tellus, nec elementum nibh suscipit id. Pellentesque pharetra lacus vehicula eros elementum accumsan nec in tortor. Aliquam egestas metus nibh, non pellentesque nibh tincidunt malesuada. Suspendisse risus quam, porttitor a nisl malesuada, auctor cursus tortor. Nam vitae cursus est, non ultricies ipsum. Nunc et ultricies nulla. Mauris nec urna nisl. Curabitur interdum est eget neque egestas rutrum. In iaculis lectus lorem, non iaculis orci sollicitudin vitae. Sed maximus dolor sit amet orci vehicula viverra. Suspendisse nec massa mattis, tincidunt ante at, commodo mi. Proin sodales pretium dui id efficitur.</p>

          <h3>Subheading 3</h3>

          <p>Suspendisse sit amet luctus nisi. Quisque a rhoncus mi. Nulla fringilla blandit efficitur. Quisque maximus ornare quam, at pharetra sapien. Nulla justo libero, efficitur vitae porta id, luctus non sem. Donec id urna in libero maximus vulputate quis at lacus. Pellentesque suscipit purus eget eros posuere ultricies.</p>
          <p>Duis a urna id neque tincidunt efficitur. Duis est purus, imperdiet lobortis sagittis non, aliquet at risus. Sed pellentesque elit sit amet enim mattis vulputate. Sed posuere sagittis risus tempor maximus. Nam a lorem lectus. Pellentesque vitae ultrices sem. Integer varius enim ut ex convallis hendrerit. Aenean sed libero sed neque maximus ultricies. Etiam vel urna dapibus, suscipit quam vitae, varius risus. Mauris in elementum metus, vel blandit urna.</p>
        </section>
      </article>
  </body>
</html>

## package.json
{
  "name": "css-example",
  "version": "1.0.0",
  "description": "CSS Example",
  "scripts": {
    "start": "live-server"
  },
  "dependencies": {
    "live-server": "^1.2.1"
  }
}

## styles.css
/**


Links:

- CSS Podcast - https://pod.link/thecsspodcast
- Crazy CSS Examples
  - https://codepen.io/ivorjetski/pen/xxGYWQG
  - https://pattle.github.io/simpsons-in-css/
  - https://diana-adrianne.com/purecss-francine/


Native Font Stack:

Sans-serif
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, Ubuntu, roboto, noto, segoe ui, arial, sans-serif;

Serif
font-family: Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times, Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;

Mono
font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;

**/


body.dark {
  background-color: #484d5c;
  color: #c0ccd4;

}

body.light {
  color: #484d5c;
  background-color: #c0ccd4;
}


body {
  font-family: 'Cardo', serif;
  background-color: #484d5c;
  color: #c0ccd4;
}


.dark h1, .dark h2, .dark h3 {
  color: #ffce00;
}

.light h1, .light h2, .light h3 {
  color: #61564D;
}


h1, h2, h3 {
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  color: #ffce00;
}

h1 {
  font-size: 3em;
  border-bottom: 2px solid #c0ccd4;
}

h2 {
  font-size: 2em;
}

h3 {
  font-size: 1.5em;
  font-weight: bold;
}

p, ul, blockquote {
  font-size: 1.3em;
  line-height: 1.8;
}

ul {
  list-style: lower-roman;
}

blockquote {
  background: #878C9B;
  color: #181a1b;
  padding: 1em;
  text-indent: 2em;
  line-height: 1.3;
  font-style: italic;
  text-align: justify;
  border-radius: 15px;
}


figure {
  max-width: 640px;
}

figure img {
  max-width: 100%;
  border-radius: 15px;
  border: 1px solid gray;
}

figure figcaption {
  text-align: right;
}
	<!doctype html>
	<html>
	<head>
	<title>CSS Layout Example</title>
	<meta charset="utf-8">

	<!-- Deal with viewport sizing on mobile: https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag -->
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<!-- Google Fonts: 1) body text - Oswald Regular; 2) headings Cardo Regular -->
	<link href="https://fonts.googleapis.com/css?family=Cardo:400,700\|Oswald" rel="stylesheet">

	<!-- Syntax Highlighting via Highlight.js -->
	<link rel="stylesheet"
	href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/styles/github.min.css">

	<!-- Our styles -->
	<link rel="stylesheet" href="styles.css" type="text/css">
	</head>

	<body class="dark">
	<h1>CSS Example</h1>
	<p>A blog post example to practice using CSS.</p>

	<main>
	<article>
	<h2>Blog Post Main Title</h2>
	<p>Published <time datetime="2020-03-13">March, 13, 2020</time></p>

	<section>
	<h3>Subheading 1</h3>

	<!-- Lorem Ipsum placeholder text generated with https://www.lipsum.com/ -->
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi et orci ultrices, faucibus arcu sit amet, dictum mi. Sed mattis ultricies varius. Phasellus euismod sapien massa, eget facilisis est vestibulum non. In vehicula est ac laoreet vulputate. Quisque ac rutrum orci. Pellentesque faucibus mi urna, eu pellentesque sapien rutrum vel. Mauris eget elementum neque. Integer sem ligula, consectetur sed viverra a, rutrum sit amet quam. Cras dictum justo cursus mollis tincidunt. Sed molestie malesuada quam ac bibendum.</p>
	<p>Nam id sagittis risus. Nullam sodales eros in enim ultricies posuere. Mauris condimentum eros metus, ac iaculis sem ullamcorper non. Integer cursus dolor sed justo cursus, eget feugiat velit vulputate. Cras accumsan arcu ac laoreet auctor. Curabitur ac nunc enim. Pellentesque at purus pretium, congue dui id, eleifend metus. Donec sed egestas urna. Vivamus posuere egestas justo, eget egestas justo.</p>

	<ul>
	<li>Curabitur scelerisque fermentum metus</li>
	<li>Maecenas eget tortor non dolor varius facilisis</li>
	<li>Proin rhoncus nisi a orci mattis vehicula</li>
	<li>Mauris a arcu cursus, consequat ipsum sit amet, ultrices dui</li>
	</ul>

	<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque feugiat velit quis sem varius, in bibendum neque scelerisque. In euismod erat sed tristique dignissim.</p>

	<!-- https://unsplash.com/photos/tZc3vjPCk-Q -->
	<figure>
	<img src="ui.jpg" alt="UI design">
	<figcaption><a style="background-color:black;color:white;text-decoration:none;padding:4px 6px;font-family:-apple-system, BlinkMacSystemFont, 'San Francisco', 'Helvetica Neue', Helvetica, Ubuntu, Roboto, Noto, 'Segoe UI', Arial, sans-serif;font-size:12px;font-weight:bold;line-height:1.2;display:inline-block;border-radius:3px" href="https://unsplash.com/@halgatewood?utm_medium=referral&utm_campaign=photographer-credit&utm_content=creditBadge" target="_blank" rel="noopener noreferrer" title="Download free do whatever you want high-resolution photos from Hal Gatewood"><span style="display:inline-block;padding:2px 3px"><svg xmlns="http://www.w3.org/2000/svg" style="height:12px;width:auto;position:relative;vertical-align:middle;top:-2px;fill:white" viewBox="0 0 32 32"><title>unsplash-logo</title><path d="M10 9V0h12v9H10zm12 5h10v18H0V14h10v9h12v-9z"></path></svg></span><span style="display:inline-block;padding:2px 3px">Hal Gatewood</span></a></figcaption>
	</figure>

	<!-- Code block. Use he.js and highlight.js to encode and syntax highlight-->
	<pre>
	<code>
	/**
	* Practice Problem: a Morse Code translator
	*/
	var alpha = {
	A: '.-',
	B: '-...',
	C: '-.-.',
	D: '-..',
	E: '.',
	F: '..-.',
	G: '--.',
	H: '....',
	I: '..',
	J: '.---',
	K: '-.-',
	L: '.-..',
	M: '--',
	N: '-.',
	O: '---',
	P: '.--.',
	Q: '--.-',
	R: '.-.',
	S: '...',
	T: '-',
	U: '..-',
	V: '...-',
	W: '.--',
	X: '-..-',
	Y: '-.--',
	Z: '--..',
	' ': '/'
	};

	// Object to provide lookup of letter (value) for a given morse code (key).
	var morse = {
	'.-': 'A',
	'-...': 'B',
	'-.-.': 'C',
	'-..': 'D',
	'.': 'E',
	'..-.': 'F',
	'--.': 'G',
	'....': 'H',
	'..': 'I',
	'.---': 'J',
	'-.-': 'K',
	'.-..': 'L',
	'--': 'M',
	'-.': 'N',
	'---': 'O',
	'.--.': 'P',
	'--.-': 'Q',
	'.-.': 'R',
	'...': 'S',
	'-': 'T',
	'..-': 'U',
	'...-': 'V',
	'.--': 'W',
	'-..-': 'X',
	'-.--': 'Y',
	'--..': 'Z',
	'/': ' '
	};

	// Return `true` if all characters are morse code. Use a RegExp.
	function isMorse(characters) {
	return /^[.\- /]*$/.test(characters);
	}

	// Return `true` if all characters are part of the alphabet defined in `alpha`. Use a RegExp.
	function isAlpha(characters) {
	return /^[A-Z ]*$/.test(characters);
	}

	// Given an alphabet message, convert and return in morse code. Use your morse and/or alpha object.
	// Return undefined if text is not alpha.
	function textToMorse(text) {
	function convertWordToMorse(word) {
	var morse = '';
	var letter;

	// Loop across all letters in the word, convert to morse, and build a new string
	for(var i = 0; i < word.length; i++) {
	// Get the letter in the word at position i
	letter = word.charAt(i);
	// Look up the morse value for this, by using the letter as a key into the alpha object.
	// Each morse "letter" has a space after it.
	morse += alpha[letter] + ' ';
	}

	// Return this new morse string, removing the extra trailing whitespace
	return morse.trim();
	}

	// turn text into UPPER CASE (if not already)
	text = text.toUpperCase();

	// Split into separate words (break on spaces)
	words = text.split(' ');

	// Run each word through convertWordToMorse and build a new array
	var morse = words.map(function(word) {
	return convertWordToMorse(word);
	});

	// Return a string of all words converted to morse, joined by /
	return morse.join('/');
	}

	// Given a morse code message, convert and return in text. Use your morse and/or alpha object.
	// Return undefined if morse is not proper code.
	function morseToText(data) {

	function convertMorstToWord(morseWord) {
	// Each morse letter is sparated by a space. Convert to an array.
	morseWord = morseWord.split(' ');

	// Build a new array by looking up each morse letter in the morse object, join together
	// into a string, and return.
	var letters = morseWord.map(function(morseLetter) {
	return morse[morseLetter];
	});

	return letters.join('');
	}

	// Split the morse into separate words (/ is the separator)
	var morseWords = data.split('/');

	// Go through each morse word, and convert into alpha, building a new array.
	var words = morseWords.map(function(morseWord) {
	return convertMorstToWord(morseWord);
	});

	return words.join(' ');
	}

	// Constructor function that takes a `message` (String), which can be either morse or alpha.
	// Use your functions above to decide how to store a value for `any` on `this`
	function Message(any) {
	// Store the value as UPPER CASE, since our objects work that way.
	this.msg = any.toUpperCase();
	}

	// Return the message as morse code, converting if necessary
	Message.prototype.toMorse = function() {
	if(isMorse(this.msg)) {
	return this.msg;
	}

	return textToMorse(this.msg);
	};

	// Return the message as alpha characters, converting if necessary
	Message.prototype.toAlpha = function() {
	if(isAlpha(this.msg)) {
	return this.msg;
	}

	return morseToText(this.msg);
	};


	var msg1 = new Message('--- -... .--- . -.-. - .../.. -./.--- .- ...- .- ... -.-. .-. .. .--. -/.- .-. ./...- . .-. -.--/.--. --- .-- . .-. ..-. ..- .-..');
	console.log(msg1.toAlpha());
	console.log(msg1.toMorse());

	var msg2 = new Message('I am learning how to use Objects in JavaScript');
	console.log(msg2.toMorse());
	console.log(msg2.toAlpha());
	</code>
	</pre>

	<p>Phasellus tincidunt mauris enim, a mollis lectus suscipit mollis. Suspendisse mollis ante at lectus placerat finibus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer nec felis eget magna dignissim commodo et eu est. Aliquam ac scelerisque erat. Nam sed scelerisque sapien, sollicitudin commodo urna. Nulla nec tristique neque, sit amet condimentum urna. Etiam at nisi ex. Donec non vehicula dolor, id aliquet urna. Integer eleifend, arcu et vestibulum porta, arcu massa laoreet ante, et suscipit lorem urna id nisl. Nunc consectetur tristique urna, quis ultrices lacus. Vivamus malesuada laoreet quam eget fermentum. Praesent fringilla diam in ultricies maximus. Nunc accumsan metus sit amet ipsum tincidunt commodo. Nullam sit amet pellentesque diam, nec ultricies mi.</p>

	<blockquote>Praesent dignissim metus rutrum ipsum vehicula ultricies. Cras laoreet sapien sed ex dictum tincidunt. Aliquam nec rhoncus mauris. Maecenas hendrerit, ipsum in feugiat pulvinar, nisl odio elementum nibh, sit amet lacinia urna ipsum vitae augue. Sed eget porttitor lacus. Vestibulum mattis in sapien vitae tincidunt. Vivamus consectetur dolor leo, id porttitor orci tempor eget. Suspendisse diam ligula, ultricies et risus at, sollicitudin fringilla nunc. Nunc non diam nibh.</blockquote>

	<h3>Subheading 2</h3>

	<p>Praesent mollis ex et pharetra imperdiet. Proin tincidunt nisi ac venenatis mattis. Nam pellentesque tincidunt quam, ac luctus tortor lacinia a. Nunc vel tortor eget sem aliquet luctus vitae tempor lacus. Fusce aliquet metus dui, sed finibus erat accumsan nec. Vestibulum vehicula sollicitudin fermentum. In finibus vulputate faucibus. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
	<p>Pellentesque dignissim ligula varius sapien porttitor rhoncus in at ligula. Sed viverra feugiat nunc. Aliquam mattis mauris diam, et placerat massa egestas ac. Suspendisse efficitur lacus augue, id posuere eros rutrum sit amet. Suspendisse tristique ante felis, ac convallis eros luctus sed. Phasellus eros augue, consequat sit amet ante ut, scelerisque aliquam eros. Nullam quis bibendum est. Integer lobortis ligula nec tortor dignissim iaculis quis ac mauris. Maecenas in sagittis mauris, sed eleifend quam. Maecenas rhoncus, purus sit amet eleifend iaculis, nulla nibh sollicitudin est, et tristique lectus erat non leo. Vestibulum a ultrices erat, nec lobortis sem. Ut rhoncus vulputate nulla nec consequat. Aenean volutpat non nulla non vehicula. Vestibulum tortor sem, porta et ultricies eu, aliquam nec eros. Vivamus sit amet nunc nibh.</p>
	<p>Quisque blandit massa ac condimentum molestie. Quisque cursus laoreet tellus, nec elementum nibh suscipit id. Pellentesque pharetra lacus vehicula eros elementum accumsan nec in tortor. Aliquam egestas metus nibh, non pellentesque nibh tincidunt malesuada. Suspendisse risus quam, porttitor a nisl malesuada, auctor cursus tortor. Nam vitae cursus est, non ultricies ipsum. Nunc et ultricies nulla. Mauris nec urna nisl. Curabitur interdum est eget neque egestas rutrum. In iaculis lectus lorem, non iaculis orci sollicitudin vitae. Sed maximus dolor sit amet orci vehicula viverra. Suspendisse nec massa mattis, tincidunt ante at, commodo mi. Proin sodales pretium dui id efficitur.</p>

	<h3>Subheading 3</h3>

	<p>Suspendisse sit amet luctus nisi. Quisque a rhoncus mi. Nulla fringilla blandit efficitur. Quisque maximus ornare quam, at pharetra sapien. Nulla justo libero, efficitur vitae porta id, luctus non sem. Donec id urna in libero maximus vulputate quis at lacus. Pellentesque suscipit purus eget eros posuere ultricies.</p>
	<p>Duis a urna id neque tincidunt efficitur. Duis est purus, imperdiet lobortis sagittis non, aliquet at risus. Sed pellentesque elit sit amet enim mattis vulputate. Sed posuere sagittis risus tempor maximus. Nam a lorem lectus. Pellentesque vitae ultrices sem. Integer varius enim ut ex convallis hendrerit. Aenean sed libero sed neque maximus ultricies. Etiam vel urna dapibus, suscipit quam vitae, varius risus. Mauris in elementum metus, vel blandit urna.</p>
	</section>
	</article>

	<!-- he.js: https://github.com/mathiasbynens/he, https://cdnjs.com/libraries/he -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/he/1.2.0/he.min.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/highlight.min.js"></script>
	<script src="index.js"></script>
	</body>
	</html>
	function escapeAndHighlightCode() {
	// https://github.com/mathiasbynens/he#heescapetext
	let code = document.querySelector('pre code');
	code.innerHTML = he.escape(code.innerHTML);

	// https://highlightjs.org/
	hljs.highlightBlock(code);
	}

	window.onload = function() {
	escapeAndHighlightCode();
	};
	{
	"name": "css-example",
	"version": "1.0.0",
	"description": "CSS Example",
	"scripts": {
	"start": "live-server"
	},
	"dependencies": {
	"live-server": "^1.2.1"
	}
	}
	/**


	Links:

	- CSS Podcast - https://pod.link/thecsspodcast
	- Crazy CSS Examples
	- https://codepen.io/ivorjetski/pen/xxGYWQG
	- https://pattle.github.io/simpsons-in-css/
	- https://diana-adrianne.com/purecss-francine/


	Native Font Stack:

	Sans-serif
	font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, Ubuntu, roboto, noto, segoe ui, arial, sans-serif;

	Serif
	font-family: Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times, Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;

	Mono
	font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;

	**/


	body.dark {
	background-color: #484d5c;
	color: #c0ccd4;

	}

	body.light {
	color: #484d5c;
	background-color: #c0ccd4;
	}


	body {
	font-family: 'Cardo', serif;
	background-color: #484d5c;
	color: #c0ccd4;
	}


	.dark h1, .dark h2, .dark h3 {
	color: #ffce00;
	}

	.light h1, .light h2, .light h3 {
	color: #61564D;
	}


	h1, h2, h3 {
	font-family: 'Oswald', sans-serif;
	text-transform: uppercase;
	color: #ffce00;
	}

	h1 {
	font-size: 3em;
	border-bottom: 2px solid #c0ccd4;
	}

	h2 {
	font-size: 2em;
	}

	h3 {
	font-size: 1.5em;
	font-weight: bold;
	}

	p, ul, blockquote {
	font-size: 1.3em;
	line-height: 1.8;
	}

	ul {
	list-style: lower-roman;
	}

	blockquote {
	background: #878C9B;
	color: #181a1b;
	padding: 1em;
	text-indent: 2em;
	line-height: 1.3;
	font-style: italic;
	text-align: justify;
	border-radius: 15px;
	}


	figure {
	max-width: 640px;
	}

	figure img {
	max-width: 100%;
	border-radius: 15px;
	border: 1px solid gray;
	}

	figure figcaption {
	text-align: right;
	}