passenger details

src/app/app-routing.module.ts

@@ -2,7 +2,7 @@ import { NgModule } from '@angular/core';
 import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
 
 const routes: Routes = [
-  { path: '', redirectTo: 'home', pathMatch: 'full' },
+  { path: '', redirectTo: 'passengerdetails', pathMatch: 'full' },
   { path: 'home', loadChildren: () => import('./home/home.module').then( m => m.HomePageModule)},
   {
     path: 'policies',

src/app/passengerdetails/passengerdetails.page.html

 <ion-header>
-  <ion-grid>
-    <ion-row>
-      <ion-col size="1">
+  <ion-grid class="no-padding">
+    <ion-row class="no-padding">
+      <ion-col size="1" class="no-padding">
         <img src="assets/arrow-left.png">
       </ion-col>
-      <ion-col size="11">
+      <ion-col size="11" class="no-padding">
         <h1>Checkout</h1>
       </ion-col>
     </ion-row>
   </ion-grid>
 </ion-header>
 
-<ion-content padding>
+<ion-content>
 
-  <h1>Passenger Details</h1>
   
-  <ion-grid>
-    <ion-row>
-      <ion-col size="5">
+
+  <ion-grid padding>
+      <h1>Passenger Details</h1>
+    <ion-row class="no-padding">
+      <ion-col size="5" class="no-padding">
         <h2>Name</h2>
         <p>John Dawson</p>
       </ion-col>
-      <ion-col size="2">
+      <ion-col size="2" class="no-padding">
         <h2>Age</h2>
         <p>24</p>
       </ion-col>
-      <ion-col size="5">
+      <ion-col size="5" class="no-padding">
         <h2>Phone Number</h2>
         <p>03360333421</p>
       </ion-col>
     </ion-row>
   </ion-grid>
 
-  <img src="assets/line.png" alt="Line">
+  <img src="assets/line.png" class="line-img" alt="Line">
 
-  <div class="brd-details">
+  <div class="brd-details" padding>
     <h1>Boarding Details</h1>
 
     <table>
@@ -90,5 +91,37 @@
     <p>1 Item(s), Total: <span>Rs. 2,370</span></p>
   </div>
 
+  <div class="voucher-s">
+    <div class="head clearfix">
+      <h1>Subtotal</h1>
+      <h2>Rs 2,200</h2>
+    </div>
+    <ion-row class="no-padding">
+      <ion-col size="8" class="no-padding">
+        <input type="text" placeholder="Enter Voucher Code">
+      </ion-col>
+      <ion-col size="4" class="no-padding">
+        <button>APPLY</button>
+      </ion-col>
+    </ion-row>
+    <form>
+
+    </form>
+  </div>
+  
 
 </ion-content>
+
+<ion-footer>
+  <ion-grid>
+    <ion-row>
+      <ion-col size="7">
+        <h1>Total: <span>Rs. 2,370</span></h1>
+        <p>VAT included, where applicable</p>
+      </ion-col>
+      <ion-col size="5">
+        <button>Proceed to Pay</button>
+      </ion-col>
+    </ion-row>
+  </ion-grid>
+</ion-footer>

src/app/passengerdetails/passengerdetails.page.scss

+
+
 ion-header {
-  padding: 0 16px;
+  padding: 16px 12px;
 
   &:after {
     content: none;
@@ -32,6 +34,9 @@ ion-content {
     margin-top: 0;
     color: #4C4C4C;
   }
+  .line-img {
+    width: 100%;
+  }
   .brd-details {
     margin-top: 20px;
 
@@ -50,11 +55,12 @@ ion-content {
   
   .item-box {
     margin-top: 25px;
-    padding: 15px 0;
+    padding: 15px 16px;
     text-align: right;
     border-top: 1px solid #dadada;
 
     p{
+      margin: 0;
 
       span {
         font-size: 18px;
@@ -63,4 +69,74 @@ ion-content {
       }
     }
   }
+
+  .voucher-s {
+    padding: 16px 16px;
+    border-top: 8px solid #EDEDED;
+    border-bottom: 8px solid #EDEDED;
+
+    .head {
+
+      h1 {
+        float: left;
+        font-weight: 300;
+      }
+      h2 {
+        float: right;
+        font-size: 18px;
+        font-weight: 900;
+      }
+    }
+    input {
+      border: 1px solid #999;
+      padding: 10px;
+    }
+    button {
+      background-color: #EBEBEB;
+      padding: 14px 20px;
+      width: 100%;
+      margin-left: 5px;
+    }
+  }
+}
+
+ion-footer {
+
+  box-shadow: 0px -4px 5px 0px rgba(0, 0, 0, 0.15);
+
+  h1 {
+    font-size: 20px;
+    margin: 0;
+
+    span {
+      color: #EC3A1C;
+      font-size: 24px;
+      font-weight: 900;
+    }
+  }
+  p {
+    margin-top: 3px;
+    font-size: 14px;
+    margin-bottom: 0;
+    color: #B1B1B1;
+  }
+  button {
+    background-color: #F26A21;
+    color: #fff;
+    padding: 15px;
+    width: 100%;
+    border-radius: 10px;
+    font-size: 16px;
+  }
+}
+
+.clearfix {
+  &::after {
+    display: block;
+    content: "";
+    clear: both;
+  }
+}
+.no-padding {
+  padding: 0;
 }