Accomplishments updated.

app.js

@@ -36,9 +36,11 @@ app.post("/",async function(req,res){
     console.log(err);
   }
 });
+
 app.get("/home",function(req,res){
   res.render("home");
 });
+
 app.get("/achievements",function(req,res){
 res.render("achievements");
 

public/css/styles.css

@@ -38,3 +38,7 @@ html {
 	font-size: 12px;
   color: #fff;
 }
+
+.gold-image {
+  background-image: url("https://5.imimg.com/data5/RU/UJ/MY-17868609/school-gold-medal-500x500.jpg");
+}

views/achievements.ejs

@@ -29,23 +29,25 @@ jQuery(function () {
     <div class="row">
       <div class="col-lg-4">
         <svg class="bd-placeholder-img rounded-circle" width="140" height="140" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 140x140"><title>Placeholder</title><rect width="100%" height="100%" fill="#777"/><text x="50%" y="50%" fill="#777" dy=".3em">140x140</text></svg>
-        <h2>Achivement[1]</h2>
-        <p>Congratulation! your current month electricity consumption is less than the previous month's electricity consumption. </p>
-        <p>   Points:50</p>
+        <h2>GOLD</h2>
+        <p>Congratulations... <br> You've done a great job! <br> you have been placed among 20 least electricity consumers.</p>
+        <p>Points:50</p>
         <p><a class="btn btn-secondary" href="#" role="button" class=".jtable-command-button.jtable-edit-command-button">Collect Points &raquo;</a></p>
       </div><!-- /.col-lg-4 -->
+
       <div class="col-lg-4">
         <svg class="bd-placeholder-img rounded-circle" width="140" height="140" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 140x140"><title>Placeholder</title><rect width="100%" height="100%" fill="#777"/><text x="50%" y="50%" fill="#777" dy=".3em">140x140</text></svg>
-        <h2>Achivement[2]</h2>
-        <p>Congratulation! your current month electricity consumption is less than the average of all previous month's electricity consumption.</p>
-         <p>   Points:50</p>
+        <h2>SILVER</h2>
+        <p>Congratulations... <br> You've done a great job! <br> your current month electricity consumption is less than the average of all previous month's electricity consumption.</p>
+         <p>Points:50</p>
         <p class=".jtable-command-button.jtable-edit-command-button"><a class="btn btn-secondary" href="#" role="button" >Collect Points &raquo;</a></p>
       </div><!-- /.col-lg-4 -->
+
       <div class="col-lg-4">
         <svg class="bd-placeholder-img rounded-circle" width="140" height="140" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 140x140"><title>Placeholder</title><rect width="100%" height="100%" fill="#777"/><text x="50%" y="50%" fill="#777" dy=".3em">140x140</text></svg>
-        <h2>Achivement[3]</h2>
-        <p>Congratulation! you have been placed under top 20 rank in electricity consumption.</p>
-        <p>   Points:50</p>
+        <h2>BRONZE</h2>
+        <p>Congratulations...<br> You've done a great job! <br> your current month electricity consumption is less than the previous month's electricity consumption. </p>
+        <p> Points:50 </p>    
         <p><a class="btn btn-secondary" class=".jtable-command-button.jtable-edit-command-button" href="#" role="button">Collect Points &raquo;</a></p>
       </div><!-- /.col-lg-4 -->
     </div><!-- /.row -->