Как подключить стили и meta, если в задании написано, что код не должен содержать html,header и body?

Question

[pmozil]

Пробное задание от работодателя. Получил в пятницу вечером, отдавать до конца воскресенья, спросить у него не могу.

Краткое описание задания - сверстать адаптив по макету. Но это не сайт, а что-то вроде карточки продукта с акциями. То есть просто div который вставят на сайт в какой-то div.wrap. Нужно подключить шрифты, стили и meta viewport.

Я понимаю, что задание от работодателя всегда с подвохом. Но как, по Вашему мнению, я должен отдать задание, поскольку, если подключить напрямую в свой div, то работать будет, но код будет невалидным.

Comments

[Sergio]

А если засунуть это всё в iframe?

[AUser0]

В "Сказе про Федота-стрельца" есть аналог этого великолепного задания:
Исхитрись ка мне добыть
То, чего не может быть!
Запиши себе название,
Что бы в спешке не забыть...

[HardBot]

а header тут причем? Ответишь на мой вопрос? хаха

[ksnk]

Делаешь отдельно, на php, например, шаблон того, во что будет вставляться твой "адаптив по макету". Наверное, заказчик таки скинул что-то со словами "вот сюда, примерно..." . Вот это и берешь за основу шаблона, ну или сам мастеришь, проявля ум и сообразительность. Например можно притырить главную магазина заказчика. В шаблоне будут и хидер и боди и прочие футеры с метами...
Отдельным файлом - то, что нужно - тот самый "адаптив...", который вставляется в шаблон обычным incude (для этого и нужен php)
Отдаешь оба файла, но говоришь, что решение в этом, а вот это нужно для демонстрации...

[archelon]

Предоставляете все файлы (отдельно html, css, js) и ссылку на работающее демо (у себя на хостинге или на кодпене).

Answer 1

[Владимир Коротенко]

Где то так.

<style>
  .card {
    border: solid gray 1px;
    border-radius: 5px;
    width: 120px;
    float: left;
  }
</style>
<div class='card'>
  <img src='' style="width: 20px; height: 20px" />
  <div>sample</div>
</div>
<script>
  var desc = document.createElement('meta');
  desc.httpEquiv = "description";
  desc.content = "Example add meta";
  document.head.appendChild(desc);
  
</script>

Comments

[Владимир Коротенко]

Знаю что style должен быть в голове, но это работает и обычно так и делают

[Stalker_RED]

Владимир Коротенко, возможно на целевой странице уже есть тег description, и неплохо бы уточнить надо ли его перезаписать или дополнить.
И еще непонятно подхватят ли поисковики такой дескрипшн, который меняется скриптом, или будет только оригинальный использован.

[Владимир Коротенко]

Stalker_RED, это пример, я его привел как то что сможет действовать.
Ну и да карточка которая меняет мету ну это страаанно.
Но да это возможно технически

Answer 2

[Сергей delphinpro]

Нет здесь никакого подвоха. Вас попросили просто сверстать отдельный блок для сайта. Это совершенно не означает, что вам запретили использовать внешние файлы.
Делаете обычную пустую страницу с единственным блоком. Стили подключаете как обычно, шрифты тоже.
Когда этот блок будут интегрировать в сайт, то просто так же подключат ваш файл стилей.
Главное то, чтобы ваши стили никак не повлияли на остальной сайт.