Макет device html academy

Saved searches

Use saved searches to filter your results more quickly

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

Template Device (HTML Academy)

it-amalker/device

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Sign In Required

Please sign in to use Codespaces.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

Git stats

Files

Failed to load latest commit information.

readme.md

DEVICE template specification

1. Common technical requirements

• Markup standards: HTML5, CSS3, progressive improvement;
• Grid: defined in layout;
• Adaptive markup: none;
• Framework use: none;
• Cross browsing: IE11+, Chrome, Firefox, Opera, Safari;
• Typography: partially defined in layout (other — at the developer discretion);
• Font used: Gilroy, Open Sans;
• Use styleguide.psd, which contains drawing states of interface elements. If there is a difference, styleguide.psd has the highest priority.

2. Explanation for the students

• Layout has hidden layers with popups. Such layers in photoshop highlighted by blue color;
• Layout marked up gradually, no need to do all requirements immediately;
• In section «Mandatory requirements» below described blocks behavior, which needs to be implemented to receive admission. Requirements from the «Additional requirements» section could be done at will for performing additional criterions.

• Content block centered and can’t be less than layout width;
• Different blocks authorization for guests and users (see index.psd and catalog.psd layouts);
• In authorized user block — user name and user icon are links, which leads to user profile;
• Academy logo in footer leads on «Professional HTML & CSS, level 1»​ landing page of intensive.

• Blocks with section names («virtual reality», «selfie monopods», etc.) are links, which leads to catalog sections;
• Promo-slider: slider. Markup all of the sliders is mandatory. Slider animation is optional, animation concept described in the 4-th section;
• Services block («delivery», «warranty», «credit»): slider. Markup all of the sliders is mandatory. Slider animation is optional, animation concept described in the 4-th section;
• Map block: sufficient implementation — regular image, click leads on maps service;
• Markup of modal window is mandatory (see layer folder «write us»).

• Logo is a link on the main page;
• Filter section needs to markup up with form, button «Show» is responsible for the form sending;
• Block «Price»: cursor pointer appears, when you hover over any markers, make markers animations is optional, price must not change;
• When hovering over product card, the buttons «add to cart» and «add to compare» appears (see styleguide.psd). Product name is a link, which leads to separate page (no need to markup separate page);
• Product quantity in the right section can be any, at the same time page shouldn’t be broken;
• Any product might have a label «new».

4. Additional requirements

• Promo slider: slider animation. Slider changes happen instantly, without intermediate transitions (some of the layers are hidden — see layers highlighted by red color);
• Services block («delivery», «warranty», «credit»): slider animation. Tab slider works similarly to the promo slider block. After tab clicking slider changes instantly;
• Block with map: implementation at will — after clicking, a fullscreen interactive map popup appears (see layer folder «map hover»), popup window position must be relative to the viewport, not to the page.
• After clicking on the button «Write us», a modal window appears (see layer folder «write us»), modal window position is relative to the viewport, not to the page.

Источник

Saved searches

Use saved searches to filter your results more quickly

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

Базовый макет Html Academy

510vvp0ke/Device

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Sign In Required

Please sign in to use Codespaces.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

Git stats

Files

Failed to load latest commit information.

Readme.md

Не удаляйте и не обращайте внимание на файлы:
.editorconfig , .gitignore , Contributing.md , Readme.md .

1. Зарегистрируйтесь на Гитхабе

Если у вас ещё нет аккаунта на github.com, скорее зарегистрируйтесь.

Откройте мастер-репозиторий и нажмите кнопку «Fork» в правом верхнем углу. Репозиторий из Академии скопируется в ваш аккаунт.

3. Клонируйте репозиторий на свой компьютер

Будьте внимательны: нужно клонировать свой репозиторий (форк), а не репозиторий Академии. Нажмите кнопку с иконкой компьютера и стрелкой, чтобы клонировать репозиторий через программу GitHub Desktop:

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

Репозиторий создан для обучения на интенсивном онлайн‑курсе «Базовый HTML и CSS» от HTML Academy.

Источник

Saved searches

Use saved searches to filter your results more quickly

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

albertZubov/device

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Sign In Required

Please sign in to use Codespaces.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

Git stats

Files

Failed to load latest commit information.

Readme.md

Не удаляйте и не обращайте внимание на файлы:
.editorconfig , .gitattributes , .gitignore , Contributing.md , Readme.md .

1. Зарегистрируйтесь на Гитхабе

Если у вас ещё нет аккаунта на github.com, скорее зарегистрируйтесь.

Откройте мастер-репозиторий и нажмите кнопку «Fork» в правом верхнем углу. Репозиторий из Академии скопируется в ваш аккаунт.

3. Клонируйте репозиторий на свой компьютер

Будьте внимательны: нужно клонировать свой репозиторий (форк), а не репозиторий Академии. Нажмите кнопку «Clone or download», а затем «Open in Desktop», чтобы клонировать репозиторий через программу GitHub Desktop:

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

Репозиторий создан для обучения на интенсивном онлайн‑курсе «Профессиональный HTML и CSS, уровень 1» от HTML Academy.

Источник

Saved searches

Use saved searches to filter your results more quickly

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

Проект «Девайс» от HTML Academy. Интернет-магазин гаджетов.

andreysgra/device

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Sign In Required

Please sign in to use Codespaces.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

Git stats

Files

Failed to load latest commit information.

README.md

npm install — установка зависимостей.

npm start — сборка проекта в режиме разработки и запуск локального сервера.

npm run build — финальная сборка проекта.

npm run deploy — финальная сборка проекта и размещение его в GitHub Pages.

npm run dist — финальная сборка проекта и упаковка его в zip-архив.

npm test — запуск теста на наличие стилистических ошибок.

. ├── build/ # каталог сборки проекта (cоздаётся автоматически) ├── dist/ # каталог в котором архивируется собранный проект (cоздаётся автоматически) ├── gulpfile.js/ # каталог задач для Gulp ├── source/ # каталог для размещения исходных файлов проекта │ ├── fonts/ # каталог шрифтов │ ├── img/ # каталог растровых и векторных изображений │ │ └── icons/ # каталог векторных изображений для генерации векторного спрайта │ ├── js/ # каталог JS файлов │ ├── styles/ # каталог файлов стилей │ └── index.html # файл разметки страницы ├── .editorconfig # файл конфигурации настроек редактора ├── .eslintrc.json # файл конфигурации ESLint ├── .gitattributes # файл атрибутов Git ├── .gitignore # файл исключений Git ├── .npmrc # файл конфигурации npm ├── .stylelintrc.json # файл конфигурации stylelint ├── .travis.yml # файл конфигурации Travis CI ├── package.json # файл npm зависимостей и настроек проекта ├── package-lock.json # lock-файл npm ├── README.md # документация проекта ├── Specification.md # техническое задание └── webpack.config.js # файл конфигурации Webpack

About

Проект «Девайс» от HTML Academy. Интернет-магазин гаджетов.

Источник

Saved searches

Use saved searches to filter your results more quickly

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

Проект для самостоятельной работы / модуль 1

petrmileshko/Device

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Sign In Required

Please sign in to use Codespaces.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

Git stats

Files

Failed to load latest commit information.

Readme.md

Личный проект «Device» верстка с макета

Исправлено. Проект завершен.

• Изменил цвет текста на странице каталога (пагинация и подпись ползунка ценового) для улучшения читаемости (contrast ratio в макете 1.64, когда минимальная должна быть не меньше 4)

Репозиторий создан для обучения на профессиональном онлайн‑курсе «HTML и CSS. Профессиональная вёрстка сайтов» от HTML Academy.

About

Проект для самостоятельной работы / модуль 1

Источник