Develop

.github/workflows/test.yml-template

@@ -0,0 +1,29 @@
+name: Test
+
+on:
+  pull_request:
+    branches: [ master ]
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [20.x]
+
+    steps:
+    - uses: actions/checkout@v2
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v1
+      with:
+        node-version: ${{ matrix.node-version }}
+    - run: npm install
+    - run: npm test
+    - name: Upload HTML report(backstop data)
+      if: ${{ always() }}
+      uses: actions/upload-artifact@v2
+      with:
+        name: report
+        path: backstop_data

README.md

@@ -65,7 +65,7 @@ Adapt the page to the following screens:
 11. `git push origin develop` - to send you code for PR.
 12. Create a Pull Request (PR) from your branch `develop` to branch `master` of original repo.
 13. Replace `<your_account>` with your Github username in the
-  [DEMO LINK](https://<your_account>.github.io/layout_dia/).
+  [DEMO LINK](https://lightdiller.github.io/layout_dia/).
 14. Copy `DEMO LINK` to the PR description.
 
 > To update you PR repeat steps 7-11.

checklist.md

@@ -30,3 +30,96 @@
 8. The "Hire Us" button in the header menu should lead to the contact form
 9. In the `Vision`, `Passion`, `Results` sections, the “Apply” button also should lead to the contact form
 10. All the social icons in the footer should be clickable and open the social networks in a new tab
+
+
+
+
+
+Реализовать лендинг согласно дизайну в Figma — использовать BEM и SCSS.
+
+Адаптировать страницу под следующие экраны:
+
+Большие экраны — 2560px
+Дизайн — 1600px
+Desktop — 1280px
+Маленький desktop — 1024px
+Планшет — 640px
+Mobile (> 320px)
+Требования
+Реализовать header с навигацией.
+Реализовать блок Strategic agency.
+Реализовать слайдер (можно начать с одного изображения).
+Реализовать блок слайдера как абсолютно позиционированный элемент с right: 0 и bottom: 0 внутри черного контейнера.
+На больших экранах ограничить ширину черного контейнера до 1600px, чтобы слева оставалось стандартное серое фоновое пространство.
+Реализовать блок Who we are.
+Реализовать блок Our expertise с карточкой, переиспользуемой 3 раза.
+Реализовать блок Process с 4 карточками процесса.
+Использовать translateY(-50%) для смещения карточек вверх.
+Реализовать блок Testimonials.
+Каждая карточка должна иметь фиксированную ширину, а на маленьких экранах весь блок должен переключаться в колонку.
+Реализовать блок Vision, Passion, Results.
+Использовать https://github.com/mate-academy/layout_dia/blob/master/src/images/Shapes.png как фоновое изображение.
+Реализовать блок Send us a message.
+Реализовать блок Contact us.
+Реализовать footer.
+
+Чеклист для подготовки портфолио-проекта к HR review
+Не забудь добавить заголовок “Air” для всей веб-страницы.
+Лендинг должен быть реализован строго по дизайну из Figma.
+Добавить favicon.
+Стрелки внизу первого блока не должны медленно реагировать на нажатие (это возможно, если изображения слишком большие).
+Пользователь должен иметь возможность удобно написать 2–3 строки текста в поле сообщения.
+Опционально: после завершения всего можно реализовать слайдер на hero-экране (изображения можно взять с Unsplash).
+Github flow
+Сделать fork репозитория.
+Клонировать fork.
+(Ссылка проекта должна содержать твое имя, а не mate-academy)
+Выполнить npm install (или просто npm i).
+Выполнить npm start.
+Открыть еще одно окно терминала для следующих шагов.
+
+Выполнить:
+
+git checkout -b develop
+
+чтобы создать новую ветку и переключиться на нее.
+
+Писать код в папке src.
+
+Выполнить:
+
+npm run lint
+
+и исправить ошибки стиля кода.
+
+Выполнить:
+
+npm run deploy
+
+чтобы задеплоить решение в gh-pages.
+
+Сохранить изменения:
+git add . && git commit -m 'solution'
+Отправить код:
+git push origin develop
+Создать Pull Request (PR) из ветки develop в ветку master оригинального репозитория.
+Заменить <your_account> на свой GitHub username в DEMO LINK.
+Скопировать DEMO LINK в описание PR.
+
+
+
+
+Добавить favicon
+Все интерактивные элементы (ссылки, кнопки, изображения, иконки) должны иметь hover-эффект и cursor: pointer. Пользователь должен интуитивно понимать, что с ними можно взаимодействовать
+НЕОБЯЗАТЕЛЬНО: после завершения всего можно реализовать слайдер в первой секции
+Проверка HR
+Чтобы рекрутеру было понятно, что это за лендинг, лучше назвать всю веб-страницу “Air”
+Лендинг должен быть реализован строго по дизайну в Figma
+Ссылки в меню header и footer должны вести к соответствующим блокам лендинга
+Скорость анимаций должна быть одинаковой по всему лендингу (например, увеличение при hover или появление блоков при скролле)
+Placeholder’ы в формах должны подсказывать, что вводить, а если есть валидация формы — должно быть понятно, в каком формате вводить номер телефона
+Убедиться, что на мобильных устройствах всё выглядит аккуратно и нет горизонтального скролла
+Кнопка “Learn more” должна вести к ближайшему блоку (Our expertise)
+Кнопка “Hire Us” в header должна вести к контактной форме
+В секциях Vision, Passion, Results кнопка “Apply” также должна вести к контактной форме
+Все иконки социальных сетей в footer должны быть кликабельными и открывать соцсети в новой вкладке