Partiendo del html que se facilita construir el siguiente formulario:
Add the above code into the body of your HTML.
- El fondo de postal: guardado en el directorio de trabajo del HTML.
- Obtener la fuente de escritura de máquina de escribir: The "Secret Typewriter" de la página fontsquirrel
- Obtener la fuente de escritura a mano: The "Journal" de la página fontsquirrel
_Para procesar las fuentes seguir los pasos siguientes: _
- Utilizar el generador de fuentes de fontsquirrel: fontsquirrel Webfont Generator.
- Utilizando el formulario subir ambos ficheros de las fuentes y generar un webfont kit. Descargar al ordenador
- Hacer unzip del fichero.
- Dentro del contenido copiar los cuatro ficheros: dos .woff y dos .woff2 a una carpeta fonts dentro del directorio de trabajo.
1.- Preparar las reglas @font-face rules, el elemento reset <body> y el <form> (w: 740px h:498px y bck: imagen + color white):
2. Posicionar los elementos del título y del form
3. Trabajar los elementos del form:
- Fuente título: 1 em typewriter, sans-serif
- Labels .8 em typewriter, sans-serif
- Eliminar bordes y fondo de los campos de texto. Redefinir padding y margen.
- Resaltar los campos con foco con un background light grey, transparent (utilizar la propiedad outlinge para eliminar el borde).
- El elemento <textarea> debe renderizarse como elemento de bloque al que se debe anular las propiedad resize.
- Utilizar pseudo-elementos para añadir los ">>>" al botón.
- El botón rota -1.5deg.