diff --git a/Booking.html b/Booking.html
index cbaa2c190f049d5ce7834b7b823d72eba9cd4ad1..1f4381c5734c65db1da27fc654852bf11f79b40a 100644
--- a/Booking.html
+++ b/Booking.html
@@ -21,69 +21,78 @@
<button class="btn contact" onclick="document.location='Contact.html'"><a href="#contact">Contact</a></button>
</div>
- <h2 class="person">Personal Details</h2>
-
<form action="/action_page.php">
- <label for="fname">First Name:</label><br>
- <input type="text" id="fname" name="fname"><br>
- <label for="lname">Surname:</label><br>
- <input type="text" id="lname" name="lname"><br><br>
- <label for="DOB">Date of Birth (DD/MM/YYYY)</label><br>
- <input type="text" id="DOB" name="DOB"><br>
- <label for="disability">Disability:</label><br>
- <input type="disability" id="disability" name="disability"><br><br>
- <h2>Gaurdian Details</h2>
- <label for="fname1">First Name:</label><br>
- <input type="text" id="fname1" name="fname1"><br><br>
- <label for="lname1">Surame:</label><br>
- <input type="text" id="lname1" name="lname1"><br><br>
- <label for="contact">Contact Number:</label><br>
- <input type="text" id="contact" name="contact"><br><br>
+ <fieldset>
+
+ <legend>Personal Details</legend>
+
+ <div class="formgrid">
+ <label for="fname">First Name:</label><br>
+ <input type="text" id="fname" name="fname"><br>
+ <label for="lname">Surname:</label><br>
+ <input type="text" id="lname" name="lname"><br><br>
+ <label for="DOB">Date of Birth (DD/MM/YYYY)</label><br>
+ <input type="text" id="DOB" name="DOB"><br>
+ <label for="disability">Disability:</label><br>
+ <input type="disability" id="disability" name="disability"><br><br>
- <h2>Payment Details</h2>
- <label for="c/r">Country/Region:</label><br>
- <select>
- <option value="opt1" selected>Select Option</option>
- <option value=“opt2”>Russia</option>
- <option value=“opt3” selected>United States</option>
- <option value=“opt4” selected>Cayman Islands</option>
- <option value=“opt5” selected>Canada</option>
- <option value=“opt6” selected>United Kingdom</option>
- </select><br><br>
- <label for="cname1">Cardholder First Name:</label><br>
- <input type="cname1" id="cname1" name="cname1"><br><br>
- <label for="cname2">Cardholder Surame:</label><br>
- <input type="cname2" id="cname2" name="cname2"><br><br>
- <label for="card">Card Type:</label><br>
- <select>
- <option value="opt1" selected>Select Option</option>
- <option value=“opt2”>Visa Debit/Visa/Visa Electron</option>
- <option value=“opt3” selected>Mastercard</option>
- <option value=“opt4” selected>Discover</option>
- <option value=“opt5” selected>Maestro</option>
- <option value=“opt6” selected>American Express</option>
- </select><br><br>
- <label for="cardnum">Card Number:</label><br>
- <input type="cardnum" id="cardnum" name="cardnum"><br><br>
- <label for="exdate">Expiry Date:</label><br>
- <input type="exdate" id="exdate" name="exdate"><br><br>
- <label for="code">Security Code:</label><br>
- <input type="code" id="code" name="code"><br><br>
+ <legend>Gaurdian Details</legend>
+ <label for="fname1">First Name:</label><br>
+ <input type="text" id="fname1" name="fname1"><br><br>
+ <label for="lname1">Surame:</label><br>
+ <input type="text" id="lname1" name="lname1"><br><br>
+ <label for="contact">Contact Number:</label><br>
+ <input type="text" id="contact" name="contact"><br><br>
- <h2>Billing Address</h2>
- <label for="address1">Address Line 1:</label><br>
- <input type="address1" id="address1" name="address1"><br><br>
- <label for="address2">Address Line 2:</label><br>
- <input type="address2" id="address2" name="address2"><br><br>
- <label for="city">Town/City:</label><br>
- <input type="city" id="city" name="city"><br><br>
- <label for="post">Postcode:</label><br>
- <input type="post" id="post" name="post"><br><br>
+ <legend>Payment Details</legend>
+ <label for="c/r">Country/Region:</label><br>
+ <select>
+ <option value=“opt1”>Russia</option>
+ <option value=“opt2” selected>United States</option>
+ <option value=“opt3” selected>Cayman Islands</option>
+ <option value=“opt4” selected>Canada</option>
+ <option value=“opt5” selected>United Kingdom</option>
+ <option value="opt6" selected>Select Option</option>
+ </select><br><br>
+ <label for="cname1">Cardholder First Name:</label><br>
+ <input type="cname1" id="cname1" name="cname1"><br><br>
+ <label for="cname2">Cardholder Surame:</label><br>
+ <input type="cname2" id="cname2" name="cname2"><br><br>
+ <label for="card">Card Type:</label><br>
+ <select>
+ <option value=“opt1”>Visa Debit/Visa/Visa Electron</option>
+ <option value=“opt2” selected>Mastercard</option>
+ <option value=“opt3” selected>Discover</option>
+ <option value=“opt4” selected>Maestro</option>
+ <option value=“opt5” selected>American Express</option>
+ <option value="opt6" selected>Select Option</option>
+ </select><br><br>
+ <label for="cardnum">Card Number:</label><br>
+ <input type="cardnum" id="cardnum" name="cardnum"><br><br>
+ <label for="exdate">Expiry Date:</label><br>
+ <input type="exdate" id="exdate" name="exdate"><br><br>
+ <label for="code">Security Code:</label><br>
+ <input type="code" id="code" name="code"><br><br>
+
+ <legend>Billing Address</legend>
+ <label for="address1">Address Line 1:</label><br>
+ <input type="address1" id="address1" name="address1"><br><br>
+ <label for="address2">Address Line 2:</label><br>
+ <input type="address2" id="address2" name="address2"><br><br>
+ <label for="city">Town/City:</label><br>
+ <input type="city" id="city" name="city"><br><br>
+ <label for="post">Postcode:</label><br>
+ <input type="post" id="post" name="post"><br><br>
- <input type="submit" value="Submit">
- </form>
+ <input class="submit" type="submit" value="Submit">
+
+ </div>
+
+ </fieldset>
+
+ </form>
diff --git a/Styles/Main.css b/Styles/Main.css
index f3fb99c63f5663637d90d0c53c67a71cdb81c73c..a4d6a9f66108d834f5c55ec7d231707d8a972e5f 100644
--- a/Styles/Main.css
+++ b/Styles/Main.css
@@ -96,45 +96,65 @@ Section{
/*Booking*/
-.person{
- grid-column: 1/5;
- grid-row: 3;
- color: darkblue;
+input, option {
+ width: 100%;
+ padding: 12px 100px;
+ margin: 8px 0;
+ display: inline-block;
+ border: 1px solid darkblue;
+ border-radius: 4px;
+ box-sizing: content-box;
+ font-size: 16px;
}
-.fname{
- grid-column: 1/2;
- grid-row: 4;
- color: darkblue;
+
+select {
+ width: 100%;
+ padding: 16px 20px;
+ border: none;
+ border-radius: 4px;
+ background-color: lightblue;
}
-.lname{
- grid-column: 3/5;
- grid-row: 4;
- color: darkblue;
+
+label {
+ float: left;
+ width: 100%;
+ text-align: left;
+ padding: 5px 1px 1px 1px;
+ font-size: 16px;
}
-.dob{
- grid-column: 1/2;
- grid-row: 5;
- color: darkblue;
+
+fieldset {
+ max-width: 40px;
+ padding: 20px;
+ margin: 2px auto;
+ border: 0 none;
}
-.disab{
- grid-column: 3/5;
- grid-row: 5;
+
+legend {
+ font-size: 30px;
+ width: 100%;
+ border-bottom: 5px dotted darkblue;
color: darkblue;
}
-.fname1{
- grid-column: 1/2;
- grid-row: 6;
- color: darkblue;
+
+.submit {
+ width: 100%;
+ background-color: darkblue;
+ color: white;
+ padding: 14px 20px;
+ margin: 8px 0;
+ border: none;
+ border-radius: 4px;
+ cursor: pointer;
}
-.lname1{
- grid-column: 3/5;
- grid-row: 6;
- color: darkblue;
+.submit:hover {
+ background-color: lightblue;
}
-.number{
- grid-column: 1/5;
- grid-row: 7;
- color: darkblue;
+
+label {
+ box-sizing: border-box;
+ user-select: none;
+ cursor: pointer;
}
/*About*/