hiepht/PresentCorpo
0
0
Fork 0
forked from MinhQuan/PresentCorpo
Code Pull Requests Activity

Fix: Resolve responsive layout issues on contact page

Browse Source
This commit is contained in:
hiep200311
2026-06-04 09:29:35 +07:00
parent 3e515182e1
commit c75e660e20
2 changed files with 122 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files
views/contactPages/contactMain.html
+93 -90
View File
@@ -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>