Para no tener que meter el Footer dentro de la etiqueta de Section (Mala Practica), solo modifica la altura del section por:
section class="w-full h-auto"
en lugar de usar:
section class="w-full h-screen"
Conociendo Tailwind CSS
Bienvenida al desarrollo con Tailwind
Tailwind 3.0: ¿qué hay de nuevo?
¿Cómo funciona Tailwind? Y otros frameworks de CSS
Mobile First y Utility First
Instalación y directivas
Creación del proyecto e instalación de Tailwind
Directivas de Tailwind
Utilidades
Nueva paleta de colores extendida
Medidas y Breakpoints
Flexbox
Maquetación del proyecto
Plugins
Forms, Typography y Aspect ratio
Personalización
Tailwind como API para la creación de un Design System
Proyecto: Platzi Travel
Construyendo el cuerpo del proyecto
Creando la sección de Home
Diseñando nuestras cards
Extracción de componentes a clases para nuestra card
Creando la sección de Recomendados
Agregando animaciones al proyecto
Creando la sección de Rentas destacadas
Sección de FAQS
Footer
TabBar funcional
Haciendo responsivo nuestro proyecto
Haciendo responsivo nuestro proyecto: rentas destacadas
Creando la navbar
Agregando el Dark Mode
Optimización de nuestro proyecto
Purge CSS
Cómo hacer la migración de tu proyecto a Tailwind 3.0
Conclusiones
Conclusiones y siguientes pasos
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Aportes 11
Preguntas 3
Para no tener que meter el Footer dentro de la etiqueta de Section (Mala Practica), solo modifica la altura del section por:
section class="w-full h-auto"
en lugar de usar:
section class="w-full h-screen"
la propiedad text-gray-300 es mejor agregarla a todo el footer en vez de repetirla 6 veces en todos los elementos p.
Hay que evitar repetir código.
Si pueden poner el footer esos enlaces con un UL sería mejor, esto ayuda al posicionamiento SEO.
Para los que andan buscando el repositorio de este curso:
Para agregar los iconos pueden agregar la siguiente CDN en la cabezera del nuestro index.html:
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
Luego pueden agregar los iconos de twitter y instagram:
<i class="fa-brands fa-twitter"></i>
<i class="fa-brands fa-instagram"></i>
Clases de Tailwind y sus equivalentes en propiedad CSS vistas en esta clase:
w-full
→ width: 100%;
h-auto
→ height: auto;
bg-gray-50
→ background-color: #f9fafb;
p-6
→ padding: 1.5rem;
space-y-2
→ margin-top: 0.5rem;
text-lg
→ font-size: 1.125rem;
line-height: 1.75rem;
text-sm
→ font-size: 0.875rem;
line-height: 1.25rem;
text-gray-300
→ color: #6b7280;
–
Sección Footer en archivo index.html
:
<footer class="w-full h-auto bg-gray-50 px-6 space-y-2 mt-6 pt-4">
<p class="text-lg">Acerca De</p>
<p class="text-sm text-gray-300">Inversionistas</p>
<p class="text-sm text-gray-300">Empleos</p>
<p class="text-sm text-gray-300">Términos y condiciones</p>
<p class="text-sm text-gray-300">Platzi Travel, Inc.</p>
</footer>
ASI YA LES SALDRA EL FOOTER CON LOS ICONOS
En la parte del Head pongan
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
Esto va en el footer
<footer class="w-full h-auto bg-gray-50 p-6 space-y-2">
<p class="text-lg">Acerca de</p>
<p class="text-sm text-gray-400">Investing</p>
<p class="text-sm text-gray-400">Work with us</p>
<p class="text-sm text-gray-400">Terms and conditions</p>
<p class="text-sm text-gray-400">Platzi Travel Inc.</p>
<i class="fa-brands fa-twitter text-cyan-400"></i>
<i class="fa-brands fa-instagram text-purple-400"></i>
</footer>
Para no poner el footer dentro de la section, solamente se cambia el valor de la propiedad de altura en el section, de h-screen a h-auto.
Al final así hice mi footer jeje fuera del section principal, usando listas y poniendo los iconos como el figma. Use un cdn de fontawesome para agregar los iconos de twitter e instagram
<footer class="w-full h-auto bg-gray-50 p-6 space-y-2">
<h2 class="text-lg">
About us
</h2>
<ul>
<li class="text-sm text-gray-300">
Investors
</li>
<li class="text-sm text-gray-300">
Jobs
</li>
<li class="text-sm text-gray-300">
Terms and Conditions
</li>
<li class="text-sm text-gray-300">
Platzi Travel, Inc.
</li>
<li class="text-sm text-gray-300">
Follow Us
<ul class="text-xl text-gray-300 flex space-x-2">
<li>
<a href="#">
<i class="fa-brands fa-twitter"></i>
</a>
</li>
<li>
<a href="#">
<i class="fa-brands fa-instagram"></i>
</a>
</li>
</ul>
</li>
</ul>
</footer>
Mejor puse un text-gray-500, el 300 es muy díficl de leer en fondo blanco
Para los que deseen añadir iconos al proyecto, pueden hacerlo con HeroIcons, hecho por los mismos creadores de Tailwind.
Solo tienen que copiar el codigo SVG y ponerlo donde deseen.
Ejemplo 💙
Resultado 🚀
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?
o inicia sesión.