-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
35 lines (35 loc) · 2.32 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grocify</title>
<link rel="icon" href="favicon.ico">
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class=" relative px-28 py-25 pt-6 container min-h-screen bg-[url('images/Image.png')] bg-cover bg-center max-sm:px-2">
<nav class="flex items-center ">
<img src="images/logo.png" alt="" class="w-40 cursor-pointer max-sm:w-28">
<ul class="flex-1 text-center max-sm:ml-10 text-l pt-2">
<li class="list-none inline-block px-5 max-sm:px-2 "><a href="#" class="no-underline text-white px-2 max-sm:px-0">Home</a></li>
<li class="list-none inline-block px-5 max-sm:px-2"><a href="#"class="no-underline text-white px-2 max-sm:px-0
">About</a></li>
<li class="list-none inline-block px-5 max-sm:px-2"><a href="#" class="no-underline text-white px-2 max-sm:px-0">Features</a></li>
<li class="list-none inline-block px-5 max-sm:px-2"><a href="#" class="no-underline text-white px-2 max-sm:px-0">Contact</a></li>
</ul>
<img src="images/cart.png" alt="" class="w-6 cursor-pointer max-sm:w-0">
</nav>
<div class="text-white mt-44 max-w-lg max-sm:mt-24 ">
<h1 class="text-6xl font-semibold leading-normal max-sm:text-6xl max-sm:leading-snug max-sm:mb-4">Groceries<br>delivery in <span class="font-light max-sm:text-4xl">15 mins.</span></h1>
<p>Grocify offer a wide range of products, including fresh products, meats, dairy, baked goods and non-perishable items.</p>
<div class="mt-10">
<a href="#" class=" text-black bg-yellow-300 rounded-3xl py-3 px-8 font-medium inline-block mr-4 hover:bg-transparent hover:border-yellow-300 hover:text-white duration-300 hover:border border border-transparent">Order Now</a>
<a href="#" class="max-sm:block mt-5 mx-2 text-lg">Download App <span class="text-lg inline-block rotate-90 ">➤</span></a>
</div>
</div>
<img src="images/grocery-image.png" alt="" class="w-full xl:w-1/2 absolute bottom-0 right-20 max-sm:right-0 ">
</div>
</body>
</html>