Estructura de sección de planes

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.

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>

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

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;
}```

Para el efecto de scroll:

html{
    scroll-behavior: smooth;
}

✅ Así me quedó

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

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

Así me quedó sin ver la clase

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

Here we go to the next class! 👨🏻‍💻

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.

Lo intente y esto salio!

Muy bueno este curso.

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

Hello guys, here I share this HTML tag it is for “elevate a exponential number”, the name of the tag is “sup”. 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

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–title>h2+p)+section.planes-container-slider>articule.plan-container$*3>p.plan-container–overbox(div.plan-container–box>h3.box–title+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.

sin media queries:

https://ui.dev/amiresponsive?

El atajo que recomienda Platzi

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

El Atajo que les recomiendo yO…

section#plans.main-plans-container>((div.plans--title>h2{Escoge el plan que mejor se ajuste a ti.}+p{Cualquier plan te da acceso completo a nuestra plataforma.})+(section.plans-container--slider>(article.plans-container--card>p.recomended{Recomendado}+div.plan-info-container>h3.plan-card--title{Pago Anual}+(p.plan-card--price>sup{}+{99})+p.plan-card--saving{Ahorras 129 comparado al plan mensual.}+(button.plan-card--ca{Escoge este}>span))))

Recomendado

Increíble lo fácil que es ahora hacerlo :p

📢📢 AVISO IMPORTANTE ❗❗📢📢

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

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

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

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.