Как создавать такие карточки сайта?

Question

[Alan Solid]

Как правильно создавать такие карточки блоков?
Как добавить такой кружок ? через бефо или добавлять отдельный класс?

Comments

[Rustam Bainazarov]

Как удобнее стилизовать. С учётом наличия разных иконок, предпочтительнее просто блок на absolute с иконкой внутри.

Answer 1

[Антон]

Хоть так, хоть так, блок релейтив, круг абсолют

Comments

[Ben L]

Alan Solid - или в место абсолют можно использовать transform: translate / translateX / translateY

[Антон]

https://jsfiddle.net/0qrpoz56/1/

Answer 2

[Эмиль Рахматуллин]

Ну так можно:

<div class="fact">
	<div class="icon">
		<span class="icon-class"></span>
	</div>
	<!-- /.icon -->
	<h5>Надёжность</h5>
	<p>Чёткое выполнение взятых...</p>
</div>
<!-- /.fact -->

CSS:

.fact {
	position: relative;
	height: 300px;
	padding: 140px 20px 20px 20px;
}

.icon {
	position: absolute;
	left: 0;
	top: -100px;
	width: 100px;
	height: 100px;
	border-radius: 50%;
}

Comments

[Эмиль Рахматуллин]

CSS, конечно, дальше сам допилить можешь

[Alan Solid]

спасибо! а как лучше сделать, чтобы при создании адаптива, было легче его делать?

[Эмиль Рахматуллин]

Alan Solid, bootstrap сетка + media запросы тебе в помощь

[Эмиль Рахматуллин]

Alan Solid, оцени ответ или выбери решением)) Я тебе что, за "спасибо" помогаю?)

Answer 3

[Lord_Dantes]

Лучше отдельным элементом, конечно если у вас 3 карточки разных.