الأيقونات - ١
الدرس 13 من 23 في دورة سلايدر | مشروع Front-end على Coddy.
التحدي
سهلاستهدف محدد .wrapper i (الأيقونات):
1. قم بتعيين position إلى absolute.
2. قم بتعيين top إلى 50%.
3. قم بتعيين height و width إلى 50 بكسل.
4. قم بتعيين لون الخلفية من اختيارك.
5. قم بتعيين border radius إلى 50%.
6. قم بتعيين box shadow وفقاً لاختيارك.
7. قم بتعيين transform إلى translateY(-50%)
8. قم بتعيين cursor إلى pointer
9. قم بتعيين حجم الخط (font size) من اختيارك (سيؤدي ذلك إلى تعديل حجم الأيقونة).
10. قم بمحاذاة النص إلى المركز (يتوسط أفقياً).
11. قم بتعيين line-height إلى 50px (يتوسط عمودياً).
12. قم بتعيين transition إلى transform 0.1s linear
جرّب بنفسك
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Write HTML code here -->
<script src="script.js"></script>
</body>
</html>