Skip to content

Pet project. Одностраничный лендинг для мебельного магазина, адаптированный под разные экраны

License

Notifications You must be signed in to change notification settings

MgKraynova/online-store

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

35 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Online-store

Описание проекта

Просмотреть проект можно на GitHub Pages по ссылке: https://mgkraynova.github.io/online-store/

Проект Online-store подготовлен для отработки навыков верстки статичных интернет страниц.

Страница проекта сверстана по концепции Pixel perfect и адаптирована под разрешение экранов разного размера.

На кнопки, ссылки и карточки из раздела Categories добавлена анимация плавного увеличения элементов.

Макет проекта был предоставлен наставником Яндекс.Практикума Максимом Чеченевым.

Окончание проекта - ноябрь 2021 года.

Использованные технологии

Страница проекта стилизована с помощью CSS:

  • Для верстки Pixel perfect на разрешениях 1152px и больше некоторые элементы были спозиционированы абсолютно. На меньших разрешениях экрана использовались иные способы позиционирования.
  • Для расположения элементов на странице использовались свойства display со значением flex и grid.
  • Для стилизации элементов использовались псевдоклассы.
  • На кнопки, ссылки и карточки из раздела Categories добавлены свойства transition и transform для создания анимации.
  • Страница адаптирована под экраны с разным разрешением с помощью адаптивной верстки и медиазапросов.

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

При разработке и организации файлов использовалась БЭМ методология.

Pixel Perfect

Скриншот сравнения проекта и макета c помощью специального расширения для браузера Chrome. Нажмите, чтобы развернуть

Планы по доработке проекта

В будущем в проект планируется добавить:

  • попапы, предупреждающие, что сайт находится в разработке, если пользователь нажмет на ссылку на несуществующую страницу;
  • кнопку возврата на начало страницы;
  • попап с формой для ссылки Contact us.

About

Pet project. Одностраничный лендинг для мебельного магазина, адаптированный под разные экраны

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published