Fix: Resolve responsive layout issues on contact page
This commit is contained in:
hiep200311
@@ -89,104 +89,107 @@
|
||||
</div>
|
||||
|
||||
<!----- CONTACT PAGE CONTENT ----->
|
||||
<section class="contact-section">
|
||||
<section class="contact-section container py-5 my-3 overflow-hidden">
|
||||
<h1 class="page-intro">LIÊN HỆ VỚI KỲ LONG</h1>
|
||||
|
||||
<div class="contact-container">
|
||||
<div class="contact-form">
|
||||
<h2>Gửi tin nhắn cho chúng tôi</h2>
|
||||
<div class="contact-container row g-4 g-lg-5">
|
||||
<div class="col-12 col-md-6 mb-4 mb-md-0">
|
||||
<div class="contact-form h-100">
|
||||
<h2>Gửi tin nhắn cho chúng tôi</h2>
|
||||
|
||||
<!-- Optional: Progress bar to show form completion -->
|
||||
<div class="form-progress">
|
||||
<div class="form-progress-bar"></div>
|
||||
<!-- Optional: Progress bar to show form completion -->
|
||||
<div class="form-progress">
|
||||
<div class="form-progress-bar"></div>
|
||||
</div>
|
||||
|
||||
<form action="/contactSubmit" method="POST" id="contactForm">
|
||||
<div class="form-group">
|
||||
<label for="name" class="required">Họ và tên</label>
|
||||
<input
|
||||
type="text"
|
||||
id="name"
|
||||
name="name"
|
||||
placeholder="Nhập họ và tên của bạn"
|
||||
required
|
||||
/>
|
||||
<div class="error-message">Vui lòng nhập họ và tên của bạn</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="email" class="required">Email</label>
|
||||
<input
|
||||
type="email"
|
||||
id="email"
|
||||
name="email"
|
||||
placeholder="Nhập địa chỉ email của bạn"
|
||||
required
|
||||
/>
|
||||
<div class="error-message">
|
||||
Vui lòng nhập một địa chỉ email hợp lệ
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="phone" class="required">Số điện thoại</label>
|
||||
<input
|
||||
type="tel"
|
||||
id="phone"
|
||||
name="phone"
|
||||
placeholder="Nhập số điện thoại của bạn"
|
||||
required
|
||||
/>
|
||||
<div class="error-message">
|
||||
Vui lòng nhập số điện thoại của bạn
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="message" class="required">Nội dung</label>
|
||||
<textarea
|
||||
id="message"
|
||||
name="message"
|
||||
placeholder="Nhập nội dung tin nhắn của bạn"
|
||||
rows="5"
|
||||
required
|
||||
></textarea>
|
||||
<div class="error-message">Vui lòng nhập nội dung tin nhắn</div>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="submit-button">Gửi tin nhắn</button>
|
||||
</form>
|
||||
|
||||
<!-- Container for success/error messages -->
|
||||
</div>
|
||||
|
||||
<form action="/contactSubmit" method="POST" id="contactForm">
|
||||
<div class="form-group">
|
||||
<label for="name" class="required">Họ và tên</label>
|
||||
<input
|
||||
type="text"
|
||||
id="name"
|
||||
name="name"
|
||||
placeholder="Nhập họ và tên của bạn"
|
||||
required
|
||||
/>
|
||||
<div class="error-message">Vui lòng nhập họ và tên của bạn</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="email" class="required">Email</label>
|
||||
<input
|
||||
type="email"
|
||||
id="email"
|
||||
name="email"
|
||||
placeholder="Nhập địa chỉ email của bạn"
|
||||
required
|
||||
/>
|
||||
<div class="error-message">
|
||||
Vui lòng nhập một địa chỉ email hợp lệ
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="phone" class="required">Số điện thoại</label>
|
||||
<input
|
||||
type="tel"
|
||||
id="phone"
|
||||
name="phone"
|
||||
placeholder="Nhập số điện thoại của bạn"
|
||||
required
|
||||
/>
|
||||
<div class="error-message">
|
||||
Vui lòng nhập số điện thoại của bạn
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="message" class="required">Nội dung</label>
|
||||
<textarea
|
||||
id="message"
|
||||
name="message"
|
||||
placeholder="Nhập nội dung tin nhắn của bạn"
|
||||
rows="5"
|
||||
required
|
||||
></textarea>
|
||||
<div class="error-message">Vui lòng nhập nội dung tin nhắn</div>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="submit-button">Gửi tin nhắn</button>
|
||||
</form>
|
||||
|
||||
<!-- Container for success/error messages -->
|
||||
<div id="form-messages"></div>
|
||||
</div>
|
||||
|
||||
<div class="contact-details">
|
||||
<h2>Thông tin liên hệ</h2>
|
||||
<div class="contact-info">
|
||||
<div class="contact-item">
|
||||
<i class="fas fa-map-marker-alt"></i>
|
||||
<p>Lầu 12, số 27 Đinh Bộ Lĩnh, P. Bình Thạnh, TP.Hồ Chí Minh</p>
|
||||
<div class="col-12 col-md-6">
|
||||
<div class="contact-details h-100">
|
||||
<h2>Thông tin liên hệ</h2>
|
||||
<div class="contact-info">
|
||||
<div class="contact-item">
|
||||
<i class="fas fa-map-marker-alt"></i>
|
||||
<p>Lầu 12, số 27 Đinh Bộ Lĩnh, P. Bình Thạnh, TP.Hồ Chí Minh</p>
|
||||
</div>
|
||||
<div class="contact-item">
|
||||
<i class="fas fa-phone-alt"></i>
|
||||
<p>+84 96 227 7912</p>
|
||||
</div>
|
||||
<div class="contact-item">
|
||||
<i class="fas fa-envelope"></i>
|
||||
<p>info@kylongtech.com</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="contact-item">
|
||||
<i class="fas fa-phone-alt"></i>
|
||||
<p>+84 96 227 7912</p>
|
||||
</div>
|
||||
<div class="contact-item">
|
||||
<i class="fas fa-envelope"></i>
|
||||
<p>info@kylongtech.com</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="map-container">
|
||||
<iframe
|
||||
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3919.0886950094214!2d106.70665347594756!3d10.804518689345947!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x317528bb7aef745f%3A0x9171c157a44f8c21!2zMjcgxJAuIMSQaW5oIELhu5kgTMSpbmgsIFBoxrDhu51uZyAxNCwgQsOsbmggVGjhuqFuaCwgSOG7kyBDaMOtIE1pbmgsIFZpZXRuYW0!5e0!3m2!1sen!2s!4v1757160111176!5m2!1sen!2s"
|
||||
width="100%"
|
||||
height="300"
|
||||
style="border: 0"
|
||||
allowfullscreen=""
|
||||
loading="lazy"
|
||||
></iframe>
|
||||
<div class="map-container">
|
||||
<iframe
|
||||
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3919.0886950094214!2d106.70665347594756!3d10.804518689345947!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x317528bb7aef745f%3A0x9171c157a44f8c21!2zMjcgxJAuIMSQaW5oIELhu5kgTMSpbmgsIFBoxrDhu51uZyAxNCwgQsOsbmggVGjhuqFuaCwgSOG7kyBDaMOtIE1pbmgsIFZpZXRuYW0!5e0!3m2!1sen!2s!4v1757160111176!5m2!1sen!2s"
|
||||
class="w-100"
|
||||
height="300"
|
||||
style="border: 0"
|
||||
allowfullscreen=""
|
||||
loading="lazy"
|
||||
></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user