<header class="p-main-header p-main-header_sm b-text-color b-text-color_white ">
<!-- <video src="/static/site/assets/video/master.mp4" class="b-bgvideo" autoplay loop></video><!-- autoplay -->
<div class="b-bgvideo" style="background-image:url('https://s-media-cache-ak0.pinimg.com/originals/e9/f7/01/e9f701b1b22c98fad8c2b2fc6c527015.jpg');"></div>
<video src="http://bashinsky.pro/sources/codepen/BEST%20OF%20SNOWBOARD%202016.mp4" class="b-bgvideo" autoplay="" loop="" muted></video>
<div class="b-head-bgimage" style="background-image:url();"></div>
<div class="b-container b-container_inline-block b-container_fluid-outer b-container_up">
<!--begin b-top-menu -->
<div class="b-top-menu b-text-color b-text-color_gray-blue">
<div class="b-top-menu__item b-top-menu__item_right b-text-default b-text-default_md">
<a href="mailto:ski_club@mail.ru" class="b-email-link b-link">email@email.ru</a>
</div>
<!--end b-top-menu__item-->
<!--begin b-top-menu__item-->
<div class="b-top-menu__item b-top-menu__item_right b-text-default b-text-default_md">
<span>+7 -880-200-06-00</span>
</div>
<!--end b-top-menu__item-->
</div>
<!--end b-top-menu -->
<!--begin b-main-menu-->
<div class="b-main-menu b-container b-container_fluid-inner b-container_margin-auto">
<a href="/"><div class="b-main-menu__logo b-main-menu__logo_left"></div></a>
<div class="b-main-menu__center">
<div class="b-heading b-heading_main">
<a href="/"><h1 class="">Video Header</h1></a>
</div>
<nav class="b-main-menu-center__list ">
<ul class="b-main-menu-list">
<li class="b-main-menu-list__item b-link "><a href="#" class="b-text-bold b-text-bold_sm-resp">Home</a></li>
<li class="b-main-menu-list__item b-link "><a href="#" class="b-text-bold b-text-bold_sm-resp">Gallery</a></li>
<li class="b-main-menu-list__item b-link "><a href="#" class="b-text-bold b-text-bold_sm-resp">News</a></li>
<li class="b-main-menu-list__item b-link "><a href="#" class="b-text-bold b-text-bold_sm-resp">Shop</a></li>
</ul>
</nav>
</div>
<a href="/"><div class="b-main-menu__logo b-main-menu__logo_right is-hidden"></div></a>
</div>
<!--end b-main-menu -->
<!--begin b-slogan-->
<div class="b-slogan">
<div class="b-slogan__heading b-heading b-heading_1">
<!-- <h1>Горные лыжи - наша работа! </h1> -->
<h1>Hello ;)</h1>
</div>
<div class="b-slogan__description b-text-default b-text-default_lg">
<p></p><p><br></p><p></p>
</div>
<a class="b-slogan__button-play" href="https://www.youtube.com/watch?v=n0F6hSpxaFc"></a>
</div>
</div>
</header>
//palitra
color-header := rgba(#0f1b32,.85);
color0 := #000;
color1 := #fff;
color2 := #1a253b;//dark blue
color3 := #232634;//dark blue
color4 := rgba(#f22815,.5);//red
color5 := #e3111e; //red2
color6 := #eaedf6;//lightest
text-color1 := #6c7d9b;//light blue
text-color2 := #4665a4;//lighter blue
text-color3 := #777;
text-color4 := #819acd;
text-color5 := #b9bfc5;//gray-blue
text-color6 := #4665a4;//link color
color-hover1 := #f47f7a;
color-alert := color-hover1;
color-image-layout := rgba(#0f1b32,.6);
//text
text__family_primary := 'Roboto';
text__weight_lite := 300;
text__weight_medium := 400;
text__weight_bold := 800;
//breakpoints
screen-md := 980px;
screen-lg := 1280px;
screen-xl := 1600px;
//indents
gutter-default := 26px;
//paths
path-img := '../../../assets/img/';
// other
//about
main-container-pt := 80px;
about-text-container := 170px;
head-height := 250px;
//animation
g-animation-duration := .2s;
html
font-size:10px;
body
background:#333;
color:#fff;
font-family:Roboto;
*
box-sizing:border-box;
//=========================
a {
color: inherit;
outline: none;
text-decoration: none;
}
.p-main-header
position:relative;
text-align:center;
padding-bottom:60px;
overflow:hidden;
background:color-header;
height:head-height;
&_md
background:none;
height:630px;
&_sm
background-repeat:no-repeat;
background-size:cover;
height:auto;
&_about
background:none;
z-index:1;//2
.b-bgvideo{
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
background-size:cover;
background-position:center;
position:absolute;
top:50%;
left:50%;
z-index:-1;
transform: translateX(-50%) translateY(-50%);
}
//Заголовки
.b-heading
margin-bottom:20px;
font-weight:text__weight_bold;
&_main
font-weight:text__weight_lite;
font-size:3.2rem;
margin-bottom:6px;
@media all and (min-width:screen-lg)
font-size:3.6rem;
margin-bottom:10px;
&_1
font-size:4.8rem;
@media all and (min-width:screen-lg)
font-size:6rem;
&_2
font-size:4.2rem;
@media all and (min-width:screen-lg)
font-size:4.8rem;
&_3-5
font-size:3rem;
&_3
font-size:1.8rem;
margin-bottom:15px;
text-transform:uppercase;
//основной текст
.b-text-default
font-weight:text__weight_medium;
&_sm//футер, текстовый блок
font-size:1.5rem;
&_sm-resp//второй уровень меню
font-size:1.1rem;
@media all and (min-width:screen-lg)
font-size:1.4rem;
&_smx
font-size:1.5rem;
&_md//шапка, текстовый блок, футер
font-size:1.6rem;
&_lg//шапка, футер
font-size:1.8rem;
//курсивный текст
.b-text-italic
font-style:italic;
&_sm
font-size:1.3rem;
//жирный текст
.b-text-bold
font-weight:text__weight_bold;
&_xs//форма
font-size:1.3rem;
text-transform:uppercase;
letter-spacing:1px;
&_sm//main menu
font-size:1.4rem;
text-transform:uppercase;
letter-spacing:1px;
&_sm-resp
font-size:1.1rem;
text-transform:uppercase;
letter-spacing:1px;
@media all and (min-width:screen-lg)
font-size:1.4rem;
&_md
font-size:1.8rem;
text-transform:uppercase;
letter-spacing:1px;
//цвет текста
.b-text-color
&_white
color:#fff;
&_black
color:#000;
&_gray
color:text-color3;
&_gray-blue
color:text-color5;
.b-text-block
//margin-bottom:70px;
/*&:last-child
margin-bottom:0;
/*&__text-module
> *:last-child
margin-bottom:0;*/
&_page
margin-bottom:55px;
&__text-module
//margin-bottom:55px;
position:static;
& > *:last-child
margin-bottom:0;
&_without-mrg-btm
margin-bottom:0;
&__title//h2
font-weight:text__weight_bold;
line-height:4.8rem;
font-size:4.2rem;
margin-bottom:30px;
margin-top:-8px;
@media all and (min-width:screen-lg)
line-height:6.4rem;
font-size:4.8rem;
&_page-title
margin-top:0px;
margin-bottom:40px;
line-height:4.8rem;
font-size:4.8rem;
@media all and (min-width:screen-lg)
line-height:6rem;
font-size:6rem;
&_application
margin-top:0px;
margin-bottom:20px;
font-size:4.8rem;
line-height:4.8rem;
@media all and (min-width:screen-lg)
line-height:6rem;
font-size:6rem;
&_main-page
margin-top:0px;
margin-bottom:15px;
font-size:4.8rem;
line-height:4.8rem;
@media all and (min-width:screen-lg)
line-height:6rem;
font-size:6rem;
&_about
margin-top:0px;
background:none;
z-index:1;
color:color1;
position:relative;
&__content-row
margin-bottom:50px;
&:last-child
margin-bottom:0;
&__description
line-height:24px;
font-weight:text__weight_medium;
font-size:1.8rem;
padding-right:30px;
&__content//redactor
font-size:1.5rem;
line-height:24px;
&_f18
font-size:1.8rem;
&_mb30
margin-bottom:30px;
table,h2,h3,h4,p,ul,ol
margin-bottom:20px;
*:last-child//последнему тегу нулевой марджин
margin-bottom:0;
//=========table===========
table
border: none;
width: 100%;
td,
th
padding: 8px 0;
//border: 1px solid @border_color;
th
border-bottom: 1px solid #bebfbf;
text-align: left;
font-weight:text__weight_bold;
tr
border-bottom:1px solid #e6e8e8;
//=========ul================
ul
padding: 0;
//margin: 20px 0;
& > li
margin: 0 0 10px;
padding: 0 0 0 20px;
position: relative;
&:after
content: '—';
position: absolute;
left: 0;
top: 0;
//color: @brown;
//=========ol================
ol
padding: 0;
//margin: 20px 0;
counter-reset: section;
& > li
margin: 0 0 10px;
padding: 0 0 0 20px;
position: relative;
&:after
content: counter(section) '.';
counter-increment: section;
position: absolute;
left: 0;
top: 0;
//=========h================
h2,h3,h4
font-weight:text__weight_bold;
h2
line-height:4.2rem;
font-size:4.2rem;
margin-bottom:25px;
@media all and (min-width:screen-lg)
line-height:4.8rem;
font-size:4.8rem;
h3
line-height:3rem;
font-size:3rem;
margin-bottom:20px;
h4
line-height:1.8rem;
font-size:1.8rem;
text-transform:uppercase;
margin-bottom:15px;
img
width:100%;
height:auto;
em
font-style:italic;
strong
font-weight:text__weight_bold;
a
color:text-color6;
&_application
font-size:1.6rem;
p
margin-bottom:10px;
.b-media-block
//margin-bottom:70px;
&__image-wrapper
width:100%;
overflow:hidden;
&_lg
max-height:400px;
&_md
max-height:285px;
&_sm
max-height:120px;
&__img
width:100%;
height:auto;
//14 bold +main menu +button
//16 normal head
//18 bold
.b-head-bg-wrapper,
.b-head-bg-wrapper__layout
position:absolute;
bottom:0;
top:0;
left:0;
right:0;
background-size:cover;
background-position:center;
z-index:1;//1
.b-head-bg-wrapper__layout
background-color:rgba(#000,.4);
.b-head-bgimage
position:absolute;
bottom:0;
top:0;
left:0;
right:0;
background-size:cover;
background-position:center;
z-index:-1;//0
&_places
z-index:0;//0
.b-top-menu
height:60px;
indents= 20px;
&__item
line-height:60px;
height:60px;
&:first-child
margin-right:indents
&__item_left
float:left;
margin-right:indents;
&__item_right
float:right;
margin-left:indents;
.b-social
font-size:0;
&__item
display:inline-block;
margin-right:20px;
font-size:18px;
.b-main-menu
logo-width-lg = 100px;
logo-height-lg = 150px;
logo-width-md = 75px;
logo-height-md = 100px;
display:inline-block;
text-align:left;
font-size:0;
position:relative;
margin-top:30px;
@media all and (min-width:screen-lg)
margin-top:27px;
&__logo
//margin-bottom:-10px;
width:logo-width-md;
height:logo-height-md;
@media all and (min-width:screen-lg)
width:logo-width-lg;
height:logo-height-lg;
//background-position:50% 50%;
background-repeat:no-repeat;
position:absolute;
&_left//<img src="/static/site/assets/img/logo1_.png" width="83" height="129">
background-image:url(path-img+'logo1_.png');
background-size:83px 129px;
background-position:0 4px;
margin-top:-35px;
//top:0;
//float:left;
width:83px;
height:135px;
//margin-right:83px * -1;
left:0;
@media all and (min-width:screen-lg)
height:135px;
margin-top:-25px;
margin-right:83px * -1;
&_right//<img src="/static/site/assets/img/logo2_.png" width="62" height="84">
//float:right;
background-image:url(path-img+'logo2_.png');
background-size:62px 84px;
background-position:100% 0;
margin-left:logo-width-md * -1;
height:100px;
width:62px;
right:0;
@media all and (min-width:screen-lg)
height:100px;
margin-left:logo-width-lg * -1;
.b-main-menu-list
border-bottom:1px solid rgba(#fff,.2);
padding:20px 0;
//font-size:0;
display:flex;
justify-content:space-between;
flex-direction:row;
white-space:nowrap;//ie9
//flex-
&__item
display:inline-block;
position:relative;
/*items-indents = 1.8vw;//25px
margin-right:items-indents;*/
text-transform:uppercase;
letter-spacing:1px;
margin-left:-20px;
margin-right:-20px;
&:first-child
margin-left:0;
&:last-child
margin-right:0;
&.is-current
&:before
//background:color1;
content:''
//height:2px;
border-bottom:2px solid;
position:absolute;
bottom:-22px;
width:100%;
.b-slogan
margin:210px auto 0;
&__description{
line-height:1.6em;
}
&__button-play
display:inline-block;
width:50px;
height:50px;
margin-top:40px;
font-size:50px;
position:relative;
&:before
content:'';
width:50px;
height:50px;
position:absolute;
top:0;
border-radius:50%;
box-shadow:0 0 0 3px #fff;
left:0;
top:0;
&:after
content:'';
position:absolute;
top:50%;
left:50%;
border:10px solid transparent;
border-left:14px solid #fff;
transform:translate(-50%,-50%);
margin-left:7px;
&:hover
cursor:pointer;
&:after
content:'';
border-left-color:color-hover1;
&:before
box-shadow:0 0 0 3px color-hover1;
//background:url(path-img+'play-icon.svg') no-repeat;
&__url
display:block;
width:100%;
height:100%;
position:absolute;
top:0;
.b-place-title
z-index:2;
position:relative;
width:700px;
margin:120px auto 0;
&__header
text-transform:uppercase;
&__description{
margin-top:40px;
line-height:1.6em;
}
.p-main
display:block;
//padding:70px 0 100px;
position:relative;
background: linear-gradient(to bottom, rgba(192,202,209,0.5) 0px,rgba(192,202,209,0) 29px);
&_ptop100
padding-top:100px;
View Compiled
$(function(){
$('.b-slogan__button-play').magnificPopup({
//delegate: '.b-slogan__url', // child items selector, by clicking on it popup will open
type: 'iframe',
tLoading: 'Loading video #%curr%...',
modal:false,
markup: '<div class="mfp-iframe-scaler">'+
'<iframe class="mfp-iframe" frameborder="0" allowfullscreen></iframe>'+
'</div>',
callbacks:{
open: function(){
$('.mfp-close').remove();//удаление старой кнопки
$('<button title="" type="button" class="mfp-close"></button>').appendTo('.mfp-container');
//var content = $(".mfp-iframe");
}
}
});
});