Teasers for DB (v0.1)

by Vladimir

HTML

<div class="card">
  <div class="icon-block">
    <img src="https://operaa.ru/wp-content/uploads/2019/02/avast-internet-security-logo-2-50x50.png" alt="">
  </div>
  <div class="app-meta">
    <div class="app-title">Opera</div>
  </div>
</div>

CSS

body {
  background: #888;
  font-family: sans-serif;
}
.card {
  width: 300px;
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.5);
  overflow: hidden;
}
.icon-block {
  width: 100px;
  height: 100px;
  background-image: linear-gradient(45deg, #2e3192, #1bffff);
  
      position: relative;
      float: left;
}
.icon-block img {
      position: absolute;
    width: 75px;
    height: 75px;
    top: 50%;
    left: 50%;
    margin: -37px 0 0 -37px;
}
.app-meta {
  
}