Проект "Путешествие по России"

---

---

Оглавление

1. Описание
2. Как запустить проект
3. Функциональность
4. Технологии
5. Ссылка на GitHub Pages

---

Оглавление

1. Описание
2. Как запустить проект
3. Функциональность
4. Технологии, используемые в проекте а. адаптивность сайта; б. "резиновость" сайта; в. флекc-элементы; г. грид-элементы; д. подключение шрифтов; е. "отзывчивость" ссылок и интерактивных элементов; ж. файловая структура проекта по правилам Nested БЭМ;
5. Ссылка на GitHub Pages

---

1. Описание

Данный проект - это одностраничный сайт о путешествиях по России, содержащий ссылки на сторонние сайты, делающие путешествие по России комфортнее.

В проекте были применены новые изученные технологии такие, как:

• адаптивность сайта;
• "резиновость" сайта;
• флекc-элементы;
• грид-элементы;
• "отзывчивость" интерактивных элементов;
• файловая структура проекта по правилам Nested БЭМ;

---

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

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

Вариант 1. Запустить через gh-pages.

Перейдите по ссылке https://milenairon.github.io/russian-travel/

Вариант 2. Скачать и запустить кликом index.html

1. Скачайте из репозитория https://github.com/milenairon/russian-travel папку, нажав на кнопку Code → Download ZIP
2. Извлеките данные из папки.
3. Вариант 1. Откройте проект, нажав левой кнопкой мыши 2 раза на файл index.html.

Вариант 3. Скачать и запустить через Live Server

1. Скачайте из репозитория https://github.com/milenairon/russian-travel папку, нажав на кнопку Code → Download ZIP
2. Извлеките данные из папки.
3. Если у вас VS Code, то откройте папку при помощи этого приложения. Скачайте расширение для VS Code Live Server.
4. Откройте проект, нажав правой кнопкой мыши 1 раз на файл index.html в VS Code и выберите Open with Live Server.

---

3. Функциональность

Данный сайт обладает следующими критериями функциональности:

• дизайн;
• контент;
• структура;
• доступные функции;

Под функциями понимаются следующие возможности:

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

---

4. Технологии, используемые в проекте

а. Адаптивность сайта

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

CSS:
@media screen and (max-width=1024px) {
  header: {
    margin-top: 10px;
  }
}

@media screen and (max-width=768px) {
  header: {
    margin-top: 8px;
  }
}

@media screen and (max-width=320px) {
  header: {
    margin-top: 6px;
  }
}

б. "Резиновость" сайта

Данная технология позволяет сделать сайт для комфортного просмотра между брекпоинтами с помощью изменения размеров элементов при изменении разрешения экрана.

CSS:
  header: {
    max-width: 1024px;
    width: 100%;
  }

в. Флекс-элементы

Данная технология помогает изменять размеры элементов при изменении масштаба, позиционировать элементы по оси z и помогает сделать сайт более "резиновым"

г. Грид-элементы

Данная технология помогает изменять размеры элементов при изменении масштаба, облегчает расположение элементов по сетке в некоторых случаях и помогает сделать сайт более "резиновым"

д. Псевдоклассы

Даная технология реализована в проекте с целью создания:

• "отзывчивости"ссылок и интерактивных элементов с помощью псевдокласса ":hover";
• активного состояния ссылок с помощью псевдокласса ":active";
• изменения свойств для первого/n-ного/последнего элементов с помощью псевдоклассов ":first-child", ":nth-child", ":last-child".

е. Файловая структура проекта по правилам Nested БЭМ;

папка "блок"
    папка "__элемент"
        папка "_ключ модификатора"
            папка "_значение модификатора"
                файл  "блок__элемент_значение модификатора"
    файл "блок__элемент.css"
файл "блок.css"

5. Ссылка на GitHub Pages

https://milenairon.github.io/russian-travel/