# <center> User Interface of Report Problem Page</center>

## Preparation
Type
`ionic start reportProb blank --type=angular`

## Code

html

<ion-header>
  <div class="header">

    <div class="topleft">
      <img src="assets/icon/[e-mail]" height="40px" width="76px">
    </div>

    <div class="topright">
      <img src="assets/icon/[e-mail]" height="30px" width="30px">
    </div>

    <div class="center">
      <img src="assets/icon/group-6.png" height="54px" width="54px">
      <p class="Text">Maintenace records</p>
    </div>

  </div>

</ion-header>

<ion-content>
  <ion-list>
    <ion-item *ngFor="let entry of form">
      <ion-checkbox slot="start" color="medium"></ion-checkbox>
      <ion-label>{{entry.val}}</ion-label>
    </ion-item>
    <ion-item>
      <ion-checkbox slot="start" color="medium"></ion-checkbox>
      <ion-label>Other</ion-label>
      <ion-input></ion-input>
    </ion-item>
    <ion-button expand="block">Block Button</ion-button>
    <ion-item>
      <ion-checkbox slot="start" mode="ios" color="medium"></ion-checkbox>
      <ion-label>Tell me when the repair is complete</ion-label>
    </ion-item>
  </ion-list>
</ion-content>

CSS is same

## Result

### Note
Still need improvment to make it same