-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdemo-seo-agency-contact.html
285 lines (285 loc) · 23 KB
/
demo-seo-agency-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
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
<!doctype html>
<html class="no-js" lang="en">
<head>
<title>Crafto - The Multipurpose HTML5 Template</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="author" content="ThemeZaa">
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<meta name="description" content="Elevate your online presence with Crafto - a modern, versatile, multipurpose Bootstrap 5 responsive HTML5, SCSS template using highly creative 48+ ready demos.">
<!-- favicon icon -->
<link rel="shortcut icon" href="images/favicon.png">
<link rel="apple-touch-icon" href="images/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
<!-- google fonts preconnect -->
<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<!-- style sheets and font icons -->
<link rel="stylesheet" href="css/vendors.min.css"/>
<link rel="stylesheet" href="css/icon.min.css"/>
<link rel="stylesheet" href="css/style.css"/>
<link rel="stylesheet" href="css/responsive.css"/>
<link rel="stylesheet" href="demos/seo-agency/seo-agency.css" />
</head>
<body data-mobile-nav-style="full-screen-menu" data-mobile-nav-bg-color="#2a2b3f" class="custom-cursor">
<!-- start cursor -->
<div class="cursor-page-inner">
<div class="circle-cursor circle-cursor-inner"></div>
<div class="circle-cursor circle-cursor-outer"></div>
</div>
<!-- end cursor -->
<!-- start header -->
<header>
<!-- start navigation -->
<nav class="navbar navbar-expand-lg bg-transparent header-light header-reverse glass-effect" data-header-hover="light">
<div class="container-fluid">
<div class="col-auto">
<a class="navbar-brand" href="demo-seo-agency.html">
<img src="images2/logofinal.png" data-at2x="images2/logofinal.png" alt="" class="default-logo">
<img src="images2/logofinal.png" data-at2x="images2/logofinal.png" alt="" class="alt-logo">
<img src="images2/logofinal.png" data-at2x="images2/logofinal.png" alt="" class="mobile-logo">
</a>
</div>
<div class="col-auto menu-order left-nav">
<button class="navbar-toggler float-start" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-line"></span>
<span class="navbar-toggler-line"></span>
<span class="navbar-toggler-line"></span>
<span class="navbar-toggler-line"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav alt-font">
<li class="nav-item"><a href="demo-seo-agency.html" class="nav-link">Home</a></li>
<!-- <li class="nav-item"><a href="demo-seo-agency-about.html" class="nav-link">About</a></li> -->
<!-- <li class="nav-item"><a href="demo-seo-agency-what-we-do.html" class="nav-link">What we do</a></li> -->
<!-- <li class="nav-item"><a href="demo-seo-agency-process.html" class="nav-link">Process</a></li> -->
<!-- <li class="nav-item"><a href="demo-seo-agency-pricing.html" class="nav-link">Pricing</a></li> -->
<li class="nav-item"><a href="demo-seo-agency-contact.html" class="nav-link">Contact</a></li>
</ul>
</div>
</div>
<div class="col-auto ms-auto">
<div class="header-icon">
<div class="d-none d-xl-inline-block me-25px"><a href="tel:1800222000" class="alt-font widget-text fw-600"><i class="feather icon-feather-phone-outgoing me-10px"></i>1 800 222 000</a></div>
<!-- <div class="header-button"><a href="demo-seo-agency-contact.html" class="btn btn-small btn-dark-gray btn-box-shadow btn-rounded">Get a quote</a></div> -->
</div>
</div>
</div>
</nav>
<!-- end navigation -->
</header>
<!-- end header -->
<!-- start page title -->
<section class="page-title-center-alignment ipad-top-space-margin background-position-center-bottom cover-background position-relative" style="background-image: url(images/demo-seo-agency-about-bg-01.jpg)">
<div class="background-position-left-top h-100 w-100 position-absolute left-0px top-0" style="background-image: url('images/vertical-line-bg-medium-gray.svg')"></div>
<div class="background-position-center-bottom background-size-100 background-no-repeat position-absolute bottom-0 left-0px w-100 h-250px z-index-1" style="background-image: url('images/demo-seo-agency-about-bottom-bg.png')"></div>
<div id="particles-style-01" class="h-100 position-absolute left-0px top-0 w-100" data-particle="true" data-particle-options='{"particles": {"number": {"value": 1,"density": {"enable": true,"value_area": 600}},"shape": {"type": ["image"],"image":{"src":"images/particles-demo-4-bg.png","width":220,"height":134}},"opacity": {"value": 0.5,"random": false,"anim": {"enable": false,"speed": 1,"sync": false}},"size": {"value": 120,"random": true,"anim": {"enable": false,"sync": true}},"line_linked":{"enable":false,"distance":0,"color":"#ffffff","opacity":0.4,"width":1},"move": {"enable": true,"speed":1,"direction": "right","random": false,"straight": false}},"interactivity": {"detect_on": "canvas","events": {"onhover": {"enable": false,"mode": "repulse"},"onclick": {"enable": false,"mode": "push"},"resize": true}},"retina_detect": false}'></div>
<div class="container">
<div class="row align-items-center justify-content-center position-relative z-index-1 h-250px">
<div class="col-12 text-center position-relative page-title-large" data-anime='{ "el": "childs", "opacity": [0, 1], "rotateY": [-90, 0], "rotateZ": [-10, 0], "translateY": [80, 0], "translateZ": [50, 0], "staggervalue": 200, "duration": 900, "easing": "easeOutCirc" }'>
<h1 class="alt-font d-inline-block fw-700 ls-minus-1px text-dark-gray mb-0">Contact us</h1>
<h2 class="mt-5px text-dark-gray mb-0"><span class="opacity-7">How we can help you?</span></h2>
</div>
</div>
</div>
</section>
<!-- end page title -->
<!-- start section -->
<section class="bg-gradient-top-very-light-gray position-relative overlap-height pt-6 md-pt-10">
<div class="background-position-left-top h-100 w-100 position-absolute z-index-1 left-0px top-0" style="background-image: url('images/demo-seo-agency-vertical-line-bg.svg')"></div>
<div class="container">
<div class="row row-cols-1 row-cols-md-3 row-cols-sm-2 justify-content-center overlap-gap-section" data-anime='{ "el": "childs", "translateY": [50, 0], "opacity": [0,1], "duration": 600, "delay": 0, "staggervalue": 150, "easing": "easeOutQuad" }'>
<!-- start features box item -->
<div class="col icon-with-text-style-04 transition-inner-all sm-mb-40px">
<div class="feature-box last-paragraph-no-margin">
<div class="feature-box-icon">
<i class="bi bi-geo-alt icon-large d-block text-dark-gray mb-25px"></i>
</div>
<div class="feature-box-content last-paragraph-no-margin">
<span class="d-inline-block alt-font fw-700 text-dark-gray mb-5px fs-20">Crafto office</span>
<p>401 Broadway, 24th floor<br> New york, NY 10013</p>
</div>
</div>
</div>
<!-- end features box item -->
<!-- start features box item -->
<div class="col icon-with-text-style-04 transition-inner-all sm-mb-40px">
<div class="feature-box last-paragraph-no-margin">
<div class="feature-box-icon">
<i class="bi bi-telephone-outbound icon-large d-block text-dark-gray mb-25px"></i>
</div>
<div class="feature-box-content last-paragraph-no-margin">
<span class="d-inline-block alt-font fw-700 text-dark-gray mb-5px fs-20">Call us directly</span>
<span class="d-block">Phone: <a href="tel:1800222000">1-800-222-000</a></span>
<span class="d-block">Fax: 1-800-222-002</span>
</div>
</div>
</div>
<!-- end features box item -->
<!-- start features box item -->
<div class="col icon-with-text-style-04 transition-inner-all">
<div class="feature-box last-paragraph-no-margin">
<div class="feature-box-icon">
<i class="bi bi-envelope-open icon-large d-block text-dark-gray mb-25px"></i>
</div>
<div class="feature-box-content last-paragraph-no-margin">
<span class="d-inline-block alt-font fw-700 text-dark-gray mb-5px fs-20">Send a message</span>
<a href="mailto:[email protected]" class="d-block">[email protected]</a>
<a href="mailto:[email protected]" class="d-block">[email protected]</a>
</div>
</div>
</div>
<!-- end features box item -->
</div>
</div>
</section>
<!-- end section -->
<!-- start section -->
<section class="position-relative overflow-hidden overlap-section pb-0">
<div class="background-position-center-bottom background-no-repeat h-250px position-absolute left-0px bottom-0 w-100" style="background-image: url('images/demo-seo-agency-analysis-bg.png')"></div>
<div class="container position-relative z-index-1">
<div class="row box-shadow-large g-0 border-radius-6px overflow-hidden" data-anime='{ "translateY": [0, 0], "opacity": [0,1], "duration": 600, "delay": 0, "staggervalue": 150, "easing": "easeOutQuad" }'>
<!-- start map -->
<!-- <div class="col-lg-6 box-shadow-quadruple-large">
<div id="map" class="map h-100 md-h-600px sm-h-550px" data-map-options='{ "lat": -37.805688, "lng": 144.962312, "style": "Silver", "marker": { "type": "image", "class": "marker01", "src": "https://via.placeholder.com/62x80" }, "popup": { "defaultOpen": false, "html": "<div class=infowindow><strong class=\"mb-3 d-inline-block alt-font\">Crafto SEO Agency</strong><p>16122 Collins street, Melbourne, Australia</p></div><div class=\"google-maps-link alt-font\"> <a aria-label=\"View larger map\" target=\"_blank\" jstcache=\"31\" href=\"https://maps.google.com/maps?ll=-37.805688,144.962312&z=17&t=m&hl=en-US&gl=IN&mapclient=embed&cid=13153204942596594449\" jsaction=\"mouseup:placeCard.largerMap\">VIEW LARGER MAP</a></div>" } }'></div>
</div> -->
<!-- start contact address -->
<div class="col-lg-6">
<div class="p-15 lg-p-13 md-p-10 bg-white h-100 background-position-right-bottom background-no-repeat xs-background-image-none" style="background-image: url('https://via.placeholder.com/135x162')">
<span class="ps-25px pe-25px mb-25px text-uppercase text-dark-gray fs-13 lh-42 ls-1px alt-font fw-700 border-radius-4px bg-gradient-chablis-red-quartz-white d-inline-block">Keep in touch</span>
<h3 class="alt-font text-dark-gray fw-600">Looking for help? Ready to help!</h3>
<div class="mt-11">
<div class="col icon-with-text-style-08 mb-25px">
<div class="feature-box feature-box-left-icon-middle border-bottom pb-25px border-color-extra-medium-gray">
<div class="feature-box-icon me-25px xs-me-15px lh-0px">
<i class="bi bi-telephone-outbound icon-medium text-dark-gray"></i>
</div>
<div class="feature-box-content">
<span class="alt-font fs-18 fw-500">Feel free to get in touch?</span>
<span class="d-block fw-600 alt-font fs-20"><a href="tel:1234567890" class="text-dark-gray">123 456 7890</a></span>
</div>
</div>
</div>
<div class="col icon-with-text-style-08 mb-25px">
<div class="feature-box feature-box-left-icon-middle border-bottom pb-25px border-color-extra-medium-gray">
<div class="feature-box-icon me-25px xs-me-15px lh-0px">
<i class="bi bi-envelope icon-medium text-dark-gray"></i>
</div>
<div class="feature-box-content">
<span class="alt-font fs-18 fw-500">How can we help you?</span>
<span class="d-block fw-600 alt-font fs-20"><a href="mailto:[email protected]" class="text-dark-gray">[email protected]</a></span>
</div>
</div>
</div>
<div class="col icon-with-text-style-08">
<div class="feature-box feature-box-left-icon-middle">
<div class="feature-box-icon me-25px xs-me-15px lh-0px">
<i class="bi bi-chat-text icon-medium text-dark-gray"></i>
</div>
<div class="feature-box-content">
<span class="alt-font fs-18 fw-500">Are you ready for coffee?</span>
<span class="text-dark-gray d-block alt-font fw-600 fs-20">401 Broadway, London</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- end contact address -->
<!-- end map -->
<div class="col-lg-6 contact-form-style-03">
<div class="bg-dark-gray p-15 lg-p-10 h-100 overflow-hidden position-relative">
<h1 class="fw-600 alt-font text-white fancy-text-style-4 ls-minus-1px">Say
<span data-fancy-text='{ "effect": "rotate", "string": ["hello!", "hallå!", "salve!"] }'></span>
</h1>
<!-- start contact form -->
<form action="email-templates/contact-form.php" method="post">
<div class="position-relative form-group mb-20px">
<span class="form-icon"><i class="bi bi-person icon-extra-medium"></i></span>
<input class="ps-0 border-radius-0px fs-17 bg-transparent border-color-transparent-white-light placeholder-medium-gray form-control required" type="text" name="name" placeholder="Enter your name*">
</div>
<div class="position-relative form-group mb-20px">
<span class="form-icon"><i class="bi bi-envelope icon-extra-medium"></i></span>
<input class="ps-0 border-radius-0px fs-17 bg-transparent border-color-transparent-white-light placeholder-medium-gray form-control required" type="email" name="email" placeholder="Enter your email address*">
</div>
<div class="position-relative form-group form-textarea mt-15px mb-25px">
<textarea class="ps-0 border-radius-0px fs-17 bg-transparent border-color-transparent-white-light placeholder-medium-gray form-control" name="comment" placeholder="Enter your message" rows="4"></textarea>
<span class="form-icon"><i class="bi bi-chat-square-dots icon-extra-medium"></i></span>
<input type="hidden" name="redirect" value="">
<button class="btn btn-small btn-gradient-orange-sky-blue ls-1px mt-30px submit w-100 btn-round-edge-small" type="submit">Send message</button>
<div class="form-results mt-20px d-none"></div>
</div>
<span class="text-white opacity-3 fs-14 lh-22 d-block">I accept the terms & conditions and i understand that my data will be hold securely in accordance with the privacy policy.</span>
</form>
<!-- end contact form -->
</div>
</div>
</div>
</div>
<!-- start marquees -->
<div class="fw-700 fs-170 position-absolute bottom-100px right-0px ls-minus-4px text-center d-none d-lg-block">
<div class="marquees-text alt-font text-nowrap text-gradient-orange-sky-blue">We are here to answer any question</div>
</div>
<!-- end marquees -->
</section>
<!-- end section -->
<!-- start footer -->
<footer class="footer-light half-footer">
<div class="container">
<div class="row align-items-center">
<!-- start footer column -->
<div class="col-12 col-md-auto sm-mb-15px text-center text-md-start">
<img src="images2/logofinal.png" data-at2x="images2/logofinal.png" alt="" class="default-logo">
</div>
<!-- end footer column -->
<!-- start footer column -->
<div class="col">
<ul class="footer-navbar fs-18 alt-font text-end fw-600 text-center text-md-end sm-lh-24">
<li class="nav-item active"><a href="demo-seo-agency.html" class="nav-link">Home</a></li>
<!-- <li class="nav-item"><a href="demo-seo-agency-about.html" class="nav-link">About</a></li>
<li class="nav-item"><a href="demo-seo-agency-what-we-do.html" class="nav-link">What we do</a></li>
<li class="nav-item"><a href="demo-seo-agency-process.html" class="nav-link">Process</a></li>
<li class="nav-item"><a href="demo-seo-agency-pricing.html" class="nav-link">Pricing</a></li> -->
<li class="nav-item"><a href="demo-seo-agency-contact.html" class="nav-link">Contact</a></li>
</ul>
</div>
<!-- end footer column -->
</div>
<div class="row justify-content-center align-items-center pt-40px sm-pt-30px">
<!-- start footer divider -->
<div class="col-12 mb-40px sm-mb-30px">
<div class="divider-style-03 divider-style-03-01 border-color-transparent-dark-very-light"></div>
</div>
<!-- end footer divider -->
<!-- start footer column -->
<div class="col-lg-7 col-md-8 fs-14 lh-24 text-center text-md-start last-paragraph-no-margin sm-mb-20px"><p>This site is protected by reCAPTCHA and the Google <a href="#" class="text-decoration-line-bottom">privacy policy</a> and <a href="#" class="text-decoration-line-bottom">terms of service</a> apply. You must not use this website if you disagree with any of these website standard terms and conditions.</p></div>
<!-- end footer column -->
<!-- start footer column -->
<div class="col-lg-5 col-md-4 text-end elements-social social-icon-style-08 text-center text-md-end">
<ul class="medium-icon dark d-inline-block">
<li class="mb-0"><a class="facebook" href="https://www.facebook.com/" target="_blank"><i class="fa-brands fa-facebook-f"></i></a></li>
<li class="mb-0"><a class="instagram" href="http://www.instagram.com" target="_blank"><i class="fa-brands fa-instagram"></i></a></li>
<li class="mb-0"><a class="twitter" href="http://www.twitter.com" target="_blank"><i class="fa-brands fa-twitter"></i></a></li>
<li class="mb-0"><a class="dribbble" href="http://www.dribbble.com" target="_blank"><i class="fa-brands fa-dribbble"></i></a></li>
</ul>
</div>
<!-- end footer column -->
</div>
</div>
</footer>
<!-- end footer -->
<!-- start scroll progress -->
<div class="scroll-progress d-none d-xxl-block">
<a href="#" class="scroll-top" aria-label="scroll">
<span class="scroll-text">Scroll</span><span class="scroll-line"><span class="scroll-point"></span></span>
</a>
</div>
<!-- end scroll progress -->
<!-- javascript libraries -->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/vendors.min.js"></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCA56KqSJ11nQUw_tXgXyNMiPmQeM7EaSA&callback=initMap"></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>