-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcontact.html
267 lines (247 loc) · 14.4 KB
/
contact.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
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>contact</title>
<link rel="stylesheet" href="style.css">
</head>
<body class="bg-darkPink">
<header
class="shadow1 fixed lg:relative bg-darkPink nav-header font-avenir500 text-2xl hidden lg:flex justify-between items-center m-auto"
data-header>
<div class="nav-container ">
<a href="index.html" class="cursor-pointer">
<img class="max-w-[50px] lg:max-w-[200px] lg:-mb-28" src="/assets/logo.png" alt="">
</a>
<nav class="navbar max-w-xs w-full bg-white h-screen py-10 z-20 pl-[17%] " data-navbar>
<div class="navbar-top">
<a href="/index.html" class="logo">
<img class="max-w-[100px]" src="/assets/logo.png" alt="">
</a>
<button class="nav-close-btn" aria-label="close menu" data-nav-toggler>
<ion-icon name="close-outline" aria-hidden="true"></ion-icon>
</button>
</div>
<ul class="navbar-list pt-6">
<li class="navbar-item">
<a href="/index.html" class="navbar-link title-sm font-bold hover:text-accentRed"
data-nav-link>HOME</a>
</li>
<li class="navbar-item">
<a href="/fasion-still-life.html" class="navbar-link title-sm hover:text-accentRed "
data-nav-link>STILL
LIFE & FASHION</a>
</li>
<li class="navbar-item">
<a href="/interior-events.html" class="navbar-link title-sm hover:text-accentRed "
data-nav-link>LIFESTYLE &
EVENTS</a>
</li>
<li class="navbar-item">
<a href="/about.html" class="navbar-link title-sm hover:text-accentRed" data-nav-link>ABOUT
TKW</a>
</li>
<li class="navbar-item">
<a href="/contact.html" class="navbar-link title-sm text-accentRed active-link"
data-nav-link>CONTACT</a>
</li>
</ul>
</nav>
<button class="nav-open-btn pt-6 ml-auto" aria-label="open menu" data-nav-toggler>
<ion-icon name="menu-outline" aria-hidden="true"></ion-icon>
</button>
<div class="overlay" data-overlay data-nav-toggler></div>
</div>
</header>
<div class="cursor"></div>
<div class="-mt-[10%] sm:-mt-[5%] grid grid-flow-col grid-cols-3 pt-[8rem] lg:pt-20">
<h1
class=" absolute top-[15%] lg:top-[18%] left-[63%] w-[40%] font-prisma text-sm xl:text-6xl lg:text-4xl leading-[115%] lg:bg-transparent">
let's create <br>
magic together.
</h1>
<div class=""><img class="max-w-[85%] pt-[20%]" src="/assets/organised/image-(24).jpg" alt=""></div>
<div class="overflow-hidden">
<div class="slides flex slideshow">
<picture><img src="/assets/contact/GIF/image-(1).jpg" alt="" name="slide" class="lpImage block w-full">
</picture>
<picture><img src="/assets/contact/GIF/image-(2).jpg" alt="" name="slide" class="lpImage block w-full">
</picture>
<picture><img src="/assets/contact/GIF/image-(3).jpg" alt="" name="slide" class="lpImage block w-full">
</picture>
<picture><img src="/assets/contact/GIF/image-(4).jpg" alt="" name="slide" class="lpImage block w-full">
</picture>
<picture><img src="/assets/contact/GIF/image-(5).jpg" alt="" name="slide" class="lpImage block w-full">
</picture>
</div>
</div>
<div class="mt-auto"><img class="max-w-[85%] ml-auto pb-[20%]" src="/assets/organised/image-(59)1.jpg" alt="">
</div>
</div>
<div class=" ">
<div class="font-avenir400 text-lg text-black max-w-[90%] m-auto lg:pt-0">
<h2
class="uppercase text-2xl font-prisma text-black sm:text-[2.25rem] 2xl:text-[3.2rem] leading-[1.1] underline pt-4 lg:pt-24 text-center">
LET'S WORK TOGETHER</h2>
<form action="https://formsubmit.co/ahad4387@gmail.com" method="POST" class="">
<div class="lg:max-w-[50%] lg:m-auto pt-12 pb-12 text-base lg:text-lg">
<div class="w-100% fill">
<label class="pl-1" for="name_input">First Name</label>
<input class="bg-white py-[0.7rem] lg:py-5 rounded-md fill my-2 lg:my-4" type="text" name="First-Name"
id="name_input" required>
</div>
<div class="w-100% fill">
<label class="pl-1" for="name_input">Last Name</label>
<input class="bg-white py-[0.7rem] lg:py-5 rounded-md fill my-2 lg:my-4" type="text" name="Last-Name"
id="name_input" required>
</div>
<div class="w-100% fill">
<label class="pl-1" for="email">Email Address*</label>
<input class="bg-white py-[0.7rem] lg:py-5 rounded-md fill my-2 lg:my-4" type="Email"
name="email" id="email_input" required>
</div>
<div class="w-100% fill">
<label class="pl-1" for="name_input">Phone Number*</label>
<input class="bg-white py-[0.7rem] lg:py-5 rounded-md fill my-2 lg:my-4" type="text" name="Phone-Number"
id="name_input" required>
</div>
<div class="w-100% fill">
<label class="pl-1" for="name_input">Website</label>
<input class="bg-white py-[0.7rem] lg:py-5 rounded-md fill my-2 lg:my-4" type="text" name="Website"
id="name_input" required>
</div>
<div class="w-100% fill">
<label class="pl-1" for="name_input">Instagram*</label>
<input class="bg-white py-[0.7rem] lg:py-5 rounded-md fill my-2 lg:my-4" type="text" name="Instagram"
id="name_input" required>
</div>
<div class="w-100% fill">
<label class="pl-1" for="name_input">What does your company or product do? </label>
<input class="bg-white py-[0.7rem] lg:py-5 rounded-md fill my-2 lg:my-4" type="text" name="What-does-your-company-or-product-do?"
id="name_input" required>
</div>
<div class="w-100% fill">
<label class="pl-1" for="name_input">What’s the goal / purpose of this shoot? </label>
<input class="bg-white py-[0.7rem] lg:py-5 rounded-md fill my-2 lg:my-4" type="text" name="What’s-the-goal-or-purpose-of-this-shoot?"
id="name_input" required>
</div>
<div class="w-100% fill">
<label class="pl-1" for="name_input">What products will TKW be shooting? </label>
<input class="bg-white py-[0.7rem] lg:py-5 rounded-md fill my-2 lg:my-4" type="text" name="What-products-will-TKW-be-shooting?"
id="name_input" required>
</div>
<div class="w-100% fill">
<label class="pl-1" for="name_input">How many shots do you need? </label>
<input class="bg-white py-[0.7rem] lg:py-5 rounded-md fill my-2 lg:my-4" type="text" name="How-many-shots-do-you-need?"
id="name_input" required>
</div>
<div class="w-100% fill">
<label class="pl-1" for="name_input">Do you have a deadline for when you need the images
delivered? </label>
<input class="bg-white py-[0.7rem] lg:py-5 rounded-md fill my-2 lg:my-4" type="text" name="Do-you-have-a-deadline-for-when-you-need-the-images-delivered?"
id="name_input" required>
</div>
<div class="w-100% fill">
<label class="" for="name_input">Are you interested in any of our other services apart from
Photography? </label><br>
<label class="" for="name_input"></label>
<input type="checkbox" id="scales" name="scales1">
<label for="scales">GIFS/Stopmotion</label><br>
<input type="checkbox" id="scales" name="scales1">
<label for="scales">Videography</label><br>
<input type="checkbox" id="scales" name="scales1">
<label for="scales">Art/Creative Direction</label><br>
<input type="checkbox" id="scales" name="scales1">
<label for="scales">Social Media Guidance</label><br>
<input type="checkbox" id="scales" name="scales1">
<label for="scales1">Social Media Feed Organising</label><br><br>
</div>
<div class="w-100% fill">
<label class="pl-1 mb-4" for="name_input">What is your budget?*
</label><br>
<input type="radio" id="age1" name="What-is-your-budget?" value="30">
<label for="age1">Less than 1500 AED</label><br>
<input type="radio" id="age2" name="What-is-your-budget?" value="60">
<label for="age2">1500 AED - 2000 AED</label><br>
<input type="radio" id="age2" name="What-is-your-budget?" value="60">
<label for="age2">2000 AED - 3500 AED</label><br>
<input type="radio" id="age3" name="What-is-your-budget?" value="100">
<label for="age3">3500 AED - 5000 AED</label><br>
<input type="radio" id="age3" name="What-is-your-budget?" value="100">
<label for="age3">Over 5000 AED</label><br>
</div>
<div class="w-100% fill mt-4">
<label class="pl-1" for="name_input">How did you hear about TheKimWay? </label>
<input class="bg-white py-[0.7rem] lg:py-5 rounded-md fill my-2 lg:my-4" type="text" name="How-did-you-hear-about-TheKimWay?"
id="name_input" required>
</div>
<div class="w-100% fill">
<label class="pl-1" for="name_input">What is the best way to contact you?*
</label> <br>
<input type="checkbox" id="scales" name="What-is-the-best-way-to-contact-you?">
<label for="scales">Email</label><br>
<input type="checkbox" id="scales" name="What-is-the-best-way-to-contact-you?">
<label for="scales">Whatsapp</label><br>
<label for="scales">Other….</label><br>
<input class="bg-white py-[0.7rem] lg:py-5 rounded-md fill my-2 lg:my-4" type="text" name="What-is-the-best-way-to-contact-you?"
id="name_input">
</div>
<div class="submit">
<input
class="bg-accentRed w-fit font-avenir400 text-xl sm:text-2xl py-[0.5em] px-[1.5em] rounded-xl text-beige mt-10"
type="submit" value="Submit" id="form_button" />
</div>
</div>
</form>
</div>
</div>
<footer class="bg-darkPink">
<div
class="text-black font-avenir500 text-sm sm:text-[1.5rem] m-auto max-w-[90%] lg:max-w-[30%] py-[2em] flex sm:flex-row items-start justify-between gap-8 leading-[1.5rem] lg:leading-[2.5rem] flex-wrap text-center">
<ul>
<li class="underline uppercase text-accentRed ">Working Hours</li>
<li>Monday - Friday</li>
<li>9:00am - 5:00pm</li>
<li class="underline uppercase text-accentRed pt-[38px]"><a target="_blank"
href="https://www.instagram.com/thekimway/">Instagram</a></li>
</ul>
<ul>
<li class="underline uppercase text-accentRed">Services</li>
<li>Photography</li>
<li>Videography</li>
<li>Art Direction</li>
<li>Social Media</li>
</ul>
</div>
</footer>
<script src="/navbar.js"></script>
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
<script src="https://cdn.jsdelivr.net/gh/stevenschobert/instafeed.js@2.0.0rc1/src/instafeed.min.js"></script>
<script type="text/javascript">
var userFeed = new Instafeed({
get: 'user',
target: "instafeed-container",
resolution: 'low_resolution',
accessToken: 'IGQVJWQjVKVnJXVFdEd25URUdqc0lERTczUm5QZAFpTR3VhYVAxaGNJLXpnRnA5REN3dE5VX0tmdHJfSEE1ZAXJRUmxsdFF2NE85WjlQVDJJeWtrMWVTcTg4UVdSd3djMTFLZAUxMZAXp4endXV2t4QldWbgZDZD',
limit: 3
});
userFeed.run();
</script>
<script src="https://code.jquery.com/jquery-1.12.3.js"
integrity="sha256-1XMpEtA4eKXNNpXcJ1pmMPs8JV+nwLdEqwiJeCQEkyc=" crossorigin="anonymous"></script>
<script>
$(".slideshow > picture:gt(0)").hide();
setInterval(function () {
$(".slideshow > picture:first")
.hide()
.next()
.show()
.end()
.appendTo(".slideshow");
}, 1000);
</script>
</body>
</html>