Fractal demo

Page Layout 

<header class="relative py-3 md:py-6 bg-white">
    <div class="container">
        <nav class="relative flex items-center justify-between">
            <a href="#" class="flex items-center hover:opacity-75 transition duration-150 ease-in-out">
                <img class="h-8 sm:h-10 w-auto mr-4" src="../../fractal.svg" alt="">
                <span class="text-xl md:text-2xl font-bold">Fractal</span>
            </a>

            <div class="-mr-2 flex items-center sm:hidden">
                <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-700 hover:text-gray-900 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out" aria-label="Main menu">
                    <svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
                    </svg>
                </button>
            </div>

            <div class="hidden sm:flex sm:space-x-10">

                <a href="" class="font-bold text-lg text-gray-700 hover:text-gray-900 transition duration-150 ease-in-out">About</a>

                <a href="" class="font-bold text-lg text-gray-700 hover:text-gray-900 transition duration-150 ease-in-out">GitHub</a>

                <a href="" class="font-bold text-lg text-gray-700 hover:text-gray-900 transition duration-150 ease-in-out">Chat</a>

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

<main>

    <section class="section py-6 md:py-8 lg:py-10 xl:py-20 bg-gray-700">
        <div class="container">

            <div class="grid grid-cols-2 sm:grid-cols-4 gap-8">

                <div class="flex justify-center">
                    <a href="https://clearleft.com/" target="_blank" rel="noopener" class="opacity-50 transition-opacity duration-200 ease-out hover:opacity-100">
                        <img class="h-8 lg:h-10 xl:h-12" src="/logos/clearleft.svg" alt="Clearleft"></a>
                    </a>
                </div>

                <div class="flex justify-center">
                    <a href="https://madebykind.com/" target="_blank" rel="noopener" class="opacity-50 transition-opacity duration-200 ease-out hover:opacity-100">
                        <img class="h-8 lg:h-10 xl:h-12" src="/logos/kind.svg" alt="Kind"></a>
                    </a>
                </div>

                <div class="flex justify-center">
                    <a href="https://www.liip.ch/" target="_blank" rel="noopener" class="opacity-50 transition-opacity duration-200 ease-out hover:opacity-100">
                        <img class="h-8 lg:h-10 xl:h-12" src="/logos/liip.svg" alt="Liip"></a>
                    </a>
                </div>

                <div class="flex justify-center">
                    <a href="https://slab.com/" target="_blank" rel="noopener" class="opacity-50 transition-opacity duration-200 ease-out hover:opacity-100">
                        <img class="h-8 lg:h-10 xl:h-12" src="/logos/slab.svg" alt="Slab"></a>
                    </a>
                </div>

            </div>

        </div>
    </section>

</main>

<footer class="bg-gray-800 py-8">
    <div class="container">
        <div class="md:flex md:items-center md:justify-between lg:px-8">
            <div class="flex justify-center space-x-6 md:order-2">

                <a href="https://twitter.com/frctl" target="_blank" rel="noopener" class="text-gray-400 hover:text-white focus:text-gray-500 transition-colors duration-200 ease-out" aria-label="Twitter" title="Twitter">
                    <svg class="inline-block align-middle -mt-1 fill-current w-6 h-6" aria-hidden="true" focusable="false" role="img">
                        <use xlink:href="../../icons.svg#twitter" />
                    </svg>

                </a>

                <a href="https://github.com/frctl" target="_blank" rel="noopener" class="text-gray-400 hover:text-white focus:text-gray-500 transition-colors duration-200 ease-out" aria-label="GitHub" title="GitHub">
                    <svg class="inline-block align-middle -mt-1 fill-current w-6 h-6" aria-hidden="true" focusable="false" role="img">
                        <use xlink:href="../../icons.svg#github" />
                    </svg>

                </a>

                <a href="https://discord.gg/vuRz4Yx" target="_blank" rel="noopener" class="text-gray-400 hover:text-white focus:text-gray-500 transition-colors duration-200 ease-out" aria-label="Discord" title="Discord">
                    <svg class="inline-block align-middle -mt-1 fill-current w-6 h-6" aria-hidden="true" focusable="false" role="img">
                        <use xlink:href="../../icons.svg#discord" />
                    </svg>

                </a>

            </div>
            <div class="mt-8 md:mt-0 md:order-1">
                <p class="text-center text-base leading-6 text-gray-400">
                    &copy; 2020 · MIT License
                </p>
            </div>
        </div>
    </div>
</footer>
 
{% render '@navbar' %}

<main>
    {% block content %}{% endblock content %}

    {% render '@logos-grid' %}
</main>

{% render '@footer' %}
 
/* No context defined. */

No notes defined.