diff --git a/Homepage.html b/Homepage.html
index 2e97664b23fa03a20eb0302ae80d94003c8c1142..d1a4344f9ccd0fe38d1961c8753cf34c2f7d005a 100644
--- a/Homepage.html
+++ b/Homepage.html
@@ -17,24 +17,28 @@
<button class="btn" onclick="document.location='Login.html'">Login</button>
<button class="btn1" onclick="document.location='Register.html'">Register</button>
- <p1 class="about">
- Travel Elect is a software designed to help companies lower their carbon
- footprint and save money. You are able to plan business trips efficiently
- and save your company money by only taking trips that are necessary.
- You will recieve alternative trip options when planning your trips.
- Some of the reasons for these business trips can be done using technology
- developed to help companies for these reasons such as conducting a conferencing over
- video conferencing rather than traveling abroad.
- </p1>
+ <section class="about">
+ <p1>
+ Travel Elect is a software designed to help companies lower their carbon
+ footprint and save money. You are able to plan business trips efficiently
+ and save your company money by only taking trips that are necessary.
+ You will recieve alternative trip options when planning your trips.
+ Some of the reasons for these business trips can be done using technology
+ developed to help companies for these reasons such as conducting a conferencing over
+ video conferencing rather than traveling abroad.
+ </p1>
+ </section>
- <p2 class="about1">
- Travel Elect can help these companies decide which trips are necessary
- and which ones are not and help the company to keep
- track of their carbon footprint and remain on budget.
- Help your company go carbon neutral and save our planet. Our software helps
- your company go carbon nuetral by stopping unnecessary travels. And displays your
- companies carbon footprint overall.
- </p2>
+ <section class="about1">
+ <p2>
+ Travel Elect can help these companies decide which trips are necessary
+ and which ones are not and help the company to keep
+ track of their carbon footprint and remain on budget.
+ Help your company go carbon neutral and save our planet. Our software helps
+ your company go carbon nuetral by stopping unnecessary travels. And displays your
+ companies carbon footprint overall.
+ </p2>
+ </section>
<button class="btn2" onclick="document.location='Register.html'">Start Planning</button>
</body>
diff --git a/Login.html b/Login.html
index 456f00bf6850f82f2826b917b66c922c760ea568..53f01305f3ce532e2effaeb4189e2872b7bfe0f0 100644
--- a/Login.html
+++ b/Login.html
@@ -23,7 +23,7 @@
<input type="text" placeholder="Enter Password" name="psw" required>
</div>
- <button type="submit">Login</button>
+ <button class="login" type="submit">Login</button>
<label>
<input type="checkbox" checked="checked" name="remember"> Remember me
</label>
diff --git a/Payment.html b/Payment.html
new file mode 100644
index 0000000000000000000000000000000000000000..bf8a4789131dc5984cdd0a5008cb8063baefc492
--- /dev/null
+++ b/Payment.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, intial-scale=1.0">
+ <meta http-equiv="X-UA-Compatible" content="ie=edge">
+ <link rel="stylesheet" href="style/main.css">
+ <title>Travel Elect</title>
+</head>
+
+<body>
+ <body>
+ <header>
+ <h1><img class= "logo" src="logo.png" alt="company logo"/>Travel Elect</h1>
+ </header>
+
+ <form action="/action_page.php">
+
+ <fieldset>
+
+ <legend>Payment Details</legend>
+
+ <div class="payment">
+
+ <label for="c/r">Country/Region:</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="type">Card Type:</label><br>
+ <select>
+ <option value=“opt1”>Canada</option>
+ <option value=“opt2” selected>Cayman Islands</option>
+ <option value=“opt3” selected>Russia</option>
+ <option value=“opt4” selected>United Kingdom</option>
+ <option value=“opt5” selected>United States</option>
+ <option value="opt6" selected>Select Option</option>
+ </select><br><br>
+ <label for="name">Cardholder Name:</label><br>
+ <input type="text" id="name" name="name"><br><br>
+ <label for="cnumber">Card Number:</label><br>
+ <input type="text" id="cnumber" name="cnumber"><br><br>
+ <label for="exdate">Expiry Date:</label><br>
+ <input type="text" id="exdate" name="exdate"><br><br>
+ <label for="code">Security Code:</label><br>
+ <input type="text" id="code" name="cody"><br><br>
+ <legend>Billing Address</legend>
+ <label for="address">Address:</label><br>
+ <input type="text" id="address" name="address"><br><br>
+ <input type="text" id="address" name="address"><br><br>
+ <input type="text" id="address" name="address"><br><br>
+ <label for="t/c">Town/City:</label><br>
+ <input type="text" id="t/c" name="t/c"><br><br>
+ <label for="pcode">Postcode:</label><br>
+ <input type="text" id="pcode" name="pcode"><br><br>
+
+ <button type="submit">Register</button>
+
+ </div>
+
+ </fieldset>
+
+ </form>
+ </body>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/Plan Trips.html b/Plan Trips.html
index 49b5136952d9d19ec18eb9e145848ed069fa0dfc..a4dbc7bca432975aefbd1a2830b59281ec83ddc5 100644
--- a/Plan Trips.html
+++ b/Plan Trips.html
@@ -24,6 +24,47 @@
</div>
+ <form action="/action_page.php">
+
+ <fieldset>
+
+ <legend>Plan Trip</legend>
+
+ <div class="plan">
+
+ <label for="id">Employee ID:</label><br>
+ <input type="text" id="id" name="id"><br><br>
+ <label for="fname">First Name:</label><br>
+ <input type="text" id="fname" name="fname"><br><br>
+ <label for="lname">Last Name:</label><br>
+ <input type="text" id="lname" name="lname"><br><br>
+ <label for="fnumber">Flight Number:</label><br>
+ <input type="text" id="fnumber" name="fnumber"><br><br>
+ <label for="airline">Airline:</label><br>
+ <input type="text" id="airline" name="airline"><br><br>
+ <label for="leave">Leaving Date:</label><br>
+ <input type="text" id="leave" name="leave"><br><br>
+ <label for="depart">Departure Time:</label><br>
+ <input type="text" id="depart" name="depart"><br><br>
+ <label for="arrive">Arrival Time:</label><br>
+ <input type="text" id="arrive" name="arrive"><br><br>
+ <label for="return">Returning Date:</label><br>
+ <input type="text" id="return" name="return"><br><br>
+ <label for="depart">Departure Time:</label><br>
+ <input type="text" id="depart" name="depart"><br><br>
+ <label for="arrive">Arrival Time:</label><br>
+ <input type="text" id="arrive" name="arrive"><br><br>
+ <label for="carbon">Total Carbon Emission:</label><br>
+ <input type="text" id="carbon" name="carbon"><br><br>
+
+
+ <button onclick="document.location='Upcoming Trips.html'">Submit</button>
+
+ </div>
+
+ </fieldset>
+
+ </form>
diff --git a/Register pt 2.html b/Register pt 2.html
deleted file mode 100644
index 414728238032a8e8677e6e1d2843640023d06272..0000000000000000000000000000000000000000
--- a/Register pt 2.html
+++ /dev/null
@@ -1,18 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, intial-scale=1.0">
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
- <link rel="stylesheet" href="style/main.css">
- <title>Travel Elect</title>
-</head>
-
-<body>
-
- <header>
- <h1><img class= "logo" src="logo.png" alt="company logo"/>Travel Elect</h1>
- </header>
-
-</body>
-</html>
\ No newline at end of file
diff --git a/Register pt 3.html b/Register pt 3.html
deleted file mode 100644
index ec5d73acdc909aee6c352ea0fe5ba16e3e54df90..0000000000000000000000000000000000000000
--- a/Register pt 3.html
+++ /dev/null
@@ -1,45 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, intial-scale=1.0">
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
- <link rel="stylesheet" href="style/main.css">
- <title>Travel Elect</title>
-</head>
-
-<body>
- <body>
- <header>
- <h1><img class= "logo" src="logo.png" alt="company logo"/>Travel Elect</h1>
- </header>
- <h2>Payment Details</h2>
- <form action="/action_page.php">
- <label for="c/r">Country/Region:</label><br>
- <input type="text" id="c/r" name="c/r"><br><br>
- <label for="type">Card Type:</label><br>
- <input type="text" id="type" name="type"><br><br>
- <label for="name">Cardholder Name:</label><br>
- <input type="text" id="name" name="name"><br><br>
- <label for="cnumber">Card Number:</label><br>
- <input type="text" id="cnumber" name="cnumber"><br><br>
- <label for="exdate">Expiry Date:</label><br>
- <input type="text" id="exdate" name="exdate"><br><br>
- <label for="code">Security Code:</label><br>
- <input type="text" id="code" name="cody"><br><br>
- <h2>Billing Address</h2>
- <label for="address">Address:</label><br>
- <input type="text" id="address" name="address"><br><br>
- <input type="text" id="address" name="address"><br><br>
- <input type="text" id="address" name="address"><br><br>
- <label for="t/c">Town/City:</label><br>
- <input type="text" id="t/c" name="t/c"><br><br>
- <label for="pcode">Postcode:</label><br>
- <input type="text" id="pcode" name="pcode"><br><br>
-
- <input type="submit" value="Submit">
- </form>
- </body>
-
-</body>
-</html>
\ No newline at end of file
diff --git a/Register.html b/Register.html
index acd627a737b5ca6f31f7552dcd0c4b8881b5c2f7..ca865aaa326a5eac3ca5e0ce8c5f77c0b8f94aa4 100644
--- a/Register.html
+++ b/Register.html
@@ -41,7 +41,7 @@
<label>
<input class="regcheck" type="checkbox" name="privacy"> Agree with Privacy Terms
</label>
- <button class="next" onclick="document.location='Register pt 2.html'">Next</button>
+ <button class="next" onclick="document.location='Subscription.html'">Next</button>
</div>
diff --git a/Style/main.css b/Style/main.css
index 40b8a1295715f46f4a0b74348ce4f7fee3a30ebb..4a709961432ffca82b10a69593c83b4e7fcc3d59 100644
--- a/Style/main.css
+++ b/Style/main.css
@@ -1,8 +1,8 @@
/*Global*/
body {
display:grid;
- grid-template-columns: 2fr 1fr 1fr 1fr;
- grid-template-rows: auto auto 1fr 1fr 1fr 1fr;
+ grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
+ grid-template-rows: auto auto 1fr 1fr 1fr 1fr 1fr;
}
@@ -12,6 +12,7 @@ header{
color: darkblue;
font-size: 25px;
position: relative;
+ background-color: white;
}
.logo{
width: 70px;
@@ -42,7 +43,7 @@ header{
}
.sidenav a:hover {
- color: #00ff00;
+ color: #0ed145;
}
.bttn:hover {
@@ -94,34 +95,41 @@ header{
.about {
grid-column: 1/6;
- grid-row: 6;
+ grid-row: 5;
font-size: 20px;
text-align: center;
+ background-color: darkblue;
+ color: white;
+ padding-top: 100px;
+ padding-bottom: 100px;
}
.about1 {
grid-column: 1/6;
- grid-row: 10;
+ grid-row: 6;
font-size: 20px;
text-align: center;
+ padding-top: 100px;
+ padding-bottom: 100px;
}
.btn2 {
border: none;
background-color: white;
padding: 14px 28px;
- font-size: 20px;
+ font-size: 30px;
+ font-style: bold;
cursor: pointer;
display: inline-block;
- width: 50%;
+ width: 100%;
grid-column: 2/4;
- grid-row: 11;
- color: darkblue;
+ grid-row: 7;
+ color:darkblue;
}
.btn2:hover {
- background: #eee;
+ background: white;
}
/*Login*/
- button {
+ .login {
background-color: darkblue;
color: white;
padding: 14px 20px;
@@ -156,27 +164,27 @@ header{
padding: 16px;
}
- /*Register 1*/
+ /*Register, Payment & Plan Trips*/
.register {
grid-template-columns: 1/3;
grid-template-rows: 2;
}
- input[type=text] {
+ input[type=text], select {
width: 100%;
padding: 12px 100px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: content-box;
- font-size: 16;
+ font-size: 20px;
}
label {
float: left;
width: 100%;
text-align: left;
padding: 5px 1px 1px 1px;
- font-size: 16px;
+ font-size: 20px;
}
fieldset {
max-width: 40px;
@@ -195,16 +203,51 @@ header{
user-select: none;
cursor: pointer;
}
- .next {
- width: 100%;
+ button {
background-color: darkblue;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
- border-radius: 4px;
cursor: pointer;
+ width: 100%;
}
- .next:hover {
- background-color: #4CAF50;
- }
\ No newline at end of file
+
+ /*Subscription*/
+
+ .week {
+ border: 3px solid #0ed145;
+ grid-column: 1/2;
+ grid-row: 3;
+ font-size: 20px;
+ text-align: center;
+ background-color: white;
+ }
+ .month {
+ border: 3px solid #0ed145;
+ grid-column: 2/4;
+ grid-row: 3;
+ font-size: 20px;
+ text-align: center;
+ background-color: white;
+ }
+ .year {
+ border: 3px solid #0ed145;
+ grid-column: 4/6;
+ grid-row: 3;
+ font-size: 20px;
+ text-align: center;
+ background-color: white;
+ }
+ .bg {
+ background-color: darkblue;
+ }
+ .title {
+ color: white;
+ }
+ .buy {
+ font-size: 20px;
+ font-style: bold;
+ }
+
+
\ No newline at end of file
diff --git a/Subscription.html b/Subscription.html
new file mode 100644
index 0000000000000000000000000000000000000000..1306a7b185ca1c7a524b96c39589bb8e27bf4c51
--- /dev/null
+++ b/Subscription.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, intial-scale=1.0">
+ <meta http-equiv="X-UA-Compatible" content="ie=edge">
+ <link rel="stylesheet" href="style/main.css">
+ <title>Travel Elect</title>
+</head>
+
+<body class="bg">
+
+ <header>
+ <h1><img class= "logo" src="logo.png" alt="company logo"/>Travel Elect</h1>
+ </header>
+
+ <h1 class="title">Subscription</h1>
+
+ <section class="week">
+ <h2>Weekly Plan</h2>
+ <h3>For occasional travels</h3>
+ <p>Track Carbon Emissions</p>
+ <p>Plan Trips</p>
+ <p>Keep track of past and upcoming trips</p>
+ <p>Generate reports</p>
+ <button class="buy" onclick="document.location='Payment.html'">Buy Now</button>
+ <p>£10</p>
+ </section>
+
+ <section class="month">
+ <h2>Monthly Plan</h2>
+ <h3>For consistent travels </h3>
+ <p>Track Carbon Emissions</p>
+ <p>Plan Trips</p>
+ <p>Keep track of past and upcoming trips</p>
+ <p>Generate reports</p>
+ <button class="buy" onclick="document.location='Payment.html'">Buy Now</button>
+ <p>£35</p>
+ </section>
+
+ <section class="year">
+ <h2>Yearly Plan</h2>
+ <h3>For frequent travels</h3>
+ <p>Track Carbon Emissions</p>
+ <p>Plan Trips</p>
+ <p>Keep track of past and upcoming trips</p>
+ <p>Generate reports</p>
+ <button class="buy" onclick="document.location='Payment.html'">Buy Now</button>
+ <p>£400</p>
+ </section>
+</body>
+</html>
\ No newline at end of file