Aplicando estilos a sección de planes

Un detalle: line-height es el interlineado de párrafo (no el alto de fuente). Se usa para establecer la distancia entre líneas de texto.

Se le puede aplicar al contenedor el siguiente padding:

.plans-container {
    padding: 65px 0;
}

En lugar de darle un padding-bottom a éste contenedor y un padding-top al h2

Para practicar es bueno hacer secciones similares de diferentes formas, pero creo que para un proyecto sería mejor reutilizar el código.
Aquí podríamos reutilizar casi todos los estilos del primer section del main y cambiamos los pequeños detalles que los diferencian.

Super bueno el resultado que logramos!
Ya estamos llegando a la recta final, que emoción 😄

Me ha gustado mucho este curso, Diego es muy bueno en la parte didáctica

Acá parte de mi avance ^^

solo una pequeña aclaracion a cuando el profe dice un “ancho de 500” en realidad es peso (weight) no ancho (width). solo es la traducción por lo que se parecen las palabras.

text-align: center;

/*Colorcar en un contenedor padre, Centra el contenido de las etiquetas hijas, que sean de texto en automatico */

Intente hacerlo sin ver la clase, y este fue el resultado.

CSS

.plans-title h2 {
  margin-top: 44px;
  padding: 10px;
  text-align: center;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 2.6rem;
  color: var(--warm-black);
}
.plans-title p {
  margin-top: 4px;
  padding: 10px;
  text-align: center;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.8rem;
  color: #757575;
}

.plans-container__slider {
  padding: 20px;
  margin-top: 10px;
  height: 308px;
}

.plans-container__slider .plans-container__plans {
  position: relative;
  width: 190px;
  height: 234px;
  margin: 0 auto;
  box-shadow: 0px 4px 8px rgba(89, 73, 30, 0.16);
}

.plans-container__plans p:nth-child(1) {
  position: absolute;
  top: -16px;
  padding: 8px;
  left: calc(50% - (93px / 2));
  font-family: "inter", sans-serif;
  font-size: 1.2rem;
  line-height: 1.45rem;
  font-weight: 700;
  border-radius: 8px;
  color: red;
  background-color: var(--bitcoin-orange);
  color: var(--just-white);
}

.plans-container__plans .plans-container__plans-content {
  position: absolute;
  margin-top: 31px;
  text-align: center;
}

.plans-container__plans .plans-container__plans-content h3 {
  font-weight: 500;
  font-size: 14px;
  line-height: 18px;
  color: #000000;
}

.plans-container__plans p:nth-child(2) {
  position: relative;
  width: 65px;
  height: 56px;
  left: calc(50% - (65px / 2));
  font-family: "inter", sans-serif;
  font-weight: bold;
  font-size: 5.2rem;
  line-height: 6.3rem;
  color: #000000;
}

.plans-container__plans sup {
  position: absolute;
  top: 9px;
  left: -6px;
  font-family: "inter", sans-serif;
  font-weight: 500;
  font-size: 1.2rem;
  line-height: 1.5rem;
  color: #363636;
}

.plans-container__plans p:nth-child(3) {
  margin-top: 16px;
  font-family: "inter", sans-serif;
  font-weight: 500;
  font-size: 1.2rem;
  line-height: 1.5rem;
  color: #757575;
}

.plans-container__plans button {
  margin-top: 16px;
  width: 151px;
  height: 48px;
  font-weight: bold;
  font-size: 14px;
  line-height: 18px;
  text-align: center;
  color: var(--warm-black);
  box-sizing: border-box;
  border-radius: 4px;
  border: 2px solid var(--bitcoin-orange);
}

.plans-container__plans .row {
  display: inline-block;
  width: 30px;
  height: 15px;
  margin-left: 10px;
  background: url(./assets/icons/orange-right-arrow.svg) center/cover no-repeat;
}

HTML

<section id="plans" class="main-plans-container">
        <div class="plans-title">
          <h2>Escoge el plan que mejor se ajuste a ti.</h2>
          <p>Cualquier plan te da acceso completo a nuestra plataforma.</p>
        </div>
        <section class="plans-container__slider">
          <article class="plans-container__plans">
            <p>Recomendado</p>
            <div class="plans-container__plans-content">
              <h3>Pago Anual</h3>
              <p><sup>$</sup>99</p>
              <p>*Ahorras $129 comparado al plan mensual.</p>
              <button>Escoger este<span class="row"></span></button>
            </div>
          </article>
        </section>
      </section>
    </main>

Me llamó la atención ver que sobrescribía la opción de margin y después margin-top o margin bottom en muchas de las lecciones. Buscando información creo que esto es una mala práctica. Muchos programadores avisan que esto es una mala práctica. Así como otras prácticas del curso, como centrar un objeto con margin: o auto. Esto no es correcto y te obliga a crear código más largo de lo que debería ser y además, sobreescribe continuamente una regla por encima de otra. Creo que sería bueno revisarlo y corregir esos errores para no empezar con malas prácticas desde el principio.

vamos con todo DIEGO

Para practicar es bueno hacer secciones similares de diferentes formas, pero creo que para un proyecto sería mejor reutilizar el código.
Aquí podríamos reutilizar casi todos los estilos del primer section del main y cambiamos los pequeños detalles que los diferencian.

.plans--title p{
    padding-top: 30px;
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.8rem;
    color: #757575;
}

Así van mis estilos 😉

Like si cuando ven el resultado dicen Peeeerfecto!!! jajaja

👍Cuando height es auto para cajas block significa que el contenido determinara el tamaño final y si el contenido no es suficiente para sobrepasar a min-height, se asumirá el valor de min-height como el alto del elemento…
Por eso me parecía que ambos tenian una similitud en evitar el overflow

Excellent class!

Se pone bueno

buena explicación como se organiza y aplica el css.

Creo que hubiera sido interesante ver una clase de analisis del Figma para crear una clase que unifique las 3 secciones de h2 + p

📢📢 AVISO IMPORTANTE ❗❗📢📢

• Mira el siguiente tutorial para acceder al resumen visual de la clase 📙

Ya casi tenemos listo nuestra landing page que emoción. Ahora hay que hacer lo mismo para nuestra landing page.

resultado final de la lección

.plans--title p

.plans--title h2

.plans--title

.plans--title

.plans--title