El objetivo de este ejercicio es poner en práctica los fundamentos básicos de CSS. A continuación, crearás un pequeño sitio web HTML en el que se aplicarán estilos CSS. Este sitio web constará de dos páginas HTML:

1. Página de perfil La primera página HTML será sobre un personaje ficticio.

2. Pagina de contacto La segunda página HTML contendrá un formulario de contacto.

Para el formulario de la página de contacto se tendrá en cuenta únicamente la parte visual y las reglas aplicadas para restringir los datos que se deben ingresar en cada campo.

1. La página estará compuesta por las siguientes secciones:

   Encabezado (título)

   Área de contenido principal

   Pie de página: debe contener al menos tres enlaces y tres íconos de redes sociales.

El resultado sería el siguiente:

2. Dentro de esta área de contenido, debe crear una barra lateral (área de menú) como se muestra en la siguiente imagen:

La barra lateral debe contener al menos 2 opciones:

- La primera opción debe vincular a la página HTML del perfil.
- La segunda opción debe vincular a la segunda página HTML (formulario de contacto) que creará una vez finalizada la página de perfil.

Cada opción del menú debe cambiar los estilos cada vez que pase el mouse sobre ella (por ejemplo, poner en negrita o sombrear el cuadro, ...)

3. Como último paso para la página de perfil debes crear al menos los siguientes elementos que se mencionarán a continuación:

   • En el área de contenido debes crear estos elementos HTML con contenido:
     1. h2
     2. Imagen con un atributo alt
     3. Párrafo (con clase: custom_p)
     4. Div (con id: div1)
     5. Dentro de este div estarán estos elementos:
        1. h2
        2. Párrafo (con clase: custom_p)
        3. Lista desordenada con 3 elementos de lista

4. A continuación, debes crear una página de contacto en un archivo HTML diferente. Este HTML debe usar el mismo archivo CSS que creó para la primera parte. Para esta página debes usar el mismo código HTML creado para los pasos anteriores pero reemplazando el área de contenido con un formulario personalizado. Debes crear un formulario que cumpla con los siguientes requisitos:

   1. Campos con etiqueta para:
   2. Nombre completo
   3. Teléfono
   4. Correo electrónico
   5. Cuadro de varias líneas para escribir comentarios largos

Todas las entradas del formulario deben utilizar su propio tipo para garantizar que los datos introducidos son correctos.

5. Aplicar estilos específicos: debes poner en práctica las diferentes formas de seleccionar contenido HTML para aplicar los estilos:

   1. Selecciona todos los elementos H2 (usando una instrucción) y cambia al menos la propiedad de color
   2. Crea una clase que aplique una propiedad de borde y utilízala en un elemento
   3. Crea una clase que aplique propiedades de margen y padding
   4. Crea un elemento ul u ol y cambia el estilo de lista
   5. Selecciona todos los párrafos que son elementos secundarios de un div y cambia el weight de fuente a negrita
   6. Cambiar el fondo del documento (color o imagen)

• Layouts: https://www.w3schools.com/css/css_website_layout.asp