-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
118 lines (110 loc) · 5.01 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact Us</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;1,100;1,200;1,300;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500&display=swap');
</style>
<script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
</head>
<body class="bg-no-repeat bg-black min-h-screen" background="Desktop - 1.svg">
<!-- Contact Form -->
<div
class="max-w-screen-xl mt-24 px-8 grid gap-8 grid-cols-1 md:grid-cols-2 md:px-12 lg:px-16 xl:px-32 py-16 mx-auto bg-gray-700 shadow-lg ">
<div class="flex flex-col justify-between rounded-bl-3xl text-white ">
<div class="space-y-3">
<h2 class="text-2xl leading-tight">Contact us</h2>
<div class="text-5xl lg:text-5xl font-bold font-style: italic mt-8">
<h1 class="font-family: 'Playfair Display', serif;">
Work for yourself, not by yourself, with
</h1>
<p class=" text-right pr-10">
insurance
</p>
</div>
<div>
<p>Send us message and will get your questions answered as soon as possible</p>
</div>
</div>
<div class="flex items-center space-x-7">
<button class="bg-white text-black py-3 px-6 text-sm font-medium rounded-full ">
Find an agent
</button>
<button class=" flex justify-center space-x-2 items-center">
<span>
123456789
</span>
<iconify-icon icon="ph:phone-call-light"></iconify-icon></button>
<ion-icon name="call-outline"></ion-icon>
</div>
</div>
<div class="bg-white shadow-lg p-5 ">
<form action="" class="flex flex-col space-y-4">
<div>
<input class="w-full bg-gray-300 text-black mt-2 p-3 rounded-lg focus:outline-none focus:shadow-outline"
type="text" placeholder="First name*">
</div>
<div class="mt-5">
<input class="w-full bg-gray-300 text-black mt-2 p-3 rounded-lg focus:outline-none focus:shadow-outline"
type="text" placeholder="Last name*">
</div>
<div class="mt-5">
<input class="w-full bg-gray-300 text-black mt-2 p-3 rounded-lg focus:outline-none focus:shadow-outline"
type="text" placeholder="Email*">
</div>
<div class="mt-5">
<input class="w-full bg-gray-300 text-black mt-2 p-3 rounded-lg focus:outline-none focus:shadow-outline"
type="text" placeholder="Phone number*">
</div>
<div class="mt-5">
<input class="w-full bg-gray-300 text-black mt-2 p-3 rounded-lg focus:outline-none focus:shadow-outline"
type="text" placeholder="Best time to contact you?">
</div>
<div class="mt-5">
<input class="w-full bg-gray-300 text-black mt-2 p-3 rounded-lg focus:outline-none focus:shadow-outline"
type="text" placeholder="What's your preferred method of contact?">
</div>
<div class="mt-5">
<input class="w-full bg-gray-300 text-black mt-2 p-10 rounded-lg focus:outline-none focus:shadow-outline"
type="text" placeholder="Do you have any additional information?">
</div>
<div class="mt-8">
<button
class="text-sm font-bold tracking-wide bg-indigo-900 text-gray-100 p-3 rounded-lg w-full focus:outline-none focus:shadow-outline">
Submit your message
</button>
</div>
</form>
</div>
<!-- Contact Information -->
<main>
<div class="space-y-5 text-white">
<div>
<h2 class="text-2xl font-semibold">General Inquiries</h2>
Muhammad Arslan</a>
</p>
</div>
<div>
<h2 class="text-2xl font-semibold">Working at Gaspar?</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Reiciendis, voluptate minus! Sed numqua
</div>
<div>
<h2 class="text-2xl font-semibold">insurance agent?</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Reiciendis, voluptate minus! Sed numqua
</div>
</div>
<p class=" font-semibold mt-8 flex space-x-4 text-white">Follow us</p>
<div class=" text-2xl space-x-3 mt-3">
<a href="#"><iconify-icon icon="logos:facebook"></iconify-icon></a>
<a href="#"><iconify-icon icon="skill-icons:instagram"></iconify-icon></a>
<a href="#"><iconify-icon icon="devicon:twitter"></iconify-icon></ion-icon></a>
</div>
</main>
</div>
</body>
</html>