مشروع ختامي — نموذج تسجيل متحرك متجاوب

نجمع Grid والمتغيرات والحركات بنموذج حقيقي يصلح لأي موقع. الهيكل:

<form class="signup">
  <label>الاسم <input required></label>
  <label>الإيميل <input type="email" required></label>
  <button>أنشئ الحساب</button>
</form>

والتنسيق الكامل:

:root { --brand: #8b5cf6; --bg: #f5f5fa; }

.signup {
  display: grid;
  gap: 14px;
  max-width: 360px;
  margin: 40px auto;
  padding: 24px;
  background: white;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
}

.signup input {
  padding: 10px;
  border: 2px solid var(--bg);
  border-radius: 10px;
  transition: border-color .3s;
}

.signup input:focus { border-color: var(--brand); }

.signup button {
  background: var(--brand);
  color: white;
  border: none;
  padding: 12px;
  border-radius: 10px;
  cursor: pointer;
  transition: transform .3s;
}

.signup button:hover { transform: scale(1.03); }

@media (max-width: 480px) {
  .signup { padding: 16px; margin: 16px; }
}

لاحظ النمط الكامل: Grid للفراغ، متغيرات للألوان، transition للتركيز والحووم، وmedia query للجوال — هذا أساس كل تصميم حديث.