Це приклад за вашим ТЗ: розмір 300×250, простий і лаконічний дизайн, два банери відрізняються текстом і продуктом, відповідність специфікації Google Ad Manager. Лого й фото продукту в прикладі умовні, у фінальних банерах будуть ваші файли.
| Вимога | Як виконано | |
|---|---|---|
| Розмір | 300×250 px, у мета-тегу ad.size | так |
| Вага | кожен ZIP значно менший за 150 КБ (близько 2 КБ без картинок) | так |
| Тривалість анімації | цикл 9 с × 3 повтори = 27 с (ліміт до 30 с) | так |
| Кількість циклів | рівно 3 (animation-iteration-count: 3) | так |
| Посилання | змінна clickTag, клік по всьому банеру | так |
| Зовнішні запити | немає: вся графіка й стилі всередині index.html | так |
Також у комплекті буде PNG-запасний кадр для майданчиків без підтримки HTML5.
Всі тексти й кольори зібрані в одному місці файлу, тож наступні варіанти можна зробити без верстальника:
:root{--bg1:#1b2a49; --bg2:#0d1424; --ac:#ffc933} /* кольори */
<div id="h1">Звук, який<br>чути скрізь</div> /* заголовок */
<div id="cta">Дізнатися більше</div> /* кнопка */
var clickTag = "https://www.example.com/"; /* посилання */