漂亮好看的个人中心后台html页面来了

 你是否常常找不到好看的个人中心页面 就现在这里有你需要的

 代码如下

<script src="https://kit.fontawesome.com/b99e675b6e.js"></script>

<div class="wrapper">
    <div class="left">
        <img src="https://profile-avatar.csdnimg.cn/490f7039d6394142a5d0850109c596f0_weixin_49669081.jpg!1" alt="user"
            width="200">
        <h3>姓名:</h3>
        <h3>张三李四</h4>
            <p></p>
            <P></P>
    </div>
    <div class="right">
        <div class="info">
            <h3>个人中心信息管理</h3>
            <div class="info_data">
                <div class="data">
                    <h4>用户名</h4>
                    <p>0001</p>
                </div>
                <div class="data">
                    <h4>邮箱</h4>
                    <p>alex@gmail.com</p>
                </div>


            </div>
            <div class="info_data">
                <div class="data">
                    <h4>手机</h4>
                    <p>0001-213-998761</p>
                </div>
            </div>


        </div>

        <div class="projects">
            <h3>Projects</h3>
            <div class="projects_data">
                <div class="data">
                    <h4>部门/公司</h4>
                    <p>Lorem ipsum dolor sit amet.</p>
                </div>
                <div class="data">
                    <h4>联系地址</h4>
                    <p>dolor sit amet.</p>
                </div>
            </div>
        </div>

        <div class="projects">
            <h3>Projects</h3>
            <div class="projects_data">
                <div class="data">
                    <h4>营业执照</h4>
                    <p>Lorem ipsum dolor sit amet.</p>
                </div>
                <div class="data">
                    <h4>描述</h4>
                    <p>dolor sit amet.</p>
                </div>
          
            </div>
            <div class="projects_data">  
                <div class="data">
                    <h4>创建时间</h4>
                    <p>dolor sit amet.</p>
                </div>
            </div>

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

<style>
    @import url('https://fonts.googleapis.com/css?family=Josefin+Sans&display=swap');

    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        list-style: none;
        font-family: 'Josefin Sans', sans-serif;
    }

    body {
        background-color: #f3f3f3;
    }

    .wrapper {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        height: 80%;
        display: flex;
        box-shadow: 0 1px 20px 0 rgba(69, 90, 100, .08);
    }

    .wrapper .left {
        width: 35%;
        background: linear-gradient(to right, #b9bebe, #c2caca);
        padding: 30px 25px;
        border-top-left-radius: 5px;
        border-bottom-left-radius: 5px;
        text-align: center;
        color: #fff;
    }

    .wrapper .left img {
        border-radius: 5px;
        margin-bottom: 10px;
    }

    .wrapper .left h4 {
        margin-bottom: 10px;
    }

    .wrapper .left p {
        font-size: 12px;
    }

    .wrapper .right {
        width: 65%;
        background: #fff;
        padding: 30px 25px;
        border-top-right-radius: 5px;
        border-bottom-right-radius: 5px;
    }

    .wrapper .right .info,
    .wrapper .right .projects {
        margin-bottom: 25px;
    }

    .wrapper .right .info h3,
    .wrapper .right .projects h3 {
        margin-bottom: 15px;
        padding-bottom: 5px;
        border-bottom: 1px solid #e0e0e0;
        color: #353c4e;
        text-transform: uppercase;
        letter-spacing: 5px;
    }

    .wrapper .right .info_data,
    .wrapper .right .projects_data {
        display: flex;
        justify-content: space-between;
    }

    .wrapper .right .info_data .data,
    .wrapper .right .projects_data .data {
        width: 45%;
    }

    .wrapper .right .info_data .data h4,
    .wrapper .right .projects_data .data h4 {
        color: #353c4e;
        margin-bottom: 5px;
    }

    .wrapper .right .info_data .data p,
    .wrapper .right .projects_data .data p {
        font-size: 13px;
        margin-bottom: 10px;
        color: #919aa3;
    }

    .wrapper .social_media ul {
        display: flex;
    }

    .wrapper .social_media ul li {
        width: 45px;
        height: 45px;
        background: linear-gradient(to right, #d3d6d6, #d6dada);
        margin-right: 10px;
        border-radius: 5px;
        text-align: center;
        line-height: 45px;
    }

    .wrapper .social_media ul li a {
        color: #fff;
        display: block;
        font-size: 18px;
    }
</style>