<!DOCTYPE html>
<html>
<head>
<style>
* {
    box-sizing: border-box;
}

body {
    font-family: Arial;
    padding: 20px;
    background: #f1f1f1;
}

/* Header/Blog Title */
.header {
    padding: 10px;
    font-size: 20px;
    text-align: center;
    background: #ADD8E6;
	height: 80px;
}

/* Style the top navigation bar */
.topnav {
	overflow: hidden;
	background-color: #036;
}

/* Style the topnav links */
.topnav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

/* Change color on hover */
.topnav a:hover {
    background-color: #ddd;
    color: black;
}

/* Create two unequal columns that floats next to each other */
/* Left column */
/*.leftcolumn {   
    float: left;
	width: 40%;
	margin:0 auto;

}
.centercolumn {   
    float: center;
    width: 35%;
	background-color: #f1f1f1;
    padding-left: 20px;
}


.rightcolumn {
	
    width: 25%;
    background-color: #f1f1f1;
    padding-left: 20px;
	margin:0 auto;
}
/* Left column */
.leftcolumn {   
    float:left;
	width: 100%;
	padding-left: 0px;

}

.rightcolumn {
	float: left;
    width: 25%;
    background-color: #f1f1f1;
    padding-left: 20px;
	margin:0 auto;
}


/* Fake image */
.fakeimg {
    background-color: #aaa;
    width: 100%;
    padding: 20px;
}

/* Add a card effect for articles */
.card {
	background-color: white;
	padding: 20px;
	margin-top: 20px;
}
.cardtroop {
	background-color: white;
	padding: 20px;
	margin-top: 20px;
	height: 645px;
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
	
}

/* Footer */
.footer {
    padding: 5px;
    text-align: center;
    background: #ADD8E6;
    margin-top: 20px;
}

.tablebill {
	width:60%;
	table-layout:auto;
	font-size:12px;
	border-style:double;
	border-collapse:collapse;
}
.tablecomplaint {
	width:30%;
	table-layout:auto;
	font-size:12px;
	border-style:double;
	border-collapse:collapse;
}
	

/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */
@media (max-width: 800px) {
    .leftcolumn, .centercolumn, .rightcolumn {   
        width: 100%;
        padding: 0;
    }
}

/* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */
@media (max-width: 400px) {
    .topnav a {
        float: none;
        width:100%;
    }
}
</style>
</head>
<body>

<div class="header">
  <h2>PHSSB PAYPRO</h2>
</div>

<div class="topnav">
  <a href="UserIndex.html">Dashboard</a>
  <a href="BillReceipt.html">Bill &amp; Receipt</a>
  <a href="UserComplaint.html">Complaint</a>
  <a href="Help.html">Help</a>
  <a href="#" style="float:right">Sign Out</a>
</div>

<div class="row">
  <div class="leftcolumn">
    <div class="cardtroop">
      <h2 align="center">Complaint</h2>
      <h5 align="center">Title description, Feb 13, 2018</h5>
      <br>
   
      <table class="tablecomplaint" border="0" align="center">
  <tr>
    <td><b>Name</b></td>
    <td>:</td>
    <td colspan="2"><input type="text" size="50"></td> 
  </tr>
  <tr>
    <td><b>Unit</b></td>
    <td>:</td>
    <td colspan="2"><input type="text" size="25"></td> 
  </tr>
  <tr>
    <td><b>Contact</b></td>
    <td>:</td>
    <td colspan="2"><input type="tel" size="25"></td> 
  </tr>
  <tr>
    <td><b>Compalaint Details</b></td>
    <td>:</td>
    <td colspan="2"><textarea rows="5" cols="52"></textarea></td> 
  </tr>
  <tr>
    <td align="center">&nbsp;</td>
    <td align="center">&nbsp;</td> 
    <td><button type="button">Submit</button>&nbsp;<button type="reset">Reset</button></td>
  </tr>
  </table>
  </br>
        
      <table class="tablebill" border="1" align="center">
  <tr>
    <td width="5%" bgcolor="#99CCFF"><b>TICKET NO.</b></td>
    <td width="20%" bgcolor="#99CCFF"><b>COMP. DETAILS</b></td>
    <td width="5%" bgcolor="#99CCFF"><b>STATUS</b></td>

  </tr>
  <tr>
    <td>CM00152</td>
    <td>Roofting liking & breaking</td>
    <td>COMPLETE</td>
  </tr>
  <tr>
    <td>CM00155</td>
    <td>Piping stuck & Banjir</td>
    <td>COMPLETE</td>
  </tr>
  <tr>
    <td>CM00160</td>
    <td>Sink rosak</td>
    <td>INPROGRESS</td>
  </tr>
</table>

      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>

      <p><font size="2"><b>Descliamier</b><br>All information and record data is private as user personal. Also the payment made should be printout the hardcopy receipt for you personal record</font></p>
    </div>
   
  </div>
  <!--
  <div class="centercolumn">
    <div class="card">
      <h2>Anouncement & Notice</h2>
      <p>&nbsp;</p>
    </div>
  </div>
  -->

</div>

<div class="footer">
  <h4>Copyright &copy; 2018 PHSSB.com.my | Design: Sayyed_i0</h4>
</div>

</body>
</html>