Верстка JS табов по макету PSD

  1. Биржа фриланса
  2. HTML-верстка
Закрыт3 заявки152 просмотра
Найдите исполнителя для вашего проекта прямо сейчас!
Разместите заказ на фриланс-бирже и предложения поступят уже через несколько минут.

Здравствуйте! 

Нужно сверстать табы на платформе 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

CSSJavaScript
8 лет назад
Sky1087
Андрей 
40 лет
8 лет в сервисе
Был
8 лет назад

Заявки фрилансеров

Нет заявок фрилансеров