Fix: Resolve responsive layout issues on contact page
This commit is contained in:
hiep200311
@@ -35,10 +35,7 @@ a:active {
|
||||
|
||||
/* Contact Section */
|
||||
.contact-section {
|
||||
padding: 60px 5%;
|
||||
background-color: #f9f9f9;
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.page-intro {
|
||||
@@ -60,19 +57,18 @@ a:active {
|
||||
}
|
||||
|
||||
.contact-container {
|
||||
display: flex;
|
||||
gap: 40px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
/* Enhanced Form Container */
|
||||
.contact-form {
|
||||
flex: 1;
|
||||
background-color: white;
|
||||
padding: 35px;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
transition:
|
||||
transform 0.3s ease,
|
||||
box-shadow 0.3s ease;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
@@ -303,7 +299,9 @@ a:active {
|
||||
border-radius: 50%;
|
||||
transform: scale(0);
|
||||
opacity: 0;
|
||||
transition: transform 0.6s, opacity 0.6s;
|
||||
transition:
|
||||
transform 0.6s,
|
||||
opacity 0.6s;
|
||||
}
|
||||
|
||||
.submit-button:hover::after {
|
||||
@@ -313,14 +311,17 @@ a:active {
|
||||
|
||||
/* Contact Details Section */
|
||||
.contact-details {
|
||||
flex: 1;
|
||||
background-color: white;
|
||||
padding: 35px;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
transition:
|
||||
transform 0.3s ease,
|
||||
box-shadow 0.3s ease;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.contact-details::before {
|
||||
@@ -380,7 +381,9 @@ a:active {
|
||||
color: #30875f;
|
||||
margin-right: 15px;
|
||||
margin-top: 3px;
|
||||
transition: color 0.3s, transform 0.3s;
|
||||
transition:
|
||||
color 0.3s,
|
||||
transform 0.3s;
|
||||
}
|
||||
|
||||
.contact-item:hover i {
|
||||
@@ -428,8 +431,18 @@ a:active {
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
transition:
|
||||
transform 0.3s ease,
|
||||
box-shadow 0.3s ease;
|
||||
position: relative;
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.map-container iframe {
|
||||
flex-grow: 1;
|
||||
height: 100% !important;
|
||||
min-height: 250px;
|
||||
}
|
||||
|
||||
.map-container:hover {
|
||||
@@ -488,7 +501,8 @@ a:active {
|
||||
/* Responsive Design */
|
||||
@media (max-width: 1200px) {
|
||||
.contact-section {
|
||||
padding: 50px 4%;
|
||||
padding-top: 50px;
|
||||
padding-bottom: 50px;
|
||||
}
|
||||
|
||||
.contact-form,
|
||||
@@ -514,13 +528,8 @@ a:active {
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.contact-container {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.contact-form,
|
||||
.contact-details {
|
||||
width: 100%;
|
||||
padding: 25px;
|
||||
}
|
||||
|
||||
@@ -557,7 +566,8 @@ a:active {
|
||||
|
||||
@media (max-width: 576px) {
|
||||
.contact-section {
|
||||
padding: 40px 15px;
|
||||
padding-top: 40px;
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
|
||||
.page-intro {
|
||||
|
||||
@@ -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