Access_New/pages/demo-magazine-contact.html
2024-09-05 11:33:27 +05:45

357 lines
21 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!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 52+ ready demos.">
<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">
<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="css/vendors.min.css" />
<link rel="stylesheet" href="css/icon.min.css" />
<link rel="stylesheet" href="css/style.min.css" />
<link rel="stylesheet" href="css/responsive.min.css" />
<link rel="stylesheet" href="demos/magazine/magazine.css" />
</head>
<body data-mobile-nav-style="classic">
<div class="box-layout">
<header>
<nav class="navbar navbar-expand-lg bg-white header-light disable-fixed">
<div class="container-fluid">
<div class="col-auto col-xxl-3 col-lg-2 me-lg-0 me-auto">
<div class="header-icon">
<div class="header-push-button icon">
<div class="push-button">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
<a class="navbar-brand" href="demo-magazine.html">
<img src="images/demo-magazine-logo-black.png" data-at2x="images/demo-magazine-logo-black@2x.png" alt class="default-logo">
<img src="images/demo-magazine-logo-black.png" data-at2x="images/demo-magazine-logo-black@2x.png" alt class="alt-logo">
<img src="images/demo-magazine-logo-black.png" data-at2x="images/demo-magazine-logo-black@2x.png" alt class="mobile-logo">
</a>
</div>
<div class="col-auto menu-order position-static">
<button class="navbar-toggler float-start" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" 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">
<li class="nav-item"><a href="demo-magazine.html" class="nav-link">Home</a></li>
<li class="nav-item"><a href="demo-magazine-fashion.html" class="nav-link">Fashion</a></li>
<li class="nav-item"><a href="demo-magazine-food.html" class="nav-link">Food</a></li>
<li class="nav-item"><a href="demo-magazine-travel.html" class="nav-link">Travel</a></li>
<li class="nav-item"><a href="demo-magazine-music.html" class="nav-link">Music</a></li>
<li class="nav-item"><a href="demo-magazine-fitness.html" class="nav-link">Fitness</a></li>
<li class="nav-item"><a href="demo-magazine-contact.html" class="nav-link">Contact</a></li>
</ul>
</div>
</div>
<div class="col-auto col-xxl-3 col-xl-2 text-end md-pe-0">
<div class="header-icon">
<div class="header-search-icon icon d-none d-md-flex">
<a href="demo-magazine-contact.html#" class="search-form-icon header-search-form fw-800 text-uppercase"><i class="feather icon-feather-search text-dark-gray align-middle me-5px xl-me-0"></i><span class="fs-15 align-middle d-none d-xxl-inline-block">Search</span></a>
<div class="search-form-wrapper">
<button title="Close" type="button" class="search-close">×</button>
<form id="search-form" role="search" method="get" class="search-form text-left" action="search-result.html">
<div class="search-form-box">
<h2 class="text-dark-gray text-center mb-4 fw-700 ls-minus-2px">What are you looking for?</h2>
<input class="search-input border-color-dark-gray" id="search-form-input5e219ef164995" placeholder="Enter your keywords..." name="s" value type="text" autocomplete="off">
<button type="submit" class="search-button">
<i class="feather icon-feather-search" aria-hidden="true"></i>
</button>
</div>
</form>
</div>
</div>
<div class="header-button ms-30px xxl-ms-10px xs-ms-0 d-none d-md-block">
<a href="demo-magazine-contact.html#subscribe" class="btn btn-dark-gray section-link btn-very-small left-icon btn-round-edge btn-box-shadow fw-600">
<i class="feather icon-feather-mail align-middle"></i>Subscribe
</a>
</div>
</div>
</div>
</div>
</nav>
<div class="push-menu push-menu-style-2 ps-50px pe-50px pt-4 pb-4 bg-white">
<span class="close-menu text-dark-gray text-dark-gray-hover"><i class="fa-solid fa-xmark fs-20"></i></span>
<div class="d-flex flex-column align-items-center justify-content-center h-100">
<div class="hamburger-menu menu-list-wrapper w-90 lg-w-100 lg-no-margin" data-scroll-options="{ &quot;theme&quot;: &quot;light&quot; }">
<ul class="text-dark-gray menu-item-list alt-font fw-700 ls-minus-1px">
<li class="nav-item"><a href="demo-magazine.html" class="nav-link">Home</a></li>
<li class="nav-item"><a href="demo-magazine-fashion.html" class="nav-link">Fashion</a></li>
<li class="nav-item"><a href="demo-magazine-food.html" class="nav-link">Food</a></li>
<li class="nav-item"><a href="demo-magazine-travel.html" class="nav-link">Travel</a></li>
<li class="nav-item"><a href="demo-magazine-music.html" class="nav-link">Music</a></li>
<li class="nav-item"><a href="demo-magazine-fitness.html" class="nav-link">Fitness</a></li>
<li class="nav-item"><a href="demo-magazine-contact.html" class="nav-link">Contact</a></li>
</ul>
</div>
<div class="text-center elements-social social-icon-style-04">
<ul class="medium-icon dark">
<li class="mx-0"><a class="facebook" href="https://www.facebook.com/" target="_blank"><i class="fa-brands fa-facebook-f"></i><span></span></a></li>
<li class="mx-0"><a class="instagram" href="https://www.instagram.com" target="_blank"><i class="fa-brands fa-instagram"></i><span></span></a></li>
<li class="mx-0"><a class="twitter" href="https://www.twitter.com" target="_blank"><i class="fa-brands fa-twitter"></i><span></span></a></li>
<li class="mx-0"><a class="dribbble" href="http://www.dribbble.com" target="_blank"><i class="fa-brands fa-dribbble"></i><span></span></a></li>
</ul>
</div>
</div>
</div>
</header>
<section class="top-space-margin page-title-center-alignment pt-55px overlap-height">
<div class="container overlap-gap-section">
<div class="row align-items-center justify-content-center" data-anime="{ &quot;translateY&quot;: [0, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 800, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<div class="col-12 col-lg-6 col-md-8 position-relative text-center page-title-extra-large">
<h1 class="alt-font text-dark-gray fw-800 mb-0 ps-70px pe-70px lg-ps-50px lg-pe-50px xs-ps-0 xs-pe-0 d-inline-block position-relative text-highlight shadow-none" data-shadow-animation="true" data-animation-delay="700"><span class="w-100 h-2px position-absolute left-0px top-55 bg-base-color separator-animation d-sm-block d-none"></span>Contact</h1>
</div>
</div>
</div>
</section>
<section class="position-relative pt-0">
<div class="container">
<div class="row align-items-center mb-11 lg-mb-15 justify-content-xl-start justify-content-center">
<div class="col-xxl-4 col-lg-5 col-md-12 order-lg-1 order-2" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateY&quot;: [30, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 300, &quot;delay&quot;: 300, &quot;staggervalue&quot;: 200, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<div class="mb-30px">
<h3 class="alt-font fw-700 text-dark-gray mb-50px ls-minus-1px">let's talk about something more interesting!</h3>
</div>
<div class="icon-with-text-style-01 mb-25px pb-25px border-bottom border-color-extra-medium-gray">
<div class="feature-box feature-box-left-icon-middle last-paragraph-no-margin">
<div class="feature-box-icon me-20px xs-me-10px">
<img src="images/demo-magazine-contact-icon-01.png" class="h-55px" alt>
</div>
<div class="feature-box-content last-paragraph-no-margin">
<p class="fs-18">Interested in joining the team?</p>
<span class="d-block ls-minus-05px"><a href="cdn-cgi/l/email-protection.html#8ae2e3f8efcaf3e5fff8eee5e7ebe3e4a4e9e5e7" class="text-dark-gray fw-700 fs-20 xs-fs-18 alt-font"><span class="__cf_email__" data-cfemail="1b7372697e5b62746e697f74767a727535787476">[email&#160;protected]</span></a></span>
</div>
</div>
</div>
<div class="icon-with-text-style-01">
<div class="feature-box feature-box-left-icon-middle last-paragraph-no-margin">
<div class="feature-box-icon me-20px">
<img src="images/demo-magazine-contact-icon-02.png" class="h-55px" alt>
</div>
<div class="feature-box-content last-paragraph-no-margin">
<p class="fs-18">Press related enquiries?</p>
<span class="d-block ls-minus-05px"><a href="cdn-cgi/l/email-protection.html#e78e898188a783888a868e89c984888a" class="text-dark-gray fw-700 fs-20 xs-fs-18 alt-font"><span class="__cf_email__" data-cfemail="ed84838b82ad8982808c8483c38e8280">[email&#160;protected]</span></a></span>
</div>
</div>
</div>
</div>
<div class="col-xxl-7 col-xl-6 offset-xl-1 col-lg-7 col-md-12 position-relative order-lg-2 order-1 md-mb-15">
<div class="w-70 lg-w-90 sm-w-100 sm-mb-30px" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateX&quot;: [30, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 300, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 100, &quot;easing&quot;: &quot;easeOutQuad&quot; }"><img src="images/demo-magazine-contact-01.jpg" class="w-100" alt></div>
<div class="contact-form-style-03 position-absolute sm-position-relative right-15px sm-right-0px bottom-minus-60px sm-bottom-0px bg-base-color box-shadow-double-large w-350px sm-w-100" data-anime="{ &quot;translateX&quot;: [-30, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 300, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 100, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<div class="ps-60px pe-60px pt-45px pb-45px sm-p-35px last-paragraph-no-margin">
<h5 class="fw-700 alt-font text-white mb-20px">Get in touch</h5>
<p class="text-white mb-10px">401 Broadway, 24th Floor, Orchard view, London</p>
<div class="w-100">
<span class="text-white fw-600 d-inline-block">Email:</span>
<a href="cdn-cgi/l/email-protection.html#422b2c242d02262d2f232b2c6c212d2f" class="text-white text-decoration-line-bottom"><span class="__cf_email__" data-cfemail="7e171018113e1a11131f1710501d1113">[email&#160;protected]</span></a>
</div>
<div class="w-100 last-paragraph-no-margin">
<span class="text-white fw-600">Phone:</span>
<span class="d-inline-block text-white">1-800-222-000</span>
</div>
</div>
<div class="text-center pt-15px pb-15px border-top border-color-transparent-white">
<div class="icon-with-text-style-01 d-inline-block">
<div class="feature-box feature-box-left-icon-middle">
<div class="feature-box-icon me-5px">
<i class="feather icon-feather-map-pin icon-small text-white"></i>
</div>
<div class="feature-box-content">
<a href="https://maps.google.com/maps?ll=-37.805688,144.962312&z=17&t=m&hl=en-US&gl=IN&mapclient=embed&cid=13153204942596594449" target="_blank" class="fs-14 fw-600 inner-link text-uppercase text-white ls-1px">Show on google map</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="position-absolute bottom-minus-60px lg-bottom-minus-40px xs-bottom-minus-20px left-0px right-0px text-center w-100 fs-200 lg-fs-150 xs-fs-90 fw-700 alt-font ls-minus-4px xs-ls-minus-2px text-dark-gray opacity-1">locations</div>
</div>
</section>
<section class="p-0">
<div class="container-fluid p-0">
<div class="row g-0 justify-content-center">
<div class="col-12">
<div id="map" class="map h-700px lg-h-600px sm-h-450px" data-map-options="{ &quot;lat&quot;: -37.817240, &quot;lng&quot;: 144.955820, &quot;style&quot;: &quot;Silver&quot;, &quot;marker&quot;: { &quot;type&quot;: &quot;image&quot;, &quot;class&quot;: &quot;marker01&quot;, &quot;src&quot;: &quot;images/demo-magazine-contact-02.png&quot; }, &quot;popup&quot;: { &quot;defaultOpen&quot;: true, &quot;html&quot;: &quot;<div class=infowindow><strong class=\&quot;mb-3 d-inline-block\&quot;>Crafto Magazine</strong><p>16122 Collins street, Melbourne, Australia</p></div><div class=\&quot;google-maps-link\&quot;> <a aria-label=\&quot;View larger map\&quot; target=\&quot;_blank\&quot; jstcache=\&quot;31\&quot; href=\&quot;https://maps.google.com/maps?ll=-37.805688,144.962312&amp;z=17&amp;t=m&amp;hl=en-US&amp;gl=IN&amp;mapclient=embed&amp;cid=13153204942596594449\&quot; jsaction=\&quot;mouseup:placeCard.largerMap\&quot;>VIEW LARGER MAP</a></div>&quot; } }"></div>
</div>
</div>
</div>
</section>
<section class="position-relative">
<div class="container">
<div class="row row-cols-md-1 justify-content-center" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateX&quot;: [30, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 300, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 100, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<div class="col-xxl-4 col-xl-5 col-lg-5 md-mb-30px d-flex flex-column">
<h3 class="alt-font fw-700 text-dark-gray w-85 xl-w-90 md-w-100">We'd love to hear from you.</h3>
<p class="w-85 xl-w-90 xs-w-100">Lorem ipsum dolor sit amet, consectetur adipiscing finibus a purus at fermentum. Praesent vitae quam sed dui.</p>
<div class="icon-with-text-style-01 feature-box feature-box-left-icon-middle last-paragraph-no-margin mt-auto">
<div class="feature-box-icon me-15px">
<img src="images/demo-magazine-contact-03.jpg" alt>
</div>
<div class="feature-box-content">
<span class="text-dark-gray fs-19 fw-700 alt-font d-block">Call us directly</span>
<span>+1 234 567 8910</span>
</div>
</div>
</div>
<div class="col-lg-7 offset-xxl-1">
<form action="email-templates/contact-form.php" method="post" class="contact-form-style-03">
<div class="row justify-content-center">
<div class="col-md-6 xs-mb-30px">
<label for="exampleInputEmail1" class="form-label fw-700 text-dark-gray text-uppercase fs-13 ls-05px mb-0">Enter your name*</label>
<div class="position-relative form-group mb-25px xs-mb-0">
<span class="form-icon"><i class="bi bi-emoji-smile text-dark-gray"></i></span>
<input class="ps-0 border-radius-0px border-color-dark-gray bg-transparent form-control required" id="exampleInputEmail1" type="text" name="name" placeholder="What's your good name?" />
</div>
</div>
<div class="col-md-6 xs-mb-30px">
<label for="exampleInputEmail1" class="form-label fw-700 text-dark-gray text-uppercase fs-13 ls-05px mb-0">Phone number</label>
<div class="position-relative form-group mb-25px xs-mb-0">
<span class="form-icon"><i class="bi bi-telephone text-dark-gray"></i></span>
<input class="ps-0 border-radius-0px border-color-dark-gray bg-transparent form-control" id="exampleInputEmail2" type="tel" name="phone" placeholder="Enter your phone number" />
</div>
</div>
<div class="col-md-6 xs-mb-30px">
<label for="exampleInputEmail1" class="form-label fw-700 text-dark-gray text-uppercase fs-13 ls-05px mb-0">Email address*</label>
<div class="position-relative form-group mb-25px xs-mb-0">
<span class="form-icon"><i class="bi bi-envelope text-dark-gray"></i></span>
<input class="ps-0 border-radius-0px border-color-dark-gray bg-transparent form-control required" id="exampleInputEmail3" type="email" name="email" placeholder="Enter your email address" />
</div>
</div>
<div class="col-md-6 xs-mb-30px">
<label for="exampleInputEmail1" class="form-label fw-700 text-dark-gray text-uppercase fs-13 ls-05px mb-0">Subject</label>
<div class="position-relative form-group mb-25px xs-mb-0">
<span class="form-icon"><i class="bi bi-journals text-dark-gray"></i></span>
<input class="ps-0 border-radius-0px border-color-dark-gray bg-transparent form-control" id="exampleInputEmail4" type="text" name="subject" placeholder="How can we help you?" />
</div>
</div>
<div class="col-12 mb-4 xs-mb-30px">
<label for="exampleInputEmail1" class="form-label fw-700 text-dark-gray text-uppercase fs-13 ls-05px mb-0">Your message</label>
<div class="position-relative form-group form-textarea mb-0">
<textarea class="ps-0 border-radius-0px border-color-dark-gray bg-transparent form-control" name="comment" placeholder="Describe about your project" rows="4"></textarea>
<span class="form-icon"><i class="bi bi-chat-square-dots text-dark-gray"></i></span>
</div>
</div>
<div class="col-xl-6 col-md-7 col-sm-10">
<p class="mb-0 fs-14 lh-24 text-center text-md-start">We will never collect information about you without your explicit consent.</p>
</div>
<div class="col-xl-6 col-md-5 text-center text-md-end sm-mt-25px">
<input id="exampleInputEmail5" type="hidden" name="redirect" value>
<button class="btn btn-small btn-dark-gray btn-box-shadow btn-round-edge text-transform-none primary-font submit" type="submit">Send message</button>
</div>
<div class="col-12">
<div class="form-results mt-20px d-none"></div>
</div>
</div>
</form>
</div>
</div>
</div>
</section>
<footer id="subscribe" class="bg-very-light-gray">
<div class="container position-relative">
<div class="position-absolute left-0px top-minus-150px md-top-minus-110px background-no-repeat h-300px w-100 d-none d-xl-inline-block" style="background-image: url('images/demo-magazine-footer-icon.png')" data-bottom-top="transform: translateY(-50px)" data-top-bottom="transform: translateY(50px)"></div>
<div class="row justify-content-center">
<div class="col-12 col-xxl-6 col-xl-7 col-lg-8 text-center mb-50px sm-mb-30px">
<h2 class="alt-font fw-800 ls-minus-1px text-dark-gray">Stay tuned with weekly newsletters.</h2>
<div class="d-inline-block w-100 newsletter-style-04 position-relative">
<form action="email-templates/subscribe-newsletter.php" method="post" class="position-relative w-100">
<input class="bg-transparent w-100 border-0 border-bottom border-1 border-color-dark-gray form-control required" type="email" name="email" placeholder="Enter your email address" />
<input type="hidden" name="redirect" value>
<button type="submit" class="btn text-dark-gray fw-600 submit text-transform-none" aria-label="subscribe">Subscribe</button>
<div class="form-results border-radius-0px p-15px fs-16 lh-24 w-100 text-center position-absolute d-none"></div>
</form>
</div>
</div>
</div>
<div class="footer-bottom">
<div class="row justify-content-center">
<div class="col-12 last-paragraph-no-margin text-center mb-50px sm-mb-30px">
<p class="fs-15 text-dark-gray">&copy; 2024 Crafto is Proudly Powered by <a href="https://www.themezaa.com/" target="_blank" class="text-dark-gray">ThemeZaa.</a></p>
<a href="cdn-cgi/l/email-protection.html#1e777078715e7a71737f7770307d7173" class="fs-18 text-dark-gray text-dark-gray-hover fw-600 text-decoration-line-bottom"><span class="__cf_email__" data-cfemail="2841464e47684c4745494146064b4745">[email&#160;protected]</span></a>
</div>
<div class="col-12 text-center">
<div class="elements-social social-icon-style-02">
<ul class="large-icon dark">
<li><a class="facebook" href="https://www.facebook.com/" target="_blank"><i class="fa-brands fa-facebook-f"></i></a></li>
<li><a class="dribbble" href="http://www.dribbble.com" target="_blank"><i class="fa-brands fa-dribbble"></i></a></li>
<li><a class="twitter" href="https://www.twitter.com" target="_blank"><i class="fa-brands fa-twitter"></i></a></li>
<li><a class="instagram" href="https://www.instagram.com" target="_blank"><i class="fa-brands fa-instagram"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</footer>
</div>
<div id="cookies-model" class="cookie-message bg-dark-gray border-radius-8px">
<div class="cookie-description fs-14 text-white mb-20px lh-22">We use cookies to enhance your browsing experience, serve personalized ads or content, and analyze our traffic. By clicking "Allow cookies" you consent to our use of cookies. </div>
<div class="cookie-btn">
<a href="demo-magazine-contact.html#" class="btn btn-transparent-white border-1 border-color-transparent-white-light btn-very-small btn-switch-text btn-rounded w-100 mb-15px" aria-label="btn">
<span>
<span class="btn-double-text" data-text="Cookie policy">Cookie policy</span>
</span>
</a>
<a href="demo-magazine-contact.html#" class="btn btn-white btn-very-small btn-switch-text btn-box-shadow accept_cookies_btn btn-rounded w-100" data-accept-btn aria-label="text">
<span>
<span class="btn-double-text" data-text="Allow cookies">Allow cookies</span>
</span>
</a>
</div>
</div>
<div class="scroll-progress d-none d-xxl-block">
<a href="demo-magazine-contact.html#" class="scroll-top" aria-label="scroll">
<span class="scroll-text">Scroll</span><span class="scroll-line"><span class="scroll-point"></span></span>
</a>
</div>
<script data-cfasync="false" src="cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><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>