123

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

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.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <svg>
<defs>
  <symbol id="icon-heart" viewBox="0 0 768 1024">
    <title>heart</title>
    <path class="path1" d="M384 864c399-314 384-425 384-512s-72-192-192-192-192 128-192 128-72-128-192-128-192 105-192 192-15 198 384 512z"></path>
  </symbol>
  <symbol id="icon-star-empty" viewBox="0 0 1024 1024">
    <title>star-empty</title>
    <path class="path1" d="M1024 397.050l-353.78-51.408-158.22-320.582-158.216 320.582-353.784 51.408 256 249.538-60.432 352.352 316.432-166.358 316.432 166.358-60.434-352.352 256.002-249.538zM512 753.498l-223.462 117.48 42.676-248.83-180.786-176.222 249.84-36.304 111.732-226.396 111.736 226.396 249.836 36.304-180.788 176.222 42.678 248.83-223.462-117.48z"></path>
  </symbol>
  <symbol id="icon-star-full" viewBox="0 0 1024 1024">
    <title>star-full</title>
    <path class="path1" d="M1024 397.050l-353.78-51.408-158.22-320.582-158.216 320.582-353.784 51.408 256 249.538-60.432 352.352 316.432-166.358 316.432 166.358-60.434-352.352 256.002-249.538z"></path>
  </symbol>
  <symbol id="icon-home" viewBox="0 0 1024 1024">
    <title>home</title>
    <path class="path1" d="M1024 590.444l-512-397.426-512 397.428v-162.038l512-397.426 512 397.428zM896 576v384h-256v-256h-256v256h-256v-384l384-288z"></path>
  </symbol>
  <symbol id="icon-users" viewBox="0 0 1152 1024">
    <title>users</title>
    <path class="path1" d="M768 770.612v-52.78c70.498-39.728 128-138.772 128-237.832 0-159.058 0-288-192-288s-192 128.942-192 288c0 99.060 57.502 198.104 128 237.832v52.78c-217.102 17.748-384 124.42-384 253.388h896c0-128.968-166.898-235.64-384-253.388z"></path>
    <path class="path2" d="M327.196 795.328c55.31-36.15 124.080-63.636 199.788-80.414-15.054-17.784-28.708-37.622-40.492-59.020-30.414-55.234-46.492-116.058-46.492-175.894 0-86.042 0-167.31 30.6-233.762 29.706-64.504 83.128-104.496 159.222-119.488-16.914-76.48-61.94-126.75-181.822-126.75-192 0-192 128.942-192 288 0 99.060 57.502 198.104 128 237.832v52.78c-217.102 17.748-384 124.42-384 253.388h279.006c14.518-12.91 30.596-25.172 48.19-36.672z"></path>
  </symbol>
  <symbol id="icon-circle-left" viewBox="0 0 1024 1024">
    <title>circle-left</title>
    <path class="path2" d="M669.256 317.256l-90.512-90.512-285.254 285.256 285.256 285.254 90.508-90.508-194.744-194.746z"></path>
  </symbol>
  <symbol id="icon-circle-right" viewBox="0 0 1024 1024">
    <title>circle-right</title>
    <path class="path2" d="M354.744 706.744l90.512 90.512 285.254-285.256-285.256-285.254-90.508 90.508 194.744 194.746z"></path>
  </symbol>
  <symbol id="icon-play" viewBox="0 0 1024 1024">
    <title>play</title>
    <path class="path1" d="M512 1024c-282.75 0-512-229.25-512-512 0-282.782 229.25-512 512-512s512 229.218 512 512c0 282.75-229.25 512-512 512zM512 128c-212.062 0-384 171.938-384 384s171.938 384 384 384 384-171.938 384-384-171.938-384-384-384zM384 320l320 192-320 192v-384z"></path>
  </symbol>
  <symbol id="icon-cross" viewBox="0 0 1024 1024">
    <title>cross</title>
    <path class="path1" d="M1014.662 822.66c-0.004-0.004-0.008-0.008-0.012-0.010l-310.644-310.65 310.644-310.65c0.004-0.004 0.008-0.006 0.012-0.010 3.344-3.346 5.762-7.254 7.312-11.416 4.246-11.376 1.824-24.682-7.324-33.83l-146.746-146.746c-9.148-9.146-22.45-11.566-33.828-7.32-4.16 1.55-8.070 3.968-11.418 7.31 0 0.004-0.004 0.006-0.008 0.010l-310.648 310.652-310.648-310.65c-0.004-0.004-0.006-0.006-0.010-0.010-3.346-3.342-7.254-5.76-11.414-7.31-11.38-4.248-24.682-1.826-33.83 7.32l-146.748 146.748c-9.148 9.148-11.568 22.452-7.322 33.828 1.552 4.16 3.97 8.072 7.312 11.416 0.004 0.002 0.006 0.006 0.010 0.010l310.65 310.648-310.65 310.652c-0.002 0.004-0.006 0.006-0.008 0.010-3.342 3.346-5.76 7.254-7.314 11.414-4.248 11.376-1.826 24.682 7.322 33.83l146.748 146.746c9.15 9.148 22.452 11.568 33.83 7.322 4.16-1.552 8.070-3.97 11.416-7.312 0.002-0.004 0.006-0.006 0.010-0.010l310.648-310.65 310.648 310.65c0.004 0.002 0.008 0.006 0.012 0.008 3.348 3.344 7.254 5.762 11.414 7.314 11.378 4.246 24.684 1.826 33.828-7.322l146.746-146.748c9.148-9.148 11.57-22.454 7.324-33.83-1.552-4.16-3.97-8.068-7.314-11.414z"></path>
  </symbol>
  <symbol id="icon-search" viewBox="0 0 973 1024">
	<title>search</title>
	<path class="path1" d="M960 832l-249.125-249.125c35.563-58.063 57.125-125.719 57.125-198.875 0-212.031-172-384-384-384-212.031 0-384 171.969-384 384 0 212 171.969 384 384 384 73.156 0 140.812-21.562 198.875-57l249.125 249c17.5 17.5 46.5 17.375 64 0l64-64c17.5-17.5 17.5-46.5 0-64zM384 640c-141.375 0-256-114.625-256-256s114.625-256 256-256 256 114.625 256 256-114.625 256-256 256z"></path>
</symbol>
</defs>
</svg>
<body>
<p class="disc">I do not own any of these images. No rights goes to me</p>
<div class="videoPlayer">
  <iframe width="100%" height="100%" src="https://www.youtube.com/embed/ej3ioOneTy8" class="videoH" frameborder="0" allowfullscreen></iframe>
  <div class="closeV"><svg class="iconC icon-cross">
    <use xlink:href="#icon-cross"></use>
    </svg></div>
</div>
<div class="background"></div>
<div class="arrowL arr"><svg class="icon icon-circle-left">
  <use xlink:href="#icon-circle-left"></use>
  </svg></div>
<div class="arrowR arr"><svg class="icon icon-circle-right">
  <use xlink:href="#icon-circle-right"></use>
  </svg></div>
    <div class="search">
      <h2>SEARCH FOR A MOVIE</h2>
  <input class="searchI" placeholder="SEARCH"></input>
  <div class="proclose"><svg class="iconpros icon-search"><use xlink:href="#icon-search"></use></svg></div>
  </div>
<div class="pro"><svg class="iconpro icon-search"><use xlink:href="#icon-search"></use></svg></div>
    <div class="closepro"><svg class="iconpros icon-search"><use xlink:href="#icon-cross"></use></svg></div>
<div class="PageCon">
  <div class="Page" data-myattribute="1">
    <div class="HeroImg">
      <div class="video"><svg class="icon icon-play">
        <use xlink:href="#icon-play"></use>
        </svg></div>
      <div class="Favorites"><svg class="icon icon-heart">
        <use xlink:href="#icon-heart"></use>
        </svg></div>
      <div class="imdb">8,4</div>
      <div class="fade"></div>
      <div class="triangleBottom"></div>
    </div>
    <div class="content">
      <h3>THE MARTIAN</h3>
      <p>During a manned mission to Mars, 
        Astronaut Mark Watney (Matt Damon) 
        is presumed dead after a fierce storm and 
        left behind by his crew.</p>
      <div class="rate">
        <div class="star" data-myattribute="1"><svg class="icon icons">
          <use class="uses" xlink:href="#icon-star-empty"></use>
          </svg></div>
        <div class="star" data-myattribute="2"><svg class="icon icons">
          <use class="uses" xlink:href="#icon-star-empty"></use>
          </svg></div>
        <div class="star" data-myattribute="3"><svg class="icon icons">
          <use class="uses" xlink:href="#icon-star-empty"></use>
          </svg></div>
        <div class="star" data-myattribute="4"><svg class="icon icons">
          <use class="uses" xlink:href="#icon-star-empty"></use>
          </svg></div>
        <div class="star" data-myattribute="5"><svg class="icon icons">
          <use class="uses" xlink:href="#icon-star-empty"></use>
          </svg></div>
      </div>
      <div class="ty">THANKS FOR RATING</div>
    </div>
  </div>
</div>
<div class="PageCon">
<div class="Page2" data-myattribute="2">
  <div class="HeroImg">
    <div class="video"><svg class="icon icon-play">
      <use xlink:href="#icon-play"></use>
      </svg></div>
    <div class="Favorites"><svg class="icon icon-heart">
      <use xlink:href="#icon-heart"></use>
      </svg></div>
    <div class="imdb">8,3</div>
    <div class="fade"></div>
    <div class="triangleBottom"></div>
  </div>
  <div class="content">
    <h3></h3>
    <p>A woman rebels against a tyrannical ruler in post apocalyptic Australia in search for her homeland with the help of a group of female prisoners, a psychotic worshiper, and a drifter named Max.</p>
    <div class="rate">
      <div class="star" data-myattribute="1"><svg class="icon icons">
        <use class="uses" xlink:href="#icon-star-empty"></use>
        </svg></div>
      <div class="star" data-myattribute="2"><svg class="icon icons">
        <use class="uses" xlink:href="#icon-star-empty"></use>
        </svg></div>
      <div class="star" data-myattribute="3"><svg class="icon icons">
        <use class="uses" xlink:href="#icon-star-empty"></use>
        </svg></div>
      <div class="star" data-myattribute="4"><svg class="icon icons">
        <use class="uses" xlink:href="#icon-star-empty"></use>
        </svg></div>
      <div class="star" data-myattribute="5"><svg class="icon icons">
        <use class="uses" xlink:href="#icon-star-empty"></use>
        </svg></div>
    </div>
    <div class="ty">THANKS FOR RATING</div>
  </div>
</div>
</body>
            
          
!
            
              @import url(https://fonts.googleapis.com/css?family=Roboto:900);
body {
	margin: 0 0 0 0;
	overflow: hidden;
}
svg {
	position: Absolute;
}
.background {
	background: #2ac3fb;
	-webkit-filter: blur(5px);
	background-size: cover;
	width: 110vw;
	height: 110vh;
	left: -5vw;
	top: -5vh;
	position: absolute;
	transition: background-image ease 1s;
}
.PageCon {
	width: 22vw;
	height: 30vw;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
}
.videoPlayer {
	width: 42vw;
	height: 27vw;
	box-shadow: 0px 0px 0px 0.5vw #FFF;
	background: #FFF;
	position: absolute;
	left: 0;
	right: 0;
	top: -160vw;
	transition: ease top 1s;
	bottom: 0;
	margin: auto;
	z-index: 99999999999;
}
.closeV {
	width: 5vw;
	position: relative;
	height: 5vw;
	margin-left: 42vw;
	margin-top: -27.5vw;
	background: #FFF;
}
.closeV .iconC {
	fill: #2ac3fb;
	width: 1vw;
	height: 1vw;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
}
.closeV:hover {
	background: #2ac3fb;
}
.closeV:hver .videoPlayer {
 box-shadow:0px 0px 0px 0.5vw #2ac3fb;
}
.closeV:hover .iconC {
	fill: #FFF;
}
.Page {
	transition: ease 1s;
	width: 22vw;
	top: 0;
	height: 32vw;
	background: white;
	position: absolute;
	z-index: 99999999;
	box-shadow: 0px 10px 21px rgba(0,0,0,0.16);
}
.Page2 {
	width: 22vw;
	height: 30vw;
	position: absolute;
	background: #FFF;
	top: 200vh;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	transition: ease 1s;
	box-shadow: 0px 10px 21px rgba(0,0,0,0.16);
}
.video {
	width: 22vw;
	height: 18vw;
	opacity: 0;
	background-size: cover;
	position: absolute;
	z-index: 99;
	transition: ease 0.5s;
}
.video .icon {
	width: 4vw;
	height: 4vw;
	fill: #FFF;
	margin: auto;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 3vw;
}
.HeroImg {
	width: 22vw;
	height: 18vw;
	background: url(http://t2conline.com/wp-content/uploads/2015/08/5851.jpg);
	background-size: cover;
	position: relative;
}
.HeroImg:hover .video {
	background: rgba(0,0,0,0.5);
	opacity: 1;
}
.triangleBottom {
	width: 0;
	position: absolute;
	bottom: 20vh;
	height: 0;
	bottom: 0;
	border-top-width: 5vw;
	border-top-style: solid;
	border-top-color: transparent;
	border-right-width: 22vw;
	border-right-style: solid;
	border-right-color: white;
	z-index: 0;
	z-index: 9999;
}
.Favorites, .imdb {
	width: 4vw;
	height: 4vw;
	border-radius: 50%;
	background: #2ac3fb;
	position: absolute;
	left: -2vw;
	top: -2vw;
	margin: auto;
	z-index: 99999999;
	box-shadow: 0px 4px 7px rgba(0,0,0,0.39);
	transition: ease .5s;
}
.imdb {
	left: 0;
	bottom: .5vw;
	z-index: 99999;
	right: 0;
	top: auto;
	background: #2ac3fb;
	margin: auto;
	color: #FFF;
	text-align: center;
	line-height: 4vw;
	font-family: 'Roboto', sans-serif;
	font-size: 1.2vw;
}
.Favorites:hover .icon-heart {
	width: 2vw;
	height: 2vw;
	left: 0;
	right: 0;
	bottom: 0vw;
	top: 0.2vw;
}
.Favorites .icon-heart {
	width: 1.8vw;
	height: 1.8vw;
	fill: #FFF;
	left: 0;
	right: 0;
	bottom: 0vw;
	top: 0.2vw;
	margin: auto;
	position: absolute;
	z-index: 9999;
}
.content {
	height: 14vw;
	width: 22vw;
}
.content h3 {
	text-align: center;
	color: #191919;
	font-family: 'Roboto', sans-serif;
	font-size: 1.6vw;
	margin-top: 0.7vw;
}
.content p {
	font-family: 'Roboto', sans-serif;
	font-size: 0.8vw;
	text-align: center;
	margin: 0 auto;
	width: 18vw;
	height: 2.5vw;
}
.rate {
	width: 20vw;
	height: 8vw;
	margin: 2vw auto;
}
.star {
	width: 2vw;
	height: 2vw;
	background: #FFF;
	float: left;
	margin: 0 1vw 0 1vw;
}
.star .icon {
	width: 2vw;
	height: 2vw;
	fill: #2ac3fb;
	transition: ease .5s;
}
.pages {
	width: 22vw;
	height: 32vw;
	position: Absolute;
	overflow: hidden;
}
.Expand {
	width: 4vw;
	height: 4vw;
	background: #FFF;
	border-radius: 50%;
	position: absolute;
	z-index: 99;
	top: 1vw;
	opacity: 1;
	left: 9vw;
	transition: width ease 1s, height ease 1s, left ease 1s, top ease 1s;
}
.ty {
	font-family: 'Roboto', sans-serif;
	font-size: 1.2vw;
	text-align: center;
	color: #191919;
	position: Absolute;
	left: 0;
	opacity: 0;
	transition: ease 0.3s;
	right: 0;
	margin: auto;
	bottom: 0.8vw;
}
.star:hover {
	transform: scale(1.3, 1.3);
}
.pro{
	width: 4vw;
	height: 4vw;
	border-radius: 50%;
	background:#2ac3fb;
	background-size: cover;
	position: Absolute;
	right: 1vw;
	top: 1vw;
	box-shadow: 0px 4px 7px rgba(0,0,0,0.39);
		z-index: 999999999;
		transition:ease .5s;
}
.closepro{
	width: 4vw;
	height: 4vw;
	border-radius: 50%;
	background:#FFF;
	background-size: cover;
	position: Absolute;
	right: 1vw;
	top: 1vw;
	box-shadow: 0px 4px 7px rgba(0,0,0,0.39);
		z-index: 99999999;
		opacity:0;
		transition:ease .5s;
}
.closepro .iconpros{
	width:1.5vw;
	height:1.5vw;
	fill:#2ac3fb;
	position:absolute;
	left:0;
	right:0;
	top:0;
	bottom:0;
	margin:auto;
	}
.proclose{
	width: 8.2vw;
	height: 8.2vw;
	background:transparent;
	background-size: cover;
	position: Absolute;
	right:0vw;
	top:4.2vw;
	left:45vw;
	bottom:0;
	margin:auto;
		z-index: 99999999;
}
.pro .iconpro{
	width:1.5vw;
	height:1.5vw;
	fill:#FFF;
	position:absolute;
	left:0;
	right:0;
	top:0;
	bottom:0;
	margin:auto;
	}
.proclose .iconpros{
	fill:#FFF;
	width:3vw;
	height:3vw;
	position:absolute;
	left:0;
	right:0;
	top:0;
	bottom:0;
	margin:auto;
	}	
.proclose:hover{
	background:#FFF;
	}	
.proclose:hover .iconpros{
	fill:#2ac3fb;
	}		
.pro:hover{
	box-shadow: 0px 7px 7px rgba(0,0,0,0.39);
	}
.hearted {
	width: 3vw;
	height: 3vw;
	border-radius: 50%;
	background: #d46060;
	background-size: cover;
	position: Absolute;
	right: 2vw;
	top: 2vw;
	box-shadow: 0px 4px 7px rgba(0,0,0,0.39);
	color: #FFF;
	transition: ease .5s;
}
.hearted .icon {
	fill: #FFF;
	width: 1.4vw;
	height: 1.4vw;
	position: absolute;
	left: 0vw;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
}
.hearted:hover {
	background: #ae5555;
}
.1 {
	position: absolute;
	left: 12vw;
	z-index: 99;
	transform: scale(0.7, 0.7);
}
.arr {
	position: absolute;
	left: 30vw;
	right: 0;
	top: 0;
	bottom: 0;
	width: 6vw;
	height: 6vw;
	margin: auto;
	text-shadow: 0px 5px 6px rgba(0,0,0,0.2);
}
.arr .icon {
	-webkit-filter: drop-shadow(0px 5px 6px rgba(0,0,0,0.2));
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	width: 6vw;
	height: 6vw;
	margin: auto;
	fill: #FFF;
	transition: ease 0.2s;
}
.arr .icon:hover {
	fill: #2ac3fb;
}
.arrowL {
	left: -40vw;
}
.arrowR {
	left: 40vw;
}
.disc {
	position: absolute;
	bottom: 0;
	left: 1vw;
	z-index: 9999999999;
	color: #FFF;
	font-size: 0.7vw;
	font-family: 'Roboto', sans-serif;
}
.search{
	position:Absolute;
	z-index:999999999999999999999999;
	width:45vw;
	height:15vw;
	left:0;top:5vw;right:0;bottom:0;
	margin:auto;
	background:#2ac3fb;
	opacity:0;
	display:none;
	transition:ease 1s;
	}
.searchI{
	width:45vw;
	height:8vw;
	background:transparent;
	border:none;
	border-bottom:0.2vw solid #FFF;
	font-size:7vw;
	font-family: 'Roboto', sans-serif;
	color:#FFF
	}
.search h2{
	font-size:2vw;
	font-family: 'Roboto', sans-serif;
	color:#FFF
	}	
.searchI:focus{
	outline:none;
	}	
::-webkit-input-placeholder	{
	color:#FFF;
	}
            
          
!
            
              	var heart = document.getElementsByClassName('icon-heart');
var star= document.getElementsByClassName("star");
var use = document.getElementsByClassName('uses');
var Fav = document.getElementsByClassName('Favorites');
var Expand = document.getElementsByClassName('Expand')[0];
var ty = document.getElementsByClassName('ty')[0];
var Pro = document.getElementsByClassName('pro')[0];
var Ipro = document.getElementsByClassName('iconpro')[0];
var menuI = document.getElementsByClassName('hearted');
var Page = document.getElementsByClassName('Page')[0];
var Page2 = document.getElementsByClassName('Page2')[0];
var pageCon =  document.getElementsByClassName('PageCon')[0];
var leftA = document.getElementsByClassName('arrowL')[0];
var rightA = document.getElementsByClassName('arrowR')[0];
var BG = document.getElementsByClassName('HeroImg');
var h3 = document.getElementsByTagName('h3');
var imdb = document.getElementsByClassName('imdb');
var background= document.getElementsByClassName('background');
var videoH= document.getElementsByClassName('videoPlayer')[0];
var videoE = document.getElementsByClassName('closeV')[0];
var playVideo = document.getElementsByClassName('Video');
var iframe = document.getElementsByClassName('videoH')[0];
var searchs = document.getElementsByClassName('search')[0];
var proclose = document.getElementsByClassName('proclose')[0];
var closepro = document.getElementsByClassName('closepro')[0];
document.addEventListener('DOMContentLoaded', function() {
    start();
}, false);
Pro.addEventListener('click',menu,false);
closepro.addEventListener('click',menudown,false);
leftA.addEventListener('click',left,false);
rightA.addEventListener('click',right,false);
videoE.addEventListener('mouseover',videoOver,false);
videoE.addEventListener('mouseleave',videoOff,false);
videoE.addEventListener('click',videoC,false);
var films = new Array("THE MARTIAN","THE MAZE RUNNER","INTERSTELLAR","THE WALK","INSIDE OUT","KINGSMAN","EDGE OF TOMORROW","JAMES BOND, SPECTRE");
var fullbg = new Array("https://i.imgur.com/SJeJpyt.png","https://i.imgur.com/1l9Wsfg.png","https://i.imgur.com/J52ELal.png","https://i.imgur.com/l4z6xXd.png","https://i.imgur.com/1vML5IK.png","https://i.imgur.com/zekn1FL.png","https://i.imgur.com/2UZuGl5.png","https://i.imgur.com/3SjXfIy.png");
var rate = new Array("8.7","6.8","8.7","7.9","8.5","7.8","7.9","NONE");
var favoriteA = new Array("#d46060","#d46060","#d46060","#d46060","#d46060","#d46060","#d46060","#d46060");
var trailerMovie = new Array("https://www.youtube.com/embed/ej3ioOneTy8","https://www.youtube.com/embed/AwwbhhjQ9Xk","https://www.youtube.com/embed/zSWdZVtXT7E","https://www.youtube.com/embed/4W6byFcD5uE","https://www.youtube.com/embed/seMwpP0yeu4","https://www.youtube.com/embed/kl8F-8tR8to","https://www.youtube.com/embed/vw61gCe2oqI","https://www.youtube.com/embed/LTDaET-JweU");
var video = new Array("8.7","6.8","8.7","7.9","8.5","7.8","7.9","NONE");
var filmsBG = new Array("http://t2conline.com/wp-content/uploads/2015/08/5851.jpg","http://mazerunnerguide.com/wp-content/uploads/2014/08/The-Maze-Runner.jpg","https://www.wired.com/wp-content/uploads/2014/10/ut_interstellar2_f.png","http://cdn1-www.comingsoon.net/assets/uploads/2015/06/TheWalkBanner.jpg","http://moviecitynews.com/wp-content/uploads/2015/06/inside-out-651.jpg","http://kulturbloggen.com/wp-content/uploads/2015/01/Kingsman6.jpg","http://www.blackvibes.com/images/blogs/12-2013/27613-tom-cruise-stars-summ.jpg","http://kulturbloggen.com/wp-content/uploads/2015/07/spectre.jpg");
var filmsA = -1;
var up = -100;
var down = 100;
var clicked = 0;
var clickedP = 0;
var menuplus = -1;
var margin = 0;
var attri = 0;
var end = 0;
var startR = -1;
for(i = 0;i < playVideo.length; i++){
	Fav[i].addEventListener('click',profiles,false);
	}
for(p = 0;p < playVideo.length; p++){
	playVideo[p].addEventListener('click',trailer,false);
	}
function trailer(){
	videoH.style.top="0vw";
	}
function videoC(){
	videoH.style.top="-170vw";
	}
function videoOff(){
	videoH.style.boxShadow="0px 0px 0px 0.5vw #FFF";
	}
function videoOver(){
	videoH.style.boxShadow="0px 0px 0px 0.5vw #2ac3fb";
	}			
function start(){
	filmsA++;
				h3[0].innerHTML=films[filmsA];	
			BG[0].style.background="url("+ filmsBG[filmsA] +")";	
			BG[0].style.backgroundSize="cover";
						imdb[1].innerHTML=rate[filmsA];	
			background[0].style.background="url("+ fullbg[filmsA] +")";
			background[0].style.backgroundSize="cover";	
	}
	function left(){
		if(end < 7){
			end ++;
							rightA.style.opacity="1";
		if(clickedP == 0){
		clickedP = 1;
		filmsA ++;
		Page2.style.transition="ease 0s";
		Page.style.top= "-100vh";
		Page2.style.top= "200vh";
		    setTimeout(function () {
				Page2.style.transition="ease 1s";
			Page2.style.top= "0vh";
			Fav[1].style.background="#2ac3fb";
			h3[1].innerHTML=films[filmsA];	
			BG[1].style.background="url("+ filmsBG[filmsA] +")";	
			BG[1].style.backgroundSize="cover";
						imdb[1].innerHTML=rate[filmsA];	
			background[0].style.background="url("+ fullbg[filmsA] +")";
			background[0].style.backgroundSize="cover";	
			iframe.src=trailerMovie[filmsA];		
    }, 300);
		}else if(clickedP == 1){
			clickedP = 0;
			filmsA ++;
			Page.style.transition="ease 0s";
			Page.style.top= "100vh";
			Page2.style.top= "-200vh";
					    setTimeout(function () {
				Page.style.transition="ease 1s";
			Page.style.top= "0vh";
				   Page.style.transition="ease 1s";
			Page.style.top= "0vh";
			Fav[0].style.background="#2ac3fb";
			h3[0].innerHTML=films[filmsA];
			BG[0].style.background="url("+ filmsBG[filmsA] +")";
			BG[0].style.backgroundSize="cover";	
			imdb[0].innerHTML=rate[filmsA];		
			background[0].style.background="url("+ fullbg[filmsA] +")";
			background[0].style.backgroundSize="cover";
			iframe.src=trailerMovie[filmsA];	
    }, 300);
			}
		}else{
			leftA.style.opacity="0";
			}
		}
	function right(){
		if(end > 0){
			end --;
			leftA.style.opacity="1";
		if(clickedP == 0){
		clickedP = 1;
		filmsA --;
		Page2.style.transition="ease 0s";
		Page.style.top= "100vh";
		Page2.style.top= "-200vh";
		    setTimeout(function () {
				Page2.style.transition="ease 1s";
			Page2.style.top= "0vh";
			h3[1].innerHTML=films[filmsA];	
			BG[1].style.background="url("+ filmsBG[filmsA] +")";	
			BG[1].style.backgroundSize="cover";
						imdb[1].innerHTML=rate[filmsA];	
			background[0].style.background="url("+ fullbg[filmsA] +")";
			background[0].style.backgroundSize="cover";		
			iframe.src=trailerMovie[filmsA];		
    }, 300);
		}else if(clickedP == 1){
			clickedP = 0;
			filmsA --;
			Page.style.transition="ease 0s";
			Page.style.top= "-100vh";
			Page2.style.top= "200vh";
					    setTimeout(function () {
				Page.style.transition="ease 1s";
			Page.style.top= "0vh";
				   Page.style.transition="ease 1s";
			Page.style.top= "0vh";
			h3[0].innerHTML=films[filmsA];
			BG[0].style.background="url("+ filmsBG[filmsA] +")";
			BG[0].style.backgroundSize="cover";	
			imdb[0].innerHTML=rate[filmsA];		
			background[0].style.background="url("+ fullbg[filmsA] +")";
			background[0].style.backgroundSize="cover";	
			iframe.src=trailerMovie[filmsA];	
    }, 300);
			}
				}else{
			rightA.style.opacity="0";
			}
		}		
function menu(){
	this.style.width="250vw";
	this.style.height="250vw";
	this.style.right="-125vw";
	this.style.top="-125vw";
	Ipro.style.opacity="0";
	searchs.style.display="block";
	closepro.style.zIndex="9999999999999999";
	setTimeout(function(){
	searchs.style.opacity="1";
	searchs.style.top="0";
	closepro.style.opacity="1";
	},800);
	}
function menudown(){
	searchs.style.opacity="0";
	searchs.style.top="5vw";
	closepro.style.opacity="0";
		setTimeout(function(){
		Pro.style.width="4vw";
	Pro.style.height="4vw";
	Pro.style.right="1vw";
	Pro.style.top="1vw";
	Ipro.style.opacity="1";
	searchs.style.display="none";
	closepro.style.zIndex="99999";
		},800);
	}	
function profiles(){
	this.style.background="#d46060";
	};
var rateing = function() {
			ty.style.opacity="1";
			var att = this.getAttribute("data-myattribute");
			for(var i = 0; i < star.length; i++){
				if(att > i){
				use[i].setAttribute('xlink:href','#icon-star-full');
				}else{
					use[i].setAttribute('xlink:href','#icon-star-empty');
					}
				}
						ty.innerHTML="THANKS FOR RATING " + att + "/5";
};

for(var i=0;i<star.length;i++){
    star[i].addEventListener('click', rateing, false);
}
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console