-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
85 lines (79 loc) · 18.1 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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>RemoveBG</title>
<link rel="preconnect" href="https://fonts.googleapis.com"/>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap" rel="stylesheet"/>
<link rel="icon" type="image/x-icon" href="/assets/favicon.icon"/>
<link rel="stylesheet" href="/styles/styles.css"/>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
fontFamily: {
sans: ['"Poppins"']
}
}
}
}
</script>
</head>
<body class="p-0 m-0 border-0 bd-example">
<!-- Navbar -->
<nav class="z-20 flex flex-row h-[72px] px-8 items-center justify-between shadow-md sticky top-0 bg-white">
<a class="navbar-brand" href="/">
<svg width="210" height="72" viewBox="0 0 210 72" fill="none" xmlns="http://www.w3.org/2000/svg" class="transition ease-in-out group-active:scale-[0.98]">
<path d="M0.474743 33.2646L20.7484 43.8648C20.874 43.931 21.0138 43.9656 21.1557 43.9656C21.2976 43.9656 21.4374 43.931 21.563 43.8648L41.837 33.2646C41.98 33.1901 42.0997 33.0778 42.1833 32.9398C42.2669 32.8018 42.3111 32.6435 42.3111 32.4821C42.3111 32.3206 42.2669 32.1623 42.1833 32.0243C42.0997 31.8863 41.98 31.774 41.837 31.6995L21.563 21.0993C21.4368 21.0341 21.2968 21 21.1548 21C21.0128 21 20.8728 21.0341 20.7466 21.0993L0.472994 31.6995C0.330292 31.7742 0.210774 31.8868 0.127434 32.0248C0.0440945 32.1629 0.00012531 32.3212 0.000305729 32.4826C0.000486147 32.644 0.0448106 32.8022 0.128459 32.9401C0.212107 33.0779 0.331874 33.1902 0.474743 33.2646V33.2646Z" fill="#54616C" class="group-hover:fill-typo-secondary transition ease-in-out"></path>
<path d="M41.8368 38.7346L38.4818 36.9809L22.3774 45.4001C22.0011 45.5968 21.5831 45.6998 21.1587 45.7004C20.7343 45.701 20.316 45.5992 19.9392 45.4036L3.82901 36.9802L0.474494 38.7339C0.331471 38.8084 0.21159 38.9207 0.127919 39.0588C0.0442486 39.1968 0 39.3552 0 39.5167C0 39.6782 0.0442486 39.8366 0.127919 39.9747C0.21159 40.1127 0.331471 40.2251 0.474494 40.2995L20.7481 50.8992C20.8737 50.9654 21.0135 51 21.1554 51C21.2973 51 21.4371 50.9654 21.5627 50.8992L41.8368 40.2995C41.9797 40.2249 42.0994 40.1125 42.183 39.9745C42.2666 39.8365 42.3108 39.6781 42.3108 39.5167C42.3108 39.3553 42.2666 39.1969 42.183 39.0589C42.0994 38.9209 41.9797 38.8085 41.8368 38.7339V38.7346Z" fill="#BAC0C4" class="group-hover:fill-typo-secondary transition ease-in-out"></path>
<path d="M66.9424 28.4234C67.0212 28.5104 67.0818 28.6125 67.1204 28.7235C67.1591 28.8344 67.175 28.9521 67.1672 29.0694V31.4588C67.1672 31.9649 66.8863 32.246 66.3244 32.3023C65.7047 32.3446 65.0967 32.4918 64.5261 32.7377C63.9058 33.0052 63.35 33.4028 62.8962 33.9039C62.2221 34.6346 61.885 35.7024 61.8847 37.1074V43.0931C61.8944 43.2065 61.8793 43.3206 61.8404 43.4274C61.8015 43.5343 61.7396 43.6313 61.6593 43.7116C61.5789 43.792 61.482 43.8537 61.3753 43.8925C61.2686 43.9313 61.1547 43.9463 61.0416 43.9362H58.5409C58.4278 43.9463 58.3139 43.9313 58.2072 43.8925C58.1005 43.8537 58.0036 43.792 57.9232 43.7116C57.8429 43.6313 57.7811 43.5343 57.7421 43.4274C57.7032 43.3206 57.6881 43.2065 57.6978 43.0931V29.3224C57.6881 29.209 57.7032 29.0949 57.7421 28.9881C57.7811 28.8812 57.8429 28.7842 57.9232 28.7039C58.0036 28.6235 58.1005 28.5618 58.2072 28.523C58.3139 28.4842 58.4278 28.4693 58.5409 28.4793H61.0418C61.1549 28.4693 61.2688 28.4842 61.3755 28.523C61.4822 28.5618 61.5792 28.6235 61.6595 28.7039C61.7399 28.7842 61.8017 28.8812 61.8406 28.9881C61.8795 29.0949 61.8947 29.209 61.8849 29.3224V30.5309C62.4095 29.8345 63.094 29.2753 63.8803 28.9008C64.6483 28.5314 65.4762 28.303 66.3246 28.2263C66.4357 28.2113 66.5488 28.2211 66.6556 28.2552C66.7624 28.2893 66.8604 28.3467 66.9424 28.4234V28.4234Z" fill="#54616C"></path>
<path d="M73.0253 43.5283C71.7629 42.9782 70.6677 42.104 69.8504 40.994C68.9317 39.7927 68.4727 38.2158 68.4736 36.2632C68.4437 34.7791 68.8281 33.3163 69.5835 32.0394C70.3084 30.833 71.3545 29.8529 72.6044 29.2092C73.9252 28.5317 75.3915 28.1885 76.8751 28.2096C78.2264 28.2017 79.5602 28.5154 80.7668 29.125C81.9672 29.7285 82.9891 30.6363 83.7309 31.7582C84.1976 32.4197 84.5319 33.1656 84.7152 33.9547C84.8758 34.7799 84.9512 35.6195 84.9403 36.4603C84.953 36.8148 84.844 37.163 84.6315 37.4467C84.528 37.5771 84.3951 37.681 84.2436 37.7496C84.0921 37.8182 83.9265 37.8497 83.7604 37.8413H72.6611C72.7401 38.292 72.9202 38.7189 73.188 39.0896C73.4557 39.4603 73.804 39.7652 74.2066 39.9812C75.0244 40.4301 75.9429 40.6627 76.8753 40.657C77.5469 40.6742 78.2153 40.5593 78.8427 40.3188C79.3851 40.0941 79.8806 39.7694 80.3035 39.3617C80.4848 39.1822 80.7235 39.0726 80.9775 39.052C81.1592 39.0563 81.3355 39.115 81.4835 39.2208L83.3098 40.291C83.6096 40.4597 83.7596 40.6662 83.7598 40.9102C83.7412 41.1074 83.6627 41.2942 83.5349 41.4453C81.8113 43.3787 79.5914 44.3454 76.8751 44.3452C75.5493 44.3421 74.2386 44.0639 73.0253 43.5283V43.5283ZM74.0233 32.7431C73.6778 32.9867 73.3878 33.3008 73.1723 33.6648C72.9567 34.0288 72.8206 34.4344 72.7729 34.855H80.5C80.4392 34.3358 80.2457 33.8411 79.938 33.4189C79.6082 32.9587 79.1751 32.5825 78.6736 32.3207C78.1094 32.0297 77.4817 31.8846 76.8473 31.8983C75.7051 31.8987 74.7638 32.1805 74.0233 32.7435V32.7431Z" fill="#54616C"></path>
<path d="M111.34 29.9131C112.417 31.0559 112.956 32.6858 112.956 34.8028V43.0925C112.965 43.2058 112.95 43.3199 112.911 43.4267C112.872 43.5335 112.811 43.6305 112.73 43.7109C112.65 43.7912 112.553 43.853 112.446 43.8918C112.34 43.9306 112.226 43.9456 112.113 43.9356H109.556C109.443 43.9456 109.329 43.9307 109.222 43.8919C109.115 43.8531 109.018 43.7913 108.938 43.711C108.858 43.6306 108.796 43.5336 108.757 43.4268C108.718 43.3199 108.703 43.2058 108.713 43.0925V34.8026C108.713 33.7346 108.446 32.9477 107.912 32.4419C107.378 31.9362 106.643 31.6832 105.706 31.683C105.314 31.6762 104.925 31.7543 104.567 31.912C104.208 32.0696 103.887 32.3031 103.626 32.5965C103.064 33.2053 102.774 34.1187 102.755 35.3366V43.0925C102.765 43.2058 102.75 43.32 102.711 43.4268C102.672 43.5337 102.61 43.6307 102.53 43.7111C102.45 43.7914 102.353 43.8532 102.246 43.892C102.139 43.9307 102.025 43.9456 101.912 43.9356H99.3556C99.2425 43.9457 99.1286 43.9308 99.0219 43.892C98.9152 43.8533 98.8182 43.7915 98.7379 43.7112C98.6575 43.6308 98.5957 43.5337 98.5568 43.4268C98.5179 43.32 98.5029 43.2058 98.5128 43.0925V34.8026C98.5128 33.7346 98.2503 32.9477 97.7253 32.4419C97.2003 31.9362 96.4697 31.6832 95.5334 31.683C95.1253 31.671 94.7198 31.7521 94.3474 31.92C93.9751 32.088 93.6457 32.3385 93.384 32.6526C92.8312 33.2991 92.5548 34.3342 92.555 35.7577L92.527 43.0925C92.527 43.6545 92.2458 43.9356 91.6835 43.9356H89.1832C89.0701 43.9456 88.9562 43.9308 88.8495 43.892C88.7428 43.8532 88.6458 43.7914 88.5655 43.7111C88.4851 43.6307 88.4233 43.5337 88.3844 43.4268C88.3455 43.3199 88.3305 43.2058 88.3403 43.0925V29.3226C88.3305 29.2092 88.3455 29.0951 88.3844 28.9883C88.4233 28.8814 88.4851 28.7844 88.5655 28.704C88.6458 28.6236 88.7428 28.5619 88.8495 28.5231C88.9562 28.4843 89.0701 28.4694 89.1832 28.4795H91.6835C91.7966 28.4694 91.9105 28.4843 92.0172 28.5231C92.124 28.5619 92.221 28.6236 92.3013 28.704C92.3817 28.7843 92.4436 28.8814 92.4826 28.9882C92.5215 29.0951 92.5367 29.2092 92.527 29.3226V29.8846C93.1097 29.3734 93.7747 28.9647 94.4937 28.6761C95.1583 28.3805 95.8743 28.2182 96.6012 28.1985C98.7741 28.1985 100.432 28.901 101.575 30.306C102.165 29.6244 102.906 29.0904 103.738 28.7463C104.628 28.3752 105.584 28.1888 106.548 28.1983C108.665 28.199 110.263 28.7706 111.34 29.9131Z" fill="#54616C"></path>
<path d="M120.725 43.233C119.469 42.5365 118.418 41.5219 117.676 40.2905C116.941 39.0715 116.552 37.6742 116.552 36.2497C116.552 34.8253 116.941 33.428 117.676 32.2089C118.422 30.9729 119.478 29.9537 120.738 29.2524C122.668 28.179 124.935 27.8873 127.072 28.4372C129.21 28.9871 131.056 30.3368 132.231 32.2089C132.969 33.4226 133.358 34.8167 133.355 36.2377C133.353 37.6588 132.959 39.0515 132.217 40.2625C131.044 42.1373 129.199 43.4903 127.061 44.0429C124.923 44.5955 122.655 44.3058 120.724 43.2332L120.725 43.233ZM122.79 32.4479C122.145 32.8216 121.612 33.3611 121.245 34.0106C120.878 34.7016 120.685 35.4718 120.683 36.2545C120.68 37.0371 120.868 37.8085 121.231 38.5018C121.584 39.1568 122.115 39.6986 122.762 40.0645C123.246 40.3576 123.784 40.5496 124.344 40.6288C124.904 40.7081 125.474 40.673 126.02 40.5257C126.566 40.3784 127.077 40.1219 127.521 39.7717C127.966 39.4215 128.335 38.9847 128.607 38.4878C128.98 37.7963 129.174 37.0215 129.169 36.2352C129.177 35.4635 128.989 34.7025 128.621 34.0246C128.263 33.3659 127.734 32.8163 127.09 32.4338C126.431 32.0575 125.684 31.863 124.926 31.8702C124.175 31.8659 123.437 32.0657 122.79 32.4483V32.4479Z" fill="#54616C"></path>
<path d="M142.496 43.9787C142.271 43.9787 142.074 43.8191 141.905 43.4998L134.712 29.5337C134.642 29.4035 134.604 29.2589 134.6 29.1113C134.6 28.7167 134.843 28.5194 135.33 28.5194H138.169C138.381 28.5038 138.592 28.5552 138.774 28.6662C138.955 28.7773 139.097 28.9425 139.18 29.1387L142.467 36.094L145.755 29.1387C145.838 28.9424 145.98 28.7772 146.162 28.6661C146.343 28.555 146.555 28.5037 146.767 28.5194H149.632C150.119 28.5194 150.362 28.7167 150.363 29.1113C150.358 29.2589 150.32 29.4036 150.25 29.5337L143.057 43.4998C142.908 43.8195 142.721 43.9792 142.496 43.9787Z" fill="#54616C"></path>
<path d="M156.159 43.5283C154.897 42.9781 153.802 42.1039 152.985 40.994C152.066 39.7927 151.607 38.2158 151.608 36.2632C151.578 34.7792 151.962 33.3163 152.718 32.0395C153.443 30.833 154.489 29.8529 155.739 29.2092C157.059 28.5317 158.526 28.1885 160.009 28.2096C161.361 28.2018 162.694 28.5155 163.901 29.125C165.102 29.728 166.125 30.6358 166.867 31.7582C167.333 32.4198 167.668 33.1657 167.851 33.9547C168.012 34.78 168.087 35.6196 168.076 36.4603C168.089 36.8148 167.98 37.163 167.767 37.4467C167.664 37.5772 167.53 37.681 167.379 37.7497C167.227 37.8183 167.061 37.8497 166.895 37.8413H155.795C155.873 38.292 156.054 38.7188 156.321 39.0895C156.589 39.4602 156.937 39.7652 157.34 39.9812C158.158 40.43 159.076 40.6626 160.009 40.657C160.68 40.6741 161.348 40.5592 161.976 40.3188C162.518 40.0942 163.014 39.7696 163.437 39.3617C163.618 39.1822 163.857 39.0725 164.111 39.052C164.293 39.0563 164.469 39.1151 164.617 39.2208L166.444 40.291C166.569 40.3422 166.677 40.4273 166.756 40.5367C166.835 40.646 166.883 40.7754 166.893 40.9102C166.875 41.1069 166.797 41.2934 166.67 41.4444C164.946 43.3779 162.726 44.3445 160.01 44.3444C158.684 44.3416 157.373 44.0637 156.159 43.5283V43.5283ZM157.157 32.7431C156.812 32.9867 156.522 33.3008 156.306 33.6648C156.091 34.0288 155.954 34.4344 155.907 34.855H163.634C163.573 34.3358 163.38 33.8411 163.072 33.4189C162.742 32.9587 162.309 32.5825 161.808 32.3207C161.244 32.0297 160.616 31.8845 159.982 31.8983C158.838 31.8987 157.897 32.1805 157.157 32.7435V32.7431Z" fill="#54616C"></path>
<path d="M178.022 43.7558C177.851 43.9044 177.629 43.9803 177.404 43.9673H174.93C174.817 43.9773 174.703 43.9623 174.596 43.9234C174.49 43.8845 174.393 43.8226 174.312 43.742C174.232 43.6615 174.17 43.5643 174.131 43.4573C174.092 43.3502 174.077 43.236 174.087 43.1225V23.5251C174.077 23.4116 174.092 23.2973 174.131 23.1903C174.17 23.0832 174.232 22.986 174.312 22.9055C174.392 22.8249 174.489 22.7631 174.596 22.7242C174.703 22.6853 174.817 22.6704 174.93 22.6805H177.402C177.516 22.6704 177.63 22.6853 177.736 22.7242C177.843 22.7631 177.94 22.8249 178.021 22.9055C178.101 22.986 178.163 23.0832 178.202 23.1903C178.24 23.2974 178.255 23.4117 178.245 23.5251V30.0861C178.752 29.4613 179.41 28.9765 180.156 28.6776C181.037 28.3102 181.984 28.1282 182.938 28.143C184.376 28.1125 185.795 28.4776 187.04 29.1987C188.208 29.8895 189.154 30.9013 189.766 32.1142C190.393 33.3926 190.711 34.8012 190.693 36.2257C190.715 37.6503 190.397 39.0595 189.766 40.3361C189.167 41.5359 188.242 42.5415 187.097 43.2369C185.834 43.9673 184.396 44.3374 182.938 44.3071C181.973 44.3126 181.017 44.1208 180.129 43.7435C179.247 43.3687 178.62 42.9276 178.246 42.4204V43.1782C178.251 43.2848 178.234 43.3915 178.196 43.4911C178.157 43.5907 178.098 43.6809 178.022 43.7558ZM179.216 39.4198C179.974 40.1987 181.009 40.5881 182.321 40.5878C183.576 40.5878 184.597 40.1796 185.383 39.3633C186.17 38.5469 186.563 37.5004 186.564 36.2237C186.564 34.9096 186.18 33.849 185.412 33.0417C184.645 32.2344 183.614 31.8308 182.321 31.8308C181.047 31.8308 180.022 32.2344 179.245 33.0417C178.468 33.849 178.079 34.9096 178.078 36.2237C178.078 37.5751 178.457 38.6405 179.216 39.4198V39.4198Z" fill="#BAC0C4"></path>
<path d="M209.773 28.6737C209.851 28.7563 209.911 28.8537 209.949 28.9602C209.988 29.0666 210.005 29.1798 209.999 29.293V42.5552C209.999 44.808 209.31 46.5725 207.933 47.8487C206.556 49.1249 204.641 49.7633 202.187 49.7637C199.564 49.7637 197.326 49.1442 195.472 47.9052C195.357 47.846 195.261 47.7575 195.192 47.6488C195.122 47.54 195.083 47.4148 195.078 47.286C195.087 47.0915 195.156 46.9047 195.275 46.7509L196.371 45.1456C196.438 45.0312 196.532 44.9352 196.645 44.8663C196.757 44.7974 196.886 44.7578 197.018 44.751C197.208 44.7576 197.392 44.8159 197.551 44.9198C198.175 45.3256 198.858 45.6341 199.574 45.8348C200.323 46.0508 201.099 46.1599 201.878 46.159C204.52 46.159 205.84 44.9575 205.841 42.5545V42.3022C204.735 43.2229 203.293 43.6829 201.513 43.6822C200.027 43.7124 198.557 43.3635 197.242 42.6681C196.038 42.0238 195.043 41.0465 194.377 39.8523C193.721 38.6532 193.382 37.306 193.392 35.9388C193.371 34.5611 193.71 33.2019 194.377 31.9967C195.044 30.8206 196.027 29.855 197.213 29.2088C198.412 28.5145 199.845 28.1671 201.512 28.1667C203.292 28.1667 204.734 28.6267 205.84 29.5466V29.2932C205.83 29.1798 205.845 29.0655 205.884 28.9585C205.922 28.8514 205.984 28.7542 206.064 28.6737C206.145 28.5931 206.242 28.5312 206.349 28.4923C206.455 28.4534 206.57 28.4384 206.683 28.4484H209.155C209.268 28.442 209.381 28.4586 209.487 28.4974C209.593 28.5361 209.691 28.5961 209.773 28.6737V28.6737ZM203.915 39.5851C204.556 39.224 205.086 38.6932 205.446 38.0507C205.817 37.4091 206.011 36.6804 206.008 35.9392C206.018 35.1898 205.829 34.4511 205.461 33.7989C205.097 33.1625 204.568 32.6371 203.93 32.2786C203.267 31.9155 202.521 31.7311 201.766 31.7435C200.511 31.7435 199.49 32.1377 198.703 32.926C198.312 33.3211 198.005 33.7922 197.803 34.3104C197.6 34.8286 197.505 35.3829 197.523 35.9392C197.523 37.1972 197.907 38.211 198.676 38.9805C199.444 39.7501 200.474 40.1349 201.766 40.1349C202.518 40.1433 203.259 39.9537 203.915 39.5851Z" fill="#BAC0C4"></path>
</svg>
</a>
<a class="navbar-brand" href="https://liftoffclub.in">
<img src="liftoff.png" class="h-[32px]">
</a>
</nav>
<div class="flex flex-row justify-between items-center max-w-5xl mx-auto py-12">
<div class="w-[42%] flex-shrink-0">
<video class="rounded-lg w-full aspect-16/9" src="/assets/hero_vid.mp4" autoplay="1" muted loop="false" ></video>
<h1 class="text-5xl font-bold mt-12 text-gray-800">Remove Image Background
</h1>
<p class="text-2xl text-gray-600 mt-6">
With the help of AI
</p>
</div>
<div class="ml-12 w-full relative">
<div class="flex flex-col w-full justify-center items-center rounded-xl shadow-lg p-12 bg-blue-100 text-blue-800 drag-area border-blue-800 border-dashed h-[312px]">
<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 640 512" height="4em" width="4em" xmlns="http://www.w3.org/2000/svg" data-darkreader-inline-fill="" data-darkreader-inline-stroke="" style="--darkreader-inline-fill: currentColor; --darkreader-inline-stroke: currentColor;">
<path d="M144 480C64.5 480 0 415.5 0 336c0-62.8 40.2-116.2 96.2-135.9c-.1-2.7-.2-5.4-.2-8.1c0-88.4 71.6-160 160-160c59.3 0 111 32.2 138.7 80.2C409.9 102 428.3 96 448 96c53 0 96 43 96 96c0 12.2-2.3 23.8-6.4 34.6C596 238.4 640 290.1 640 352c0 70.7-57.3 128-128 128H144zm79-217c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l39-39V392c0 13.3 10.7 24 24 24s24-10.7 24-24V257.9l39 39c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-80-80c-9.4-9.4-24.6-9.4-33.9 0l-80 80z"></path>
</svg>
<span class="text-2xl font-semibold mt-6 drag-file">Drag and drop image here</span>
<div id="progress" class="bar hidden">
<span class="bar-unfill">
<span class="bar-fill"></span>
</span>
</div>
<span class="upload-supplement text-lg mt-3">Or</span>
<button class="upload-supplement bg-blue-800 text-white font-semibold text-xl px-12 py-2 rounded-full mt-3 file-input-button">Select Image</button>
<input type="file" class="file-input" hidden/>
</div>
<button class="upload supplement bg-blue-800 text-white font-semibold textxl px-12 py-2 rounded-full mt-3 file-click-button"id="edit">Edit </button>
<p id="filesize-error" class="absolute bottom-0 inset-x-0 -mb-[42px] font-semibold text-red-600 text-center hidden">File exceeds size</p>
<p id="filetype-error" class="absolute bottom-0 inset-x-0 -mb-[42px] font-semibold text-red-600 text-center hidden">File of invalid type</p>
<img id="preview-image" src="" alt="placeholder" class="h-32 rounded absolute bottom-0 inset-x-0 -mb-[160px] hidden">
</div>
<div class="drag-area">
</div>
<script src="script.js"></script>
</body>
</html>