Maquetado

Continuamos ahora con la sección del Formulario de Contacto. En esta sección tenemos un subtítulo, una imagen del lado izquierdo, y un formulario del lado derecho. Dentro del formulario hay un cambio de texto para ingresar el email, y un area de texto para el contenido del mensaje, ademas del botón para enviar el formulario.

Usamos un <h2> para el subtitulo como en la sección anterior, y un div con clase sides para contener los 2 lados. Luego, el alinearemos los elementos del formulario con flex-box.

index.html

Si guardamos y recargamos la página en nuestro navegador, veremos que la sección de proyectos se ve asi:

Screenshot 2023-06-24 at 8.56.14 PM.png

Estilos

Empezamos borrando los estilos temporales de #contact en temp.css:

temp.css

Ahora en index.css, agregamos el selector #contact, con estilos para:

• Establecer el fondo transparente
• Padding horizontal de 100px y vertical de 64px

Y a .sides lo hacemos flex-box para distribuir los 2 lados de la sección.

index.css

Para el formulario, tenemos que:

• Mantener una distancia mínima de la imagen izquierda
• Ordenar sus elementos con flex-box verticalmente (column)
• Alinear sus elementos al centro

Para ambas entradas de texto:

• Padding para que haya mas espaciado
• Ancho fijo
• Borde redondeado con sombra
• Espaciado contra el elemento de abajo

Para el caso de textarea en particular, le ponemos el alto que deseamos.

Y para el botón de enviar:

• Fondo azul con texto blanco
• Cursor pointer para que se vea accionable
• Espaciado y ancho

index.css

Resultado:

Screenshot 2023-06-24 at 9.19.17 PM.png