Crea el footer

Curso de Tailwind CSS 1

Introducción, instalación y ambiente de desarrollo

¿Qué es Tailwind CSS?

Instalación y ambiente de desarrollo

Directivas de Tailwind

Conceptos básicos

Personalización y configuración

Responsive Design, Mobile First y Utility First

Utilerías

Colores

Cómo crear grids o columnas en Tailwind CSS

Dimensiones y Espacios

Cambiando las propiedades de la tipografía

Ajustando el espaciado entre letras y líneas

Display

Flexbox

Crea tus propias utilerías

Entendiendo las variantes y las pseudo-clases

¡Es hora de practicar!

Proyecto: PlatziFood

Creando una card

Aplicando formato a la card

Responsive design en la card

Construye el header

Crea el footer

Crea un banner

Cómo integrar una card

Forms

Directivas de Apply

Extraer componentes

Navbar

Alpine JS

Optimiza tu archivo: PurgeCSS y NanoCSS

Conclusiones

Conclusiones y qué sigue

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Si ya tienes una cuenta,

Recursos

Aportes 18

Preguntas 4

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Jaime David Burbano Montoya

hace 5 años

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.

Alberto Ramírez Caballero

hace 4 años

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">

Wandy Rafael Santana Evangelista

hace 4 años

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>```

Diego Arcos Merino

hace 3 años

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”>

Aarón Fabricio Santa Cruz Valdez

hace 4 años

Intente modificar las clases con js y no se puede.

WYLDER ESTIVEN QUICENO OLAYA

hace 5 meses

Mobile ![](https://static.platzi.com/media/user_upload/image-4d39a809-a349-4451-96d0-7ea40752c3fa.jpg) Desktop ![](https://static.platzi.com/media/user_upload/image-3fbc2b59-5a9a-49cf-a2d8-42e563895c93.jpg)

Johanna Apure Canónico

hace 3 años

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

Gonzalo Pimentel

hace 4 años

Genial!

Rubén Ernesto Aragón Gil

hace 2 años

Si agregan este código podrán tener el cursor pointer:

<div class="hover:text-blue-500 cursor-pointer"><i class="fa fa-facebook"></i></div>
<div class="hover:text-blue-300 cursor-pointer"><i class="fa fa-twitter"></i></div>
<div class="hover:text-pink-300 cursor-pointer"><i class="fa fa-instagram"></i></div>

Aranxa Martinez

hace 2 años

Yo hice unos pequeños cambios en el footer, para los distintos dispositivos y así me quedo 😃

Vista para celulares:

Vista para Ipad:

Vista para Laptops:

Luis Fernando Cruz Carrillo

hace 3 años

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

Angélica Rocha

hace 4 años

screencapture-127-0-0-1-5500-public-home-html-2020-05-07-14_07_21.png

Va quedando super 😃

Uriel Rodolfo Ortíz Popolo

hace 4 años

El link fontawesome cdn
https://www.bootstrapcdn.com/fontawesome/

Jesús Alberto Martínez Hernández

hace 4 años

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”>

Luis Alejandro Vera Hernandez

hace 3 años

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>

Ruben Garcia

hace 4 años

Javier Sánchez Mendoza

hace 4 años

https://icons.getbootstrap.com/

John Steven Bernal Gonzalez

hace 4 años

<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