Створення Step Project - The Ham
Верстка виконана без використання CSS бібліотек типу Bootstrap або Materialize на чистому CSS з додаванням динамічних елементів на JavaScript та підключенням додаткового слайдера.
Динамічні елементи на сторінці (JavaScript):
- Вкладки у секції `Our services` перемикаються при натисканні мішем.
- Кнопка `Load more` у секції `Our amazing work` імітує завантаження з сервера нових зображень. При її натисканні в секції знизу з'являються ще 12 зображень. Після цього кнопка зникає.
- Кнопки на вкладці `Our amazing work` є «фільтрами продукції». При натисканні на кнопку категорії відображаються тільки ті зображення, які належать до цієї категорії. `All` показує зображення з усіх категорій.
- Карусель на вкладці `What people say about theHam` має бути робочою, за кліком як на іконі фотографії внизу, так і на стрілках вправо-ліво. У каруселі змінюється як зображення, так і текст.
Для підключення динамічних елементів використовувалася jQuery (Sviper Slider), так і чистий Javascript код.
Динамічні елементи на сторінці (JavaScript):
- Вкладки у секції `Our services` перемикаються при натисканні мішем.
- Кнопка `Load more` у секції `Our amazing work` імітує завантаження з сервера нових зображень. При її натисканні в секції знизу з'являються ще 12 зображень. Після цього кнопка зникає.
- Кнопки на вкладці `Our amazing work` є «фільтрами продукції». При натисканні на кнопку категорії відображаються тільки ті зображення, які належать до цієї категорії. `All` показує зображення з усіх категорій.
- Карусель на вкладці `What people say about theHam` має бути робочою, за кліком як на іконі фотографії внизу, так і на стрілках вправо-ліво. У каруселі змінюється як зображення, так і текст.
Для підключення динамічних елементів використовувалася jQuery (Sviper Slider), так і чистий Javascript код.