Верстка JS табов по макету PSD
Нужно сверстать табы на платформе lpgenerator.ru по макету PSD (yadi.sk/d/1hFOrVV43FX3EE) на страницу народныйсептик.рф/коловеси
Можно сделать это с нуля или доработать старый скрипт, как будет удобнее Вам.
Старые табы можно посмотреть по адресу: народныйсептик.рф/коловеси
Теперь пояснения по макету (картинка во вложении):
1. Основные переключатели (А) меняют всю основную информацию таба (B)
2. Переключатели (D):
Вкладка "Характеристики" отображается по умолчанию и показывает таблицу с характеристиками продукта.
Вкладка "Описание" заменяет таблицу на три абзаца текста такого же объема(как таблица)
В идеале конечно, чтобы при переключении вкладок (D) надпись на кнопке лид формы тоже менялась
3. Малые переключатели (С) изменяют изображение выше (Е), а также приводят элементы 'D' и 'H' в положение по умолчанию.
К примеру, мы кликаем на мини картинку (C) изделия с низким корпусом – соответственно, в блоке 'E' появляется увеличенное изображение данного изделия с подписью, переключатель 'D' становится в положение "Характеристики" и в блоке 'H' отображается информация и цены этого изделия. Если в этом положении переключиться на вкладку "Описание", то информация также будет соответствовать данному изделию.
Таблицу в блоке 'H' нужно будет сверстать следующую, использовав шрифт Roboto:
CSS:
table {
font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
font-size: 16px;
background: white;
max-width: 90%;
width: 90%;
border-collapse: collapse;
text-align: left;
}
th {
font-weight: normal;
color: #2e2e2e;
padding: 5px 7px;
}
td {
color: #669;
border-top: 1px solid #e8edff;
padding: 5px 7px;
}
tr:hover td{
background: #e8edff;
}
Если возникнут какие-то вопросы по заданию или макету, задавайте. Если для удобства верстки в макете лучше что-то переделать, тоже говорите. Если нужны какие-то дополнительные материалы, предоставим.
Ссылка на макет PSD – yadi.sk/d/1hFOrVV43FX3EE
вот ссылка на исходники yadi.sk/d/2Y3Et1bo3FfCHe
Укажите цену и сроки оплата поэтапно либо в конце проекта