- further views: help-view.component, oai-view-component

- new .card header images

src/assets/scss/main-styles.scss

@@ -399,3 +399,79 @@ svg,
 .navbar-item img {
     max-height: 6rem;
 }
+
+
+
+
+.card {
+    position: relative;  
+    display: flex;  
+    flex-direction: column;
+    min-width: 0;
+    word-wrap: break-word;
+    background-color: #fff;
+    background-clip: border-box;
+    border: 1px solid rgba(0, 0, 0, 0.125);
+    border-radius: 0.25rem;
+}
+
+.card-body {
+    -webkit-box-flex: 1;
+    -ms-flex: 1 1 auto;
+    flex: 1 1 auto;
+    padding: 1rem 1rem;
+}
+
+.text-white {
+    color: #fff !important;
+}
+
+// .work-front {
+//     position: absolute;
+//     top: 5%;
+//     left: 5%;
+// }
+.work-front {
+    display: flex;
+}
+.work-front .box-1,
+.work-front .box-2,
+.work-front .box-3 {
+    position: absolute;
+    top: 85%;
+    left: 50%;
+    -webkit-transform: translate(-50%, -50%);
+    transform: translate(-50%, -50%);
+}
+
+// .work-back {
+//     position: absolute;
+//     top: 5%;
+//     left: 5%;
+// }
+.work-back {
+    display: none;
+}
+.work-back .box-1-hover {
+    position: absolute;
+    top: 5%;
+    left: 5%;
+    opacity: 0.9;
+    padding: 2%;
+}
+
+.custom-heading {
+    font-family: Verdana;
+    font-weight: bold;
+    font-size: 1.2em;
+    line-height: 1.9em;
+    color: #fff;
+}
+
+.work-items div:hover .work-back {
+    display: flex;
+    /* box-shadow: inset 0 0 0 10px #222; */
+}
+.work-items div:hover .work-front {
+    display: none;
+}