Staff en línea
Últimos temas
Noticias para este 2019
por pirulo Miér Feb 13, 2019 2:57 am

[Ocio] ¿De que país sois?
por Carolinaa Mar Feb 12, 2019 5:57 pm

[Ocio] Contemos hasta el 5000
por Carolinaa Mar Feb 12, 2019 1:02 pm

[Aviso] SE BUSCA DESAPARECIDO
por pirulo Mar Feb 12, 2019 3:09 am

[javascript] Crear BBcodes
por pirulo Lun Feb 11, 2019 11:24 am

[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
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
RinC

¿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 :

1147


Me gusta :

198


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
Chalo

¿Que estoy pensando? :

Ha, Ha, ha [table class=fecha_up][td]Se modifico:17/12/18 - 8:35 hrs. [/td][/table]


Banner en temas :

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


Color de titulos :

#fff


Sombra titulo :

0 0 1px #000


Mensajes :

6874


Puntos :

8973


Me gusta :

1032


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="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
Julinho

¿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 :

182


Me gusta :

33


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
fascicularia

¿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 :

195


Puntos :

234


Me gusta :

25


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.