Menu
Coddy logo textTech

Icons - I

Lektion 13 von 23 im Kurs Slider | Front-end-Projekt von Coddy.

challenge icon

Aufgabe

Einfach

Ziele auf den Selektor .wrapper i (die Icons) ab:

 

1. Setze position auf absolute.

2. Setze top auf 50%.

3. Setze height und width auf 50 Pixel.

4. Setze eine Hintergrundfarbe deiner Wahl.

5. Setze den Rahmenradius (border radius) auf 50%.

6. Setze den Box-Schatten (box shadow) nach deiner Wahl.

7. Setze transform auf translateY(-50%)

8. Setze cursor auf pointer

9. Setze die Schriftgröße (font size) deiner Wahl (dies ändert die Größe des Icons).

10. Richte den Text zentriert aus (zentriert horizontal).

11. Setze line-height auf 50px (zentriert vertikal).

12. Setze die Transition auf transform 0.1s linear

Probier es selbst

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

Alle Lektionen in Slider | Front-end-Projekt