Create Bio- Data of an employee.

HTML CodeTry it

<!-- Create Bio- Data of an employee. -->

<body>
   <div class="book">
      <div>
         <div class="page">
            <table class="table">
               <tr>
                  <th colspan="3">EMPLOYEE BIO-DATA</th>
               </tr>
               <tr>
                  <td colspan="2">
                     <span class="item">Name: - </span>___________________<br />
                     <span class="item">Phone: - </span>___________________<br />
                     <span class="item">Mobile: - </span>+91 ___________________<br />
                     <span class="item">E-mail: - </span>___________________<br />
                     <span class="item">Date of Birth: - </span>DD: ___ MM: _____ YY: _______<br />
                  </td>
                  <th>Picture</th>
               </tr>
               <tr>
                  <td colspan="3">
                     <span>Address: - </span>__________________________________________________<br />
                     ______________________________________________________________<br />
                     ______________________________________________________________<br />
                  </td>
               </tr>
               <tr>
                  <td>
                     <span>Employment: - </span>
                  </td>
                  <td>
                     <input type="radio" id="full" name="employement" />
                     <label for="full">Full Time</label>
                  </td>
                  <td>
                     <input type="radio" id="part" name="employement" />
                     <label for="part">Part Time</label>
                  </td>
               </tr>
               <tr>
                  <th colspan="3">Payment System</th>
               </tr>
               <tr>
                  <td colspan="3">
                     <span>Account Name: - </span>_____________________________
                  </td>
               </tr>
               <tr>
                  <td colspan="3">
                     <span>Branch: - </span>____________________________
                  </td>
               </tr>
               <tr>
                  <td colspan="3">
                     <span>Account Number: - </span>_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 
                  </td>
               </tr>
               <tr>
                  <th colspan="3">Salary</th>
               </tr>
               <tr>
                  <td colspan="3">
                     <span>Hourly Rate (Gross): $</span>_____________
                  </td>
               </tr>
               <tr>
                  <td colspan="3">
                     <span>Standard working hours: - </span>____ _____
                  </td>
               </tr>
               <tr>
                  <th colspan="3">Emergency Contact Details</th>
               </tr>
               <tr>
                  <td colspan="3">
                     <span>Emergency Contact Name: - </span>___________________________
                  </td>
               </tr>
               <tr>
                  <td colspan="3">
                     <span>Relationship: - </span>____________________________
                  </td>
               </tr>
               <tr>
                  <td colspan="3">
                     <span>Telephone Number: - </span>_ _ _ _ - _ _ _ _ _ _
                  </td>
               </tr>
               <tr>
                  <td colspan="3">
                     <span>Mobile Number: - </span>_ _ _ _ _ - _ _ _ _ _
                  </td>
               </tr>
            </table>
         </div>
      </div>
   </div>
</body>

CSS CodeTry it

body{
   display: flex;
   background-color: white;
   justify-content: center;
   align-items: center;
}
.book{
   width: 700px;
   padding-left: 10px;
   margin-left: 10px;
   background-color:rgb(220,220,220);
}
.page{
   border-left-style: dotted;
   border-width: 15px;
   border-color:white;
   height:fit-content;
}
.table{
   width: 100%;
   height: 100%;
   padding: 10px;
}
.table tr th, .table tr td{
   border: 1px solid black;
   padding: 10px;
}
.table tr th{
   font-size: 18px;
}
.table tr th span, .table tr td span{
   padding: 20px 10px;
   font-size: 16px;
   font-weight: bold;
}

OutputTry it

Comments

Popular posts from this blog

PHP Code to print first 10 Fibonacci Numbers

Create a simple HTML page to demonstrate the use of different tags

Use Tables to provide layout to your web page.