Merge branch 'master' of https://git.efi.th-nuernberg.de/gitea/barthiv73098/Testosteroth

components/icons/caret-down-solid.svg

+<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="caret-down" class="svg-inline--fa fa-caret-down fa-w-10" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"></path></svg>

components/icons/user-solid.svg

+<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="user" class="svg-inline--fa fa-user fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M224 256c70.7 0 128-57.3 128-128S294.7 0 224 0 96 57.3 96 128s57.3 128 128 128zm89.6 32h-16.7c-22.2 10.2-46.9 16-72.9 16s-50.6-5.8-72.9-16h-16.7C60.2 288 0 348.2 0 422.4V464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-41.6c0-74.2-60.2-134.4-134.4-134.4z"></path></svg>

index.html

     </nav>
 
     <div class="balance-list">
-        <h1>Umsätze</h1>
+        <div class="overview">
+            <div id="title">Balance:</div>
+            <div id="total-amount">500,00 Euro</div>
+        </div>
         <div class="grid-wrapper">
-            <div class="box"></div>
-            <div class="box"></div>
-            <div class="box"></div>
+            <div class="box">
+                <div class="dropdown"></div>
+                <span class="entry">Beschreibung</span>
+                <span class="amount">Betrag</span>
+            </div>
+            <div class="box">
+                <div class="dropdown"></div>
+                <div class="entry">Beschreibung</div>
+                <div class="amount">Betrag</div>
+            </div>
+            <div class="box">
+                <div class="dropdown"></div>
+                <div class="entry">Beschreibung</div>
+                <div class="amount">Betrag</div>
+            </div>
         </div>
     </div>
 

index_styles.css

 
 .grid-wrapper {
     display: grid;
-    padding: 4rem 4rem 0 4rem;
+    padding: 0 2em 0 2em;
     grid-template-columns: 1fr;
-    grid-template-rows: 100px 100px 100px;
+    grid-template-rows: 80px 80px 80px;
     grid-gap: 10px;
 }
 
 .box {
-    background-color: grey;
+    background-color: #C4C4C4;
+    display: grid;
+    grid-template-columns: repeat(12, 1fr);
+    grid-template-areas: "dropdown entry entry entry entry entry entry entry entry entry amount amount";
+    font-size: 2em;
+    border-radius: 10px;
+}
+
+.entry {
+    display: flex;
+    vertical-align: center;
+    align-items: center;
+    padding: 5px;
+    grid-area: entry;
+}
+
+.amount {
+    display: flex;
+    vertical-align: center;
+    align-items: center;
+    padding: 10px;
+    text-align: right;
+    grid-area: amount;
+}
+
+.balance-list {
+    display: grid;
+    grid-template-areas: ;
+}
+
+.overview {
+    text-align: center;
+    padding: 20px;
+}
+
+#title {
+    font-size: 2em;
+}
+
+#total-amount {
+    font-size: 3em;
+    color: green;
+}
+
+.dropdown {
+    grid-area: dropdown;
+    background-image: url("./components/icons/caret-down-solid.svg");
+    background-repeat: no-repeat;
+    background-position: center;
+    fill: #F3f3F3
 }