<!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 my-10">
<div class="text-2xl italic">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Esse ipsam pariatur laborum ipsa debitis.</p>
</div>
</div>
<div class="flex items-center justify-center">
<article class="prose lg:prose-lg my-10">
<h1>Iced Americano</h1>
<img src="/img/coffee-shop.jpg" alt="">
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aperiam ad nisi libero, eligendi quae iste, nam excepturi necessitatibus minus commodi hic quam tempora temporibus sit corrupti nobis vel aspernatur. Iusto?</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Esse ipsam pariatur laborum ipsa debitis. Facilis eveniet repellendus minima? Officia, excepturi veritatis tempora nihil alias quis ab rerum ipsa id maxime! Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptas iure, cum vitae officiis explicabo suscipit tempore, est deserunt esse ab maxime rerum. Minima est aliquid mollitia hic rerum nostrum quidem.</p>
<img src="/img/coffee-shop.jpg" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque vel consequatur eaque quia fugit a esse illum itaque rerum ducimus tenetur assumenda commodi praesentium maxime veritatis id veniam, porro eius.</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aperiam ad nisi libero, eligendi quae iste, nam excepturi necessitatibus minus commodi hic quam tempora temporibus sit corrupti nobis vel aspernatur. Iusto?</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Esse ipsam pariatur laborum ipsa debitis. Facilis eveniet repellendus minima? Officia, excepturi veritatis tempora nihil alias quis ab rerum ipsa id maxime! Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptas iure, cum vitae officiis explicabo suscipit tempore, est deserunt esse ab maxime rerum.
Minima est aliquid mollitia hic rerum nostrum quidem.</p>
<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. Neque vel consequatur eaque quia fugit a esse illum itaque rerum ducimus tenetur assumenda commodi praesentium maxime veritatis id veniam, porro eius.</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aperiam ad nisi libero, eligendi quae iste, nam excepturi necessitatibus minus commodi hic quam tempora temporibus sit corrupti nobis vel aspernatur. Iusto?</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Esse ipsam pariatur laborum ipsa debitis. Facilis eveniet repellendus minima? Officia, excepturi veritatis tempora nihil alias quis ab rerum ipsa id maxime! Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptas iure, cum vitae officiis explicabo suscipit tempore, est deserunt esse ab maxime rerum. Minima est aliquid mollitia hic rerum nostrum quidem.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque vel consequatur eaque quia fugit a esse illum itaque rerum ducimus tenetur assumenda commodi praesentium maxime veritatis id veniam, porro eius.</p>
</article>
</div>
<div class="flex items-center justify-center">
<a class="bg-black hover:bg-gray-800 text-white py-2 px-4 rounded" href="#">Make this Drink</a>
</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 my-10">
{% include '@article-lede' with { text: "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Esse ipsam pariatur laborum ipsa debitis." } %}
</div>
<div class="flex items-center justify-center">
{% include "@content" %}
</div>
<div class="flex items-center justify-center">
{% include "@button" with { label: "Make this Drink"} %}
</div>
</main>
{% include "@footer" %}
{% endblock %}
/* No context defined for this component. */
There are no notes for this item.