Maric Banking UI

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Marich Kastm Banking</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<style>
    .body {
        margin: 0;
        padding: 0;
    }

    .banka {
        position: absolute;
        width: 1000px;
        height: 700px;
        top: 20%;
        left: 13%;
        background-color: #13101b;
        background-position: center;
    }

    .gumbic {
        position: absolute;
        transition: background-color 0.5s ease;
        top: 20px;
        right: 20px;
        width: 50px;
        height: 50px;
        border: none;
        background-color: #f60845;
        transform: skew(-10deg, 0deg)
    }

    .gumbic:hover {
        position: absolute;
        top: 20px;
        right: 20px;
        width: 50px;
        height: 50px;
        border: none;
        background-color: #930429;
        transform: skew(-10deg, 0deg)
    }

    .fa {
        display: inline-block;
        width: 1em;
        height: 1em;
        color: #fff;

    }

    .kolune {
        display: flex;
        position: absolute;
        width: 400px;
        height: 500px;
        background-color: transparent;
        border: 1px solid #fff;
        top: 15%;
        left: 5%;
    }

    .balance {
        position: absolute;
        width: 350px;
        height: 100px;
        background-color: #e0ff2d;
        transition: background-color 0.5s ease;
        box-shadow: 5px 5px 5px 1px #0000007a;
        border: 1px solid #fff;
        top: 3%;
        left: 6%;
    }

    .balance:hover {
        position: absolute;
        width: 350px;
        height: 100px;
        background-color: #86991b;
        border: 1px solid #fff;
        top: 3%;
        left: 6%;
    }

    .deposit {
        position: absolute;
        width: 350px;
        height: 100px;
        background-color: #292843;
        box-shadow: 5px 5px 5px 1px #0000007a;
        transition: background-color 0.5s ease;
        border: 1px solid #fff;
        top: 51%;
        left: 6%;
    }

    .deposit:hover {
        position: absolute;
        width: 350px;
        height: 100px;
        background-color:#181828;
        border: 1px solid #fff;

    }


    .transakcije {
        position: absolute;
        width: 350px;
        height: 100px;
        background-color: #fff;
        transition: background-color 0.5s ease;
        border: 1px solid #fff;
        top: 27%;
        left: 6%;
    }

    .transakcije:hover {
        position: absolute;
        width: 350px;
        height: 100px;
        background-color: #999999;
        box-shadow: 5px 5px 5px 1px #0000007a;
        border: 1px solid #fff;
        top: 27%;
        left: 6%;
    }


    .withdraw {
        position: absolute;
        width: 350px;
        height: 100px;
        background-color: #292843;
        transition: background-color 0.5s ease;
        border: 1px solid #fff;
        top: 76%;
        left: 6%;
    }

    .withdraw:hover {
        position: absolute;
        width: 350px;
        height: 100px;
        background-color:#181828;
        border: 1px solid #fff;
        top: 76%;
        left: 6%;
    }


    .univerzitet {
        position: absolute;
        text-align: center;
        padding-top: 7px;
        padding-right: 3px;
        top: 20px;
        left: 20px;
        background-color: rgba(0, 0, 0, 0.17);

        width: 50px;
        height: 50px;
        transform: skew(-5deg, 0deg);
    }

    .tekst {
        position: absolute;
        color: black;
        top: 20px;
        left: 25%;
        font-size: 20px;
        font-weight: normal;
        padding-left: 10px;

    }
    .tekst-2 {
        position: absolute;
        color: black;
        top: 43px;
        left: 25%;
        font-size: 25px;
        font-weight: bold;
        padding-left: 10px;
    }

    .tekst-3 {
        position: absolute;
        color: black;
        top: 25px;
        left: 25%;
        font-size: 30px;
        font-weight: bold;
        padding-left: 10px;
    }

    .tekst-4 {
        position: absolute;
        color: white;
        top: 25px;
        left: 27%;
        font-size: 30px;
        font-weight: bold;
        padding-left: 10px;
    }

    .tekst-5 {
        position: absolute;
        color: rgb(255, 255, 255);
        top: 25px;
        left: 29%;
        font-size: 30px;
        font-weight: bold;
        padding-left: 10px;
    }

    .ikonica-user {
        position: absolute;
        width: 70px;
        height: 70px;
        background-color: #0094ff;
        top: 20px;
        left: 60px;
        padding-top: 18px;
        padding-left: 17px;
        transform: skew(-10deg, 0deg)
    }

    .dobrodosao {
        position: absolute;
        color: #fff;
        font-size: 25px;
        top: 20px;
        left: 150px
    }

    .ime-korisnika {
        position: absolute;
        color: #fff;
        font-size: 25px;
        top: 50px;
        left: 155px
    }

    .modal {
        width: 100px;
        height: 100vh;
        background-color: black;
        border-radius: 10px;
    }

</style>
<body>
<div class="banka">
<div class="top">
  <button class="gumbic"><i class="fa fa-times fa-2x"></i></button>
  <div class="korisnik">
    <div class="ikonica-user"><i class="fa fa-university fa-2x"></i></div>
    <h1 class="dobrodosao">Dobrodosli</h1>
    <h1 class="ime-korisnika">Dragan Maric</h1>
  </div>
    <div class="kolune">
        <button class="balance">
            <div class="univerzitet"><i class="fa fa-university fa-2x"></i></div>
            <h1 class="tekst">Stanje</h1>
            <h1 class="tekst-2">300.000$</h1>
        </button>
        <button class="transakcije">
            <div class="univerzitet"><i class="fa fa-retweet fa-2x"></i></div>
            <h1 class="tekst-3">TRANSAKCIJE</h1>
        </button>
        <button class="deposit">
            <div class="univerzitet"><i class="fa fa-dollar fa-2x"></i></div>
                <h1 class="tekst-4">ISPLATE</h1>
        </button>

        <button class="withdraw">
            <div class="univerzitet"><i class="fa fa-arrow-up fa-2x"></i></div>
            <h1 class="tekst-5">UPLATE</h1>
        </button>

    </div>

    </div>
</div>
</div>
<div class="modal">
    <h1>nesto</h1>
</div>

</body>
</html>