Creación de Tres Cards para Web con HTML5 y CSS3 con FlexBox

 En este caso hemos creado tres cards y para posicionarlas las hemos creado con FlexBox.

Por supuesto, las tres imágenes que he utilizado las he realizado con mi cámara 6D.

Hemos creado tres cards, las cuales poseen una imagen, un titulo, un texto y por supuesto un botón para que nos dirija a otra página donde se encuentra toda la información, y  las tres ocupan el mismo espacio, y los botones se encuentran alineados. Aunque, aquí no se puede observar, le he creado un efecto hover a los botones para que cuando me posicione con el ratón en cada botón cambie de color.

Como se observa cada card posee los bordes redondeados, pero están hechos de una forma, que los bordes de arriba de la imagen están redondeados, y los de abajo de la card también, utilizando distintas clases para ello.

Además, le hemos puesto una sombra a cada card que nos da una sensación de profundidad, y no nos hace que sean elementos planos.

Espero que os guste...