PhineX Lab | Portfolio Step 5

PhineX / Portfolio · قسم About

5/8

الخطوة ٥

قسم About — بطاقة التعريف

سنبني قسم "من أنا" بتخطيط CSS Grid ثنائي الأعمدة مع بطاقة لاصقة.

المهام

١

للـ .about-grid: display: grid، grid-template-columns: 280px 1fr، gap: 40px

٢

للـ .about-card: background: var(--card)، border-radius: var(--radius)، position: sticky، top: 90px

٣

للـ .stat-num: font-family: 'JetBrains Mono'، color: var(--neon)، font-size: 1.4rem

٤

للـ .info-item:hover: border-color: rgba(57,255,20,.2)، transform: translateX(-4px)

💡 position: sticky: تجعل البطاقة تلتصق بالشاشة عند التمرير. مختلفة عن fixed لأنها تبقى داخل حاويتها.

1

alexmorgan.dev / portfolio

◀ السابق

التالي ▶