Верстка #1

Пример вёрстки

by Anatoly Kulikov

HTML

<main>
	<section>
		<div class="avatar-wrapper">
			<p></p>
		</div>
	</section>
</main>

<article>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac tincidunt turpis. Vivamus ullamcorper scelerisque tellus, rutrum pulvinar nisi laoreet eget. Nullam tempus libero nulla, ut scelerisque augue rutrum ac. Sed tempus, urna eget ultricies consectetur, ligula urna facilisis mauris, id euismod nunc enim eget nisl. Donec eu venenatis nisl. Maecenas nec felis tincidunt, tincidunt est nec, lacinia nibh. Aenean condimentum, nunc vel varius dignissim, enim nisi congue libero, ac pellentesque arcu augue sed nunc. Suspendisse risus felis, aliquet tempus dolor ut, dapibus cursus justo.</p>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac tincidunt turpis. Vivamus ullamcorper scelerisque tellus, rutrum pulvinar nisi laoreet eget. Nullam tempus libero nulla, ut scelerisque augue rutrum ac. Sed tempus, urna eget ultricies consectetur, ligula urna facilisis mauris, id euismod nunc enim eget nisl. Donec eu venenatis nisl. Maecenas nec felis tincidunt, tincidunt est nec, lacinia nibh. Aenean condimentum, nunc vel varius dignissim, enim nisi congue libero, ac pellentesque arcu augue sed nunc. Suspendisse risus felis, aliquet tempus dolor ut, dapibus cursus justo.</p>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac tincidunt turpis. Vivamus ullamcorper scelerisque tellus, rutrum pulvinar nisi laoreet eget. Nullam tempus libero nulla, ut scelerisque augue rutrum ac. Sed tempus, urna eget ultricies consectetur, ligula urna facilisis mauris, id euismod nunc enim eget nisl. Donec eu venenatis nisl. Maecenas nec felis tincidunt, tincidunt est nec, lacinia nibh. Aenean condimentum, nunc vel varius dignissim, enim nisi congue libero, ac pellentesque arcu augue sed nunc. Suspendisse risus felis, aliquet tempus dolor ut, dapibus cursus justo.</p>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac tincidunt turpis. Vivamus...

SCSS

main {
	display: block;
	width: 100%;
	border-bottom: #E0E0E0 solid 1px;
	background: #FAFAFA;
	
	section {
		position: relative;
		width: 80%;
		height: 110px;
		margin: 0 auto;
	}
}
.avatar-wrapper {
	position: absolute;
	z-index: 10;
	bottom: -40px;
	width: 80px;
	height: 80px;
	display: block;
	
	p {
		display: block;
		width: 100%;
		height: 100%;
		border-radius: 50%;
		background: #03A9F4;
	}
}
article {
	position: relative;
	width: 80%;
	margin: 0 auto 0px;
	padding: 45px 15px 15px;
	background: #FAFAFA;
	
	p {
		margin-bottom: 0.75rem;
		font-size: 18px;
		line-height: 140%;
	}
}