Переверстка сайта

Для сайта m350.ru требуется произвести переверстку для удобства отображения сайта на мобильных устройствах (требуется отсутствие горизонтальной прокрутки при ширине экрана 240 пикселей). Для этого нужно:

• переверстать главную страницу и 1 любую внутреннюю страницу (пример простой страницы - http://m350.ru/dostavka/) таким образом, чтобы:
  • при ширине более 1578 пикселей отображение было такое же, как сейчас,
  • при ширине экрана от 818 до 1578 пикселей контент отображался в 2 столбца из 4 текущих,
  • при ширине экрана менее 818 пикселей контент отображался в 1 столбец из 4 текущих
  Правила отображения приведены ниже.
• на главной странице порядок отображения элементов при ширине менее 1578 пикселей  должен быть следующий (сначала описывается порядок при экране от 818 до 1578, затем в скобках - что уходит на следующую строку при ширине менее 818 пикселей, также отдельно прокомментированы элементы, которые при ширине менее 1578 пикселей не отображать не нужно):
  • верхняя строка - логотип, кнопка вызова меню и (под ним) блок с телефоном и ссылкой на форму. Чтобы логотип

    и кнопка меню умещались на одной строке, логотип нужно уменьшить.

    Дизайн кнопки меню - несколько горизонтальных черточек(стандартный вид для мобильных

    версий),

  • далее - строка перехода на районную страницу. В текущем дизайне кнопка "ОК" не помещается в один

  столбец с элементом ниспадающего списка, поэтому требуется уменьшить размеры шрифта

  в списке и самого элемента списка,

  • баннеры калькуляторов и виджет индекса цен на бетон - при ширине менее 1578 пикселей не отображать,
  • полоса "наши клиенты/объекты",
  • блок "как купить бетон в москве..." - элементы блока отображаются либо 2 под 2, либо в столбец из 4 строк,
  • блоки "знаете ли вы, что", 2 баннера под ними, "фоторепортажи" и "принципы власти" - при ширине менее 1578 пикселей не отображать,
  • блок "новости, обновления на сайте" при ширине экрана от 818 до 1578

  пикселей отображать как сейчас, при ширине экрана менее 818 пикселей -

  на 100% ширины страницы (согласно текущей верстке, блок текста должен

  обтекать картинку новости),

• на внутренней странице порядок отображения элементов при ширине менее 1578 пикселей  должен быть следующий (сначала описывается порядок при экране от 818 до 1578, затем в скобках

  - что уходит на следующую строку при ширине менее 818 пикселей, также отдельно прокомментированы элементы, которые при ширине менее 1578 пикселей не отображать не нужно):

  • аналогично главной - сначала логотип, кнопка вызова меню и (под ним) блок с телефоном и ссылкой на форму. Чтобы логотип и кнопка меню умещались на одной строке, логотип нужно уменьшить.

    Дизайн кнопки меню - несколько горизонтальных черточек(стандартный вид для мобильных

    версий),

  • аналогично главной - строка перехода на районную страницу. В текущем дизайне кнопка "ОК" не помещается в один столбец с элементом ниспадающего списка, поэтому требуется уменьшить размеры шрифта

  в списке и самого элемента списка,

  • все элементы левого столбца при ширине менее 1578 пикселей не отображать не нужно,
  • далее - основной контент страницы,
  • блоки ссылок на районы Москвы и области при ширине менее 1578 пикселей не отображать не нужно,
  • последним блоком на странице должен отображаться подвал (ссылки, счетчики, логотип).

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

• меню, раскрывающееся по нажатию на кнопку на экранах шириной менее 818 пикселей, должно быть многоуровневым: по клику на иконку меню всё содержимое сайта ниже неё должно смещаться вниз, на этом месте должны появиться пункты верхнего уровня (Компания, Отрасль, Онлайн-сервисы, Карта сайта). Слева от названия пунктов меню, имеющих вложения, должны располагаться треугольники (стандартный элемент раскрывающегося элемента меню). При заходе в меню у пунктов верхнего уровня левая сторона треугольников должна быть вертикальной, две другие - направлены к названия пунктов меню, в правую от нее сторону. После нажатия на треугольник он должен повернуться на 90 градусов по часовой стрелке, после чего одна из сторон должна стать горизонтальной, а две других - быть направлены вниз. Если вложенные пункты меню тоже имеют свои вложения, они должны отображаться по этим же правилам.