Icono del sitio Blog de Programación y Desarrollo – Nube Colectiva

Como Crear una Página Web con Bootstrap 5 – Parte 5 (Final)

Demo Github

En la parte anterior llamada Como Crear una Página Web con Bootstrap 5 – Parte 4 creamos el contenido para la página Servicios. En ella agregamos el texto Servicios y debajo un texto de introducción que describe dicha página. Debajo colocamos 9 servicios, todos estos distribuidos uniformemente en 3 columnas y 3 filas. En esta Parte 5 y última, vamos a crear el contenido para la página Contacto, vamos con ello.

Partes

Antes de continuar te invito a leer los siguientes artículos:

Asimismo, te invito a escuchar el Podcast: “Porque Algunos Desarrolladores no Terminan El Proyecto de Un Cliente” (En Spotify, Sound Cloud y Apple Podcasts) y “La Inteligencia Artificial (IA) y El Machine Learning (ML) Siempre Trabajan de la Mano” (Anchor Podcast):

Spotify: Sound Cloud: Apple Podcasts Anchor Podcasts

Bien ahora continuemos con el Post: Como Crear una Página Web con Bootstrap 5 – Parte 5 (Final). 

Página Contacto

Para esta página voy a crear un archivo con el nombre contacto.html dentro del directorio principal del proyecto.


En esta página Contacto colocaré un texto que diga Contacto con un subtexto que diga Puedes usar los siguientes medios para contactarnos, debajo colocaré un formulario, datos de contacto, redes sociales y un mapa (croquis). 

Contacto (Introducción)

En esta sección inicial agrego un texto que diga Contacto y un texto de guía o subtexto que diga Puedes usar los siguientes medios para contactarnos:


Ahora debajo creo 2 columnas para distribuir ciertos elementos necesarios para la página Contacto.

Formulario

En la columna del lado izquierdo agrego un formulario de contacto:


Si voy al navegador, debería de ver los elementos que he agregado:

En una página de contacto se suele colocar los datos de contacto de la organización, esto lo veremos a continuación.

Datos de Contacto

En la columna del lado derecho agrego ciertos datos de contacto como la dirección, teléfono fijo, móvil y el email (Tu puedes agregar los datos que desees):


Igualmente si voy al navegador, debo de ver los datos de contacto al lado derecho:

Y debajo de los datos de contacto agregaremos algunas redes sociales a continuación.

Redes Sociales

En la misma columna de la derecha y debajo de los datos de contacto, agregaré algunas redes sociales populares (Tu puedes agregar las redes sociales que desees):


Asimismo, si voy al navegador debería de ver las redes sociales debajo de los datos de contacto:

Por último agregaremos un mapa de google.

Mapa de Google (Croquis)

Debajo de todos los elementos anteriores, agregaré un mapa de google que mostrará la ubicación de la organización, pero ya que la organización no existe para este proyecto, solo colocaré un mapa sencillo (Tu puedes colocar tu mapa con la ubicación de tu organización):


Si voy al navegador debería de ver el mapa de Google sin problemas:

En la imagen anterior he colocado un mapa de google pero recuerda que tu le puedes colocar un marcador con la ubicación de tu organización.

Debajo del mapa de google aparecerá el formulario de Newsletter, este formularo lo creamos en la Parte 2 de este tutorial y alli mencionamos que lo iba a colocar en todas las páginas, de esta manera se logra recolectar usuarios para futuras promociones.

Bien hasta aquí llegamos con el tutorial, hemos creado una web con Bootstrap 5, esta web consta de 4 páginas. El aprender a como crear una web con Bootstrap 5, te servirá como base para crear páginas web más complejas.

Al inicio de cada Parte del tutorial, he colocado una Demo y en esta quinta y última parte, he colocado el código del proyecto alojado en un repositorio de GitHub.

Nota (s)

Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos.

Salir de la versión móvil