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

383 lines
20 KiB
HTML
Raw Permalink 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/blogger/blogger.css" />
</head>
<body data-mobile-nav-style="classic">
<div class="box-layout">
<header class="header-with-topbar">
<div class="header-top-bar top-bar-dark bg-dark-gray disable-fixed">
<div class="container">
<div class="row g-0 h-50px align-items-center m-0">
<div class="col-md-7 text-center text-md-start">
<span class="widget fs-14 me-5px text-white d-none d-md-inline-block fw-500"><i class="fa-sharp fa-solid fa-heart text-base-color"></i>Trending:</span>
<a href="demo-blogger-contact.html#" class="fs-14 text-medium-gray-hover">Top 10 night creams will help your skin to relax.</a>
</div>
<div class="col-5 text-end header-icon">
<div class="header-social-icon icon">
<a href="https://www.facebook.com" target="_blank"><i class="fa-brands fa-facebook-f"></i>26k</a>
<a href="https://www.twitter.com" target="_blank"><i class="fa-brands fa-twitter"></i>18k</a>
<a href="http://www.dribbble.com" target="_blank"><i class="fa-brands fa-dribbble"></i>06k</a>
</div>
</div>
</div>
</div>
</div>
<nav class="navbar navbar-expand-lg header-light bg-white disable-fixed" data-header-hover="dark">
<div class="container">
<div class="col-auto p-0">
<a class="navbar-brand" href="demo-blogger.html">
<img src="images/demo-blogger-logo-black.png" data-at2x="images/demo-blogger-logo-black@2x.png" alt class="default-logo">
<img src="images/demo-blogger-logo-black.png" data-at2x="images/demo-blogger-logo-black@2x.png" alt class="alt-logo">
<img src="images/demo-blogger-logo-black.png" data-at2x="images/demo-blogger-logo-black@2x.png" alt class="mobile-logo">
</a>
</div>
<div class="col-auto menu-order left-nav ps-40px md-ps-15px">
<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-blogger.html" class="nav-link">Home</a></li>
<li class="nav-item"><a href="demo-blogger-fashion.html" class="nav-link">Fashion</a></li>
<li class="nav-item"><a href="demo-blogger-lifestyle.html" class="nav-link">Lifestyle</a></li>
<li class="nav-item"><a href="demo-blogger-style.html" class="nav-link">Style</a></li>
<li class="nav-item"><a href="demo-blogger-about.html" class="nav-link">About</a></li>
<li class="nav-item"><a href="demo-blogger-contact.html" class="nav-link">Contact</a></li>
</ul>
</div>
</div>
<div class="col-auto ms-auto pe-0">
<div class="header-icon">
<div class="header-search-icon icon d-none d-md-flex">
<a href="demo-blogger-contact.html#" class="search-form-icon header-search-form fw-600"><i class="feather icon-feather-search text-base-color align-middle me-5px xl-me-0"></i><span class="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="alt-font text-dark-gray text-center mb-4 fw-600 ls-minus-1px">What are you looking for?</h2>
<input class="search-input" 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-20px xxl-ms-10px xs-ms-0 d-none d-md-block">
<a href="demo-blogger-contact.html#footer" class="btn btn-small btn-base-color btn-slide-right btn-rounded left-icon section-link"><i class="feather icon-feather-mail"></i>Subscribe<span class="bg-white"></span></a>
</div>
</div>
</div>
</div>
</nav>
</header>
<section class="half-section page-title-center-alignment top-space-margin">
<div class="container">
<div class="row pt-20px pb-20px md-pt-0 md-pb-0">
<div class="col-12 text-center position-relative page-title-large" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateY&quot;: [0, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 300, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 200, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<h1 class="alt-font d-block fw-700 text-dark-gray mb-0 ls-minus-1px">Contact</h1>
<h2 class="d-inline-block fw-500 ls-3px text-uppercase mb-0">Love to hear from you</h2>
</div>
</div>
</div>
</section>
<section class="pt-30px sm-pt-0">
<div class="container">
<div class="row align-items-center">
<div class="col-12 col-xl-4 col-lg-5 col-md-6 sm-mb-30px" 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;: 200, &quot;staggervalue&quot;: 100, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<span class="ls-2px text-uppercase text-dark-gray fw-500 lh-22 mb-20px d-block">Get in <span class="d-inline-block border-2 border-bottom border-color-transparent-base-color fw-800">touch</span> with us</span>
<h3 class="fw-600 text-dark-gray alt-font mb-35px">Let's talk about the things that matter.</h3>
<div class="icon-with-text-style-01 mb-7 md-mb-30px">
<div class="feature-box feature-box-left-icon last-paragraph-no-margin">
<div class="feature-box-icon me-25px">
<img src="images/demo-lawyer-contact-icon-01.jpg" class="h-80px" alt>
</div>
<div class="feature-box-content last-paragraph-no-margin">
<span class="fs-18 d-block text-dark-gray fw-600 mb-5px">Keep in touch?</span>
<p class="w-90">401 Broadway, 24th Floor, Orchard View, London</p>
</div>
</div>
</div>
<div class="icon-with-text-style-01 mb-7 md-mb-30px">
<div class="feature-box feature-box-left-icon last-paragraph-no-margin">
<div class="feature-box-icon me-25px">
<img src="images/demo-lawyer-contact-icon-02.jpg" class="h-80px" alt>
</div>
<div class="feature-box-content">
<span class="fs-18 d-block text-dark-gray fw-600 mb-5px">Call anytime</span>
<div class="w-100 d-block">
<span class="d-block">Phone: 1-800-222-000 </span>
<span class="d-block">Fax: 1-800-222-002</span>
</div>
</div>
</div>
</div>
<div class="icon-with-text-style-01">
<div class="feature-box feature-box-left-icon last-paragraph-no-margin">
<div class="feature-box-icon me-25px">
<img src="images/demo-lawyer-contact-icon-03.jpg" class="h-80px" alt>
</div>
<div class="feature-box-content">
<span class="fs-18 d-block text-dark-gray fw-600 mb-5px">Email address</span>
<div class="w-100 d-block">
<a href="cdn-cgi/l/email-protection.html#452c2b232a053c2a3037212a28242c2b6b262a28"><span class="__cf_email__" data-cfemail="89e0e7efe6c9f0e6fcfbede6e4e8e0e7a7eae6e4">[email&#160;protected]</span></a><br/><a href="cdn-cgi/l/email-protection.html#b5ddd0d9c5f5ccdac0c7d1dad8d4dcdb9bd6dad8"><span class="__cf_email__" data-cfemail="d4bcb1b8a494adbba1a6b0bbb9b5bdbafab7bbb9">[email&#160;protected]</span></a>
</div>
</div>
</div>
</div>
</div>
<div class="col-12 col-lg-7 col-md-6 offset-xl-1" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateX&quot;: [15, 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-blogger-contact-04.jpg" class="w-100" alt />
</div>
</div>
</div>
</section>
<section class="p-7 bg-very-light-gray border-radius-6px position-relative overflow-hidden sm-px-0" data-anime="{ &quot;translateY&quot;: [50, 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-blogger-home-leaf-01.png" class="position-absolute top-minus-10px left-15px w-160px" alt />
<img src="images/demo-blogger-home-leaf-02.png" class="position-absolute top-minus-30px right-minus-50px" alt />
<img src="images/demo-blogger-home-leaf-03.png" class="position-absolute bottom-minus-30px left-150px" alt />
<div class="container">
<div class="row row-cols-md-1 justify-content-center">
<div class="col">
<div class="row mb-3">
<div class="col-9">
<h2 class="alt-font text-dark-gray ls-minus-2px">How we can help you?</h2>
</div>
<div class="col-3 text-end">
<i class="bi bi-envelope-open icon-extra-large text-dark-gray"></i>
</div>
</div>
<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">
<label for="exampleInputEmail1" class="form-label fw-600 text-dark-gray mb-0">Enter your name*</label>
<div class="position-relative form-group mb-25px">
<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" type="text" name="name" placeholder="What's your good name?" />
</div>
</div>
<div class="col-md-6">
<label for="exampleInputEmail1" class="form-label fw-600 text-dark-gray mb-0">Email address*</label>
<div class="position-relative form-group mb-25px">
<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" type="email" name="email" placeholder="Enter your email address" />
</div>
</div>
<div class="col-md-6">
<label for="exampleInputEmail1" class="form-label fw-600 text-dark-gray mb-0">Phone number</label>
<div class="position-relative form-group mb-25px">
<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" type="tel" name="phone" placeholder="Enter your phone number" />
</div>
</div>
<div class="col-md-6">
<label for="exampleInputEmail1" class="form-label fw-600 text-dark-gray mb-0">Subject</label>
<div class="position-relative form-group mb-25px">
<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" type="text" name="subject" placeholder="How can we help you?" />
</div>
</div>
<div class="col-12 mb-4 sm-mb-30px">
<label for="exampleInputEmail1" class="form-label fw-600 text-dark-gray 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-md-7">
<p class="mb-0 fs-14 lh-24 text-center text-md-start">We are committed to protecting your privacy. We will never collect information about you without your explicit consent.</p>
</div>
<div class="col-md-5 text-center text-md-end sm-mt-25px">
<input 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>
<section class="half-section">
<div class="container">
<div class="row row-cols-1 row-cols-md-3 row-cols-sm-2 text-center justify-content-center" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateY&quot;: [15, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 300, &quot;delay&quot;: 100, &quot;staggervalue&quot;: 100, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<div class="col border-end xs-border-end-0 xs-border-bottom border-color-transparent-dark-gray sm-mb-25px xs-mb-20px xs-pb-20px">
<span class="text-uppercase fw-500 d-block">Have questions?</span>
<a href="cdn-cgi/l/email-protection.html#9df5f8f1eddde4f2e8eff9f2f0fcf4f3b3fef2f0" class="btn p-0 fs-19 text-dark-gray btn-hover-animation text-transform-none text-base-color-hover">
<span>
<span class="btn-text ls-0px"><span class="__cf_email__" data-cfemail="c4aca1a8b484bdabb1b6a0aba9a5adaaeaa7aba9">[email&#160;protected]</span></span>
<span class="btn-icon"><i class="fa-sharp fa-solid fa-arrow-right align-middle icon-very-small"></i></span>
</span>
</a>
</div>
<div class="col border-end xs-border-end-0 xs-border-bottom border-color-transparent-dark-gray sm-mb-25px xs-mb-20px xs-pb-20px">
<span class="text-uppercase fw-500 d-block">Join our team?</span>
<a href="cdn-cgi/l/email-protection.html#7c1f1d0e19190e0f3c1e10131b1b190e521f1311" class="btn p-0 fs-19 text-dark-gray btn-hover-animation text-transform-none text-base-color-hover">
<span>
<span class="btn-text ls-0px"><span class="__cf_email__" data-cfemail="34575546515146477456585b535351461a575b59">[email&#160;protected]</span></span>
<span class="btn-icon"><i class="fa-sharp fa-solid fa-arrow-right align-middle icon-very-small"></i></span>
</span>
</a>
</div>
<div class="col">
<span class="text-uppercase fw-500 d-block">Business inquiries?</span>
<a href="cdn-cgi/l/email-protection.html#4e272028210e37213b3c2a21232f2720602d2123" class="btn p-0 fs-19 text-dark-gray btn-hover-animation text-transform-none text-base-color-hover">
<span>
<span class="btn-text ls-0px"><span class="__cf_email__" data-cfemail="543d3a323b142d3b2126303b39353d3a7a373b39">[email&#160;protected]</span></span>
<span class="btn-icon"><i class="fa-sharp fa-solid fa-arrow-right align-middle icon-very-small"></i></span>
</span>
</a>
</div>
</div>
</div>
</section>
<footer class="p-0 position-relative" id="footer">
<div class="bg-very-light-gray border-radius-6px pt-5 pb-5 md-pt-30px md-pb-30px md-ps-15px md-pe-15px sm-pt-50px sm-pb-50px">
<div class="container">
<div class="row">
<div class="col-md-6 col-lg-3 last-paragraph-no-margin order-md-1 md-mb-30px">
<a href="demo-blogger.html" class="footer-logo d-inline-block mb-10px"><img src="images/demo-blogger-footer-logo-black.png" data-at2x="images/demo-blogger-footer-logo-black@2x.png" alt></a>
<p class="lh-28 d-block w-80 mb-15px">401 Broadway, 24th Floor, Orchard View, London</p>
<div class="text-dark-gray fw-600"><i class="feather icon-feather-phone-call me-10px"></i>+1 234 567 8910</div>
<div class="text-dark-gray fw-600"><i class="feather icon-feather-mail me-10px"></i><a href="cdn-cgi/l/email-protection.html#deb7b0b8b19ebab1b3bfb7b0f0bdb1b3" class="text-dark-gray text-decoration-line-bottom"><span class="__cf_email__" data-cfemail="2d44434b426d4942404c4443034e4240">[email&#160;protected]</span></a></div>
</div>
<div class="col-md-4 col-lg-2 order-md-3 order-lg-2 sm-mb-30px">
<span class="fw-700 text-dark-gray d-block mb-5px fs-17">Category</span>
<ul>
<li><a href="demo-blogger-fashion.html">Fashion</a></li>
<li><a href="demo-blogger-lifestyle.html">Lifestyle</a></li>
<li><a href="demo-blogger-style.html">Style</a></li>
<li><a href="demo-blogger-contact.html#">Lookbook</a></li>
<li><a href="demo-blogger-contact.html#">Beauty</a></li>
</ul>
</div>
<div class="col-md-4 col-lg-2 order-md-4 order-lg-3 sm-mb-30px">
<span class="fw-700 text-dark-gray d-block mb-5px fs-17">Information</span>
<ul>
<li><a href="demo-blogger-about.html">About us</a></li>
<li><a href="demo-blogger-contact.html#">Readers guide</a></li>
<li><a href="demo-blogger-contact.html">Contact us</a></li>
<li><a href="demo-blogger-contact.html#">Terms of use</a></li>
<li><a href="demo-blogger-contact.html#">Privacy policy</a></li>
</ul>
</div>
<div class="col-md-4 col-lg-2 order-md-5 order-lg-4 sm-mb-30px">
<span class="fw-700 text-dark-gray d-block mb-5px fs-17">Follow us</span>
<ul>
<li><a href="https://www.facebook.com/" target="_blank">Facebook</a></li>
<li><a href="https://www.instagram.com/" target="_blank">Instagram</a></li>
<li><a href="https://twitter.com/" target="_blank">Twitter</a></li>
<li><a href="https://pinterest.com/" target="_blank">Pinterest</a></li>
<li><a href="https://www.behance.net/" target="_blank">Behance</a></li>
</ul>
</div>
<div class="col-md-6 col-lg-3 order-md-2 order-lg-5 md-mb-30px sm-mb-0">
<h5 class="alt-font fw-600 mb-20px text-dark-gray">Subscribe our newsletter.</h5>
<div class="d-inline-block w-100 newsletter-style-02 position-relative mb-10px">
<form action="email-templates/subscribe-newsletter.php" method="post" class="position-relative w-100">
<input class="input-medium bg-transparent border-color-transparent-base-color w-100 form-control pe-50px ps-20px lg-ps-15px required" type="email" name="email" placeholder="Enter email address" />
<input type="hidden" name="redirect" value>
<button class="btn pe-20px submit" aria-label="submit"><i class="icon feather icon-feather-mail icon-small text-base-color"></i></button>
<div class="form-results border-radius-6px pt-5px pb-5px ps-15px pe-15px fs-14 w-100 text-center position-absolute d-none"></div>
</form>
</div>
<div class="d-flex align-items-center fs-14">
<div class="d-inline-block"><i class="line-icon-Handshake me-10px align-middle icon-very-medium"></i>Protecting your privacy</div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row align-items-center pt-25px pb-25px">
<div class="col-xl-8 col-lg-7 last-paragraph-no-margin md-mb-10px lg-mb-0 fs-14 text-center text-lg-start">
<p class="lg-w-70 md-w-100">This site is protected by reCAPTCHA and the Google <a href="demo-blogger-contact.html#" class="text-decoration-line-bottom">privacy policy</a> and <a href="demo-blogger-contact.html#" class="text-decoration-line-bottom">terms of service</a> apply.</p>
</div>
<div class="col-xl-4 col-lg-5 last-paragraph-no-margin fs-14 text-center text-lg-end">
<p>&copy; 2024 Crafto is Proudly Powered by <a href="http://www.themezaa.com/" target="_blank" class="text-decoration-line-bottom text-dark-gray fw-600">ThemeZaa</a></p>
</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-blogger-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-blogger-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-blogger-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 type="text/javascript" src="js/main.js"></script>
</body>
</html>