Box autôr s/bt

Aqui eu com mais uma das minhas partilhas. Trazendo uma nova box autôr de fáçil aplicação é só adicionar gadget html/javascript´´
Como pode visualizár a imagem acima este é resultado mas veja online:ENTRE AQUI.

Código abaixo,para colar em html/javascript´´

<center>
<style>
.aut-boxbt {
box-shadow: 0px 0px 43px -10px black;
 border-top-left-radius:10px;
  border-top-right-radius:10px;
position: relative;
left: 0px;
top: 3px;
height: 220px;
  width: 300px;
overflow: hidden;
}
.efcbt:hover .frt .top .avatar {
-webkit-mask-box-image:radial-gradient(black, transparent 50%);
}
.aut-boxbt .frt {
  z-index: 11;
  width: 100%;
  position: absolute;
  height: 100%;
  background: #fff;
  box-shadow: 0px 0px 33px -1px rgba(0, 0, 0, 0.45);
}
.aut-boxbt .frt .top {
  height: 90px;
  background-image:linear-gradient(180deg,#fff,#2f2f39);
  border-bottom: 4px solid #2a2b39;
}
.aut-boxbt .frt .top .avatar {
  display: inline-block;
  background: #6acd79 url(https://s-media-cache-ak0.pinimg.com/736x/fb/90/d8/fb90d8308a0232bd2fe050ad71d59604.jpg)center ;
  height: 100%;
  width: 40%;
  box-shadow:5px 5px 5px 5px #2f2f39;
  z-index: 11;
  padding: .16em;
  border: 1px solid #000;
  border-top-left-radius:5px;
  border-top-right-radius:5px;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius:5px;
  position:relative;
  left: 70px;
  margin-top:3px;
}
.aut-boxbt .frt .namtrobt {
  margin-top: 5px;
}
.aut-boxbt .frt .nambt {
  color: #fcfcfc;
  font-size: 50px;
  font-style: italic;
  text-decoration: none;
  text-align: center;
  position: relative;
  margin-bottom:-3px;
  text-shadow:
   1px 1px 0px #999999,
   1px -1px 0px #6B6B6B;
}
.aut-boxbt .frt .introbt {
  text-align: center;
  margin-top:5px;
  color: #2a2b39;
  font-family: 'Arial', serif;
  font-style: italic;
  text-shadow:
   1px 0px 0px #000,
   0px -1px 0px #000,
  -1px 0px 0px #000,
  0px 1px 0px #000;
}
</style>
<div class='aut-boxbt'>
<div class="efcbt">
<div class="frt">
<div class="top">
<div class="avatar"></div>
<div class="namtrobt">
<div class="nambt">Best-Tuga</div>
<div class="introbt">Blog é passatempo para mim.</div>
<div></div></div></div></div></div></div>
</center>

Notas abaixo onde deve personalizár box autôr...

• aut-boxbt/height: 220px/width: 300px; aqui fica altura x largura box total
• .aut-boxbt .frt .top .avatar/background: #6acd79 url(link s imagem)
• .aut-boxbt .frt .top .avatar/left: 70px; aqui mexe foto esquerda ou direita
• aut-boxbt .frt .top / background-image:linear-gradient(fundo cabeçalho box)
• <div class="nambt">Best-Tuga</div> troque s nome
• <div class="introbt">Blog é passatempo para mim.</div>escreva s texto

Pronto feito isso veja resultado ,alguma questão avise ...

Box autôr s/bt

► 0

► box vários

► Cartita