Vamos a finalizar este diseño y vamos a darle algunos estilos ya para finalizar algunas cosas que faltan.
Por ejemplo este que es información personal puede ser que esté el mismo tamaño que el label que sale
por ejemplo a quién le voy a ponerle un fondo waited digamos 700 solo un poco más grueso y también un
text Transform cais a mí me gusta que se vean así los legos sea más fácil de leer que lo que se ve bien
y puede ser que tenemos este leyen voy a utilizar este selector como Leyen es el único formulario que
tenemos por lo tanto Foncea es 2.4 ulema hacerlo un poco más grande.
Información personal.
También voy a ponerle un color que va a ser tres que no sea totalmente negro pero un poco con un poco
más oscuro más claro.
El color negro aquí por ejemplo no va a ser un poco más claro.
Formación personal.
Tal vez un poco más pequeño en estas cuestiones.
Por ejemplo entrar como tu creas que se ve bien que se ve bien.
Me gusta como se ve y también afecta a los demás.
Por ejemplo vamos a ver un poco de scroll.
Puedes ver que tenemos aquí los fans y tenemos algunos párrafos entonces voy a escribir un código que
va a afectar a todos los párrafos que estén dentro de el formulario que he mencionado anteriormente
que yo usualmente no escribo código así pero bueno nada más.
Tenemos un formulario y pocos párrafos puedes hacerlo de esta forma.
Otra opción es crear aquí por ejemplo una clase Class contacto y ponerle por ejemplo contacto que vendría
siendo la clase y luego los párrafos.
Son estilos tú decides con cuál te sientes cómodo.
Foncillas digamos .8 Rubem hacerlo un poco más pequeño es la meta que tengo para ese texto que no sea
tan grande entonces puedes dar un poco de scroll.
Creo que sí quedo muy pequeño un gran
creo que se ve bien pero un poco más grande creo que va a ser suficiente No.2 Rubem creo que ahí se
ve bien pero algo que me gustaría es hacerlo más claro porque creo que está muy oscuro.
Entonces vamos cambios que de esta forma como desea ser contactado creo que se ve mejor y se va viendo
bien y si el teléfono etcétera.
Aquí por ejemplo teléfono y mail puede el que se vea un poco extraño lo que viene siendo esta parte
de aquí entonces cómo desea ser contactado.
Pues el que tenemos teléfono e mail podemos crear un dip entonces digamos un dip y colocarle aquí por
ejemplo forma contacto que el usuario elija cual entonces puedes ver que es un formulario pero puedes
pasarle dips dentro también no hay ningún problema entonces aquí vamos a ponerle que hasta el final.
Forma contacto y digamos que le ponemos un Max UIT-T digamos 600 píxeles y se ve un poco más pequeño
ahora quiero mostrarte algo o poner aquí display Reflex y Estefi con temas como el Space Between si
guardamos cambios puede ser que se coloca esta forma se ve un poco raro no porque haluro qué está haciendo
aquí es que se lo inspeccionar.
Está asignándole aquí en forma de contacto al cierta cantidad el limpio puedes ver que está más grande
y eso pasa porque estamos seleccionando todos los inputs que no sean submit y una de sus características
es ver que aquí dice ancho 100 por ciento entonces aquí voy a ser un selector de atributos nuevo que
va a decir imput y vamos a ponerlo aquí.
Taipe vamos a poner radio le vamos a dar with Atom.
Qué quiere decir eso.
Bueno auto va a decir toma únicamente el espacio que requieres no tomes más y puedes ver que se define
el ancho automáticamente el tamaño del input puedes ver que es muy pequeño entonces eso hace que tenga
cierto tamaño entonces puedes aplicar un selector de esta forma y solamente rescribir lo que requieras
que sea un poco más específico.
Aquí te van a poner un margen cero porque tenemos este margen de 2 se lo va a quitar y puedes ver qué
queda de esta forma de eliminar esta parte.
Ahora queda muy grande y en realidad ves que tengo algo de zoom 100 por ciento desde la forma en que
se vería que vería de esta forma pero puedes ver que queda muy grande y creo que 600 píxeles serán demasiado
600 pixeles será igual a 60 Reem.
Como ya hemos visto anteriormente en títulos como RAM pero creo que mejor 30. va a ser suficiente para
esta parte pues es el que se ve mejor como desea ser contactado y si eligió teléfonos Lilja entonces
también lo va a poner online items items Center para que se centren verticalmente aquí pasa algo porque
creo que ese margen bottom así lo tomó no solamente creo que no se está aplicando bien
aquí hay un error está ese de aquí no era por algo no se veía.
Después de ver que se quedan centrados.
Este es el Shum del 100 por ciento y yo le había puesto un poco más amplio para que se pueda ver en
el video.
Entonces tendrías que ponerlo en el 100 para poder ver cómo se ve por ejemplo estos párrafos que se
quedan muy pequeños ya habiéndolos bien que de esta forma se ve bien.
Ahora estas instrucciones que están aquí como que no sabes cual es cual no quedan muy muy juntas eso
pasa porque por default todos los párrafos tienen margen entonces los podemos quitar margen cero y queda
de esta forma.
Creo que se ven mejor y aquí lo va a poner de Chova poner margen arriba de dos RAAM abajo a la izquierda
a la derecha en todas las direcciones 0 y eso creo que los va agrupar mejor.
Puede ser que dice aquí cómo desea ser contactado y queda más agrupado no se le puede elegir y si eligió
teléfono exista exija la fecha o elija la fecha para poder hacer la llamada.
Entonces creo que el formulario queda mucho mejor de esta forma y creo que se ve bastante bien.
Puedes continuar jugando con los estilos y cambiar las formas ahora lo último que nos falta es el Submit.
Por ejemplo si le das un par de clases botón y botón verde puedes guardar cambios.
Puede ser que de esta forma si le doy Shum puedes ver qué tiene como este borde aquí es porque por default
submitted al igual que todos los inputs tienen un borde y ya lo vimos anteriormente que se lo tuvimos
que quitar en esta parte le pusimos Border Nong entonces solo quita entonces tenemos que quitárselo
también al summit pero estamos aplicando las clases de botón.
Por lo tanto aquí lanzo con el Border Nong y guardamos cambios y puede ser que solo eliminã.
Entonces lo estamos utilizando también en los enlaces en los encaré los que son las etiquetas A. Si
abrimos aquí índex por ejemplo a y por ejemplo en esta parte este no es un enlace como tal.
Aquí por ejemplo este a la clase de botón pero los a por default no tienen ningún borde.
Entonces no le hace daño por así decirlo que tengamos este borde si no lo tienen no se lo quitan no
pasa nada pero en el caso del submit si lo tenía y entonces se lo quita algo que puedes ver que nos
falta eso eso es lo más pequeño de nueva cuenta es cuando das aquí por ejemplo Jabber sobre el enviar.
Puedes ver que aparece este puntero que está aquí usualmente casi todos los enlaces tienen esta mano
entonces para lograr algo así porque hemos cambiado la apariencia del input.
Puedes poner aquí punto botón y luego Jabber y ponerle o forzar que aparezca la mano con cursor y existe
una opción llamada Painter entonces Painter va a ser que cuando tenga el joven aparezca esa mano.
Ahora existen muchos cursores diferentes aquí cursor nuevamente y que aparecen muchas opciones hay unas
medias raras por ejemplo hay uno que me gusta que se Edegel aparece como un pequeño signo de interrogación
entonces hay distintas opciones.
No es nada más Painter pero es por mucho el que más se utiliza guay aparece este icono dando vueltas
y por ejemplo aquí uno más llamadas para finalizar por ejemplo este de GAP no se que haga grave la verdad
apenas lo vi si es una mano extendida entonces vas a utilizar Painter después que aparece en la mano
ya que simula mejor dicho que es un enlace que podemos presionarlo como en los enlaces que tenemos aquí.
En general fue un muy buen proyecto.
Pudiste ver las distintas partes.
Ahora para poder enviar este formulario se necesita un lenguaje de Bakken como puede ser PHP pero puedes
ver que tenemos ya algo mucho más completo y has creado si esto primera vez creando sitios web un sitio
bastante completo mucho más atractivo que el primer sitio web que yo creé hace mucho tiempo.
Pero te haya gustado el siguiente video vamos a ver cómo subirlo a un servidor real para que puedas
compartirlo con alguien y mostrarle lo que has aprendido.