1
00:00:00,450 --> 00:00:06,570
Vamos a comenzar a darle estilo a lo que es la parte de los contactos nueva cuenta Ariel está el CSS

2
00:00:07,250 --> 00:00:12,660
aquí tengo esta Cherubino vamos a darle estilos ahora al H2 el selector de arriba tienen los estilos

3
00:00:12,660 --> 00:00:15,950
que comparten ambos este ya tiene los estilos de cada uno.

4
00:00:16,270 --> 00:00:24,570
Bonsais voy a hacerlo un poco más grande 2 Reem recargamos poco más grande esta parte y puede ver que

5
00:00:24,570 --> 00:00:26,850
el color de contactos es igual al fondo.

6
00:00:26,850 --> 00:00:36,890
Entonces vamos a ponerle aquí Color Bar primario Punto y Coma aguardamos guardamos cambios y se ha ido

7
00:00:36,890 --> 00:00:42,440
porque nos falta el color de fondo que es blanco que tengo beige amarillo que lo voy a colocar junto

8
00:00:42,440 --> 00:00:52,610
a este baqueano amarillo poner punto beige blanco background color y a poner como UIT-T bueno vamos

9
00:00:52,720 --> 00:00:55,130
cambios puede ser Witte pueden ser jefes

10
00:00:57,540 --> 00:01:04,040
recargamos que de esta forma falta un poco de separación aquí entonces vamos a ponerle aquí si recuerdas

11
00:01:04,040 --> 00:01:13,740
anteriormente había creado este que dice contactos a seleccionar ese scroll abajo arriba estoy colocando

12
00:01:13,740 --> 00:01:22,180
los estilos más globales aquí abajo y ya más específicos listado de contactos más contactos y voy a

13
00:01:22,180 --> 00:01:30,880
colocar un par de dos ramp y un margen top de Reem eso me va a dar un poco de separación aquí también

14
00:01:30,880 --> 00:01:34,460
va ponerle un poco de página se va viendo bastante bien.

15
00:01:34,460 --> 00:01:39,020
Después es la parte del contenedor de contactos pues que aquí queda como más centrado.

16
00:01:40,080 --> 00:01:50,920
Tenemos en el Index este contenedor de contactos desde Nueva cuenta lo copio aquí contenedor contactos

17
00:01:50,980 --> 00:02:00,880
apenó Max Wit de 800 píxeles y voy a colocar un margen arriba va a ser de 4 Reem mucho margen cero cero

18
00:02:00,890 --> 00:02:06,650
y auto es decir cuatro Rayma arriba cerro abajo izquierda y derecha no apto para que se centre recargamos

19
00:02:06,650 --> 00:02:12,230
nuestro proyecto y queda un poco más centrado lo que es el Proyecto Ara el siguiente paso lo que quiero

20
00:02:12,230 --> 00:02:15,260
darle estilos es este buscador que está aquí este input.

21
00:02:15,800 --> 00:02:26,160
Si recuerdas en el Index di la clase de buscador copiarla y que adentrada ponerle punto buscador primero

22
00:02:26,190 --> 00:02:32,610
queremos que tome todo el espacio que haya disponible y width 100 por ciento y le va a dar una altura

23
00:02:32,610 --> 00:02:35,980
fija de 4 Rubem un de RAM.

24
00:02:35,990 --> 00:02:37,850
También este es un impacto muy grande.

25
00:02:39,040 --> 00:02:45,090
Más cambios abrimos el proyecto y puede ser que de esta forma como que Lasombra aquí queda más alta

26
00:02:45,100 --> 00:02:47,110
a diferencia de los otros.

27
00:02:47,340 --> 00:02:49,920
Estaremos haciendo algunos pequeños ajustes.

28
00:02:49,920 --> 00:02:55,830
También el color del bordelés es muy oscuros tenemos más claro entonces primero vamos a eliminar el

29
00:02:55,830 --> 00:03:04,800
borde o reescribirlo hacer Border pixel Solid iba a ser uno uno uno no lo pongo como Property porque

30
00:03:04,800 --> 00:03:11,930
nada más aquí lo voy a utilizar es un color muy ligero gris y también lo va a colocar un poco de separación

31
00:03:11,930 --> 00:03:21,160
para que esté separado del texto y el input margin colocar dos Reem y cero para que también se separe

32
00:03:21,160 --> 00:03:24,460
hacia abajo cada separación de esta forma.

33
00:03:24,910 --> 00:03:31,240
Ahora puedes ver qué queda como la sombra muy encima aquí en este poco más dijera podemos abrir e inspeccionar

34
00:03:33,160 --> 00:03:39,580
y voy a copiar aquí colocarme en input aquí se lo van a aplicar los estilos que Podemos los que hemos

35
00:03:39,580 --> 00:03:46,270
visto que se le aplicaron aquí puedes modificar este es el spread tal vez menos aquí yo creo que 5 está

36
00:03:46,270 --> 00:03:47,050
más que bien

37
00:03:49,940 --> 00:03:57,000
creo que está bien y la opacidad digamos .5 creo que también también se va a ver bastante bien.

38
00:03:57,110 --> 00:04:04,860
Creo que este número es mejor definitivamente se ve mucho mejor ir hacia arriba hacia la sombra y pegarlo

39
00:04:04,860 --> 00:04:11,120
aquí y en los otros dos también punto y coma al final

40
00:04:13,790 --> 00:04:17,770
un tricomas y recargamos y creo que se ve mucho mejor.

41
00:04:18,050 --> 00:04:23,330
El siguiente paso es comenzar a trabajar con la tabla la tabla queremos que tome todo el espacio que

42
00:04:23,330 --> 00:04:29,230
haya disponible que tome el 100 por ciento del espacio que quiere en la clase que se llama listado de

43
00:04:29,230 --> 00:04:39,660
contactos pero voy a seleccionar por tabla solamente Yunan todo el proyecto estoy y vamos a ponerlo

44
00:04:39,660 --> 00:04:46,980
aquí with 100 por ciento eso va a ser la tabla más grande que tome todo el espacio que haya disponible.

45
00:04:48,230 --> 00:04:54,840
Entonces queda de esta forma y también un poco de separación que falta es tener un contacto este le

46
00:04:54,850 --> 00:05:05,270
estaremos dando estilos y al final que ponen margin top daydream que de esta forma recargamos subiendo

47
00:05:05,370 --> 00:05:10,980
bastante bien y puedes ver que aquí por ejemplo lo que es el jet tiene este diseño es acopiar esta parte

48
00:05:12,450 --> 00:05:20,210
they will get y podríamos ponerle Heydi el mismo Ivy que tiene en esta parte.

49
00:05:20,210 --> 00:05:26,360
También podría crear una clase siempre es mejor si vas a escribir CSS que sea una clase no sea una Ivy

50
00:05:27,790 --> 00:05:28,780
copiamos esto.

51
00:05:30,640 --> 00:05:38,090
Y que va a poner contactos también estrobo a rescribir creo que se va a ver mejor y veremos tejer el

52
00:05:38,090 --> 00:05:41,680
color de fondo es el mismo color de fondo del sitio web.

53
00:05:41,690 --> 00:05:50,760
Por lo tanto hay poner un color Bahr y va a ser el color primario vemos cambios recargamos y queda de

54
00:05:50,760 --> 00:05:55,920
esta forma puedes ver qué queda así como estas líneas de aquí son sólo por el colapso de la tabla.

55
00:05:55,920 --> 00:06:04,220
Por lo tanto vamos a la tabla nuevamente aquí oponerle Border colapsã iba a tener la variable apropiada

56
00:06:04,220 --> 00:06:10,490
de colapso solo va a eliminar podrías hacerlo directo desde la tabla pero lo puedes hacer con CCS también

57
00:06:11,690 --> 00:06:17,580
y aquí voy a copiar este tenemos el tablet y luego tenemos el Th.

58
00:06:17,580 --> 00:06:21,360
La idea es seleccionar cada uno de los taches para darles un poco de Padín puesto que aquí tienen un

59
00:06:21,360 --> 00:06:31,330
poco de PADI este Szeged th Padín un ram y cero es decir arriba y abajo y que de esta forma y lo que

60
00:06:31,330 --> 00:06:37,190
nos faltaría es ponerle todo al jefe todos los distintos elementos que el jet de color blanco nuevamente

61
00:06:37,210 --> 00:06:37,750
color

62
00:06:40,480 --> 00:06:46,840
jefes recargamos buscando de esta forma se va viendo bastante bien y nos falta que sean en mayúscula.

63
00:06:46,960 --> 00:06:56,860
Entonces de nueva cuenta Tex Transform o percatas esta forma y el siguiente paso es ahora si no que

64
00:06:56,860 --> 00:07:05,700
son los registros que tengo 3 aquí lo que voy a hacer es copiar este todo este que iba a ser lugar de

65
00:07:05,700 --> 00:07:15,500
tejer o hacer body y te que de hecho tengo que revisar aquí si este body no lo puse como los th se utilizan

66
00:07:15,500 --> 00:07:25,480
para el jet estos te VoLTE de son para lo que es el body consiste de colocar un Padín espadín 105 Reem

67
00:07:27,200 --> 00:07:33,380
que tenga un poco de separación que junto a los registros y el siguiente paso es darle estilos a los

68
00:07:33,380 --> 00:07:34,610
botones.

69
00:07:34,610 --> 00:07:42,400
Entonces si recuerdas aquí colocamos el botón veten y veten editar y borrar.

70
00:07:42,620 --> 00:07:43,530
Y este es un botón.

71
00:07:43,540 --> 00:07:49,170
Este botón le está agregando algunos estilos pues ver que tiene un border entonces vamos a escribir

72
00:07:49,170 --> 00:07:50,600
toda esa parte.

73
00:07:50,740 --> 00:07:54,590
Primero que voy a copiar este listado de contactos.

74
00:07:54,770 --> 00:08:01,040
La idea es que no se mezcle con los demás botones que podamos tener al menos este botón y a los otros

75
00:08:01,040 --> 00:08:15,690
iban a ser más globales BDN veten editar y veten eliminar y borrar borrar está bien.

76
00:08:15,850 --> 00:08:19,820
Primero el botón vamos a eliminar de lo que son los estilos que tienen por default por default viene

77
00:08:19,820 --> 00:08:20,530
en un background.

78
00:08:20,530 --> 00:08:26,170
Por lo tanto hacer background color transparente lo pongo como importan para que lo reescriba bien y

79
00:08:26,170 --> 00:08:32,100
un border non para que les quite el border que ya tiene por default todos los botones y eso puede ser

80
00:08:32,130 --> 00:08:33,310
que lo elimina.

81
00:08:33,390 --> 00:08:36,400
Vamos a ver algunos estilos al botón de TN.

82
00:08:36,400 --> 00:08:41,140
Primero un Foncillas va a ser grande dos Reem y un text correction.

83
00:08:41,190 --> 00:08:47,250
No porque programa Alto los enlaces tienen texto correction le va a quitar el text corrigen que eso

84
00:08:47,310 --> 00:08:54,140
hace los iconos más grandes y en el botón de Editar va a tener un color diferente al ser botones fondos

85
00:08:54,160 --> 00:09:02,280
son Ancer etiquetas HTML podemos aplicarle CSS de esta forma color lo que es editar es el color amarillo

86
00:09:02,880 --> 00:09:09,970
va a ser bar secundario y el de borrar o hacer color bar primario.

87
00:09:11,460 --> 00:09:17,580
Guardamos cambios y recargamos y puede ser que cambian los colores de esta forma sabiendo bastante bien

88
00:09:18,490 --> 00:09:21,540
puedes ver que nos hace falta centrar estas acciones.

89
00:09:21,540 --> 00:09:27,180
Podríamos crear una clase aquí en el último registro y que lo centre otra forma en la que lo puedes

90
00:09:27,180 --> 00:09:27,670
hacer.

91
00:09:27,690 --> 00:09:36,980
Déjenme copiar este ya que va a poner TDE y podemos utilizar NPH Chaile achichincles podemos pasar qué

92
00:09:36,980 --> 00:09:39,680
elemento le queremos aplicar a algunos estilos.

93
00:09:39,680 --> 00:09:49,340
Ahora tenemos tb y si vemos lo que es el índex tenemos un TD 2 3 y 4 y queremos aplicárselo al 4 x 4

94
00:09:50,240 --> 00:10:01,730
y ponerlo en Texas Ligne Text Line Center y eso nada más le va a aplicar el cuarto TD y lo va a centrar

95
00:10:01,730 --> 00:10:08,270
los demás dos van a ignorar y de esta forma los botones quedan centrados ahora si hacemos todo esto

96
00:10:08,270 --> 00:10:13,370
pequeños para hacer de esta tabla responsive puede ser que se vea bien pero si quisieras hacer la responsivo

97
00:10:13,370 --> 00:10:16,070
un poco más se va mejor.

98
00:10:16,070 --> 00:10:19,000
Puedes ver que coloque lo que viene siendo este contenedor.

99
00:10:19,010 --> 00:10:25,480
Tabla entonces lo que hacen muchos Freund Gorz para tener este tipo de elementos como responsivo es

100
00:10:27,330 --> 00:10:36,070
poner es ponerle el selector a un padre algo que lo rodeé y ponen overflow scroll nada más con eso la

101
00:10:36,070 --> 00:10:40,900
tabla ya va a tener este pequeño scroll que se ve no muy bien que digamos no así como que el 100 por

102
00:10:40,900 --> 00:10:46,300
ciento perfecto pero si alguien desde un dispositivo muy pequeño pues al menos el contenido no se va

103
00:10:46,300 --> 00:10:53,570
a ver tan pequeño o no se va a salir del espacio o solamente cuando se lo overflow en un tamaño muy

104
00:10:53,620 --> 00:10:55,120
pequeño.

105
00:10:55,180 --> 00:11:00,220
Lo último que quiero hacer es estos botones que están estos contactos aquí puedes ver que hice 2 contactos

106
00:11:00,220 --> 00:11:03,360
aquí tres pero todo eso lo veremos cómo hacerlo.

107
00:11:03,490 --> 00:11:07,360
Que detecte la cantidad dinámicamente un poco más adelante.

108
00:11:07,760 --> 00:11:09,130
Entonces vamos a ponerle aquí.

109
00:11:09,670 --> 00:11:18,660
Si recuerdas en el índex le di una clase que se llama Total contactos lo vas a copiar y es esta antes

110
00:11:18,660 --> 00:11:28,450
del contenedor más o menos aquí lo va a colocar total contactos y total contacto.

111
00:11:28,550 --> 00:11:40,350
Spam solamente quiero ver contactos con s al final primero va a tener un margen de dos remisero para

112
00:11:40,350 --> 00:11:46,080
que tenga un poco de separación el texto va a estar centrado Tex al encender el color va a ser el mismo

113
00:11:46,080 --> 00:11:55,870
color color primario y el Foncillas va a ser grande para esta parte al menos horren que viene siendo

114
00:11:55,870 --> 00:12:01,230
lo que son los contactos este 2 está en el spam que es el siguiente.

115
00:12:01,230 --> 00:12:09,720
Por lo tanto el Foncillas va a ser más grande aún con 6 3 RAM y un zoom waited de 900 recargamos dos

116
00:12:09,770 --> 00:12:16,530
contactos y aparece de esta forma sabiendo bastante bien que podríamos utilizar la misma fuente para

117
00:12:16,530 --> 00:12:18,680
que se vea más uniforme.

118
00:12:18,680 --> 00:12:29,910
Tenemos bar Font Family primero bar fuente y la secundaria recargamos y queda de esta forma dos contactos

119
00:12:30,000 --> 00:12:34,860
diferentes fuentes de aquí pero creo que se ve más uniforme de esta forma y va quedando bastante bien.

120
00:12:35,780 --> 00:12:39,760
En el siguiente video vamos a continuar trabajando con este proyecto puedes ver que se está quedando

121
00:12:39,760 --> 00:12:41,170
bastante bien.

122
00:12:41,170 --> 00:12:46,660
Vamos a comenzar a habilitar lo que es la edición esto nos lleva a otro formulario y veremos cómo reutilizar

123
00:12:46,660 --> 00:12:48,460
este formulario lo más posible.

124
00:12:48,550 --> 00:12:50,700
Todo eso lo veremos a partir del próximo video.