{% load compress %}
{% load static %}
<!DOCTYPE html>
<html>
<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>CTO As You Go</title>
    <!-- add your CSS and JS files here -->
    {% compress css %}
    <link rel="stylesheet" href="{% static 'src/output.css' %}">
    {% endcompress %}
    <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer></script>
</head>
<body>
<header class="bg-white">
  <div
    class="mx-auto flex h-16 max-w-screen-xl items-center gap-8 px-4 sm:px-6 lg:px-8"
  >
  <a class="block text-teal-600 dark:text-teal-300" href="/">
      <span class="sr-only">Home</span>
      <img src="{% static 'images/logo.png' %}" alt="cto as you go logo">
    </a>

    <div class="flex flex-1 items-center justify-end md:justify-between">
  
      <div class="flex items-center gap-4">
        <div class="sm:flex sm:gap-4">
          <a
            class="block rounded-md bg-gray-100 px-5 py-2.5 text-sm font-medium text-teal-600 transition hover:text-teal-600/75 sm:block"
            href="/why_it_works"
          >
             How?
          </a>
        </div>


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

    {% block content %}
    {% endblock %}
</body>
</html>
