-
Notifications
You must be signed in to change notification settings - Fork 0
/
services.html
212 lines (212 loc) · 11.2 KB
/
services.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
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
<!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>
<div>
<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
class="w-12 flex md:hidden justify-center items-center border border-white p-2 rounded-lg group"
>
<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
class="bg-[#B50B21] mt-[200px] p-2 justify-center gap-2 group-hover:flex flex-col z-10 shadow-lg absolute right-2 rounded-xl w-36 items-center hidden hover:flex border-white border"
>
<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 justify-center min-h-screen items-center">
<form
class="bg-white h-max w-max md:w-2/4 flex flex-col gap-4 rounded-lg p-4"
>
<div class="border-b border-gray-400 pb-4">
<h1 class="text-xl font-semibold text-gray-700 mb-8">
Customer Information
</h1>
<div class="flex flex-col gap-4">
<div class="flex gap-2 justify-end">
<p class="text-[#696969] font-semibold">Full name</p>
<input type="text" class="bg-[#E7E7E7] w-32 rounded-md" />
<input type="text" class="bg-[#E7E7E7] w-32 rounded-md" />
</div>
<div class="flex gap-2 justify-end">
<p class="text-[#696969] font-semibold">Address</p>
<input type="text" class="bg-[#E7E7E7] w-72 rounded-md" />
</div>
<div class="flex gap-2 justify-end">
<p class="text-[#696969] font-semibold">Contact</p>
<input type="text" class="bg-[#E7E7E7] w-72 rounded-md" />
</div>
</div>
</div>
<div class="border-b border-gray-400 pb-4">
<h1 class="text-xl font-semibold text-gray-700 mb-8">
Delivery Address
</h1>
<div class="flex flex-col gap-4">
<div class="flex gap-2 justify-end">
<p class="text-[#696969] font-semibold">Address</p>
<input type="text" class="bg-[#E7E7E7] w-72 rounded-md" />
</div>
<div class="flex gap-2 justify-end">
<p class="text-[#696969] font-semibold">City</p>
<input type="text" class="bg-[#E7E7E7] w-72 rounded-md" />
</div>
<div class="flex gap-2 justify-end">
<p class="text-[#696969] font-semibold">State/Provincy</p>
<input type="text" class="bg-[#E7E7E7] w-72 rounded-md" />
</div>
<div class="flex gap-2 justify-end">
<p class="text-[#696969] font-semibold">Postal Code</p>
<input type="text" class="bg-[#E7E7E7] w-72 rounded-md" />
</div>
</div>
</div>
<div class="border-gray-400 pb-4">
<h1 class="text-xl font-semibold text-gray-700 mb-8">
Package Information
</h1>
<div class="flex flex-col gap-4">
<div class="flex gap-2 justify-end">
<p class="text-[#696969] font-semibold">Type</p>
<input type="text" class="bg-[#E7E7E7] w-72 rounded-md" />
</div>
<div class="flex gap-2 justify-end">
<p class="text-[#696969] font-semibold">Weight</p>
<input type="text" class="bg-[#E7E7E7] w-72 rounded-md" />
</div>
<div class="flex gap-2 justify-end">
<p class="text-[#696969] font-semibold">Dimension</p>
<input type="text" class="bg-[#E7E7E7] w-72 rounded-md" />
</div>
</div>
</div>
<div class="flex justify-end">
<button
class="flex justify-center items-center rounded-lg py-2 w-[25%] bg-[#F7C85A] hover:scale-105 font-semibold"
>
Submit
</button>
</div>
</form>
</main>
</body>
</html>