Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

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.

+ add another resource

JavaScript

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.

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

Behavior

Auto Save

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

              
                <link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&family=Montserrat:ital,wght@0,200;0,700;1,200&display=swap" rel="stylesheet">
    <script src="https://kit.fontawesome.com/a076d05399.js"></script>

<header id="banner">
            <nav id="navbar">
                <h1 id="brand">La Parisienne</h1>

                <ul id="nav-list">
                    <li class="nav-links">Home</li>
                    <li class="nav-links">Our Story</li>
                    <li class="nav-links">To Go</li>
                    <li class="nav-links">Contacts</li>
                    <li class="nav-links">Events</li>
                    <li class="nav-links">Press</li>
                </ul>
            </nav>
        </header>

        <div id="description">
            <h1>French Café and Kitchen</h1>
            <p>FiDi's Hidden Gem</p>
        </div>

       <section id="story"> 
           <div>
                <img id="wall_picture" src="https://images.squarespace-cdn.com/content/v1/5a663d2451a584551fba07ee/1568217663095-8P14TI9M7QDRKBCD55GF/ke17ZwdGBToddI8pDm48kMXRibDYMhUiookWqwUxEZ97gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z4YTzHvnKhyp6Da-NYroOW3ZGjoBKy3azqku80C789l0luUmcNM2NMBIHLdYyXL-Jww_XBra4mrrAHD6FMA3bNKOBm5vyMDUBjVQdcIrt03OQ/LaParisienne_Interior-15.jpg?format=1500w">
                <div id="our_story">
                    <h3 id="our_story_title">Our Story</h3>
                    <p>Julie and Adrian Bruyère, a young couple from France, started La Parisienne after many years of working for top French restaurants in New York.  Their idea was to bring their love for food, service and "art de la Table" into a cozy space in Financial District.</p>
                </div>
                <hr id="hr">
           </div>
            

            

            <div id="gift_card">
                <img id="gift_card_picture" src="https://images.squarespace-cdn.com/content/v1/5a663d2451a584551fba07ee/1584358971747-IY7BNTQGTY36TG6ADEDT/ke17ZwdGBToddI8pDm48kEpVg-ILAPna1wRh-xAJ9fRZw-zPPgdn4jUwVcJE1ZvWQUxwkmyExglNqGp0IvTJZUJFbgE-7XRK3dMEBRBhUpwEv36x-EUL2-BSQ5feDhwGCbXuJBFqZ-erYzVouT8yOb9TwqchglLQOCYTRn7ZGxI/image-asset.jpeg?format=1000w">
               <div id="support">
                    <h2 id="support-title">Support your favorite local restaurant and</h2>
                    <p>Buy a gift card now</p>
                    <p>20% discount using the Code</p>
                    <p>LAPARISIENNE20</p>
                    <button type="button">Gift Card</button>
               </div>      
            </div>
        </section>


        <section id="menu">
            <div id="breakfast">
                <div class="menu-intro">
                        <h1 class="menu-title">BREAKFAST</h1>
                        <p>Available until 12pm Mon-Fri, All day Sat & Sun</p>        
                </div>

                <div class="item-container">
                    
                        <div class="item">        
                            <p class="item-name">Yogurt and Granola<span class="price">$6.5</span></p>
                            <p class="ingredients">Non-Fat greek yogurt, organic granola, blueberries, agave</p>
                        </div>
                        <div class="item">        
                            <p class="item-name">COCONUT CHIA PUDDING<span class="price">$7</span></p>
                            <p class="ingredients">chia seeds, kiwi, pineapple, strawberries, flax seeds</p>
                        </div>
                        <div class="item">        
                            <p class="item-name">AVO TOAST on multigrain<span class="price">$10.50</span></p>
                            <p class="ingredients">miso tahini spread, avocado, lemon, black sesame, scallion</p>
                        </div>
                        <div class="item">        
                            <p class="item-name">SANDWICH MATIN<span class="price">$8</span></p>
                            <p class="ingredients">Toasted Brioche, prosciutto, egg, gruyere</p>
                        </div>
                        <div class="item">        
                            <p class="item-name">SALMON BRIOCHE<span class="price">$10</span></p>
                            <p class="ingredients">Toasted Brioche, smoked salmon, herbs cream cheese, cucumber and dill</p>
                        </div>
                        <div class="item">        
                            <p class="item-name">HAM AND CHEESE CROISSANT<span class="price">$8.5</span></p>
                        </div>
                        <div class="item">        
                            <p class="item-name">FRESH FRUIT SALAD<span class="price">$6</span></p>
                            <p class="ingredients">Non-Fat greek yogurt, organic granola, blueberries, agave</p>
                        </div>
                        <div class="item">        
                            <p class="item-name">French Toast<span class="price">$9/$16</span></p>
                            <p class="ingredients">Brioche, blueberries, bananas, mapple syrup</p>
                        </div>
                        <div class="item">        
                            <p class="item-name">Croissant<span class="price">$3.75</span></p>
                            </div>
                        <div class="item">        
                            <p class="item-name">Pain au Chocolat<span class="price">$4.25</span></p>
                        </div>
                        <div class="item">        
                            <p class="item-name">Pain aux raisins<span class="price">$4.25</span></p>
                        </div>
                        <div class="item">        
                            <p class="item-name">Croissant aux amandes<span class="price">$4.25</span></p>
                        </div>
                        <div class="item">        
                            <p class="item-name">Chausson aux pommes<span class="price">$4.25</span></p>
                        </div>
                        <div class="item">        
                            <p class="item-name">Spinach and Ricotta<span class="price">$5</span></p>
                        </div>
                        <div class="item">        
                            <p class="item-name">Financier<span class="price">$3</span></p>
                        </div>
                        <div class="item">        
                            <p class="item-name">Canelé<span class="price">$3</span></p>
                        </div>
                </div>
                
                
                
            </div>

            <div id="small-plates">
                <div class="menu-intro">
                    <h1 class="menu-title">Small Plates</h1>
                    <p>perfect for sharing</p>
                </div>
                <div class="item-container">
                    <div class="item">        
                            <p class="item-name">Soup of the day<span class="price">$7</span></p>
                    </div>
                    <div class="item">        
                            <p class="item-name">PÂTÉ DE CAMPAGNE<span class="price">$13</span></p>
                            <p class="ingredients">Toast & Pickles</p>
                    </div>
                    <div class="item">        
                            <p class="item-name">BURRATA<span class="price">$15</span></p>
                            <p class="ingredients">Fresh burrata, roasted tomatoes, garlic, oregano & balsamic reduction</p>
                    </div>
                    <div class="item">        
                            <p class="item-name">GRILLED CHICKEN CAESAR<span class="price">$14</span></p>
                            <p class="ingredients">Romaine, grilled chicken, croutons, parmesan, egg</p>
                    </div>
                </div>
            </div>

            <div id="salads">
                <div class="menu-intro">
                        <h1 class="menu-title">Salads</h1>
                        <p>add salmon $5, soft-boiled egg $2, avocado $3, halloumi $3, chicken $6</p>        
                </div>
                <div class="item-container">
                    <div class="item">        
                            <p class="item-name">Parisienne<span class="price">$13</span></p>
                            <p class="ingredients">Lettuce, heirloom tomatoes, avocado, gruyère, hard boiled egg, Paris ham</p>
                    </div>
                    <div class="item">        
                            <p class="item-name">ORGANIC QUINOA BOWL<span class="price">$12</span></p>
                            <p class="ingredients">Spinach, miso-tahini, sesame, rainbow radishes, red cabbage, avocado, almonds</p>
                    </div>
                    <div class="item">        
                            <p class="item-name">WARM GOAT CHEESE<span class="price">$15</span></p>
                            <p class="ingredients">Warm goat cheese, frisee, cured ham, dried tomatoes, walnut</p>
                    </div>
                    <div class="item">        
                            <p class="item-name">GRILLED CHICKEN CAESAR<span class="price">$14</span></p>
                            <p class="ingredients">Romaine, grilled chicken, croutons, parmesan, egg</p>
                    </div>
                    <div class="item">        
                            <p class="item-name">WARM GREEN BOWL<span class="price">$14</span></p>
                            <p class="ingredients">Kale, spinach, egg, seared halloumi, avocado, toasted almonds</p>
                    </div>
                </div>  
            </div>


            <div id="sandwich">
                <div class="menu-intro">
                        <h1 class="menu-title">Sandwiches</h1>
                        <p>add avocado $3, egg $2, side of potato chips or mixed greens $4</p>        
                </div>
                <div class="item-container">
                    <div class="item">        
                            <p class="item-name">MONSIEUR<span class="price">$12</span></p>
                            <p class="ingredients">Paris ham, gruyere, béchamel</p>
                    </div>
                    <div class="item">        
                            <p class="item-name">MADAME<span class="price">$14</span></p>
                            <p class="ingredients">Paris ham, gruyere, béchamel, fried egg</p>
                    </div>
                    <div class="item">        
                            <p class="item-name">SALMON<span class="price">$14</span></p>
                            <p class="ingredients">Smoked salmon, spinach, zucchinis, herbs cream cheese, dill</p>
                    </div>
                    <div class="item">        
                            <p class="item-name">PROVENCAL<span class="price">$12</span></p>
                            <p class="ingredients">Classic ratatouille, fresh goat cheese, tomato pesto</p>
                    </div>
                    <div class="item">        
                            <p class="item-name">FORESTIER<span class="price">$14</span></p>
                            <p class="ingredients">Paris mushrooms, brie, truffle béchamel, thyme</p>
                    </div>
                    <div class="item">        
                            <p class="item-name">CHICKEN SALAD BRIOCHE<span class="price">$13</span></p>
                            <p class="ingredients">celery, pistachio, scallion, apples, turmeric seasoning</p>
                    </div>
                    <div class="item">        
                            <p class="item-name">CRAB SALAD BRIOCHE<span class="price">$15</span></p>
                            <p class="ingredients">avocado, celery, chives, iceberg lettuce, lime, old bay seasoning</p>
                    </div>
                </div>
            </div>

            <div id="desserts">
                    <div class="menu-intro">
                            <h1 class="menu-title">Desserts</h1>        
                    </div>

                    <div class="item-container">
                        <div class="item">        
                                <p class="item-name">Homemade Cookies<span class="price">$3.75</span></p>
                        </div>
                        <div class="item">        
                                <p class="item-name">Lemont Tarts<span class="price">$7.5</span></p>
                        </div>
                        <div class="item">        
                                <p class="item-name">Warm Apple Tart<span class="price">$6.5</span></p>
                        </div>
                        <div class="item">        
                                <p class="item-name">Paris-Brest<span class="price">$9</span></p>
                        </div>
                        <div class="item">        
                                <p class="item-name">Choco Tart<span class="price">$7</span></p>
                        </div>
                    </div>
            </div>

            <div id="desserts">
                    <div class="menu-intro">
                            <h1 class="menu-title">Hot Beverages</h1>  
                            <p>Coffer by Coperaco</p>      
                    </div>
                    <div class="item-container">
                        <div class="item">        
                                <p class="item-name">Coffee<span class="price">$2.75</span></p>
                        </div>
                        <div class="item">        
                                <p class="item-name">Espresso<span class="price">$3.5</span></p>
                        </div>
                        <div class="item">        
                                <p class="item-name">Macchiato<span class="price">$3.75</span></p>
                        </div>
                        <div class="item">        
                                <p class="item-name">Cappucino<span class="price">$4.5</span></p>
                        </div>
                        <div class="item">        
                                <p class="item-name">Latte<span class="price">$4.5</span></p>
                        </div>
                        <div class="item">        
                                <p class="item-name">Hot Chocolate<span class="price">$4</span></p>
                        </div>
                        <div class="item">        
                                <p class="item-name">Chai Latte<span class="price">$4.75</span></p>
                        </div>
                        <div class="item">        
                                <p class="item-name">Turmeric<span class="price">$4.75</span></p>
                        </div>
                        <div class="item">        
                                <p class="item-name">Matcha Latte<span class="price">$4.75</span></p>
                        </div>
                        <div class="item">        
                                <p class="item-name">Selection of Teas by HARNEY & SONS<span class="price">$4</span></p>
                        </div>
                    </div>
            </div>

                <div id="cold-beverages">
                    <div class="menu-intro">
                        <h1 class="menu-title">Cold Beverages</h1>    
                    </div>
                        <div class="item-container">
                            <div class="item">        
                                    <p class="item-name">Fresh orange or grapefruit juice<span class="price">$4.25</span></p>
                            </div>
                            <div class="item">        
                                    <p class="item-name">Homemade lemonade or iced tea<span class="price">$4</span></p>
                            </div>
                            <div class="item">        
                                    <p class="item-name">Homemade cold brew<span class="price">$4.5</span></p>
                            </div>
                            <div class="item">        
                                    <p class="item-name">Evian / Badoit<span class="price">$3</span></p>
                            </div>
                            <div class="item">        
                                    <p class="item-name">Coke / coke zero<span class="price">$3</span></p>
                            </div>
                            <div class="item">        
                                    <p class="item-name">Orangina<span class="price">$4</span></p>
                            </div>
                            <div class="item">        
                                    <p class="item-name">Belvoir ginger beer<span class="price">$4</span></p>
                            </div>
                            <div class="item">        
                                    <p class="item-name">Belvoir rose & edelflower<span class="price">$4</span></p>
                            </div>
                    </div>
                </div>
        </section>

        <section id="map">
            <div id="directions">
                <p>Located on 9 Maiden Lane in FiDi Manhattan</p>
                <p>HOURS:</p>
                <p>Monday-Friday  9am-7pm</p>
                <p>Weekends and holidays 9am-6pm</p>
                <p>(646) 756-4911</p>
            </div>
            
            <div id="gmap">
                    <div class="mapouter"><div class="gmap_canvas"><iframe width="538" height="309" id="gmap_canvas" src="https://maps.google.com/maps?q=la%20parsienne%209%20maiden%20lane&t=&z=13&ie=UTF8&iwloc=&output=embed" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe><a href="https://www.bitgeeks.net"></a></div><style>.mapouter{position:relative;text-align:right;height:309px;width:538px;}.gmap_canvas {overflow:hidden;background:none!important;height:309px;width:538px;}</style></div>
            </div>
            <button type="button" id="waitlist-button">Join the waitlist</button>
        </section>

        <section id="event-form">
            
            <img id="event-picture" src="https://images.squarespace-cdn.com/content/v1/5a663d2451a584551fba07ee/1516661465018-RSSW99WVO2N7JFLY91TJ/ke17ZwdGBToddI8pDm48kKAwwdAfKsTlKsCcElEApLR7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z5QPOohDIaIeljMHgDF5CVlOqpeNLcJ80NK65_fV7S1UegTYNQkRo-Jk4EWsyBNhwKrKLo5CceA1-Tdpfgyxoog5ck0MD3_q0rY3jFJjjoLbQ/IMG_0277.JPG?format=1500w">
            
            <div id="event-message">
                <h3 id="event-title">Organizing an event?</h3>
                <p id="event-par1">We cater small events around lower Manhattan for breakfast and lunch.  Please contact us 7 days prior to your event for more information.</p>
                <p id="event-par2">Contact@laparisiennenyc.com</p>
                <p id="event-par3">To rent out our space for your event, please contact us using the event inquiry form below.</p>
            </div>
            <hr>
            
            <div id="container">
                    <form id="survey-form">
                        <h3 id="event-form-title">Event Inquiry Form</h3>
                            <div class="form-input">
                                <label id="name-label" for="name">Name*</label>
                                <input required type="text" id="name" class="input-field">  
                            </div>
                            <div class="form-input">
                                <label id="email-label" for="email">Email*</label>
                                <input required type="email" id="email" class="input-field">
                            </div>
                            <div class="form-input">
                                    <label id="name-label" for="name">Subject*</label>
                                    <input required type="text" id="name" class="input-field">  
                            </div>
                            
                            <p>Message</p>
                            <textarea></textarea>
                            <button type="submit" id="submit">Submit</button>
                        
                    </form>
            </div>
        </section>

        <section>
                <div id="slider">
                        <figure>
                            <img class="img-slide" src="IMG_0239.jpeg">
                            <img class="img-slide" src="IMG_0255.jpeg">
                            <img class="img-slide" src="IMG_0267.jpeg">
                            <img class="img-slide" src="IMG_0305.jpeg">
                            <img class="img-slide" src="IMG_0405.jpeg">
                        </figure>
                    </div>
        </section>

        <footer>
            <div id="links">
                <div class="icons">
                    <i class="fab fa-facebook-f"></i>
                    <i class="fab fa-instagram"></i>
                    <i class="fab fa-yelp"></i>
                    <i class="fab fa-tripadvisor"></i>
                </div>
            </div>
        </footer>
              
            
!

CSS

              
                * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body{
    width: 100%;
    font-family: 'Montserrat', sans-serif;
}

#navbar {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    text-align: center;
    background-color: #6bf1b9;
    z-index: 1;
    /* background-color: rgb(10, 243, 212); */
    /* height: 30vh; */
}

#brand{
    text-align: center;
    font-family: 'Dancing Script', cursive;
}

#nav-list {
    margin-top: 10px;

}
.nav-links {
    /* display: flex;
    flex-direction: row; */
    text-decoration: none;
    list-style: none;
    cursor: pointer;
    margin-top: 10px;
}

#description {
    text-align: center;
    display: flex;
    justify-content: center;
    flex-direction: column;
    height: 80vh;
    background-image: url(https://images.squarespace-cdn.com/content/v1/5a663d2451a584551fba07ee/1516655370017-X6WFBD5OVHAW6LAMJS8U/ke17ZwdGBToddI8pDm48kKAwwdAfKsTlKsCcElEApLR7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z5QPOohDIaIeljMHgDF5CVlOqpeNLcJ80NK65_fV7S1UegTYNQkRo-Jk4EWsyBNhwKrKLo5CceA1-Tdpfgyxoog5ck0MD3_q0rY3jFJjjoLbQ/IMG_0438.JPG?format=2500w);
    background-size: 100%;
}

#our_story_title, #description > h1 {
    font-family: 'Dancing Script', cursive;
    font-weight: 700;
    font-size: 2em;
}

#wall_picture{
    width: 100%;
    padding: 30px;
}

#gift_card_picture {
    width: 100%;
    height: 70vh;
    float: left;
}


#support {
   
    text-align: center;
    margin-bottom: 40px;
}

#hr{
    margin-top: 50px;
    margin-right: 10px;
}


#menu {
    background-color: #6bf1b9;
}

.menu-intro {
    text-align: center;
    margin-bottom: 15px;
    margin-top: 1em;
    /* font-weight: 900; */
}

.menu-title {
    font-size: 3em;
}

.price {
    float: right;
    font-weight: 800;
}

.item {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
    
}

.item-name {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 14px;
}

#map {
    padding-top: 0;
    margin-top: 0;
    /* background-color: burlywood; */
    text-align: center;
}

.mapouter {
    width: 100%;
    padding-left: 23px;
    display: flex;
    justify-content: center;
}

#gmap {
    display: flex;
    justify-content: center;
    color: aqua;
    margin-top: 2em;
    z-index: -1;
}


#waitlist-button{
    width: 20%;
    justify-content: center;
    display: flex;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2em;
    padding: 1em;
    text-transform: uppercase;
    background-color: #dcffdd;
    border-radius: 2em;
}

button:focus, .input-field, textarea  {
    outline: none;
}

@media (min-width: 600px) {

    #navbar {
        position: fixed;
        width: 100%;
    }

    #nav-list {
        display: flex;
        justify-content: center;
    }

    .nav-links { 
        margin: auto;
        font-weight: 600;
    }
    
    #our_story_title {
        padding-top: 27px;
        margin-bottom: 16px;
    }


    #wall_picture{
        width: 50%;
        height: 85vh;
        padding: 30px;
        float: left;
        margin-left: 40px;
    }

    #our_story, #hr {
        margin-right: 100px;
    }

    #menu{
        width: 100%;
        display: flex;
        flex-direction: column;
    }

    #support-title {
        padding-top: 100px;
    }
    
    #gift_card {
        display: flex;
        justify-content: center;
        width: 100%;
    }
    
    #gift_card_picture {
        width: 40%;
        height: 70vh;
    }
    
    #support {
        text-align: center;
        margin-bottom: 40px;
    }

    .item-group {
        display: flex;
        flex-direction: column;
        margin-left: 40px;
        margin-right: 40px;
        width: 40%;
        flex: 1;
    }

    .item-container {
        columns: 200px;
        column-gap: 4em; 
        justify-content: center;
        margin-top: 2em;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 2em;
        width: 75%;
    }

    .item {
        -webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
        page-break-inside: avoid; /* Firefox */
        break-inside: avoid; /* IE 10+ */    
    }

    .price {
        width: 0;
    }

    #map {
        margin-top: 1em;
        margin-bottom: 1em;
        display: flex;
        flex-direction: column;
    }

    #directions {
        justify-content: center;
        margin: auto;
    }

    #event-picture {
        width: 50%;
        height: 70vh;
        padding: 31px;
        float: left;
        clear: both;
    }

    #event-message {
        padding-top: 2em;
        text-align: center;
        /* clear: both; */
    }

    #event-title {
        font-family: 'Dancing Script', cursive;
        font-weight: 700;
        font-size: 2em;
    }

    #event-par1 {
        padding-top: 1em;
    }

    #event-par2 {
        padding-top: inherit;
    }

    #event-par3 {
        padding-top: 5em;
    }

    /* Form styles */
    /* -------------------------------------------------- */
    /* -------------------------------------------------- */
    #container {
        clear: both;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-left: 150px;
        margin-right: 150px;
        margin-top: 50px;
        padding-top: 10px;
        padding-bottom: 40px;
        padding-left: 20px;
        padding-right: 20px;
    }

    #survey-form {
        width: 48%;
        display: flex;
        flex-direction: column;
    }

    .input-field {
        display: block;
        width: 100%;
        height: 40px;
        padding: 10px;
        border-radius: 2px;
        border: 1px solid black;
        margin-top: 10px;
        margin-bottom: 2em;
    }
    
    textarea {
        width: 100%;
        height: 100px;
        resize: vertical;
        margin-top: 1em;
    }
    
    
    #submit {
        width: 50%;
        justify-content: center;
        display: flex;
        margin-left: auto;
        margin-right: auto;
        margin-top: 2em;
        padding: 1em;
        text-transform: uppercase;
        background-color: #dcffdd;
        border-radius: 2em;
    }

    #event-form-title {
        text-align: center;
        margin-bottom: 1em;
    }

    footer {
        width: 100%;
        height: 70px;
        background-color: #6bf1b9;
    }

    #links {
        display: flex;
        justify-content: center;
        padding-top: 1em;
        cursor: pointer;
    }

    .fab {
        margin-left: 10px;
        font-size: 1.3em;
    }

    /* SLIDER IMAGES */

    #slider {
        overflow: hidden;
    }
    #slider figure {
        position: relative;
        width: 500%;
        margin: 0;
        left: 0;
        animation: 20s slider infinite;
        /* animation: 10s  */
    }
    #slider figure img {
        width: 20%;
        float: left;
    }
    
    @keyframes slider {
        0% {
            left: 0;
        }
        20% {
            left: 0;
        }
        25% {
            left: -100%;
        }
        45% {
            left: -100%;
        }
        50% {
            left: -200%;
        }
        70% {
            left: -200%;
        }
        75% {
            left: -300%;
        }
        95% {
            left: -300%;
        }
        100% {
            left: -400%;
        }
    }

    .img-slide {
        width: 100%;
    }
    
}
              
            
!

JS

              
                in
              
            
!
999px

Console