סמלים - I

שיעור 13 מתוך 23 בקורס סליידר | פרויקט Front-end של Coddy.

אתגר

קל

מקד את הבורר .wrapper i (האייקונים):

1. הגדר את position ל־absolute.

2. הגדר את top ל־50%.

3. הגדר את height ואת width ל־50 פיקסלים.

4. הגדר את צבע הרקע לבחירתך.

5. הגדר את רדיוס הגבול ל־50%.

6. הגדר את צל התיבה לפי בחירתך.

7. הגדר את transform ל־translateY(-50%)

8. הגדר את cursor ל־pointer

9. הגדר את גודל הגופן לבחירתך (הוא ישנה את גודל האייקון).

10. יישר את הטקסט למרכז (ממורכז אופקית).

11. הגדר את line-height ל־50px (ממורכז אנכית).

12. הגדר את המעבר ל־transform 0.1s linear

נסו בעצמכם

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <!-- כתבו כאן קוד HTML -->
        <script src="script.js"></script>
    </body>
</html>

כל השיעורים ביחידה סליידר | פרויקט Front-end

תרגלו בעצמכם: Web אונליין