Header, button & form changes

src/components/timeshare/resort/unitPage.vue

@@ -1,126 +1,141 @@
 <template>
-  <div class="container">
-    <div class="row mb-4">
-      <div class="col-md-12">
-        <h1 class="my-4">{{resort.prName}}</h1>
-      </div>
-      <div class="col-md-6">
-        <p>{{description}}</p>
-      </div>
-      <div class="col-md-6">
-        <form
-          id="mainForm"
-          method="POST"
-          action="/interested-timeshare/"
-          accept-charset="UTF-8"
-          enctype="multipart/form-data"
-        >
-          <div class="form-row">
-            <div class="col-md-6">
-              <label for="resortName">Unit</label>
-              <input
-                class="form-control"
-                type="text"
-                id="resort"
-                name="resortName"
-                :value="week.unit"
-                disabled
-              />
-            </div>
-            <div class="col-md-6">
-              <label for="resortWeek">Week</label>
-              <input
-                class="form-control"
-                type="text"
-                id="week"
-                name="resortWeek"
-                :value="week.week"
-                disabled
-              />
+  <section>
+    <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;">{{resort.prName}}</h1>
             </div>
           </div>
-          <div class="form-row">
-            <div class="col-md-6">
-              <label for="resortModule">Module</label>
-              <input
-                class="form-control"
-                type="text"
-                id="module"
-                name="resortModule"
-                :value="week.module"
-                disabled
-              />
+        </div>
+      </div>
+    </section>
+    <div class="container">
+      <div class="row mb-4">
+        <div class="col-md-6">
+          <p>{{description}}</p>
+        </div>
+        <div class="col-md-6">
+          <form
+            id="mainForm"
+            method="POST"
+            action="/interested-timeshare/"
+            accept-charset="UTF-8"
+            enctype="multipart/form-data"
+          >
+            <div class="form-row">
+              <div class="col-md-6">
+                <label for="resortunit">Unit</label>
+                <input
+                  class="form-control"
+                  type="text"
+                  id="resort"
+                  name="resortunit"
+                  :value="week.unit"
+                  disabled
+                />
+              </div>
+              <div class="col-md-6">
+                <label for="resortWeek">Week</label>
+                <input
+                  class="form-control"
+                  type="text"
+                  id="week"
+                  name="resortWeek"
+                  :value="week.week"
+                  disabled
+                />
+              </div>
             </div>
-            <div class="col-md-6">
-              <label for="price">Price</label>
-              <input
-                class="form-control"
-                type="text"
-                name="price"
-                id="price"
-                :value="'R ' + week.price"
-                disabled
-              />
+            <br />
+            <div class="form-row">
+              <div class="col-md-6">
+                <label for="resortModule">Module</label>
+                <input
+                  class="form-control"
+                  type="text"
+                  id="module"
+                  name="resortModule"
+                  :value="week.module"
+                  disabled
+                />
+              </div>
+              <div class="col-md-6">
+                <label for="price">Price</label>
+                <input
+                  class="form-control"
+                  type="text"
+                  name="price"
+                  id="price"
+                  :value="'R ' + week.price"
+                  disabled
+                />
+              </div>
             </div>
-          </div>
-          <div class="form-row">
-            <div class="col-md-6">
-              <label for="resortModule">Current Year Levy</label>
-              <input
-                class="form-control"
-                type="text"
-                id="levy"
-                name="levy"
-                :value="'R ' + week.currentLevy"
-                disabled
-              />
+            <br />
+            <div class="form-row">
+              <div class="col-md-6">
+                <label for="resortModule">Current Year Levy</label>
+                <input
+                  class="form-control"
+                  type="text"
+                  id="levy"
+                  name="levy"
+                  :value="'R ' + week.currentLevy"
+                  disabled
+                />
+              </div>
             </div>
-          </div>
-          <div class="form-row">
-            <div class="col-md-12">
-              <input class="form-control" type="text" name="name" placeholder="Name" />
+            <br />
+            <div class="form-row">
+              <div class="col-md-12">
+                <input class="form-control" type="text" name="name" placeholder="Name" />
+              </div>
             </div>
-          </div>
-          <div class="form-row">
-            <div class="col-md-12">
-              <input class="form-control" type="text" name="mobile" placeholder="Contact Number" />
+            <br />
+            <div class="form-row">
+              <div class="col-md-12">
+                <input
+                  class="form-control"
+                  type="number"
+                  name="mobile"
+                  placeholder="Contact Number"
+                />
+              </div>
             </div>
-          </div>
-          <div class="form-row">
-            <div class="col-md-12">
-              <input class="form-control" type="email" name="email" placeholder="Email" />
+            <br />
+            <div class="form-row">
+              <div class="col-md-12">
+                <input class="form-control" type="email" name="email" placeholder="Email" />
+              </div>
             </div>
-          </div>
+            <br />
 
-          <button class="btn btn-blue even-width mr-auto" type="submit">ENQUIRE NOW</button>
+            <button class="btn btn-b-c even-width mr-auto" type="submit">Enquire Now</button>
 
-          <a
-            class="btn btn-blue even-width mr-auto"
-            href="/share-transfer-initiation-for-purchaser/"
-          >MAKE AN OFFER</a>
-          <a
-            class="btn btn-blue even-width mr-auto"
-            href="#"
-            data-toggle="modal"
-            data-target="#loginOrRegister"
-          >MAKE AN OFFER</a>
+            <a
+              class="btn btn-b-n even-width mr-auto"
+              href="/share-transfer-initiation-for-purchaser/"
+            >Make an Offer</a>
 
-          <a class="btn btn-blue even-width mr-auto" href="javascript:history.back()">BACK</a>
-        </form>
-      </div>
-    </div>
-    <div class="row mb-4">
-      <div class="col-md-4">
-        <img class="img-fluid" :src="image1" alt="Resort Image" />
-      </div>
-      <div class="col-md-4">
-        <img class="img-fluid" :src="image2" alt="Resort Image" />
+            <a class="btn btn-b-c even-width mr-auto" href="javascript:history.back()">Back</a>
+          </form>
+        </div>
       </div>
-      <div class="col-md-4">
-        <img class="img-fluid" :src="image3" alt="Resort Image" />
+      <div class="row mb-4">
+        <div class="col-md-4">
+          <img class="img-fluid" :src="image1" alt="Resort Image" />
+        </div>
+        <div class="col-md-4">
+          <img class="img-fluid" :src="image2" alt="Resort Image" />
+        </div>
+        <div class="col-md-4">
+          <img class="img-fluid" :src="image3" alt="Resort Image" />
+        </div>
       </div>
     </div>
-  </div>
+  </section>
 </template>
 
 <script>
@@ -151,3 +166,15 @@ export default {
   },
 };
 </script>
+<style scoped>
+.btn.btn-b-c {
+  background-color: #ffffff;
+  color: #60cbeb;
+  border-radius: 0;
+}
+
+.btn.btn-b-c:hover {
+  background-color: #089bf0;
+  color: #ffffff;
+}
+</style>