<!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-headerbg bg-cover bg-center bg-coffee-shop-bg">
<div class="text-center text-white py-10">
<h2 class="text-6xl"><span class="font-script">Crafty</span> <span>Coffee</span></h2>
<p class="text-xl"></p>
<div class="my-10">
<a class="bg-black hover:bg-gray-800 text-white py-2 px-4 rounded" href="#">See Our Drinks</a> <a class="bg-black hover:bg-gray-800 text-white py-2 px-4 rounded" href="#">Make Our Drinks</a>
</div>
</div>
</div>
<div class="container lg:mx-auto xl:auto sm:mx-auto">
<div class="gap-24 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-2 grid mt-16">
<div>
<h3 class="text-black text-3xl">Favorite Drinks</h3> <a href="">
<div class="bg-image-with-overlay bg-cover h-overlaybg my-5">
<p class="text-white text-2xl text-center py-16">Perfect Espresso</p>
</div>
</a> <a href="">
<div class="bg-image-with-overlay bg-cover h-overlaybg my-5">
<p class="text-white text-2xl text-center py-16">Perfect Espresso</p>
</div>
</a> <a href="">
<div class="bg-image-with-overlay bg-cover h-overlaybg my-5">
<p class="text-white text-2xl text-center py-16">Perfect Espresso</p>
</div>
</a> <a href="">
<div class="bg-image-with-overlay bg-cover h-overlaybg my-5">
<p class="text-white text-2xl text-center py-16">Perfect Espresso</p>
</div>
</a>
</div>
<div>
<h3 class="text-black text-3xl">Latest Coffee News</h3>
<ul class="divide-y divide-gray-200">
<li class="py-3"><a href="">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. »</a></li>
<li class="py-3"><a href="">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. »</a></li>
<li class="py-3"><a href="">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. »</a></li>
<li class="py-3"><a href="">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. »</a></li>
<li class="py-3"><a href="">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. »</a></li>
<li class="py-3"><a href="">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. »</a></li>
<li class="py-3"><a href="">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. »</a></li>
<li class="py-3"><a href="">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. »</a></li>
<li class="py-3"><a href="">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. »</a></li>
<li class="py-3"><a href="">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. »</a></li>
</ul>
</div>
</div>
</div>
<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-home-bg-header' with { text: "Coffee news from the shop and beyond."} %}
<div class="container lg:mx-auto xl:auto sm:mx-auto">
<div class="gap-24 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-2 grid mt-16">
<div>
{% include "@section-title" with { text: "Favorite Drinks" } %}
{% for item in 1..4 %}
{% include "@image-with-overlay" with { text: 'Perfect Espresso' } %}
{% endfor %}
</div>
<div>
{% include "@section-title" with { text: "Latest Coffee News" } %}
{% include "@text-blurb-list" %}
</div>
</div>
</div>
{% include "@footer" %}
{% endblock %}
/* No context defined for this component. */
There are no notes for this item.