Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Curso de Tailwind CSS 2020

Curso de Tailwind CSS 2020

Víctor Yoalli Domínguez

Víctor Yoalli Domínguez

Crea el footer

20/29
Recursos

Aportes 16

Preguntas 3

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

Para agregarle un transition al hover pueden usar las siguientes etiquetas

<div class="hover:text-primary cursor-pointer transition ease-out duration-200" > <i class="fa fa-facebook"></i> Facebook </div>
<div class="hover:text-primary cursor-pointer transition ease-out duration-200" > <i class="fa fa-twitter"></i> Twitter </div>
<div class="hover:text-primary cursor-pointer transition ease-out duration-200" > <i class="fa fa-instagram"></i> Instagram </div>

Con la etiqueta cursor-pointer van a hacer que aparezca el dedo del click al hacer hover.
Con la etiqueta transition van a hacer que el hover tenga una transición en las propiedades que cambian con el hover.
Con la etiqueta ease-out van a colocar la velocidad de la animación de transición. Pueden ver toda la documentación en www.tailwindcss.com/docs/transition-timing-function/#/app
Con la etiqueta duration-200 pueden modificar el tiempo que dura la animación. Esta puede ser modificada dede el 200.

El enlace a fontawesome:

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

Creo que para un mejor diseno quedaria mejor de esat manera:
Para pantallas sm y md (iPhone y iPad):

Y para pantallas lg en adelante (Escritorio):

Este es el codigo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
    <link rel="stylesheet" href="css/style.css">
    <title>Header</title>
</head>
<body>
    <div class="flex justify-between items-center px-2 bg-secondary text-white">
        <div>
            <img class="h-8 py-1" src="images/logo-w.svg" alt="Platzi Food">
        </div>
        <div class="text-2xl">&equiv;</div>
    </div>
    <footer class="absolute lg:flex-row-reverse md:items-center lg:flex lg:justify-between bottom-0 w-full bg-secondary text-white">
        <div class="mt-4 md:mb-4 flex justify-center items-center">
            <div class="mx-2 hover:text-blue-700"><i class="fa fa-facebook"></i> Platzi Food</div>
            <div class="mx-2 hover:text-blue-500"><i class="fa fa-twitter"></i> @platzifood</div>
            <div class="mx-2 hover:text-pink-500"><i class="fa fa-instagram"></i> @platzifood</div>
        </div>
        <div class="mt-4 mb-4">
            <ul class="flex justify-center items-center">
                <li class="mx-2">About us</li>
                <li class="mx-2">Support</li>
                <li class="mx-2">Resgitry</li>
                <li class="mx-2">Privacy</li>
            </ul>
        </div>
    </footer>
</body>
</html>```

El enlace a fontawesome:
<link href=“https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css” rel=“stylesheet” integrity=“sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN” crossorigin=“anonymous”>

Genial!

Intente modificar las clases con js y no se puede.

Para los iconos un pack liviano y gratis que les recomiendo es remixicon

También pueden usar para los iconos: https://ionic.io/ionicons

<link href=“https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css” rel=“stylesheet” integrity=“sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN” crossorigin=“anonymous”>

Va quedando super 😃

Cdn: <link rel=“stylesheet” href=“https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css” integrity=“sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN” crossorigin=“anonymous”>

HTML

<!-- FOOTER -->

    <footer class="absolute lg:flex-row-reverse md:items-center lg:flex lg:justify-between bottom-0 w-full text-white bg-secondary"> <!-- absolute bottom-0 para que se vaya hasta el final y w-full para que ocupe todo el ancho -->
        <div >
            <ul class="mt-4 md:mb-4 flex justify-center items-center">
                <li class="mx-2 hover:text-primary cursor-pointer transition ease-out duration-200"> <i class="fa fa-facebook"> </i> Facebook</li>

                <li class="mx-2 hover:text-primary cursor-pointer transition ease-out duration-200"> <i class="fa fa-instagram"></i> Instagram</li>

                <li class="mx-2 hover:text-primary cursor-pointer transition ease-out duration-200"> <i class="fa fa-youtube"></i> Youtube</li>
            </ul>

            <div class="mt-4 mb-4" >
                <ul class="flex justify-center items-center"><!-- list disc es para agregar las viñetas solo en medium -->
                    <li class="mx-2">Soporte</li>
                    <li class="mx-2">Acerca de </li>
                    <li class="mx-2">Registro</li>
                    <li class="mx-2">Privacidad</li>
                </ul>

            </div>
        </div>
    </footer>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
  • md:list-disc Ponemos los bullets o puntos