Дизайн отзывов, рекомендаций – тестимониал (testimonial) для сайта

Дизайн отзывов, рекомендаций - тестимониал (testimonial) для сайтаТестимониалс (от англ. testimonial – рекомендация, свидетельство, отзыв) в веб-дизайне – это отображение отзывов и рекомендаций клиентов. Чаще всего такие отзывы размещают на главной странице и они включают в себя: название компании, ФИО и фотографию. Для одного из своих сайтов, я тоже создала такой дизайн, чтобы отзывы смотрелись гармонично и красиво.

✪ DEMO⇊ СКАЧАТЬ

HTML

Прежде всего рассмотрим HTML разметку самих отзывов:

В этой разметке два отзыва. Скопируйте код между <!–отзыв–> <!–Конец отзыва–> столько раз, сколько отзывов необходимо разместить на странице.

Код отзыва нужно отредактировать и наполнить нужно информацией:

<!–Тут напишите ФИО–> – напишите ФИО человека, чей отзыв публикуете.
<!–Тут замените SITE_COMPANY_LINK и COMPANY–> – в строчке <a href=”SITE_COMPANY_LINK” target=”_blank” rel=”nofollow”><b>COMPANY</b></a> замените SITE_COMPANY_LINK на ссылку компании, а COMPANY на название компании.
<!–Тут ссылка на ФОТО замените: http://yoursite.com/people1.jpg–> – замените фото, укажите ссылку на нужное фото.
ТУТ ТЕКСТ ОТЗЫВА – напишите текст отзыва;

Все отзывы размещены внутри контейнера <div>, в котором заданы классы отзывов. Данный контейнер размещается на странице всего раз, а отзывы должны быть размещены внутри.

Классы контейнера определяют все стили отзывов. Их можно изменять.

Цвет

Стиль цвета, должен присутствовать обязательно, но его можно менять:
t_grey – серый;
t_red – красный;
t_blue – синий;
t_green – зеленый.

Фото

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

Расположение

За расположение отвечает следующие классы:
tg-one – линейное отображение в одну колонку;
tg-one-half – две колонки;
tg-one-third – три колонки.

CSS

Теперь, чтобы все работало, осталось добавить стили:

Примеры

Линейное отображение, серый цвет, черное-белое фото

author

Жизнь — это то, что происходит с нами, пока мы строим другие планы.
Life is what happens to us while we are making other plans.

Два столбика, цвет красный, цветные фото

author

Жизнь — это то, что происходит с нами, пока мы строим другие планы.
Life is what happens to us while we are making other plans.

author

Мы смотрели долго в небо,
Оказалось небо ниже.
Нам сказали — это небыль,
Это быль — я так услышал.

Три столбика, цвет синий, черное-белые фото

author

Жизнь — это то, что происходит с нами, пока мы строим другие планы.
Life is what happens to us while we are making other plans.

author

Мы смотрели долго в небо,
Оказалось небо ниже.
Нам сказали — это небыль,
Это быль — я так услышал.

author

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


Подпишитесь на RSS канал - если Вы хотите первыми узнавать о новых статьях на сайте!!!

Статьи по теме:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *