No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Estructura de secci贸n de planes

22/32
Recursos

Nos encontramos en la 煤ltima secci贸n de nuestro proyecto en el que vamos a estar creando la estructura HTML para posteriormente aplicar los estilos necesarios. Primero, analicemos el contenido visual para determinar las etiquetas que usaremos.

An谩lisis del dise帽o para la secci贸n de planes

Tenemos varios elementos a observar:

  • Un primer contenedor con el t铆tulo principal y la descripci贸n.
  • Luego una section para las tres tarjetas con los precios, cada tarjeta en su propio contenedor article.
  • Dentro de cada tarjeta encontramos un texto en caja flotante, otro con el tipo de pago, otro con el valor, otro con la descripci贸n del plan y por 煤ltimo un button con un 铆cono a lado.
ejemplo de dise帽o de secci贸n

C贸mo hacer la maquetaci贸n

Conociendo las etiquetas que debemos usar, empezamos a maquetar nuestra estructura:

        <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--card">
                    <p class="recomended">Recomendado</p>
                    <div class="plan-info-container">
                        <h3 class="plan-card--title">Pago Anual</h3>
                        <p class="plan-card--price"><sup>$</sup> 99</p>
                        <p class="plan-card--saving">*Ahorras $129 comparado al plan mensual.</p>
                        <button class="plan-card--ca">Escoge este <span></span></button>
                    </div>
                </article>
            </section>
        </section>

Recuerda que puedes crear toda estructura con una sola l铆nea de c贸digo utilizando Emmet, de esta forma:

(div>h2+p)+section>article>p+div>h3+p*2+button
  • Agregamos un id a la secci贸n principal para poder enlazarla con el bot贸n 鈥Conoce nuestros planes鈥 que dise帽amos en la secci贸n del header. Colocamos el mismo nombre tanto en el ancla del bot贸n, como en el id de la secci贸n.
  • Creamos una etiqueta sup para el signo de d贸lar que se muestra junto al precio. Esta etiqueta define un fragmento de texto que se debe mostrar, por razones tipogr谩ficas, m谩s alto, y generalmente m谩s peque帽o, que el tramo principal del texto.
  • Agregamos nombres descriptivos a cada etiqueta gen茅rica y completamos los espacios con el contenido respectivo.

Y as铆 terminamos de crear la estructura de esta 煤ltima secci贸n. Ahora vamos a por esos estilos.

Contribuci贸n creada por: Jos茅 Miguel Veintimilla (Platzi Contributor) con aportes de Sneyder Alfonso Barreto Buitrago y Jean Paul Yepes.

Aportes 42

Preguntas 12

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

Podemos generar de manera sencilla un smooth scrolling al hacer clic en el bot贸n del header agregando al CSS:

html {
	scroll-behavior: smooth;
}

Preview:

En los comentarios se aprende el doble. 鉂わ笍

Considero que queda mejor una etiqueta <sup> en vez de <span> para el s铆mbolo 鈥$鈥 ya que se encuentra en superscript.

Lo mejor de platzi es su solida comunidad! Los aportes de los otros estudiantes lo hace TODO!

Intente hacer la estructura de las Cards鈥
La verdad sent铆 con mas soltura al aplicar estilos aunque claramente aun me faltaron algunos detalles que quiero pulir en las pr贸ximas clases!
Pero el chiste es intentar y tratar de solucionar los problemas.

Buenas, les dejo esta herramienta que es muy buena ScrollReveal, hace que los efectos de scroll se vean muy smooth.

en al colocar el texto de precio, podemos usar la etiqueta sup para el simbolo de dolar

<p>
	<sup>$</sup>99
</p>

Esto tiene mas valor sem谩ntico que solo colocarle <span>

Para obtener el maquetado en una sola linea en VScode usa:

(div>h2+p)+section>article>p+div>h3+p*2+button

Pulsa tab y listo. (Si no te funciona si lo copias y lo pegas es porque no lo reconocio como un snippet, solo borra la ultima letra al final y la vuelves a poner y te la reconoce)

La comunidad es de lo mejor de platzi. Complementan siempre la clase y se aprende el doble. 隆Arriba la comunidad de Platzi! 馃ぉ馃挌

Chicos, les recomiendo cuando empieza la clase intentar hacerlo primero ustedes solos y luego ver la clase para ver que puede mejorar en su codigo. Igual se me ha hecho un poco m谩s facil jugar con las posiciones gracias a flexbox ya que lo ense帽an en las primeras clases de la escuela de JS

Logre hacerlo antes de ver el video.![](

buen curso realmente me esta gustando mucho

Otra opci贸n al hacer clic en conoce nuestros planes para que vaya directo a las opciones es agregar scroll-behavior: auto; en html en CSS

html {
  font-size: 62.5%;
  font-family: "DM Sans", sans-serif;
  scroll-behavior: auto;
}```

鉁 As铆 me qued贸

Los contenidos de las 3 tarjetas estaban en Ajustes + Breakpoints en la parte izquierda de Figma:

Para el efecto de scroll:

html{
    scroll-behavior: smooth;
}

Este m茅todo lo hace instant谩neamente pero es mejor usar el valor smooth para que se visualice el desplazamiento desde el boton hasta la seccion de planes 鈫

html {
  font-size: 62.5%;
  font-family: "DM Sans", sans-serif;
  scroll-behavior: auto;
}

鈫 Podemos generar de manera sencilla un smooth scrolling al hacer clic en el bot贸n del header agregando al CSS:

html{
    scroll-behavior: smooth;
}```

Chicos, si hacen clic derecho sobre un texto en FIgma, pueden copiarlo. As铆 no tienen necesidad de escribirlo

recuerden que si estan en github y de repente tienen errores de escritura en el proyecto esos se pueden arreglar en una rama llamada

hotfix

, o arreglo en caliente

Hello guys, here I share this HTML tag it is for 鈥渆levate a exponential number鈥, the name of the tag is 鈥渟up鈥. there you go

<p><sup>$</sup> 99</p>

and this is the result of this tag

馃挕 Un efecto Smoothagrega suavidad al desplazamiento entre 2 secciones diferentes cuando estas se vinculan mediante una etiqueta <a> Visita m谩s </a>

Por ejemplo

Se puede apreciar que la secci贸n 3 esta vinculada la etiqueta amediante su idlo que indica que al darle click a la etiqueta aesta nos enviara a la secci贸n 3, sin embargo este desplazamiento es brusco.

Entonces

Para suavizar y ver el desplazamiento como si se tratar谩 de una animaci贸n, podemos usar un efecto smooth en el scroll el cual se define en CSS.

HTML

<header>
	<a href="#plans">
		Conoce Nuestros Planes
  </a>
</header>

<section class="section-1">
Hola soy la secci贸n 1
</section>

<section class="section-2">
Hola soy la secci贸n 2
</section>

<section id="plans" class="section-3">
Hola soy la secci贸n 3
</section>

CSS

/*
	IMPLEMENTANDO EL EFECTO SMOOTH
*/
html{
	scroll-behavior: smooth;
}

El efecto se define en la etiqueta HTML y afecta a todo los desplazamientos realizados.

Recursos


Librer铆a que nos ayuda a definir un efecto smooth personalizado, la forma de usarle se encuentra en la siguient web.

ScrollReveal 4

As铆 me qued贸 sin ver la clase

Es muy emocionado con todo lo que estoy aprendiendo en este curso. Tengo muchas ganas de poner esto en practica en la vida real jajajaj

les comparto el codigo emmet que hice para crear toda la estructura en 1 solo click de forma sencilla como podran apreciar en la imagen, solo seria cuestion que remplacen el nombre de las clases a como las necesiten.

section.main-planes-container>(div.main-planes-container鈥搕itle>h2+p)+section.planes-container-slider>articule.plan-container$*3>p.plan-container鈥搊verbox(div.plan-container鈥揵ox>h3.box鈥搕itle+p.price+p.box-description+button.adquire>span.arrow)

con cada secci贸n se aprende mas a poner el nombre de los estilos de acuerdo a las etiquetas.

Estamos avanzando bastante r谩pido, veamos c贸mo va quedando finalmente nuestra web.

emocionante, lo intente , la primera de tres, en la proxima clase corrigo errores,
la etiqueta** <sub>** permite que una parte del texto se muestre mas peque帽o y en un nivel mas bajo al resto del texto
la etiqueta** <sup>** permite que una parte del texto se muestre mas peque帽o y en un nivel mas alto al resto del texto

Incre铆ble lo f谩cil que es ahora hacerlo :p

馃摙馃摙 AVISO IMPORTANTE 鉂椻潡馃摙馃摙

Aqui les dejo el atajo para escribir la estructura de la seccion:

  • article*3>p+div>h3+p+p+button

Me costo los suyo pero al final lo logre

Muy bueno este curso.

Lo intente y esto salio!

leyendo los comentarios me entere de

scroll-behavior: smooth;

estoy amando esta clase 鉂わ笍


Trate de hacerlo sola, pero no pude completarlo haha
Procedere con las clases, para ver como lo hizo el profe Diego

Esto fue lo que hice, no logre darle la posici贸n al $ ni al texto del bot贸n, espero recordar eso en la siguiente clase.

Para el scroll html{ scroll-behavior: smooth; }

resultado intermedio de la lecci贸n

provoca demasiado ver las clases de Diego, no soy de front y todos los cursos que he visto de Diego han sido un total placer.

Interesaaaanteee la etiqueta id, no sabia en absoluto que se le puede dar ese tipo de uso, creo que ahora queda todav铆a mas claro cuando usar un id

Excelentes consejos, gracias a todos.

Gracias por los aportes chat.

Here we go to the next class! 馃懆馃徎鈥嶐煉