Загрузить fylo dark theme landing page - fylo dark theme landing page Загрузка исходного кода

fylo dark theme landing page

Сторонние компоненты

1.0.0

Скачать

fylo dark theme landing page - Frontend Mentor

Всем привет! Спасибо, что ознакомились с этим проектом!

Это решение задачи Frontend Mentor , заключающееся в создании целевой страницы , максимально приближенной к заданному дизайну. Цель — улучшить свои навыки веб-верстки, создав реалистичный проект.

1. Оглавление ✒️

fylo dark theme landing page — Frontend Mentor
- 1. Оглавление ✒️
- 2. Обзор
  - Задача
  - Как запустить проект:
  - Ссылки
- 3. Мой процесс?
  - Построен с
  - Что я узнал
  - Полезные ресурсы
- 4. Автор??

2. Обзор

Задача

Пользователи должны иметь возможность:

Просмотр оптимального макета сайта в зависимости от размера экрана устройства.
Просматривайте состояния наведения для всех интерактивных элементов на странице.

Предварительный просмотр дизайна для <span class= Задача целевой страницы темной темы Fylo" style="max-width: 100%;">

Подробности конкурса можно просмотреть на странице Frontend Mentor.

Как запустить проект:

Для работы над этим проектом, созданным с использованием Node и Gulp, я решил использовать Adalab Starter Kit. Поэтому, прежде всего, для его запуска необходимо установить Node JS .

Откройте терминал в корневой папке репо.
Установите локальные зависимости, используя следующую команду в терминале:

npm install

Запустите проект, используя следующую команду, которая откроет окно браузера, в котором отображается активная версия страницы.

npm start

Ссылки

URL-адрес действующего сайта: https://leireomadina.github.io/fylo-dark-theme-landing-page/
URL решения: скоро появится

3. Мой процесс?

Построен с

Семантическая разметка HTML5
Система HTML-шаблонов
Пользовательские свойства CSS3
Флексбокс
CSS-сетка
SASS с методологией БЭМ
Глоток
Адаптивный дизайн и рабочий процесс, ориентированный на мобильные устройства

Что я узнал

Используйте @for для создания циклов в SCSS : в данном случае я хотел выбрать только вторую и третью карточку раздела отзывов.

 .card {
  @for $i from 2 through 3 {
    & -#{$i} {
      margin-top : 1.8 rem ;
      @media all and ( min-width : 768 px ) {
        margin-top : 0 ;
      }
    }
  }
}

Используйте файлы svg и управляйте ими: используйте атрибут viewBox, чтобы изменить его положение и размер, добавьте тег заголовка и описания для улучшения доступности, встроенные стили и стили CSS, настройте цвета с помощью заливки или обводки...
Используйте роли ARIA для улучшения веб-доступности : например, взгляните на эти роли меню навигации.

 < nav class =" header-menu " role =" navigation " >
  < ul class =" header-menu__list " role =" list " >
    < li class =" header-menu__list-item " role =" list-item " >
      < a class =" header-menu__link " href =" # " role =" link " >
        Features
      < a >
    </ li >
    ...
  </ ul >
</ nav >

Полезные ресурсы

Как использовать @for для создания цикла Sass: https://www.youtube.com/watch?v=6CbsNFXMYgs. Вы также можете просмотреть официальную документацию SASS.
Список ролей, состояний и свойств ARIA (MDN): https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles
Встроенный стиль SVG: https://www.youtube.com/watch?v=af4ZQJ14yu8&t=844s.
Скоро появятся дополнительные ресурсы.