Update Front-End

src/css/style.scss

@@ -9,23 +9,65 @@ $secondary-color: rgb(143, 188, 143);
 $font-titels: "Akaya Kanadaka", system-ui;
 $font-text: "Afacad", sans-serif;
 
-/* The Main container and border*/
+@mixin flexbox
+{
+    display: flex;
+    justify-content: space-around;
+}
+
+@mixin groene-border
+{
+    border: solid 2px $primary-color;
+}
+
+@mixin box-shadow
+{
+    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
+}
+
+@mixin border-radius
+{
+    border-radius: 40px;
+}
+
+h1, h2, h3, h4, h5
+{
+    font-family: $font-titels;
+    margin: 0;
+}
+
+p, td
+{
+    font-family: $font-text;
+}
+
 body
 {
     background-image: url("../images/achtergrond.png");
     background-repeat: no-repeat;
     background-size: cover;
-    font-family: $font-text;
+    background-position: center;
-}
+    // font-family: $font-text;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    margin: 0; 
 
     .mainContainer 
     {
-    margin: 2rem;
+        width: 85vw;
         height: 38rem;
         background-color: rgb(255, 255, 255, 95%);
         border-radius: 40px;
         padding: 2rem;
 
+        .informatie-kas-main-container
+        {
+            display: grid;
+            grid-template-columns: 5fr 7fr;
+        }
+
         .mainBorder 
         {
             padding: 1rem 0;
@@ -33,6 +75,53 @@ body
             border: solid 5px $primary-color;
             border-radius: 40px;
 
+            #sectie-1
+            {
+                h1
+                {
+                    background-color: green;
+                }
+
+                .parent-algemeen-overzicht
+                {
+                    @include box-shadow;
+                    @include border-radius;
+                    padding: 1rem;
+
+                    .algemeen-overzicht
+                    {
+                        @include groene-border;
+                        @include border-radius;
+                        font-size: 1.25rem;
+                        padding: 1rem;
+                        background-color: red;
+
+                        .table-informatie-kas
+                        {
+                            width: 100%;
+
+                            .tr-informatie-kas
+                            {
+                                display: flex;
+                                justify-content: space-between;
+                                text-align: left;
+                            }
+
+                        //     .tr-informatie-kas > :last-child
+                        //     {
+                        //         text-align: center; /* Centers the numbers */
+                        //         flex: 1; /* Allows it to expand to fill the space */
+                        //     }
+                        // }
+                        }
+                    }
+
+                    .grafiek
+                    {
+                        // background-color: blue;
+                    }
+                }
+
                 .content
                 {
                     display: grid;
@@ -83,14 +172,16 @@ body
                                             background-color: lightgray;
                                         }
 
+
                                     }
                                 }
                             }
                         }
+                        
                         &-rechts
                         {
                             grid-column: 3;
-                    margin-right: 2rem;
+                            // margin-right: 2rem;
 
                             #metingen
                             {
@@ -119,6 +210,8 @@ body
                 }
             }
         }
+    }
+}
 
     /* Divider */
 .divider {