-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcontact.html
265 lines (246 loc) · 9.65 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" type="images/x-icon" href="./images/icon.svg" />
<link rel="stylesheet" href="./css/style.css" />
<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=Roboto:wght@300;400;700;900&display=swap"
rel="stylesheet"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<script src="./js/nav.js" defer></script>
<title>Arch Scape</title>
</head>
<body>
<!-- Nav bar -->
<nav class="sticky top-0 bg-white z-10">
<!-- Container -->
<div class="container mx-auto flex justify-between items-center p-6">
<!-- Logo container -->
<div>
<a href="./index.html"
><img src="./images/logo.svg" alt="logo" class="h-20"
/></a>
</div>
<!-- Mobile hamburger-menu container -->
<div
class="flex flex-col space-y-2 lg:hidden cursor-pointer"
id="hamburger-menu"
>
<span class="bg-black inline-block w-8 h-0.5"></span>
<span class="bg-black inline-block w-8 h-0.5"></span>
<span class="bg-black inline-block w-8 h-0.5"></span>
</div>
<!-- Mobile menu container -->
<div
class="hidden z-20 fixed inset-0 bg-darkGray opacity-80 flex-col space-y-4 justify-center items-center"
id="mobile-menu"
>
<div
class="flex flex-col ml-[50%] mb-16 text-white text-2xl cursor-pointer"
id="close"
>
<i class="fa-solid fa-x" style="color: #ffffff"></i>
</div>
<a
href="./index.html"
class="text-sm py-2 px-4 uppercase text-white tracking-verywide border-y border-white border-opacity-0 transition duration-300 hover:border-opacity-100"
>Home</a
>
<a
href="./projects.html"
class="text-sm py-2 px-4 uppercase text-white tracking-verywide border-y border-white border-opacity-0 transition duration-300 hover:border-opacity-100"
>Projects</a
>
<a
href="./about.html"
class="text-sm py-2 px-4 uppercase text-white tracking-verywide border-y border-white border-opacity-0 transition duration-300 hover:border-opacity-100"
>About</a
>
<a
href="./contact.html"
class="text-sm py-2 px-4 uppercase text-white tracking-verywide border-y border-white border-opacity-0 transition duration-300 hover:border-opacity-100"
>Contact</a
>
</div>
<!-- Menu container -->
<div class="hidden lg:flex space-x-12 items-center">
<!-- Item 1 -->
<a
href="./index.html"
class="text-sm py-2 px-4 uppercase text-darkGray tracking-verywide border-y border-darkGray border-opacity-0 transition duration-300 hover:border-opacity-100"
>Home</a
>
<!-- Item 2 -->
<a
href="./projects.html"
class="text-sm py-2 px-4 uppercase text-darkGray tracking-verywide border-y border-darkGray border-opacity-0 transition duration-300 hover:border-opacity-100"
>Projects</a
>
<!-- Item 3 -->
<a
href="./about.html"
class="text-sm py-2 px-4 uppercase text-darkGray tracking-verywide border-y border-darkGray border-opacity-0 transition duration-300 hover:border-opacity-100"
>About</a
>
<!-- Item 4 -->
<a
href="./contact.html"
class="text-sm py-2 px-4 uppercase text-darkGray tracking-verywide border-y border-darkGray"
>Contact</a
>
</div>
</div>
</nav>
<!-- Header -->
<section class="bg-containerBgGray">
<div
class="container mx-auto flex flex-col-reverse lg:flex-row justify-between py-8 px-6"
>
<!-- Content container -->
<div
class="w-full lg:w-1/2 lg:max-w-xl flex flex-col space-y-8 mr-4 mt-4 lg:mt-0"
>
<!-- Title -->
<h1 class="text-4xl lg:text-6xl text-medGray font-light">
Contact<br /><span class="text-darkGray font-bold">Information</span>
</h1>
<!-- Desc -->
<div class="flex flex-col space-y-2">
<!-- Desc Title -->
<h2 class="text-2xl lg:text-3xl text-medGray font-light">
Get in Touch with Us
</h2>
<p class="text-darkGray font-light">
We value open communication and collaboration. Whether you have a question about our services, need assistance with an ongoing project, or just want to share your thoughts, we're here to listen. Drop us a message below, and our dedicated team will get back to you at the earliest. Your insights and inquiries pave the way for mutual growth and understanding.
</p>
</div>
<!-- Button -->
<div>
<a
href="https://www.google.com/maps/"
target="_blank"
class="inline-block bg-darkGray text-white py-8 pr-8 pl-4 uppercase tracking-verywide text-xs hover:bg-black duration-300"
>Visit us
<img
src="./images/elements/arrow-right-white.svg"
alt=""
class="inline ml-4"
/></a>
</div>
</div>
<!-- Img container -->
<div
class="w-full h-96 lg:w-1/2 lg:h-auto bg-contact bg-cover bg-no-repeat bg-center"
></div>
</div>
</section>
<!-- Contact Us -->
<section class="bg-containerBgGray mt-40">
<div class="container mx-auto p-8">
<!-- Title -->
<p class="text-4xl lg:text-6xl font-light text-medGray">Contact Us</p>
<!-- Form section -->
<div class="grid grid-cols-12 gap-5 mt-8 lg:mt-20">
<form
action="#"
class="col-span-12 lg:col-span-4 flex flex-col justify-between gap-4"
>
<input
type="text"
placeholder="Name*"
class="w-full p-5 focus:outline-none bg-semiGray"
required
/>
<input
type="text"
placeholder="Phone Number"
class="w-full p-5 focus:outline-none bg-semiGray"
/>
<input
type="email"
placeholder="Email*"
class="w-full p-5 focus:outline-none bg-semiGray"
required
/>
<input
type="text"
placeholder="Interested in*"
class="w-full p-5 focus:outline-none bg-semiGray"
required
/>
<input
type="text"
placeholder="Message*"
class="w-full p-5 focus:outline-none bg-semiGray"
required
/>
<input
type="submit"
class="w-full p-5 focus:outline-none bg-darkGray text-white cursor-pointer hover:bg-black duration-300"
/>
</form>
<div class="col-span-12 h-96 lg:col-span-8 lg:h-auto bg-right bg-contactForm">
</div>
</div>
</div>
</section>
<!-- Footer -->
<section class="bg-darkGray text-white p-8 mt-40">
<div class="container mx-auto flex flex-col p-8 space-y-10 items-center lg:items-start lg:flex-row lg:justify-between lg:space-y-0">
<!-- Logo -->
<img src="./images/logo-white.svg" alt="" class="h-16" />
<!-- Menu -->
<ul class="flex flex-col space-y-3">
<li class="font-bold">Menu</li>
<li><a href="./index.html">Home</a></li>
<li><a href="./projects.html">Projects</a></li>
<li><a href="./about.html">About</a></li>
<li><a href="./contact.html">Contact</a></li>
</ul>
<!-- Contacts -->
<ul class="flex flex-col space-y-3">
<li class="font-bold">Contacts</li>
<li class="flex items-center space-x-2">
<img src="./images/elements/location.svg" alt="" />
<span
>1234 Sample Street<br />
Austin Texas 78704</span
>
</li>
<li class="flex items-center space-x-2">
<img src="./images/elements/phone.svg" alt="" />
<span></span>
512.333.2222</span
>
</li>
<li class="flex items-center space-x-2">
<img src="./images/elements/email.svg" alt="" />
<span></span>
[email protected]</span
>
</ul>
<!-- Social media -->
<ul class="flex flex-col space-y-3">
<li class="font-bold">Social Media</li>
<li class="flex flex-col items-center space-y-4 lg:flex-row lg:space-x-10 lg:space-y-0">
<a href="#"><img src="./images/elements/facebook.svg" alt=""></a>
<a href="#"><img src="./images/elements/twitter.svg" alt=""></a>
<a href="#"><img src="./images/elements/Linked-in.svg" alt=""></a>
<a href="#"><img src="./images/elements/pininterest.svg" alt=""></a>
</li>
</ul>
</div>
</section>
</body>
</html>