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

5 minuto(s)

En esta página:

Demo

En la parte anterior llamada Como Crear una Página Web con Bootstrap 5 – Parte 2, creamos el contenido para la página Home del stitio web, agregamos un carousel con imágenes que apunta a diferentes páginas, asimismo agregamos unos planes de pago que son como un contenido de ejemplo para este proyecto, tu decidirás que poner en su lugar. En esta tercera parte vamos a crear el contenido para la página nosotros, vamos con ello.

Partes

Parte 1
Parte 2
Parte 3
Parte 4
Parte 5 (Final – Código Fuente GitHub)

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

Asimismo, te invito a escuchar el Podcast: “Consejos Para Tener Más Tiempo Para Programar” (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 3.

Página Nosotros

Para esta página voy a crear un archivo HTML con el nombre nosotros.html dentro del directorio principal del proyeto.


/bootstrap-5-web 
  ├── /css
  ├── /js
  ├── index.html 
  ├── nosotros.html // Creo y Abro este Archivo

/bootstrap-5-web

├── /css

├── /js

├── index.html

├── nosotros.html // Creo y Abro este Archivo

En la página Nosotros colocaré un texto que diga Nosotros, una imagen con un texto de introducción, debajo colocaré información sobre el objetivo, la misión y la visión de la organización.

Introducción (Nosotros)

Para esta sección de introducción a la página nosotros, colocaré un encabezado h1 con el texto Nosotros, luego una imágen y debajo un texto que describe la sección, el texto que usaré es Loremp Ipsum (texto de mentira) para organizar el contenido:


<!-- Introducción Nosotros -->
<div class="row">
  <div class="col-md-12 text-center">
    <h1>Nosotros</h1>
  </div>
</div>
<div class="row">
  <div class="col-md-12">
    <img src="img/nosotros.jpg" class="img-fluid">
    <p class="mt-3"> Ut leo arcu, mattis id mollis id, pellentesque mollis purus. Morbi vitae odio erat. Maecenas tincidunt eu lacus et rhoncus. Morbi iaculis faucibus eros in suscipit. Suspendisse id purus sed lorem tristique pharetra ut sed tortor. Donec hendrerit quis libero congue dictum. Praesent vel justo mollis, egestas dui et, vehicula elit. Aliquam pharetra, augue non dignissim accumsan, orci orci tristique enim, et lobortis nulla erat at nulla. Phasellus id ante a eros tincidunt fringilla. In rutrum ipsum a sapien lobortis, nec luctus erat aliquam. In vulputate metus at tempus vulputate. Ut vitae consectetur sapien, vel auctor lectus. Praesent consequat viverra justo, et varius felis posuere et. Ut tristique luctus feugiat. Donec dictum dignissim justo, dictum vehicula leo porttitor iaculis. Nulla ullamcorper at lorem eget suscipit. </p>
  </div>
</div>

<h1>Nosotros</h1>

</div>

<p class="mt-3"> Ut leo arcu, mattis id mollis id, pellentesque mollis purus. Morbi vitae odio erat. Maecenas tincidunt eu lacus et rhoncus. Morbi iaculis faucibus eros in suscipit. Suspendisse id purus sed lorem tristique pharetra ut sed tortor. Donec hendrerit quis libero congue dictum. Praesent vel justo mollis, egestas dui et, vehicula elit. Aliquam pharetra, augue non dignissim accumsan, orci orci tristique enim, et lobortis nulla erat at nulla. Phasellus id ante a eros tincidunt fringilla. In rutrum ipsum a sapien lobortis, nec luctus erat aliquam. In vulputate metus at tempus vulputate. Ut vitae consectetur sapien, vel auctor lectus. Praesent consequat viverra justo, et varius felis posuere et. Ut tristique luctus feugiat. Donec dictum dignissim justo, dictum vehicula leo porttitor iaculis. Nulla ullamcorper at lorem eget suscipit. </p>

</div>

Si voy al navegador debería de ver los elementos sin problemas:

Ahora pasaré a crear la información con el objetio, misión y visión de la organización.

Objetivo, Misión y Visión

Estos datos los voy a colocar en 3 columnas, cada una con una imagen referencial, las cuales las dividiré usando clases CSS de bootstrap 5:


<!-- Objetivo, Misión y Visión -->
<div class="row">
  <div class="col-md-4">
    <img src="img/objetivo.jpg" class="img-fluid">
    <h4 class="text-center">Objetivo</h4>
    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lorem quam, molestie non pellentesque ut, eleifend ut felis. Ut ultricies a nunc et aliquam. Nulla consectetur eros lectus, fermentum fermentum purus molestie non. Duis vestibulum, est vel mattis lobortis, diam massa sollicitudin sapien, non faucibus ligula purus id purus. Donec ac erat felis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc rhoncus blandit aliquet. Mauris pellentesque lacus at orci maximus posuere. Etiam non sem massa. Donec vel nisi sit amet metus porttitor gravida. Cras varius sodales purus, sit amet mattis metus. </p>
  </div>
  <div class="col-md-4">
    <img src="img/mision.jpg" class="img-fluid">
    <h4 class="text-center">Misión</h4>
    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lorem quam, molestie non pellentesque ut, eleifend ut felis. Ut ultricies a nunc et aliquam. Nulla consectetur eros lectus, fermentum fermentum purus molestie non. Duis vestibulum, est vel mattis lobortis, diam massa sollicitudin sapien, non faucibus ligula purus id purus. Donec ac erat felis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc rhoncus blandit aliquet. Mauris pellentesque lacus at orci maximus posuere. Etiam non sem massa. Donec vel nisi sit amet metus porttitor gravida. Cras varius sodales purus, sit amet mattis metus. </p>
  </div>
  <div class="col-md-4">
    <img src="img/vision.jpg" class="img-fluid">
    <h4 class="text-center">Visión</h4>
    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lorem quam, molestie non pellentesque ut, eleifend ut felis. Ut ultricies a nunc et aliquam. Nulla consectetur eros lectus, fermentum fermentum purus molestie non. Duis vestibulum, est vel mattis lobortis, diam massa sollicitudin sapien, non faucibus ligula purus id purus. Donec ac erat felis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc rhoncus blandit aliquet. Mauris pellentesque lacus at orci maximus posuere. Etiam non sem massa. Donec vel nisi sit amet metus porttitor gravida. Cras varius sodales purus, sit amet mattis metus. </p>
  </div>
</div>

<h4 class="text-center">Objetivo</h4>

<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lorem quam, molestie non pellentesque ut, eleifend ut felis. Ut ultricies a nunc et aliquam. Nulla consectetur eros lectus, fermentum fermentum purus molestie non. Duis vestibulum, est vel mattis lobortis, diam massa sollicitudin sapien, non faucibus ligula purus id purus. Donec ac erat felis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc rhoncus blandit aliquet. Mauris pellentesque lacus at orci maximus posuere. Etiam non sem massa. Donec vel nisi sit amet metus porttitor gravida. Cras varius sodales purus, sit amet mattis metus. </p>

</div>

<h4 class="text-center">Misión</h4>

</div>

<h4 class="text-center">Visión</h4>

</div>

Igualmente, si voy al navegador, debería de ver las 3 columnas con su imagen e información correspondiente:

Puedes ver en la imagen anterior, que debajo 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.

Bien hasta aquí llegamos con esta parte 3 en donde colocamos una imagen y texto de introducción y debajo el objetivo, misión y visión 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.