Bienvenidos de nuevo, todo el mundo. Es hora de que dejemos de aprender cosas nuevas y pongamos en práctica las cosas de las que hemos estado hablando en la última semana. Lo que vamos a hacer es añadir algunos de los nuevos componentes en los que hemos estado trabajando. Pero vamos a hacerlo juntos mientras codificamos, así que de nuevo voy a subrayar que realmente espero que te detengas, dejes lo que sea que estés haciendo, preparas tu portátil o lo que sea que estés codificando, y codificas conmigo en lugar de ver lo que estoy haciendo. La última vez que estábamos codificando juntos, con suerte creaste algo que se parece a esta pantalla de aquí. Hemos entrado y habíamos utilizado ancho y diferentes pantallas, relleno y margen y estábamos haciendo nuestra página un poco mejor. Hoy, vamos a ir un paso más allá y añadir algunos elementos diferentes como gradiente, en lugar de tener tres secciones de igual ancho vamos a tener algunas secciones ocupando la mitad de la página, otras ocupando la página completa, pequeñas cosas como esta. Y vamos a utilizar estos nuevos selectores que hemos estado estudiando. Entonces, sigamos adelante y comencemos. Lo primero que quiero hacer es poner en ese gradiente lineal o ese nuevo color que va tanto en el encabezado como en el pie de página. Así que cuando vaya a mi hoja de estilo, y voy a venir aquí. Una de las primeras cosas que quiero hacer es poner en que necesitamos un nuevo fondo para el encabezado y el pie de página. Y voy a empezar por ponerlo aquí. Sé que hice trampa, copié y pegué. Pero quería hacer eso, lo siento. Quería hacer eso, porque seguí arruinando la pata cuando estaba escribiendo. Así que, lo que he puesto aquí, es que he empezado poniendo un color de fondo. Siempre quieres hacer eso, porque si no lo haces, si por alguna razón el navegador no puede manejar el gradiente lineal, le has dado un retroceso. Luego, he tenido mi regla de gradiente lineal en cada uno de los diferentes webkits. Así que una vez que agregue eso y presione Guardar, podemos actualizar la página y ver si tenemos ese tipo de color gris a azul que estábamos buscando. Hey, genial, lo hicimos. Ahora, cuando escribí esta regla, podrías recordar que puse encabezado, pie de página y eso significa que se supone que se aplica a ambos elementos. Pero solo se aplicó al encabezado. Tenemos que pensar en por qué sucedió eso. La razón es que si nos desplazamos hacia abajo, se puede ver que más abajo en la página que he dicho, quiero que mi fondo de pie de página sea de este color particular. Esto sobrescribe cualquier regla anterior, así que voy a entrar aquí. Y voy a borrar esto, y decir, vamos a deshacernos de eso. Refrescar, y genial. Ahora se ve mucho mejor. Vale, así que hemos hecho ese cambio, y espero que te estés acostumbrando a la idea de usar la coma para darle estilo a dos elementos a la vez, puedes hacer aún más y poner estos prefijos de kit web o prefijos del navegador. Si se deshace de él, puede funcionar en su navegador, pero hay una muy buena posibilidad de que no funcione en el otro navegador. Así que queremos practicar esto. Muy bien, echemos un vistazo y veamos qué tenemos. Tengo el gradiente dentro. Lo siguiente que quiero abordar es diseñar estos enlaces, y de nuevo, no estoy diseñando todos los enlaces en la página, porque si te das cuenta, este aquí abajo todavía se ve exactamente igual. Solo quiero diseñar los enlaces que están dentro de la sección de navegación. Así que, voy a ir aquí y, he estilizado mi navegador. Se ve bien. La próxima vez, voy a decir, hey, vamos a diseñar sólo esos enlaces que están dentro del navegador. Y, hemos hecho bastantes cambios. Si vengo aquí, podemos verlo. Uno hemos añadido algo que se parece a una estructura de caja. Normalmente no se puede hacer esto porque en los elementos de línea no se toman un ancho y una altura, pero vamos a seguir adelante y jugar con él. Vamos a empezar, primero voy a decir que me gustaría que el ancho de cada uno de mis enlaces sea de alrededor del 22%, guarde esto. Refresca, no hay suerte. Una vez más, recuerda, una de las cosas que dije es que los enlaces están en línea y no puedes darles ancho o alto. Así que ahora, si entro y digo que cambiemos nuestra pantalla a bloque en línea, deberíamos tener mucha mejor suerte. Casi demasiada suerte, porque la pantalla no encaja en eso. ¿ Todo bien? Muy bien. Tan genial, eso está un paso más cerca. Añadamos ese color de fondo diferente. Y creo que lo hice blanco. Pero puedes usar lo que quieras. ¡ Boom! Definitivamente nos estamos acercando. Pequeños pasos nos están acercando mucho, mucho más. Por lo tanto, lo siguiente que quiero abordar mientras tratamos de cambiar nuestra página es esta idea de que algunas de las secciones deben ocupar la mitad de la pantalla, mientras que algunas de las secciones deben seguir adelante y ocupar todo el ancho de la pantalla. Y la forma en que vamos a hacerlo es usando clases. Si recuerdas, las clases son una forma de darle estilo a ciertos grupos de elementos de maneras similares. Así que vamos a ver cómo vamos a hacer esto. Lo primero que tengo que hacer es hacer una nueva clase, y esta clase va a decir, en lugar de que todas las secciones ocupen el 30%, solo quiero algunas de ellas, voy a llamarles la mitad para que ocupen, digamos el 45% de la página. De esta manera sólo va a recoger algunas de las secciones, no todas ellas. Si actualizo, aún no funcionará porque el problema es que me deshice de mi estilo de sección y lo reemplazé con esta clase y en ninguna parte de mi HTML recordé hacer referencia a la clase. Así que por primera vez vamos a entrar en nuestro archivo HTML y empezar a hacer algunos cambios. Voy a ir aquí, me gustaría que este solo ocupara la mitad de la pantalla, así que diré clase = mitad. Y me gustaría que éste ocupara la mitad de la pantalla. Tenemos eso. No vamos a cambiar el otro, así que cuando me refresque, pueden ver que dos de ellos están ahora al lado del otro. Así que cuando lo he refrescado parece un poco más cerca, aparte de que tengo cosas raras pasando con algunas cosas azules y diferentes. Así que esto es porque he estado usando flotador. Y si recuerdas, cuando usas flotar a veces hace que las cosas que están al lado del otro estén básicamente en posiciones en las que no quieres que estén. Así que nuestra sección inferior, la que sabíamos que no queríamos estar flotando, tenemos que entrar y decir hola, hay ciertas secciones que queremos ser enteras. Así que volvamos a nuestra hoja de estilo. Y voy a hacer un poco de copiar y pegar aquí. Y voy a decir, ¿sabes qué? Esta sección, necesito que sea la clase igual a toda. Así que regresa por aquí. Clase de sección = entera, lo que significa que este debe ocupar todo el ancho, no intente flotarlo uno al lado del otro. Y vamos a seguir adelante y refrescarnos. Eso se ve mucho mejor. Parece que queríamos que las cosas estuvieran al final. Y de nuevo, presta atención. Solo los enlaces de navegación tienen estilo, no todos los enlaces. Hemos puesto en el gradiente. Si el degradado no funciona, puede deberse a que no has puesto los prefijos de tu navegador. Realmente tenemos un montón de pequeñas cosas sucediendo en esta página. Y de nuevo, no soy un artista gráfico, así que no hago las cosas más bellas. Pero es divertido entrar y crear cosas diferentes y ver cómo puedes peinarlas tú mismo. Así que, sigue adelante y buena suerte y no te preocupes cuando golpees esos errores tipográficos. Todos lo hacemos.