Crea tu web, tutor html, css
 

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

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