<!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">Our Drinks</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 class="mb-12">
<div class="flex items-center justify-center mb-10">
<div class="text-2xl italic">
<p>News article lede or summary.</p>
</div>
</div>
<div class="flex items-center justify-center">
<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>
</div>
</main>
<div class="bg-black text-white h-20 py-6 px-8">
<p>Copyright 2020 Crafty Coffee, Inc. All rights reserved. Enjoy the buzz! (Part of a series of <a href="https://craftquest.io">CraftQuest courses</a>)</p>
</div>
</body>
</html>
{% extends "inc/_layout.twig" %}
{% block main %}
{% include '@navigation' %}
{% include '@image-internal-bg-header' with { pageTitle: 'Our Drinks' } %}
{% include '@breadcrumbs' %}
<main class="mb-12">
<div class="flex items-center justify-center mb-10">
{% include "@article-lede" %}
</div>
<div class="flex items-center justify-center">
{% include "@table" %}
</div>
</main>
{% include "@footer" %}
{% endblock %}
/* No context defined for this component. */
There are no notes for this item.