Microsoft

by Lazaro Contreras

HTML

<div class="contenedor">
  <div class="contenido">
    <div class="degradado"></div>
    <div class="menu">
        
    </div>
  </div>
</div>

CSS

.contenedor {
  position: absolute;
  display: block;
  width: 200px;
  height: 390px;
  background: url('https://36.media.tumblr.com/0113152fe5f5ff78c1251833d49f417d/tumblr_o4klu8kb0p1sdvzwso1_1280.png');
  background-size: 100%;
}

.contenido {
  position: absolute;
  display: block;
  top: 44px;
  bottom: 34px;
  left: 11px;
  right: 12px;
  background: white url('/img/logo.png');
}

.degradado {
  position: absolute;
  display: block;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80px;
  background-position: bottom;
  background-repeat: repeat-x;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==');
  opacity: 0.2;
}
.menu {
  position: absolute;
  display: block;
  bottom: 20px;
  left: 0;
  right: 0;
  height: 40px;
}