cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <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;
            
          
!
            
              $(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");
			}
		}
	});
});
            
          
!
999px
Loading ..................

Console