Skip to content

Instantly share code, notes, and snippets.

@simoebenhida

simoebenhida/landing page food

Created October 29, 2018 19:05
Show Gist options
  • Save simoebenhida/f0c7090e0424471d801877d58808b838 to your computer and use it in GitHub Desktop.
Save simoebenhida/f0c7090e0424471d801877d58808b838 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
landing page food
<!doctype html>
<html lang="en">
<head>
<title>TailwindCss</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="/dist/styles.css">
</head>
<body>
<div class="min-h-screen background-cover relative">
<!-- Header -->
<header class="bg-orange h-12 shadow px-10">
<div class="flex items-center h-full">
<div class="w-1/2">
<p class="font-black text-3xl text-white tracking-wide">F<span class="text-black">oo</span>d <span class="text-black text-lg -ml-2">Delivery</span></p>
</div>
<div class="w-1/2 flex justify-end items-center h-full">
<div class="px-6">
<a href="#" class="text-white font-medium text-base hover:text-grey-light">Login</a>
</div>
<div class="px-6">
<a href="#" class="text-white font-medium text-base hover:text-grey-light">Register</a>
</div>
<div class="px-6 bg-white h-full flex items-center">
<a href="#" class="text-orange font-medium text-base flex items-center">
<span>
<svg class="fill-current text-orange h-6 w-6" id="Bold" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<title>restaurant-food-truck</title>
<circle cx="5" cy="19.75" r="2" />
<path d="M24,3.25a1,1,0,0,0-1-1H9a1,1,0,0,0-1,1v3.5a.5.5,0,0,1-.5.5H5.84a1.78,1.78,0,0,0-1.536.9l-2.159,3.9L.37,13.819A1.237,1.237,0,0,0,0,14.71V19a1.252,1.252,0,0,0,1.25,1.25.262.262,0,0,0,.188-.081.255.255,0,0,0,.069-.193c0-.075-.007-.15-.007-.226a3.5,3.5,0,0,1,7,0,.5.5,0,0,0,.5.5h6a.5.5,0,0,0,.5-.5,3.5,3.5,0,0,1,7,0,.5.5,0,0,0,.5.5,1,1,0,0,0,1-1ZM8,11.5a.25.25,0,0,1-.25.25H4.955a.25.25,0,0,1-.211-.384l1.281-2.02a.5.5,0,0,1,.422-.232h1.3a.25.25,0,0,1,.25.25Zm12,1.75a.5.5,0,0,1-.5.5h-7a.5.5,0,0,1-.5-.5v-3a.5.5,0,0,1,.5-.5h7a.5.5,0,0,1,.5.5Zm.912-5.783a.5.5,0,0,1-.412.783h-9a.5.5,0,0,1-.412-.783l1.714-2.5a.5.5,0,0,1,.412-.217h5.572a.5.5,0,0,1,.412.217Z"
/>
<circle cx="19" cy="19.75" r="2" />
</svg>
</span>
</a>
</div>
</div>
</div>
</header>
<!-- Left Cart -->
<div class="absolute pin-r pin-t w-1/4 h-auto min-h-95vh mt-10 bg-white border border-orange shadow-lg">
<div class="flex flex-col min-h-95vh justify-center items-center">
<svg class="fill-current h-16 w-16 text-grey-darker" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<title>shopping-basket-handle</title>
<path d="M22.5,13.625H1.5a.5.5,0,0,0-.488.607l1.841,8.325a1.459,1.459,0,0,0,1.466,1.068H19.681a1.459,1.459,0,0,0,1.466-1.068l0-.007,1.839-8.318a.5.5,0,0,0-.488-.607Zm-5,3v4a.75.75,0,0,1-1.5,0v-4a.75.75,0,0,1,1.5,0Zm-5,0v4a.75.75,0,0,1-1.5,0v-4a.75.75,0,0,1,1.5,0Zm-4.5,0v4a.75.75,0,0,1-1.5,0v-4a.75.75,0,0,1,1.5,0Z"
/>
<path d="M22.5,8.625h-.254A.249.249,0,0,1,22,8.433L21.35,5.676c-.81-3.418-2.953-5.3-6.035-5.3H8.685C5.6.375,3.46,2.258,2.65,5.676L2,8.433a.249.249,0,0,1-.243.192H1.5a1.5,1.5,0,0,0-1.5,1.5v1a1.5,1.5,0,0,0,1.5,1.5h21a1.5,1.5,0,0,0,1.5-1.5v-1A1.5,1.5,0,0,0,22.5,8.625ZM5.084,6.252c.716-3.027,2.4-3.377,3.6-3.377h6.63c1.2,0,2.885.35,3.6,3.377l.43,1.815a.25.25,0,0,1-.243.308H4.9a.25.25,0,0,1-.243-.308Z"
/>
</svg>
<span class="font-medium text-lg text-grey-darker mt-4">Your Cart is Empty</span>
</div>
</div>
<div class="min-h-95vh w-3/4 flex justify-center items-center">
<div class="flex flex-col items-center">
<span class="-mt-14">
<svg class="fill-current h-64 w-64 text-orange" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<path d="m21.88 35.05v1c-1.69 0-1.58 3 .3 3a5.86 5.86 0 0 0 11.26 0c1.88 0 2-3 .3-3v-1" fill="none" stroke="#de751f" stroke-linecap="round"
stroke-linejoin="round" />
<path d="m25.88 35.44a.76.76 0 1 0 .74.75.75.75 0 0 0 -.74-.75z" fill="#de751f" />
<path d="m29.73 35.44a.76.76 0 1 0 .75.75.75.75 0 0 0 -.75-.75z" fill="#de751f" />
<g fill="none" stroke="#de751f" stroke-linecap="round" stroke-linejoin="round">
<path d="m26.33 39.72a2.62 2.62 0 0 0 3 0" />
<path d="m34.33 32.42v-1.85a3 3 0 0 0 -3-3h-7.07a3 3 0 0 0 -3 3v1.85" />
<path d="m27.8 27.58s-2.92 1.5-3.47 4" />
<path d="m27.8 27.58s2.92 1.49 3.47 4" />
<path d="m34.61 33.85a1 1 0 0 1 -.28.91 1 1 0 0 1 -.89.27 32.38 32.38 0 0 0 -11.28 0 1 1 0 0 1 -.89-.27 1 1 0 0 1 -.27-.91l.28-1.43c5.23-1.61 7.83-1.61 13 0z"
/>
<path d="m33.14 74.91v4.96" />
<path d="m29.58 80.88v-6.18" />
<path d="m35.07 81.2a1 1 0 0 1 0 1 1 1 0 0 1 -.86.53h-4.02a1 1 0 0 1 -.84-.48 1.05 1.05 0 0 1 0-1c1.04-2.08 4.49-1.96 5.72-.05z"
/>
<path d="m26.02 74.7v6.18" />
<path d="m22.46 79.87v-4.96" />
<path d="m21 68-.29 5.88a1 1 0 0 0 .27.74 1 1 0 0 0 .71.32h3.71a1 1 0 0 0 1-1l.14-4.46a1.24 1.24 0 0 1 2.48 0l.15 4.46a1 1 0 0 0 1 1h3.71a1 1 0 0 0 .72-.32 1.06 1.06 0 0 0 .27-.74l-.29-5.88"
/>
<path d="m34.33 64v-7.83h3.55v-.6a10.08 10.08 0 1 0 -20.16 0v.6h3.56v7.83" />
<path d="m34.33 56.17v-3.62" />
<path d="m21.28 56.17v-3.62" />
<path d="m21.28 62.22h13.04v2.42h-13.04z" />
<path d="m26.02 62.22h3.56v2.42h-3.56z" />
<path d="m20.53 81.2a1 1 0 0 0 0 1 1 1 0 0 0 .87.53h4.05a1 1 0 0 0 .85-.48 1.05 1.05 0 0 0 0-1c-1.09-2.08-4.54-1.96-5.77-.05z"
/>
<path d="m21.28 67.05a1.78 1.78 0 1 1 -3.56 0v-10.88h3.56z" />
<path d="m37.88 67.05a1.78 1.78 0 1 1 -3.55 0v-10.88h3.55z" />
<path d="m27.8 45.3a9.86 9.86 0 0 0 -3.2.54l3.2 5.5 3.2-5.5a10 10 0 0 0 -3.2-.54z" />
<path d="m22.46 48.93a9.91 9.91 0 0 1 5.34 2.41l-3.2-5.5a10.12 10.12 0 0 0 -1.31.56z" />
<path d="m33.14 48.93a9.94 9.94 0 0 0 -5.34 2.41l3.2-5.5a10.61 10.61 0 0 1 1.3.56z" />
<path d="m27.8 51.34v3.02" />
<path d="m32.55 54.97-1.49 1.2-1.48-1.2v-2.42h2.97z" />
<path d="m77.53 58.93h-36.76v-39.3a2.39 2.39 0 0 1 2.38-2.39h32a2.39 2.39 0 0 1 2.38 2.39" />
<path d="m77.53 52.89h-36.76v-30.21h36.76" />
<path d="m75.54 62h-32.78a2 2 0 0 1 -2-2v-1h36.77v1a2 2 0 0 1 -1.99 2z" />
<path d="m50.85 62h-6.53v4.44a1 1 0 0 0 1 1h4.53a1 1 0 0 0 1-1z" />
<path d="m74 62h-6.55v4.44a1 1 0 0 0 1 1h4.55a1 1 0 0 0 1-1z" />
<path d="m74.57 55.91a1.19 1.19 0 1 1 -1.19-1.21 1.2 1.2 0 0 1 1.19 1.21z" />
<path d="m69.83 55.91a1.19 1.19 0 1 1 -1.19-1.21 1.2 1.2 0 0 1 1.19 1.21z" />
<path d="m43.73 55.91a1.19 1.19 0 1 0 1.19-1.21 1.2 1.2 0 0 0 -1.19 1.21z" />
<path d="m48.48 55.91a1.19 1.19 0 1 0 1.18-1.21 1.2 1.2 0 0 0 -1.18 1.21z" />
<path d="m81.28 52.89h-12v-30.21h12a1 1 0 0 1 1 1v28.21a1 1 0 0 1 -1 1z" />
<path d="m78.91 50.47h-6.31a1 1 0 0 1 -1-1v-9.47a1 1 0 0 1 1-1h6.31a1 1 0 0 1 1 1v9.49a1 1 0 0 1 -1 .98z" />
<path d="m78.91 36.58h-6.31a1 1 0 0 1 -1-1v-9.49a1 1 0 0 1 1-1h6.31a1 1 0 0 1 1 1v9.49a1 1 0 0 1 -1 1z" />
<path d="m55.59 22.68h13.64v30.21h-13.64z" />
<path d="m69.23 52.89h-9.49v-6.89a1 1 0 0 1 1-1h8.49z" />
<path d="m69.23 45h-5.93v-5a1 1 0 0 1 1-1h4.93z" />
<path d="m79.91 41.79h-2.57a1 1 0 0 1 -1-1v-1.79h2.56a1 1 0 0 1 1 1z" />
<path d="m52.63 31.74a16.69 16.69 0 0 0 -8.9 0v3.19a33.4 33.4 0 0 1 8.9-1.93z" />
<path d="m43.73 37.15a2.42 2.42 0 0 0 1 2l3.15 2.3 3.63-2.31a2.42 2.42 0 0 0 1.12-2.05v-4.09a33.4 33.4 0 0 0 -8.9 1.91z"
/>
<path d="m65.77 49.87h-2a.5.5 0 0 1 -.5-.5v-4.37h3v4.34a.5.5 0 0 1 -.5.53z" />
<path d="m47.88 20a.9.9 0 0 1 -.89.91h-2.37a.91.91 0 0 1 0-1.81h2.38a.89.89 0 0 1 .88.9z" />
<path d="m75.16 20a.9.9 0 0 1 -.89.91h-2.37a.91.91 0 0 1 0-1.81h2.37a.89.89 0 0 1 .89.9z" />
<path d="m77.53 19.65a2.38 2.38 0 0 0 -2.36-2.41h-32a2.39 2.39 0 0 0 -2.36 2.41v3h36.72z" />
<path d="m77.53 58.93v-6.04" />
</g>
</svg>
</span>
<h1 class="text-5xl font-bold text-orange tracking-wide text-center font-serif">Order Your Food Now</h1>
<div class="flex items-center justify-center w-full py-10">
<!-- <input type="text" class="py-2 px-3 text-grey-darker border border-orange rounded-l w-full shadow-lg" placeholder="City"> -->
<button class="py-4 font-semibold text-lg tracking-wide text-white text-lg bg-orange w-1/2 rounded-lg shadow-lg hover:bg-orange-dark">
Nearby Restaurants
</button>
</div>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment