Ответы пользователя по тегу Вёрстка
  • Как убрать прозрачность текста в прозрачном div?

    @Titamik
    Я тут задаю самые глупые вопросы..
    Opacity дает полупрозрачность всему блоку, а не его фону.
    Для того, чтобы сделать полупрозрачным только фон, используйте
    bacground: rgba( r,g,b,0.2);
    Ответ написан
    Комментировать
  • Верстка блока в лендинге - как правильно реализовать+адаптив?

    @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;
    }


    Где картинки - соответствующие линии - вроде, красиво))
    Ответ написан