A煤n no tienes acceso a esta clase

Crea una cuenta y contin煤a viendo este curso

Estructura de secci贸n de planes

22/31
Recursos

Aportes 34

Preguntas 10

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta 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.

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>

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

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

buen curso realmente me esta gustando mucho

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

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

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

Hola, un plus que yo agregue para desktop es personalizar la barra de scroll. Esto se puede hacer SOLO CON CSS, aunque es necesario usar prefijos.

Te tejo un link a un articulo que habla sobre esto:
https://ed.team/blog/personaliza-el-scroll-de-tu-web-solo-con-css

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.

Para el efecto de scroll:

html{
    scroll-behavior: smooth;
}

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

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! 馃懆馃徎鈥嶐煉