barthiv73098 4 years ago
parent
commit
df0327404f
4 changed files with 73 additions and 7 deletions
  1. 1
    0
      components/icons/caret-down-solid.svg
  2. 1
    0
      components/icons/user-solid.svg
  3. 19
    4
      index.html
  4. 52
    3
      index_styles.css

+ 1
- 0
components/icons/caret-down-solid.svg View File

@@ -0,0 +1 @@
<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>

+ 1
- 0
components/icons/user-solid.svg View File

@@ -0,0 +1 @@
<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>

+ 19
- 4
index.html View File

@@ -25,11 +25,26 @@
</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>


+ 52
- 3
index_styles.css View File

@@ -53,12 +53,61 @@

.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
}

Loading…
Cancel
Save