Html-верстка рич-контента для ozon

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

Пример рич-контента: https://www.youtube.com/watch?v=euvFUxgdhSM&feature=emb_title

Требования к rich-content:

Если рич-аннотация представляет из себя несколько картинок - в seo будет отрицательный эффект. А вот текстовые описания с картинками могут влиять положительно, если это в пределах разумного по объему, не "стырено" с другого конкурента

Требования к html

Не использовать iframe

• <p>

<br>

<img class = “ra-float-left | ra-float-right” />

<strong>

<blockquote>

<h1><h2><h3>

<ul><ol><li>

<table>

• сетка - 4 колонки максимально

<div class="ra-row">

<div class="ra-column">

<div class="ra-column">

<div class="ra-column">

<div class="ra-column">

</div>

• color classes = ra-oz-primary = #005bff, ra-oz-secondary = #808d9a ra-oz-additional = #ff8970, ra-oz-additional2 = #f91155, ra-oz-additional3 = #3ac267

• Для видео <div class=“ra-video”>

• Никаких script и атрибутов style

• Ширина embedded компонентов(video/img) только в относительных единицах (%…)

• justify-start, justify-center, justify-end - выравнивание по центру, середине и концу

• обязательно указывать кодировку, например <meta charset="utf-8">

• Для мобильной темы:

- добавлять в img ширину в относительных единицах (%)

- Оптимальное соотношение сторон картинок по высоте 2:1 (горизонтальный формат). Все, что меньше по высоте — ок

Требования к таблицам

Не более двух таблиц

Максимальное количество столбцов - 8

Максимальное количество строк - 30

Фото и видео

Минимальное количество фото - 5

Разрешения фото с учетом ретины

Требования к шрифтам

Ничего, кроме озоновских GTEestiProText, Arial, sans-serif

@font-face {

font-family: 'GTEestiProDisplay';

font-weight: 400;

src: url('//cdn1.ozone.ru/graphics/test/fonts/GT-Eesti-Pro-Display-Regular.woff2') format('woff2'),

url('//cdn1.ozone.ru/graphics/test/fonts/GT-Eesti-Pro-Display-Regular.woff') format('woff');

}

@font-face {

font-family: 'GTEestiProDisplay';

font-weight: 700;

src: url('//cdn1.ozone.ru/graphics/test/fonts/GT-Eesti-Pro-Display-Bold.woff2') format('woff2'),

url('//cdn1.ozone.ru/graphics/test/fonts/GT-Eesti-Pro-Display-Bold.woff') format('woff');

}

@font-face {

font-family: 'GTEestiProText';

font-weight: 300;

src: url('//cdn1.ozone.ru/graphics/test/fonts/GT-Eesti-Pro-Text-Book.woff2') format('woff2'),

url('//cdn1.ozone.ru/graphics/test/fonts/GT-Eesti-Pro-Text-Book.woff') format('woff');

}

@font-face {

font-family: 'GTEestiProText';

font-weight: 400;

src: url('//cdn1.ozone.ru/graphics/test/fonts/GT-Eesti-Pro-Text-Book.woff2') format('woff2'),

url('//cdn1.ozone.ru/graphics/test/fonts/GT-Eesti-Pro-Text-Book.woff') format('woff');

}

@font-face {

font-family: 'GTEestiProText';

font-weight: 700;

src: url('//cdn1.ozone.ru/graphics/test/fonts/GT-Eesti-Pro-Text-Bold.woff2') format('woff2'),

url('//cdn1.ozone.ru/graphics/test/fonts/GT-Eesti-Pro-Text-Bold.woff') format('woff');

}

Ссылки

Любые ссылки, ведущие на сторонние сайты недопустимы (в том числе открывающие дополнительные окна)

Содержание

Только информационное содержание (ТТХ, описание использования, фотографии использования товара). Никакой саморекламы.