No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Curso B谩sico de Tailwind 2 y 3

Curso B谩sico de Tailwind 2 y 3

Ana Mar铆a D铆az Solorio

Ana Mar铆a D铆az Solorio

Footer

21/29
Recursos

Aportes 11

Preguntas 3

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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-fullwidth: 100%;
  • h-autoheight: auto;
  • bg-gray-50background-color: #f9fafb;
  • p-6padding: 1.5rem;
  • space-y-2margin-top: 0.5rem;
  • text-lgfont-size: 1.125rem; line-height: 1.75rem;
  • text-smfont-size: 0.875rem; line-height: 1.25rem;
  • text-gray-300color: #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 馃殌