Menu
Coddy logo textTech

Icons - I

Lesson 13 of 23 in Coddy's Slider | Front-end Project course.

challenge icon

Challenge

Easy

Target .wrapper i (the icons) selector:

 

1. Set the position to absolute.

2. Set the top to 50%.

3. Set the height and width to 50 pixels.

4. Set the background color of your choice.

5. Set the border radius to 50%.

6. Set the box shadow according to your choice.

7. Set transform to translateY(-50%)

8. Set cursor to pointer

9. Set the font size of your choice (it will modify the size of the icon).

10. Align the text to the center (centers horizontally).

11. Set line-height to 50px (centers vertically).

12. Set the transition to transform 0.1s linear

Try it yourself

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

All lessons in Slider | Front-end Project