Menu
Coddy logo textTech

Iconos - I

Lección 13 de 23 del curso Slider | Proyecto Front-end de Coddy.

challenge icon

Desafío

Fácil

Apunta al selector .wrapper i (los iconos):

 

1. Establece la position a absolute.

2. Establece top a 50%.

3. Establece height y width a 50 píxeles.

4. Establece el color de fondo de tu elección.

5. Establece el radio del borde (border radius) a 50%.

6. Establece la sombra de la caja (box shadow) según tu elección.

7. Establece transform a translateY(-50%)

8. Establece cursor a pointer

9. Establece el tamaño de fuente (font size) de tu elección (esto modificará el tamaño del icono).

10. Alinea el texto al centro (centra horizontalmente).

11. Establece line-height a 50px (centra verticalmente).

12. Establece la transición (transition) a transform 0.1s linear

Pruébalo tú mismo

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <!-- Write HTML code here -->
        <script src="script.js"></script>
    </body>
</html>

Todas las lecciones de Slider | Proyecto Front-end