Saksham

by surfine

HTML

<div class="sakshamPenis">
    <div>
        <div class="pp"></div>
        <div class="pp-info">
            <ul>
                <li class="rank">Newbie</li>
                <br>
                <li class="name">Mr. Fixaal</li>
                <br>
                <li class="lvl">Lvl 100</li>
            </ul>
        </div>
    </div>
    <div class="profile-tabs">
        <ul>
            <li><a href="#">News Board</a></li>
            <li><a href="#">Team</a></li>
            <li><a href="#" class="active">Profile</a></li>
            <li><a href="#">Edit Settings</a></li>
            <li><a href="#">Inbox</a></li>
            <li><a href="#">Friends</a></li>
            <li><a href="#">Hall of Fame</a></li>
        </ul>
    </div>
</div>
<div class="profile-container">
    <div class="profile-top">
        <div class="profile-cover"></div>
        <div class="pp2"></div>
        <div class="profile-tabs-big">
            <ul>
                <li>
                    <a href="#" class="active">
                        <span class="profile-tab-info">52</span>
                        <br>Posts
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span class="profile-tab-info">1</span>
                        <br>Friends
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span class="profile-tab-info">1020</span>
                        <br>Pokemon
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <div class="profile-left"></div>
    <div class="profile-right"></div>
</div>

CSS

div, span
{
    float: left;
    box-sizing: border-box;
}
.float-left {
    float: left
}
body, html
{
    width: 100%;
    height: 100%;
    margin: 0;
    color: #76888f;
}
body
{
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    background: #37353a;
}
.sakshamPenis
{
    width: 100%;
    padding: 2em 0 0 5em;
    background: #424046;
    border-bottom: 1px solid #48464e;
}
.pp
{
    width: 90px;
    height: 90px;
    background: #37353a;
    border: 2px solid #2b282d;
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
    border-bottom-left-radius: 50%;
    border-bottom-right-radius: 5px;
    background: url("https://upload.wikimedia.org/wikipedia/az/6/66/Bulbazavr.png");
    background-size: 100% 100%;
}
.pp2
{
    position: absolute;
    top: 3em;
    left: 50%;
    margin-left: -45px;
    width: 90px;
    height: 90px;
    background: #37353a;
    border: 3px solid rgba(225,225,225,0.2);
    background-clip: padding-box;
    border-radius: 50%;
    background: url("https://upload.wikimedia.org/wikipedia/az/6/66/Bulbazavr.png");
    background-size: 100% 100%;
}
.pp-info ul
{
    margin-left: 2em;
    padding: 0;
}
.pp-info ul li
{
    list-style: none;
    display: block;
}
.pp-info .rank, .pp-info .name, .pp-info .lvl
{
    float: left;
    padding: .2em .4em;
}
.pp-info .rank
{
    margin-left: -.2em;
    background: #b93837;
    color: #fff;
    font-size: .8em;
    text-align: center;
}
.pp-info .name, .pp-info .lvl
{
    background: #222;
}
.pp-info .name
{
    font-size: 1.1em;
    color: #b93837;
}
.pp-info .lvl
{
    margin-top: .3em;
    font-size: .8em;
}
.profile-tabs
{
    width: 100%;
    font-size: .9em;
    text-transform: lowercase;
    font-weight: bold;
}
.profile-tabs ul
{
    padding: 0;
}
.profile-tabs ul li
{
    list-style: none;
    display: inline-block;
}
.profile-tabs a, .profile-tabs a:visited
{
    padding: 1em .5em;
    color: inherit;
    text-decoration:...