---
# System prepended metadata

title: <center>Maintenace Records</center>

---

# <center>Maintenace Records</center>

In command line type.
`ionic start maintenaceRecords blank --type=angular`
`cd maintenaceRecords`
`ionic serve`

Edit `home.page.html`.
```htmlmixed=
<ion-header>
  <div class="header">

    <div class="topleft">
      <img src="assets/icon/rectangle_2@3x.png" height="40px" width="76px">
    </div>

    <div class="topright">
      <img src="assets/icon/rectangle@3x.png" 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>
  <p class="Month">February</p>

  <ion-item>
    <ion-avatar>
      <ion-label class="ion-text-center">
        <p>20</p>
        <img src="assets/icon/rectangle_3@3x.png">
      </ion-label>
    </ion-avatar>
    <ion-label>
      <h4>Problem name</h4>
      <p>Repair note</p>
    </ion-label>
    <ion-icon name="arrow-forward"></ion-icon>
  </ion-item>
  <ion-item>
    <ion-avatar>
      <ion-label class="ion-text-center">
        <p>20</p>
        <img src="assets/icon/rectangle_3@3x.png">
      </ion-label>
    </ion-avatar>
    <ion-label>
      <h4>Unable to water</h4>
      <p>Water level device fault update</p>
    </ion-label>
    <ion-icon name="arrow-forward"></ion-icon>
  </ion-item>
  <p class="Month">January</p>
  <ion-item>
    <ion-avatar>
      <ion-label class="ion-text-center">
        <p>20</p>
        <img src="assets/icon/rectangle_3@3x.png">
      </ion-label>
    </ion-avatar>
    <ion-label>
      <h4>Unable to water</h4>
      <p>Water level device fault update</p>
    </ion-label>
    <ion-icon name="arrow-forward"></ion-icon>
  </ion-item>
  <ion-item>
    <ion-avatar>
      <ion-label class="ion-text-center">
        <p>20</p>
        <img src="assets/icon/rectangle_3@3x.png">
      </ion-label>
    </ion-avatar>
    <ion-label>
      <h4>Unable to water</h4>
      <p>Water level device fault update</p>
    </ion-label>
    <ion-icon name="arrow-forward"></ion-icon>
  </ion-item>
  <ion-item>
    <ion-avatar>
      <ion-label class="ion-text-center">
        <p>20</p>
        <img src="assets/icon/rectangle_3@3x.png">
      </ion-label>
    </ion-avatar>
    <ion-label>
      <h4>Unable to water</h4>
      <p>Water level device fault update</p>
    </ion-label>
    <ion-icon name="arrow-forward"></ion-icon>
  </ion-item>

</ion-content>
```

Edit `home.page.scss`.
```css=
.header {
    position: relative;
    background: gray;
    height: 194px;
    width: 100%;
}

.topleft {
    position: absolute;
    top: 16px;
    left: 33px;
}

.topright {
    position: absolute;
    top: 16px;
    right: 33px;
}

.center {
    position: absolute;
    left: 0;
    top: 30%;
    width: 100%;
    text-align: center;
}

.Text {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.13;
    letter-spacing: normal;
    color: #ffffff;
}

ion-label {
    padding-left: 20px;

}

ion-item {
    padding: 10px;
}

.Month {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 16px;
    font-weight: bold;
    font-style: normal;
    font-stretch: normal;
    letter-spacing: normal;
    color: #4a4a4a;
    padding-left: 20px;
}
```
## Result
![](https://imgur.com![](https://imgur.com/W8wDIqS.jpg)


## Note
+ Background image is being asked to yuyuch
+ API is being created by Johnny, so the display is still not dynamic