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

Como Crear una Página Web con Bootstrap 5 – Parte 4

Demo

En la parte anterior llamada Como Crear una Página Web con Bootstrap 5 – Parte 3 de este tutorial, creamos el contenido para la página Nosotros del proyecto web, agregamos un texto de introducción Nosotros, una imagen referencial para la página y un texto de introducción. Debajo colocamos en 3 columnas el objetivo, misión y visión de la organización, cada información con su imagen referencial respectiva. En esta cuarta parte del tutorial, vamos a crear el contenido de la página Servicios, vamos con ello.

Partes

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

Asimismo, te invito a escuchar el Podcast: “Como Hacer De La Programación Un Estilo De Vida” (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 4. 

Página Servicios

Para poder diseñar esta página voy a crear un archivo HTML con el nombre servicios.html dentro del directorio principal del proyeto. 


Dentro de esta página Servicios colocaré un texto que diga Servicios con un texto de introducción y debajo colocaré todos los servicios que brinda la organización.

Servicios (Introducción)

En esta sección de introducción a la página servicios, colocaré un encabezado h1 con el texto Servicios y debajo un texto que describe la sección, el texto que usaré es Loremp Ipsum (texto de mentira) para organizar el contenido:


Si voy al navegador, debería de ver los cambios:

Ahora pasaré a crear todos los servicios de la organización.

Servicios

Voy a colocar 9 servicios, estos se mostrarán en 3 columnas y 3 filas, comenzaré con la primera fila de 3 servicios:


Ahora agrego la siguiente fila con 3 servicios más:


Y por último agrego la última fila con 3 servicios más:


Y si voy al navegador, debería de ver todos los servicios sin problema:

En la imagen anterior le he dado zoom para que se pueda apreciar todos los servicios.

Debajo de los servicios aparece una parte del 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.

Hasta aquí llegamos con esta parte 4 en donde colocamos un texto de introducción y debajo todos los servicios de la organización.

Ten Paciencia, lo que quiero es que conozcas bien como se crea este proyecto y no llenarte el capitulo de mucho contenido porque te puedes marear y no tendrás un óptimo aprendizaje. 

Nota (s)

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

Salir de la versión móvil