random quote

In this example below you will see how to do a random quote with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by ourpathway, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright ourpathway ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>random quote</title>
  
  
  <link rel='stylesheet prefetch' href='http://dev-new.pathwaysupport.org/style.css'>
<link rel='stylesheet prefetch' href='http://cdn.pathwaysupport.org/dev/styles/style.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div id="consent_blackbar"></div>

        <!-- Unified Header -->
        <header id="nav-header">
            <div id="nav-wrap">
                <div id="nav-top">
                    <a class="nav-logo" href="/" aria-label="Home page">
                        <svg id="byupw-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 181 136"><path d="M15.8 102.9c0.1 0 0.1 0.2 0.1 0.4 0 0.1 0 0.2 0 0.2H8.2c0 0 0-0.1 0-0.2 0-0.2 0-0.3 0.1-0.4 1.1-0.1 1.5-0.2 1.8-0.4 0.3-0.1 0.6-0.8 0.6-5.5v-3.7c0-4.7-0.2-5.3-0.6-5.4 -0.3-0.2-0.8-0.3-1.8-0.5 0 0-0.1-0.2-0.1-0.4 0-0.1 0-0.2 0-0.2 1.2 0 2.4 0 3.4 0 1 0 2 0 3 0 3.8 0 6.2 2 6.2 4.7 0 2.3-2.3 4.8-5.7 4.8h-0.4c0 0 0-0.1 0-0.3 0-0.2 0-0.3 0.1-0.3 2.4 0 3.4-2.4 3.4-4.2 0-2.3-1.4-3.6-3.6-3.6 -0.6 0-1 0.1-1.2 0.3S13 89.7 13 93.3V97c0 4.7 0.2 5.3 0.5 5.5C13.9 102.7 14.6 102.8 15.8 102.9zM33.3 102.9c0 0 0.1 0.1 0.1 0.3s0 0.3-0.1 0.3h-5.6c0 0-0.1-0.1-0.1-0.3s0-0.3 0.1-0.3c0.8 0 1.3-0.2 1.7-0.5 0.5-0.4 1.1-1.3 2.6-5.4l1.4-3.7c0.8-2.2 1.7-4.4 2.4-6.4 0-0.1 0.3-0.1 0.6-0.1s0.6 0 0.6 0.1c0.7 2 1.4 3.7 2.2 5.8l1.7 4.4c1.9 4.9 2.3 5.1 2.8 5.4s0.9 0.4 1.6 0.4c0 0 0 0.1 0 0.2 0 0.2 0 0.4 0 0.4h-6.2c0 0 0-0.2 0-0.4 0-0.1 0-0.2 0-0.2 0.8 0 1.3-0.2 1.3-0.6 0-0.4-0.3-1.3-1.9-4.9h-5.3c-1.2 3.3-1.5 4.2-1.5 4.8C31.8 102.6 32.2 102.8 33.3 102.9zM33.8 96.2h4.4L36 90.3 33.8 96.2zM66.4 86.5c-0.5 0.2-1.4 0.3-7.8 0.3 -4.6 0-6.7-0.1-7.6-0.3 -0.1 0-0.1 0-0.1 0.1l-0.4 3.7c0 0 0.3 0.1 0.5 0.1 0.1 0 0.1 0 0.1 0 0.1-0.6 0.4-1.4 0.8-1.8 0.6-0.6 1.4-0.9 4.1-0.9 0.6 0 1.1 0 1.3 0 0.1 0.3 0.1 1.3 0.1 2.9v6.2c0 4.7-0.2 5.3-0.5 5.4 -0.3 0.2-1 0.3-2.1 0.4 0 0-0.1 0.2-0.1 0.3s0 0.3 0.1 0.3h7.6c0 0 0-0.1 0-0.3s0-0.3 0-0.3c-1.1-0.1-1.7-0.2-2.1-0.4 -0.3-0.1-0.6-0.7-0.6-5.4v-6.2c0-1.6 0-2.6 0.1-2.9 0.2 0 0.6 0 1.2 0 2.9 0 3.6 0.3 4.1 0.9 0.3 0.4 0.5 1.1 0.5 1.7 0 0 0.2 0.1 0.4 0.1 0.1 0 0.2 0 0.2 0 0.2-1.4 0.2-2.9 0.2-3.9C66.6 86.6 66.5 86.5 66.4 86.5zM93 87.9c0.3-0.2 0.8-0.3 1.8-0.5 0.1 0 0.1-0.2 0.1-0.3s0-0.2 0-0.2h-7.2c0 0-0.1 0.1-0.1 0.3s0 0.3 0.1 0.3c1.1 0.1 1.5 0.3 1.8 0.5 0.3 0.1 0.6 0.7 0.6 5.4v1.2h-9.7v-1.2c0-4.7 0.2-5.3 0.6-5.4 0.3-0.2 0.8-0.3 1.8-0.5 0 0 0.1-0.2 0.1-0.4 0-0.1 0-0.2 0-0.2h-7.2c0 0 0 0.1 0 0.3s0 0.3 0.1 0.3c1.1 0.1 1.5 0.3 1.8 0.5 0.3 0.1 0.5 0.7 0.5 5.4v3.7c0 4.7-0.2 5.3-0.5 5.4 -0.3 0.2-0.8 0.3-1.8 0.4 -0.1 0-0.1 0.2-0.1 0.3s0 0.3 0 0.3h7.2c0 0 0-0.1 0-0.2 0-0.2 0-0.3-0.1-0.4 -1.1-0.1-1.5-0.2-1.8-0.4 -0.3-0.1-0.6-0.7-0.6-5.4v-1.5h9.7v1.5c0 4.7-0.2 5.3-0.6 5.4 -0.3 0.2-0.8 0.3-1.8 0.4 0 0-0.1 0.2-0.1 0.3s0 0.3 0.1 0.3h7.2c0 0 0-0.1 0-0.2 0-0.1 0-0.3-0.1-0.4 -1-0.1-1.5-0.2-1.8-0.4 -0.3-0.1-0.5-0.7-0.5-5.4v-3.7C92.4 88.6 92.7 88 93 87.9zM129.4 86.8c0 0 0 0.2 0 0.3 0 0.1 0 0.2 0 0.2 -0.8 0.1-1.2 0.2-1.6 0.5 -0.4 0.3-1 0.8-2.7 5.4l-1.4 3.7c-0.8 2.2-1.8 4.4-2.4 6.4 0 0.1-0.3 0.1-0.6 0.1 -0.3 0-0.6 0-0.6-0.1 -0.9-2.3-1.6-4.1-2.6-6.4l-0.6-1.3 -0.6 1.3c-1 2.2-2 4.4-2.8 6.4 0 0.1-0.3 0.1-0.6 0.1 -0.3 0-0.6 0-0.6-0.1 -0.7-2.3-1.3-4.1-2.3-6.4l-1.4-3.7c-1.7-4.6-2.2-5.1-2.6-5.4 -0.4-0.3-1-0.4-1.7-0.5 0 0-0.1-0.1-0.1-0.3s0-0.3 0.1-0.3h6.4c0 0 0 0.1 0 0.3s0 0.3 0 0.3c-1 0.1-1.3 0.3-1.3 0.7 0 0.5 0.3 1.2 1.7 5.2l2.5 7.2 2.8-6.2 -0.4-0.9c-2.1-4.5-2.3-5.1-2.7-5.4 -0.4-0.3-1-0.4-1.8-0.5 0 0 0-0.1 0-0.2 0-0.1 0-0.3 0-0.3h11.3c0 0 0.1 0.2 0.1 0.3 0 0.1 0 0.2-0.1 0.2 -0.8 0.1-1.1 0.2-1.5 0.5 -0.8 0.6-1.3 1.3-3 5.2l3 7.4 2.8-7.2c1.4-3.6 1.6-4.5 1.6-5 0-0.5-0.4-0.7-1.6-0.9 0 0 0-0.1 0-0.2 0-0.1 0-0.3 0-0.3H129.4zM117.4 91.9c1-2.4 1.2-3.2 1.2-3.6 0-0.4-0.4-0.8-1.3-0.8 -0.9 0-1.2 0.3-1.2 0.7 0 0.5 0.2 1 1.2 3.5L117.4 91.9zM150.7 103.5h-6.2c0 0 0-0.2 0-0.4 0-0.1 0-0.2 0-0.2 0.8 0 1.3-0.2 1.3-0.6 0-0.4-0.3-1.3-1.9-4.9h-5.3c-1.2 3.3-1.5 4.2-1.5 4.8 0 0.4 0.4 0.7 1.5 0.8 0 0 0.1 0.1 0.1 0.3s0 0.3-0.1 0.3h-5.6c0 0-0.1-0.1-0.1-0.3s0-0.3 0.1-0.3c0.8 0 1.3-0.2 1.7-0.5 0.5-0.4 1.1-1.3 2.6-5.4l1.4-3.7c0.8-2.2 1.7-4.4 2.4-6.4 0-0.1 0.3-0.1 0.6-0.1 0.3 0 0.6 0 0.6 0.1 0.7 2 1.4 3.7 2.2 5.8l1.7 4.4c1.9 4.9 2.3 5.1 2.8 5.4 0.5 0.3 0.9 0.4 1.6 0.4 0 0 0 0.1 0 0.2C150.7 103.4 150.7 103.5 150.7 103.5zM143.5 96.2l-2.2-5.9 -2.2 5.9H143.5zM168.7 86.8c0 0 0 0.2 0 0.4 0 0.1 0 0.2 0 0.2 0.7 0 1.1 0.1 1.3 0.3 0.1 0 0.1 0.1 0.1 0.3 0 0.4-0.4 1.2-1.4 2.7l-2.7 4.2 -2.6-4.2c-1.3-2.1-1.6-2.7-1.6-2.9 0-0.3 0.6-0.3 1.2-0.3 0 0 0.1-0.1 0.1-0.3 0-0.2 0-0.3-0.1-0.3h-6.4c0 0-0.1 0.2-0.1 0.3 0 0.1 0 0.3 0.1 0.3 0.8 0 1.3 0.1 1.7 0.3 0.5 0.1 0.9 0.6 2.6 3.2l1.5 2.3c0.7 1.1 1.3 2.1 1.9 3.1v0.8c0 4.7-0.2 5.3-0.5 5.4 -0.3 0.2-1 0.3-2.1 0.4 0 0-0.1 0.2-0.1 0.3s0 0.3 0.1 0.3h7.6c0 0 0-0.1 0-0.3s0-0.3 0-0.3c-1.1-0.1-1.7-0.2-2.1-0.4 -0.3-0.1-0.5-0.7-0.5-5.4v-0.9c0.6-1 1.2-2 1.8-3L170 91c1.4-2.2 1.9-2.9 2.5-3.2 0.4-0.1 1.1-0.2 1.8-0.3 0 0 0-0.1 0-0.3 0-0.1 0-0.3 0-0.3H168.7zM33.1 118.7c0 0 0 0.1 0 0.2 0 0.1 0 0.1 0 0.1 -0.5 0.1-0.7 0.1-0.9 0.3 -0.3 0.2-0.6 0.5-1.6 3.2l-0.8 2.2c-0.5 1.3-1 2.6-1.4 3.8 0 0.1-0.2 0.1-0.4 0.1s-0.3 0-0.3-0.1c-0.5-1.3-1-2.4-1.5-3.8l-0.3-0.8 -0.4 0.8c-0.6 1.3-1.2 2.6-1.6 3.8 0 0.1-0.2 0.1-0.4 0.1s-0.3 0-0.3-0.1c-0.4-1.3-0.8-2.4-1.3-3.8l-0.8-2.2c-1-2.7-1.3-3-1.5-3.2 -0.2-0.2-0.6-0.3-1-0.3 0 0-0.1-0.1-0.1-0.2 0-0.1 0-0.2 0.1-0.2H22c0 0 0 0.1 0 0.2 0 0.1 0 0.2 0 0.2 -0.6 0.1-0.8 0.2-0.8 0.4 0 0.3 0.2 0.7 1 3l1.5 4.2 1.6-3.7 -0.3-0.5c-1.2-2.6-1.4-3-1.6-3.2 -0.3-0.2-0.6-0.3-1-0.3 0 0 0-0.1 0-0.1 0-0.1 0-0.2 0-0.2h6.6c0 0 0.1 0.1 0.1 0.2s0 0.1-0.1 0.1c-0.5 0.1-0.6 0.1-0.9 0.3 -0.5 0.3-0.8 0.8-1.8 3l1.7 4.3 1.6-4.2c0.8-2.1 0.9-2.6 0.9-3 0-0.3-0.3-0.4-0.9-0.5 0 0 0-0.1 0-0.1 0-0.1 0-0.2 0-0.2H33.1zM26.1 121.6c0.6-1.4 0.7-1.9 0.7-2.1 0-0.3-0.2-0.5-0.8-0.5 -0.5 0-0.7 0.2-0.7 0.4 0 0.3 0.1 0.6 0.7 2L26.1 121.6zM47.3 123.4c0 2.6-2.2 5.2-5.4 5.2 -3 0-5.2-2.2-5.2-4.9 0-2.6 2.2-5.2 5.4-5.2C45.1 118.5 47.3 120.7 47.3 123.4zM45.8 123.9c0-2.4-1.5-4.7-4-4.7 -2.8 0-3.5 2.3-3.5 4.1 0 2.4 1.5 4.7 4 4.7C45 128 45.8 125.7 45.8 123.9zM63.6 128.1c0 0 0.1 0.3 0.1 0.3 -0.3 0.1-0.6 0.1-1 0.1 -1 0-1.7-0.1-2.3-0.5 -0.8-0.5-1.7-1.6-2.9-3.6h-0.6c-0.4 0-0.6 0-1 0v0.3c0 2.8 0.1 3.1 0.3 3.2 0.2 0.1 0.7 0.2 1.4 0.3 0 0 0.1 0.1 0.1 0.2 0 0.1 0 0.1 0 0.1H53c0 0 0-0.1 0-0.1 0-0.1 0-0.2 0.1-0.2 0.6-0.1 0.9-0.1 1.1-0.3 0.2-0.1 0.3-0.5 0.3-3.2v-2.2c0-2.8-0.1-3.1-0.3-3.2 -0.2-0.1-0.5-0.2-1.1-0.3 -0.1 0-0.1-0.1-0.1-0.2 0-0.1 0-0.1 0-0.1 0.7 0 1.5 0 2.1 0 0.6 0 1.2 0 1.9 0 2.3 0 3.7 1.2 3.7 2.5 0 1.2-0.9 2.2-2 2.8 2.1 3 3.2 4.1 4.4 4.1H63.6zM59.1 121.6c0-1.4-0.6-2.4-2.1-2.4 -0.5 0-0.9 0.1-0.9 0.2 -0.1 0.1-0.3 1-0.3 3 0 0.9 0.1 1 0.1 1.1 0.2 0.1 0.5 0.3 1.2 0.3C58.3 123.8 59.1 122.8 59.1 121.6zM77.3 125.7c-0.1 0-0.1 0-0.1 0 -0.1 0.5-0.4 1.1-0.7 1.5 -0.4 0.4-1 0.6-1.8 0.6 -0.9 0-1.1-0.1-1.3-0.3 -0.2-0.2-0.3-1.1-0.3-2.9v-2.2c0-2.8 0.1-3.1 0.3-3.2 0.2-0.1 0.5-0.2 1.1-0.3 0 0 0.1-0.1 0.1-0.2 0-0.1 0-0.1 0-0.1h-4.2c0 0 0 0.1 0 0.1 0 0.1 0 0.2 0.1 0.2 0.6 0.1 0.9 0.2 1.1 0.3 0.2 0.1 0.3 0.4 0.3 3.2v2.2c0 2.8-0.1 3.1-0.3 3.2 -0.2 0.1-0.5 0.2-1.1 0.3 0 0-0.1 0.1-0.1 0.2 0 0.1 0 0.1 0 0.1 1.1 0 1.9 0 2.9 0 1.3 0 2.4 0.1 3.4 0.1 0.4 0 0.6-0.1 0.7-0.3 0.1-0.2 0.4-1.7 0.5-2.5C77.6 125.7 77.4 125.7 77.3 125.7zM94.6 123.4c0 1.3-0.6 2.6-1.6 3.5 -1.1 1-2.3 1.5-4.2 1.5 -0.7 0-1.8 0-2.4 0 -0.6 0-1.4 0-2.1 0 0 0-0.1-0.1-0.1-0.2 0-0.1 0-0.2 0.1-0.2 0.6-0.1 0.9-0.1 1.1-0.3 0.2-0.1 0.3-0.5 0.3-3.2v-2.2c0-2.8-0.1-3.1-0.3-3.2 -0.2-0.1-0.5-0.2-1.1-0.3 0 0-0.1-0.1-0.1-0.2 0-0.1 0-0.2 0.1-0.2 0.7 0 1.5 0 2.1 0 0.6 0 2 0 2.7 0C92.2 118.6 94.6 120.7 94.6 123.4zM93.1 123.7c0-2.3-1.5-4.5-4.4-4.5 -1 0-1.2 0.1-1.3 0.3 -0.1 0.1-0.2 0.8-0.2 2.9v2.3c0 1.8 0.1 2.6 0.3 2.9 0.3 0.3 0.5 0.4 1.3 0.4C91.8 127.9 93.1 126.5 93.1 123.7zM115.5 118.7c0 0 0 0.1 0 0.2 0 0.1 0 0.1 0 0.1 -0.5 0.1-0.7 0.1-0.9 0.3 -0.3 0.2-0.6 0.5-1.6 3.2l-0.8 2.2c-0.5 1.3-1 2.6-1.4 3.8 0 0.1-0.2 0.1-0.4 0.1 -0.2 0-0.3 0-0.3-0.1 -0.5-1.3-1-2.4-1.5-3.8l-0.3-0.8 -0.4 0.8c-0.6 1.3-1.2 2.6-1.6 3.8 0 0.1-0.2 0.1-0.4 0.1 -0.2 0-0.3 0-0.3-0.1 -0.4-1.3-0.8-2.4-1.3-3.8l-0.8-2.2c-1-2.7-1.3-3-1.5-3.2 -0.2-0.2-0.6-0.3-1-0.3 0 0-0.1-0.1-0.1-0.2 0-0.1 0-0.2 0.1-0.2h3.7c0 0 0 0.1 0 0.2 0 0.1 0 0.2 0 0.2 -0.6 0.1-0.8 0.2-0.8 0.4 0 0.3 0.2 0.7 1 3l1.5 4.2 1.6-3.7 -0.3-0.5c-1.2-2.6-1.4-3-1.6-3.2 -0.3-0.2-0.6-0.3-1-0.3 0 0 0-0.1 0-0.1 0-0.1 0-0.2 0-0.2h6.6c0 0 0.1 0.1 0.1 0.2s0 0.1-0.1 0.1c-0.5 0.1-0.6 0.1-0.9 0.3 -0.5 0.3-0.8 0.8-1.8 3l1.7 4.3 1.6-4.2c0.8-2.1 0.9-2.6 0.9-3 0-0.3-0.3-0.4-0.9-0.5 0 0 0-0.1 0-0.1 0-0.1 0-0.2 0-0.2H115.5zM108.5 121.6c0.6-1.4 0.7-1.9 0.7-2.1 0-0.3-0.2-0.5-0.8-0.5 -0.5 0-0.7 0.2-0.7 0.4 0 0.3 0.1 0.6 0.7 2L108.5 121.6zM124.6 119.3c0.2-0.1 0.6-0.2 1.2-0.3 0 0 0.1-0.1 0.1-0.2 0-0.1 0-0.1 0-0.1h-4.5c0 0 0 0.1 0 0.1 0 0.1 0 0.2 0.1 0.2 0.6 0.1 1 0.2 1.2 0.3 0.2 0.1 0.3 0.4 0.3 3.2v2.2c0 2.8-0.1 3.1-0.3 3.2 -0.2 0.1-0.6 0.2-1.2 0.3 0 0-0.1 0.1-0.1 0.2 0 0.1 0 0.1 0 0.1h4.5c0 0 0-0.1 0-0.1 0-0.1 0-0.2-0.1-0.2 -0.6-0.1-1-0.1-1.2-0.3 -0.2-0.1-0.3-0.4-0.3-3.2v-2.2C124.3 119.7 124.4 119.4 124.6 119.3zM143.8 123.4c0 1.3-0.6 2.6-1.6 3.5 -1.1 1-2.3 1.5-4.2 1.5 -0.7 0-1.8 0-2.4 0 -0.6 0-1.4 0-2.1 0 0 0-0.1-0.1-0.1-0.2 0-0.1 0-0.2 0.1-0.2 0.6-0.1 0.9-0.1 1.1-0.3 0.2-0.1 0.3-0.5 0.3-3.2v-2.2c0-2.8-0.1-3.1-0.3-3.2 -0.2-0.1-0.5-0.2-1.1-0.3 0 0-0.1-0.1-0.1-0.2 0-0.1 0-0.2 0.1-0.2 0.7 0 1.5 0 2.1 0 0.6 0 2 0 2.7 0C141.4 118.6 143.8 120.7 143.8 123.4zM142.3 123.7c0-2.3-1.5-4.5-4.4-4.5 -1 0-1.2 0.1-1.3 0.3 -0.1 0.1-0.2 0.8-0.2 2.9v2.3c0 1.8 0.1 2.6 0.3 2.9 0.3 0.3 0.5 0.4 1.3 0.4C141 127.9 142.3 126.5 142.3 123.7zM157 126.3C156.9 126.3 156.9 126.3 157 126.3c-0.2 0.5-0.4 0.8-0.6 1.1 -0.3 0.3-0.8 0.5-1.8 0.5 -0.9 0-1.1-0.1-1.3-0.3 -0.2-0.2-0.3-1.1-0.3-2.9v-1h1.1c1.1 0 1.4 0.2 1.5 0.3 0.2 0.1 0.2 0.5 0.2 0.8 0 0 0.1 0.1 0.2 0.1 0.1 0 0.2 0 0.2-0.1 0-0.4 0.1-2.2 0.1-2.6 0 0-0.1 0-0.2 0 -0.1 0-0.2 0-0.2 0 -0.1 0.5-0.3 0.9-1.8 0.9h-1.2v-2.1c0-1 0-1.5 0.1-1.6 0.2 0 0.6 0 1.2 0 1.1 0 1.5 0.1 1.8 0.4 0.2 0.3 0.3 0.6 0.3 1 0 0.1 0.1 0.1 0.2 0.1 0.1 0 0.2 0 0.2-0.1 0.1-0.8 0.1-1.5 0.2-2 0 0 0-0.1-0.1-0.1 -0.5 0-1.2 0.1-2.5 0.1 -1 0-2.9 0-4.1 0 0 0-0.1 0.1-0.1 0.2 0 0.1 0 0.2 0.1 0.2 0.6 0.1 0.9 0.2 1.1 0.3 0.2 0.1 0.3 0.5 0.3 3.2v2.2c0 2.8-0.1 3.1-0.3 3.2 -0.2 0.1-0.5 0.2-1.1 0.3 0 0-0.1 0.1-0.1 0.2 0 0.1 0 0.2 0.1 0.2 1.1 0 1.7 0 2.7 0 1.3 0 2.4 0.1 3.4 0.1 0.4 0 0.5-0.1 0.6-0.3 0.1-0.2 0.3-1.1 0.3-1.9C157.2 126.3 157 126.3 157 126.3zM10.8 53.4l0-39.5c0-1.3 0.1-1.7-0.8-2.3 -0.9-0.5-1.8-0.6-3.3-0.9 0 0 0 0 0 0 -0.1 0-0.1-0.6 0-0.6l30.8 0c12.8 0 18.7 2.9 18.7 11.7 0 6.4-3.3 9-7 10.2 -0.1 0-0.1 0.2 0 0.2 5.7 1.4 8.6 5.2 8.6 11.4 0 8.3-5.7 13.7-19.1 13.7 0 0-31.8 0-31.9 0 -0.1 0-0.2-0.6 0-0.6 0 0 0 0 0 0 1.5-0.2 2.4-0.3 3.3-0.9C10.8 55.1 10.8 54.7 10.8 53.4zM41.3 42.3c0-5.8-5.1-5.8-9.3-5.8 0 0-4.7 0-5.2 0 -0.6 0-1.1-0.1-1.1-0.1s0.1 0.5 0.1 1.1c0 2.6 0 9.4 0 9.5 0 0.5-0.1 1.1-0.1 1.1s0.5-0.1 1.1-0.1c0.1 0 5.9 0 5.9 0C37.6 48.1 41.3 46.6 41.3 42.3zM25.7 18.9c0 0 0.1 0.5 0.1 1.1 0 2.3 0 7.8 0 8.2 0 0.6-0.1 1.1-0.1 1.1s0.6-0.1 1.1-0.1c0.6 0 6.4 0 6.4 0 5.6 0 7.3-2.5 7.3-5.3 0-4.3-2.8-5-7.5-5 0 0-5.6 0-6.2 0C26.2 19 25.7 18.9 25.7 18.9zM175.8 10.1l-23.6 0c-0.1 0-0.2 0.6 0 0.6 0 0 0 0 0 0 1.5 0.2 2.2 0.3 3.1 0.9 0.9 0.6 0.8 1 0.8 2.3v23.7c0 5.4-3.1 9.6-9.3 9.6s-9.3-4.2-9.3-9.6l0-23.7c0-1.3-0.1-1.7 0.8-2.3 0.9-0.6 1.6-0.7 3.1-0.9 0 0 0 0 0 0 0.1 0 0.1-0.6 0-0.6l-22.2 0c-0.2 0-0.1 0.6 0 0.6 0 0 0 0 0 0 0.8 0.1 1.4 0.1 1.9 0.5 0.7 0.6 0.9 1.4 0.9 2.7l0 23.3c0 11.2 6.2 20.8 24.8 20.8 18.7 0 24.8-9.5 24.8-20.8V13.9c0-1.3-0.1-1.7 0.8-2.3 0.9-0.6 1.8-0.6 3.3-0.9 0 0 0 0 0 0C176 10.7 175.9 10.1 175.8 10.1zM57.8 10.7c1 0.1 1.5 0 2.7 0.6 0.1 0.1 0.5 0.3 0.6 0.4 0.7 0.6 1.2 1.2 2.1 2.5l16.3 24.1 0 15.1c0 1.3 0.1 1.7-0.8 2.3 -0.9 0.6-1.8 0.6-3.3 0.9 0 0 0 0 0 0 -0.1 0-0.1 0.6 0 0.6h25c0.1 0 0.2-0.6 0-0.6 0 0 0 0 0 0 -1.5-0.2-2.4-0.3-3.3-0.9 -0.9-0.6-0.8-1-0.8-2.3v-15l16.3-24.2c0.9-1.3 1.5-2 2.2-2.6 0.1-0.1 0.4-0.3 0.6-0.4 0.7-0.3 0.9-0.4 1.8-0.4 0 0 0 0 0 0 0.1 0 0.2-0.6 0-0.6l-22 0c-0.2 0-0.1 0.6 0 0.6 0 0 0 0 0 0 1.1 0 2.4 0 2.2 1.5 -0.1 1.5-6.5 10.6-8.7 14.1 -0.3 0.5-0.6 1-0.7 1.6 -0.1-0.6-0.5-1.2-0.7-1.6 -3.1-4.7-8.5-12.3-8.7-14.1 -0.1-1.6 1.1-1.5 2.2-1.5 0 0 0 0 0 0 0.2 0 0.2-0.6 0-0.6l-23.1 0C57.6 10.1 57.6 10.7 57.8 10.7 57.7 10.7 57.8 10.7 57.8 10.7zM171.1 73.1c0-0.2-0.2-0.4-0.4-0.4H6.6c-0.2 0-0.4 0.2-0.4 0.4 0 0.2 0.2 0.4 0.4 0.4h164.1C170.9 73.5 171.1 73.3 171.1 73.1z"></path></svg>                        <span class="icon-pathway-logo" aria-label="Pathway Connect"></span>
                    </a>
                    <a id="mobile-pathway" href="/pathwayconnect" class="hide visible-sm">PathwayConnect</a>
                    <a id="mobile-degrees" href="/degrees" class="hide visible-sm">Certificates &amp; Degrees</a>
                    <a id="mobile-admissions" href="/admissions" class="hide visible-sm">Admissions</a>
                    <!--DESKTOP LINKS-->
                    <nav id="desktop" class="home-vert">
                        <ul class="nav-icons">
                            <li>
                                <div class="usearch">
                                    <icon class="icon-mag" aria-label="magnifying glass icon"></icon>
                                    <form aria-label="Search BYU-Pathway Worldwide" method="get" action="/results.php" role="search" class="gsearch">
    <label for="searchDesktop" class="sr-only">Search BYU-Pathway Worldwide: </label>
    <input id="searchDesktop" class="form-control" name="q" placeholder="" alt="Search BYU-PW websites" type="search"><button type="submit" class=""><span class="icon-mag"><span class="sr-only">Submit</span></span></button>
</form>                                </div>
                            </li>
                            <li><a href="//pathway.lds.org/help" class="q-mark">?</a></li>
                            <li>
                                <a href="//pathway.lds.org/Home/EnrollmentForceLogin" class="user"><span class="icon-user"></span></a></li>
                            <li>
                                <label class="icon-bars" for="mobile-menu-control"></label></li>
                        </ul>
                        <ul class="site-nav">
                            <li><a id="nav-pathway" href="/pathwayconnect">PathwayConnect</a></li>
                            <li><a id="nav-degrees" href="/degrees">Certificates &amp; Degrees</a></li>
                            <li><a id="nav-admissions" href="/admissions">Admissions</a></li>
                        </ul>
                        <ul class="subnav-pathway hide">
                            <li><a id="nav-overview" href="/pathwayconnect">Overview</a></li>
                            <li><a id="nav-structure" href="/pathwayconnect/structure">Courses &amp; Structure</a></li>
                            <li><a id="nav-benefits" href="/pathwayconnect/benefits">Benefits</a></li>
                            <li><a id="nav-tuition" href="/pathwayconnect/structure/#tuition">Tuition</a></li>
                            <li><a id="nav-locations" href="/pathwayconnect/locations">Locations</a></li>
                        </ul>
                    </nav>
                    <!--MOBILE LINKS-->
                    <nav id="mobile">
                        <ul class="nav-icons">
                            <li>
                                <a href="/admissions" class="button visible-md">Apply</a></li>
                            <li>
                                <label class="icon-bars" aria-label="menu button" for="mobile-menu-control"></label></li>
                        </ul>
                    </nav>
                </div>
            </div>

            <!--MOBILE MENU-->
            <input class="hidden" type="checkbox" id="mobile-menu-control">
            <nav id="mobile-pop">
                <ul class="site-nav">
                    <li>
                        <div class="usearch-mobile">
                            <form aria-label="Search BYU-Pathway Worldwide" method="get" action="/results.php" role="search" class="gsearch">
    <label for="searchDesktop" class="sr-only">Search BYU-Pathway Worldwide: </label>
    <input id="searchDesktop" class="form-control" name="q" placeholder="" alt="Search BYU-PW websites" type="search"><button type="submit" class=""><span class="icon-mag"><span class="sr-only">Submit</span></span></button>
</form>                        </div>
                    </li>
                    <li class="visible-sm"><a href="/admissions" class="button">Apply</a></li>
                    <li><a href="/"><span class="icon-home"></span> HOME</a>
                    </li>
                    <li><a href="//pathway.lds.org/Home/EnrollmentForceLogin"><span class="icon-user"></span> LOGIN</a>
                    </li>
                    <li><a id="nav-pathway" href="/pathwayconnect">PathwayConnect</a>
                        <ul class="subnav-pathway hide">
                            <li><a id="nav-overview" href="/pathwayconnect">Overview</a></li>
                            <li><a id="nav-structure" href="/pathwayconnect/structure">Courses &amp; Structure</a></li>
                            <li><a id="nav-benefits" href="/pathwayconnect/benefits">Benefits</a></li>
                            <li><a id="nav-tuition" href="/pathwayconnect/structure/#tuition">Tuition</a></li>
                            <li><a id="nav-locations" href="/pathwayconnect/locations">Locations</a></li>
                        </ul>
                    </li>
                    <li><a id="nav-degrees" href="/degrees">Certificates &amp; Degrees</a>
                    </li>
                    <li><a id="nav-admissions" href="/admissions">Admissions</a>
                    </li>
                </ul>
                <ul class="common-nav">
                    <li><a href="//pathway.lds.org/help">Help</a></li>
                </ul>
            </nav> <!--End MOBILE MENU-->
        </header>

<!-- Main Content -->
<main id="home-page" class="amber-theme">
    <section id="home-feature" class="feature">
        <div class="vid-wrap">
            <video poster="//cdn.pathwaysupport.org/dev/media/home-1700.jpg" id="bgvid" playsinline="" autoplay="" muted="" loop="">
                <source src="//cdn.pathwaysupport.org/dev/media/home.mp4">
            </video>
        </div>
        <!--Trying new Quote idea-->
        <div class="border">
<!--             <div id="quote1">
                <blockquote>PathwayConnect helps students<br>find <span class="smitalic">courage,</span><br>go forward with<br><span class="smitalic">faith,</span><br>and achieve their<br><span class="smitalic">life goals.</span></blockquote>
                <span class="author">Russell M. Nelson</span>
            </div>
            <div id="quote2">
                <blockquote>The capacity to<br><span class="lgitalic">lift &amp;<br>build</span> others is the essence of BYU-Pathway</blockquote>
                <span class="author">Clark G. Gilbert</span>
            </div>
            <div id="quote3">
                <blockquote>I encourage each person,<br>regardless of age,<br><span class="lgitalic">to continue<br>to learn.</span></blockquote>
                <span class="author">Russell M. Nelson</span>
            </div>
            <div id="quote4">
                <blockquote>The people of...<br>BYU-PathwayWorldwide<br> know the voice of the<br><span class="lgitalic">Good<br>Shepherd</span></blockquote>
                <span class="author">Kim B. Clark</span>
            </div>
            <div id="quote5">
                <blockquote>At BYU-Pathway Worldwide,<br>we are constructing<br><span class="lgitalic">temples</span><br><span class="smitalic lines">of</span><br><span class="lgitalic">learning</span></blockquote>
                <span class="author">Clark G. Gilbert</span>
            </div> -->
        </div>
    </section>
</main>
</body>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src='http://cdn.pathwaysupport.org/dev/scripts/main.js'></script>
<script src='http://cdn.pathwaysupport.org/dev/scripts/extras.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/ourpathway/random-quote-oodGVB */
.amber1 {
  color: #F7E4B1;
}

.amber2 {
  color: #F6C779;
}

.amber3 {
  color: #F0A11F;
}

.amber4 {
  color: #C7802A;
}

.amber1-bg {
  background-color: #F7E4B1;
}

.amber2-bg {
  background-color: #F6C779;
}

.amber3-bg {
  background-color: #F0A11F;
}

.amber4-bg {
  background-color: #C7802A;
}

.navy1 {
  color: #EFF3F6;
}

.navy2 {
  color: #3793A8;
}

.navy3 {
  color: #065577;
}

.navy4 {
  color: #0D3354;
}

.navy1-bg {
  background-color: #EFF3F6;
}

.navy2-bg {
  background-color: #3793A8;
}

.navy3-bg {
  background-color: #065577;
}

.navy4-bg {
  background-color: #0D3354;
}

.red1 {
  color: #F8EADF;
}

.red2 {
  color: #F9BA90;
}

.red3 {
  color: #F58D47;
}

.red4 {
  color: #CB4A27;
}

.red1-bg {
  background-color: #F8EADF;
}

.red2-bg {
  background-color: #F9BA90;
}

.red3-bg {
  background-color: #F58D47;
}

.red4-bg {
  background-color: #CB4A27;
}

.teal1 {
  color: #E2EEF1;
}

.teal2 {
  color: #A7CDD4;
}

.teal3 {
  color: #6CABB7;
}

.teal1-bg {
  background-color: #E2EEF1;
}

.teal2-bg {
  background-color: #A7CDD4;
}

.teal3-bg {
  background-color: #6CABB7;
}

.lime1 {
  color: #D9E69E;
}

.lime2 {
  color: #CDDA5C;
}

.lime3 {
  color: #BABF3C;
}

.lime4 {
  color: #8B9531;
}

.lime5 {
  color: #696E2A;
}

.lime1-bg {
  background-color: #D9E69E;
}

.lime2-bg {
  background-color: #CDDA5C;
}

.lime3-bg {
  background-color: #BABF3C;
}

.lime4-bg {
  background-color: #8B9531;
}

.lime5-bg {
  background-color: #696E2A;
}

.black1 {
  color: #F1F2F2;
}

.black2 {
  color: #E6E7E8;
}

.black3 {
  color: #BBBDBF;
}

.black4 {
  color: #58595B;
}

.black5 {
  color: #000000;
}

.black1-bg {
  background-color: #F1F2F2;
}

.black2-bg {
  background-color: #E6E7E8;
}

.black3-bg {
  background-color: #BBBDBF;
}

.black4-bg {
  background-color: #58595B;
}

.black5-bg {
  background-color: #000000;
}

.white {
  color: #FFFFFF;
}

/* -----------------------------------------------------------
// MIXINS GO HERE */
main#home-page .border {
  background-color: transparent;
  border: 5px solid rgba(255, 255, 255, 0.9);
  max-width: 280px;
  text-align: center;
  color: black;
  margin: auto;
  padding: 10px;
  font-family: "Open Sans Condensed", "Arial Narrow", Helvetica, Arial, sans-serif;
  font-size: 20px;
  font-weight: 700;
  font-style: normal;
  text-transform: uppercase;
}
main#home-page .border div {
  position: relative;
  border: 3px solid #FFFFFF;
  background-color: rgba(255, 255, 255, 0.9);
}
main#home-page .border .smitalic {
  font-family: Lora, Times, serif;
  font-size: 32px;
  font-weight: 400;
  font-style: italic;
  text-transform: initial;
}
main#home-page .border .lgitalic {
  font-family: Lora, Times, serif;
  font-size: 40px;
  font-weight: 400;
  font-style: italic;
  text-transform: initial;
}
main#home-page .border .lines {
  position: relative;
}
main#home-page .border .lines:before {
  content: "";
  height: 2px;
  width: 200%;
  background-color: black;
  position: absolute;
  top: 50%;
  left: -75px;
}
main#home-page .border .lines:after {
  content: "";
  height: 2px;
  width: 200%;
  background-color: black;
  position: absolute;
  top: 50%;
  right: -80px;
}
main#home-page .border .author {
  position: absolute;
  color: #FFFFFF;
  font-weight: 400;
  bottom: -10vh;
  left: -50vw;
  right: -50vw;
}
main#home-page .border blockquote {
  margin: 10px 5px;
}
@media (min-width: 498px) {
  main#home-page .border {
    font-size: 27px;
    max-width: 500px;
  }
  main#home-page .border .smitalic {
    font-size: 38px;
  }
  main#home-page .border .lgitalic {
    font-size: 48px;
  }
  main#home-page .border .lines:before {
    left: -80px;
  }
  main#home-page .border .lines:after {
    right: -86px;
  }
  main#home-page .border blockquote {
    margin: 20px;
  }
}
@media (min-width: 991px) {
  main#home-page .border {
    font-size: 36px;
    max-width: 700px;
  }
  main#home-page .border .smitalic {
    font-size: 50px;
  }
  main#home-page .border .lgitalic {
    font-size: 55px;
  }
  main#home-page .border .lines:before {
    left: -105px;
  }
  main#home-page .border .lines:after {
    right: -115px;
  }
  main#home-page .border blockquote {
    margin: 30px;
  }
}


/*Downloaded from https://www.codeseek.co/ourpathway/random-quote-oodGVB */
jQuery(document).ready(function(){
  // homepage banners
    makeBanner(quotes);
});

var quotes = [{"quote": "PathwayConnect helps students<br>find <span class='smitalic'>courage,</span><br>go forward with<br><span class='smitalic'>faith,</span><br>and achieve their<br><span class='smitalic'>life goals.</span>", "author": "Russell M. Nelson", "id": "quote1"},
              {"quote": "The capacity to<br><span class='lgitalic'>lift &<br>build others</span><br>is the essence of BYU-Pathway", "author": "Clark G. Gilbert", "id": "quote2"},
              {"quote": "I encourage each person,<br>regardless of age,<br><span class='lgitalic'>to continue<br>to learn.</span>", "author": "Russell M. Nelson", "id": "quote3"},
              {"quote": "The people of...<br>BYU-PathwayWorldwide<br>know the voice of the<br><span class='lgitalic'>Good<br>Shepherd</span>", "author": "Kim B. Clark", "id": "quote4"},
              {"quote": "At BYU-Pathway Worldwide,<br>we are constructing<br><span class='lgitalic'>temples</span><br><span class='smitalic lines'>of</span><br><span class='lgitalic'>learning</span>", "author": "Clark G. Gilbert", "id": "quote5"}];

function makeBanner(bannerList) {

    bannerList = bannerList[Math.floor(Math.random() * bannerList.length)];
    var whichString = '<div id="' + bannerList.id + '"><blockquote>' + bannerList.quote + '</blockquote><span class="author">' + bannerList.author + '</span></div>';
    if (jQuery('.border').length) {
        jQuery('.border').html(whichString);
    }
}

Comments