**HTML**
- Form Validation
- Input Types (password, checkbox, ...)
- Input Attributes (value, min, max, ...)
**CSS**
- Flexbox Layout
- Pseudo Selectors (:hover, :focus, ...)
- Font Management
---
برای استفاده از خدمات شرکت Mockstar، باید در سایت آن عضو شد و از پمبه خواسته شده است تا طرح جدید صفحات ورود و ثبت‌نام را پیاده‌سازی کند.
پمبه برای محک‌زدن توانایی‌هایش می‌خواهد اعتبارسنجی ورودیهای کاربر را بدون استفاده از `JavaScript` انجام دهد.
## توضیحات سوال
<details class="green">
<summary>تصاویر خروجی نمونه</summary>
صفحه register:
صفحه login:
</details>
می‌توانید برای بررسی دقیق‌تر نتیجۀ نهایی،
[این فیلم](https://codestar.s3.ir-thr-at1.arvanstorage.com/challenge-03.mp4)
را مشاهده کنید.
## پروژه اولیه
پروژه اولیه را از [این لینک](https://quera.ir/contest/assignments/41564/download_problem_initial_project/140012) دانلود کنید.
<details class="blue">
<summary>ساختار فایل‌ها</summary>
```
initial-project-03.zip
├── icons
│ ├── email.svg
│ ├── password.svg
│ ├── phone.svg
│ └── user.svg
├── illustrations
│ └── gangster.svg
├── images
│ └── rdr2.webp
├── dynamic.css
├── index.html
└── static.css
```
</details>
<details class="pink">
<summary>راه‌اندازی پروژه</summary>
+ ابتدا پروژۀ اولیه را دانلود و از حالت فشرده خارج کنید.
+ سپس فایل `index.html` را در مرورگر خود باز کنید.
</details>
## خواسته‌های مسئله
- اعتبارسنجی ورودیهای کاربر تنها با استفاده از `html`
- نام کاربری باید از جنس `text` باشد
- نام کاربری باید حداقل ۳ و حداکثر ۳۲ کاراکتر داشته باشد
- نام کاربری فقط می‌تواند حاوی حروف کوچک و بزرگ انگلیسی و اعداد باشد
- ایمیل باید از جنس `email` باشد
- تلفن باید از جنس `tel` باشد
- تلفن با یکی از عبارات زیر شروع شود و در ادامه حاوی ۹ رقم باشد
- `+989`
- `00989`
- `09`
- رمز عبور باید از جنس `password` باشد
- رمز عبور باید حداقل ۸ و حداکثر ۳۲ کاراکتر داشته باشد
- رمز عبور باید حداقل حاوی یک حرف کوچک انگلیسی، یک حرف بزرگ انگلیسی، یک رقم و یکی از کاراکترهای `!@#$%^&*` باشد
- دکمه‌ها باید از جنس `submit` باشند
- جابه‌جایی `smooth` بین بخش‌های `register` و `login`
| مقدار | ویژگی | وضعیت | المان |
| :---------------------------------------: | :---------------: | :-----: | :-----------: |
| `hidden` | Overflow | \- | main |
| `50rem` | عرض | \- | main |
| `0.2rem` | گردی گوشه‌ها | \- | main |
| `60%` | عرض | \- | form |
| `2rem` | Padding | \- | form |
| `1rem` | فاصله بین فرزندان | \- | form |
| `0.8rem` | اندازه فونت | \- | label > span |
| `1.2rem` | عرض | \- | label > img |
| `--color--form-input-background` | رنگ پس‌زمینه | \- | label > input |
| `--color--form-input-background--invalid` | رنگ پس‌زمینه | invalid | label > input |
| `--color--form-button-background` | رنگ پس‌زمینه | \- | button |
| `--color--form-button-foreground` | رنگ | \- | button |
| `--color--form-button-background--hover` | رنگ پس‌زمینه | hover | button |
| `--color--form-paragraph-foreground` | رنگ | \- | p |
| `--color--form-link-foreground` | رنگ | \- | a |
| `40%` | عرض | \- | section |
| `2rem` | Padding | \- | section |
| `16rem` | عرض | \- | section > img |
## نکات
- شما تنها مجاز به تغییر در فایل‌های `index.html` و `dynamic.css` هستید. تغییرات در باقی فایل‌ها نادیده گرفته می‌شود.
- شما تنها مجاز به تغییر یا اضافه و کم کردنِ Attributeهای فایل `index.html` هستید و نباید ترتیب المان‌ها را عوض کنید یا المانی را اضافه و کم کنید.
- **شما مجاز به استفاده از JavaScript نیستید.**
- توجه کنید که داوری خودکار بر مبنای ساختار فایل `index.html` انجام می‌شود.
- برای ثبت پاسخ، پروژه را با ساختار زیر ارسال کنید.
```
[your-zip-file-name].zip
├── dynamic.css
└── index.html
```