https://github.com/notacat1/russian-travel
Traveling to Russia is a journey into the unknown. Along the way, travelers encounter significant challenges that they must overcome. However, at the same time, traveling in Russia offers many enjoyable moments for the adventurer. This article describes a trip from Pskov to Ulan-Ude in Russia.
https://github.com/notacat1/russian-travel
adaptive bem-methodology css html static yandex-praktikum
Last synced: over 1 year ago
JSON representation
Traveling to Russia is a journey into the unknown. Along the way, travelers encounter significant challenges that they must overcome. However, at the same time, traveling in Russia offers many enjoyable moments for the adventurer. This article describes a trip from Pskov to Ulan-Ude in Russia.
- Host: GitHub
- URL: https://github.com/notacat1/russian-travel
- Owner: NotACat1
- Created: 2023-05-16T09:50:13.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2023-09-18T07:17:04.000Z (over 2 years ago)
- Last Synced: 2025-01-11T10:17:12.528Z (over 1 year ago)
- Topics: adaptive, bem-methodology, css, html, static, yandex-praktikum
- Language: CSS
- Homepage: https://notacat1.github.io/russian-travel/
- Size: 13.6 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Путешествие по России
____
## Описание проекта:
[Путешествие в Россию](https://notacat1.github.io/russian-travel/) - это путешествие в неизвестное. На пути у путешественника возникают большие трудности, которые он должен преодолеть. Но в то же время путешествия в России предоставляет путешественнику много приятных моментов. В данной статье описывается поездка в Россию из Пскова в Улан-Удэ.
____
## Реализованный функционал:
### 1. Favicon
**Favicon** — это иконка, которая отображается во вкладке браузера перед названием сайта.
```html
```
### 2. Open Graph
**Open Graph** — это словарь семантической разметки данных. Он позволяет контролировать превью, которое формируется при публикации ссылки на сайт в социальных сетях, и передавать информацию другим интернет-сервисам.
```html
```
### 3. Подключение шрифтов
Одним из способов коммуникации с пользователем является **типографика**. Хороший шрифт на сайте создает настроение, акцентирует внимание человека на важных элементах, его легко читать и он также является отдельным элементом дизайна.
```css
/* Подключение семейство шрифтов Inter */
/* Inter Thin BETA */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 100;
src: url(./Inter-ThinBETA.woff2) format('woff2'),
url(./Inter-ThinBETA.woff) format('woff'),
url(./Inter-ThinBETA.eot) format('eot'),
url(./Inter-ThinBETA.truetype) format('truetype');
}
/* Inter Thin Italic BETA */
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 100;
src: url(./Inter-ThinItalicBETA.woff2) format('woff2'),
url(./Inter-ThinItalicBETA.woff) format('woff'),
url(./Inter-ThinItalicBETA.eot) format('eot'),
url(./Inter-ThinItalicBETA.truetype) format('truetype');
}
/* Inter Extra Light BETA */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 200;
src: url(./Inter-ExtraLightBETA.woff2) format('woff2'),
url(./Inter-ExtraLightBETA.woff) format('woff'),
url(./Inter-ExtraLightBETA.eot) format('eot'),
url(./Inter-ExtraLightBETA.truetype) format('truetype');
}
```
### 4. Адапивная верстка
**Адаптивная верстка** — это такой способ создания веб-страниц, при котором они автоматически подстраиваются под размеры и ориентацию экрана устройства, а их дизайн варьируется в зависимости от действий пользователя.
**Цель адаптивной верстки** — добиться того, чтобы сайт оставался удобным и обеспечивал конверсию при загрузке на разных устройствах.
### 5. Grid
**Grid (сетка)** — это вид разметки, в котором элементы на сайте расположены в виде таблицы. Главная фишка этой таблицы в гибкости — можно объединять отдельные ячейки, менять размеры строк и столбцов, регулировать отступы между ними. А ещё гриды хорошо приспосабливаются к разным размерам экрана, что делает их адаптивными.
### 6. Методология БЭМ
**БЭМ (Блок, Элемент, Модификатор)** — компонентный подход к веб-разработке. В его основе лежит принцип разделения интерфейса на независимые блоки. Он позволяет легко и быстро разрабатывать интерфейсы любой сложности и повторно использовать существующий код, избегая «Copy-Paste».
```html
Путешествия по России
Настоящая страна не в выпусках новостей, а здесь.
ваша полка — верхняя
```
### 7. Файловая структура Nested
Классическая схема организации файловой структуры БЭМ-проектов:
* Блоку соответствует одна директория.
* Код модификаторов и элементов находится в отдельных файлах.
* Файлы модификаторов и элементов хранятся в отдельных директориях.
* Директория блока является корневой для поддиректорий его элементов и модификаторов.
* Имена директорий элементов начинаются с двойного подчеркивания (__).
* Имена директорий модификаторов начинаются с одинарного подчеркивания (_).
____
## Используемые технологии:
### 1. Normalize.css
Normalize.css позволяет браузерам отображать все элементы более последовательно и в соответствии с современными стандартами. Он точно нацелен только на те стили, которые нуждаются в нормализации.