Add files via upload

GI-Health · Dec 2, 2024 · 001c5ad · 001c5ad
1 parent 5a56f03
commit 001c5ad
Showing 2 changed files with 45 additions and 34 deletions.
diff --git a/index.html b/index.html
@@ -86,27 +86,29 @@ <h2>About Us</h2>
   <div class="container">
     <h2>Contact Us</h2>
     <p>Reach out to us for professional accounting services:</p>
-    <p><i class="fas fa-phone"></i> Phone: +254 720 000 000</p>
-    <p><i class="fas fa-envelope"></i> Email: <a href="mailto:joyce.mainaN@gmail.com">joyce.mainaN@gmail.com</a></p>
-	      <!-- QR Code -->
+    <div class="contact-info">
+      <div class="contact-text">
+        <p><i class="fas fa-phone"></i> Phone: +254 720 000 000</p>
+        <p><i class="fas fa-envelope"></i> Email: <a href="mailto:joyce.mainaN@gmail.com">MainaJoyceNjoki@gmail.com</a></p>
+      </div>
       <div class="qr-code">
-        <img src="QR.png" alt="Scan to get contact details" />
+        <p>Scan QR code to add contact</p>
+        <img src="QR.png" alt="Scan to get contact details">
       </div>
-
-
-      <form id="contact-form" action="https://docs.google.com/forms/u/0/d/e/1FAIpQLSdobhBfTCqsLAUp0RNXLmf3eX9jLHsxgoPakn9qek2GI6izYA/formResponse" method="POST" target="hidden_iframe">
-        <input type="text" name="entry.2045553459" placeholder="Your Name" id="name" required>
-        <input type="email" name="entry.2001873758" placeholder="Your Email" id="email" required>
-        <input type="text" name="entry.172257648" placeholder="Your Phone Number" id="phone" required>
-        <textarea name="entry.592809683" placeholder="Your Message" id="message" required></textarea>
-        <button type="submit">Send Message</button>
-        <!-- Custom feedback message -->
-        <!-- <p id="thank-you" style="display: none; color: green;">Thanks for your message! We'll get back to you soon.</p> -->
-        <p id="form-feedback" style="display: none;"></p> <!-- For error/success feedback -->
-      </form>
-      <iframe name="hidden_iframe" style="display: none;"></iframe> <!-- Invisible iframe for submission -->
     </div>
-  </section>
+
+    <form id="contact-form" action="https://docs.google.com/forms/u/0/d/e/1FAIpQLSdobhBfTCqsLAUp0RNXLmf3eX9jLHsxgoPakn9qek2GI6izYA/formResponse" method="POST" target="hidden_iframe">
+      <input type="text" name="entry.2045553459" placeholder="Your Name" id="name" required>
+      <input type="email" name="entry.2001873758" placeholder="Your Email" id="email" required>
+      <input type="text" name="entry.172257648" placeholder="Your Phone Number" id="phone" required>
+      <textarea name="entry.592809683" placeholder="Your Message" id="message" required></textarea>
+      <button type="submit">Send Message</button>
+	  <p id="form-feedback" style="display: none;"></p> <!-- For error/success feedback -->
+    </form>
+    <iframe name="hidden_iframe" style="display: none;"></iframe>
+  </div>
+</section>
+
 
   <!-- Footer Section -->
   <footer>

diff --git a/style.css b/style.css
@@ -122,6 +122,8 @@ nav ul li a {
 .contact {
   background: #f1f1f1;
   padding: 50px 0;
+  display: flex;
+  justify-content: center; /* Center the content horizontally */
 }
 
 .contact form input, .contact form textarea {
@@ -153,28 +155,35 @@ nav ul li a {
 
 /* Styling for contact-info block */
 .contact-info {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
+  display: flex; /* Horizontal alignment */
+  flex-direction: row; /* Ensure children are aligned horizontally */
+  align-items: center; /* Vertical centering of items */
+  justify-content: flex-start; /* Even spacing between text and QR code */
   gap: 20px; /* Space between text and QR code */
-  margin-top: 20px;
+  width: 100%; /* Full width */
+  /* max-width: 800px; /* Limit the maximum width */
+  margin: 0 auto; /* Center the block within its parent */
+  margin-top: 20px; /* Add spacing from the heading */
 }
 
-/* Contact Text */
 .contact-text {
-  flex: 1; /* Allow text to take up available space */
+  flex: 2; /* Allocate more space to the text section */
 }
 
-/* QR Code Styling */
-.qr-code img {
-  max-width: 150px; /* Set a maximum size for the QR code */
-  height: auto; /* Maintain aspect ratio */
-  border: 1px solid #ccc; /* Optional: Add a border around the QR code */
-  border-radius: 8px; /* Optional: Rounded corners */
+.qr-code {
+  flex: 1; /* Allocate smaller space to QR code */
+  text-align: center; /* Center-align QR code content */
 }
 
+.qr-code img {
+  max-width: 150px; /* Ensure QR code is appropriately sized */
+  height: auto;
+  border: 1px solid #ccc;
+  border-radius: 8px;
+}
 
-
-
-
-
+/* CSS for invalid input field */
+.invalid {
+  border: 1px solid red !important; /* Red border to indicate invalid input */
+  background-color: #fdd; /* Optional: light red background */
+}