result block integration

natho19 · Jun 27, 2023 · ee70893 · ee70893
1 parent 1d3c6a0
commit ee70893
Showing 1 changed file with 68 additions and 0 deletions.
diff --git a/002-results-summary-component/assets/css/style.css b/002-results-summary-component/assets/css/style.css
@@ -40,10 +40,78 @@ body {
  font-size: 16px;
  font-weight: 500;
  background-color: var(--white);
+ color: var(--dark-navy);
 }
 
 /* Base */
+h1,
+h2,
+h3,
+p {
+ margin: 0;
+}
+
+h1,
+h2,
+h3 {
+ font-weight: 700;
+}
+
+/* Main */
 
 /* Result */
 
+.result {
+ padding: 24px;
+ border-radius: 0px 0px 32px 32px;
+ background: var(--gradient-1);
+ box-shadow: 0px 30px 60px 0px rgba(61, 108, 236, 0.15);
+ color: var(--light-blue);
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ text-align: center;
+}
+
+.result--title {
+ margin-bottom: 24px;
+ font-size: 18px;
+ text-transform: capitalize;
+}
+
+.result--score {
+ width: 140px;
+ height: 140px;
+ border-radius: 50%;
+ background: var(--gradient-2);
+ flex-shrink: 0;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ margin-bottom: 24px;
+}
+
+.result--score strong {
+ font-size: 56px;
+ font-weight: 800;
+ line-height: 72px;
+ color: var(--white);
+}
+
+.result--score span {
+ font-weight: 700;
+ opacity: 0.5;
+}
+
+.result--mention {
+ color: var(--white);
+ font-size: 24px;
+ margin-bottom: 8px;
+}
+
+.result--description {
+ max-width: 260px;
+ flex-shrink: 0;
+ margin-bottom: 16px;
+}
 /* Summary */