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 15 Dic 2017 - 11:05
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
http://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? :

Ya echaba de menos mi open!


Banner en temas :

http://i.imgur.com/WpuuVJy.jpg


Color de titulos :

#DF7401


Sombra titulo :

1px 1px 1px #fff


Mensajes :

788


Puntos :

1135


Me gusta :

189


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 15 Dic 2017 - 14:38
staff
muy bien muchas gracias por tu aporte
Chalo
avatar

¿Que estoy pensando? :

Bienvenidosss!!! [table class=fecha_up][td]Se modifico:11/01/18 - 12:23 hrs. [/td][/table]


Banner en temas :

https://orig00.deviantart.net/2c56/f/2016/271/3/4/overwatch___mccree___facebookcover_by_beanousme-da03g04.jpg


Color de titulos :

#fff


Sombra titulo :

0 0 1px #000


Mensajes :

6513


Puntos :

8544


Me gusta :

984


ingreso :

17/04/2014


Sexo :

Masculino

Plataforma :

phpbb3


Navegador :

chrome


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

Volver arriba Ir abajo

Re: [html]Colección de Cards informátivo 
el Vie 15 Dic 2017 - 15:19
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="http://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="http://www.opensourcephpbb3.com/u1"] Chalo[/userlike], 4/01/18 - 12:40 hrs.a Chalo le gusta tu post[likepost]
Julinho
avatar

¿Que estoy pensando? :

feliz año para todos y la pasemos bien ejjeje en el foro como en la familia. [table class=fecha_up][td]Se modifico:4/01/18 - 15:41 hrs. [/td][/table]


Banner en temas :

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


Color de titulos :

#333


Sombra titulo :

1px 1px 1px #fff


Mensajes :

126


Puntos :

171


Me gusta :

27


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 10 Ene 2018 - 9:55
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 :

162


Puntos :

193


Me gusta :

21


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.