[ Code-Draft ]

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

.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%

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

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

/* =============  ПАНОРАМНАЯ СЕКЦИЯ С ИЗОБРАЖЕНИЕМ  ====================== */

.s-wide-paralax
	padding: 250px 0
	min-height: 200px
	h2
		text-align: center
		padding-bottom: 30px
		line-height: 40px
		font-family: "OpenSansBold_azorr", sans-serif
		font-size: 50px
		color: $white

.subtext-panoram
	font-family: "OpenSansLight_azorr", sans-serif
	color: $white
	font-size: 24px
	margin-top: 20px
	padding-top: 5px

/* ======================================================================= */

/* ============= ПАНОРАМНАЯ СЕКЦИЯ С ИЗОБРАЖЕНИЕМ ====================== */

.s-wide-paralax

padding: 250px 0

min-height: 200px

text-align: center

padding-bottom: 30px

line-height: 40px

font-family: "OpenSansBold_azorr", sans-serif

font-size: 50px

color: $white

.subtext-panoram

font-family: "OpenSansLight_azorr", sans-serif

color: $white

font-size: 24px

margin-top: 20px

padding-top: 5px

/* ======================================================================= */

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

*
*
.section_about
	padding: 30px 0
	height: 75vh
	border: 1px solid

.container_about
	max-width: 1150px
	margin: 0 auto
	padding-top: 30px
/* ------------------------- */
*
*

.section_about

padding: 30px 0

height: 75vh

border: 1px solid

.container_about

max-width: 1150px

margin: 0 auto

padding-top: 30px

/* ------------------------- */

*
*

.img-responsive
	display: block
	max-width: 100%
	height: auto
	transition: all .6s ease
	&:hover
		transform: scale(1.05)
	&::before
		content: ''
		width: 100px
		height: 100px
		position: absolute
		top: 0
		left: 0
		background-color: $blue
		opacity: .6
	.overlay_gepard
		z-index: 3
		background-color: $blue
		position: relative
		text-align: center
		margin: 0

*
*

.img-responsive

display: block

max-width: 100%

height: auto

transition: all .6s ease

&:hover

transform: scale(1.05)

&::before

content: ''

width: 100px

height: 100px

position: absolute

top: 0

left: 0

background-color: $blue

opacity: .6

.overlay_gepard

z-index: 3

background-color: $blue

position: relative

text-align: center

margin: 0

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

background-size: cover

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

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

*
*

	$(window).scroll(function() {

			var st = $(this).scrollTop();

			$(".paralax_text").css({
				"transform" : "translate(0%, " + st + "%"
			});

	});

*
*

$(window).scroll(function() {

var st = $(this).scrollTop();

$(".paralax_text").css({

"transform" : "translate(0%, " + st + "%"

});

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

*
*

$(window).load(function() {

	$(".text_animate h2").animated("fadeInDown", "fadeOutUp");
/*	$(".top_text p").animated("fadeInUp", "fadeOutDown");*/

}); 


*
*

$(window).load(function() {

$(".text_animate h2").animated("fadeInDown", "fadeOutUp");

/* $(".top_text p").animated("fadeInUp", "fadeOutDown");*/

});

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

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

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 список:

*
*

         <ul class="azorr-list">
               [[getImageList?
               &tvname=`home-list`
               &tpl=`@CODE: <li><i class="fa fa-check"></i>[[+title]]</li>`
               &docid=`1`]]
         </ul>

*
*

[[getImageList?

&tvname=`home-list`

&tpl=`@CODE: <li><i class="fa fa-check"></i>[[+title]]</li>`

&docid=`1`]]

</ul>

Рубрики:

WEB-Верстка

РОВНЯЕМ ПО ЦЕНТРУ DIV в DIV-Е

Оставить коментарий