add format for grid container and grid items

Author: Daniel1000c

css/style.css

@@ -27,6 +27,11 @@
     font-family: 'Quicksand-VariableFont_wght';
     src: url(../fonts/Quicksand-VariableFont_wght.ttf);
 }
+
+@font-face {
+    font-family: 'CreteRound-Regular';
+    src: url(../fonts/CreteRound-Regular.ttf);
+}
 /************End of Font face Formatting************/
 
 /************Root Formatting************/
@@ -35,8 +40,10 @@
     --primary-font-size: 6.5em;/*Primary font size*/
     --secondary-round-font: 'Quicksand-VariableFont_wght';/*Font family for h2 tags*/
     --second-font-size: 4em;/*Second font size for h2 tags*/
+    --card-title-font-family: 'CreteRound-Regular';/*Font family for h3 tags in project item titles*/
+    --card-font-size: 4em;/*Font size for h3 tags in project item titles*/
     --footer-font-family: monospace;;
-    --footer-font-size: 3em;/*Font size for footer*/
+    --footer-font-size: 2em;/*Font size for footer*/
 }
 /************End of Root Formatting************/
 
@@ -76,6 +83,61 @@ section h2 {
     font-family: var(--secondary-round-font);
     font-size: var(--second-font-size);
 }
+
+/**Project section Formatting**/
+/*Format Project Grid*/
+.projectGrid {
+    display: grid;
+    grid-template-columns: 1fr;/*Create a 1 column grid*/
+    gap: 20px;
+    padding: 15px;
+}
+
+/*Format Project Grid Items*/
+.projectGridItem {
+    background-image: url(../images/darkcardbg.jpg);
+    background-size: cover;
+    background-position: center;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    margin: auto;
+    width: 75%;
+    border-radius: 10px;
+    padding: 50px;
+}
+
+/*Format Project Grid Item Images*/
+.projectGridItem img {
+    width: 100%;
+    padding: 20px;
+    border-radius: 15px;
+}
+
+/*Format Project Grid Item Titles*/
+.projectGridItem h3 {
+    font-family: var(--card-title-font-family);
+    font-size: var(--card-font-size);
+    color: white;
+    padding: 20px;
+}
+
+/*Format project grid item buttons*/
+.projectGridItem a {
+    margin-top: 10px;
+    background-color: #f5f5f5;
+    font-size: 4.5em;
+    padding: 30px;
+    color: black;
+    text-decoration: none;
+    font-weight: bolder;
+    font-family: sans-serif;
+    text-transform: uppercase;
+    display: inline-block;
+    width: 80%;
+    border-radius: 10px;
+}
 /************End of Section Formatting************/
 
 /************Footer Formatting************/