גוף
חלק מהיחידה עיצוב באמצעות CSS במסלול ה-HTML של Coddy. שיעור 50 מתוך 76.
אתגר
קלבפרויקט הזה נבנה ונעצב טופס התחברות פשוט. הפרויקט יעזור לך לתרגל מושגי CSS מרכזיים, כולל:
✅ מיקום מדויק של רכיבים במרכז דף אינטרנט
✅ עיצוב רכיבי טופס כמו שדות קלט וכפתורים
✅ עבודה עם גבולות, צללים וריווח
✅ השארת מקום ליצירתיות בעיצוב
בסוף הפרויקט יהיה לך טופס התחברות מעוצב היטב, בעל מראה מודרני ומלוטש, בדומה לתמונה שלמטה.
החל סגנונות על תגית <body>. פעל לפי השלבים הבאים:
- הגדר צבע רקע בגוון בהיר לבחירתך.
- השתמש ב־Flexbox כדי למרכז את הטופס אופקית ואנכית.
- הגדר את גובה הדף ל־
100vhכדי שהטופס יישאר ממורכז גם בעת שינוי גודל החלון.
נסו בעצמכם
<html>
<head>
<title>Login Form</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<form class="login-form">
<h2>Login</h2>
<input type="text" placeholder="Username">
<input type="password" placeholder="Password">
<button type="submit">Login</button>
</form>
</body>
</html>
כל השיעורים ביחידה עיצוב באמצעות CSS
תרגלו בעצמכם: Web אונליין