diff --git a/README.md b/README.md index 8b74da2..52ba6cf 100644 --- a/README.md +++ b/README.md @@ -18,6 +18,15 @@ This repository contains a project designed for managing phone contacts. - Contact filtering - Routing +This project is a web application for managing contacts, including functions for +registering and authorizing users, adding and deleting contacts, and filtering +contacts. The app allows users to register, log in and manage their contacts +securely. Users can add new contacts, remove unnecessary ones, and filter +contacts based on specific criteria such as name or email. + +Home page +Private page + ## Technologies Used React Redux Toolkit Axios React-i18next Notiflix ReactLoaderSpinner diff --git a/README.ua.md b/README.ua.md index 381f55c..3f43b48 100644 --- a/README.ua.md +++ b/README.ua.md @@ -19,6 +19,16 @@ - Фільтрація контактів - Маршрутизація +Цей проект являє собою веб-додаток для керування контактами, що включає функції +реєстрації та авторизації користувачів, додавання та видалення контактів, а +також фільтрування контактів. Програма дозволяє користувачам зареєструватися, +увійти в систему та безпечно керувати своїми контактами. Користувачі можуть +додавати нові контакти, видаляти непотрібні та фільтрувати контакти за певними +критеріями, такими як ім'я або електронна пошта. + +Home page +Private page + ## Використані технології React Redux Toolkit Axios React-i18next Notiflix ReactLoaderSpinner diff --git a/src/components/Form/ContactForm/ContactForm.module.css b/src/components/Form/ContactForm/ContactForm.module.css index a2b6299..d18f162 100644 --- a/src/components/Form/ContactForm/ContactForm.module.css +++ b/src/components/Form/ContactForm/ContactForm.module.css @@ -33,9 +33,6 @@ .tel-label input::placeholder { color: var(--placeholder-color); } -/* .tel-label { - margin-left: 10px; -} */ .name-label, .tel-label { font-size: 22px; @@ -67,21 +64,21 @@ text-align: center; } @media screen and (min-width: 768px) { -.form-container { - max-width: 630px; -} -.name-input, -.tel-input { - width: 258px; -} -.button { - font-size: 16px; - width: 260px; - margin: 10px 0 0 168px; -} -.tel-label { - margin-left: 10px; -} + .form-container { + max-width: 630px; + } + .name-input, + .tel-input { + width: 258px; + } + .button { + font-size: 16px; + width: 260px; + margin: 10px 0 0 168px; + } + .tel-label { + margin-left: 6px; + } } -/* @media screen and (min-width: 1440px) {} */ \ No newline at end of file +/* @media screen and (min-width: 1440px) {} */ diff --git a/src/img/PhonebookLogin.png b/src/img/PhonebookLogin.png new file mode 100644 index 0000000..6d949a1 Binary files /dev/null and b/src/img/PhonebookLogin.png differ diff --git a/src/img/phonebook.png b/src/img/phonebook.png index cfef8d2..59de6f5 100644 Binary files a/src/img/phonebook.png and b/src/img/phonebook.png differ