Дизайн отзывов, рекомендаций — тестимониал (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 не будет опубликован. Обязательные поля помечены *