Minimalist Interface - Pokemon

by surfine

HTML

<!--div class="sRibbon pa"></div-->
<div class="pa centertxt" style="height: 100px; width: 100%; top: 100px; z-index: 1;"> <font size="6%" color="#fff">MATERIALISE</font>

</div>
<div class="mRibbon pa">
    <div class="pr" style="top: 50%; margin-top:-25%;"></div>
</div>
<div class="pr" style="height: 100%; width: 330px; margin: auto; z-index: 2;">
    <div class="pkball">
        <div class="innerball"></div>
    </div>
</div>

CSS

body {
    background: #f9f9f9;
    font-family: "Lato", "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.pa {
    position: absolute;
}
.pr {
    position: relative;
}
.ib {
    display: inline-block;
}
.centertxt {
    text-align: center;
}
.sRibbon {
    background: #1B5E20;
    height: 100%;
    width: 10px;
    left: 0;
    z-index: 1;
}
.mRibbon {
    background: #388E3C;
    height: 100%;
    width: 50%;
    top: 0;
}
.pkball {
    height: 150px;
    width: 300px;
    background: #f9f9f9;
    position: absolute;
    bottom: 250px;
    border: 15px solid #388E3C;
    border-radius: 300px 300px 0 0;
}
.pkball:before {
    content:"";
    height: 150px;
    width: 300px;
    border: 15px solid #388E3C;
    border-top-color: transparent;
    border-bottom-color: transparent;
    position: relative;
    top: 140px;
    left: -15px;
    border-radius: 0 0 200px 200px;
    display: block;
}
.innerball {
    height: 50px;
    width: 50px;
    position: relative;
    top: -77px;
    margin: auto;
    background: #f9f9f9;
    border-radius: 100%;
    border: 30px double;
    border-color: #388E3C;
    transform: rotate(45deg);
}
.rot90 {
    transform: rotate(270deg);
}