ТЗ на вёрсточное задание «Ачивки»

achievements.md

Ачивка

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

Сверстайте шаблон для списка ачивок без применения SVG для оформления. Ачивки могут быть со счетчиком.

Макет

С размерами

Требования

• на каждой странице может быть до 100 ачивок
• внешний вид ачивок можно менять добавлением класса к DOM-элементам
• любую картинку можно вставить внутрь ачивки

Tex.данные

Blue mail

• Иконка https://raw.githubusercontent.com/maxvipon/html-tasks/master/achivement_1_icon.png
• Граница #4a80ff
• Фон #f0f5ff

Green microphone

• Иконка https://raw.githubusercontent.com/maxvipon/html-tasks/master/achivement_2_icon.png
• Граница #84ff4f
• Фон #ebffe2

Orange tools

• Иконка https://raw.githubusercontent.com/maxvipon/html-tasks/master/achivement_3_icon.png
• Граница #ff5c33
• Фон #fde0d8

Pink car

• Иконка https://raw.githubusercontent.com/maxvipon/html-tasks/master/achivement_4_icon.png
• Граница #ff21e1
• Фон #ffebfc

Turquoise bike

• Иконка https://raw.githubusercontent.com/maxvipon/html-tasks/master/achivement_5_icon.png
• Граница #8ff0ff
• Фон #f0fdff

Yellow hammer

• Иконка https://raw.githubusercontent.com/maxvipon/html-tasks/master/achivement_6_icon.png
• Граница #ffdd6e
• Фон #fff8e0

https://jsfiddle.net/1pnga3a2/#&togetherjs=IdT24Qmn9R