Cards en horizontal
Las cards son estructuras o layouts muy usados en las paginas web para presentar información de forma concisa pero impactante.
En este ejemplo vas a aprender a crear un card en formato horizontal
En la sección de ejercicios tienes una colección de ejemplos resueltos sobre cards
El HTML.
El código HTML de una estructura tipo card no varía: hay un contenedor y una zona de contenidos. Los contenidos pueden presentar un encabezado, un texto y uno o varios links.
<div class="tarjeta">
<div class="contenido">
<div class="ladoIzq">
<h2 class="titulo">Una tarjeta de presentación</h2>
<div class="cuerpo">
<p>Este es un texto que pretende describir o presentar el artículo, la información o los datos que queramos presentar.</p>
<a class="btn" href="#">Más info</a>
<a class="btn" href="#">Contactar</a>
</div>
</div>
<div class="ladoDer">
<img src="/imgs/para-card.jpg" /></div>
</div>
</div>
El CSS
En el HTML has visto que para cada parte de la tarjeta se usa una clase. Estas clases escritas en CSS son las encargadas de disponer las partes de la tarjeta, y de dar formato y colorear a todo el texto contenido en ella.
En esta solución se emplea el layout flex, aunque también puedes usar el grid o técnicas antigua con floats.
@charset "utf-8";
*{
box-sizing: border-box;
}
body {
margin: 0;
font-family: "Segoe UI",Arial,sans-serif;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #212529;
text-align: left;
background-color: #fff;
}
h2 {
margin-top: 0;
margin-bottom: .5rem;
font-size: 2rem;
font-weight: 500;
line-height: 1.2;
}
.tarjeta {
max-width: 65vw;
margin: 48px auto;
display: block;
border-radius: 10px;
border: 1px solid black;
overflow: hidden;
}
.contenido {
display: flex;
}
@media (max-width: 1024px){
.contenido{
flex-direction: column;
}
.tarjeta {
max-width: 95vw;
}
}
.ladoIzq, .ladoDer {
width: 100%;
}
.ladoDer img {
width: 100%;
height: 100%;
border-style: none;
}
.ladoIzq {
background: black;
color: white;
padding: 48px
}
.btn {
display: inline-block;
background: white;
margin-right: 4px;
padding: 14px;
border-radius: 5px;
margin-top: 18px;
}
a.btn{
text-decoration: none;
}
a.btn:first-of-type {
background: #5252b4;
color: white;
}
a.btn:hover{
opacity: 0.8;
}
El ejemplo es responsive, para pantallas estrechas (menor a 1024px) la tarjeta aparece en vertical
Al probarla en el editor de código usar el formato apaisado o ampliar la ventana de resultado para ver el ejmplo correctamente
Si quieres puedes ver este ejemplo de card horizontal en esta muestra