Crafty Coffee

Recipe 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Crafty Coffee</title>
    <link href='https://fonts.googleapis.com/css?family=Playfair+Display:700|Fauna+One|Pacifico|Merriweather+Sans:400,700' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="/css/styles.css">
</head>

<body>
    <nav class="flex items-baseline justify-between flex-wrap bg-black p-6 text-white">
        <div class="flex items-center flex-shrink-0 text-white mr-6 text-xl">
            <a href="/"><span class="font-script">Crafty</span></a>
        </div>
        <div class="block lg:hidden">
            <button class="flex items-center px-3 py-2 border rounded text-white-200 border-white-400 hover:text-white hover:border-white">
                <svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                    <title>Menu</title>
                    <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" />
                </svg>
            </button>
        </div>
        <div class="w-full block flex-grow lg:flex lg:items-center lg:w-auto">
            <div class="text-sm lg:flex-grow">
                <a href="#responsive-header" class="block mt-4 lg:inline-block lg:mt-0 text-white hover:text-red mr-4">
                    About Crafty Coffee
                </a>
                <a href="#responsive-header" class="block mt-4 lg:inline-block lg:mt-0 text-white hover:text-white mr-4">
                    Our Signature Drinks
                </a>
                <a href="#responsive-header" class="block mt-4 lg:inline-block lg:mt-0 text-white hover:to-gray-800">
                    Our Recipes
                </a>
            </div>
            <!-- <div>
        <a href="#" class="inline-block text-sm px-4 py-2 leading-none border rounded text-white border-white hover:border-transparent hover:text-teal-500 hover:bg-white mt-4 lg:mt-0">Download</a>
      </div> -->
        </div>
    </nav>
    <div class="h-headerbgshort bg-cover bg-center bg-coffee-shop-bg">
        <div class="text-center text-white py-10">
            <h2 class="text-6xl"><span class="font-script">Recipes</h2>
            <p class="text-lg">Coffee news from the shop and beyond.</p>
        </div>
    </div>
    <nav class="bg-white py-3 pl-3">
        <ol class="flex divide-x divide-grey text-grey">
            <li class="pr-4"><a href="">Home</a></li>
            <li class="px-4"><a href="">News</a></li>
            <li class="px-4 text-opacity-50">News Article</li>
        </ol>
    </nav>
    <main>
        <div class="flex items-center justify-center">
            <article class="prose lg:prose-lg my-10">
                <h1 class="article-title">Iced Americano</h1>
                <div class=" border-gray-400 lg:border lg:border-gray-400 bg-gray-100 lg:rounded p-4 flex flex-col justify-between leading-normal px-12 shadow">
                    <div class="mb-8">
                        <p class="text-sm text-gray-600 flex items-center uppercase">
                            Recipe Snapshot
                        </p>
                        <div class="text-gray-900 font-bold text-xl mb-2">The perfect iced coffee for hot summer days.</div>
                        <ul>
                            <li class="text-gray-700 text-base">Easy to make and doesn't taste bitter.</li>
                            <li class="text-gray-700 text-base">Use the coffee beans you have, or experiment with something new!</li>
                            <li class="text-gray-700 text-base">Perfect afternoon refreshment.</li>
                        </ul>
                    </div>
                </div>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam voluptatibus quidem quibusdam, saepe nobis earum nostrum tenetur consequuntur hic, dolorem debitis, reiciendis facilis alias dolore vel magni reprehenderit ratione quia!</p>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam voluptatibus quidem quibusdam, saepe nobis earum nostrum tenetur consequuntur hic, dolorem debitis, reiciendis facilis alias dolore vel magni reprehenderit ratione quia!</p>
                <table class="table-auto">
                    <thead>
                        <tr>
                            <th class="px-4 py-4">Drink Name</th>
                            <th class="px-4 py-4">Description</th>
                            <th class="px-4 py-4">Added to Menu</th>
                            <th class="px-4 py-4">Style</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td class="border px-4 py-4"><a href="">Perfect Espresso</a></td>
                            <td class="border px-4 py-4">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta, dolore dignissimos</td>
                            <td class="border px-4 py-4">January 2, 2020</td>
                            <td class="border px-4 py-4">Espresso</td>
                        </tr>
                        <tr class="bg-gray-100">
                            <td class="border px-4 py-4">Japanese Iced Coffee</td>
                            <td class="border px-4 py-4">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta, dolore dignissimos</td>
                            <td class="border px-4 py-4">January 2, 2020</td>
                            <td class="border px-4 py-4">Pourover</td>
                        </tr>
                        <tr>
                            <td class="border px-4 py-4">Americano</td>
                            <td class="border px-4 py-4">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta, dolore dignissimos</td>
                            <td class="border px-4 py-4">January 2, 2020</td>
                            <td class="border px-4 py-4">Espresso</td>
                        </tr>
                        <tr>
                            <td class="border px-4 py-4"><a href="">Perfect Espresso</a></td>
                            <td class="border px-4 py-4">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta, dolore dignissimos</td>
                            <td class="border px-4 py-4">January 2, 2020</td>
                            <td class="border px-4 py-4">Espresso</td>
                        </tr>
                        <tr class="bg-gray-100">
                            <td class="border px-4 py-4">Japanese Iced Coffee</td>
                            <td class="border px-4 py-4">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta, dolore dignissimos</td>
                            <td class="border px-4 py-4">January 2, 2020</td>
                            <td class="border px-4 py-4">Pourover</td>
                        </tr>
                        <tr>
                            <td class="border px-4 py-4">Americano</td>
                            <td class="border px-4 py-4">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta, dolore dignissimos</td>
                            <td class="border px-4 py-4">January 2, 2020</td>
                            <td class="border px-4 py-4">Espresso</td>
                        </tr>
                    </tbody>
                </table> <img src="/img/coffee-shop.jpg" alt="">
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam voluptatibus quidem quibusdam, saepe nobis earum nostrum tenetur consequuntur hic, dolorem debitis, reiciendis facilis alias dolore vel magni reprehenderit ratione quia!</p>
                <h3>Boiling Water</h3>
                <ol>
                    <li>Something here you should do</li>
                    <li>Something here you should do</li>
                </ol>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam voluptatibus quidem quibusdam, saepe nobis earum nostrum tenetur consequuntur hic, dolorem debitis, reiciendis facilis alias dolore vel magni reprehenderit ratione quia!</p>
                <h3>Boiling Water</h3>
                <ol>
                    <li>Something here you should do</li>
                    <li>Something here you should do</li>
                </ol>
                <figure>
                    <img src="/img/coffee-shop.jpg" alt="">
                    <figcaption class="italic m-0 text-sm text-gray-600">A caption for the image.</figcaption>
                </figure>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam voluptatibus quidem quibusdam, saepe nobis earum nostrum tenetur consequuntur hic, dolorem debitis, reiciendis facilis alias dolore vel magni reprehenderit ratione quia!</p>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam voluptatibus quidem quibusdam, saepe nobis earum nostrum tenetur consequuntur hic, dolorem debitis, reiciendis facilis alias dolore vel magni reprehenderit ratione quia!</p>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam voluptatibus quidem quibusdam, saepe nobis earum nostrum tenetur consequuntur hic, dolorem debitis, reiciendis facilis alias dolore vel magni reprehenderit ratione quia!</p>
                <h3>Boiling Water</h3>
                <ol>
                    <li>Something here you should do</li>
                    <li>Something here you should do</li>
                </ol> <img src="/img/coffee-shop.jpg" alt="">
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam voluptatibus quidem quibusdam, saepe nobis earum nostrum tenetur consequuntur hic, dolorem debitis, reiciendis facilis alias dolore vel magni reprehenderit ratione quia!</p>
                <div class="flex items-center bg-gray-500 text-white text-sm font-bold px-2 py-2" role="alert">
                    <svg class="fill-current w-4 h-4 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                        <path d="M12.432 0c1.34 0 2.01.912 2.01 1.957 0 1.305-1.164 2.512-2.679 2.512-1.269 0-2.009-.75-1.974-1.99C9.789 1.436 10.67 0 12.432 0zM8.309 20c-1.058 0-1.833-.652-1.093-3.524l1.214-5.092c.211-.814.246-1.141 0-1.141-.317 0-1.689.562-2.502 1.117l-.528-.88c2.572-2.186 5.531-3.467 6.801-3.467 1.057 0 1.233 1.273.705 3.23l-1.391 5.352c-.246.945-.141 1.271.106 1.271.317 0 1.357-.392 2.379-1.207l.6.814C12.098 19.02 9.365 20 8.309 20z" />
                    </svg>
                    <p>The temperature of your water matters! Don't brew your coffee with water that is too hot.</p>
                </div>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam voluptatibus quidem quibusdam, saepe nobis earum nostrum tenetur consequuntur hic, dolorem debitis, reiciendis facilis alias dolore vel magni reprehenderit ratione quia!</p>
            </article>
        </div>
    </main>

</body>

</html>
 
{% extends "inc/_layout.twig" %}
{% block main %}
    {% include '@navigation' %}
    {% include '@image-internal-bg-header' with { pageTitle: 'Recipes' } %}
    {% include '@breadcrumbs' %}
    <main>
        <div class="flex items-center justify-center">
            <article class="prose lg:prose-lg my-10">
                {% include "@article-title" with { text: "Iced Americano" } %}
                {% include "@callout-box" %}
                {% include "@paragraph-text" %}
                {% include "@paragraph-text" %}
                {% include "@recipe-ingredients" %}
                {% include "@image" %}
                {% include "@paragraph-text" %}
                {% include "@recipe-steps" %}
                {% include "@paragraph-text" %}
                {% include "@recipe-steps" %}
                {% include "@image-with-caption" %}
                {% include "@paragraph-text" %}
                {% include "@paragraph-text" %}
                {% include "@paragraph-text" %}
                {% include "@recipe-steps" %}
                {% include "@image" %}
                {% include "@paragraph-text" %}
                {% include "@warning-box" %}
                {% include "@paragraph-text" %}
            </article>
        </div>
    </main>

{% endblock %}
 
/* No context defined for this component. */

There are no notes for this item.