PRACTICA – HTML5 responsive

Maquetación

  • 1 – Estructura de dos columnas. (HTML)
  • 0.5 – Carga de todas la imágenes (3 imágenes). (HTML)
  • 0.5 – Aplicar los estilos ‘negrita’, ‘cursiva’ y azul en algunas palabras del texto de los artículos de la columna izquierda. Haz que el texto salga justificado. (CSS)
  • 0.5 – Dentro de los dos artículos de la columna izquierda, coloca la imagen correspondiente con un ‘lorem ipsum’ envolviéndola a su alrededor. Debe existir un margen de 5px entre el texto y la imagen.
    • Se visualiza la imagen con el texto a su alrededor y el margen solicitado: 0.5pt
    • Se visualiza la imagen con texto a su alrededor pero sin margen: 0.25pt
    • Se visualiza la imagen pero sin texto a su alrededor: 0.1pt
    • Sólo se visualiza el texto: 0pt
  • 0.5 – Maquetación cabecera. (CSS)
  • 0.5 – La maquetación no se estropea (los textos no sobresalen de las capas, se mantiene la maquetación de dos columnas). (CSS)
  • 0.5 – La botonera tiene un degradado horizontal. (CSS)
  • 0.5 – Maquetación del input dentro de la barra de navegación (CSS)
  • 0.5 – Esquinas redondeadas para el contenedor de artículos, los dos menús verticales de la columna derecha y la barra de navegación horizontal superior. (CSS3)
  • 0.5 – Sombreados de textos de la botonera horizontal y los encabezados de ambos artículos. (CSS3)
  • 0.5 – Transición animada del background para los enlaces de la botonera horizontal superior  (CSS3)
  • 1 – Maquetación barra de navegación. (CSS)

Maquetación responsive:

  • 1 – Lograr la estrucura de una sola columna. (responsive)
  • 1 – El cuadro de texto se ubica en la esquina superior derecha. (responsive)
  • 1 – Se respeta la estructura, proporciones y maquetación general de la versión responsive propuesta. (responsive)

snapShot1 snapshot2

Descargar recursos.

Aviso Legal | Política de privacidad