HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html>
tag. If you want to add classes there that can affect the whole document, this is the place to do it.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. If you need things in the <head>
of the document, put that code here.
The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.
CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.
It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.
To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit-
or -moz-
.
We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).
Any URLs added here will be added as <link>
s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.
You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.
You can also link to another Pen here (use the .css
URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
JavaScript preprocessors can help make authoring JavaScript easier and more convenient.
Babel includes JSX processing.
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.
You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.
If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.
You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
Search for and use JavaScript packages from npm here. By selecting a package, an import
statement will be added to the top of the JavaScript editor for this package.
Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.
All packages are different, so refer to their docs for how they work.
If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.
If active, Pens will autosave every 30 seconds after being saved once.
If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.
If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.
Visit your global Editor Settings.
<div class="wrapper">
<div class="phone">
<img class="phoneBody" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/153207/Iphone2.png">
<div class="mobileDisplay">
<div class="videoPlayer">
<iframe width="560" height="315" src="" frameborder="0" allowfullscreen></iframe>
</div>
<img class="mobileInfo" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/153207/iphoneHeader.png" alt="">
<div class="controls">
<!-- BAKC ICON -->
<svg class="mainBackIcon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 31.494 31.494"><path d="M10.273 5.01c.444-.445 1.143-.445 1.587 0 .43.428.43 1.142 0 1.57l-8.047 8.047h26.554c.62 0 1.127.492 1.127 1.11 0 .62-.508 1.128-1.127 1.128H3.813l8.047 8.032c.43.444.43 1.16 0 1.587-.444.444-1.143.444-1.587 0L.32 16.532c-.428-.43-.428-1.143 0-1.57l9.953-9.953z"/></svg>
<!-- ROCKET ICON -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M64 8.9c0-2.786-.794-4.99-2.36-6.55-6.284-6.26-22.806.396-37.62 15.16-.54.537-1.03 1.11-1.504 1.695-.155-.064-.334-.12-.54-.17C17.71 18.04 4.017 20.366.03 36.292c-.102.41.062.837.41 1.072.17.115.365.172.56.172.206 0 .412-.063.587-.19 5.41-3.925 9.75-5.504 13.54-4.923-.26.475-.527.938-.8 1.38-.246.395-.186.907.143 1.235l1.57 1.564-2.938 2.925c-.19.188-.294.443-.294.708 0 .266.105.52.294.708l9.83 9.798c.194.194.45.292.705.292.256 0 .51-.098.706-.292l2.94-2.932 1.574 1.57c.194.19.45.29.706.29.18 0 .363-.048.525-.148.413-.255.842-.502 1.284-.746.65 3.808-.926 8.176-4.914 13.638-.248.34-.257.8-.023 1.147.19.282.502.443.83.443.08 0 .162-.01.242-.03 15.94-3.963 18.296-17.61 17.313-21.865-.06-.26-.138-.464-.224-.645.636-.502 1.255-1.027 1.834-1.604C57.103 29.22 64 17.066 64 8.9zM16.058 30.55c-3.902-.824-8.19.32-13.28 3.56 2.504-6.947 7.065-10.23 10.643-11.775 2.683-1.158 5.125-1.483 6.687-1.483.42 0 .774.024 1.054.06L16.06 30.55zm7.58 18.068l-8.413-8.385 2.23-2.22 7.268 7.24 1.144 1.14-2.23 2.225zm17.895 1.955c-1.547 3.583-4.842 8.148-11.837 10.65 3.246-5.068 4.394-9.337 3.57-13.228l9.674-5.09c.174 1.315.047 4.3-1.407 7.668zm-6.844-5.708c-1.76.847-3.434 1.65-4.97 2.544L16.435 34.17c.718-1.23 1.38-2.562 2.052-3.94l4.06-7.667c.85-1.316 1.793-2.55 2.884-3.638C38.984 5.42 54.917-1.523 60.228 3.765 61.404 4.937 62 6.665 62 8.9c0 7.544-6.825 19.416-16.982 29.54-2.83 2.82-6.642 4.653-10.33 6.425z"/><path d="M42.725 12.853c-1.14 1.134-1.768 2.643-1.768 4.248 0 1.608.628 3.117 1.768 4.25 1.174 1.17 2.717 1.754 4.26 1.754 1.543 0 3.086-.585 4.26-1.754 1.14-1.133 1.767-2.642 1.767-4.25 0-1.604-.627-3.113-1.767-4.247-2.348-2.338-6.17-2.338-8.52 0zm7.11 7.08c-1.572 1.564-4.128 1.564-5.7 0-.76-.756-1.178-1.76-1.178-2.832 0-1.068.42-2.073 1.178-2.83.786-.78 1.818-1.172 2.85-1.172 1.033 0 2.064.39 2.85 1.173.76.757 1.177 1.762 1.177 2.83 0 1.072-.418 2.077-1.177 2.832zM16.465 47.147c-.39-.39-1.023-.39-1.414-.002l-9.994 9.962c-.39.39-.393 1.023-.002 1.414.195.198.45.295.708.295.255 0 .51-.097.706-.292l9.995-9.962c.39-.388.392-1.02.002-1.413zM5.725 51.973c.254 0 .51-.097.706-.292l6.583-6.56c.39-.39.39-1.022.002-1.413-.39-.392-1.023-.393-1.414-.002l-6.582 6.56c-.39.39-.39 1.023 0 1.415.194.196.45.293.707.293zM18.502 50.584l-6.582 6.56c-.39.39-.392 1.023-.002 1.414.195.197.45.294.708.294.255 0 .51-.097.706-.292L19.914 52c.39-.39.392-1.023.002-1.414-.39-.392-1.023-.393-1.414-.002z"/></svg>
<!-- DOTS -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 408 408"><path d="M51 153c-28.05 0-51 22.95-51 51s22.95 51 51 51 51-22.95 51-51-22.95-51-51-51zm306 0c-28.05 0-51 22.95-51 51s22.95 51 51 51 51-22.95 51-51-22.95-51-51-51zm-153 0c-28.05 0-51 22.95-51 51s22.95 51 51 51 51-22.95 51-51-22.95-51-51-51z"/></svg>
</div>
<div class="movie">
<svg class="trailerPlayButton" data-video="https://www.youtube.com/embed/8hYlB38asDY" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 489.8 489.8"><path d="M244.9 0C109.8 0 0 109.8 0 244.9s109.9 244.9 244.9 244.9c135.1 0 244.9-109.9 244.9-244.9C489.8 109.8 380 0 244.9 0zm0 455.5c-116.1 0-210.6-94.5-210.6-210.6S128.8 34.3 244.9 34.3s210.6 94.5 210.6 210.6S361 455.5 244.9 455.5z"/><path d="M375.9 230.5L200.1 117.7c-5.3-3.4-12-3.6-17.5-.6s-8.9 8.8-8.9 15v225.5c0 6.3 3.4 12 8.9 15 2.6 1.4 5.4 2.1 8.2 2.1 3.2 0 6.4-.9 9.3-2.7l175.8-112.7c4.9-3.2 7.9-8.6 7.9-14.4-.1-5.8-3-11.3-7.9-14.4zm-168 95.8V163.5l126.9 81.4-126.9 81.4z"/></svg>
</div>
<div class="movieDetails">
<div class="movieRating">
<!-- HEART -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 471.701 471.701"><path d="M433.6 67c-24.7-24.7-57.4-38.2-92.3-38.2s-67.7 13.6-92.4 38.3L236 80l-13.1-13.1c-24.7-24.7-57.6-38.4-92.5-38.4-34.8 0-67.6 13.6-92.2 38.2C13.5 91.4-.1 124.2 0 159.1c0 34.9 13.7 67.6 38.4 92.3l187.8 187.8c2.6 2.6 6.1 4 9.5 4 3.4 0 6.9-1.3 9.5-3.9l188.2-187.5c24.7-24.7 38.3-57.5 38.3-92.4.1-34.9-13.4-67.7-38.1-92.4zm-19.2 165.7l-178.7 178L57.4 232.4C37.8 212.8 27 186.8 27 159.1s10.7-53.7 30.3-73.2c19.5-19.5 45.5-30.3 73.1-30.3 27.7 0 53.8 10.8 73.4 30.4l22.6 22.6c5.3 5.3 13.8 5.3 19.1 0l22.4-22.4c19.6-19.6 45.7-30.4 73.3-30.4 27.6 0 53.6 10.8 73.2 30.3 19.6 19.6 30.3 45.6 30.3 73.3.1 27.7-10.7 53.7-30.3 73.3z"/></svg>
<span class="rating">7.9/10</span>
</div>
<div class="movieTitle">
<h1>IRON-MAN</h1>
<p>Marvel Studios</p>
</div>
<div class="movieDescription">
<a href="#" class="moreInfoBtn"><p>A billionaire industrialist and genius inventor, Tony Stark (Robert Downey Jr.), is conducting weapons tests overseas, but terrorists kidnap him to force him to build a devastating weapon. Instead, he builds an armored suit and upends his captors. Returning to America, Stark refines the suit and uses it to combat crime and terrorism.</p><p>A billionaire industrialist and genius inventor, Tony Stark (Robert Downey Jr.), is conducting weapons tests overseas, but terrorists kidnap him to force him to build a devastating weapon. Instead, he builds an armored suit and upends his captors. Returning to America, Stark refines the suit and uses it to combat crime and terrorism.</p><p>A billionaire industrialist and genius inventor, Tony Stark (Robert Downey Jr.), is conducting weapons tests overseas, but terrorists kidnap him to force him to build a devastating weapon. Instead, he builds an armored suit and upends his captors. Returning to America, Stark refines the suit and uses it to combat crime and terrorism.</p><p>A billionaire industrialist and genius inventor, Tony Stark (Robert Downey Jr.), is conducting weapons tests overseas, but terrorists kidnap him to force him to build a devastating weapon. Instead, he builds an armored suit and upends his captors. Returning to America, Stark refines the suit and uses it to combat crime and terrorism.</p><p>A billionaire industrialist and genius inventor, Tony Stark (Robert Downey Jr.), is conducting weapons tests overseas, but terrorists kidnap him to force him to build a devastating weapon. Instead, he builds an armored suit and upends his captors. Returning to America, Stark refines the suit and uses it to combat crime and terrorism.</p></a>
</div>
<div class="movieGenres">
<span class="genre">2008</span>
<span class="genre">SCI-FI</span>
<span class="genre">THRILLER</span>
<span class="movieLength">2h 06m</span>
</div>
</div>
<div class="checkout">
<a href="#" class="checkoutButton">PURCHASE £2.99</a>
</div>
<div class="checkoutForm">
<div class="paymentOption">
<svg xmlns="http://www.w3.org/2000/svg" class="creditCardButton" viewBox="0 0 31.494 31.494"><path d="M10.273 5.01c.444-.445 1.143-.445 1.587 0 .43.428.43 1.142 0 1.57l-8.047 8.047h26.554c.62 0 1.127.492 1.127 1.11 0 .62-.508 1.128-1.127 1.128H3.813l8.047 8.032c.43.444.43 1.16 0 1.587-.444.444-1.143.444-1.587 0L.32 16.532c-.428-.43-.428-1.143 0-1.57l9.953-9.953z"/></svg>
<div class="paymentSelecion">
<div class="paymentOptionCreditCard active">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512.16 512.16"><path d="M273.067 337.147H409.6c5.12 0 8.533-3.413 8.533-8.533v-76.8c0-5.12-3.413-8.533-8.533-8.533H273.067c-5.12 0-8.533 3.414-8.533 8.534v76.8c0 5.12 3.413 8.533 8.533 8.533zm8.533-76.8h119.467v59.733H281.6v-59.733zM42.667 226.213h68.267c5.12 0 8.533-3.413 8.533-8.533s-3.413-8.533-8.533-8.533H42.667c-5.12 0-8.533 3.413-8.533 8.533s3.413 8.533 8.533 8.533zM145.067 226.213h68.267c5.12 0 8.533-3.413 8.533-8.533s-3.413-8.533-8.533-8.533h-68.267c-5.12 0-8.533 3.413-8.533 8.533s3.413 8.533 8.533 8.533zM42.667 260.347H153.6c5.12 0 8.533-3.413 8.533-8.533s-3.413-8.533-8.533-8.533H42.667c-5.12 0-8.533 3.414-8.533 8.534s3.413 8.533 8.533 8.533zM213.333 243.28h-25.6c-5.12 0-8.533 3.413-8.533 8.533s3.413 8.533 8.533 8.533h25.6c5.12 0 8.533-3.413 8.533-8.533s-3.413-8.533-8.533-8.533z"/><path d="M504.32 137.467c-5.973-7.68-13.653-11.947-23.04-12.8l-20.48-2.482V81.147c0-18.773-15.36-34.133-34.133-34.133H34.133C15.36 47.014 0 62.374 0 81.147v273.068c0 15.413 10.357 28.518 24.453 32.718-.43 17.262 12.63 32.248 30.16 33.842l394.24 44.373h3.414c17.067 0 32.427-12.8 34.133-29.013l25.6-273.92c.853-8.534-1.707-17.92-7.68-24.747zm-487.253-30.72h426.667v51.2H17.067v-51.2zM34.133 64.08h392.533c9.387 0 17.067 7.68 17.067 17.067v8.533H17.067v-8.533c0-9.387 7.68-17.067 17.066-17.067zM17.067 354.213v-179.2h426.667v179.2c0 9.387-7.68 17.067-17.067 17.067H34.134c-9.387 0-17.067-7.68-17.067-17.067zM494.933 158.8l-25.6 273.92c-.853 9.387-9.387 16.213-18.773 15.36L57.173 403.707c-8.533-.853-14.507-7.68-15.36-15.36h384.853c18.773 0 34.133-15.36 34.133-34.133V138.32l19.626 1.707c4.267 0 8.533 2.56 11.093 5.973 2.56 3.413 4.267 8.533 3.413 12.8z"/></svg>
<span>Credit Card</span>
</div>
<div class="paymentOptionPaypal">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512.001 512"><path d="M440.316 65.388c12.85 6.288 24.047 15.243 32.252 26.24 17.268 23.15 22.117 54.687 14.418 93.734-7.78 39.513-25.21 72.868-50.584 97.022-4.64 4.852-9.61 9.373-14.902 13.54-27.178 21.4-61.498 32.714-99.254 32.714H202.218L169.935 480h-66.212l5.043-23.15h23.064l32.282-151.363h94.135c90.124 0 165.47-55.537 185.63-149.966C466.737 48.604 390.077 0 324.172 0H99.532L0 456.85h76.016L64 512h131.83l32.282-151.363h94.134c90.125 0 165.47-55.54 185.63-149.968 16.858-78.84-20.4-125.966-67.56-145.282zM211.172 93.042h64.566c32.295 0 53.8 27.77 44.393 62.478-8.065 34.72-41.692 62.488-75.32 62.488h-61.878l28.24-124.966z"/></svg>
<span>PayPal</span>
</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" class="payPalButton" viewBox="0 0 31.49 31.49"><path d="M21.205 5.007c-.43-.444-1.143-.444-1.587 0-.43.43-.43 1.143 0 1.57l8.047 8.048H1.11c-.618 0-1.11.493-1.11 1.112 0 .62.492 1.127 1.11 1.127h26.555l-8.047 8.032c-.43.444-.43 1.16 0 1.587.444.444 1.16.444 1.587 0l9.952-9.952c.444-.428.444-1.142 0-1.57l-9.952-9.953z"/></svg>
</div>
<form class="creditCardForm checkoutActive" method="" action="">
<div class="flipInputs">
<input type="text" name="cardNumber" id="cardNumber" maxlength="19" placeholder="1234 1234 1324 1234">
<label for="cardNumber">Card Number</label>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 612.069 612.069"><path d="M562.4 96.695H49.67C22.228 96.695 0 118.922 0 146.363v319.343c0 27.44 22.227 49.668 49.668 49.668H562.4c27.442 0 49.67-22.227 49.67-49.668V146.294c-.07-27.372-22.297-49.6-49.67-49.6zM49.67 124.067H562.4c11.87 0 22.228 9.604 22.228 22.227v41.504H27.44v-41.504c0-11.8 9.674-22.227 22.228-22.227zm534.96 131.167H27.44v-40.75H584.63v40.75zM562.4 487.864H49.67c-11.868 0-22.227-9.604-22.227-22.227V282.675H584.63V464.95c0 12.555-9.673 22.914-22.227 22.914zM520.897 356.01c0 7.41-5.9 13.31-13.31 13.31h-142.28c-7.408 0-13.308-5.9-13.308-13.31 0-7.408 5.9-13.308 13.31-13.308h141.525c7.41-.754 14.063 5.145 14.063 13.31zm0 72.582c0 7.41-5.9 13.31-13.31 13.31H426.09c-7.41 0-13.31-5.9-13.31-13.31s5.9-13.31 13.31-13.31h81.5c6.654 0 13.308 5.9 13.308 13.31z"/></svg>
</div>
<div class="flipInputs small">
<input type="text" name="expiryDate" id="expiryDate" placeholder="MM/YY">
<label for="expiryDate">Exp. Date</label>
</div>
<div class="flipInputs small">
<input type="text" name="cvvNumber" id="cvvNumber" maxlength="3" placeholder="***">
<label for="cvvNumber">CVV</label>
</div>
<div class="flipInputs">
<input type="text" name="nameInput" id="nameInput" placeholder="Tony Stark">
<label for="nameInput">Name</label>
</div>
</form>
<form class="payPalForm" method="" action="">
<div class="flipInputs">
<input type="email" name="payPalEmail" id="payPalEmail" placeholder="tony@starindustries.com">
<label for="payPalEmail">PayPal Email</label>
</div>
<div class="flipInputs">
<input type="password" name="payPalEmail" id="payPalEmail" placeholder="****************">
<label for="payPalEmail">PayPal Password</label>
</div>
</form>
</div>
</div>
</div>
<div class="disclaimer">
<a href="#" class="demoButton">Demo</a>
<p>I Found <a href="https://dribbble.com/shots/3102947-Sketching-Killing-boredom" target="_blank">this design on Dribble</a> a the description said 'Killing boredom', so I thought I would do the same by bringing his design to life.</p>
<p>Designed By</p>
<h3>Alex Salmerón</h3>
<div class="designerSocial">
<a href="http://www.mefaltaunpixel.es/" target="_blank"><img src="//image.flaticon.com/icons/png/128/12/12195.png" alt="Designer's Website"></a>
<a href="https://dribbble.com/Mefaltaunpixel" target="_blank"><img src="//cdn0.iconfinder.com/data/icons/shift-logotypes/32/Dribbble-128.png" alt="Designer's Dribble"></a>
<a href="https://twitter.com/mefaltaunpixel" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 410.155 410.155"><path d="M403.632 74.18c-9.113 4.04-18.573 7.23-28.28 9.537 10.696-10.164 18.738-22.877 23.275-37.067 1.295-4.05-3.105-7.554-6.763-5.385-13.504 8.01-28.05 14.02-43.235 17.862-.882.223-1.79.336-2.703.336-2.766 0-5.455-1.027-7.57-2.89C322.2 42.332 301.422 34.49 279.85 34.49c-9.336 0-18.76 1.456-28.015 4.326C223.163 47.71 201.04 71.36 194.1 100.54c-2.605 10.945-3.31 21.9-2.098 32.56.14 1.225-.44 2.08-.797 2.48-.627.704-1.516 1.107-2.44 1.107-.102 0-.208-.005-.313-.015-62.762-5.83-119.358-36.068-159.363-85.14-2.04-2.503-5.953-2.196-7.58.593C13.678 65.565 9.538 80.937 9.538 96.58c0 23.97 9.63 46.562 26.36 63.03-7.035-1.667-13.844-4.294-20.17-7.807-3.06-1.7-6.824.485-6.867 3.985-.438 35.612 20.412 67.3 51.646 81.57-.63.014-1.258.02-1.888.02-4.95 0-9.964-.477-14.898-1.42-3.446-.658-6.34 2.61-5.27 5.952 10.137 31.65 37.39 54.98 70 60.278-27.065 18.17-58.584 27.753-91.39 27.753l-10.226-.005c-3.15 0-5.816 2.054-6.62 5.106-.79 3.007.667 6.178 3.354 7.74 36.966 21.514 79.13 32.884 121.955 32.884 37.485 0 72.55-7.44 104.22-22.11 29.032-13.448 54.688-32.673 76.254-57.14 20.09-22.792 35.8-49.103 46.692-78.2 10.382-27.738 15.87-57.334 15.87-85.59v-1.346c0-4.537 2.05-8.806 5.63-11.712 13.586-11.03 25.416-24.014 35.16-38.59 2.574-3.85-1.484-8.674-5.718-6.796z" fill="#FFF"/></svg></a>
</div>
</div>
</div>
$lime: #00d1b3;
$grey: #999;
$open: 'Open Sans', sans-serif;
$bree: 'Cambo', serif;
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
h1,h2,h3{
font-family: $bree;
}
h4,h5,h6,p,span,a {
font-family: $open;
}
body{
background-color: $lime;
&.videoPlayback{
&:after{
background-color: rgba(0,0,0,0.9);
}
}
&:after{
transition: background-color 1s ease-in-out;
position: absolute;
content:"";
display: block;
z-index: 0;
width: 100%;
height: 100%;
background-color: rgab(0,0,0,0);
top: 0;
left: 0;
}
}
.wrapper{
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 1;
overflow: hidden;
}
.phone{
display: flex;
align-items: center;
justify-content: center;
zoom: 85%;
will-change: transform;
transform: rotate(0deg);
transition: transform 0.5s ease-in-out;
&.videoPlayback{
animation: 1s roatePhone ease-in-out forwards;
}
&.videoPlaybackReverse{
animation: 1s roatePhoneBack ease-in-out forwards;
}
}
.phoneBody{
position: relative;
width: 410px;
}
.mobileDisplay{
position: absolute;
width: 354px;
height: 630px;
background-color: black;
overflow: hidden;
.videoPlayer{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100;
transform-orign: 50% 50%;
transform: scale(0);
transition: transform 0.5s ease-in-out;
&.videoPlayback{
transform: scale(1);
}
&:hover ~ .controls.videoPlayback{
opacity: 1;
}
iframe{
transform-origin: 0% 0%;
transform: rotate(90deg) translateY(-113%) translateX(-0.5%) scale(1.13);
}
}
.mobileInfo{
display: block;
position: absolute;
top: 0;
width: 100%;
z-index: 2
}
.controls{
width: 100%;
height: 50px;
position: absolute;
top: 30px;
z-index: 10;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 10px 20px;
svg{
height: 100%;
fill: white;
opacity: 0.7;
transition: opacity 0.2s ease-in-out;
&:hover, &:active{
opacity: 1;
cursor: pointer;
}
}
&.videoPlayback {
z-index: 101;
background-color: rgba(0,0,0,0.8);
transform-origin: 100% 0%;
transform: rotate(90deg) translateX(135%) translateY(0px);
top: 0;
opacity: 0;
&:hover{
opacity: 1;
}
}
}
.movie{
width: 100%;
padding-top: 110%;
position: relative;
background: {
image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/153207/IronMan.jpg);
size: cover;
position: top center;
}
transition: padding-top 0.5s ease-in-out;
svg{
width: 17.5%;
position: absolute;
top: 50%;
left: 50%;
z-index: 3;
transform: translate(-50%,-50%);
fill: $grey;
opacity: 1;
transition: fill 0.3s ease-in-out, opacity 0.5s ease-in-out;
&:hover, &:active{
fill: white;
cursor: pointer;
}
}
&:before{
content: "";
width: 100%;
display: block;
height: 100%;
position: absolute;
top: 0;
z-index: 1;
background-color: rgba(0,0,0,0.4);
}
&:after{
content: "";
width: 100%;
display: block;
box-shadow: inset 0px -54px 100px black;
height: 100%;
position: absolute;
top: 0;
z-index: 2;
}
&.moreTextActive{
padding-top: 35%;
.trailerPlayButton{
opacity: 0;
}
}
&.checkoutActive{
padding-top: 82%;
.trailerPlayButton{
opacity: 0;
}
}
}
}
.movieDetails {
position: absolute;
z-index: 3;
bottom: 140px;
width: 100%;
padding: 0 20px;
min-height: 0px;
transition: 0.5s ease-in-out;
&.moreTextActive{
min-height: 430px;
bottom: 100px;
}
&.checkoutActive{
min-height: 340px;
}
.movieRating{
display: flex;
align-items: center;
margin-bottom: 10px;
svg{
width: 30px;
fill: red;
margin-right: 10px;
}
.rating{
color: $grey;
}
}
.movieTitle{
margin-bottom: 20px;
h1{
color: white;
letter-spacing: 3px;
font-size: 36px;
}
p{
color: white;
font-weight: 300;
letter-spacing: 1.2px;
font-size: 14px;
}
}
.movieDescription{
max-height: 90px;
overflow: hidden;
position: relative;
transition: 0.5s ease-in-out;
&:after{
content: "";
display: block;
width: 100%;
height: 100%;
box-shadow: inset 0px -10px 30px black;
z-index: 2;
position: absolute;
top: 0;
pointer-events: none;
opacity: 1;
transition: opacity 0.2s ease-in-out;
}
&.checkoutActive{
opacity: 0;
}
&.moreTextActive{
max-height: 310px;
overflow-y: scroll;
&:after{
opacity: 0;
}
a{
&:hover,&:active{
p{
color: $grey;
}
cursor: initial;
}
}
}
a{
text-decoration: none;
color: $grey;
&:hover, &:active{
p{
color: white;
}
cursor: pointer;
}
}
p{
transition: color 0.2s ease-in-out;
color: $grey;
letter-spacing: 1.8px;
font-weight: 300;
font-size: 12px;
line-height: 22px;
}
}
.movieGenres{
width: 100%;
position: absolute;
bottom: -40px;
transition: opacity 0.5s ease-in-out;
opacity: 1;
&.moreTextActive, &.checkoutActive{
opacity: 0;
}
.genre{
font-size: 12px;
padding: 2px 16px;
color: $grey;
border: 1px solid $grey;
border-radius: 10px;
margin-right: 10px;
transition: 0.3s ease-in-out;
&:hover,&:active{
background-color: white;
border-color: white;
color: black;
cursor: pointer;
}
}
.movieLength{
color: white;
font-weight: 300;
font-size: 12px;
}
}
}
.checkout{
position: absolute;
z-index: 10;
bottom: 0;
width: 100%;
padding: 20px;
.checkoutButton{
display: block;
width: 100%;
text-align: center;
background-color: $lime;
color: white;
// margin: 5%;
padding: 15px 0;
text-decoration: none;
letter-spacing: 2px;
font-weight: 300;
}
}
.checkoutForm{
position: absolute;
bottom: 90px;
width: 100%;
height: 280px;
z-index: 5;
padding: 0 20px;
overflow: hidden;
will-change: transform;
transition: transform 0.5s ease-in-out;
transform: translateY(150%);
&.checkoutActive{
transform: translateY(0%);
}
.paymentOption{
width: 100%;
height: 80px;
display: flex;
justify-content: space-around;
align-items: center;
> svg{
width: 40px;
fill: white;
display: block;
opacity: 0.4;
transition: opacity 0.2s ease;
&:hover{
cursor: pointer;
opacity: 1;
}
}
.paymentSelecion{
width: 130px;
height: 90%;
background-color: #333;
border: 2px solid $grey;
border-radius: 5px;
overflow: hidden;
> div {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
transition: 0.5s ease-in-out;
opacity: 0.75;
&.active{
transform: translateX(0);
opacity: 1;
}
}
svg{
width: 35px;
fill: $grey;
margin-bottom: 4px;
}
span{
color: white;
letter-spacing: 1.2px;
font-size: 12px;
font-weight: 300;
}
.paymentOptionCreditCard{
transform: translateX(-100%);
}
.paymentOptionPaypal{
position: relative;
top: -100%;
transform: translateX(100%);
}
}
}
> form{
width: 100%;
height: 190px;
background-color: black;
margin-top: 10px;
display: flex;
flex-wrap: wrap;
transition: transform 0.5s ease-in-out;
&.creditCardForm{
transform: translateX(calc(-100% - 20px));
}
&.payPalForm{
position: relative;
top: -200px;
transform: translateX(calc(100% + 20px));
}
&.checkoutActive{
transform: translateX(0);
}
.flipInputs{
display: flex;
flex-direction: column-reverse;
width: 100%;
margin-bottom: 10px;
height: 55px;
position: relative;
> svg{
position: absolute;
width: 25px;
bottom: 10px;
right: 0;
fill: white;
transition: fill 0.2s ease-in-out;
}
&.small{
width: 50%;
}
input{
webkit-appreance: none;
background: none;
border: none;
border-bottom: 1px solid $grey;
color: white;
font-family: $open;
font-size: 16px;
padding: 4px 0 10px;
letter-spacing: 2.2px;
&:focus{
outline: none;
+ label{
color: $lime;
}
~ svg{
fill: $lime;
}
}
}
label{
transition: color 0.2s ease-in-out;
color: $grey;
font-family: $open;
}
}
}
}
.disclaimer{
max-width: 300px;
float: left;
padding: 0px 30px;
text-align: center;
a{
color: black;
}
p{
margin-top: 20px;
}
.designerSocial{
display: flex;
align-items: center;
width: 100%;
a{
display: block;
width: calc(100% / 3);
padding: 22px;
img{
width: 100%;
}
}
}
}
.demoButton{
text-decoration: none;
padding: 5px 25px;
border: 1px solid black;
text-transform: capitalize;
transition: 0.1s ease-in-out;
&:hover{
background-color: black;
color: $lime;
}
}
@keyframes roatePhone{
0%{
transform: rotate(0deg);
}
75%{
transform: rotate(-90deg);
}
76%{
transform: rotate(-90deg) translateY(0%);
}
100%{
transform: rotate(-90deg) translateY(18%);
}
}
@keyframes roatePhoneBack{
0%{
transform: rotate(-90deg) translateY(18%);
}
25%{
transform: rotate(-90deg)translateY(0%);
}
26%{
transform: rotate(-90deg);
}
100%{
transform: rotate(0deg);
}
}
function isNumeric(val) {
if(val >= 48 && val <= 57){
return true;
}
return false;
}
$(document).ready(function(){
var backButtonAction = 'none';
function hideMoreText(){
$(".movie").removeClass("moreTextActive");
$(".movieDetails").removeClass("moreTextActive");
$(".movieDescription").removeClass("moreTextActive");
$(".movieGenres").removeClass("moreTextActive");
$(".checkoutButton").html("PURCHASE £2.99");
backButtonAction = 'none';
}
function hideVideo(bool){
if(bool === undefined){
bool = false;
}
$(".controls").removeClass("videoPlayback");
$(".videoPlayer").removeClass("videoPlayback");
if(!bool){
$(".phone").addClass("videoPlaybackReverse");
}
$(".phone").removeClass("videoPlayback");
setTimeout(function(){
$("body").removeClass("videoPlayback");
$(".videoPlayer iframe").attr("src","");
},500);
setTimeout(function(){
$(".phone").removeClass("videoPlaybackReverse");
},1500);
backButtonAction = 'none';
}
function hideCheckout(){
$(".movie").removeClass("checkoutActive");
$(".movieDetails").removeClass("checkoutActive");
$(".movieDescription").removeClass("checkoutActive");
$(".movieGenres").removeClass("checkoutActive");
$(".checkoutForm").removeClass("checkoutActive");
$(".checkoutButton").html("PURCHASE £2.99");
backButtonAction = 'none';
}
$(".moreInfoBtn").on("click",function(){
$(".movie").addClass("moreTextActive");
$(".movieDetails").addClass("moreTextActive");
$(".movieDescription").addClass("moreTextActive");
$(".movieGenres").addClass("moreTextActive");
$(".checkoutButton").html("READ LESS");
backButtonAction = 'moreText';
});
$(".checkoutButton").on("click",function(){
if(backButtonAction == "moreText"){
hideMoreText();
} else if(backButtonAction == "checkout"){
hideCheckout();
} else {
$(".movie").addClass("checkoutActive");
$(".movieDetails").addClass("checkoutActive");
$(".movieDescription").addClass("checkoutActive");
$(".movieGenres").addClass("checkoutActive");
$(".checkoutForm").addClass("checkoutActive");
$(".checkoutButton").html("PAY NOW £2.99");
backButtonAction = 'checkout';
}
});
$(".trailerPlayButton").on("click",function(){
var video = $(this).data("video");
$("body").addClass("videoPlayback");
$(".videoPlayer").addClass("videoPlayback");
$(".phone").addClass("videoPlayback");
$(".videoPlayer iframe").attr("src",video);
setTimeout(function(){
$(".controls").addClass("videoPlayback");
},500);
backButtonAction = 'video';
});
var sanitizedCardValue = "";
var cardNumCount = 0;
$("#cardNumber").on("keyup",function(e){
var thiis = $(this);
if(e.keyCode == 8 || e.keyCode == 46){
if(thiis.val() != ""){
e.preventDefault();
cardNumCount--;
var length;
if(cardNumCount == 0){
length = sanitizedCardValue.length - 2;
cardNumCount = 4;
} else {
length = sanitizedCardValue.length - 1;
}
sanitizedCardValue = sanitizedCardValue.substr(0,length);
thiis.val(sanitizedCardValue);
} else {
sanitizedCardValue = "";
cardNumCount = 0;
}
} else if(isNumeric(e.keyCode) && sanitizedCardValue.length <= 18){
var char = String.fromCharCode(e.keyCode);
if(cardNumCount >= 4){
sanitizedCardValue += " "+char;
cardNumCount = 0;
}else{
sanitizedCardValue += char;
}
thiis.val(sanitizedCardValue);
cardNumCount++;
} else {
thiis.val(sanitizedCardValue);
}
});
var sanitizedDateValue = "";
var dateNumCount = 0;
var bool = false;
$("#expiryDate").on("keyup",function(e){
var thiis = $(this);
if(e.keyCode == 8 || e.keyCode == 46){
if(thiis.val() != ""){
e.preventDefault();
dateNumCount--;
var length;
if(dateNumCount == 0){
length = sanitizedDateValue.length - 2;
dateNumCount = 2;
bool = false;
} else {
length = sanitizedDateValue.length - 1;
}
sanitizedDateValue = sanitizedDateValue.substr(0,length);
thiis.val(sanitizedDateValue);
} else {
sanitizedDateValue = "";
dateNumCount = 0;
}
} else if(isNumeric(e.keyCode) && sanitizedDateValue.length < 5){
var char = String.fromCharCode(e.keyCode);
if(dateNumCount == 1){
if(!bool){
bool = true;
dateNumCount = 0;
sanitizedDateValue += char+"/";
} else {
dateNumCount++;
sanitizedDateValue += char;
}
}else{
dateNumCount++;
sanitizedDateValue += char;
}
thiis.val(sanitizedDateValue);
} else {
thiis.val(sanitizedDateValue);
}
});
var sanitizedCvvValue = "";
var CVVNumCount = 0;
$("#cvvNumber").on("keyup",function(e){
var thiis = $(this);
if(e.keyCode == 8 || e.keyCode == 46){
if(thiis.val() != ""){
e.preventDefault();
CVVNumCount--;
var length = sanitizedCvvValue.length - 1;
sanitizedCvvValue = sanitizedCvvValue.substr(0,length);
thiis.val(sanitizedCvvValue);
} else {
sanitizedCvvValue = "";
cardNumCount = 0;
}
} else if(isNumeric(e.keyCode) && sanitizedCvvValue.length <= 2){
var char = String.fromCharCode(e.keyCode);
sanitizedCvvValue += char;
thiis.val(sanitizedCvvValue);
CVVNumCount++;
} else {
thiis.val(sanitizedCvvValue);
}
});
$(".creditCardButton").on("click",function(){
$(".paymentOptionCreditCard").addClass("active");
$(".paymentOptionPaypal").removeClass("active");
$(".creditCardForm").addClass("checkoutActive");
$(".payPalForm").removeClass("checkoutActive");
});
$(".payPalButton").on("click",function(){
$(".paymentOptionCreditCard").removeClass("active");
$(".paymentOptionPaypal").addClass("active");
$(".creditCardForm").removeClass("checkoutActive");
$(".payPalForm").addClass("checkoutActive");
});
$(".controls").on("click",".mainBackIcon",function(){
if(backButtonAction == "moreText"){
// HIDE MORE TEXT
hideMoreText();
} else if(backButtonAction == "video"){
// HIDE VIDEO
hideVideo();
} else if(backButtonAction == "checkout"){
// CLOSE CHECKOUT
hideCheckout()
}
});
$(".demoButton").on("click",function(){
hideMoreText();
hideVideo(true);
hideCheckout();
setTimeout(function(){
$(".moreInfoBtn").click();
},1500);
setTimeout(function(){
$(".mainBackIcon").click();
},3000);
setTimeout(function(){
$(".trailerPlayButton").click();
},4500);
setTimeout(function(){
$(".mainBackIcon").click();
},7000);
setTimeout(function(){
$(".checkoutButton").click();
},8500);
setTimeout(function(){
$(".payPalButton").click();
},10000);
setTimeout(function(){
$(".creditCardButton").click();
},11500);
setTimeout(function(){
$(".mainBackIcon").click();
},13500);
return false;
})
});
Also see: Tab Triggers