Mobile tile layout inbox

by matmat

HTML

<script src="http://fonts.googleapis.com/css?family=Quicksand"></script>
<link href="http://fonts.googleapis.com/css?family=Italianno|Quicksand|Dosis" rel="stylesheet" type="text/css">
<div class="mwrapper" style="width:250px">
    <div class="tilewrapper w50pc pa5pc">
        <div class='box'>
            <div class='content'>
                <img src="http://www.junkst.com/Mobile/Images/Icones/home.png" alt="notifications" title="Notifications" />
            </div>
        </div>
    </div><div class="tilewrapper w50pc lh50pc pa2pc">
        <div class="tilewrapper w50pc h25pc pa10pc">
            <div class='box'>
                <div class='content'>
                    <img src="http://www.junkst.com/Mobile/Images/Icones/groups.png" alt="groups" title="Gérer les contacts" />
                </div>
            </div>
        </div><div class="tilewrapper w50pc pa10pc">
            <div class='box'>
                <div class='content'>
                    <img src="http://www.junkst.com/Mobile/Images/Icones/email.png" alt="abonnements" title="Abonnements" />
                </div>
            </div>
        </div><div class="tilewrapper w50pc pa10pc">
            <div class='box'>
                <div class='content'>
                    <img src="http://www.junkst.com/Mobile/Images/Icones/save.png" alt="annonces" title="Annonces sauvegardées" />
                </div>
            </div>
        </div><div class="tilewrapper w50pc pa10pc">
            <div class='box'>
                <div class='content'>
                    <img src="http://www.junkst.com/Mobile/Images/Icones/search.png" alt="Junkst" title="Junkst" />
                </div>
            </div>
        </div>
    </div>
    <div class="sticky">
    <div class="menuwrapper w50pc pa2pc ">
        <div class="menuwrapper w25pc ">
            <div class='box'>
                <div class='content'>
                    <img src="http://www.junkst.com/Mobile/Images/Icones/in.png" alt="groups"...

CSS

html {
    font-family:'quicksand', 'lucida sans';
    font-size:0.9rem;
    color:whitesmoke;
        max-height:450px;
}
div {
    box-sizing: border-box;
    margin:0px;
    padding:0px;
}
.mwrapper {
    background:gainsboro;
    min-height:100vh;
    max-height:450px;
}
.tilewrapper,.menuwrapper {
    margin:auto;
    display:inline-block;
    vertical-align:center;
    cursor:pointer;
    vertical-align: top;
}
.tilewrapper{
background:gainsboro;
   text-align:center;
}
.menuwrapper {
background:grey;
   text-align:left;
    text-indent:5%;
    font-family:dosis;
   letter-spacing: 0.2rem;
}
.menutext{
    display:inline-block;
    height:100%;
    line-height:100%;
vertical-align:middle;
}
.contentwrapper{
   background:white;
    min-height:60vh;
    
}
.pa5pc {
    padding:5%;
}
.pa2pc {
    padding:2%;
}
.pa10pc {
    padding:10%;
    
}
.sbwrapper {
    margin-left:auto;
    margin-right:auto;
    background:#92375D;
}
.searchbox {
    display:table;
    width:100%;
}
.searchinput {
    position: relative;
    display:table-cell;
    vertical-align: middle;
}
.searchico {
    display:table-cell;
    vertical-align: middle;
    padding: 3%;
    border:1px solid gainsboro;
    background:whitesmoke;
    border-radius:0 20% 20% 0%;
}
.searchinput input {
    margin-left:0;
    height:100%;
    width:100%;
    box-sizing:border-box;
    padding:5%;
    font-family:Quicksand;
    font-size:1.1rem;
    border:1px solid gainsboro;
   
}
.searchlabel {
    display:table-cell;
    text-indent:2%;
}
.searchcheck {
    display:table-cell;
}
.menutop50pc{
 height:100%;
    line-height:100%;
vertical-align:middle;
    text-align:left;
}
.accountwrapper {
    margin-top:3%;
    padding:2%;
    background:#92375D;
}
.accountbtn {
    background:grey;
    text-align:center;
}
.w100pc {
    width:100%;
}
.w80pc {
    width:80%;
}
.w70pc {
    width:70%;
}
.w50pc {
    width:50%;
}
.w25pc {
    width:25%;
}
.w20pc {
    width:20%;
}
.w15pc {
    width:15%;
}
.w10pc {
  ...