Как сделать свою табличку распределения характеристик персонажа стилизованную под игру?

Question

[Олег Петров]

Вот пример того, что я хочу получить, только со своими названиями и картинками.

Хочу создать свои перки и свои характеристики персонажа

Comments

[Eugene Chefranov]

С какой именно проблемой столкнулись? Верстка, JS, бэкэнд? Где ваши попытки?

[Олег Петров]

Eugene Chefranov, Хочу понять с чего начать это делать? Может есть уже готовые шаблоны, по которым учиться?

[Eugene Chefranov]

Олег Петров, вы хотите браузерную игру или просто сверстать нечто подобное как на картинке? Если верстать, то собственно открываете самоучитель по HTML/CSS и вперед, если хотите предать интерактивности, то потом начинайте учить JS, а если хотите где-то это все хранить и взаимодействовать между другими игроками например, то изучайте бэкэнд.

Одним ответом тут так просто не объяснишь. Тут много областей задействовано.

[Олег Петров]

Eugene Chefranov, Нет, я скорее хочу просто сделать статичную картинку сверстать.

[Eugene Chefranov]

Олег Петров, Тогда ничего сложного не вижу, обычная блочная верстка. Почитайте про flexbox и попробуйте сверстать основу - сетку (без стилизации под игру), а потом когда получится, тогда начнете стилизовать

[Олег Петров]

Eugene Chefranov, Спасибо

[maralov]

Олег Петров, прикольно...ностальгия))) если нужен совет-помощь по верстке - пишите мне, подскажу в свобдное время)

[maralov]

FlexBox + float или gridCSS + flexBox, чистым FlexBox тоже можно. для новичка задача не простая, если справитесь и освоите - дальше в верстке для вас пойдет проще, удачи

Answer 1

[hzzzzl]

поделить всё на блоки и фигачить по отдельности
https://jsfiddle.net/o5wkstfx/

Comments

[Олег Петров]

Спасибо, выглядит довольно неплохо. А как вставить красиво туда стилизованную фотку?