Trainer Feedback Rating Chart: CSD Cognizant CSS Mandatory Hands-on

index.html

<!DOCTYPE HTML>
<html>
    <head>
        <title>Trainer's Feedback Rating Chart</title>
     <link rel="stylesheet" href="trainerfeedbackchart.css">
    </head>
    <body>
    
      <div class="foot">
        <form>
        
        <h1>Trainer's Feedback Rating Chart</h1>
       
    <table id="chart">
    <caption>Trainer's Name: Elite Parker</caption>       
        <tr class="theader" >
            <th>S.No.</th>
            <th>Training Module Name</th>
                <th>Overall Rating</th>
             <th>Feedback</th>
        </tr>
        <tr class="tr1" >
        <td>1</td>
            <td>HTML5, CSS3, JavaScript</td>
            <td>5</td>
            <td id="ex1" >Excellent</td>
            
        </tr>
        <tr class="tr2">
        <td>2</td>
            <td>Basic Java Programming</td>
            <td>4</td>
             <td id="vg1">Very Good</td>
        </tr>
        <tr class="tr1">
        <td>3</td>
            <td>Advanced Java Programming</td>
            <td>3</td>
             <td id="go1">Good</td>
        </tr>
         <tr class="tr2">
        <td>4</td>
            <td>UNIX Shell Scripting</td>
            <td>2</td>
             <td id="av1">Average</td>
        </tr>
         <tr class="tr1">
        <td>5</td>
            <td>Python Programming</td>
            <td>1</td>
             <td id="ba1" >Below Average</td>
        </tr>
    </table>
   
          </form>
        </div> 
      
    </body>
</html>

style.css

 h1{
      
    /* Wrtie code for css values here */      
     text-align: center;
     color: #FF00FF;
     font-style: italic;
 }

 table{
  
     /* Wrtie code for css values here */ 
     text-align: left;
     margin-left:35%;
     background-color: #F0F0F0;

 }
 
 td{
    /* Wrtie code for css values here */ 
    text-align: center;
 
 }
 
 caption {
 
  /* Wrtie code for css values here */ 
  text-align: left;
  font-weight: bold;
 
 }
 
 
 .theader {
 
  /* Wrtie code for css values here */ 
  background-color: #800000;
  color: #ffffff;
 }
 
 .tr1{
     
  /* Wrtie code for css values here */ 
    background-color:  #ff0080;
     
 }
 .tr2{
     
  /* Wrtie code for css values here */ 
    background-color: #00ffff;
     
 }
 
 #ex1, #vg1{
     
  /* Wrtie code for css values here */ 
    background-color: #00ff00;
     
 }
 
 #go1{
     
     /* Wrtie code for css values here */ 
    background-color: #ffff00;
     
 }
 
 #av1{
     
  /* Wrtie code for css values here */ 
    background-color: #d3d3d3;
    color: #ffffff;
     
 }
 
  #ba1{
      
    /* Wrtie code for css values here */ 
      background-color: #ff0000;
      color: #ffffff;
  }

 

Comments

Post a Comment

Popular posts from this blog

Feed-Back Details: CTS CSD JS Mandatory Hands-on 3

Bill Calculator: CTS CSD JS MANDATORY HANDS-ON 3