Made changes to the index and css files

css/styles.css

@@ -140,7 +140,7 @@ p {
     width:  200px;
     height: 200px;
     object-fit: cover;
-    
+
 
 }
 
@@ -253,7 +253,7 @@ input:invalid+span:after {
     content: '✖';
     padding-left: 5px;
   }
-  
+
   input:valid+span:after {
     position: absolute;
     content: '✓';
@@ -268,6 +268,14 @@ input:invalid+span:after {
 .social-icon {
     margin: 20px 10px;
 }
+.res {
+  text-align: center;
+
+}
+.rec {
+  text-align: center;
+
+}
 
 @media (max-width: 1028px) {
     #title {
@@ -323,4 +331,4 @@ input[type=submit] {
 
 input[type=submit]:hover {
     background-color: #fa4664;
-}
+}

index.html

@@ -31,7 +31,7 @@
   <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
   <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
   <script>
-      
+
     </script>
 </head>
 
@@ -379,8 +379,11 @@
       <div class="card-body">
         <form>
         <div class="form-group">
+          <p class=class="res">Please leave us with your personal information.</p>
           <div class="row">
+
             <div class="col-6" style="float: right;">
+
             <label for="fnameLabel">First Name</label>
               <input type="text" id="fname" name="firstname" placeholder="First Name">
             </div>
@@ -403,6 +406,7 @@
           </div>
         </div>
         <hr>
+        <p class="rec">Please provide your credit card information to guarantee your service appointment.</p>
         <h2>Account Details</h2>
          <div class="form-group">
           <div class="row">
@@ -411,7 +415,7 @@
               <input type="text" id="cardHolder" name="cardHolder" placeholder="Name on the Card">
             </div>
             <div class="col-6">
-              <label for="creditCardLabel">Credit Card</label> 
+              <label for="creditCardLabel">Credit Card</label>
               <input type="text" id="creditCard" name="creditCard" placeholder="Credit Card">
             </div>
           </div>
@@ -427,7 +431,7 @@
               <input type="text" id="expiryDate" name="cvv" placeholder="CVV">
             </div>
           </div>
-          
+
         </div>
       </form>
     </div>
@@ -450,8 +454,8 @@
        <br>
        <br>
       <input type="submit" value="Submit">
-    
+
-      
+
     </div>
   </section>
 
@@ -474,14 +478,14 @@
       document.getElementById('appointment').scrollIntoView();
     }
 
-    var value = 0; 
+    var value = 0;
 
     $(function() {
         $( "#datepicker").datepicker({ beforeShowDay: getAvailability});
-    });  
+    });
 
     function getMechanic(selectObject) {
-      value = selectObject.value;  
+      value = selectObject.value;
     }
 
     function getAvailability(date){
@@ -497,12 +501,12 @@
       else
             return [ true, "", "" ]
     }
-    
+
   </script>
-  
+
 
 </body>
 
 
 
-</html>
+</html>