web前端， 求显示这个布局的代码

实现这个布局的时候，遇到了困难，左上角那个我的计算机，可以更改成XX的计算机。

<style>
    .container{background:#f86984;width:540px;margin:0 auto;padding:30px 20px;border-radius:15px;color:#fff;font-weight:bold;box-sizing:border-box;}
    .container .title{line-height:30px;font-size:25px;}
    .container input,.container button{background:#56606e;border:solid 1px #fff;border-radius:5px;color:#fff;font-weight:bold}
    .container .input{display:block;height:60px;width:100%;margin:10px 0 20px;}
    .container .btncontainer{border:solid 2px #fff;border-radius:10px;padding:5px 10px;background:#e99fa9;display:flex;flex-wrap:wrap;justify-content:space-between}
    .container .btncontainer button{width:80px;box-sizing:border-box;margin-right:10px;margin-bottom:10px;font-size:25px;height:50px}
    .container .btncontainer button.op{width:95px;background:#86ed9d}
    .container .btncontainer button:nth-child(5n){margin-right:0}
    .container .btncontainer button.nomb{margin-bottom:0}
</style>
<div class="container">
    <div class="title">@我的计算器</div>
    <input type="text" class="input" />
    <div class="btncontainer">
        <button>7</button>
        <button>8</button>
        <button>9</button>
        <button class="op" style="background:#f94159">Back</button>
        <button class="op" style="background:#f94159">C</button>
        <button>4</button>
        <button>5</button>
        <button>6</button>
        <button class="op">X</button>
        <button class="op">/</button>
        <button>1</button>
        <button>2</button>
        <button>3</button>
        <button class="op">+</button>
        <button class="op">-</button>
        <button class="nomb">0</button>
        <button class="nomb">00</button>
        <button class="nomb">.</button>
        <button class="op nomb">%</button>
        <button class="op nomb" style="background:#3290ff">=</button>
    </div>
</div>

您好，我是有问必答小助手，您的问题已经有小伙伴帮您解答，感谢您对有问必答的支持与关注！
PS：问答VIP年卡 【限时加赠：IT技术图书免费领】，了解详情>>> https://vip.csdn.net/askvip?utm_source=1146287632