Recommended Posts

splat.jpg

Техническое задание.
 
Базовые требования
Платформы: Windows, Mac OS X.
 
Браузеры

  • IE8 и выше
  • Chrome последние 2 версии
  • Firefox последнии 2 версии
  • Opera последнии 2 версии (на базе движка Blink)
  • Safari последнии 2 версии

В качестве эталонного браузера использовать Chrome или Firefox.
Это значит что в одном из них вёрстка должна как можно точнее соотвествовать макету, в остальных не должно быть визуальных отличий.
 
Соответствие макету
Вёрстка должна 1:1 соответстввовать дизайну, но допускаются незначительные различия. Данные различия, как правило, возникают из-за шрифтов или при использовании технологии адаптивной разметки. В помощь прийдет инструмет PixelPerfect -- расширение для браузера.
 
Отдельно отмечу что верстка должна быть написана в лучших традисиях graceful degradation. Т.е. всё современные фишки оформления должны быть выполнены средствами CSS. Браузеры которые не поддерживают CSS3 или некторые его свойства должны корректно рендерить страницу без них.
 
Стандарты
HTML5/CSS3. HTML - должен проходить валидацию. CSS - не обязательно.
 
В кажестве исходного кода для CSS использовать препроцессор LESS или SASS.
Не обязательно, но крайне желательно использовать Grunt для генерирования LESS/SASS в CSS с применением технологии сжатия.
 
Сброс стилей
В качестве сброса стилей браузера использовать Normalize.css.
 
Javascript:
За основу взять фреймворк jQuery версии 1.11.х или 2.x.x.
Для поддержки HTML5 тегов в IE можно использовать код:
 

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]><script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script><![endif]-->

 
Допускается применение modernizr если потребуется.
 
Ширина сайта
Стандартная ширина сайта - 960px.
 
Grid
За основу взять любой распрастранненый инструмет для построения макета, например 960.gs или Bootstrap Grid System (требуются знания фреймворка)
 
Изменение/наполнение контентом
Блоки могут и будут содержать иной контент, отличный от того что в макете. Контент может занимать как больше так и меньше пространства. При вёрстке следует это учесть что бы в будущем макет не "поехал".
 
Особености макета
1. Шапка
1.1. Меню - Все как видно так и делать. Пунктов меню может быть больше -- это один список который выводится в 2 столбца. Текст пункта меню может быть длинее и распологатся в 2 строки. Обратить внимание на высоту строки в этом блоке, так как пункт в 2 строки будет выглядеть плотнее.
1.2. Учесть, что под ссылкой "Мы на Facebook" появятся в будущем еще несоклько аналогичных ссылок.
1.3. Возможно добавится пару языков.
1.4. Поле поиска
1.4.1. В поле поиска добавить placeholder с текстом "Искать...".
1.4.2. Поле поиска изначально должно быть на 1/3 меньше шириной. Поле прилегает к правому краю.
1.4.3. При клике на поле, средствами CSS оно должно растянутся на ширину, указанную на макете.
 
2. Слайдер в 4 колонки.
Слайдер состоит из 4х колонок в слайде. Прокрутка осуществляется при помощи ползунка под ним.
Требуется поддержка для touch-устройств для прокрутки контента.
 
3. Промо-слайдер
3.1. Табы слайдера -- первый и последний "затухают"с градиентом. Активный - крассный. На макете первый затухающий пункт меню содержит ошибку: градиент должен быть от светло-серого в прочрасный, слева на право (для последнего наоборот)
3.2. Кол-во слайдов может быть больше или меньше, чем на макете.
3.3. С прокруткой каждого слайда так же должны прокручиватся Табы (анимация при этом не обязательна).
3.4. В случае, если размер экрана меньше чем ширина макета, стрелка Предыдущий/Следующий слайд должны быть внутри области слайдера.
3.5. Кнопку управления слайдера должны поддерживать состояние "disabled". В случае если прокрутка далее/назад невозможна, стрелка должна быть не-активной. Визуально достаточно будет применить прозрачность 50% к кнопке.
3.6. Слайдер не влияет на 4 колонки под ним.

4. Контент
4.1. Меню слева. Пукты меню могут быть в несколько строк длиной.
4.2. Центральная колонка
4.2.1. Тут ничего особенного, фотография и статья, набранная контент-менеджером.

5. Футер
5.1. 3 колонки разибы по ширине области. Слева меню может наполнятся. Справа какой-то текст. По-центру виджет от Facebook.
5.2. Оступ снижу дл футера сделать высотой 20px.

Дополнительно
Кнопка "Отправить письмо", справа от макет -- закреплена всегда на одно расстоянии от верха.

WYSIWYG
Хочу обратить внимание на то что контент будет набиратся контент-менеджером, который не имеет соотвествующих знаний и навыков в работе с разметкой, а использует только окно редактора и инструменты которые он содержит. Соотвественно весь контент который визуально отвечает таким критериям (статьи, информационные блоки), должен "уметь" корректно выводить результат набранный контент-менеджером в редакторе. В качестве примера такого редактора можно взять TinyMCE
 
Масштабирование страниц
Поддержка не обязательна. Пользователь сам на себя берет отвественность за результат отображения страницы применяя к ней любые инструменты которые влияют на её изменение.
Если есть желание все таки учесть поддержку масштабируемости, то советую почитать про Эластичные шаблоны, а так же опосля ознакомится с "rem"
 
HTML код

  • Кодировка – utf-8
  • Структурный, не комментируемый код
  • Семантическая разметка на уровне грамотного использования тегов.
  • Имена классов и идентификаторов – осмысленные, на усмотрение разработчика.
  • Классы служат для привязки оформления, идентификаторы – скриптов.

LESS/SASS код

  • Структурный, отбивка табами.
  • Комментариями обозначены начало/конец крупных модулей/блоков разметки.
  • Допускается использование вендорных префиксов.
  • Стили для IE вынесены в отдельные CSS файлы, если они потребуются.
  • Для реализации в IE не поддерживаемых CSS свойств использование javascript хаков, или каких либо других интсрументов, запрещено (выше уже упоминалось про graceful degradation)

Перед тем как приступить к работе настоятельно рекомендую ознакомится с темой Типичные ошибки начинающего верстальщика
 
Javascript код

  • Структурный, отбивка табами.
  • Имена переменных осмысленные, на усмотрение разработчика.
  • Снабжен комментариями: описаны назначения
    • методов/классов
    • функций
    • условий.
  • Для объемных задач используется ООП, для простых – обычные функции.
  • Код должен быть без ошибок.
  • При использовании Ajax и не предоставления заказчиком api для взаимодействия с серверной частью, api создается на усмотрение разработчика.

Изображения

  • Имена файлов осмысленные, на усмотрение разработчика.
  • Графику следует оптимизацировать в Photoshop (использую инструмент "Save for Web") и ImageOptim (OSX) или OptiPNG (Windows)
  • Малые изображения и иконки объеденить в спрайты.
    • Для полноцветных RGBA картинок можно использовать инструмент Stitches
    • Для векторных изображений иожно использовать IcoMoon

Организация структуры файлов и папок

  • HTML файлы лежат в корне. Главная страница – index.html. Остальные – по именам макетов.
  • Стили в папке - /css/
  • SASS/LESS в соответствующей папке - /sass/ или /less/
  • Javascript - /js/
  • Изображения оформления - /images/
  • Изображения содержания - /thumbs/ или /pic/
  • Шрифты - /fonts/

Наглядный пример
 
Краткий вариант - только директории:
 

Скрытый текст

.├── project
│   ├── css
│   ├── images
│   │   ├── carousel
│   │   ├── gallery
│   │   ├── icons
│   │   │   └── src
│   │   ├── ie
│   │   ├── loader
│   │   ├── table
│   │   └── title
│   ├── js
│   │   ├── plugins
│   │   │   ├── jcarousel
│   │   │   └── typeahead
│   │   └── scripts
│   ├── less
└───└── thumbs

 


 
Полный вариант -- директории и файлов:
 

Скрытый текст

.├── project
│   ├── 10.html
│   ├── 11.html
│   ├── 3.html
│   ├── 4.html
│   ├── 5.html
│   ├── 6_1.html
│   ├── 6_2.html
│   ├── 7_1.html
│   ├── 8.html
│   ├── 9.html
│   ├── css
│   │   ├── project.css
│   │   ├── project.ie8.css
│   │   └── project.min.css
│   ├── images
│   │   ├── carousel
│   │   │   ├── control_left.png
│   │   │   └── control_right.png
│   │   ├── gallery
│   │   │   ├── control_corner_next.png
│   │   │   └── control_corner_prev.png
│   │   ├── icons
│   │   │   ├── Readme.txt
│   │   │   ├── spritesheet.png
│   │   │   ├── src
│   │   │   │   ├── bank_atm.png
│   │   │   │   ├── bank_office.png
│   │   │   │   ├── close.png
│   │   │   │   ├── social_fb.png
│   │   │   │   ├── social_gplus.png
│   │   │   │   ├── social_li.png
│   │   │   │   ├── social_mail.png
│   │   │   │   ├── social_pin.png
│   │   │   │   ├── social_rss.png
│   │   │   │   ├── social_tw.png
│   │   │   │   └── tags.png
│   │   │   ├── stitches.txt
│   │   │   └── stylesheet.less
│   │   ├── ie
│   │   │   └── caption-bg.png
│   │   ├── loader
│   │   │   ├── ajax-loader.gif
│   │   │   └── ie.png
│   │   ├── logo.png
│   │   ├── table
│   │   │   ├── sort-asc.png
│   │   │   └── sort-dsc.png│
│   └── title
│   │   └── credits.png
│   ├── index.html
│   ├── js
│   │   ├── jquery-1.10.2.min.map
│   │   ├── jquery.min.js
│   │   ├── plugins
│   │   │   ├── jcarousel
│   │   │   │   ├── jquery.jcarousel-autoscroll.min.js
│   │   │   │   ├── jquery.jcarousel-control.min.js
│   │   │   │   └── jquery.jcarousel-core.min.js
│   │   │   └── typeahead
│   │   │   ├── countries.json
│   │   │   ├── typeahead.js.zip
│   │   │   └── typeahead.min.js
│   │   └── scripts
│   │   ├── project_navigation.js
│   │   └── project_scroll_gallery.js
│   ├── less
│   │   ├── block.less
│   │   ├── breadcrumbs.less
│   │   ├── buttons.less
│   │   ├── carousel.less
│   │   ├── close.less
│   │   ├── dropdown.less
│   │   ├── forms.less
│   │   ├── project.less
│   │   ├── icon.less
│   │   ├── jquery.jcarousel.less
│   │   ├── jquery.typeahead.less
│   │   ├── layout.less
│   │   ├── loader.less
│   │   ├── mixins.less
│   │   ├── modal.less
│   │   ├── navbar.less
│   │   ├── navs.less
│   │   ├── page.less
│   │   ├── pagination.less
│   │   ├── scaffolding.less
│   │   ├── std.less
│   │   ├── tables.less
│   │   ├── unit.less
│   │   └── variables.less
│   ├── thumbs
│   │   ├── block__banner.jpg
│   │   ├── google-map.jpg
│   │   ├── home-page__gallery_03.jpg
│   │   ├── home-page__gallery_05.jpg
│   │   ├── home-page__gallery_07.jpg
│   │   ├── home-page__gallery_09.jpg
│   │   ├── home-page__gallery_11.jpg
│   │   ├── jcarousel_slide.jpg
│   │   ├── navigation__dropdown__thumb_03.jpg
│   │   ├── news_thumb_03.jpg
│   │   ├── news_thumb_06.jpg
│   │   ├── news_thumb_08.jpg
│   │   ├── std__thumb_01.jpg
│   │   ├── std__thumb_02.jpg
│   │   ├── unit__thumbnail_03.jpg
│   │   ├── unit_promo__thumb_03.jpg
│   │   ├── unit_promo__thumb_05.jpg
│   │   ├── unit_promo__thumb_07.jpg
└───└───└── unit_promo__thumb_09.jpg

 

 

Удачи в обучении :)

 

Автор макета -- Павел Борисенко предоставил данную работу на благо обучения начинающим :)

За основу ТЗ был взят пример со статьи Техническое задание на верстку сайта

design 1 - splat.zip

Share this post


Link to post
Share on other sites
Хочу обратить внимание на то что контент будет набиратся контент-менеджером, который не имеет соотвествующих знаний и навыков в работе с разметкой, а использует только окно редактора и инструменты которые он содержит.

 

Это значит, что оформляя именно контентную часть нельзя опираться на классы, и необходимо предусмотреть стили для всех тегов (в рамках визуального редактора), которые захочет использовать менеджер?

Share this post


Link to post
Share on other sites

@Bassline, совершенно верно. классы в рамках таких данных это достаточно редкая ситуация, когда совсем никак -- но надо.

Share this post


Link to post
Share on other sites
  • Кодировка – utf-8
  • Имена классов и идентификаторов – осмысленные, на усмотрение разработчика.
  • Классы служат для привязки оформления, идентификаторы – скриптов.
  • Имена файлов осмысленные, на усмотрение разработчика.
  • Графику следует оптимизацировать в Photoshop (использую инструмент "Save for Web") 

Человеку дают такое ТЗ и рассказывают как правильно верстать, отчего встают вопросы:

где пишут такие тз, и сколько платят за готовую работу с учетом такой телеги пожеланий? )

 

Хочу обратить внимание на то что контент будет набиратся контент-менеджером, который не имеет соотвествующих знаний и навыков в работе с разметкой, а использует только окно редактора и инструменты которые он содержит.

А вот это непонятно. Т.е. если в редакторе человек вставляет h1 заголовок, то он должен быть не дефолтный, Ариалом каким-нибудь, а предустановленный с супер шрифтом, определенным размером и жирностью? Разве это не должно вызвать удивление у редактора? 

 

klierik, ты это все это сам придумал специально для новичков, или такие ТЗ (или похожие) тебе реально попадались? 

Edited by advokatua

Share this post


Link to post
Share on other sites
Человеку дают такое ТЗ и рассказывают как правильно верстать, отчего встают вопросы: где пишут такие тз, и сколько платят за готовую работу с учетом такой телеги пожеланий? )
 

Как было сказанно в первом посте, за основу я взял ТЗ с выше указанного веб-ресурса. Я изменил его формулировку, а само задание составил таким образом что бы оно отвечало не только на вопрос "что делать", но и "как делать".

 

А вот это непонятно. Т.е. если в редакторе человек вставляет h1 заголовок, то он должен быть не дефолтный, Ариалом каким-нибудь, а предустановленный с супер шрифтом, определенным размером и жирностью? Разве это не должно вызвать удивление у редактора?

С чего бы кому-то удивляться? Например в том же WordPress менеджер вбивает статью в WISYWIG, а на "фронте" видит как он отформатирован. Не будем забывать что на "фротне"то у нас весь текст или его часть отображаться как кастомным шрифтом так и иметь кастомное форматирование и/или дизайн отдельных элементов контента.

 

klierik, ты это все это сам придумал специально для новичков, или такие ТЗ (или похожие) тебе реально попадались?

Данное ТЗ носит обучающий характер да и только. Большую часть данного задания, как я уже говорил выше, я взял с выше указанного ресурса. 

Недавно в одной из веток форума один из новичков жаловался что к макетам нет ТЗ от чего возникло желание закрыть данный пробел.

В действительности некоторые пункты в задании скорее всего будут отсутствовать, так как заказчик или не будет разбиратся в предметной области или будет думать что "это и так понятно".

Share this post


Link to post
Share on other sites
С чего бы кому-то удивляться? Например в том же WordPress менеджер вбивает статью в WISYWIG, а на "фронте" видит как он отформатирован.
 

Удивление в том, что он в ВИСИВИГ выберет шрифт гельветика, а на фронте будет какой-нибудь ПТ Санс, да еще и других размеров. Я все к тому, что не приходилось видеть такого в шаблонах, потому и спросил.

 

Про ТЗ понятно. Я уже было на секунду поверил, что есть заказчик который реально так все расписывает )

Share this post


Link to post
Share on other sites
Удивление в том, что он в ВИСИВИГ выберет шрифт гельветика, а на фронте будет какой-нибудь ПТ Санс, да еще и других размеров. Я все к тому, что не приходилось видеть такого в шаблонах, потому и спросил.
 

а, если смотреть в таком направлении, то ситуация иначе (я не совсем корректно понял о чем ты говорил).

я на практике сталкиваюсь с ситуацией когда весь ресурс, как правило, имеет один шрифт (не важно кастои или дефолтный), который задается, например, в <body>. а конент менеджера помещается в <div> с соответствующим классом, который выступает в роли контейнера как раз для такого типа данных.

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

 

Про ТЗ понятно. Я уже было на секунду поверил, что есть заказчик который реально так все расписывает )

я не встречал такого заказчика. Но, к примеру, мне попадалось ТЗ где в PDF был описан каждый элемент страницы а так же его работа при тех или иных действиях пользователя. Пускай техническая часть там была достаточно сухо описана, но зато был очень хорошо описана функциональная часть (хотя даже в таком случае покрывается все-го навсего около 50% всех возможных ньюансов, которые возникают в будущем при разработки).

Share this post


Link to post
Share on other sites
Не обязательно, но крайне желательно использовать Grunt для генерирования LESS/SASS в CSS с применением технологии сжатия.
 

 

А не проще использовать программу winless под windows или koala под ubuntu, которые висят в фоне и автоматом генерируют css при каждом сохранении файла less? И не нужно каждый раз лезть в консоль.

Share this post


Link to post
Share on other sites
А не проще использовать программу winless под windows или koala под ubuntu, которые висят в фоне и автоматом генерируют css при каждом сохранении файла less? И не нужно каждый раз лезть в консоль.
 

Grunt -- это решение кросплатформенное, которое будет работать под Win/OSX/Nix системами. Более того, его можно конфигурировать не только для LESS, но и JS и прочее. Разработчику, у которого поднят node.js потребуется в дикректории с проектом выполнить "$ npm install" и запусить файл конфигурации, да и только :)

А вообще консоль -- это друг разработчика.

 

сколько примерно такая работа стоит? 

не понял сути вопроса.

Share this post


Link to post
Share on other sites

Думаю суть ясен, человек хочет знать сколько ему примерно заплатят если попадется такой макет с такими требованиями)

Share this post


Link to post
Share on other sites
Grunt -- это решение кросплатформенное, которое будет работать под Win/OSX/Nix системами. Более того, его можно конфигурировать не только для LESS, но и JS и прочее. Разработчику, у которого поднят node.js потребуется в дикректории с проектом выполнить "$ npm install" и запусить файл конфигурации, да и только А вообще консоль -- это друг разработчика.
 

 

Теперь я понял. Оказывается к нему есть куча интересных плагинов, в том числе и плагин автоматизации любого процесса. Отличная штука.

Share this post


Link to post
Share on other sites
Можно ли взять за основу HTML5 Boilerplate ?
 

можно попробовать. я с ним не работал.

 

в 960 grid есть reset.css его можно использовать с Normalize.css?
 

я использовал 960 последний раз пару лет назад. надо пробовать...

Share this post


Link to post
Share on other sites
но, менеджеру ничего не мешает установить свой шрифт для этого контента в том же редакторе. в таком случае свойство будет указано в аттрибуте style="" и будет иметь приоритет над дефолтными стилями сайта. т.е. тем самым контент может иметь как дефолтный шрифт страницы или же указанный непосредственно в редакторе.

А если использовать !important для стилей элементов внутри div'a с контентом менеджера? По крайней мере для таких критичных как цвет текста, размер и фон?

Share this post


Link to post
Share on other sites

А если я просто для себя сделаю вёрстку как упражнение, меня побьют?)))

Edited by kattiperk

Share this post


Link to post
Share on other sites
А если я просто для себя сделаю вёрстку как упражнение, меня побьют?)))
Лично с товарищем klierik'ом приедем, были здесь уже такие умники, как говорил старина Verder, который уже к сожалению не появляется на этом форуме: "Найдём и уши отрежем". 

Share this post


Link to post
Share on other sites

А если я просто для себя сделаю вёрстку как упражнение, меня побьют?)))

Конечно ты можешь взять макет и использовать его как упражнение. Но если захочешь получить рецензию на свою работу, будь готов(а) критике(что в целом очень даже хорошо).

 

@Игорь Ермаков,

:rofl:  :rofl:  :rofl: 

Share this post


Link to post
Share on other sites

Совет: оставьте это на хостинге, большинству качать ваш архив не с руки.

Share this post


Link to post
Share on other sites

Совет: оставьте это на хостинге, большинству качать ваш архив не с руки.

а, да? тогда сейчас мне дадут дяди пароли.

Share this post


Link to post
Share on other sites
Побейте.

слайдера нет, правая стрелка слайдера ушла слишком далеко, верхняя полоска это не картинка а деталь слайдера. 

блок с классом hd находится внутри блока header, но превышает его размерами..)

Очень хаотичные названия классов.. Например блок с классом header-left - в правой стороне))

Неточностей много, вон валидатор тоже ругается - http://validator.w3.org/check?uri=http%3A%2F%2Fsplat.cc.ua%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

 

а вот за такие куски кода побить надо обязательно)

border: 10px solid #fff;border-bottom: 10px solid #d7d8d9;border-left: 10px solid #d7d8d9;margin-left: 174px;margin-top: -74px;.location {margin-top: -100px;background: #f4f6f7;background-image: url(images/checkin.png);background-position: 28px 23px;background-repeat: no-repeat;width: 168px;padding: 26px 26px 20px;}

сгрупируйте background, margin, border и так далее. А еще слишком много отрицательных margin-ов.

Edited by CroaToa

Share this post


Link to post
Share on other sites

да, съехала.

я пока не допёрла как связать верхнюю часть слайдера с самим слайдером.

кажется,я такого не сделаю

про hd и что-то там left справа я исправлю, совсем с ума сошла.

с валидатором разберусь, никуда не денусь.

а там с фонами проблема была. чего-то не так было, как мне нужно. ну ладно.

 

про слайдеры у меня мало знаний. я планировала сделать его, но пока не знаю как правильно до конца.

будет оно вообще двигаться у меня и передвигаться та розовая хрень корректно.

 

а так спасибо. нет у меня надзирателя.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Tascan
      Всем привет.
      Слышал советы, что вместо пикселей желательно использовать rem для задания размеров. Решил, в качестве эксперимента, попробовать задать для html определённый размер в пикселях, а дальше везде использовать уже rem.
      И вроде всё нормально, даже очень удобно. Но под конец решил я уменьшить масштаб страницы и вот тут появились проблемы. Если использовать такой код:
      html { font-size: 10px; } .box { background: red; width: 100px; height: 400px; } То по итогу всё нормально, сколько масштаб не уменьшай, результат всё те же 400px.
      Но стоило изменить единицы измерения в высоте:
      html { font-size: 10px; } .box { background: red; width: 100px; height: 40rem; } И вот тут уже появляется проблема. При уменьшении масштаба страницы до 50% к размеру высоты: в Google Chrome и Yandex браузерах добавляется дополнительные 80px, в Opera итоговая высота элемента увеличивается до 960 px. А вот в Firefox всё нормально и по итогу выходят те же 400px.
      Подскажите в чём тут проблема? Это особенности rem или браузеров на основе WebKit?
      И вообще, я понимаю, что многие советуют явно высоту элементов не задавать, но если это необходимо, то какие единицы измерения посоветуете для этого использовать?
    • By Evsey
      Доброго дня всем матерым верстальщикам.
      Есть задача сделать табличку графика на сайт. Технологии - понятно, что html и css. Табличка не большая, но с особенностями.
      А именно, в табличке есть группы объединенных ячеек, при чем не только внутри строк, но и между строками (объединяется несколько строк). Табличку прикрепил.
      Каркас table tr td без объединения ячеек могу сделать, но нужно объединить.
      Как правильнее всего сделать такое объединение? Было бы классно, чтобы ответ был сразу с примерами.

    • By AlexGreat
      Здравствуйте ! Имеется принципиальный вопрос о выравнивании внутри блока шрифтовой иконки . Вопрос трудно объяснить с помощью текста, поэтому прикрепляю видеовопрос для наглядности - (видео чуть более минуты). 
      https://drive.google.com/open?id=1zHWLnroXsaO5TocvUt07Wv6DHauZdBqJ
      Заранее спасибо за ответ! 
  • Member Statistics

    46,379
    Total Members
    3,128
    Most Online
    Petronne
    Newest Member
    Petronne
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.