1 00:00:00,360 --> 00:00:05,070 En esto íbamos a comenzar escribiría un poco de CSS para nuestra aplicación que no se vea de esta forma 2 00:00:05,360 --> 00:00:08,010 parece de página web de los noventas. 3 00:00:08,010 --> 00:00:11,280 Vamos a comenzar a escribir un poco de CSS para que se vea mejor. 4 00:00:11,280 --> 00:00:15,900 La idea es terminar todo lo que es el fondo y esta parte amarilla junto a esta sombra que está aquí. 5 00:00:16,540 --> 00:00:22,670 Y para ello lo primero que vamos a hacer es mostrarte bueno mostrar el boxing. 6 00:00:22,740 --> 00:00:26,750 Esta es una técnica recomendada por estas personas para Leiris. 7 00:00:26,850 --> 00:00:32,430 él trabaja con Google Chrome es de las personas que está siempre agregando nuevas cosas en Google Chrome 8 00:00:33,180 --> 00:00:34,550 y recomienda utilizar el book 6. 9 00:00:34,560 --> 00:00:35,800 De esta forma. 10 00:00:36,300 --> 00:00:42,340 Por eso lo he utilizado a lo largo del curso más que nada lo que es el box. 11 00:00:42,360 --> 00:00:48,600 De esta forma nos va a permitir que si agregas un pad indicamos qué un elemento le defines 200 píxeles 12 00:00:49,080 --> 00:00:54,840 pero le agregas un par de 50 pixeles el elemento nos queda de 200 píxeles queda 250. 13 00:00:54,840 --> 00:01:02,460 Entonces esta técnica eso es lo que hace que si agregas un widget 200 y le agregas un par de 100 el 14 00:01:02,460 --> 00:01:04,200 elemento se mantenga de 200. 15 00:01:04,200 --> 00:01:12,800 Eso es lo que hace este código por eso lo vamos a agregar es una red que comparte lo voy a cerrar ya 16 00:01:12,800 --> 00:01:17,940 esta parte y lo siguiente que voy a hacer es colocar un body. 17 00:01:17,940 --> 00:01:28,140 Vamos a colocar el color de fondo background color y el que va a ponerse 2 1 8 5 ve entonces guardamos 18 00:01:28,140 --> 00:01:31,840 cambios abrimos el proyecto y aparece el color de fondo. 19 00:01:31,890 --> 00:01:37,830 Ahora la idea de este proyecto es comenzar a utilizar ya las técnicas más modernas utilizar Grille donde 20 00:01:37,830 --> 00:01:44,760 sea posible utilizar Flex Books o utilizar la nueva sintaxis de JavaScript y también es buena idea utilizar 21 00:01:44,760 --> 00:01:47,900 la sintaxis de CSS. 22 00:01:47,970 --> 00:01:51,240 Vamos a utilizar lo que se conoce como custom properties. 23 00:01:51,240 --> 00:01:58,950 Para este proyecto custom Property es muy similar a las variables que vas a encontrar en tecnologías 24 00:01:58,950 --> 00:02:00,330 como zas zas. 25 00:02:00,330 --> 00:02:04,760 La ventaja que tiene una de muchas es que te permite crear variables. 26 00:02:04,830 --> 00:02:10,710 La ventaja de crear una variable utilizando custom properties es que si por ejemplo utilizas este color 27 00:02:11,220 --> 00:02:18,390 en 30 o 40 elementos de tu sitio web si el cliente decide cambiarlo si tú decides cambiarlo tienes que 28 00:02:18,390 --> 00:02:24,660 hacer el cambio 40 veces utilizando custom Property solamente haces el cambio en lo que es el Custom 29 00:02:24,660 --> 00:02:28,710 Property y puede sonar complicado pero créeme que no lo es. 30 00:02:28,710 --> 00:02:31,770 Lo primero es que aquí arriba tienes que colocar un elemento que se llame Root. 31 00:02:32,010 --> 00:02:36,750 De esa forma se almacenan las variables en el root y esquiva ponerle un nombre. 32 00:02:36,870 --> 00:02:39,890 Los nombres de las propiedades siempre inician con dos guiones. 33 00:02:40,030 --> 00:02:46,020 Vamos a ponerle aquí colores como un color rosa pero podrías nombrarlo rosado o también yo recomiendo 34 00:02:46,020 --> 00:02:52,450 que por ejemplo pongas como primario por ejemplo primario y después le das el valor que vendría siendo 35 00:02:52,450 --> 00:02:56,390 éste lo pegas aquí. 36 00:02:56,400 --> 00:03:01,500 Ahora cómo utilizas esto ya crea lo que viene siendo el Custom property en root y almacena esta variable 37 00:03:01,500 --> 00:03:02,020 aquí. 38 00:03:02,240 --> 00:03:09,900 Ahora para acceder a esto aquí colocas bar Yongbyon y luego el nombre de lo que viene siendo la variable 39 00:03:10,890 --> 00:03:14,490 y recargas aquí y puedes ver que continúa funcionando. 40 00:03:14,490 --> 00:03:20,730 La ventaja de esto de nueva cuenta es que una vez que utilices estas variables múltiples veces solamente 41 00:03:20,730 --> 00:03:25,440 haces un cambio aquí y se va a propagar en todos los electores en los que hayas hecho ese cambio. 42 00:03:25,440 --> 00:03:30,450 Me gusta mucho utilizar custom properties no tienen soporte al 100 por ciento pero más adelante veremos 43 00:03:30,450 --> 00:03:38,360 cómo hacerlo es una buena técnica y no digo que aprender sea malo pero si solamente querías aprender 44 00:03:38,360 --> 00:03:42,210 Saz por las variables pues puedes utilizar custom properties. 45 00:03:42,500 --> 00:03:45,800 Segundo color que vamos a crear es uno que se va a llamar secundario 46 00:03:49,160 --> 00:03:54,230 Yongbyon secundario que vendría siendo el color amarillo que predomina en el diseño pues es el que está 47 00:03:54,230 --> 00:03:59,900 aquí hasta aquí abajo también y cuando das criquet en editar este botón también tiene ese color. 48 00:03:59,900 --> 00:04:04,290 Por lo tanto lo vamos a estar utilizando como color primario y secundario. 49 00:04:04,490 --> 00:04:13,910 Este va a tener un valor de FFs unos 107 son colores que yo ya elegí ya tengo los valores desde un programa 50 00:04:14,850 --> 00:04:22,970 entonces se lo vamos a utilizar en lo que viene siendo Index tenemos este gran amarillo y lo voy a utilizar 51 00:04:23,030 --> 00:04:29,640 una vez aquí va gran amarillo y de esta forma este gran amarillo lo podemos utilizar muchas veces a 52 00:04:29,640 --> 00:04:34,040 lo largo de nuestro nuestro proyecto también lo puedes poner como Bagram primario. 53 00:04:34,140 --> 00:04:44,230 Si deseas casa lo voy a dejar así de nueva cuenta a un color y va a tener bar secundario y guardamos 54 00:04:44,240 --> 00:04:50,330 cambios y abrimos nuevamente el proyecto y aparece el color amarillo entonces se va viendo bastante 55 00:04:50,330 --> 00:04:56,990 bien lossiguientes que va a crear un contenedor para lo que viene siendo para centrar todo nuestro nuestro 56 00:04:56,990 --> 00:05:01,730 texto nuestros elementos y vamos a utilizar Flex Book Sigfrid. 57 00:05:01,760 --> 00:05:07,080 Pero la parte central un elemento sigue siendo más fácil con Margin Cervatos. 58 00:05:07,810 --> 00:05:16,340 Si recuerdas aquí se llama contenedor y voy a colocar aquí punto contenedor iba a colocarlo en Max width 59 00:05:16,940 --> 00:05:25,050 de mil 100 píxeles y un margen cero auto para que lo centre mucho más sencillo que centrarlo con Flags 60 00:05:25,060 --> 00:05:30,540 Box en mi opinión lo siguiente puedes ver que el diseño final tiene una pequeña sombra aquí pequeño 61 00:05:30,560 --> 00:05:37,220 sombreado la forma más fácil de hacerlo es utilizando CIESAS Matic en mi opinión si ese es puntocom 62 00:05:37,790 --> 00:05:43,430 aquí vas a encontrar Boggiano generador de boqueadas este va a tener una parte más visual de generarlo 63 00:05:44,300 --> 00:05:48,790 por ejemplo el horizontal lo puedes mover y decidir hacia dónde se mueve qué lo va a poner como ser 64 00:05:48,790 --> 00:05:56,360 o para qué quede centrado horizontalmente y el vertical de arriba y hacia abajo para tener una sombra 65 00:05:56,360 --> 00:06:04,300 muy ligera lo que viene siendo nuestro nuestro elemento aquí en el blog también lo va a poner muy poco 66 00:06:06,160 --> 00:06:14,790 un poco más abajo entonces la ventaja que tiene esto es que lo puedes ver cómo va quedando yo creo que 67 00:06:14,790 --> 00:06:20,910 ahí se ve bastante bien y lo que viene siendo la opacidad también te permite lo que es qué tan oscuras 68 00:06:20,940 --> 00:06:28,720 la sombra más o menos así lo va a dejar copiarlo y copias todo este código. 69 00:06:28,720 --> 00:06:33,320 Y si recuerdas creamos una clase que se llama sombra pues de esa forma podemos reutilizarla mucho a 70 00:06:33,320 --> 00:06:42,170 lo largo del proyecto sombra y pegamos lo que es ese código que nos ha generado ese es Matic si guardas 71 00:06:42,200 --> 00:06:48,410 cambios y recargas pues el que aparece una pequeña sombra aquí tal vez que quisieras hacer un poco más 72 00:06:48,680 --> 00:06:59,050 más grande lo que el vertical y digamos aquí de 5 puedes copiar nuevamente y reemplazar tu código y 73 00:06:59,050 --> 00:07:06,780 que quede hasta que quede como tú deseas que quedaba mejor de otra forma y creo que así queda mucho 74 00:07:06,780 --> 00:07:07,950 mejor. 75 00:07:07,950 --> 00:07:14,220 Estos son algunas herramientas que puedes utilizar para hacerlo más sencillo aparte de generar efectos 76 00:07:14,220 --> 00:07:20,340 como estos que estamos viendo como sables algunos estilos al formulario ambos formularios como añadir 77 00:07:20,340 --> 00:07:26,910 contacto y como editar tienen el mismo diseño entonces podemos seleccionar únicamente por el formulario 78 00:07:27,800 --> 00:07:28,920 si formulario 79 00:07:31,320 --> 00:07:35,120 formulario y a seleccionar. 80 00:07:35,300 --> 00:07:43,250 Voy a darle un Padín de tres RAAM tres frames mucho más que tres píxeles que lo vas a entrar un poco 81 00:07:43,250 --> 00:07:52,110 mejor que no quede el contenido como tal a la orilla y también margen top de 2 Reem 2 Efren para que 82 00:07:52,110 --> 00:07:58,620 tenga separación entre lo que es la barra esta parte de aquí y el formulario es un poco de separación 83 00:07:58,620 --> 00:07:59,430 nada más. 84 00:07:59,530 --> 00:08:05,190 La siguiente va a ser el selector del leyen puedes ver que tenemos esta parte dañada en contacto y todos 85 00:08:05,190 --> 00:08:09,690 los campos son obligatorios para eso requiero puede ser que la fuente es diferente. 86 00:08:09,900 --> 00:08:15,750 Vamos a utilizar una fuente de Google Fonts me gusta mucho Google Fonts porque tienen más gran cantidad 87 00:08:15,750 --> 00:08:22,470 de fuentes todas son gratis libres de derecho y por ejemplo si tienes un texto como éste que dices añada 88 00:08:22,470 --> 00:08:29,070 un contacto puedes seleccionar el texto y ponerla que añada un contacto e ir viendo con qué fuentes 89 00:08:29,070 --> 00:08:31,360 quieres que tu diseño se ve mucho mejor. 90 00:08:31,380 --> 00:08:38,720 Yo tengo elegida una fuente se llama Poppins Poppins y es esta fuente nada más das click en este sino 91 00:08:38,730 --> 00:08:45,030 además agrega tu colección te va a permitiria desde aquí tener un código voy a copiar este código el 92 00:08:45,030 --> 00:08:53,150 link y lo vamos a colocar en Leger entonces después de fondos voy a colocar ese código de Poppins y 93 00:08:53,150 --> 00:08:59,230 después aquí abajo viene el código para utilizarlo de nueva cuenta hasta el punto CCC y aquí arriba 94 00:08:59,230 --> 00:09:08,150 puedes colocar una fuente a como fuente sería fuentes secundarias porque vamos a utilizar otra fuente 95 00:09:08,260 --> 00:09:14,110 como primaria que vendría siendo Arial muy fea del área. 96 00:09:14,150 --> 00:09:24,320 Pero la idea es que no tenga esa fuente tan esta que está aquí no me gusta ponerle Arial helvética y 97 00:09:24,320 --> 00:09:26,810 sans serif. 98 00:09:27,230 --> 00:09:32,330 De esta forma entonces lo que viene siendo en el body voy a utilizar esa fuente colocarla aquí en Font 99 00:09:32,330 --> 00:09:42,480 Family enervar fuente primaria y eso va todas las fuentes de nuestro diseño a utilizar Arial y vamos 100 00:09:42,480 --> 00:09:45,390 a darle estilo a lo que es el leyen de nueva cuenta. 101 00:09:45,390 --> 00:09:53,180 Volvemos a esa parte me colocar aquí foram leyendo todos los leyendo van a tener la misma fuente que 102 00:09:53,210 --> 00:09:58,890 ponemos font family Bar y vamos a utilizar fuente secundaria que vendría siendo la fuente de Google 103 00:09:58,920 --> 00:10:05,360 Fonts cambio recargamos y ya cambia un poco esta fuente que está aquí ahora. 104 00:10:05,400 --> 00:10:09,840 Lo primero que voy a hacer es darle estilos a los que viene siendo añado en contacto después todos los 105 00:10:09,840 --> 00:10:18,030 campos son obligatorios eso es el spam por lo tanto aquí va a colocar 6 2 Reem para hacerla más grande. 106 00:10:18,030 --> 00:10:22,910 Lo que está aquí también lo voy a centrar Text Line. 107 00:10:23,280 --> 00:10:30,200 Va a ser Center entonces lo centra el texto y puedes ver que todos los campos son obligatorios están 108 00:10:30,220 --> 00:10:36,110 un salto de línea y este más pequeño podría ser aquí y agregarle a lo que viene haciendo el Index un 109 00:10:36,120 --> 00:10:37,800 break tiene esta parte. 110 00:10:37,800 --> 00:10:39,710 Br. 111 00:10:39,810 --> 00:10:46,000 Te daría el mismo efecto de salto de línea pero puedes también hacerlo por medio de CSS algo similar 112 00:10:47,200 --> 00:10:55,160 son leyen y eso es pan para no hacer un selector tan grande voy a colocar aquí leyen Span podríamos 113 00:10:55,160 --> 00:11:01,190 darle también una clase todas las formas son correctas Foncillas va a ser una fuente mas pequeña de 114 00:11:01,190 --> 00:11:04,440 un Reem un margen top de 10 pixeles. 115 00:11:04,460 --> 00:11:08,120 También podría ser un green para que tenga un poco de separación en cualquiera de los dos números también 116 00:11:08,130 --> 00:11:14,790 un pixel o REMS y para tener el salto de línea vas a poner un clip bought y los Spahn tienen un tipo 117 00:11:14,790 --> 00:11:18,040 de mostrarse inline inline. 118 00:11:18,060 --> 00:11:23,610 En este caso quiere decir que se va a colocar así junto con el otro lo vamos a cambiar por Display Block. 119 00:11:23,610 --> 00:11:29,980 De esa forma nos garantizamos que tome todo el espacio y con el Clear Boot estos dos juntos. 120 00:11:30,000 --> 00:11:36,480 El elemento siempre va a estar debajo del leyen sumáramos cambios recargamos y pensar que tenemos el 121 00:11:36,480 --> 00:11:41,940 mismo resultado que si hubiéramos utilizado un break tenemos añado en contacto y todos los campos son 122 00:11:41,940 --> 00:11:48,270 obligatorios para mencionarles a la persona que tienes que llenarlos todos sabiendo bastante bien el 123 00:11:48,270 --> 00:11:49,470 proyecto. 124 00:11:49,470 --> 00:11:53,590 Lo último que quiero hacer es la parte de aquí arriba que hice agenda de contactos pues ver que les 125 00:11:53,590 --> 00:12:00,190 falta un poco a la nuestra nos hará un poco de scroll hacia arriba y aquí vamos a colocar primero a 126 00:12:00,190 --> 00:12:07,580 colocar un H1 y H2 todos los jedis 1 y 2 que tengamos van a utilizar la fuente de Google Photos from 127 00:12:07,600 --> 00:12:18,360 family bar nuevamente fuentes secundarias de Google Fonts y después vamos a poner un texto Layne Center 128 00:12:19,170 --> 00:12:26,740 y los H1 y los HD2 siempre tienen un margen tenemos margen cero porque no los quiero tener y más abajo 129 00:12:28,220 --> 00:12:30,050 voy a colocar contenedor barra 130 00:12:32,700 --> 00:12:42,790 y en este caso vamos a crear otro tercer color que va a ser primario oscuro y que iba a colocar a colocar 131 00:12:42,790 --> 00:12:48,940 como RGB 156 10 69. 132 00:12:48,960 --> 00:12:53,830 También puedes colocar declarar a los colores los colores de esta forma este RGB más que nada viene 133 00:12:53,830 --> 00:12:59,670 porque si inspeccionada aquí en Google Crom digamos el body y haz click aquí. 134 00:12:59,670 --> 00:13:07,120 Aquí puedes seleccionar si va a ser como RGB a como HCl o como hexadecimal entonces es el valor de ahí 135 00:13:07,140 --> 00:13:14,420 lo obtuve en realidad no sé si vamos a volver un poco el contenedor barra va a tener un background color 136 00:13:15,660 --> 00:13:23,670 Bar y va utilizar primario oscuro guardamos cambios si recargamos vemos que aparece la barra de esta 137 00:13:23,670 --> 00:13:30,110 forma se centra nuestro texto aquí tengo la H1 la aplica algunos estilos pero voy a crear nuevamente 138 00:13:30,110 --> 00:13:35,960 la H1 para asi con los estilos que van a ser propios del H1 de otros estilos que comparte con el Jenin 139 00:13:35,960 --> 00:13:41,700 2 apenas un par de 20 pixeles y el color del texto va a ser blanco. 140 00:13:41,750 --> 00:13:48,020 No pongo el blanco como un color de variables porque Blanco solamente hay uno que lo voy a dejar así 141 00:13:48,170 --> 00:13:53,870 puedes crear una variable si lo crees conveniente que se centra correctamente y con eso Finalizamos 142 00:13:53,870 --> 00:13:58,220 este video puedes ver que nos faltan los que son los campos que se vean de esta forma para eso estaremos 143 00:13:58,220 --> 00:14:00,950 utilizando Flex asi que lo veremos en el próximo video.