Как сделать данный блок в html?

Question

[QaED]

Добрый день! Как правильно нужно сверстать <textarea> по данному PSD: https://freebiesbug.com/psd-freebies/axit-psd-land... (блок Message в конце). Проблема в том, что у меня никак не получется соотнести текст в Name с текстом Message, он либо выше, либо ниже. Шрифт в блоке Name - Arial, 14px.

Comments

[Николай]

Напиши мне https://vk.com/c_trollface

[Ankhena]

Выравниваете input и textarea, подписям задаете одинаковый top.
Если это placeholder, то одинаковые отступы.

Не очень понятно, что именно вы делаете.
Код сюда: jsfiddle.net

[Ankhena]

QaED, там пусто

[QaED]

Ankhena, https://codepen.io/qaed/pen/OJyabpw

[Ankhena]

QaED, Оберните форму в тег form.
Выровняйте по высоте инпут и текстареа.
И одинаковые верхние отступы.

p.s. Полоска под заголовком это не hr, а псевдоэлемент.
И вместо article лучше section. Article без потери понимания можно разместить на другом сайте.

[Антон Литвиненко]

о, я когдато верстал такой макет, мож чем поможет)
https://antonlitvin.github.io/axit/dist/

[QaED]

Ankhena, сделал, но всеровно текст по разным уровням https://codepen.io/qaed/pen/OJyabpw

[QaED]

Anton Litvinenko, я пока первый вот сделать не могу, до такого мне еще учиться прилично :)

[QaED]

Anton Litvinenko, глупый вопрос, но все же. Вот PSD сайта, как вы узнали какие там есть анимации, какие используются шрифты и т.п.?

[Ankhena]

QaED, у вас разный размер шрифта в инпуте и в техтареа.
Не задавайте инпуту высоту в явном виде, достигайте нужной паддингами.

И изучите флексы - очень помогут.
Игра в помощь: https://flexboxfroggy.com/#ru

[QaED]

Ankhena, спасибо, все сделал :)

[Антон Литвиненко]

QaED, ну шрифты в макете есть. А анимации на свой вкус придумывал