simongig
5 years ago
4 changed files with 75 additions and 7 deletions
+ 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> | |||
+ 21
- 4
index.html
View File
| @@ -8,6 +8,7 @@ | |||
| <link rel="stylesheet" href="index_styles.css"> | |||
| <title>Document</title> | |||
| </head> | |||
| <body> | |||
| <nav> | |||
| @@ -18,13 +19,29 @@ | |||
| </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> | |||
| </body> | |||
| </html> | |||
+ 52
- 3
index_styles.css
View File
| @@ -15,12 +15,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…