Prueba de maquetación WordPress + CSS

La prueba consiste simplemente en la maquetación de una página web en WordPress, por lo que puedes enviarnos la URL de una página creada con WordPress, ya sea una página creada en tu propio hosting o una página creada con WordPress.com.

Si utilizas una plantilla o un constructor (builder), háznoslo saber.

Has de tener en cuenta la estructura de los dos mockups adjuntos aquí abajo, uno para desktop y otro para mobile:

Haz click en la imagen o descárgala aquí

Haz click en la imagen o descárgala aquí

Partes de la prueba a tener en cuenta

Para hacer la prueba de maquetación y CSS correctamente, hay que prestar atención a los siguientes apartados.

1 – PARTE DE MAQUETACIÓN:

Estructura diferente para desktop y para mobile

  • Fíjate en los mockups para que veas que el orden de los contenidos es algo diferente en desktop que en mobile.

No pierdas tiempo en los textos, usa lorem2.com

  • No hace falta que uses textos reales, usa «Lorem ipsum…» y rellena los encabezados H1, H2, H3 y los textos a tu criterio.

Puedes hacer la prueba en base a 3 temáticas a elegir:

  • Para maquetar la página, puedes escoger entre estas 3 temáticas:
    • COVID-19
    • AVANCES TECNOLÓGICOS
    • BELLEZA Y COSMÉTICA
  • Utiliza colores para la web (fondos, estructura) y combinaciones de tipografía que representen bien cada temática escogida.

Utiliza fotos reales de stocks gratuitos o de pago para mejorar la comunicación

  • Valoraremos positiva o negativamente la elección de las imágenes, en base a si refuerzan o perjudican la comunicación de la página web.

2 – PARTE DE CSS:

Utiliza CSS y media querys para dektop o mobile

  • Puedes mostrarnos tu dominio del CSS y del diseño responsive utilizando estilos diferentes en desktop y en mobile (por ejemplo, para un max-width: 480px).
  • Utiliza tamaños de letra distintos para desktop que para mobile.

Ejercicio de CSS para los iconos (solo en desktop)

  • Sin utilizar un plugin ni un recurso de tu plantilla o builder, haz que en la zona de los 4 iconos (ventajas), en desktop se muestre un efecto de ampliación o rotación al ponerte encima de ellos, pero que sea fluido, que se amplíe poco a poco al ponerte encima y se reduzca poco a poco al salir (no de golpe).
  • Puedes usar iconos gratuitos de fontawesome, la versión free: https://fontawesome.com/icons?d=gallery&p=2&m=free