Staff en línea

[html]Colección de Cards informátivo
Tema iniciado por y Añadir a favoritos

[html]Colección de Cards informátivo 
el Vie Dic 15, 2017 11:05 am
staff
[codebox]Colección de cards para tu foro. Puedes poner la información que quieras dentro. Ya sean imagenes, enlaces...lo que quieras.[/codebox]
DEMO
https://www.opensourcephpbb3.com/h32-cards


HTML
[hidecode]
Código:
<div class="cardHolder">
    
   <div class="card">
   </div>
    
   <div class="card">
   </div>
    
   <div class="card">
   </div>
    
   <div class="card">
   </div>
    
   <div class="card">
   </div>
    
   <div class="card">
   </div>
    
   <div class="card">
   </div>
    
   <div class="card">
   </div>
    
   <div class="card">
   </div>
    
   <div class="card">
   </div>
    
   <div class="card">
   </div>
    
   <div class="card">
   </div>
    
   <div class="card">
   </div>
    
   <div class="card">
   </div>
    
   <div class="card">
   </div>
    
   <div class="card">
   </div>
    
   <div class="card">
   </div>
    
   <div class="card">
   </div>
    
   <div class="card">
   </div>
    
   <div class="card">
   </div>
    
   <div class="card">
   </div>
    
   <div class="card">
   </div>
    
   <div class="card">
   </div>
    
   <div class="card">
   </div>
    
   <div class="card">
   </div>
    
   <div class="card">
   </div>
    
   <div class="card">
   </div>
    
   <div class="card">
   </div>
    
   <div class="card">
   </div>
    
   <div class="card">
   </div>
    
   <div class="card">
   </div>
    
   <div class="card">
   </div>
    
   <div class="card">
   </div>
    
   <div class="card">
   </div>
    
   <div class="card">
   </div>
    
   <div class="card">
   </div>
    
   <div class="card">
   </div>
    
   <div class="card">
   </div>
    
   <div class="card">
   </div>
    
   <div class="card">
   </div>
    
   <div class="card">
   </div>
    
   <div class="card">
   </div>
    
   <div class="card">
   </div>
    
   <div class="card">
   </div>
    
   <div class="card">
   </div>
    
   <div class="card">
   </div>
    
   <div class="card">
   </div>
    
   <div class="card">
   </div>
</div>
[/hidecode]

CSS
[hidecode]
Código:
.cardHolder {
  display: flex;
  flex-flow: row wrap;
}

.card {
  flex: 1;
  margin: .5em;
  height: 100px;
  min-width: 100px;
  background-color: #fff;
  border-radius: 3px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  transition: all .25s ease;
  animation: populate .5s ease-out normal backwards;
}

.card:hover {
  transform: scale(1.05);
  z-index: 1;
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.2);
}

@keyframes populate {
  0% {
    transform: scale(0);
  }
}
[/hidecode]
RinC
avatar

¿Que estoy pensando? :

Ni se te ocurra -_- [table class=fecha_up][td]Se modifico:29/03/18 - 17:44 hrs. [/td][/table]


Banner en temas :

♥♥Open♥♥


Color de titulos :

#DF7401


Sombra titulo :

1px 1px 1px #fff


Mensajes :

789


Puntos :

1142


Me gusta :

193


ingreso :

28/01/2015


Sexo :

Femenino

Plataforma :

PhpBB3


Navegador :

Chrome


Ver perfil de usuario

Volver arriba Ir abajo

Re: [html]Colección de Cards informátivo 
el Vie Dic 15, 2017 2:38 pm
staff
muy bien muchas gracias por tu aporte
Chalo
avatar

¿Que estoy pensando? :

vamos a hacer cosas geniales :) [table class=fecha_up][td]Se modifico:24/05/18 - 11:11 hrs. [/td][/table]


Banner en temas :

https://coverfiles.alphacoders.com/322/32281.jpg


Color de titulos :

#fff


Sombra titulo :

0 0 1px #000


Mensajes :

6712


Puntos :

8776


Me gusta :

1007


ingreso :

17/04/2014


Sexo :

Masculino

Plataforma :

phpbb3


Navegador :

chrome


Ver perfil de usuario https://www.opensourcephpbb3.com

Volver arriba Ir abajo

Re: [html]Colección de Cards informátivo 
el Vie Dic 15, 2017 3:19 pm
Exelente aporte ;) obligado compartir
[likepost][time="5/01/18 - 9:53 hrs."][avatar="https://imgfast.net/users/3214/29/54/58/avatars/1-37.png"][userlike="https://www.opensourcephpbb3.com/u1"] Chalo[/userlike], [time="5/01/18 - 9 hrs."][avatar="https://imgfast.net/users/3214/29/54/58/avatars/1-37.png"][userlike="https://www.opensourcephpbb3.com/u1"] Chalo[/userlike], 4/01/18 - 12:40 hrs.a Chalo le gusta tu post[likepost]
Julinho
avatar

¿Que estoy pensando? :

buen sabado :) [table class=fecha_up][td]Se modifico:2/06/18 - 22:12 hrs. [/td][/table]


Banner en temas :

https://i.imgur.com/hkeup0N.jpg


Color de titulos :

#333


Sombra titulo :

1px 1px 1px #fff


Mensajes :

131


Puntos :

179


Me gusta :

30


ingreso :

05/02/2015


Sexo :

Masculino

Plataforma :

PhpBB3


Navegador :

Chrome


Ver perfil de usuario http://4reyes.foroactivo.com/

Volver arriba Ir abajo

Re: [html]Colección de Cards informátivo 
el Miér Ene 10, 2018 9:55 am
Gracias por el aporte
fascicularia
avatar

¿Que estoy pensando? :

Escribe lo que tienes en mente [table class=fecha_up][td]Se modifico:10/7/15 - 15:25 hrs.[/td][/table]


Banner en temas :

http://davesgarden.com/guides/pf/thumbnail.php?image=2006/10/11/Calif_Sue/aad8bf.jpg


Color de titulos :

green


Sombra titulo :

1px 1px 1px #fff


Mensajes :

184


Puntos :

219


Me gusta :

23


ingreso :

20/01/2016


Sexo :

Femenino

Plataforma :

PhpBB2


Navegador :

Opera


Ver perfil de usuario

Volver arriba Ir abajo

 En la misma categoria


Permisos de este foro:
No puedes responder a temas en este foro.