certificate-redesign

community/public/css/style.css

@@ -1390,29 +1390,30 @@ pre {
   display: none;
 }
 
-.certificate-page .common-card-style {
-  color: black;
-  font-size: 1.25rem;
-}
-
 .certificate-content {
-  padding: 5rem 9rem;
+  padding: 2.5rem 3rem;
 }
 
 .certificate-footer {
-  margin-bottom: 4rem;
+  margin-top: 4.5rem;
+  display: flex;
+}
+
+.certificate-footer-item {
+  margin-right: 3.5rem;
 }
 
 .certificate-ribbon {
   background-color: var(--primary-color);
-  margin-right: 3rem;
+  margin-left: auto;
-  width: 5%;
+  margin-right: 2.5rem;
+  width: 4.5rem;
 }
 
 .certificate-heading {
   font-size: 3rem;
-  margin-bottom: 3rem;
+  font-weight: 500;
-  font-weight: bold;
+  color: var(--text-color);
 }
 
 .certificate-para {
@@ -1420,13 +1421,7 @@ pre {
 }
 
 .certificate-logo {
-  height: 30px;
+  height: 20px;
-}
-
-@media (max-width: 1024px) {
-  .certificate-content {
-    padding: 3rem 5rem;
-  }
 }
 
 @media (max-width: 768px) {
@@ -1435,22 +1430,27 @@ pre {
   }
 }
 
-@media (max-width: 500px) {
+@media (max-width: 550px) {
-  .certificate-page .common-card-style {
+  .certificate-footer {
-    font-size: 1rem;
+    flex-direction: column;
   }
-  .certificate-content {
+
-    padding: 3rem;
+  .certificate-footer-item {
-  }
+    margin-bottom: 1rem;
-  .certificate-ribbon {
-    background-color: var(--primary-color);
-    margin-right: 2rem;
-    width: 20%;
   }
 }
 
-@media (max-width: 375px) {
+@media (max-width: 500px) {
+  .certificate-heading {
+    font-size: 1.5rem;
+  }
+
   .certificate-content {
-    padding: 2rem;
+    padding: 2.5rem 2rem;
+  }
+
+  .certificate-ribbon {
+    margin-right: 1rem;
+    width: 1.5rem;
   }
 }

community/templates/certificate.html

@@ -1,36 +1,48 @@
 <div class="common-card-style">
   <div class="certificate-content">
-    <div class="certificate-heading">
-      Certificate of Completion
-    </div>
-    <div class="certificate-para">
-      This is to certify that <span class="font-weight-bold">{{ student.full_name }}</span> has successfully completed
-      <span class="font-weight-bold">{{ course.title }}</span> online course on
-      <span class="font-weight-bold">{{ frappe.utils.format_date(certificate.issue_date, "medium") }}</span>
-    </div>
-    <div class="certificate-footer">
-      {% if instructor %}
-      <div>
-        <span>
-          Instructor:
-        </span>
-        <span class="font-weight-bold">
-          {{ instructor.full_name }}
-        </span>
-      </div>
-      {% endif %}
-      {% if certificate.expiry_date %}
-      <div>
-        <span>
-          Expiry Date:
-        </span>
-        <span class="font-weight-bold">
-          {{ frappe.utils.format_date(certificate.expiry_date, "medium") }}
-        </span>
-      </div>
-      {% endif %}
-    </div>
     <img src="{{ logo }}" class="certificate-logo">
+    <div class="text-muted mt-18">
+      Completion Certificate
+    </div>
+    <div class="certificate-heading"> {{ course.title }} </div>
+    <div class="text-muted mt-18"> Awarded To </div>
+    <div class="certificate-heading"> {{ student.full_name }} </div> 
+
+    <div class="certificate-footer">
+      {% if certificate.issue_date %}
+      <div class="certificate-footer-item">
+        <div class="font-weight-bold">
+          {{ frappe.utils.format_date(certificate.issue_date, "medium") }}
+        </div>
+        <div>
+          Issue date
+        </div>
+      </div>
+      {% endif %}
+
+      {% if certificate.expiry_date %}
+      <div class="certificate-footer-item">
+        <div class="font-weight-bold">
+          {{ frappe.utils.format_date(certificate.expiry_date, "medium") }}
+        </div>
+        <div>
+          Expiry date
+        </div>
+      </div>
+      {% endif %}
+
+      {% if instructor.full_name %}
+      <div class="certificate-footer-item">
+        <div class="font-weight-bold">
+        {{ instructor.full_name }}
+        </div>
+        <div>
+          Instructor
+        </div>
+      </div>
+      {% endif %}
+
+    </div>
   </div>
   <div class="certificate-ribbon"></div>
 </div>