div box

[lezão 0]

Boa tarde, meus amigos (as)!

Estou tentando fazer uma box desse jeito da foto em anexo.

 

 

Este é o código que estou tentando fazer ficar igual a da foto...

 

alguém pode me ajudar ?

 

fieldset{
  width:100%;
  height:100%;
  padding: 1em;
  font:80%/1 sans-serif;
  border-radius: 10px;
  padding: 5px;
  min-height:1px;
  background: -webkit-linear-gradient(90deg, #CCCCCC, #FFFFFF) repeat scroll 0 0 transparent;
  background: -moz-linear-gradient(90deg, #CCCCCC, #FFFFFF) repeat scroll 0 0 transparent;
  border: 1px solid #AAAAAA;
  border-radius: 10px 10px 10px 10px;
  box-shadow: 0 0 15px #AAAAAA;
  font-size: 15px;
  color: #000;
  text-transform: uppercase;
  text-align: center;
  }
div.box {
  width: 250px;
  display: inline-block;
  padding: 15px;
  min-height:1px;  
}

<div class="box">
  <fieldset onclick="location.href='#'" style="cursor:pointer;" align="center">  
    <img src="btn-galeria.png" width="130" height="130"  />
   <br/><br/>
    <span> Galeria de Fotos</span>
    <br/><br/>
  </fieldset>     
</div>

 

[wanderval 19]

 

 

HTML: 

<!--My option-->
  
<div class="container-cards">  
  <div class="box-container">
    <section class=box-image>
      <img src="https://e7.pngegg.com/pngimages/755/939/png-clipart-red-and-gold-shield-illustration-shield-icon-shield-heart-shields.png" width="130" height="130"  />
    </section>
    <section class=box-content>
      <label class="title">Perm. e Segurança</label>
      <span class="description">Aplique permissões e proteja pastas</span>
    </section>
  </div>
  
  <div class="box-container">
    <section class=box-image>
      <img src="https://e7.pngegg.com/pngimages/755/939/png-clipart-red-and-gold-shield-illustration-shield-icon-shield-heart-shields.png" width="130" height="130"  />
    </section>
    <section class=box-content>
      <label class="title">Perm. e Segurança</label>
      <span class="description">Aplique permissões e proteja pastas</span>
    </section>
  </div>
  
  <div class="box-container">
    <section class=box-image>
      <img src="https://e7.pngegg.com/pngimages/755/939/png-clipart-red-and-gold-shield-illustration-shield-icon-shield-heart-shields.png" width="130" height="130"  />
    </section>
    <section class=box-content>
      <label class="title">Perm. e Segurança</label>
      <span class="description">Aplique permissões e proteja pastas</span>
    </section>
  </div>
  
</div>

CSS:

fieldset{
  width:100%;
  height:100%;
  padding: 1em;
  font:80%/1 sans-serif;
  border-radius: 10px;
  padding: 5px;
  min-height:1px;
  background: -webkit-linear-gradient(90deg, #CCCCCC, #FFFFFF) repeat scroll 0 0 transparent;
  background: -moz-linear-gradient(90deg, #CCCCCC, #FFFFFF) repeat scroll 0 0 transparent;
  border: 1px solid #AAAAAA;
  border-radius: 10px 10px 10px 10px;
  box-shadow: 0 0 15px #AAAAAA;
  font-size: 15px;
  color: #000;
  text-transform: uppercase;
  text-align: center;
  }
div.box {
  width: 250px;
  display: inline-block;
  padding: 15px;
  min-height:1px;  
}

/* My opinion */

body {
  background: #ededed;
}


.container-cards {
  flex-wrap: wrap;
  display: inline-flex;
    width: 100%;
}

.box-container {
  /*border: 1px solid red;*/
  display: flex;
  background: #fcfcfc;
  font:80%/1 sans-serif;
  font-size: 14px;
  border-radius: 5px;
  align-items: center;
  width: 280px;
  height: 80px;
  border: 1px solid #AAAAAA;
  margin: 10px;
}

.box-container .box-image {
  width: 25%;
  background: -webkit-linear-gradient(90deg, #CCCCCC, #FFFFFF) repeat scroll 0 0;
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: center;
  border-right: 1px solid #AAAAAA;

}
.box-container .box-image img {
  width: 40px;
  height: 40px;
}

.box-container .box-content {
  display: flex;
  flex-direction: column;
  padding: 10px;
  .title {
    margin-bottom: 10px;
    font-size: 14px
    font-weight: bold;
  }
  
  .description {
    font-size: 12px;
    color: #8a8686;
  }
}

 

JsBin: https://jsbin.com/rowuvamaxu/edit?html,css,output

[lezão 0]

Bom dia, wanderval!

Td bem com você?

 

Meu amigo era isso que eu estava precisando mesmo, nem sei como te agradecer.

Vlw mesmo, parabéns pelo seu conhecimento....

Que Deus te abençoe e ilumine seus caminhos, sucesso...

 

E mais uma vez obrigado!

[lezão 0]

Resolvido!