Initial commit

src/Components/CardWithButton/CardWithButton.css

@@ -0,0 +1,58 @@
+.tile {
+    --bgsize: 7px;
+    --bgoffset: 7px;
+
+    width: 25vw;
+    min-width: 275px;
+    max-width: 300px;
+
+    margin: 0px 10px;
+    padding: 20px 30px;
+
+    border: 1px solid;
+    border-color: var(--mantine-color-contrast-filled);
+    border-radius: var(--paper-radius);
+    transform: translateY(0px);
+    overflow: visible;
+
+    /*Move up on hover*/
+    &:hover {
+        transform: scale(105%);
+    }
+
+    /*Background 45 degree lines */
+    &::before,
+    &::after {
+        border-radius: var(--paper-radius);
+        background-image: linear-gradient(
+            45deg,
+            rgba(255, 255, 255, 0) 33.33%,
+            var(--mantine-color-contrast-filled) 33.33%,
+            var(--mantine-color-contrast-filled) 50%,
+            rgba(255, 255, 255, 0) 50%,
+            rgba(255, 255, 255, 0) 83.33%,
+            var(--mantine-color-contrast-filled) 83.33%,
+            var(--mantine-color-contrast-filled) 100%
+        );
+        content: "";
+        display: block;
+        position: absolute;
+        z-index: -2;
+        top: var(--bgoffset);
+        left: var(--bgoffset);
+        width: 100%;
+        height: 100%;
+        background-size: var(--bgsize) var(--bgsize);
+    }
+    &::before {
+        top: 0px;
+        left: 0px;
+        background: var(--mantine-color-body);
+        z-index: -1;
+    }
+}
+
+/*make it so the button is on bottom of card*/
+.card_text {
+    flex-grow: 1;
+}