Como Crear Una Página Web con Tailwind CSS 3 (HTML Puro) – Parte 2
5 minuto(s)Demo
En la parte anterior llamada Como Crear Una Página Web con Tailwind CSS 3 (HTML Puro) – Parte 1, instanciamos la CDN de Tailwind CSS dentro de las etiquetas <head></head>. Con ellos ya podemos crear nuestra página sin problemas. Asimismo creamos el contenido de la página Home o principal, le diseñamos el Menú y el Footer, estos 2 elementos estarán presentes en todas las páginas de nuestro sitio web. También agregamos un Carrousel de imágenes, luego una sección de Servicios Destacados y un Formulario para que los usuarios dejen sus correos y se suscriban al Newsletter. En esta segunda parte vamos a crear el contenido para la página Nosotros, 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: “5 Consejos para ser un Programador más Productivo” (No son los clásicos consejos técnicos de programación, si no de rutinas y buenos hábitos cotidianos):
| Spotify: | Sound Cloud: | Apple Podcasts |
 |
 |
 |
Bien ahora continuemos con el Post: Como Crear Una Página Web con Tailwind CSS 3 (HTML Puro) – Parte 2.
Página Nosotros
Esta página ofrece información acerca de la organización, pero primero voy a crear un archivo llamado nosotros.html para esta página, este archivo lo creo en el directorio principal del proyecto, donde también se encuentra el archivo index.html que sirve para la página principal.
|
1 2 3 4 5 6 |
/web-tailwindcss-3 ├── /assets ├── index.html ├── nosotros.html // Creo y Abro este Archivo |
Abro el archivo nosotros.html y empezaré creando una sección de introducción para la página nosotros.
Nosotros (Introducción)
En esta sección colocaré el texto “Nosotros” con una imagen de gran ancho y debajo un texto de introducción.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!-- 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"> Nosotros </h1> </div> <div class="w-full pl-5 lg:pl-2 mb-4 mt-4 pr-4"> <!-- Imagen (Nosotros) --> <img src="assets/img/img_nosotros.jpg" class="pb-5"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tincidunt leo ut nisl sagittis lobortis non non dolor. Sed elementum libero turpis, vel faucibus tellus tempus in. Nulla a tortor convallis, facilisis nibh ut, iaculis leo. Aliquam nunc metus, mollis sed varius nec, mollis id lectus. Morbi auctor fermentum ante vel malesuada. Aliquam erat volutpat. Vivamus eget est vestibulum, ultrices diam a, laoreet nisl. Vivamus vitae ultricies tortor. Aliquam volutpat eros eleifend pharetra iaculis. Nunc tristique cursus orci in malesuada. Etiam a neque tellus. Ut consectetur, quam in venenatis consequat, eros dui pellentesque sem, vel mollis nunc lacus eu nibh. Nunc eget ex id magna rhoncus accumsan. Curabitur orci risus, consectetur sit amet vulputate vel, blandit vitae arcu. </p> </div> </div> |
Entonces si voy al navegador, debería de ver los cambios sin problemas:
Ahora pasemos a la siguiente sección.
Objetivo, Misión y Visión
Esta sección va estar compuesta de 3 datos, se mostrará el objetivo de la empresa, misión y visión. Para mantener el orden, lo 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 |
<!-- Objetivo, Misión y Visión --> <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/n1.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"> Objetivo </h5> <p class="mt-4"> Donec non consequat enim. Duis maximus, dui hendrerit sollicitudin maximus, ipsum velit sodales arcu, nec ultricies metus nisi quis tortor. Nulla mauris odio, lacinia a leo ut, euismod vestibulum dolor. Praesent eget dapibus neque, non rutrum sapien. Duis malesuada nunc nec elit dignissim hendrerit. </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/n2.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"> Misión </h5> <p class="mt-4"> Donec non consequat enim. Duis maximus, dui hendrerit sollicitudin maximus, ipsum velit sodales arcu, nec ultricies metus nisi quis tortor. Nulla mauris odio, lacinia a leo ut, euismod vestibulum dolor. Praesent eget dapibus neque, non rutrum sapien. Duis malesuada nunc nec elit dignissim hendrerit. </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/n3.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"> Visión </h5> <p class="mt-4"> Donec non consequat enim. Duis maximus, dui hendrerit sollicitudin maximus, ipsum velit sodales arcu, nec ultricies metus nisi quis tortor. Nulla mauris odio, lacinia a leo ut, euismod vestibulum dolor. Praesent eget dapibus neque, non rutrum sapien. Duis malesuada nunc nec elit dignissim hendrerit. </p> </div> </div> </div> </div> </div> |
Igualmente, si voy al navegador debería verse la información agregada:
En la imagen anterior, puedes ver que debajo del Objetivo, Misión y Visión esta 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.
Bien, eso es todo para la página Nosotros. 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 de este tutorial, vamos a crear el contenido de la página Servicios.
- 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.
- Tailwind CSS
- 20-01-2022
- 29-01-2022
- Crear un Post - Eventos Devs - Foro
Seguimos trabajando las 24 horas y 365 días del año para mejorar tu experiencia en la comunidad.
Seguimos trabajando para brindarte le mejor experiencia en Nube Colectiva.
Social
Redes Sociales (Developers)
Redes Sociales (Digital)