Проект: фоны и градиенты (вместе с Apple)

В этом проекте вы клонируете сайт одной из самых передовых в области дизайна компаний в мире. Это не очень сложный сайт, но на нем хорошо используются фоновые фотографии, а навигационная панель наверху содержит градиент, который вы должны уметь сымитировать.

Шаги к победе

  1. Перейдите на apple.com и осмотритесь.
  2. Следуя инструкциям в проекте домашняя страница Google, создайте Github репозиторий для этого проекта (разумеется, необходимо поменять название).
  3. Подумайте обо всех элементах на странице и о том, как они сгруппированы.
  4. Сделайте разметку базовой структуры страницы с использованием пустых <div> элементов подходящего размера, которые нужно задать подходящее позиционирование. Возможно, вы захотите задать им различные фоновые цвета, чтобы было лучше их видеть. Не забывайте использовать иструменты разработчика (Developer Tools) вашего браузера (кликните правой кнопкой мыши на странице и выберите «Inspect Element (Просмотр кода элемента)».
  5. Настройте верхнюю навигационную панель. Как можно получить такой же градиент?
  6. Задайте основное фоновое изображение. Вы можете сохранить это изображение с веб-страницы, найдя тэг <section id="hero"> в вашем инспекторе и выяснив его фоновое изображение.
  7. Заполните и разместите остальные разделы. Не беспокойтесь о заключении всех текстовых параграфов в тэги <p>.
  8. Отправьте ваше решение на Github.

Решения других студентов

Поделиться уроком: