浅念
238 lines
14 KiB
HTML
238 lines
14 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>HESU — Contact Us</title>
|
|
<meta name="description" content="Contact HESU — send us your inquiry about building materials export, auto export, after-sales & modification or global logistics. Our global team is ready to help." />
|
|
<meta property="og:type" content="website" />
|
|
<meta property="og:title" content="HESU — Contact Us" />
|
|
<meta property="og:description" content="Contact HESU — send us your inquiry about building materials export, auto export, after-sales & modification or global logistics. Our global team is ready to help." />
|
|
<meta property="og:image" content="image/logo.png" />
|
|
|
|
|
|
<link rel="icon" type="image/png" href="favicon.png" />
|
|
|
|
<link rel="preload" href="font/texgyreheros-regular.otf" as="font" type="font/otf" crossorigin />
|
|
<link rel="preload" href="font/texgyreheros-bold.otf" as="font" type="font/otf" crossorigin />
|
|
<link rel="stylesheet" href="css/fonts.css?v=20260903a" />
|
|
<link rel="stylesheet" href="css/style.css?v=20260903a" />
|
|
<link rel="stylesheet" href="css/contact.css?v=20260823b" />
|
|
<link rel="stylesheet" href="css/mobile.css?v=20260823b" />
|
|
</head>
|
|
<body class="is-contact">
|
|
|
|
<!-- ============ HEADER (shared) ============ -->
|
|
<header id="siteHeader" class="site-header">
|
|
<div class="container header-inner">
|
|
<a class="logo" href="index.html" aria-label="HESU home">
|
|
<img width="85" height="25" class="logo-img" src="image/logo.png" alt="HESU" />
|
|
</a>
|
|
<nav class="main-nav" id="mainNav" aria-label="Primary">
|
|
<a class="drawer-logo" href="index.html" aria-label="HESU home">
|
|
<img width="85" height="25" class="logo-img" src="image/logo.png" alt="HESU" />
|
|
</a>
|
|
<ul class="nav-list">
|
|
<li class="nav-item has-mega">
|
|
<a href="#">Business <span class="caret" aria-hidden="true"></span></a>
|
|
<div class="mega" role="dialog" aria-label="Business">
|
|
<div class="mega-inner">
|
|
<div class="mega-left">
|
|
|
|
<h3 class="mega-title">Four Core Businesses</h3>
|
|
|
|
|
|
</div>
|
|
<div class="mega-right">
|
|
<a class="mega-card" href="auto-export.html">
|
|
<div class="mega-card-img ph-select1"></div>
|
|
<div class="mega-card-text"><h4>Auto Export</h4></div>
|
|
</a>
|
|
<a class="mega-card" href="building-materials.html">
|
|
<div class="mega-card-img ph-select2"></div>
|
|
<div class="mega-card-text"><h4>HESU PIPE</h4></div>
|
|
</a>
|
|
<a class="mega-card" href="global-logistics.html">
|
|
<div class="mega-card-img ph-select3"></div>
|
|
<div class="mega-card-text"><h4>Global Logistics</h4></div>
|
|
</a>
|
|
<a class="mega-card" href="after-sales.html">
|
|
<div class="mega-card-img ph-select4"></div>
|
|
<div class="mega-card-text"><h4>After-sales</h4></div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li class="nav-item"><a href="global-presence.html">Global Presence</a></li>
|
|
<li class="nav-item has-mega">
|
|
<a href="#">About Us <span class="caret" aria-hidden="true"></span></a>
|
|
<div class="mega" role="dialog" aria-label="About HESU">
|
|
<div class="mega-inner">
|
|
<div class="mega-left">
|
|
</div>
|
|
<div class="mega-right">
|
|
<a class="mega-card" href="about-us.html"><div class="mega-card-img ph-easterneurope"></div><div class="mega-card-text"><h4>Company Overview</h4></div></a>
|
|
<a class="mega-card" href="development-history.html"><div class="mega-card-img ph-middleeast"></div><div class="mega-card-text"><h4>Company History</h4></div></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li class="nav-item"><a href="news.html">News</a></li>
|
|
<li class="nav-item nav-contact"><a href="contact.html">Contact Us</a></li>
|
|
</ul>
|
|
</nav>
|
|
<div class="header-right">
|
|
<a href="contact.html" class="btn btn-contact">Contact Us</a>
|
|
<button class="menu-toggle" id="menuToggle" aria-label="Open menu" aria-expanded="false"><span></span><span></span><span></span></button>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="ct">
|
|
|
|
<!-- ============================================================
|
|
1. HERO BANNER — office photo + left-aligned "CONTACT US"
|
|
============================================================ -->
|
|
<section class="ct-hero" aria-label="Contact Us">
|
|
<div class="ct-hero__scene" aria-hidden="true">
|
|
<img width="1440" height="550" class="ct-hero__bg" src="image/contact-us-bnner.jpg" alt="" />
|
|
</div>
|
|
<div class="ct-hero__veil" aria-hidden="true"></div>
|
|
|
|
<div class="ct-hero__copy container">
|
|
<h1 class="ct-hero__title" data-reveal>CONTACT US</h1>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ============================================================
|
|
2. INQUIRY FORM — 2-col fields + full-width message
|
|
============================================================ -->
|
|
<section class="ct-form-section" id="inquiry">
|
|
<div class="container">
|
|
<form class="ct-form" id="ctForm" novalidate>
|
|
<div class="ct-form__grid">
|
|
<div class="ct-field">
|
|
<label class="ct-label" for="ct-type">Business Type</label>
|
|
<div class="ct-selectwrap">
|
|
<select id="ct-type" name="business_type" required>
|
|
<option value="" disabled selected>Select business type</option>
|
|
<option value="Building Materials Export">Building Materials Export</option>
|
|
<option value="Auto Export">Auto Export</option>
|
|
<option value="After-sales & Modification">After-sales & Modification</option>
|
|
<option value="Global Logistics">Global Logistics</option>
|
|
<option value="Other">Other</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ct-field">
|
|
<label class="ct-label" for="ct-email">Email</label>
|
|
<input class="ct-input" type="email" id="ct-email" name="email" placeholder="Enter your email" required />
|
|
</div>
|
|
|
|
<div class="ct-field">
|
|
<label class="ct-label" for="ct-last">Last Name</label>
|
|
<input class="ct-input" type="text" id="ct-last" name="last_name" placeholder="Your last name" required />
|
|
</div>
|
|
|
|
<div class="ct-field">
|
|
<label class="ct-label" for="ct-first">First Name</label>
|
|
<input class="ct-input" type="text" id="ct-first" name="first_name" placeholder="Your first name" required />
|
|
</div>
|
|
|
|
<div class="ct-field">
|
|
<label class="ct-label" for="ct-country">Country</label>
|
|
<input class="ct-input" type="text" id="ct-country" name="country" placeholder="Your country" required />
|
|
</div>
|
|
|
|
<div class="ct-field">
|
|
<label class="ct-label" for="ct-phone">Phone</label>
|
|
<input class="ct-input" type="tel" id="ct-phone" name="phone" placeholder="Your phone number" />
|
|
</div>
|
|
|
|
<div class="ct-field ct-field--full">
|
|
<label class="ct-label" for="ct-msg">Message</label>
|
|
<textarea class="ct-input ct-textarea" id="ct-msg" name="message" rows="5" placeholder="Tell us about your project or inquiry..." required></textarea>
|
|
</div>
|
|
</div>
|
|
|
|
<button type="submit" class="ct-submit">Send Message <span class="arrow" aria-hidden="true">→</span></button>
|
|
<p class="ct-note" id="ctNote" role="status" aria-live="polite"></p>
|
|
</form>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ============================================================
|
|
3. MAP — full-width, HESU HQ (Zhengzhou, China)
|
|
============================================================ -->
|
|
<section class="ct-map" aria-label="HESU headquarters location">
|
|
<div class="container">
|
|
<div class="ct-map__box">
|
|
<!-- <iframe
|
|
class="ct-map__frame"
|
|
src="https://www.openstreetmap.org/export/embed.html?bbox=113.5450%2C34.7050%2C113.7550%2C34.7950&layer=mapnik&marker=34.7466%2C113.6254"
|
|
title="HESU headquarters — Zhengzhou, China"
|
|
loading="lazy"></iframe> -->
|
|
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d209635.64175737658!2d113.61839729692726!3d34.817088012606405!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x35d764e401426fe3%3A0xfc29750d0540a3c1!2z5Lit5Zu95rKz5Y2X55yB6YOR5bee5biC5Lit5Y6f5Yy65rKz5Y2X55yB5Zu95a625aSn5a2m56eR5oqA5Zut77yI5Lic5Yy677yJ77yR77yV5Y-35qW877yj5bqnIOmCruaUv-e8lueggTogNDUwMDUx!5e0!3m2!1sen!2sus!4v1782179949939!5m2!1sen!2sus" width="100%" height="550" style="border:0" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
|
|
<div class="ct-map__veil" aria-hidden="true"></div>
|
|
<div class="ct-map__info">
|
|
<h3 class="ct-map__info-title">Contact Information</h3>
|
|
<dl class="ct-map__list">
|
|
<div class="ct-map__item">
|
|
<img width="20" height="20" loading="lazy" class="ct-map__ico" src="image/tel.png" alt="" aria-hidden="true" />
|
|
<div class="ct-map__item-text">
|
|
<dt>TEL/WhatsApp</dt>
|
|
<dd>+8613526635577</dd>
|
|
</div>
|
|
</div>
|
|
<div class="ct-map__item">
|
|
<img width="20" height="16" loading="lazy" class="ct-map__ico" src="image/email.png" alt="" aria-hidden="true" />
|
|
<div class="ct-map__item-text">
|
|
<dt>Send Email</dt>
|
|
<dd>hesu@hesucar.com</dd>
|
|
</div>
|
|
</div>
|
|
<div class="ct-map__item">
|
|
<img width="20" height="20" loading="lazy" class="ct-map__ico" src="image/address.png" alt="" aria-hidden="true" />
|
|
<div class="ct-map__item-text">
|
|
<dt>Address</dt>
|
|
<dd>Building 17-6, 279 Xisanhuan Road, Zhengzhou, Henan, China</dd>
|
|
</div>
|
|
</div>
|
|
</dl>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
</main>
|
|
|
|
<!-- ============ FOOTER (shared) ============ -->
|
|
<footer class="site-footer" id="contact">
|
|
<div class="container">
|
|
<div class="footer-top">
|
|
<a class="logo logo-light" href="index.html" aria-label="HESU home">
|
|
<img width="85" height="25" class="logo-img" src="image/logo.png" alt="HESU" />
|
|
</a>
|
|
<div class="footer-social">
|
|
<a href="https://www.tiktok.com/@hesu_group_global" target="_blank" rel="noopener" class="social" aria-label="TikTok"><img width="30" height="30" loading="lazy" src="image/TikTok.png" alt="TikTok"></a>
|
|
<a href="https://www.facebook.com/hesuauto" target="_blank" rel="noopener" class="social" aria-label="Facebook"><img width="30" height="30" loading="lazy" src="image/Facebook.png" alt="Facebook"></a>
|
|
<a href="https://www.instagram.com/hesuauto" target="_blank" rel="noopener" class="social" aria-label="Instagram"><img width="30" height="30" loading="lazy" src="image/Instagram.png" alt="Instagram"></a>
|
|
<a href="https://wa.me/8618530090296" target="_blank" rel="noopener" class="social" aria-label="WhatsApp"><img width="30" height="30" loading="lazy" src="image/whatsapp.png" alt="WhatsApp"></a>
|
|
</div>
|
|
<div class="footer-grid">
|
|
<div class="footer-col footer-intro">
|
|
<p class="footer-slogan">Comprehensive International </br> Trade Service Platform</p>
|
|
<p class="footer-contact">Email: info@hesu.com<br/>Tel: +86 185 3009 0296</p>
|
|
</div><div class="footer-col"><h4>Business</h4><ul><li><a href="auto-export.html">Automobile Export</a></li><li><a href="building-materials.html">Building Materials Export</a></li><li><a href="global-logistics.html">International Logistics</a></li><li><a href="after-sales.html">After-sales Service</a></li></ul></div><div class="footer-col"><h4>Global Presence</h4><ul><li><a href="https://magicbridgeauto.com/" target="_blank" rel="noopener">Middle East</a></li><li><a href="https://bowindawinauto.com/" target="_blank" rel="noopener">Africa</a></li><li><a href="https://smartcars.cc/" target="_blank" rel="noopener">Eastern Europe</a></li><li><a href="global-presence.html#gp-4">Central Asia</a></li></ul></div><div class="footer-col"><h4>About Us</h4><ul><li><a href="about-us.html">Company Profile</a></li><li><a href="development-history.html">Corporate Milestones</a></li></ul></div><div class="footer-col"><h4>News</h4><ul><li><a href="news.html">Company News</a></li><li><a href="news.html">Delivery Cases</a></li><li><a href="news.html">Exhibitions</a></li></ul></div>
|
|
</div>
|
|
</div>
|
|
<div class="footer-bottom"><div class="container"><span>© <span id="year">2025</span> HESU. All rights reserved.</span><span class="footer-links"><a href="index.html">Privacy</a><a href="index.html">Terms</a><a href="index.html">Sitemap</a></span></div></div>
|
|
</footer>
|
|
|
|
<script src="js/main.js?v=20260821-12"></script>
|
|
<script src="js/contact.js"></script>
|
|
</body>
|
|
</html>
|