Style StaySafe Cards

Author: PrinceSumberia

src/components/Cards.js

@@ -5,8 +5,8 @@ import styles from "../styles/CardsStyles";
 function Cards({ title, src, classes }) {
   return (
     <div className={classes.card}>
-      <h1>{title}</h1>
-      <img src={src} alt={title} />
+      <h3 className={classes.cardTitle}>{title}</h3>
+      <img src={src} alt={title} className={classes.cardImage} />
     </div>
   );
 }

src/components/Navbar.js

@@ -54,7 +54,7 @@ class Navbar extends Component {
             >
               <div className={classes.iconBox}>
                 <FontAwesomeIcon icon={faFlask} className={classes.icons} />
-                <p>Test Yourself</p>
+                <p>Prevention</p>
               </div>
             </NavLink>
           </li>

src/styles/CardsStyles.js

@@ -1,7 +1,31 @@
 export default {
   card: {
-    width: "100%",
-    flex: "0 0 25%",
-    padding: "2rem",
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
+    alignItems: "center",
+    flex: "0 0 20%",
+    padding: "3rem 4rem",
+    backgroundColor: "#fff",
+    marginBottom: "7rem",
+    transition: "all .5s",
+    boxShadow: `0 1px 2.3px -50px rgba(0, 0, 0, 0.014),
+  0 2.3px 5.6px -50px rgba(0, 0, 0, 0.02),
+  0 4.4px 10.5px -50px rgba(0, 0, 0, 0.025),
+  0 7.8px 18.8px -50px rgba(0, 0, 0, 0.03),
+  0 14.6px 35.1px -50px rgba(0, 0, 0, 0.036),
+  0 35px 84px -50px rgba(0, 0, 0, 0.05)`,
+
+    "&:hover": {
+      transform: "scale(1.05)",
+    },
+  },
+
+  cardTitle: {
+    textTransform: "capitalize",
+  },
+  cardImage: {
+    display: "block",
+    backgroundSize: "cover",
   },
 };

src/styles/StaySafeStyles.js

@@ -8,8 +8,9 @@ export default {
   },
   cardsBox: {
     display: "flex",
+    width: "100%",
     flexWrap: "wrap",
-    justifyContent: "center",
-    alignItems: "center",
+    justifyContent: "space-around",
+    alignItems: "stretch",
   },
 };