cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <div class="container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu consequat velit, ac gravida massa. Ut lacus nunc, dictum eget condimentum non, varius eu lectus. Integer pharetra convallis turpis sit amet pulvinar. Morbi vitae libero eget orci posuere feugiat. Duis sed lacinia ipsum, eget accumsan dui. Maecenas sed libero hendrerit, semper ex a, sodales urna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed eu felis tincidunt, maximus turpis sed, tempus diam. Etiam quis tempor neque, nec facilisis sem. Integer lacinia gravida eros, sed vulputate enim imperdiet ut. Quisque ornare, ex in elementum maximus, sem purus vehicula eros, ut venenatis sapien odio vel ex.

Cras ornare at erat maximus pellentesque. Sed in felis nec est placerat porttitor in ut turpis. Aenean molestie enim sodales nibh convallis varius. Sed at nisl ut quam placerat elementum. Praesent metus quam, ornare at ultrices sit amet, dapibus et purus. Maecenas iaculis fermentum diam mollis cursus. Cras sit amet molestie eros. Pellentesque posuere fermentum ullamcorper.

Aenean in fermentum erat, et varius justo. Nulla et lacus id eros accumsan consequat. Sed quis ultricies neque. Proin varius nibh enim, at iaculis mi euismod quis. Vivamus eleifend tellus sit amet sem gravida sodales. Vestibulum a venenatis metus. In hendrerit efficitur euismod. Fusce risus erat, pellentesque id suscipit id, faucibus eu sapien. Phasellus tempus ornare volutpat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Maecenas nec semper mauris. Ut lacinia lorem in nisi lacinia scelerisque. Sed in tempor turpis. Aliquam dolor risus, facilisis sed lobortis vel, eleifend vitae urna. In tincidunt rutrum lacus id scelerisque. Duis vitae auctor lectus, in ullamcorper lacus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus sollicitudin, urna sed efficitur ornare, mi libero scelerisque tellus, non dignissim ante felis dapibus dui. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla porttitor lobortis libero nec suscipit. Mauris congue dolor sit amet accumsan gravida. Sed suscipit libero sed diam ornare sollicitudin. In consectetur arcu velit, vel rutrum lectus efficitur vitae. Fusce in bibendum sem.

Nam nec iaculis nisl. Phasellus sodales diam in enim condimentum sagittis. Suspendisse vitae dolor pulvinar, mollis nulla at, consectetur lacus. Phasellus tempus blandit ex. Curabitur ut efficitur arcu. Aenean id diam tempor, maximus lacus ac, molestie magna. Integer mollis tincidunt feugiat. Maecenas ultricies consectetur posuere. Nulla vel dui pellentesque, auctor nisi et, mollis magna. Ut pulvinar eu ipsum lacinia tincidunt. Aliquam ullamcorper elit a enim venenatis, sit amet facilisis purus consequat. Mauris efficitur accumsan nulla et posuere. Integer commodo lacus eros, ut dignissim leo suscipit ac.

Quisque a massa libero. Suspendisse potenti. Donec dignissim odio nisi, eget lacinia dolor placerat sed. Nulla eu lectus ut urna tincidunt posuere sit amet sed nibh. Nam volutpat orci justo, nec vestibulum dolor consectetur eget. Proin tincidunt convallis velit, nec gravida purus vehicula vel. Curabitur dapibus viverra pharetra. Aliquam ut viverra tellus, eget viverra lacus. Integer turpis metus, convallis et imperdiet ut, varius sit amet libero. Nulla tempus imperdiet mauris, sed lacinia urna varius non. Nullam quam nisl, mattis euismod molestie vitae, interdum id elit. Quisque feugiat massa et purus porttitor lobortis. Aliquam hendrerit eros elit, nec ullamcorper ipsum dignissim in. Donec pulvinar dapibus lectus sit amet posuere.

Pellentesque interdum risus at lacus gravida volutpat. Ut auctor blandit faucibus. Mauris auctor venenatis ex, id dictum arcu imperdiet quis. Maecenas tempor in leo id gravida. Nullam dictum nisl et magna ullamcorper aliquet. Donec imperdiet nunc ac nisl vulputate, a dapibus orci mattis. Suspendisse auctor ex sed urna convallis, consequat cursus lacus laoreet. Duis molestie, nisl id vehicula congue, turpis risus cursus augue, vitae euismod sapien augue at felis. Duis dignissim sagittis quam, sit amet consectetur orci vulputate vitae. Mauris finibus pulvinar iaculis. Mauris cursus metus nec tellus gravida, eu tristique justo luctus. Fusce scelerisque, erat eget porta congue, ipsum ante dictum nunc, at ullamcorper lacus sapien faucibus dui. Etiam ornare non libero eget aliquam. Integer accumsan ac nulla id tincidunt. Fusce condimentum commodo ante, et dapibus tortor tempor vel.

Sed eros mi, volutpat vitae massa ac, consectetur feugiat odio. Donec in velit dignissim arcu blandit pretium in vitae leo. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur ac varius diam. Sed accumsan massa ante, non gravida velit facilisis ut. Aenean interdum diam ut lectus vulputate dictum. Sed vestibulum nunc quis tempor viverra. Aliquam mattis neque vel hendrerit pellentesque. Aliquam pulvinar aliquet lectus sed elementum. Morbi tellus nibh, auctor nec ullamcorper vel, ultricies sit amet nibh. Nulla nec urna ut velit condimentum sollicitudin. Mauris cursus purus vel augue fermentum tincidunt.

Curabitur posuere pulvinar dolor. Cras commodo tortor quis lacus scelerisque, ut pulvinar dui fermentum. Sed imperdiet sapien quis justo auctor fringilla. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer vehicula lorem sit amet placerat condimentum. Pellentesque eu ligula consequat, fringilla diam nec, pellentesque leo. Nunc metus odio, convallis id neque a, volutpat consectetur nulla. Praesent ac elit eu turpis suscipit rhoncus. Praesent nulla nisi, pulvinar a felis eget, efficitur aliquam dui. Nunc facilisis dolor aliquam aliquam consectetur. Sed vel lectus efficitur, iaculis risus sit amet, lobortis mi. Pellentesque interdum risus at eros mattis ornare. Nullam facilisis tellus non ante condimentum elementum.

Nullam pretium auctor lectus nec aliquam. Integer sit amet est eleifend, sagittis neque eu, viverra ipsum. Morbi ut mauris est. Proin eu tempor quam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum sed arcu et nunc scelerisque dignissim id sed neque. Donec sollicitudin porttitor felis, nec congue arcu facilisis sit amet. Sed vestibulum tempor lectus, vel volutpat lorem fermentum at. Proin sollicitudin suscipit leo, vitae fermentum arcu sollicitudin non. Aenean porttitor aliquet porttitor. Donec maximus leo ipsum, nec interdum sapien convallis vitae. Suspendisse a consequat diam.

Maecenas rutrum, ipsum a feugiat tristique, elit turpis luctus mi, ultricies convallis ipsum orci consequat felis. Vivamus euismod fermentum libero, non dictum mi cursus quis. Donec facilisis metus nibh, et malesuada odio finibus ut. Donec eget libero ac diam pretium malesuada. In in nisi vel urna pharetra molestie. Suspendisse a magna vitae nisi hendrerit luctus. Curabitur consequat turpis vitae turpis gravida fringilla. Nam sem felis, tristique vitae arcu a, fringilla bibendum enim. Aenean quis tempor risus. Maecenas posuere urna a neque accumsan pretium id non quam. Donec eu risus pellentesque, luctus libero sed, finibus risus. Etiam ullamcorper quam sed ultrices condimentum. Nunc orci magna, congue sit amet maximus quis, scelerisque sed justo. Phasellus orci diam, luctus sit amet ultricies sit amet, consequat in nisl.

Aliquam commodo ullamcorper odio, sit amet elementum arcu finibus tincidunt. Suspendisse id efficitur justo. Mauris faucibus erat quis arcu rhoncus ultricies. Donec sem eros, porta vitae augue quis, scelerisque efficitur massa. Praesent et tempor ipsum. Quisque auctor volutpat magna non aliquam. Suspendisse porta elementum lectus sed viverra. Nulla porta enim vitae faucibus tincidunt. Maecenas sit amet faucibus orci, nec suscipit velit. Vestibulum lorem dolor, venenatis nec aliquam nec, luctus sit amet lorem. Maecenas vestibulum accumsan mattis. Sed suscipit lacus a magna iaculis, vel dapibus risus aliquam. Morbi tincidunt eleifend est nec eleifend. Nulla porttitor purus sed mauris dapibus, et scelerisque augue dictum. Maecenas venenatis ipsum ac erat aliquet, nec consectetur metus semper.

Aenean eu leo nec odio molestie posuere. Nulla gravida justo ut dui sollicitudin ultricies. Donec accumsan tempor sagittis. Sed lobortis lorem dictum bibendum aliquet. Nunc vitae risus nibh. Aenean eu est et leo semper tincidunt. Cras congue consequat nunc non ultrices. Cras auctor, nibh pulvinar bibendum tempor, purus elit imperdiet ex, ac aliquam ex nulla ac elit. Nam velit neque, scelerisque at orci vel, mattis dapibus nulla. Suspendisse ornare diam a metus maximus, sit amet congue libero accumsan. Sed in hendrerit dui. Aliquam erat volutpat. Curabitur tincidunt odio vel fringilla finibus. Curabitur condimentum felis nec lectus tristique bibendum. Fusce nec eros augue. Praesent nunc tortor, dapibus vel rutrum vitae, tempor eget purus.

Aliquam convallis diam et viverra condimentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis quis justo sed condimentum. Suspendisse congue est quis libero pulvinar porttitor. In ultrices dolor nec elit pellentesque vehicula et semper velit. Aenean non metus ac turpis accumsan efficitur eu ac purus. Etiam eget dolor in urna aliquet tempor. Ut convallis, mauris ullamcorper euismod finibus, nisl est volutpat quam, at finibus risus eros venenatis purus. Maecenas posuere turpis mattis augue ullamcorper, id elementum turpis fringilla.

Nam maximus erat id malesuada elementum. Fusce accumsan sem sed lorem fermentum hendrerit. Duis cursus ligula nibh, sed tincidunt sem pellentesque in. Ut iaculis pulvinar blandit. Sed consequat iaculis pellentesque. Duis id pellentesque turpis, sed egestas enim. Morbi turpis felis, vulputate sit amet dui sit amet, tristique tristique lorem.

Curabitur molestie libero velit, sed ultrices dui lacinia commodo. Sed nisl leo, faucibus vitae vehicula eget, aliquet dapibus est. Suspendisse feugiat ullamcorper elit ac luctus. Aenean vehicula ornare mi a blandit. Fusce id efficitur nibh, eu interdum sem. Curabitur vitae venenatis sapien. Nullam eget pretium enim. Curabitur neque leo, pretium vel dapibus at, pellentesque at diam. Nunc pretium, ligula id sodales aliquet, metus justo cursus justo, sit amet lacinia enim enim et tortor. Sed a volutpat diam, a fringilla nulla. Donec in diam non neque porta commodo. Praesent sed lobortis nibh. Duis eget nibh dui. Vestibulum enim justo, accumsan ultricies mattis vel, bibendum ac ipsum. In hac habitasse platea dictumst. Mauris accumsan malesuada consequat.

In rutrum sollicitudin sapien, in vehicula lectus. Vestibulum blandit, mauris in bibendum semper, ligula quam vehicula nulla, quis efficitur risus metus eu tellus. Integer tincidunt sit amet eros ut malesuada. Donec eleifend purus vel interdum ultrices. Aenean imperdiet quis nunc et dignissim. Etiam tempor nibh eu mauris porttitor, non feugiat tellus suscipit. Donec id est efficitur tellus rutrum ullamcorper in vel risus. Nam sit amet mauris ornare urna suscipit euismod sed vitae leo. Aenean suscipit eget erat auctor pulvinar. Quisque massa ligula, pulvinar eget velit eu, varius feugiat orci. Mauris a lorem ut arcu elementum rhoncus dignissim a erat. Aliquam erat volutpat.

Nam nec lacinia lacus, non consectetur sem. Nullam efficitur elit convallis, euismod nisl porta, accumsan turpis. Cras hendrerit quam neque, vitae sagittis sapien finibus nec. Nulla volutpat enim vitae eros vulputate, congue tincidunt sem efficitur. Fusce porttitor enim quis nulla consectetur, sed blandit ex consectetur. Fusce suscipit sapien libero, et pulvinar tortor feugiat ut. Quisque ac volutpat nisi. Aliquam bibendum mauris eros, et ornare lectus semper quis.

Aliquam eget imperdiet sem. Maecenas imperdiet mauris id urna posuere, ut blandit ligula lacinia. Quisque eu posuere velit, in lacinia orci. Mauris congue auctor lectus non blandit. Morbi diam ante, gravida eu sapien eget, aliquam porta ex. Nunc venenatis placerat velit a vestibulum. Fusce aliquet velit risus, quis auctor mi commodo ac. Etiam nec iaculis orci. Sed viverra dui eu nunc commodo, a fringilla lectus lacinia.

Morbi vitae porta enim. Sed porta aliquet sapien at varius. Nam nec rutrum mauris, a ultrices massa. Mauris consequat maximus dolor, sit amet faucibus ante faucibus a. Curabitur accumsan turpis sit amet molestie ullamcorper. Vestibulum placerat sapien mauris, quis fringilla dui mollis quis. Pellentesque ut dignissim est. Donec vulputate hendrerit turpis, nec congue est sollicitudin eget. In metus dui, iaculis vitae est et, posuere laoreet nunc. Vivamus nisl dui, consequat ac urna sed, mattis consectetur orci. Pellentesque blandit quam sit amet accumsan varius. Sed diam metus, volutpat ut massa non, eleifend gravida nunc.

Praesent pellentesque sem sit amet nisl ultrices, vel volutpat elit consequat. Duis faucibus, turpis non tempor fringilla, tellus nulla ultricies sem, eu efficitur tortor eros vitae metus. Sed euismod mattis urna id tristique. Duis vel libero sed leo commodo luctus in ut ipsum. Aenean vitae quam a nisi faucibus tempus ac eget risus. Etiam placerat, elit eget vestibulum malesuada, lacus purus sodales est, congue lobortis lectus metus congue leo. Etiam a lacinia arcu, et posuere eros. Curabitur sed metus ligula.

Nullam condimentum ut turpis tempor pretium. Curabitur cursus justo sit amet mauris eleifend convallis. Nullam faucibus euismod tellus at lacinia. Etiam consequat neque non eros vulputate, a facilisis mauris molestie. Nunc vulputate tincidunt volutpat. Integer elementum eget ex non hendrerit. Sed sit amet mattis sapien, at viverra est. In pulvinar tempus ipsum vel porttitor. Duis sit amet felis vitae lectus consequat fringilla. Vivamus molestie elementum ex, a porta est sagittis nec.

Morbi sit amet massa at tellus pulvinar gravida. Suspendisse sit amet nibh ornare, dapibus diam at, pretium velit. Aenean in nisl ac ante maximus egestas vitae vel erat. Integer aliquam ante in neque tempor tincidunt. Quisque vel ultrices leo. Ut malesuada congue lorem et porttitor. Duis ut luctus dolor. Pellentesque sodales sem vitae arcu feugiat, vitae ultricies elit vehicula. Quisque vitae diam at urna rhoncus iaculis pharetra eu tellus. Sed elementum dapibus mi, et congue neque egestas non. Nunc a metus nulla. Nulla facilisi. Morbi et dignissim nisl. Praesent sit amet posuere risus, ac varius massa. Nullam pretium eros vitae nisi pulvinar, a suscipit urna vehicula.

Etiam id tellus ex. Proin at tortor vel mauris iaculis scelerisque. Integer faucibus hendrerit ornare. Ut posuere quam metus, a vestibulum erat ultrices et. Etiam vitae varius dui, eget pellentesque massa. Quisque non velit fermentum, dapibus nulla eget, pulvinar turpis. Etiam a auctor sem. Nullam vehicula eros sem, eu efficitur tellus varius fermentum. Duis rhoncus gravida massa sed euismod. Pellentesque suscipit tristique convallis. In eu mattis dolor. Vestibulum porta, velit ut venenatis posuere, risus est facilisis nunc, ut suscipit magna mi eget elit. Integer ligula ante, sagittis a nulla et, sodales efficitur purus.

Proin finibus dictum vehicula. Vivamus eget risus hendrerit, vulputate libero sed, faucibus ante. Nullam vestibulum massa nec dignissim finibus. Quisque pharetra urna ligula, ultricies dapibus sapien accumsan ac. Aenean dignissim lectus orci, eget porta libero sollicitudin eget. Donec nibh ante, bibendum rutrum libero in, tempus aliquam turpis. Nulla in commodo justo. Cras blandit aliquam hendrerit. Nulla molestie dolor vel eros faucibus posuere. Nam faucibus sapien eget nibh cursus fringilla. Mauris ut mattis libero, a aliquet nibh. Cras sollicitudin, enim at placerat consequat, justo lorem euismod erat, nec hendrerit urna urna ut nunc. Vivamus convallis justo eget neque pellentesque blandit. Vivamus luctus dolor augue, quis volutpat lacus congue ac.

Generated 25 paragraphs, 2343 words, 15963 bytes of Lorem Ipsum

</div>
            
          
!
            
              .container {
    width:5000px;
}

body {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    
    // cursor: move;
//   height: 100%;
//   min-height: 100%;
//   overflow: hidden;
//   width: 100%;
    
    // position: relative;
    
    overflow-x: touch;
    -webkit-overflow-scrolling: touch; /* lets it scroll lazy */
    -webkit-overflow-scrolling: auto; /* stop scrolling immediately */
    
    
}
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console