Página personal de Jordi Piquer

1. Uso de colores para texto y fondo, incluyendo al menos colores degradados en alguna de sus cajas.

El color de fondo se ha establecido desde CSS con:

    body {
      font-family: 'Fira Sans';
      background-color: #c5cbd6;
    }
          

El degradado desde CSS con:

background: -moz-linear-gradient(left, rgba(212,228,239,1) 0%, rgba(134,174,204,1) 100%);

2. Inclusión de tipografías externas de Google Fonts, Adobe Edge Web Fonts o un servicio similar on line.

Se han usado tipografias de Firefox CSS con:

    body {
      font-family: 'Fira Sans';
    }
    
    h3 {
      font-family: 'Fira Mono';
    }
    
    h4 {
      font-family: 'Fira Mono';
    }
          

Esta tipografía pertenece a Google, y se han establecido desde el CSS así:

<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Tangerine">
p .googlefont { font-family: 'Tangerine', serif; font-size: 24px; }

3. Distintos encabezados.

El color de los encabezados se ha establecido desde CSS con:

    h3 {
      font-family: 'Fira Mono';
      color: white;
    }
    h4 {
      font-family: 'Fira Mono';
      color: purple;
    }
          

4. Uso de caracteres especiales

Existen caracteres especiales como por ejemplo los siguientes:

  • <
  • >
  • &
  • ¢
  • ©
  • ®
  • «
  • ¥
  • ¯

5. Incluir, imágenes de tipo bitmap y vectorial.

Imágenes de mapas de bits (formato JPG) con la etiqueta picture en HTML5

La oveja Shaun

Puedes comprobar cómo cambia la imagen si modificas el ancho de tu navegador.

Imágen vectorial SVG en HTML5

Logo SVG

6. Incluir algún vídeo.

Vídeos con la etiqueta iframe en HTML5

7. Incluir bordes redondeados en alguna de sus cajas.

Como por ejemplo los bordes de esta caja.

8. La página debe comenzar con el siguiente encabezamiento: “Página personal de <nombre y apellido del alumno>”

Como queda patente en el inicio de esta página.