===================================================

 

.img-responsive /* Фото ЛЕОПАРДА */
display: block
max-width: 100%
height: auto
transition: all .6s ease
&:hover
transform: rotate(8deg) translate(-40px, -10px)

 

===================================================

 

.section
width:100%;
display:block;
height:auto;
min-height:515px;
padding-bottom:50px;
position:static;
z-index:0;
background-image:url(../images/fon.jpg);

 

===================================================

 

background-size:100% 100%

 

===================================================

 

Центрируем контент внутри секции:

 

 

 

 

 

 

Еще ровнялки разные:

 

 

 

 

 

Что бы фоновая картинка занимала всю секцию:

 

background-size: cover

 

Делаем ПАРАЛАКС:

 

В Common.js - нам нужно перехватить событие Scroll

 

 

 

Анимация текста при скролле:

 

 

 

==================================================

 

ПРОЗРАЧНЫЙ ФОН:

 

background-color: rgba($white, .4)

border: 1px solid rgba($gray_text,.25)

 

 

===================================================

 

ТЕКСТ  - ВЫКЛЮЧКА ПО ШИРИНЕ:

 

font-family: "OpenSansLight_azorr", sans-serif
text-align: justify

 

===================================================

ЗАГОЛОВКИ СЕКЦИЙ:

 

.s-skidka
h2
font-family: "OpenSansLight_azorr", sans-serif
font-size: 32px
font-weight: 400

===================================================

 

 

 

 

===================================================

 

НЕ ПЛОХОЙ СПОСОБ ВЫРАВНИВАНИЯ БЛОКА В БЛОКЕ:

 

 

 

 

Выводим Item список: