Программирование

1. На всей странице поменяйте шрифт на Roboto. Для этого вставьте в head страницы следующий код:
2.     https://fonts.googleapis.com">
3.    
4.    
5.     Код подключает к странице внешний шрифт с сервиса Google Fonts. Чтобы он появился во всех элементах, пропишите в стилях страницы:
6.    * {
7.         font-family: 'Roboto', sans-serif;
8.       }
9.     Стиль применит шрифт Roboto ко всем HTML-элементам.
10. Приведите ссылки меню в хедере и футере страницы к стилю, который похож на стиль в макете. Сделайте чёрный шрифт без подчёркивания. Подчёркивание должно появляться при наведении курсора на ссылки.
11. Выполнить задачу поможет видео урок «Форматирование текста» этого модуля. В нём разбирается аналогичный пример.
12. В хедере добавьте между ссылками отступы с помощью CSS-свойства margin-right. В футере — расположите их друг под другом и поместите в отдельный div-элемент. Задайте ему свойства технологии flexbox.
13. Увеличьте высоту первого блока так, чтобы фоновое изображение справа увеличилось, а его размер примерно соответствовал значениям в макете.
14. Сделайте так, чтобы внешние отступы у заголовка, подзаголовка и кнопки в первом блоке соответствовали значениям в макете. Для этого используйте CSS-свойство margin.
15. Увеличьте шрифт заголовков h1 и h2 так, чтобы он примерно соответствовал размеру шрифтов на макете.
16. Сверстайте блок с примерами работ по аналогии с блоком услуг:

• создайте три элемента и задайте им размеры;
• разместите их рядом друг с другом, используя flexbox;
• в элементах разместите изображения.

1. Приведите в соответствие с макетом синий блок:

• добавьте мелкий текст под заголовком в теге p;
• установите ширину h2 и p 50%.

1. Приведите в соответствие с макетом футер страницы. Для этого рядом с блоком меню создайте ещё два: контакты и ссылки на социальные сети.
2. Разместите блоки и элементы в них так, как указано в макете. Используйте внешние отступы СSS-свойство margin и технологию flexbox.
3. Во всплывающем окне создайте поля «Имя», Email и кнопку «Отправить». Подписи к полям создавать не нужно. В поля впишите их названия при помощи атрибута placeholder. Пример:
5. Сделайте так, чтобы всплывающее окно закрывалось при нажатии на внешнюю область или на кнопку «Отправить». Для этого в код JavaScript впишите следующее:
6.     container.addEventListener('click', function(event){
7.     if(event.target == container) {
8.     container.style.display = 'none';
9.     }
10.     });
11.     В итоге код скрипта должен получиться таким:
12.     document.addEventListener("DOMContentLoaded", function(){
13.         var container = 
14.     document.querySelector('.popup-container');
15.         var popupButtons = 
16.     document.querySelectorAll('.open-popup');
17.         for (let i = 0; i < popupButtons.length; i++) {
18.             popupButtons[i].addEventListener('click', function(){
19.                 container.style.display = 'flex';
20.         });
21.     }
22. 
    
23. 
    
24.     container.addEventListener('click', function(event){
25.         if(event.target == container) {
26.             container.style.display = 'none';
27.             }
28.         });
29.     });
30. Проверьте код страницы в валидаторе HTML-документов и исправьте ошибки, следуя его указаниям и пояснениям.

Материалы для выполнения этого задания находятся в папке.