<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/PixelatedOre/pen/epyYeJ?depth=everything&order=popularity&page=9&q=movie&show_forks=false" />
<style class="cp-pen-styles">@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;
}</style></head><body>
<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>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script>
<script > 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++){if (window.CP.shouldStopExecution(1)){break;}
Fav[i].addEventListener('click',profiles,false);
}
window.CP.exitedLoop(1);
for(p = 0;p < playVideo.length; p++){if (window.CP.shouldStopExecution(2)){break;}
playVideo[p].addEventListener('click',trailer,false);
}
window.CP.exitedLoop(2);
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 (window.CP.shouldStopExecution(3)){break;}
if(att > i){
use[i].setAttribute('xlink:href','#icon-star-full');
}else{
use[i].setAttribute('xlink:href','#icon-star-empty');
}
}
window.CP.exitedLoop(3);
ty.innerHTML="THANKS FOR RATING " + att + "/5";
};
for(var i=0;i<star.length;i++){if (window.CP.shouldStopExecution(4)){break;}
star[i].addEventListener('click', rateing, false);
}
window.CP.exitedLoop(4);
//# sourceURL=pen.js
</script>
</body></html>
