1 00:00:00,640 --> 00:00:09,100 Vamos a abrir nuestro archivo de estilos el MEN punto CCC vamos a darle un poco de scroll y vamos a 2 00:00:09,100 --> 00:00:20,780 agregar un nuevo comentario que va a decir Contador y Contador y lo primero que vamos a ver es esta 3 00:00:20,790 --> 00:00:30,600 clase de Contador para que D.E.P Contador vamos a ponerlo en posición relativa y esto es porque vamos 4 00:00:30,600 --> 00:00:32,750 a aplicar algunos efectos a esta imagen. 5 00:00:34,240 --> 00:00:42,010 Vamos a poner un poco de un filtro de CS3 entre algunas otras cosas que les vamos a arreglar en este 6 00:00:42,010 --> 00:00:54,750 video le ponemos un Jaitt alto al contador después vamos a agregar punto Contador y suponerles before 7 00:00:55,200 --> 00:00:56,370 masterizar before. 8 00:00:56,370 --> 00:01:03,510 Como la imagen para el fondo en este caso la imagen que estemos utilizando se llama resumen podemos 9 00:01:03,510 --> 00:01:15,960 abrir y hacer esta así que vamos a poner aquí Bagram y Mazz o R.L y nos vamos a salir un nivel estamos 10 00:01:15,960 --> 00:01:24,720 en C.S. Si tenemos que entrar ahí me lo voy a M.G. diagonal BG resumen punto JPG y aquí vamos a poner 11 00:01:24,720 --> 00:01:28,340 contenta siempre que utilizas los before y After. 12 00:01:28,710 --> 00:01:36,410 Hay que tener un content Guaros cambio si recargo vemos que de momento no se ve la imagen. 13 00:01:36,420 --> 00:01:38,800 Vamos a tener que hacer un poco más. 14 00:01:39,210 --> 00:01:47,770 Vamos a poner aquí un punto para Lacs y por aquí un before y aquí vamos a darle algunos cuantos estilos. 15 00:01:47,770 --> 00:01:56,860 Por ejemplo en Huid del 100 por ciento un acto del 100 por ciento también una posición absoluta donde 16 00:01:56,860 --> 00:02:02,570 ponemos top cero y Leff cero y le vamos a poner aquí vaqueros. 17 00:02:02,650 --> 00:02:11,170 Repito son unas propiedades de Bagram que van a aplicar a todas las que sean en Parallax le ponemos 18 00:02:11,170 --> 00:02:22,200 un background 6 cover a guardar cambios de recargará qué medio se alcanza a ver nuestra imagen no muy 19 00:02:22,200 --> 00:02:33,900 bien todavía y vamos a darle aquí Bagram posición Center Center cuando cambie su recargo quizá alcanza 20 00:02:33,900 --> 00:02:39,510 a ver un poco más sin embargo aún no es muy suficiente. 21 00:02:39,930 --> 00:02:44,520 Vamos a Arita volver a esta parte vamos a describir los estilos para nuestra lista. 22 00:02:44,520 --> 00:02:55,160 Si recuerdas aquí pusimos un resumen evento podemos poner aquí huele resume Benevento y utilizar una 23 00:02:55,160 --> 00:03:03,140 posición relativa para resetear por si se enrolan y porque todos los ya teníamos uno en absoluto. 24 00:03:03,140 --> 00:03:10,840 Entonces vamos a resetear lo que se arréglate los demás los de aquí adentro y lo vamos a poner aquí 25 00:03:12,140 --> 00:03:20,540 Badín 120 píxeles y 0 120 píxeles arriba y abajo recuerda y luego nos vamos ir con lo que vienen siendo 26 00:03:20,560 --> 00:03:31,200 los delays así que copiamos éste y ponemos el Lehi y en este caso le vamos a dar un ancho del 50 por 27 00:03:31,200 --> 00:03:38,670 ciento recuerda que es móvil first así que en un dispositivo móvil esto se verá al 50 por ciento. 28 00:03:38,680 --> 00:03:45,580 Vamos a ver float Leff de una vez y un texana encentro pero quiero que cuando estemos en la pantalla 29 00:03:46,540 --> 00:03:53,620 de dispositivos como éste en un escritorio tome el 25 por ciento porque podemos ver que tenemos cuatro 30 00:03:53,620 --> 00:04:08,810 elementos así que aquí media only screen and with 768 píxeles este será envidia QWERTY vamos a copiar 31 00:04:08,810 --> 00:04:16,210 este selector y pegarlo aquí y darle aquí un Wit de 50 por el 25 por ciento perdón 32 00:04:19,700 --> 00:04:26,560 y cambio si recargo y vemos que es difícil de ver pero se alcanzan a ver bien y si lo hago más pequeño 33 00:04:28,490 --> 00:04:30,260 toman el 50 por ciento. 34 00:04:31,680 --> 00:04:42,240 Se van posicionando bien en nuestro texto vamos a finalizar escribiendo algunos más tiros para para 35 00:04:42,240 --> 00:04:51,140 esta parte por ejemplo aquí me gustaría tener un color de texto blanco guardo cambio si recargo cambia 36 00:04:51,150 --> 00:05:01,080 el color después me gustaría que el texto fuera en mayúsculas ponemos Tex Transform o Perquis óscar 37 00:05:01,120 --> 00:05:08,150 una fuente llama Oswalt que es la que hemos estado utilizando Nagua copiar la puedes ver en pantalla 38 00:05:09,940 --> 00:05:18,340 full Family Oswalt sans serif y por último un Foncillas de 24 píxeles si guardamos cambio si recargamos 39 00:05:18,810 --> 00:05:28,730 y vemos que se ven mucho mejor si recuerdas agregamos una clase llamada número la podemos crear número 40 00:05:30,150 --> 00:05:37,350 y la vamos a poner un color y el color es el color naranja que hemos estado utilizando en todo el diseño 41 00:05:38,180 --> 00:05:50,390 es F 49 18 después le ponemos un Foncillas soplando aquí cuatro AEM y asuelan display Blok y un margen 42 00:05:52,020 --> 00:06:00,990 cero arriba cero a la derecha diez píxeles abajo y cero a la izquierda guardo cambios recargo y vemos 43 00:06:00,990 --> 00:06:07,190 que los números se ven mejor más al estilo de este diseño. 44 00:06:07,280 --> 00:06:13,470 Sin embargo puedes ver que no se ve como para nuestro diseño se ve la imagen estática como fondo vamos 45 00:06:13,470 --> 00:06:21,280 a volver un poco aquí a nuestro diseño nuestro código y donde tenemos el para Al-Aqsa aquí vamos a ponerle 46 00:06:22,090 --> 00:06:30,400 vagaron attachment y le ponemos fixer y recargamos y ahora sí tendremos ese efecto de Parrala de fondo 47 00:06:31,540 --> 00:06:37,700 que a mi me gusta mucho se ve muy bien igual ahorita no podemos darle más escoró hacia abajo sin embargo 48 00:06:37,700 --> 00:06:42,120 cuando pasemos esa sección se verá lo mejor posible. 49 00:06:42,970 --> 00:06:48,600 El siguiente video es trabajar con estas tablas parecen tablas sin embargo lo vamos a hacer con puros 50 00:06:48,600 --> 00:06:53,640 dips así que en el siguiente video continuaremos con esta sección.