[Pedagogy] Front comment nearly ended

core/static/core/style.scss

@@ -1673,9 +1673,76 @@ label {
 
 .pedagogy {
   &.star_not_checked {
-    color : gray;
+    color : #f7f7f7;
   }
   &.star_checked {
-    color : orange;
+    color: #ea7900;
   }
 }
+
+#pedagogy {
+  font-family: "Fira Sans";
+  color: #062f38;
+  background-color: #caf0ff;
+  .comment{
+    background-color: #caf0ff;
+    max-width: 100%;
+    max-height: 200px;
+    overflow: hidden;
+    margin-bottom: 40px;
+
+    .grade{
+      height: 200px;
+      float: left;
+      text-align: left;
+      padding: 15px;
+      padding-right: 40px;
+      padding-top: 0px;
+      clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 20%, 75% 0);
+      background-color: #1bb9ea;
+    }
+
+    .dif_grade{
+      background-color: #1bb9ea;
+      color: #f0f0f0;
+      height: 200px;
+      float: left;
+      text-align: right;
+      padding: 15px;
+      padding-top: 0px;
+    }
+
+    .author_info{
+      background-color: #1bb9ea;
+      color: #f0f0f0;
+      text-align: center;
+      width: 50px;
+      padding: 5px;
+      margin: 0px;
+      float: left;
+      padding-right: 50px;
+      clip-path: polygon(0 0, 0 100%, 100% 100%, 75% 0);
+    }
+    .date_info{
+      background-color: #1bb9ea;
+      color: #f0f0f0;
+      float: left;
+      text-align: center;
+      width : 34%;
+      padding: 5px;
+      margin: 0px;
+    }
+
+    .text{
+      height: 125px;
+      margin-top: 0px;
+      margin-right: 0px;
+      padding: 10px;
+      padding-left: 40px;
+      margin-bottom: 29px;
+      overflow: auto;
+      text-align: justify;
+      background-color: #caf0ff;
+    }
+  }  
+}