Cursos Empresas Blog Live Conf Eventos Precios

0:007:06

Recursos

Resumen

Ahora vamos a aplicar estilos a nuestra sección de planes. En esta ocación trabajaremos el contenedor principal y la caja de texto. Aplicaremos estilos a la sección de las tarjetas más adelante.

¡Muy bien! Vamos a nuestro archivo CSS.

Llamar al contenedor principal

Llamamos la sección principal con su clase .main-plans-container.
Ajustamos su ancho en un 100% y lo limitamos a un mínimo de 320px.
Creamos un espaciado interno inferior de 70px.
Centramos todo el texto contenido con text-align: center.

.main-plans-container {
    width: 100%;
    min-width: 320px;
    padding-bottom: 70px;
    text-align: center;
}

Cómo aplicar estilos al contenedor título

Llamamos el contenedor del texto principal con su clase ~~.plans--title~~.
Ajustamos su ancho en un 90% y lo limitamos a un mínimo de 288px.
Colocamos el alto en auto para que se ajuste automáticamente en la relación al espacio que ocupe el texto.
Como hay un 10% del ancho restante que no se ocupa, lo centramos con margin: 0 auto.
Creamos un margen inferior de 50px para separarlo de las tarjetas.

.plans--title {
    width: 90%;
    min-width: 288px;
    height: auto;
    margin: 0 auto;
    margin-bottom: 50px;
}

Título

Llamamos la etiqueta h2 desde su contenedor directo con .plans--title h2.
Ajustamos el tamaño de la fuente a 2.4rem y su ancho en bold.
Agregamos un interlineado de 2.6rem y cambiamos su color con la variable --black.

.plans--title h2 {
    padding-top: 50px;
    font-size: 2.4rem;
    font-weight: bold;
    line-height: 2.6rem;
    color: var(--black);
}

Descripción

Llamamos la etiqueta p desde su contenedor directo con .plans--title p.
Ajustamos el tamaño de la fuente a 1.4rem y su ancho en 500.
Agregamos un interlineado de 1.8rem y cambiamos su color al valor #757575.

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

Este sería el resultado que obtendríamos en el navegador:

Contribución creada por: José Miguel Veintimilla (Platzi Contributor).

Estilos CSS Base para Sección de Planes en HTML

Curso de Responsive Design: Maquetación Mobile First

Clase 23 de 32

Clase 23 / 32

Jorge Calzada

Hace 5 años

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">
          <h3>Escoge el plan que mejor se ajuste a ti.</h3>
          <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">
              <h4>Pago Anual</h4>
              <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>

Eduardo Peña Ramos

Hace 4 años

Está muy bien.

Comentarios (42)42 comentarios

Rodrigo Martínez I.

Hace 6 años

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.

Victor Andres Castillo Zambrano

gracias amigo

Stalin Badillo

Gracias :)

Julian Camilo Carvajal Mellizo

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.

José Luis Díaz Santos

Sí, siempre debemos pensar en ahorrar código!

Beder Danilo Casa Condori

tienes razon

Joel Dominguez Merino

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

Efraín Hernández García

Muy bueno!

Gracias @EfrainHG Saludos compañero :D

Sabino Fernández

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

Acá parte de mi avance ^^

Juan Christopher

Super!! Te quedo muy bien.

Engelbert Fanor Juárez Bonilla

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.

José M. Veintimilla

Buena aclaración.

Israel Gutierrez

text-align: center;

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

Izquierdo Alicia

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.

Esteban Augusto Colmenares Blanco

En eso estamos claros. Fácilmente se puede reutilizar casi todo el código del inicio por todo el proyecto y solo cambiar pequeñas cosas pero debemos recordar que el hace esto por ser un material didáctico e impedir que los alumnos se pierdan.

Ya es de cada quién investigar de como reutilizar y realizarlo.

Joshua Ortiz Rosales

vamos con todo DIEGO

Alberto Castro Flores

Porque diego prefiere usa padding en un elemento en vez de utilizar margin para un contenedor principla para los espacios?

John Cardenas

Probablemente quería darle un espaciado interno a ese elemento específico, no un espaciado externo. Imagino que en caso de que le haya querido dar uno externo, si hubiese usado margin :D

ok gracias

Omar Gabriel Aguilar Moscoso

Iván Arcos

de hecho las tarjetas son las mismas si nos fijamos en el figma tienen todo lo mismo????

Así es, son las mismas. Pero recuerda que puedes modificar el proyecto a tu gusto :D

Si, tienes razón. Yo le coloque un plan de 15 días por $14 y un plan mensual por $19. Además del plan anual por $99 :D

Melba Indhira Tejada Leonardo

A que se debe que mi archivo html, no se vincula con mi css, el código esta escrito asi.

<co<link rel="stylesheet" href="./styles.css" />de>

Alejandro Guzmán

Es posible que lo tengas mal escrito, podrías separar el "stylesheet" del href. también asegúrate de que tu hoja de estilos se llame así, o pon href="./" y así te aparecen atajos para escoger tu css.

<code> <link rel="stylesheet" href="./style.css">

así esta el mío.

Gonzalo Ceron Denetro

Así van mis estilos 😉

ELIAS HAIAT

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

Abigail Nahomi Chávez Lozano

👍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

Sebastián Arredondo Posada

Excellent class!

Jesus Federico David Herrera

Se pone bueno

Carlos Javier Bazan Huaman

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

Recursos

Resumen

Estilos CSS Base para Sección de Planes en HTML

Progreso del curso

Bienvenida al curso

Setup inicial

Sección de Header

Sección de Intercambios

Sección de Beneficios

Sección de Planes

Sección de Footer

Media Queries

Lighthouse

Próximos pasos