elarkov
4/21/2018 - 8:07 AM

Сниппет timtline для сайта

Переменные в коде. accent: #ea1616; $gray: #e3e3e3; $text: #333;

// Customization Bootstrap vars from "app/libs/bootstrap/scss/_variables.scss" $grid-gutter-width: 20px; $grid-columns: 12; $grid-breakpoints: (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px); $container-max-widths: (sm: 540px, md: 720px, lg: 960px, xl: 1140px);

$gutter: $grid-gutter-width;

style.scss
content_copyfile_download
.timeline {
	padding: $gutter*2 0;

	@include media-breakpoint-down(xs){
		padding: $gutter 5%;
	}

}

.timeline-item {
	position: relative;
	padding: $gutter/2 0;

	&:before {
		content: '●';
		position: absolute;
		width: 1px;
		height: 100%;
		font-size: 28px;
		line-height: 220%;
		text-indent: -8px;
		background-color: $gray;
		color: $accent;

		@include media-breakpoint-down(xs){
			text-indent: -7px;
		}
		
	}

	&:nth-child(odd){
		text-align: right;
		padding-right: 90px+$gutter;

		.timeline-item__img {
			right: $gutter;
		}

		&:before {
			right: 0;
		}

		@include media-breakpoint-down(xs){
			text-align: left;
			padding-left: 90px+$gutter;
			padding-right: 0;

			.timeline-item__img {
				left: $gutter;
			}

			&::before {
				left: -1px;
			}
		}

	}

	&:nth-child(even){
		@include make-col-offset(6);
		padding-left: 90px+$gutter;

		.timeline-item__img {
			left: $gutter;
		}

		&:before {
			left: -1px;
		}

		@include media-breakpoint-down(xs){
			@include make-col-offset(0);
		}

	}
}

.timeline-item__img {
	position: absolute;
	width: 74px;
	height: 74px;
	overflow: hidden;
	border-radius: 100%;
	border: 5px solid $gray;
}

.timeline-item__pic {
	width: 100%;
}

p {
	line-height: 1.4;
	margin: 4px 0 0 0;
}

.timeline-item__date {
	display: block;
	font-size: 12px;
	color: $accent;
	font-weight: bold;
	margin-top: 5px;
}
index.html
content_copyfile_download
<section class="timeline">
		<div class="container">
			<div class="row">
				<div class="col-md-10 offset-md-1">

					<div class="col-sm-6 col-xs-12 timeline-item">
						<div class="timeline-item__img">
							<img src="img/1.jpg" alt="alt" class="timeline-item__pic">
						</div>
						<p>Далеко-далеко за словесными горами в стране, гласных и согласных.<span class="timeline-item__date">11/04/2018</span></p>
					</div>
					<div class="col-sm-6 col-xs-12 timeline-item">
						<div class="timeline-item__img">
							<img src="img/2.jpg" alt="alt" class="timeline-item__pic">
						</div>
						<p>Ты дал рукописи рот проектах, грамматики она!<span class="timeline-item__date">12/04/2018</span></p>
					</div>
					<div class="col-sm-6 col-xs-12 timeline-item">
						<div class="timeline-item__img">
							<img src="img/3.jpg" alt="alt" class="timeline-item__pic">
						</div>
						<p>Эта меня дорогу курсивных вопроса. Напоивший, приставка?<span class="timeline-item__date">13/04/2018</span></p>
					</div>
					<div class="col-sm-6 col-xs-12 timeline-item">
						<div class="timeline-item__img">
							<img src="img/4.jpg" alt="alt" class="timeline-item__pic">
						</div>
						<p>Выйти за над, дороге продолжил своих встретил?<span class="timeline-item__date">14/04/2018</span></p>
					</div>
					<div class="col-sm-6 col-xs-12 timeline-item">
						<div class="timeline-item__img">
							<img src="img/5.jpg" alt="alt" class="timeline-item__pic">
						</div>
						<p>До дорогу вдали коварный дал назад щеке!<span class="timeline-item__date">15/04/2018</span></p>
					</div>
					<div class="col-sm-6 col-xs-12 timeline-item">
						<div class="timeline-item__img">
							<img src="img/6.jpg" alt="alt" class="timeline-item__pic">
						</div>
						<p>Переписывается, ipsum. Вдали безорфографичный диких все речью?<span class="timeline-item__date">16/04/2018</span></p>
					</div>

				</div>
			</div>
		</div>		
	</section>