En esta página:
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:
- ¿ Que es Tailwind CSS entre Otros Detalles ?
- Creando una Aplicación Web similar a SoundCloud con Ruby on Rails 6 y Angular 10 – Parte 1
- Como Convertir el contenido de un Div a Imagen en Angular 10 – Parte 1
- 5 Extensiones de Visual Studio Code recomendables para Desarrolladores de Angular
- Puedes leer más Posts como este en la categoría Tailwind CSS
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 .
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!-- Nosotros (Introducción) --> <div class="container ml-auto mr-auto flex flex-wrap items-start mt-8"> <div class="w-full pl-5 lg:pl-2 mb-4 mt-4"> <h1 class="text-3xl font-extrabold text-center"> Servicios </h1> </div> <div class="w-full pl-5 lg:pl-2 mb-4 mt-4 pr-4"> <!-- Texto de Introducción (Servicios) --> <p> Curabitur fermentum in ligula ut accumsan. Donec posuere ex quis libero scelerisque cursus. Aliquam ut odio mauris. Morbi et dui in magna lobortis posuere. Etiam commodo vel nisi vel aliquet. Donec rhoncus mi id augue volutpat, sit amet vehicula turpis commodo. In varius rhoncus eleifend. Morbi tincidunt fringilla sapien, non dictum mauris tincidunt in. Ut mollis enim in congue ultricies. In ac faucibus arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur id lectus vitae quam tincidunt ullamcorper ac sed metus. </p> </div> </div> |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 |
<!-- Servicios --> <div class="container ml-auto mr-auto flex flex-wrap items-start mt-8"> <div class="w-full md:w-1/2 lg:w-1/3 pl-5 pr-5 mb-5 lg:pl-2 lg:pr-2"> <div class="bg-white rounded-lg m-h-64 p-2 transform hover:translate-y-2 hover:shadow-xl transition duration-300"> <figure class="mb-2"> <img src="assets/img/s1.png" alt="" class="h-64 ml-auto mr-auto" /> </figure> <div class="rounded-lg p-4 flex flex-col"> <div> <h5 class="text-2xl font-bold leading-none text-center"> Servicio 1 </h5> <p class="mt-4"> In tincidunt ullamcorper odio, quis gravida magna fermentum quis. Aenean tempus tellus felis, in tristique ex pretium id. Aliquam mattis metus metus, ac feugiat nisl accumsan ac. Suspendisse venenatis suscipit eros ac malesuada. Sed non ipsum eget libero rutrum varius vitae vel libero. Aenean iaculis, purus in tempor pulvinar, sem urna gravida nisi, vel consectetur arcu eros et libero. Aenean non arcu et ex convallis efficitur at quis orci. Integer varius auctor enim ut mollis. </p> </div> </div> </div> </div> <div class="w-full md:w-1/2 lg:w-1/3 pl-5 pr-5 mb-5 lg:pl-2 lg:pr-2"> <div class="bg-white rounded-lg m-h-64 p-2 transform hover:translate-y-2 hover:shadow-xl transition duration-300"> <figure class="mb-2"> <img src="assets/img/s2.png" alt="" class="h-64 ml-auto mr-auto" /> </figure> <div class="rounded-lg p-4 flex flex-col"> <div> <h5 class="text-2xl font-bold leading-none text-center"> Servicio 2 </h5> <p class="mt-4"> In tincidunt ullamcorper odio, quis gravida magna fermentum quis. Aenean tempus tellus felis, in tristique ex pretium id. Aliquam mattis metus metus, ac feugiat nisl accumsan ac. Suspendisse venenatis suscipit eros ac malesuada. Sed non ipsum eget libero rutrum varius vitae vel libero. Aenean iaculis, purus in tempor pulvinar, sem urna gravida nisi, vel consectetur arcu eros et libero. Aenean non arcu et ex convallis efficitur at quis orci. Integer varius auctor enim ut mollis. </p> </div> </div> </div> </div> <div class="w-full md:w-1/2 lg:w-1/3 pl-5 pr-5 mb-5 lg:pl-2 lg:pr-2"> <div class="bg-white rounded-lg m-h-64 p-2 transform hover:translate-y-2 hover:shadow-xl transition duration-300"> <figure class="mb-2"> <img src="assets/img/s3.png" alt="" class="h-64 ml-auto mr-auto" /> </figure> <div class="rounded-lg p-4 flex flex-col"> <div> <h5 class="text-2xl font-bold leading-none text-center"> Servicio 3 </h5> <p class="mt-4"> In tincidunt ullamcorper odio, quis gravida magna fermentum quis. Aenean tempus tellus felis, in tristique ex pretium id. Aliquam mattis metus metus, ac feugiat nisl accumsan ac. Suspendisse venenatis suscipit eros ac malesuada. Sed non ipsum eget libero rutrum varius vitae vel libero. Aenean iaculis, purus in tempor pulvinar, sem urna gravida nisi, vel consectetur arcu eros et libero. Aenean non arcu et ex convallis efficitur at quis orci. Integer varius auctor enim ut mollis. </p> </div> </div> </div> </div> </div> <div class="container ml-auto mr-auto flex flex-wrap items-start mt-8"> <div class="w-full md:w-1/2 lg:w-1/3 pl-5 pr-5 mb-5 lg:pl-2 lg:pr-2"> <div class="bg-white rounded-lg m-h-64 p-2 transform hover:translate-y-2 hover:shadow-xl transition duration-300"> <figure class="mb-2"> <img src="assets/img/s4.png" alt="" class="h-64 ml-auto mr-auto" /> </figure> <div class="rounded-lg p-4 flex flex-col"> <div> <h5 class="text-2xl font-bold leading-none text-center"> Servicio 4 </h5> <p class="mt-4"> In tincidunt ullamcorper odio, quis gravida magna fermentum quis. Aenean tempus tellus felis, in tristique ex pretium id. Aliquam mattis metus metus, ac feugiat nisl accumsan ac. Suspendisse venenatis suscipit eros ac malesuada. Sed non ipsum eget libero rutrum varius vitae vel libero. Aenean iaculis, purus in tempor pulvinar, sem urna gravida nisi, vel consectetur arcu eros et libero. Aenean non arcu et ex convallis efficitur at quis orci. Integer varius auctor enim ut mollis. </p> </div> </div> </div> </div> <div class="w-full md:w-1/2 lg:w-1/3 pl-5 pr-5 mb-5 lg:pl-2 lg:pr-2"> <div class="bg-white rounded-lg m-h-64 p-2 transform hover:translate-y-2 hover:shadow-xl transition duration-300"> <figure class="mb-2"> <img src="assets/img/s5.png" alt="" class="h-64 ml-auto mr-auto" /> </figure> <div class="rounded-lg p-4 flex flex-col"> <div> <h5 class="text-2xl font-bold leading-none text-center"> Servicio 5 </h5> <p class="mt-4"> In tincidunt ullamcorper odio, quis gravida magna fermentum quis. Aenean tempus tellus felis, in tristique ex pretium id. Aliquam mattis metus metus, ac feugiat nisl accumsan ac. Suspendisse venenatis suscipit eros ac malesuada. Sed non ipsum eget libero rutrum varius vitae vel libero. Aenean iaculis, purus in tempor pulvinar, sem urna gravida nisi, vel consectetur arcu eros et libero. Aenean non arcu et ex convallis efficitur at quis orci. Integer varius auctor enim ut mollis. </p> </div> </div> </div> </div> <div class="w-full md:w-1/2 lg:w-1/3 pl-5 pr-5 mb-5 lg:pl-2 lg:pr-2"> <div class="bg-white rounded-lg m-h-64 p-2 transform hover:translate-y-2 hover:shadow-xl transition duration-300"> <figure class="mb-2"> <img src="assets/img/s6.png" alt="" class="h-64 ml-auto mr-auto" /> </figure> <div class="rounded-lg p-4 flex flex-col"> <div> <h5 class="text-2xl font-bold leading-none text-center"> Servicio 6 </h5> <p class="mt-4"> In tincidunt ullamcorper odio, quis gravida magna fermentum quis. Aenean tempus tellus felis, in tristique ex pretium id. Aliquam mattis metus metus, ac feugiat nisl accumsan ac. Suspendisse venenatis suscipit eros ac malesuada. Sed non ipsum eget libero rutrum varius vitae vel libero. Aenean iaculis, purus in tempor pulvinar, sem urna gravida nisi, vel consectetur arcu eros et libero. Aenean non arcu et ex convallis efficitur at quis orci. Integer varius auctor enim ut mollis. </p> </div> </div> </div> </div> </div> <div class="container ml-auto mr-auto flex flex-wrap items-start mt-8"> <div class="w-full md:w-1/2 lg:w-1/3 pl-5 pr-5 mb-5 lg:pl-2 lg:pr-2"> <div class="bg-white rounded-lg m-h-64 p-2 transform hover:translate-y-2 hover:shadow-xl transition duration-300"> <figure class="mb-2"> <img src="assets/img/s7.png" alt="" class="h-64 ml-auto mr-auto" /> </figure> <div class="rounded-lg p-4 flex flex-col"> <div> <h5 class="text-2xl font-bold leading-none text-center"> Servicio 7 </h5> <p class="mt-4"> In tincidunt ullamcorper odio, quis gravida magna fermentum quis. Aenean tempus tellus felis, in tristique ex pretium id. Aliquam mattis metus metus, ac feugiat nisl accumsan ac. Suspendisse venenatis suscipit eros ac malesuada. Sed non ipsum eget libero rutrum varius vitae vel libero. Aenean iaculis, purus in tempor pulvinar, sem urna gravida nisi, vel consectetur arcu eros et libero. Aenean non arcu et ex convallis efficitur at quis orci. Integer varius auctor enim ut mollis. </p> </div> </div> </div> </div> <div class="w-full md:w-1/2 lg:w-1/3 pl-5 pr-5 mb-5 lg:pl-2 lg:pr-2"> <div class="bg-white rounded-lg m-h-64 p-2 transform hover:translate-y-2 hover:shadow-xl transition duration-300"> <figure class="mb-2"> <img src="assets/img/s8.png" alt="" class="h-64 ml-auto mr-auto" /> </figure> <div class="rounded-lg p-4 flex flex-col"> <div> <h5 class="text-2xl font-bold leading-none text-center"> Servicio 8 </h5> <p class="mt-4"> In tincidunt ullamcorper odio, quis gravida magna fermentum quis. Aenean tempus tellus felis, in tristique ex pretium id. Aliquam mattis metus metus, ac feugiat nisl accumsan ac. Suspendisse venenatis suscipit eros ac malesuada. Sed non ipsum eget libero rutrum varius vitae vel libero. Aenean iaculis, purus in tempor pulvinar, sem urna gravida nisi, vel consectetur arcu eros et libero. Aenean non arcu et ex convallis efficitur at quis orci. Integer varius auctor enim ut mollis. </p> </div> </div> </div> </div> <div class="w-full md:w-1/2 lg:w-1/3 pl-5 pr-5 mb-5 lg:pl-2 lg:pr-2"> <div class="bg-white rounded-lg m-h-64 p-2 transform hover:translate-y-2 hover:shadow-xl transition duration-300"> <figure class="mb-2"> <img src="assets/img/s9.png" alt="" class="h-64 ml-auto mr-auto" /> </figure> <div class="rounded-lg p-4 flex flex-col"> <div> <h5 class="text-2xl font-bold leading-none text-center"> Servicio 9 </h5> <p class="mt-4"> In tincidunt ullamcorper odio, quis gravida magna fermentum quis. Aenean tempus tellus felis, in tristique ex pretium id. Aliquam mattis metus metus, ac feugiat nisl accumsan ac. Suspendisse venenatis suscipit eros ac malesuada. Sed non ipsum eget libero rutrum varius vitae vel libero. Aenean iaculis, purus in tempor pulvinar, sem urna gravida nisi, vel consectetur arcu eros et libero. Aenean non arcu et ex convallis efficitur at quis orci. Integer varius auctor enim ut mollis. </p> </div> </div> </div> </div> </div> |
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.