Cards

Cards de cursos

Programación orientada a objetos con Go

Alejandro Rodríguez

$ 20USD

Programación orientada a objetos con Go

Alejandro Rodríguez

$ 20USD

Programación orientada a objetos con Go

Alejandro Rodríguez

$ 20USD

Programación orientada a objetos con Go

Alejandro Rodríguez

$ 20USD

Marcado

<article class="card">
  <div class="img-container s-ratio-16-9 s-radius-tr s-radius-tl">
    <img src="path/img" alt="">
  </div>
  <div class="card__data s-border s-radius-br s-radius-bl s-pxy-2">
    <h3 class="t5 s-mb-2 s-center">
      Programación orientada a objetos con Go
    </h3>
    <div class="s-mb-2 s-main-center">
      <div class="card__teacher s-cross-center">
        <div class="card__avatar s-mr-1">
          <div class="circle img-container">
            <img src="path/img" alt="">
          </div>
        </div>
        <span class="small">Alexys Lozada</span>
      </div>
    </div>
    <div class="s-main-center">
      <a class="button--ghost-alert button--tiny" href="#">$ 20USD</a>
    </div>
  </div>
</article>

Card de cursos con varios profesores

Programación orientada a objetos con Go

Alejandro Rodríguez

Alexys Lozada

Beto Quiroga

$ 20USD

Programación orientada a objetos con Go

Alejandro Rodríguez

Alexys Lozada

Beto Quiroga

$ 20USD

Programación orientada a objetos con Go

Alejandro Rodríguez

Alexys Lozada

Beto Quiroga

$ 20USD

Programación orientada a objetos con Go

Alejandro Rodríguez

Alexys Lozada

Beto Quiroga

$ 20USD

El marcado es idéntico al caso anterior, solo hay que encerrar a todos los profesores con la clase .card__teachers

<article class="card">
  <div class="img-container s-ratio-16-9 s-radius-tr s-radius-tl">
    <img src="path/img" alt="">
  </div>
  <div class="card__data s-border s-radius-br s-radius-bl s-pxy-2">
    <h3 class="t5 s-mb-2 s-center">
      Programación orientada a objetos con Go
    </h3>
    <div class="s-mb-2 s-main-center card-teachers">
      <div class="card__teacher s-cross-center">
        <div class="card__avatar s-mr-1">
          <div class="circle img-container">
            <img src="path/img" alt="">
          </div>
        </div>
        <span class="small">Alexys Lozada</span>
      </div>
      <div class="card__teacher s-cross-center">
        <div class="card__avatar s-mr-1">
          <div class="circle img-container">
            <img src="path/img" alt="">
          </div>
        </div>
        <span class="small">Alexys Lozada</span>
      </div>
      <div class="card__teacher s-cross-center">
        <div class="card__avatar s-mr-1">
          <div class="circle img-container">
            <img src="path/img" alt="">
          </div>
        </div>
        <span class="small">Alexys Lozada</span>
      </div>
    </div>
    <div class="s-main-center">
      <a class="button--ghost-alert button--tiny" href="#">$ 20USD</a>
    </div>
  </div>
</article>