script/index.html at main · rupinder-echtops/script · GitHub

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
36
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="style.css">
  <script src="https://cdn.tailwindcss.com"></script>
  <title>tailwind</title>
</head>
<body>

 <div class="container min-h-screen bg-[url('images/image.png')] bg-center bg-cover px-28 py-5 relative">
  <nav class="flex items-center">
    <img src="./images/logo.png" class="w-40 cursur-pointer">
    <ul class="flex-1 text-center">
      <li class="list-none inline-block px-5"><a href="#" class="no-underline text-white px-2">Home</a></li>
      <li class="list-none inline-block px-5" ><a href="#" class="no-underline text-white px-2">About</a></li>
      <li class="list-none inline-block px-5" ><a href="#" class="no-underline text-white px-2">Features</a></li>
      <li class="list-none inline-block px-5" ><a href="#" class="no-underline text-white px-2">Contact</a></li>
    </ul>
    <img src="./images/cart.png" class="w-8 cursur-pointer">
  </nav>
  <div class="text-white mt-48 max-w-xl">
    <h1 class="text-6xl font-semibold leading-normal">Groceries<br>delivery in <span class="font-light">15 mins</span> </h1>
    <p>Grocify offer a wide range of products, including fresh peoducts, meats, dairy, baked good and non-perisheble items.</p>
    <div class="mt-10">
      <a href="#" class="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-transparent">Order Now</a>
      <a href="#" >Download App </a>
      <div>
        <img src="./images/grocery-image.png" class="w-full xl:w-1/2 xl:absolute bottom-0 right-20">
      </div>
    </div>
  </div>
  </div>
</body>
</html>