hoi

2024-02-28 12:01:33 +01:00
parent 5d6c492cfb
commit 57e54f460d
9 changed files with 345 additions and 51 deletions
--- a/src/css/style.scss
+++ b/src/css/style.scss
@@ -1,3 +1,137 @@
+/*default colors*/
+
+$primary-color:  rgb(171, 211, 174);
+$secondary-color: rgb(143, 188, 143);
+
+@import url('https://fonts.googleapis.com/css2?family=Akaya+Kanadaka&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Afacad:ital,wght@0,400..700;1,400..700&display=swap');
+
+$font-titels: "Akaya Kanadaka", system-ui;
+;
+$font-text: "Afacad", sans-serif;
+
+/* The Main container and border*/
+body
+{
+    background-image: url("../images/achtergrond.png");
+    background-repeat: no-repeat;
+    background-size: cover;
+    font-family: $font-text;
+}
+
+.mainContainer 
+{
+    margin: 2rem;
+    height: 37rem;
+    background-color: rgb(255, 255, 255, 95%);
+    border-radius: 40px;
+    padding: 2rem;
+
+    .mainBorder 
+    {
+        padding: 1rem 0;
+        height: 35rem;
+        border: solid 5px $primary-color;
+        border-radius: 40px;
+
+        .content
+        {
+            display: grid;
+            grid-template-columns: 3fr 1fr 3fr;
+            height: 100%;
+            
+            .kant
+            {
+                &-links
+                {
+                    grid-column: 1;
+
+                    #planten 
+                    {
+                        width: 100%;
+                        border-collapse: collapse;
+
+                        td 
+                        {
+                            article 
+                            {
+                                height: 7rem;
+                                width: 10rem;
+                                padding: .6rem;
+                                margin: .1rem;
+                                margin-left: 2rem;
+                                display: flex;
+                                flex-direction: column;
+                                justify-content: center;
+                                align-items: center;
+                                border: solid 3px $primary-color;
+                                border-radius: 40px;
+                                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+
+                                #toevoegen
+                                {
+                                    height: 5rem;
+                                    width: 5rem;
+                                }
+
+                                h2 
+                                {
+                                    color: gray;
+                                }
+
+                                &:hover
+                                {
+                                    background-color: lightgray;
+                                }
+
+
+                            }
+                        }
+                    }
+                }
+                &-rechts
+                {
+                    grid-column: 3;
+                    margin-right: 2rem;
+                    
+                    #metingen
+                    {
+
+                        border: solid 3px $primary-color;
+                        border-radius: 40px;
+
+                        #main-waardes
+                        {
+                        display: flex;
+                        justify-content: space-evenly;
+                        padding: .5rem;
+                        padding-bottom: 0;
+                        width: 100%;
+
+                            table
+                            {
+                                display: flex;
+                                justify-content: space-around;
+                                // width: 100%;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+/* Divider */
+.divider {
+    display: flex;
+    justify-content: center;
+    border: solid 1px $primary-color;
+    border-radius: 5px;
+    width: 80%;
+    margin: 0 auto;
+}
+
 /* The Modal (background) */

 .modal