ContactUs header amended

src/components/misc/contactUs.vue

@@ -1,163 +1,174 @@
 <template>
+  <!-- eslint-disable max-len -->
   <div class="container">
-    <section class="intro-single">
-      <div class="container">
-        <div class="row">
-          <div class="col-md-12 col-lg-8">
-            <div class="title-single-box">
-              <h1 class="title-single" style="text-align:left;">Contact Us</h1>
-            </div>
-          </div>
+    <div class="row">
+      <div class="col-sm-12">
+        <div class="faq-img-box">
+          <img
+            src="img/contact-us.jpg"
+            alt="Frequently Asked Questions"
+            class="img-fluid"
+            style="width:800px;height:400px;"
+          />
+        </div>
+        <div class="sinse-box">
+          <h3 class="sinse-title">
+            Contact Us
+            <span></span>
+          </h3>
         </div>
       </div>
-    </section>
-    <div class="map-wrapper">
-      <div class="map-canvas" id="map-canvas"></div>
-      <a
-        href="https://www.google.com/maps/dir/-25.8228224,28.3344896/vacation+recreational+services/@-25.8231034,28.3341882,16z/data=!3m1!4b1!4m9!4m8!1m1!4e1!1m5!1m1!1s0x1e955dadbb47bacd:0x3d299aff0be5b416!2m2!1d28.3426415!2d-25.8229739"
-        target="_blank"
-      ></a>
-      <iframe
-        src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1216.2235430439846!2d28.360457474768342!3d-25.79363191616322!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x445462e3d06f67fc!2sLombardy+Business+Park!5e0!3m2!1sen!2sza!4v1566222826763!5m2!1sen!2sza"
-        width="1100"
-        height="450"
-        frameborder="0"
-        style="border:0"
-        allowfullscreen
-      ></iframe>
-      <br />
-      <br />
-    </div>
+      <div class="container col-md-10">
+        <br />
+        <div class="map-wrapper">
+          <div class="map-canvas" id="map-canvas"></div>
+          <a
+            href="https://www.google.com/maps/dir/-25.8228224,28.3344896/vacation+recreational+services/@-25.8231034,28.3341882,16z/data=!3m1!4b1!4m9!4m8!1m1!4e1!1m5!1m1!1s0x1e955dadbb47bacd:0x3d299aff0be5b416!2m2!1d28.3426415!2d-25.8229739"
+            target="_blank"
+          ></a>
+          <iframe
+            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1216.2235430439846!2d28.360457474768342!3d-25.79363191616322!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x445462e3d06f67fc!2sLombardy+Business+Park!5e0!3m2!1sen!2sza!4v1566222826763!5m2!1sen!2sza"
+            width="900"
+            height="450"
+            frameborder="0"
+            style="border:0"
+            allowfullscreen
+          ></iframe>
+          <br />
+          <br />
+        </div>
 
-    <div class="row mb-8">
-      <div class="col-md-6">
-        <form action="mailto:info@univateproperties.co.za" method="post" enctype="text/plain">
-          <div class="form-group row">
-            <div class="col-md-6">
-              <div class="input-group-prepend">
-                <span class="input-group-text">
-                  <eva-icon name="person" fill="#60CBEB"></eva-icon>
-                </span>
-                <label for="yourname"></label>
-                <input
-                  id="yourname"
-                  name="yourname"
-                  placeholder="Your Name"
-                  type="text"
-                  required="required"
-                  class="form-control"
-                />
+        <div class="row mb-8">
+          <div class="col-md-6">
+            <form action="mailto:info@univateproperties.co.za" method="post" enctype="text/plain">
+              <div class="form-group row">
+                <div class="col-md-6">
+                  <div class="input-group-prepend">
+                    <span class="input-group-text">
+                      <eva-icon name="person" fill="#60CBEB"></eva-icon>
+                    </span>
+                    <label for="yourname"></label>
+                    <input
+                      id="yourname"
+                      name="yourname"
+                      placeholder="Your Name"
+                      type="text"
+                      required="required"
+                      class="form-control"
+                    />
+                  </div>
+                </div>
+                <div class="col-md-6">
+                  <div class="input-group-prepend">
+                    <span class="input-group-text">
+                      <eva-icon name="email" fill="#60CBEB"></eva-icon>
+                    </span>
+                    <label for="youremail"></label>
+                    <input
+                      id="youremail"
+                      name="youremail"
+                      placeholder="Your Email"
+                      type="text"
+                      required="required"
+                      class="form-control"
+                    />
+                  </div>
+                </div>
               </div>
-            </div>
-            <div class="col-md-6">
-              <div class="input-group-prepend">
-                <span class="input-group-text">
-                  <eva-icon name="email" fill="#60CBEB"></eva-icon>
-                </span>
-                <label for="youremail"></label>
-                <input
-                  id="youremail"
-                  name="youremail"
-                  placeholder="Your Email"
-                  type="text"
-                  required="required"
-                  class="form-control"
-                />
+              <div class="form-group row">
+                <div class="col-md-12">
+                  <div class="input-group-prepend">
+                    <span class="input-group-text">
+                      <eva-icon name="bookmark-outline" fill="#60CBEB"></eva-icon>
+                    </span>
+                    <label for="subject"></label>
+                    <input
+                      id="subject"
+                      name="subject"
+                      placeholder="Subject"
+                      type="text"
+                      class="form-control"
+                      required="required"
+                    />
+                  </div>
+                </div>
               </div>
-            </div>
-          </div>
-          <div class="form-group row">
-            <div class="col-md-12">
-              <div class="input-group-prepend">
-                <span class="input-group-text">
-                  <eva-icon name="bookmark-outline" fill="#60CBEB"></eva-icon>
-                </span>
-                <label for="subject"></label>
-                <input
-                  id="subject"
-                  name="subject"
-                  placeholder="Subject"
-                  type="text"
-                  class="form-control"
-                  required="required"
-                />
+              <div class="form-group row">
+                <div class="col-md-12">
+                  <div class="input-group-prepend">
+                    <span class="input-group-text">
+                      <eva-icon name="message-square-outline" fill="#60CBEB"></eva-icon>
+                    </span>
+                    <label for="message"></label>
+                    <textarea
+                      id="message"
+                      name="message"
+                      placeholder="Message"
+                      cols="40"
+                      rows="8"
+                      class="form-control"
+                      required="required"
+                    ></textarea>
+                  </div>
+                </div>
               </div>
-            </div>
-          </div>
-          <div class="form-group row">
-            <div class="col-md-12">
-              <div class="input-group-prepend">
-                <span class="input-group-text">
-                  <eva-icon name="message-square-outline" fill="#60CBEB"></eva-icon>
-                </span>
-                <label for="message"></label>
-                <textarea
-                  id="message"
-                  name="message"
-                  placeholder="Message"
-                  cols="40"
-                  rows="8"
-                  class="form-control"
-                  required="required"
-                ></textarea>
+              <div class="form-group row">
+                <div class="col-md-1">
+                  <button name="submit" type="submit" class="btn btn-b-n">Send Message</button>
+                </div>
               </div>
-            </div>
+            </form>
           </div>
-          <div class="form-group row">
-            <div class="col-md-1">
-              <button name="submit" type="submit" class="btn btn-b-n">Send Message</button>
-            </div>
+          <div class="col-md-6">
+            <eva-icon name="pin-outline" fill="#60CBEB"></eva-icon>
+            <a style="font-size: 25px">Find us in</a>
+            <p></p>
+            <p>
+              105 Lombardy Business Park
+              <br />Cnr. Graham and Cole Rd.
+              <br />Shere, Pretoria, 0084
+            </p>
+            <br />
+            <eva-icon name="paper-plane-outline" fill="#60CBEB"></eva-icon>
+            <a style="font-size: 25px">Say Hello</a>
+            <p></p>
+            <p>
+              <eva-icon name="email-outline" fill="#60CBEB"></eva-icon>
+              <a href="mailto:info@univateproperties.co.za">info@univateproperties.co.za</a>
+              <br />
+              <eva-icon name="phone-call-outline" fill="#60CBEB"></eva-icon>
+              <a href="tel:+27124921238">+27 (0) 12 492 1238</a>
+            </p>
+            <br />
+            <eva-icon name="share-outline" fill="#60CBEB"></eva-icon>
+            <a style="font-size: 25px">Social Networks</a>
+            <p>
+              <a href="https://www.facebook.com/univateproperties/">
+                <eva-icon name="facebook-outline" fill="#60CBEB"></eva-icon>
+              </a>
+            </p>
           </div>
-        </form>
-      </div>
-      <div class="col-md-6">
-        <eva-icon name="pin-outline" fill="#60CBEB"></eva-icon>
-        <a style="font-size: 25px">Find us in</a>
-        <p></p>
-        <p>
-          105 Lombardy Business Park
-          <br />Cnr. Graham and Cole Rd.
-          <br />Shere, Pretoria, 0084
-        </p>
-        <br />
-        <eva-icon name="paper-plane-outline" fill="#60CBEB"></eva-icon>
-        <a style="font-size: 25px">Say Hello</a>
-        <p></p>
-        <p>
-          <eva-icon name="email-outline" fill="#60CBEB"></eva-icon>
-          <a href="mailto:info@univateproperties.co.za">info@univateproperties.co.za</a>
-          <br />
-          <eva-icon name="phone-call-outline" fill="#60CBEB"></eva-icon>
-          <a href="tel:+27124921238">+27 (0) 12 492 1238</a>
-        </p>
-        <br />
-        <eva-icon name="share-outline" fill="#60CBEB"></eva-icon>
-        <a style="font-size: 25px">Social Networks</a>
-        <p>
-          <a href="https://www.facebook.com/univateproperties/">
-            <eva-icon name="facebook-outline" fill="#60CBEB"></eva-icon>
-          </a>
-        </p>
-      </div>
-    </div>
-    <div
-      class="modal fade"
-      id="thankYouModal"
-      tabindex="-1"
-      role="dialog"
-      aria-labelledby="contactModalLabel"
-      aria-hidden="true"
-    >
-      <div class="modal-dialog" role="document">
-        <div class="modal-content px-0 px-md-4">
-          <div class="modal-header">
-            <h5 class="modal-title" id="contactModalLabel">Thank you</h5>
-            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-              <span aria-hidden="true">&times;</span>
-            </button>
-          </div>
-          <div class="modal-body">
-            <p>Thank you for contacting us. We will contact you as soon as possible.</p>
+        </div>
+        <div
+          class="modal fade"
+          id="thankYouModal"
+          tabindex="-1"
+          role="dialog"
+          aria-labelledby="contactModalLabel"
+          aria-hidden="true"
+        >
+          <div class="modal-dialog" role="document">
+            <div class="modal-content px-0 px-md-4">
+              <div class="modal-header">
+                <h5 class="modal-title" id="contactModalLabel">Thank you</h5>
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                  <span aria-hidden="true">&times;</span>
+                </button>
+              </div>
+              <div class="modal-body">
+                <p>Thank you for contacting us. We will contact you as soon as possible.</p>
+              </div>
+            </div>
           </div>
         </div>
       </div>