thsOne/Creative-Agency/contact-us.html

189 lines
7.9 KiB
HTML

<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Main CSS -->
<link href="assets/css/main.css" rel="stylesheet" >
<link href="assets/css/overflow.css" rel="stylesheet" >
<title>Creative Agency</title>
<!-- WebFont JS -->
<script src="assets/js/webfont/webfont.js"></script>
<script>document.documentElement.className = "js";
var supportsCssVars = function supportsCssVars() {
var e,
t = document.createElement("style");
return t.innerHTML = "root: { --tmp-var: bold; }", document.head.appendChild(t), e = !!(window.CSS && window.CSS.supports && window.CSS.supports("font-weight", "var(--tmp-var)")), t.parentNode.removeChild(t), e;
};
supportsCssVars() || alert("Please view this demo in a modern browser that supports CSS Variables.");
</script>
</head>
<body class="demo-1 loading">
<main>
<div class="frame frame--header">
<!-- NAVIGATION STARTS
========================================================================= -->
<nav id="navigation" class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container-fluid">
<a class="navbar-brand" href="index.html"><img src="assets/img/logo.png" class="img-fluid" alt=""></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="nav navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="index.html">Work</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about-us.html" >About</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="contact-us.html">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- NAVIGATION ENDS
========================================================================= -->
</div>
<!-- CONTACT INTRO STARTS
========================================================================= -->
<section class="home-intro" id="about" >
<div class="container-fluid">
<div class="row pb-4 align-items-center">
<div class="col-12 col-lg-6 ">
<div class="herotext">
<h6 class="pb-2">/Contact Us</h6>
<h2>Get In Touch</h2>
<h5 class="pt-4">We strive to create incredible experiences for people by creating new opportunities for brands, technology and culture.
<br><br>Cepteur sint occaecat cupidatat proident, taken possession of my entire soul, , like these sweet mornings of spring taken possession of my entire soul.
</h5>
</div>
</div>
<div class="col-12 col-lg-5 offset-lg-1">
<div class="picture">
<img src="assets/img/contact/pic1.jpg" class="img-fluid" style="max-width: 100%;" alt="">
<div class="about-circle">
<img src="assets/img/play-reel.svg" class="img-fluid cir" alt="">
<div class="icon"><a class="popup-vimeo" href="https://vimeo.com/45830194"><img src="assets/img/play-icon.svg" class="img-fluid" alt=""></a></div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- /. CONTACT INTRO ENDS
========================================================================= -->
<!-- CONTACT US STARTS
========================================================================= -->
<section class="contact-us" id="contact">
<div class="container-fluid">
<div class="row">
<div class="col-12 col-lg-6">
<div class="herotext pb-4">
<h6>Get In Touch</h6>
<h2>Talk or Meet with Us</h2>
</div>
<address class="clearfix d-flex align-items-center pb-2">
<div class="icon"><i class="las la-map-marker"></i></div>
<div class="detail">
<div class="heading">Get Us Here</div>
1355 Market St, Suite 900<br>
San Francisco, CA 94<br>
</div>
</address>
<address class="clearfix d-flex align-items-center pb-2">
<div class="icon"><i class="las la-phone"></i></div>
<div class="detail">
<div class="heading">Call Us</div>
+1 123 456 7890
</div>
</address>
<address class="clearfix d-flex align-items-center">
<div class="icon"><i class="las la-envelope-open"></i></div>
<div class="detail">
<div class="heading">Write Us</div>
<a href="mailto:info@thisone.com" target="_blank">info@thisone.com</a>
</div>
</address>
</div>
<div class="col-12 col-lg-6 pt-5 pt-lg-0">
<div class="herotext pb-4">
<h6>Estimate Project</h6>
<h2>Let Us Know Here</h2>
</div>
<form action='process.php' method='post' name='ContactForm' id='ContactForm'>
<div class="mb-3">
<input type="text" class="form-control" name="name" placeholder="Enter your name *" >
</div>
<div class="mb-3">
<input type="email" class="form-control" name="email" placeholder="Enter your email *" >
</div>
<div class="mb-3">
<input type="text" class="form-control" name="website" placeholder="Enter your website" >
</div>
<div class="mb-3">
<textarea class="form-control" name="comment" placeholder="Enter your message *" rows="3"></textarea>
</div>
<div id='message_post'></div>
<button type='submit' value='Submit' name='submitf' id="submitf" class="btn btn-primary mt-3">SEND MESSAGE</button>
</form>
</div>
</div>
</div>
</section>
<!-- /.. CONTACT US ENDS
========================================================================= -->
<!-- MAPS STARTS
========================================================================= -->
<section class="map pt-2">
<div class="container-fluid">
<div class="row">
<div class="col-12 p-0">
<iframe style="filter: invert(90%)" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3197.154890111155!2d174.72928551616675!3d-36.74285307495062!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6d0d3bd2cd208323%3A0x7baab82d6bfe50fe!2sTemplate+Monster!5e0!3m2!1sen!2s!4v1534419180788" height="400" allowfullscreen=""></iframe>
</div>
</div>
</div>
</section>
<!-- /.. MAPS ENDS
========================================================================= -->
<!-- FOOTER STARTS
========================================================================= -->
<footer class="container-fluid">
<div class="row">
<div class="col-6">
<ul class="socialmedia">
<li><a href="#">Facebook</a></li>
<li><a href="#">Instagram</a></li>
<li><a href="#">Twitter</a></li>
</ul>
</div>
<div class="col-6 text-end">
<p class="">ThisOne © 2021</p>
</div>
</div>
</footer>
<!-- /.. FOOTER ENDS
========================================================================= -->
</main>
<svg class="cursor" width="30" height="30" viewBox="0 0 30 30">
<circle class="cursor__inner" cx="15" cy="15" r="7.5"></circle>
</svg>
<!--JQUERY MIN JS-->
<script src="assets/lib/jquery-1.12.4/jquery.min.js"></script>
<!--BOOTSTRAP JS-->
<script src="assets/lib/bootstrap/js/bootstrap.min.js"></script>
<!-- OWL CAROUSEL -->
<script src="assets/lib/owl-carousel/owl.carousel.js"></script>
<!-- MAGNIFIC POPUP -->
<script src="assets/lib/magnific-popup/jquery.magnific-popup.js"></script>
<!-- PORTFOLIO -->
<script src="assets/js/work.js"></script>
<!-- CONTACT FORM JS -->
<script src="assets/js/contact-form/contact-form.js"></script>
<!-- CUSTOM JS -->
<script src="assets/js/script.js"></script>
</body>
</html>