@Titamik
Я тут задаю самые глупые вопросы..

Верстка блока в лендинге — как правильно реализовать+адаптив?

Нужно сделать так:67b9e8b980304e349bbcccd37382c3bf.PNG

Верстаю на Bootstrap. Как лучше сделать? В голове - два варианта либо тупо вставлять картинкой (и то - хрен знает, как туда нормально запихать текст, чтоб не ехало). Второй - потрахаться с after и before.

Причем, нужен адаптив (видимо, в одну колонку).

Заранее спасибо))
  • Вопрос задан
  • 1239 просмотров
Решения вопроса 1
@Titamik Автор вопроса
Я тут задаю самые глупые вопросы..
Ребят, смотрю, многие подписались. Реализовал вот так:
<section class="container-fluid bl">
     <h2>Сферы применения мобильных <br> расточных станков</h2>
            <div class="sam-boxes">
				<div class="sam-boxes-holder">
					<div class="sam-box">
						<div class="sam-box-holder">
							<div class="sam-box-frame">
								<img src="http://pion-pioner.ru/wp-content/themes/stanexpert/img/img1.jpg" width="313" height="271" alt="">
								<div class="text-box">
									<p>Восстановление изношенных отверстий экскаваторов, подъемных кранов, корпус редукторов. Восстановление отверстий кораблей под гребные винты, рули и проч.</p>
								</div>
							</div>
						</div>
					</div>
					<div class="sam-box">
						<div class="sam-box-holder">
							<div class="sam-box-frame">
								<img src="http://pion-pioner.ru/wp-content/themes/stanexpert/img/img2.jpg" width="313" height="271" alt="">
								<div class="text-box">
									<p>Энергетическое оборудование: насосы, компрессоры, котлы турбины, барабаны, задвижки, генераторы</p>
								</div>
							</div>
						</div>
					</div>
					<div class="sam-box">
						<div class="sam-box-holder">
							<div class="sam-box-frame">
								<img src="http://pion-pioner.ru/wp-content/themes/stanexpert/img/img3.jpg" width="313" height="271" alt="">
								<div class="text-box">
									<p>Нефтегазовая промышленность: газоперекачивающие агрегаты, насосные станции, колонны</p>
								</div>
							</div>
						</div>
					</div>
					<div class="sam-box">
						<div class="sam-box-holder">
							<div class="sam-box-frame">
								<img src="http://pion-pioner.ru/wp-content/themes/stanexpert/img/img4.jpg" width="313" height="271" alt="">
								<div class="text-box">
									<p>Металлургическая промышленность: печи, машины непрерывного литья, прокатные станы, клети</p>
								</div>
							</div>
						</div>
					</div>
					<div class="sam-box">
						<div class="sam-box-holder">
							<div class="sam-box-frame">
								<img src="http://pion-pioner.ru/wp-content/themes/stanexpert/img/img5.jpg" width="313" height="271" alt="">
								<div class="text-box">
									<p>Железнодорожный транспорт: узлы и агрегаты локомотивов и вагонов, блоки двигателей и прочее</p>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
    </section>

.sam-boxes{
	width:1130px;
	margin:0 auto;
	background:#fff;
	text-align:center;
}
.sam-boxes:after{
	content:"";
	display:block;
	clear:both;
}
.sam-boxes-holder{margin:0 -15px;}
.sam-box{
	display:inline-block;
	vertical-align:top;
	margin:0 -4px 35px 0;
	width:33.3333%;
	padding:0 15px;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	position:relative;
}
.sam-box .sam-box-holder{
	width:100%;
	width:344px;
	height:297px;
	position:relative;
	margin:0 auto;
}
.sam-box .sam-box-holder:after{
	content:"";
	display:block;
	clear:both;
}
.sam-box .sam-box-frame{
	width:100%;
	width:344px;
	height:297px;
	overflow:hidden;
	position:relative;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	padding:13px 15px;
}
.sam-box:nth-child(1):before{
	content:"";
	display:block;
	position:absolute;
	width:58px;
	height:1px;
	background:url(../img/bg-line-c.png) no-repeat;
	left:355px;
	top:148px;
}
.sam-box:nth-child(2):before{
	content:"";
	display:block;
	position:absolute;
	width:58px;
	height:1px;
	background:url(../img/bg-line-c.png) no-repeat;
	left:355px;
	top:148px;
}
.sam-box:nth-child(4):before{
	content:"";
	display:block;
	position:absolute;
	width:58px;
	height:1px;
	background:url(../img/bg-line-c.png) no-repeat;
	left:355px;
	top:148px;
}
.sam-box .sam-box-holder:after{
	content:"";
	display:block;
	position:absolute;
	top:0;
	left:0;
	background:url(../img/bg-sam-box.png) no-repeat;
	width:344px;
	height:297px;
}
.sam-box:nth-child(1) .sam-box-holder:before{
	content:"";
	display:block;
	position:absolute;
	width:30px;
	height:38px;
	background:url(../img/bg-line-r.png) no-repeat;
	left:254px;
	top:296px;
}
.sam-box:nth-child(2) .sam-box-holder:before{
	content:"";
	display:block;
	position:absolute;
	width:31px;
	height:38px;
	background:url(../img/bg-line-l.png) no-repeat;
	left:60px;
	top:297px;
}
.sam-box:nth-child(3) .sam-box-holder:before{
	content:"";
	display:block;
	position:absolute;
	width:31px;
	height:38px;
	background:url(../img/bg-line-l.png) no-repeat;
	left:60px;
	top:297px;
}
.sam-box:nth-child(5) .sam-box-holder:before{
	content:"";
	display:block;
	position:absolute;
	width:31px;
	height:38px;
	background:url(../img/bg-line-r.png) no-repeat;
	left:60px;
	top:-36px;
}
.sam-box img{
	width:313px;
	height:271px;
}
.sam-box .text-box{
	position:absolute;
	left:15px;
	bottom:13px;
	width:312px;
	height:135px;
	background:url(../img/bg-frame.png) no-repeat;
	    padding-top: 20px;
}
.sam-box p{
	margin:0;
	font-family: 'Muller Light';
	font-size: 13px;
	color: #f3b2b2;
	    margin: 0 auto;
    line-height: 12px;

}

.bl h2 {
	color: #353535;
	text-align: center;
	margin-bottom: 80px;
}


Где картинки - соответствующие линии - вроде, красиво))
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
@YoManYo
*
https://jsfiddle.net/bwbtv5oz/ не кроссбраузерно правда
Ответ написан
Комментировать
csshexagon.com
jsfiddle.net/kizu/bhGn4

Примеров как реализовать такие фигуры средствами css достаточно много. Может придется немного поэкспериментировать, чтобы получить результат как в макете.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы