-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
176 lines (176 loc) · 9.09 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
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://cdn.tailwindcss.com"></script>
<link
href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"
rel="stylesheet"
/>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&display=swap"
/>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap"
/>
<link rel="website icon" type="icon" href="favico.ico">
<title>xpeditionx</title>
</head>
<body class="bg-[#B50B21] px-4 md:px-24 relative z-10 overflow-x-hidden">
<svg
viewBox="0 0 1116 892"
fill="none"
xmlns="http://www.w3.org/2000/svg"
class="absolute md:-top-8 md:-right-8 top-0 right-0 w-[600px] -z-20 overflow-hidden opacity-25 md:opacity-100"
>
<g style="mix-blend-mode: overlay">
<path
d="M1469.91 483.342C1603.94 335.909 1594.53 105.634 1449 -30.4401C1386.87 -88.7281 1306.29 -123.429 1221.25 -128.524C1121.29 -134.575 1025.44 -169.751 941.724 -224.86C695.528 -386.984 359.241 -348.702 155.825 -121.502C-66.7479 127.219 -45.3902 512.434 202.942 735.396C438.038 946.481 791.444 938.747 1016.77 733.648C1091.2 665.951 1180.74 616.375 1278.88 594.499C1352.53 578.107 1419.27 539.269 1469.91 483.342Z"
stroke="white"
stroke-width="2.67821"
stroke-miterlimit="10"
/>
</g>
<g style="mix-blend-mode: overlay">
<path
d="M1434.79 475.898C1561.78 336.167 1552.88 117.962 1414.96 -10.9931C1356.07 -66.2311 1279.71 -99.1122 1199.11 -103.932C1104.33 -109.562 1013.59 -142.99 934.247 -195.252C700.962 -348.866 382.15 -312.59 189.478 -97.2977C-21.4135 138.414 -1.18837 503.436 234.167 714.748C456.934 914.766 791.83 907.453 1005.37 713.065C1075.82 648.928 1160.7 601.941 1253.74 581.198C1323.53 565.681 1386.79 528.889 1434.79 475.898V475.898Z"
stroke="white"
stroke-width="2.67821"
stroke-miterlimit="10"
/>
</g>
<g style="mix-blend-mode: overlay">
<path
d="M1399.59 468.456C1519.55 336.426 1511.14 130.292 1380.85 8.45622C1325.23 -43.7085 1253.11 -74.7673 1176.98 -79.3369C1087.41 -84.7734 1001.69 -116.26 926.743 -165.609C706.338 -310.744 405.162 -276.475 223.136 -73.059C23.9269 149.611 43.0517 494.473 265.398 694.103C475.74 883.054 792.222 876.161 993.955 692.518C1060.52 631.907 1140.74 587.541 1228.63 567.931C1294.53 553.254 1354.26 518.499 1399.59 468.456V468.456Z"
stroke="white"
stroke-width="2.67821"
stroke-miterlimit="10"
/>
</g>
<g style="mix-blend-mode: overlay">
<path
d="M1364.51 460.981C1477.48 336.718 1469.55 142.621 1346.87 27.9369C1294.51 -21.1965 1226.59 -50.4482 1154.91 -54.7433C1070.58 -59.8562 989.876 -89.4981 919.299 -135.967C711.805 -272.624 428.233 -240.329 256.854 -48.8214C69.165 160.808 87.2543 485.51 296.592 673.457C494.733 851.438 792.609 844.966 982.628 671.969C1045.28 614.885 1120.84 573.109 1203.55 554.663C1265.6 540.829 1321.83 508.1 1364.51 460.981V460.981Z"
stroke="white"
stroke-width="2.67821"
stroke-miterlimit="10"
/>
</g>
<g style="mix-blend-mode: overlay">
<path
d="M1329.36 453.506C1435.31 337.009 1427.87 154.919 1312.83 47.3533C1263.72 1.23202 1200.02 -26.2451 1132.77 -30.3111C1053.69 -35.1004 977.996 -62.8978 911.82 -106.487C717.206 -234.633 451.27 -204.376 290.505 -24.7775C114.595 171.972 131.487 476.514 327.816 652.78C513.628 819.629 793.026 813.545 971.136 651.388C1029.93 597.897 1100.77 558.676 1178.24 541.364C1236.5 528.441 1289.31 497.741 1329.36 453.506V453.506Z"
stroke="white"
stroke-width="2.67821"
stroke-miterlimit="10"
/>
</g>
<g style="mix-blend-mode: overlay">
<path
d="M1294.22 446.095C1328.49 408.375 1351.39 361.74 1360.3 311.566C1369.21 261.392 1363.75 209.722 1344.57 162.513C1325.38 115.304 1293.25 74.4783 1251.86 44.7419C1210.48 15.0055 1161.54 -2.43037 1110.68 -5.55575C1036.83 -10.0538 966.155 -36.0067 904.347 -76.7481C722.612 -196.481 474.313 -168.166 324.226 -0.442837C159.934 183.136 175.693 467.485 359.014 632.069C532.529 787.883 793.416 782.188 959.748 630.775C1014.76 580.81 1080.77 544.211 1153.23 528.063C1207.57 515.966 1256.82 487.331 1294.22 446.095V446.095Z"
stroke="white"
stroke-width="2.67821"
stroke-miterlimit="10"
/>
</g>
<g style="mix-blend-mode: overlay">
<path
d="M1259.08 438.62C1290.92 403.581 1312.21 360.254 1320.49 313.637C1328.77 267.021 1323.7 219.013 1305.87 175.152C1288.05 131.29 1258.18 93.3612 1219.73 65.7394C1181.28 38.1176 1135.8 21.9282 1088.54 19.0383C1019.94 14.8638 954.277 -9.24449 896.87 -47.0412C813.394 -101.599 713.135 -124.449 614.263 -111.448C515.39 -98.4466 424.446 -50.4559 357.912 23.8276C205.269 194.398 219.928 458.586 390.272 611.488C551.49 756.235 793.835 750.928 948.355 610.258C999.322 563.854 1060.77 529.843 1128.08 514.99C1178.6 503.71 1224.37 477.025 1259.08 438.62V438.62Z"
stroke="white"
stroke-width="2.67821"
stroke-miterlimit="10"
/>
</g>
<g style="mix-blend-mode: overlay">
<path
d="M1223.94 431.178C1253.34 398.812 1273 358.796 1280.64 315.743C1288.29 272.69 1283.61 228.353 1267.14 187.844C1250.68 147.335 1223.11 112.303 1187.6 86.7878C1152.09 61.2725 1110.09 46.3125 1066.44 43.6326C1003.08 39.7817 942.438 17.518 889.4 -17.3987C812.3 -67.7923 719.696 -88.8967 628.374 -76.8871C537.052 -64.8774 453.054 -20.5482 391.604 48.066C250.61 205.595 264.137 449.591 421.44 590.843C570.296 724.523 794.196 719.636 936.937 589.71C984.021 546.833 1040.78 515.444 1102.94 501.561C1149.59 491.197 1191.87 466.604 1223.94 431.178V431.178Z"
stroke="white"
stroke-width="2.67821"
stroke-miterlimit="10"
/>
</g>
</svg>
<nav class="flex justify-between p-2 h-16 items-center sticky top-0 z-20">
<h1 class="text-white font-bold">XPEDITIONX</h1>
<div class="md:flex justify-between gap-8 text-white hidden">
<div class="flex justify-around gap-4 items-center">
<a href="/index.html" class="hover:scale-105"><p>Home</p></a>
<a href="/services.html" class="hover:scale-105"><p>Services</p></a>
<a href="/" class="hover:scale-105"><p>About us</p></a>
</div>
<a href="/loginpage.html" class="hover:scale-105"><button class="px-6 py-2 bg-[#F7C85A] rounded-lg text-black">
Log In
</button></a>
</div>
<button
onclick="displayNav()"
class="w-12 flex md:hidden justify-center items-center border border-white p-2 rounded-lg"
>
<svg
width="40"
height="26"
viewBox="0 0 40 26"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<line y1="1" x2="40" y2="1" stroke="white" stroke-width="2" />
<line y1="13" x2="40" y2="13" stroke="white" stroke-width="2" />
<line y1="25" x2="40" y2="25" stroke="white" stroke-width="2" />
</svg>
<div
id="navMenu"
class="bg-[#B50B21] mt-[210px] p-2 justify-center gap-2 flex-col shadow-lg absolute right-2 rounded-xl w-36 items-center border-white hidden border -z-10"
>
<div class="flex flex-col items-center justify-center gap-2 text-white font-semibold">
<a href="/index.html" class="hover:scale-105"><p>Home</p></a>
<a href="/services.html" class="hover:scale-105"><p>Services</p></a>
<p class="hover:scale-105">About us</p>
<a href="/loginpage.html"><p class="px-6 py-2 bg-[#F7C85A] rounded-lg text-black hover:scale-105">
Log In
</p></a>
</div>
</div>
</button>
</div>
</nav>
<main class="flex min-h-screen items-center justify-center md:justify-start">
<form class="text-white w-1/2 items-center md:items-start flex flex-col">
<h1 class="font-[playfair] text-8xl py-8">Selamat Datang!</h1>
<div class="flex flex-col gap-2 font-semibold text-center md:text-left">
<p>Masukkan resi untuk melacak paket anda</p>
<input type="text" class="rounded-md h-10 w-full" />
<button class="bg-[#F7C85A] rounded-lg py-2 px-8 md:w-1/2 w-full text-black hover:scale-105">
Cek resi
</button>
</div>
</form>
<div class="w-1/2 relative z-50 md:flex hidden">
<img src="hero.png" alt="">
</div>
</main>
</body>
</html>
<style>
#navMenu {
animation: fadeInFromBottom 0.3s ease-in-out;
}
@keyframes fadeInFromBottom {
from {
transform: translateY(-25%);
}
to {
transform: translateY(0);
}
}
</style>
<script>
function displayNav() {
var navMenu = document.getElementById("navMenu");
if (navMenu.classList.contains("hidden")) {
navMenu.classList.remove("hidden");
} else {
navMenu.classList.add("hidden");
}
}
</script>