<!DOCTYPE html> <!-- https://youtu.be/lYVKbAn5Od0?t=1269 -->
<html lang="en">
  <head>
    <meta charset="utf-8">

    <!-- this is what prevents the text & images from shrinking in the mobile versions -->
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    <!-- NOTE: the path for the partials must be literal; that's why the href is so long -->
    <link rel="stylesheet" type="text/css" href="..public/tailwind-css/styles.css">
    <title>The Header</title>
  </head>
  <body>
    <div class="transition duration-500 ease-in-out bg-blue-600 hover:bg-red-600 transform hover:-translate-y-1 hover:scale-110">
    <p>This is the header.ejs file in the '/views/partials' directory</p>
      <header class="font-bold uppercase m-4 p-2">
        Header v6
      </header>
    </div>
  </body>
</html>
