Footer

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:

https://github.com/platzi/PlatziTravel

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>

Es un Curso que no esta Actualizado (versiones antiguas), y he tenido muchísimas dificultades a lo largo de este, me ha tocado investigar y gracias a la ayuda de los compañeros, que han mitigado las falencias de este.

Al finalizar el Curso, pondré mi inconformidad.

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 🚀

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>

Estaba pensando en como evitar reguero de estilos en los párrafos de nuestra sección footer, ya que estamos usando los mismos estilos en la mayoría de nuestros <P>, podríamos hacer uso de nuestro
src/ tailwind.css, usando el @apply de la siguiente forma.

//HTML
    <footer class="w-full h-auto bg-gray-50 p-6 space-y-2">
      <p class="text-lg text-gray-500 font-ligt">Acerca de</p>
      <p class="TextFooter">Siguenos</p>
      <p class="TextFooter">Inversiones</p>
      <p class="TextFooter">Empleos</p>
      <p class="TextFooter">Terminos y Condiciones</p>
      <p class="TextFooter">Platzi Travel</p>
    </footer>

//SRC/TAILWIND.CSS
.TextFooter {
    @apply text-sm text-gray-300
}

De esta forma evitamos escribir la misma linea de codigo varias veces.
Espero les sirva.

Mejor puse un text-gray-500, el 300 es muy díficl de leer en fondo blanco

Acerca de

Politica de privacidad

Inversionistas

Empleos

Términos y condiciones

Platzi Travel, Inc.

Acerca de\

Politica de privacidad\

Inversionistas\

Empleos\

Términos y condiciones\

Platzi Travel, Inc.\