<!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: 60%;
	padding-left: 290px;

}

.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;
}

/* 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>Help</h2>
      <h5>Title description, Feb 13, 2018</h5>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>Descliamier</p>
      <p>All information and record data is private as user personal. Also the payment made should be printout the hardcopy receipt for you personal record</p>
    </div>
   
  </div>
  <!--
  <div class="centercolumn">
    <div class="card">
      <h2>Anouncement & Notice</h2>
      <p>&nbsp;</p>
    </div>
  </div>
  -->

  <div class="rightcolumn">
    <div class="card">
      <h2>Account Details</h2>
      <div class="fakeimg" style="height:130px; width:130px" align="center">Passport Picture</div>
      <p>Name     :</p>
      <p>No I/C   :</p>
      <p>Unit No  :</p>
      <p>Phone No :</p>
    </div>
    <div class="card">
      <h3>Notice Alert</h3>
      <p>Notice Rental   : <em>Not Avialable</em>..</p>
      <p>Notice Water    : <em>Not Avialable</em>..</p>
      <p>Notice Electric : <em>Not Avialable</em>..</p>
      <p>Others Notice   : <em>Not Avialable</em>..</p>
    </div>
  </div>
</div>

<div class="footer">
  <h4>Copyright &copy; 2018 PHSSB.com.my | Design: Sayyed_i0</h4>
</div>

</body>
</html>