Added projects section

static/assets/css/style.css

@@ -21,12 +21,12 @@ body {
 .pagehead-inner {
     position: inherit;
     margin: 0;
-    width: 456px;
-    height: 600px;
+    width: 24%;
+    height: 55vh;
     top: 50%;
     left: 50%;
-    margin-left: -228px;
-    margin-top: -300px;
+    margin-left: -12%;
+    margin-top: -27vh;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -53,6 +53,8 @@ body {
     background: #222;
     color: white;
     border-radius: 15px;
+    border: none;
+    outline: none;
 }
 
 .btn-container button:hover {
@@ -62,6 +64,11 @@ body {
     color: green;
 }
 
+.btn-container button:active {
+    transform: scale(0.8);
+    -webkit-transition: transform 0.2s ease-in-out;
+}
+
 .mainh {
     color: white;
     font-family: "Overpass Mono", monospace;
@@ -69,4 +76,64 @@ body {
     margin: 0;
 }
 
+.pagebody {
+    width: 100%;
+    height: 100vh;
+    position: relative;
+    background: #222;
+    display: flex;
+    flex-direction: column;
+    margin: 0;
+}
+
+.pagebody-inner-section {
+    margin-top: 100px; margin-left: 300px;
+}
+
+.pagebody-inner-section > h1 {
+    color: white;
+    font-family: "Overpass Mono", monospace;
+    font-weight: 700;
+}
+
+.project-container {
+    position: inherit;
+    display: flex;
+    flex-direction: column;
+}
+
+.project-container-row {
+    display: flex;
+    position: inherit;
+    flex-direction: row;
+}
+
+.project-element {
+    position: inherit;
+    width: 300px;
+    margin-right: 70px;
+    display: flex;
+    flex-direction: column;
+}
+
+.project-element > h1 {
+    color: white;
+    font-family: "Overpass Mono", monospace;
+    font-weight: 700;
+    margin: 0;
+}
+
+.project-element  > p {
+    color: white;
+    font-family: "Overpass Mono", monospace;
+    font-weight: 400;
+    margin: 0;
+}
+
+.project-element > img {
+    background: #222;
+    margin-top: 20px;
+    margin-bottom: 20px;
+}
+
 .