Como Crear Una Página Web con Tailwind CSS 3 (HTML Puro) – Parte 3

Tailwind CSS | | Comunidad: Crear un Post, Eventos Devs, Foro

Demo

En la parte anterior llamada Como Crear Una Página Web con Tailwind CSS 3 (HTML Puro) – Parte 2 creamos el contenido de la página Nosotros, esta página contenia una sección de introducción con una imagen grande y un párrafo con texto. Debajo agregamos 3 columnas con el Objetivo, Misión y Visión de la empresa u organización. En esta 3ra y penúltima parte vamos a crear el contenido para la página Servicios, entonces vamos con ello.

Partes

Antes de continuar con este Post, te invito a leer los siguientes artículos:

Asimismo te invito a escuchar el Podcast: “Dominio del trabajo con Varios Lenguajes de Programación”:

Spotify SoundCloud Apple Podcasts

Bien ahora continuemos con el Post: Como Crear Una Página Web con Tailwind CSS 3 (HTML Puro) – Parte 3. 

Página Servicios

Si recordamos, en la página Home mostrabamos 4 servicios destacados, ahora en esta página Servicios mostraremos todos los servicios de la Organización. Primero comenzaré mostrando un texto que diga Servicios ydebajo un párrafo de introducción .

Si voy al navegador, debería de ver el texto Servicios y el párrafo de introducción:

Ahora vamos a colocar todos los servicios, estos serán 9 servicios y los mostraré en 3 columnas.

Si voy al navegador, debería de ver todos los servicios sin problemas:

Igual que en la página Home y Nosotros, también en la página Servicios he colocado el formulario de Newsletter, ese formulario lo creamos en la primera parte de este tutorial y es bueno colocarlo en todas las páginas posibles del sitio web, asi se generan más suscripciones.

Eso es todo para la página Servicios. Recuerda que en la última parte del tutorial colocaré todos los archivos del proyecto, incluido el archivo estilos.css en donde he creado mis propios estilos personalizados (Si bien estoy usando clases nativas de Tailwind CSS 3 para aplicar los estilos, también he creado mis propios estilos CSS. ). Asimismo colocaré las imágenes y otros archivos que use en este tutorial.

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)

  • En la siguiente parte y última de este tutorial, vamos a crear el contenido de la página Contacto.
  • No olvides que debemos usar la Tecnología para hacer cosas Buenas por el Mundo. 

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

Newsletter

Suscríbete a Nuestro Boletín de Novedades:

(Luego de la suscripción no te va salir ningun mensaje. Solo revisa tu bandeja de Correo para confirmar tu suscripción)
* indicates required
Subscribirse
Notificar a
guest
0 Comments
Inline Feedbacks
View all comments