Появилась проблема при вертске шаблона?

Question

[Denis_Ku]

Здравствуйте, я решил сверстать не большой шаблон (практика). И тут появилась со всем не большая проблема. Вот сам проект: https://yadi.sk/d/L34XOWWgrFRaYw (он маленький, только начал верстать)

Мне нужно сделать кнопку (READ ME) также, как на этой картинке: https://yadi.sk/i/SYyPbjTnGwUTSg
с помощью FlexBox. Но почему-то у меня никак не получается это сделать. Не подскажите, в чем проблема? Заранее спасибо!

Comments

[Lord_Dantes]

мона на кодпен я с Украины пж

[Denis_Ku]

slave bb, Сейчас по пробую.

[Denis_Ku]

slave bb, Извините, не получается выложить это все на Код пен

[Илья]

Denis_Ku, Вы не совсем правильно понимаете модель блочной вёрстки.

Для примера:
1. Оранжевый - секция или section. Можно и div сделать, если только начинаете изучать вёрстку. Для него задаёте background-image.
2. Розовый - будет контейнером, внутри которого находится контент. То есть div с классом container. Ему выставляете ширину. В данном случае 940px. Потом центруете с помощью margin: 0 auto;
3. Жёлтая и синяя - объедините в header . Для блока меню делаете обёртку (салатовый), например wrapper. Внутри него располагаете элементы с помощью flexbox.
4. От верхнего блока делаете отступ вниз margin-bottom: 305px.
4. Синяя с текстом делаете заголовком H1, нижнее описание H2 или p (параграф).
5. Под ним делаете кнопку. Пример реализации кнопок можно посмотреть тут.

Примерно так. Возможно, можно сделать ещё просто, но у меня небольшой опыт вёрстки.

[Denis_Ku]

Илья, Спасибо большое за ваше объяснение.

[Denis_Ku]

Илья, Странно, но через свойство background-image у меня не выводятся изображения. Только через background

[Илья]

Denis_Ku, background это сокращённый вариант, который принимает значения адреса изображения, размеров и другие. Просто вы вставили картинку вместе с текстом, а это неправильно. Если откроете шаблон в фотошопе, там картинку можно отдельно выгрузить. Соответственно вы задаёте картинку через background для секции (секция как пример, можно и div), а поверх неё у вас уже будет идти контент и другие элементы.

[Denis_Ku]

Илья, Понял, спасибо!

[Denis_Ku]

Насчет надписи, которую я вырезал вместе с картинкой. Просто решил сразу вырезать, и не создавать отдельно блок. Но теперь понял, что это была ошибка