Como Crear una Página Web con Go 1.15 y Bootstrap 4.5 – Parte 4

5 minuto(s)

En esta página:

Demo

En la parte anterior, creamos la página Nosotros y dentro de ella colocamos sus elementos respectivos. Agregamos un texto que habla sobre la organización o el proyecto, debajo de este texto colocamos información adicional en 3 columnas, en ellas agregamos el objetivo, misión y visión. En esta parte 4 vamos a crear el contenido para la página Servicios, 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 siguiente artículos:

Asimismo te invito a escuchar el Podcast: “Herramientas Online Para El Trabajo En Equipo”:

Spotify:	Sound Cloud:	Apple Podcasts

Bien ahora continuemos con el Post: Como Crear una Página Web con Go 1.15 y Bootstrap 4.5 – Parte 4.

Servicios

Nuestra página de los Servicios de la empresa va contener un texto de introducción inicial mencionando los servicios que ofrece la misma, debajo colocaremos 6 servicios, estos estarán separados en 3 columnas.

Bien para la página Servicios voy a crear un nuevo archivo llamado servicios.html dentro del directorio public.


/pagina-web-go-1-15
├── /public 
    ├── index.html 
    ├── nosotros.html 
    ├── servicios.html // Creo y Abro este archivo 
├── configuracion.go 
├── configuracion.exe

/pagina-web-go-1-15

├── /public

├── index.html

├── nosotros.html

├── servicios.html // Creo y Abro este archivo

├── configuracion.go

├── configuracion.exe

Abro el archivo servicios.html y dentro de el crearé el contenido para la página Servicios.

Texto de introducción

En esta parte colocaré un texto que dirá Servicios y debajo de el un texto de introducción a los servicios que mostraré mas abajo.


<div class="row mt">
  <div class="col-md-12">
    <h1 style="font-size: 28px;" class="mb-4 mt-5">Servicios </h1>    
  </div>
</div>

<!-- Introducción a los Servicios -->
<div class="row">
  <div class="col-md-12">
    <p class="text-justify"> Sed imperdiet, ex sed hendrerit vestibulum, ante nisi aliquet purus, sit amet lacinia diam orci vitae mauris. Maecenas a iaculis odio. Aenean at ipsum sodales, scelerisque leo quis, posuere lorem. Aenean quis est ut ex efficitur venenatis. Ut neque mauris, pellentesque eu sodales et, luctus ut felis. Nam at orci et augue auctor auctor non nec dui. Nullam faucibus hendrerit ex, nec ullamcorper eros vulputate placerat: </p>
  </div>
</div>

<h1 style="font-size: 28px;" class="mb-4 mt-5">Servicios </h1>

</div>

<p class="text-justify"> Sed imperdiet, ex sed hendrerit vestibulum, ante nisi aliquet purus, sit amet lacinia diam orci vitae mauris. Maecenas a iaculis odio. Aenean at ipsum sodales, scelerisque leo quis, posuere lorem. Aenean quis est ut ex efficitur venenatis. Ut neque mauris, pellentesque eu sodales et, luctus ut felis. Nam at orci et augue auctor auctor non nec dui. Nullam faucibus hendrerit ex, nec ullamcorper eros vulputate placerat: </p>

</div>

Si voy al navegador debería ver los cambios realizados en la página Servicios:

Ahora pasaré a crear los elementos de los servicios de la empresa.

Servicios

Para esta sección voy a usar Cards de Bootstrap 4, en total crearé 6 servicios, por ende voy a organizarlos en 3 columnas y 2 filas.


<!-- Servicios -->
<div class="row mt-5 mb-5 text-justify">
  <div class="card-deck">
    <div class="card">
      <img src="public/static/img/servicio1.png" class="card-img-top" alt="Servicio 1">
      <div class="card-body">
        <h5 class="card-title text-center">Servicio 1</h5>
        <p class="card-text">Nullam faucibus hendrerit ex, nec ullamcorper eros vulputate placerat. Aliquam hendrerit dapibus purus, condimentum tempus tellus ullamcorper vel. </p>
        <p class="card-text">
          <small class="text-muted">Last updated 3 mins ago</small>
        </p>
      </div>
    </div>
    <div class="card">
      <img src="public/static/img/servicio2.png" class="card-img-top" alt="Servicio 2">
      <div class="card-body">
        <h5 class="card-title text-center">Servicio 2</h5>
        <p class="card-text">Nullam faucibus hendrerit ex, nec ullamcorper eros vulputate placerat. Aliquam hendrerit dapibus purus, condimentum tempus tellus ullamcorper vel. </p>
        <p class="card-text">
          <small class="text-muted">Last updated 3 mins ago</small>
        </p>
      </div>
    </div>
    <div class="card">
      <img src="public/static/img/servicio3.png" class="card-img-top" alt="Servicio 3">
      <div class="card-body">
        <h5 class="card-title text-center">Servicio 3</h5>
        <p class="card-text">Nullam faucibus hendrerit ex, nec ullamcorper eros vulputate placerat. Aliquam hendrerit dapibus purus, condimentum tempus tellus ullamcorper vel. </p>
        <p class="card-text">
          <small class="text-muted">Last updated 3 mins ago</small>
        </p>
      </div>
    </div>
  </div>
</div>
<div class="row mt-5 mb-5 text-justify">
  <div class="card-deck">
    <div class="card">
      <img src="public/static/img/servicio4.png" class="card-img-top" alt="Servicio 4">
      <div class="card-body">
        <h5 class="card-title text-center">Servicio 4</h5>
        <p class="card-text">Nullam faucibus hendrerit ex, nec ullamcorper eros vulputate placerat. Aliquam hendrerit dapibus purus, condimentum tempus tellus ullamcorper vel. </p>
        <p class="card-text">
          <small class="text-muted">Last updated 3 mins ago</small>
        </p>
      </div>
    </div>
    <div class="card">
      <img src="public/static/img/servicio5.png" class="card-img-top" alt="Servicio 5">
      <div class="card-body">
        <h5 class="card-title text-center">Servicio 5</h5>
        <p class="card-text">Nullam faucibus hendrerit ex, nec ullamcorper eros vulputate placerat. Aliquam hendrerit dapibus purus, condimentum tempus tellus ullamcorper vel. </p>
        <p class="card-text">
          <small class="text-muted">Last updated 3 mins ago</small>
        </p>
      </div>
    </div>
    <div class="card">
      <img src="public/static/img/servicio6.png" class="card-img-top" alt="Servicio 6">
      <div class="card-body">
        <h5 class="card-title text-center">Servicio 6</h5>
        <p class="card-text">Nullam faucibus hendrerit ex, nec ullamcorper eros vulputate placerat. Aliquam hendrerit dapibus purus, condimentum tempus tellus ullamcorper vel. </p>
        <p class="card-text">
          <small class="text-muted">Last updated 3 mins ago</small>
        </p>
      </div>
    </div>
  </div>
</div>

<h5 class="card-title text-center">Servicio 1</h5>

<p class="card-text">Nullam faucibus hendrerit ex, nec ullamcorper eros vulputate placerat. Aliquam hendrerit dapibus purus, condimentum tempus tellus ullamcorper vel. </p>