Untitled

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html lang="RU" dir="ltr">

<head>
    <title>Профиль</title>
    <meta name="description" content="Профиль игрока">
    <meta name="keywords" content="профиль, игрок">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style>
        body {
            background-color: #101727;
            margin: 0;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
                "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
                sans-serif;
        }

        .paper {
            width: 600px;
            display: flex;
            margin: 20px auto 0 auto;
            border-radius: 4px;
            background: #fff;
        }

        .paper h3 {
            margin: 0;
        }

        .div-row {
            display: flex;
            flex-direction: row;
            width: 100%
        }

        .div-row h3 {
            text-align: center;
            margin: 2px 0;
        }

        .logo {
            background: url(https://pbs.twimg.com/profile_images/1186876544263872512/MA8AZsIV_400x400.jpg) no-repeat;
            background-size: cover;
            width: 200px;
            height: 200px;
            display: block;
            border-radius: 50%;
        }

        .notification {
            display: block;
            background-color: gainsboro;
            border-radius: 5px;
            padding: 4px;
            margin-left: auto;
            width: 200px;
            text-align: center;
            cursor: pointer;
        }

        .div-row .field {
            margin: 8px;

        }

        .paper .right {
            margin: 16px;
            width: 100%;
            display: flex;
            flex-direction: column;
        }

        .div-row .progress {
            margin: auto 8px 8px 8px;
        }

        .progress .bar {
            margin: 4px 0;
            display: flex;
            flex-direction: row;
        }

        .notification:hover {
            background-color: #bababa;
        }

        .paper .left {
            margin: 16px;
        }

        .progress .percent {
            margin-left: auto;
        }

        .progress-left {
            width: 35%;
            background-color: red;
            height: 4px;
        }

        .progress-right {
            width: 65%;
            background-color: orange;
            height: 4px;
        }
    </style>
</head>

<body>
    <div class="paper">
        <div class="div-row">

            <div class="left">
                <h3>SugarBoy_</h3>
                <div class="logo"></div>
            </div>

            <div class="right">
                <div class="notification">
                    Уведомлений: <b>0</b>
                </div>

                <div class="field">
                    <b>Имя:</b><br />
                    Никита
                </div>

                <div class="field">
                    <b>Почта:</b><br />
                    <a href="mailto:sugarisboy@muskrat.dev">sugarisboy@muskrat.dev</a>
                </div>

                <div class="progress">
                    <div class="div-row">
                        <div>
                            <b>Твой ранг:</b> Капитан
                        </div>
                        <div class="percent">
                            <b>35%</b>
                        </div>
                    </div>
                    <div class="bar">
                        <div class="progress-left">
                            &nbsp;
                        </div>
                        <div class="progress-right">
                            &nbsp;
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>