Pen Settings

HTML

About HTML Preprocessors

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.

Learn more · Versions

Adding Classes

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.

About the <head>

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.

!
Insecure Resource

The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.

CSS

About CSS Preprocessors

CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.

Learn more · Versions

CSS Base

About CSS Base

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.

Vendor Prefixing

About Vendor Prefixing

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).

Add External Stylesheets/Pens

Any URL's 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 it's URL and the proper URL extention.

Powered by Algolia
About External Resources

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.

Learn more

+ add another resource

JavaScript

About JavaScript Preprocessors

JavaScript preprocessors can help make authoring JavaScript easier and more convenient.

Learn more · Versions

Babel includes JSX processing.

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.

Powered by Algolia
About External Resources

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.

Learn more

+ add another resource

Packages

Add Packages

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.

Powered by Algolia
About Packages

Using packages here is powered by Skypack, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ES6 import 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.

Behavior

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML 

              
                section.card
    div.info
        ul.info-list
            li.current
                img(src="https://cdn.arnellebalane.com/images/codepen-day85/artwork-1.jpg", alt="The Marcian") 
                h1 The Martian
                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.
                span.rating 9.1
            li
                img(src="https://cdn.arnellebalane.com/images/codepen-day85/artwork-2.jpg", alt="Interstellar")
                h1 Interstellar
                p A team of explorers travel through a wormhole in space in an 
                  | attempt to ensure humanity's survival.
                span.rating 8.3
            li
                img(src="https://cdn.arnellebalane.com/images/codepen-day85/artwork-3.jpg", alt="Gravity")
                h1 Gravity
                p An astronaut out of three is taken into a series of debris and 
                  | starts orbiting around the Earth. She will have to stay extremely 
                  | strong in order to keep her sanity.
                span.rating 7.9
    footer.actions
        span.rating-container
        button.cart Book Movie
        ul.navigation
            li.current
            li
            li

    form.booking-form
        button.cancel Cancel
        p.input IMAX 3D
        p.input Monday, 21
            sup st 
            | September - 18:00
        p.input 6 Adults
        div.seats
            header
                label.legend
                    span.seat
                    span.legend-label Available
                label.legend
                    span.seat.taken
                    span.legend-label Taken    
            ul.seats-container
                li.seats-row
                    - var i = 0
                    while i++ < 3
                        button.seat(type="button")
                - var i = 0
                while i++ < 6
                    li.seats-row
                        - var j = 0
                        while j++ < 7
                            button.seat(type="button")
        footer
            label.total-label Total
            p.total-price $56.90
            button.submit-button Checkout
!

CSS 

              
                /** Base Styles **/
*
*::before
*::after
    margin 0
    padding 0
    box-sizing border-box


html
    font-size 62.5%


body
    display flex
    justify-content center
    align-items center
    height 100vh
    font-family "Proxima Nova", "Myriad Pro", sans-serif
    -webkit-font-smoothing antialiased
    -moz-osx-font-smoothing grayscale
    color #333
    background url("https://cdn.arnellebalane.com/images/codepen-day85/background.jpg") center center no-repeat
    background-size cover


ul
    list-style none


button
    border none
    appearance none
    background none
    outline none


/** Card Styles **/
.card
    width 38rem
    height 64rem
    position relative
    border-radius 0.5rem
    background #fff top center no-repeat
    background-size cover
    box-shadow 0 0.2rem 8.4rem 0 rgba(0, 0, 0, 0.5)
    overflow hidden
    transition background-image 500ms ease-out

    &::before
    &::after
        content ""
        position absolute
        top 0
        left 0
        right 0
        bottom 0
        border-radius 0.5rem

    &::before
        background-color #21313c
        clip-path polygon(0 30%, 100% 48%, 100% 100%, 0% 100%)
        mix-blend-mode overlay

    &::after
        background-color #393a3d
        clip-path polygon(0 44%, 100% 62%, 100% 100%, 0% 100%)
        opacity 0.7


.card .info
    width 100%
    height 23rem
    padding 5rem 0 4rem 0
    position absolute
    bottom 0
    z-index 1
    text-align center
    background-color #fff

    &::before
        content ""
        height 8rem
        position absolute
        left -1px
        right 0
        bottom calc(100% - 1px)
        background-color #fff
        clip-path polygon(0 100%, 100% 0, 100% 100%)


.card .info .info-list
    position relative


.card .info li
    padding 0 4rem
    position absolute
    top 0
    left 0
    right 0
    visibility hidden
    opacity 0
    transform translateX(100%)
    transition transform 500ms ease-out,
        visibility 0s ease-out 500ms,
        opacity 500ms ease-out

    &.current
        visibility visible
        opacity 1
        transform translateX(0)
        transition transform 500ms ease-out,
            visibility 0s ease-out 0s,
            opacity 500ms ease-out

    &.move-left
        transform translateX(-100%)


.card .info img
    display none


.card .info h1
    margin-bottom 1.8rem
    font-size 3rem
    font-weight normal


.card .info p
    font-size 1.6rem
    color #999

.card .info .rating
    display none


.card .actions
    position absolute
    left 0
    right 0
    bottom 0
    z-index 1
    background-color #fff
    box-shadow 0 0 3rem rgba(255, 255, 255, 1);


.card .actions .rating-container
    width 10rem
    height 10rem
    position absolute
    right 10rem
    bottom 20.5rem
    font-size 2.4rem
    text-align center
    line-height 10rem
    background-color #fff
    box-shadow 0 0.9rem 3.2rem rgba(56, 52, 57, 0.35)


.card .actions .cart
    width 12rem
    border none
    appearance none
    position absolute
    left 8rem
    bottom 21.5rem
    text-indent -100rem
    line-height 12rem
    background #1e1f22 url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAhCAYAAAHGyjm9AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAuxJREFUeNpi/PPnDwM6YILS/4HYC0r/Z4EKMkIVgGg5RnzaQeAdELOBGAABhKGSBYn9H91WRmQBRhjNhGbRRIAAAhkKcuBWIP4NswkdINssBsQvkYyEOwCbR/6jG8TEgB2ATJsI4wAEEMwkRiwmoHj+P5r3sCoCSTojBcp/fL77j81n6A5nwuUuFixeR1aYhq4Ip+PRw2kCNhPRTSpDMu09TBAggEC+ewakJZEUigDxWwYSAchJUlAbYLa8AWI7JDXPYEkdH2bCEgCgCDgIxJVQMWSL0PEaqJp1DKCIw4IfAvF/IN6CQx6EU6FqXoP4WPMgFKwH4gAgfgrEMmhyckD8EDka8RkEAoFgZ2MHKBYQMoikWMMH3iLFDD4xBoAAQnYR3oxJjItgpv9DTqnkGPQCiS8AxGrkGiQJ9VYSVOwmlkKAEH6GHNjzkdgxSOwXRDhoCXr0awHxVUKFHZbCB6O8vQbEn6DsaQQM6YDSF3ElSA4g/k6Eq2Cu4QKpx5YgfwDxGSj7PA5DHKD0H5il+LIIzEZuIP6GJvcbWnI6AvEBQllkMpT+iiW6YcXvAWIzLagmF8Qh5w3E2+ie+6lmECxMOgiIEfTaf6SwEsYjRtBFk6BFiyQBMQaAAAO5yBNIz0WXgCpOhlYCdAPYamxsvsunl4OYsFTI3NDaHgby8NRsIOBJbOuAUBkLMgtXIgI59CwQGyCJgcoVMyz1FaEQJgW8JJSqt0BzOAw8AmJ1aMFHKQAVjPuR+CCHKBPKHT5APAOtJfMS2rqnBIDM2Y0m5gryMDElUSYQVyPx+aCtIk0yHcMJTQ4saE3wA6QUjW1AHIvWxr8G7VKQCo5B294w0A3Es8kt9O2Rqx4oSEJreOADoGZ0MBJ/HRqfrFoI1P66AsSsFKaji2i5mKJqEVRn3IE2EMkBr4FYHqmtQ7GDaFp1DCoHUdIAYYOOCbyFVv0TcQxPEKuO4hACWSCEpU0nTKY6ikNoMRaxORSoAwMA379EywQmkkQAAAAASUVORK5CYII=") center center no-repeat
    box-shadow 0 0.9rem 3.2rem rgba(40, 43, 41, 0.56)
    overflow hidden
    cursor pointer
    transition background-color 200ms ease-out

    &:hover
    &:focus
        background-color lighten(#1e1f22, 5%)

    &:active
        background-color darken(#1e1f22, 5%)
        transition none


.card .navigation
    display flex
    justify-content center
    align-items center
    height 4rem


.card .navigation li
    width 0.7rem
    height 0.7rem
    margin 0 0.2rem
    border-radius 50%
    background-color #ccc
    cursor pointer

    &.current
        background-color #1e1f22


/** Booking Form Styles **/
.booking-form
    padding 5rem 3rem 3rem 3rem
    position absolute
    top 0
    left 0
    right 0
    bottom 0
    z-index 1
    border-radius 0.5rem
    background-color #fff
    overflow hidden
    transform translateY(100%)
    transition transform 250ms ease-in

    &.visible
        transform translateY(0)
        transition transform 350ms ease-out


.booking-form .cancel
    width 5rem
    height 1rem
    position absolute
    top 2rem
    left calc(50% - 2.5rem)
    font-size 0
    cursor pointer
    opacity 0.5
    transition opacity 250ms ease-out

    &:hover
        opacity 1

    &::before
    &::after
        content ""
        width 2.5rem
        border-top 2px solid #ccc
        position absolute
        top 0
        left 50%
        border-radius 2px
        transform-origin left center

    &::before
        transform translateX(-1px) rotate(20deg)

    &::after
        transform translateX(1px) rotate(160deg)


.booking-form .input
    margin-bottom 1px
    padding 1.5rem 2rem
    position relative
    font-size 1.6rem
    line-height 1
    color #666
    background-color #ebebeb

    &:first-of-type
        border-radius 0.3rem 0.3rem 0 0

    &:last-of-type
        border-radius 0 0 0.3rem 0.3rem

    &::after
        content ""
        width 0.8rem
        height 0.8rem
        border-right 2px solid #b2b2b2
        border-bottom 2px solid #b2b2b2
        position absolute
        top 1.8rem
        right 2rem
        border-radius 1px
        transform rotate(45deg)


.booking-form .seats
    padding 3rem
    border-radius 0.3rem
    background-color #ebebeb


.booking-form .seats header
    display flex
    margin-bottom 5rem


.booking-form .seats .legend
    display flex
    align-items center
    margin-right 3rem
    font-size 1.6rem


.booking-form .seats .legend-label
    margin 0.3rem 0 0 1rem
    color #666


.booking-form .seats-row
    display flex
    justify-content center

    &:not(:last-child)
        margin-bottom 1rem


.booking-form .seat
    flex-shrink 0
    display inline-block
    width 2rem
    height 2rem
    border-radius 50%
    background-color #ccc
    cursor pointer

    &:first-child
        margin-left 0

    &:last-child
        margin-right 0

    &.taken
        background-color #808080
        cursor default

    &.selected
        background-color #00aeef


.booking-form .seats-row .seat
    margin 0 0.5rem
    transition transform 150ms ease-out,
        background-color 150ms ease-out

    &:not(.taken):active
        transform scale(1.2)

.booking-form .seats-row:not(:first-child) button:nth-child(2)
    margin-right 3.5rem

.booking-form .seats-row:not(:first-child) button:nth-last-child(2)
    margin-left 3.5rem


.booking-form footer
    padding 2rem 2rem 1.5rem 2rem
    position absolute
    left 0
    right 0
    bottom 0
    font-size 1.6rem
    border-radius 0 0 0.5rem 0.5rem
    background-color #313131


.booking-form .total-label
    color #8f8f8f


.booking-form .total-price
    color #fcfcfc


.booking-form .submit-button
    padding 2.8rem 6rem
    position absolute
    right 2rem
    bottom 2rem
    font-size 1.6rem
    text-transform uppercase
    color #fcfcfc
    background-color #1e1f22
    box-shadow 0 1.5rem 4.6rem rgba(11, 5, 5, 0.45)
    cursor pointer
    transform scale(0)
    transition background-color 200ms ease-out,
        transform 200ms cubic-bezier(0.25, 0.1, 0.51, 1.32) 275ms

    &:hover
    &:focus
        background-color lighten(#1e1f22, 3%)

    &:active
        background-color darken(#1e1f22, 3%)
        transition none

.booking-form.visible .submit-button
    transform scale(1)
!

JS 

              
                var card = $('.card');
var infos = $('.info-list li');
var nav = $('.navigation li');

var animating = false;

showItem(0);
renderTakenSeats();


$('.navigation').on('click', 'li:not(.current)', function() {
    var index = $(this).index();
    showItem(index);
});

$(document).on('keydown', function(e) {
    if (!animating) {
        var index = infos.filter('.current').index();
        if (e.keyCode === 37 && index > 0) {
            // left arrow
            animating = true;
            showItem(index - 1);
        } else if (e.keyCode === 39 && index < infos.length - 1) {
            // right arrow
            animating = true;
            showItem(index + 1);
        }
    }
});

$(document).on('transitionend', '.current', function() {
    animating = false;
});

$(document).on('click', '.actions .cart, .booking-form .cancel', function() {
    $('.booking-form').toggleClass('visible');
});

$(document).on('click', '.seats button:not(.taken)', function() {
    $(this).toggleClass('selected');
});

$(document).on('submit', 'form', function(e) {
    e.preventDefault();
});


function showItem(index) {
    var info = infos.removeClass('current').eq(index).addClass('current');
    nav.removeClass('current').eq(index).addClass('current');

    infos.removeClass('move-left');
    info.prevAll().addClass('move-left');

    var background = info.find('img').attr('src');
    card.css('background-image', `url("${ background }")`);

    var rating = info.find('.rating').text();
    card.find('.rating-container').text(rating);
}


function renderTakenSeats() {
    var seats = $('.booking-form .seats button');
    var seatsCount = seats.length;
    var n = Math.random() * 10 + 5;
    for (let i = 0; i < n; i++) {
        seats.eq(Math.floor(Math.random() * seatsCount)).addClass('taken');
    }
}
!
999px

Console