css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

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.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <header>
  Header
</header>
<sidebar>
  Sidebar
</sidebar>
<content>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nec nisl suscipit, laoreet massa non, pharetra nunc. Aenean ullamcorper condimentum libero, a sagittis augue mattis et. Vivamus purus metus, molestie id purus in, sodales laoreet dui.
    Praesent ut tellus ornare, consequat odio sit amet, ultricies tortor. Etiam hendrerit ac risus ut dignissim. Morbi id risus fermentum, sollicitudin mi a, sagittis sapien. Aliquam tincidunt leo ut tellus cursus semper. Sed cursus sapien nec diam ultrices,
    at ultricies est faucibus.</p>
  <p>Aliquam in vestibulum ligula. Etiam non nulla quis quam viverra feugiat vitae eu velit. Nam at tellus libero. Etiam porttitor, magna ut condimentum eleifend, nibh lectus semper nisi, at laoreet mauris velit eget turpis. Suspendisse ut purus sed sapien
    varius hendrerit. Etiam efficitur cursus massa eget feugiat. Cras lobortis lorem nisi, et varius tellus condimentum sit amet. Vivamus lobortis, orci quis lobortis ullamcorper, odio nibh ullamcorper lectus, quis vulputate arcu ligula sit amet massa.
    Aenean consequat, nibh non ornare cursus, libero tortor accumsan eros, vitae interdum augue est sed turpis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam leo justo, dignissim sed sollicitudin sit amet, pulvinar id mi.</p>
  <p>Aenean vehicula efficitur risus, sodales tincidunt lacus lobortis vitae. Sed vulputate, erat a mollis accumsan, ante turpis egestas nunc, et placerat est nunc sagittis eros. Nam a erat vel sapien fringilla semper ac non elit. Donec lacinia viverra lorem,
    ut pellentesque libero vehicula sit amet. Nulla ligula ipsum, venenatis sit amet dolor id, consectetur posuere ex. Vivamus pretium enim id urna ultrices posuere. Vivamus malesuada scelerisque commodo. Integer in dui nunc. Suspendisse commodo sed turpis
    et ullamcorper. Vivamus a risus quis massa facilisis cursus.</p>
  <p>Aenean venenatis ipsum nec cursus tincidunt. Cras dapibus, orci tincidunt consectetur blandit, eros est accumsan neque, et fermentum justo elit non eros. Aliquam est augue, tempus id lorem vel, tincidunt cursus arcu. Proin suscipit massa ex, at tincidunt
    nisl gravida eget. Nam ac purus sed lectus pellentesque viverra. Etiam tortor mi, tincidunt non tempor nec, gravida nec nisl. Donec posuere congue purus, vel ornare magna sollicitudin quis. Nunc volutpat blandit odio nec auctor. In at risus dolor.
    Nam fermentum fringilla congue. Donec mattis viverra lacus, a molestie ante commodo ut. Nunc id ornare lacus. Curabitur volutpat, orci a porttitor pharetra, augue enim scelerisque felis, a hendrerit tellus lectus a neque. Praesent at tortor nulla.
    Nulla quis elementum nibh.</p>
  <p>Ut sollicitudin leo lectus, nec placerat libero fringilla ac. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean pretium, dolor id placerat vehicula, diam elit ornare magna, in egestas ante mi quis lectus.
    Aenean fringilla vitae dolor quis efficitur. Nam sagittis, quam non mattis tempus, enim massa suscipit nunc, facilisis porta tellus lacus vitae eros. Aliquam interdum at ipsum eu aliquet. Cras placerat blandit lacus, nec aliquam enim hendrerit sit
    amet. Sed sed libero lacus. Vivamus sit amet diam fermentum, auctor purus cursus, facilisis metus. Ut sodales velit nisl. Aenean luctus sem nec tortor commodo, id luctus ligula ullamcorper. Quisque eu venenatis nibh. Suspendisse quam eros, tristique
    non nisl a, rhoncus volutpat lorem. Phasellus laoreet diam a dapibus rutrum. Duis at lacus eget lacus ultricies mattis nec eu quam. Morbi ullamcorper lectus vestibulum, tempus odio ac, vulputate sapien.</p>
  <p>Praesent magna leo, ultricies non eros in, feugiat congue lectus. Suspendisse massa enim, vestibulum eu pretium vitae, tempus consectetur nulla. Pellentesque vitae dui sed nibh euismod ullamcorper nec eu sem. Sed vitae mattis quam. Praesent in felis
    at turpis varius consequat. In dapibus, elit sed sollicitudin elementum, libero massa fermentum nulla, in sollicitudin risus ligula non sapien. Proin pellentesque tristique blandit. Praesent ex dolor, venenatis commodo erat non, pharetra gravida nisl.
    Nullam non lectus mollis, efficitur mi at, vulputate risus. Duis nec diam egestas, viverra dui vitae, lacinia augue. Vestibulum tincidunt, ex quis lobortis volutpat, urna massa rutrum nulla, vel consequat libero massa id massa. Nunc ex elit, tempus
    at dignissim vitae, elementum vitae eros.</p>
  <p>Aliquam purus ipsum, iaculis ut tellus sit amet, ornare dictum augue. Aenean tortor lectus, euismod vel erat et, fermentum euismod dui. Maecenas neque velit, tristique id iaculis id, feugiat sit amet risus. Ut dolor velit, lobortis non justo nec, tempus
    pharetra mi. Duis sodales auctor pellentesque. Nulla dictum facilisis dui id dapibus. In laoreet ligula quis porttitor accumsan. Morbi eu lorem urna. Sed purus ante, lacinia eu sodales nec, imperdiet quis lectus. Nulla maximus neque et orci eleifend
    gravida. Nunc auctor scelerisque sem. Morbi sagittis nunc vitae consequat sagittis.</p>
  <p>Aliquam vulputate leo dignissim sem convallis varius eget ut nulla. Vivamus metus est, sollicitudin sed tempor in, ultrices vel sapien. Nam sollicitudin enim a venenatis viverra. Proin vulputate diam eget est ultricies fringilla. Maecenas fringilla
    purus eros, ut blandit sapien lobortis eget. Nam eu justo volutpat, molestie nulla at, viverra orci. Ut dui augue, tempus ut malesuada at, ultrices a urna.</p>
  <p>In eu placerat lectus. Etiam tincidunt nec urna et maximus. Nullam tempor pulvinar dui eu scelerisque. Fusce et viverra arcu. In sit amet nisl quis justo viverra facilisis. Donec sagittis ipsum sit amet lacus tincidunt suscipit. Maecenas consectetur
    tellus a ultrices iaculis. Maecenas elementum ultricies sollicitudin. Morbi et mauris odio. Morbi dapibus lectus sit amet cursus pulvinar. Vivamus vehicula, magna eget pellentesque hendrerit, est sapien cursus diam, consectetur rhoncus nisi nunc ac
    elit. Vivamus elementum nulla nec aliquet tincidunt. Maecenas blandit consequat augue ac volutpat. Nullam vitae placerat eros.</p>
  <p>Ut vehicula magna sit amet turpis vulputate, id malesuada urna consequat. Nam quis cursus massa. Praesent ultricies nunc quis mattis semper. Nam nec mattis eros. Ut volutpat ex sit amet urna tempor pulvinar. Maecenas vel massa sed velit consectetur
    tristique. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus vestibulum lobortis auctor.</p>
  <p>Proin blandit, purus vel molestie aliquet, nisi felis elementum lacus, id pellentesque elit sem a lectus. Etiam eu nibh maximus, viverra eros nec, mollis nulla. Nam sodales odio nec libero varius, ac lacinia orci dapibus. Suspendisse sit amet vulputate
    arcu. Curabitur nec sollicitudin odio. Vestibulum aliquam neque ac neque ultrices, in porttitor enim sodales. Cras ultrices congue faucibus. Aliquam accumsan est urna, non interdum turpis placerat vitae. Aliquam vel consectetur elit. In hac habitasse
    platea dictumst. Sed rutrum interdum dapibus. Morbi condimentum varius tempus. Etiam id dui eget magna pellentesque consequat at sit amet felis. Sed ex mauris, facilisis at consequat id, accumsan at lectus. Duis iaculis quam nec orci lacinia, elementum
    commodo nunc auctor. Fusce id consectetur risus, sit amet rhoncus erat.</p>
  <p>Nullam dignissim, purus vel dictum hendrerit, risus neque condimentum tellus, at eleifend elit elit et elit. Nulla erat enim, aliquet quis maximus non, sagittis at nisi. Duis sed lacus gravida, semper metus quis, malesuada ipsum. Nulla sed ante eget
    sem faucibus feugiat. Donec facilisis id velit vel semper. Nam et volutpat ante. Nullam malesuada ante sit amet posuere vulputate.</p>
  <p>Proin ac nisi velit. Vivamus convallis eros in blandit interdum. Praesent vel vestibulum lorem, a tempus ante. Ut convallis faucibus magna. Nullam sit amet turpis semper, tempor elit et, suscipit elit. Nam efficitur eu magna a pretium. Nam tempor pretium
    velit vitae hendrerit. Vestibulum fringilla turpis in sagittis molestie.</p>
  <p>Mauris sapien nulla, congue a suscipit quis, dignissim eu eros. Aliquam erat volutpat. Proin vel sollicitudin felis. Donec posuere est quis lorem finibus euismod. Nulla hendrerit tellus a libero semper accumsan. Pellentesque diam lectus, tristique sed
    fringilla at, consectetur non metus. Nullam sit amet tellus in tellus dignissim malesuada vulputate at nulla. Aliquam volutpat turpis sit amet ipsum commodo, vel efficitur enim iaculis. Sed id quam eros. Praesent feugiat est et enim rutrum volutpat.
    Donec vitae neque a libero faucibus posuere. Nam sed est feugiat, ornare sem a, rhoncus dui. Nunc rhoncus nunc et purus tristique, ac congue augue elementum. Sed a facilisis leo. Mauris eros ligula, iaculis in sem et, vestibulum porttitor nulla.</p>
  <p>Praesent eu risus aliquam, commodo leo dignissim, mollis nulla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus scelerisque nibh id malesuada ornare. Nunc vulputate ultricies mattis. Mauris dolor ligula,
    sollicitudin id est a, vestibulum molestie justo. In odio risus, luctus non imperdiet ac, euismod auctor orci. Mauris enim risus, venenatis sit amet congue ac, finibus vitae tortor. Maecenas interdum ultrices erat at lobortis. Etiam hendrerit, dui
    eget porta lobortis, elit purus suscipit metus, ut consequat ante ante et lorem. Curabitur ac diam nec tortor pharetra lacinia.</p>
  <p>Aenean vel libero arcu. Duis dui eros, fermentum in velit ac, hendrerit tempus elit. Nunc efficitur hendrerit ante, eu vehicula enim sagittis id. Duis iaculis, quam vitae fermentum consectetur, mi ipsum ultrices lacus, quis faucibus quam dui id libero.
    Proin in turpis luctus, vestibulum nibh sit amet, posuere ex. Donec commodo, orci sed tincidunt hendrerit, lorem felis pretium risus, sed vulputate orci elit vel nunc. Suspendisse condimentum ut mi ut molestie. Duis mattis commodo lectus, et dignissim
    elit interdum eu. Etiam id ipsum ut metus sodales sagittis eget vitae nunc. Vivamus quis ipsum laoreet risus tincidunt congue sed ut nulla. Vestibulum feugiat placerat est, id laoreet odio vehicula et. Sed faucibus justo dapibus sodales rutrum. Suspendisse
    in nisl nulla.</p>
  <p>Donec luctus lorem non sapien lacinia, et tincidunt velit blandit. Morbi feugiat egestas dolor et vulputate. Integer a sapien velit. Aliquam ut mi non felis rutrum euismod. Suspendisse in velit metus. Quisque nec enim sit amet velit lobortis fermentum
    eget a mauris. Mauris porttitor tortor leo, ac vehicula erat ornare vel. Vivamus in lacus at est condimentum vehicula quis quis quam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Lorem ipsum dolor sit
    amet, consectetur adipiscing elit.</p>
  <p>Nullam eleifend vehicula tellus sed rhoncus. Nulla nisl dolor, laoreet et eros id, iaculis posuere arcu. Suspendisse varius, tortor eu placerat faucibus, risus orci vehicula quam, id commodo libero ante sit amet felis. Nulla vitae metus ac purus condimentum
    eleifend. Praesent vel sodales metus. Proin nec sapien mi. Duis maximus posuere dictum. Phasellus mattis justo elit, id euismod orci dapibus in. Suspendisse pulvinar dui eget risus volutpat, et ultrices risus molestie. Nullam lacus dui, mattis vitae
    lacus facilisis, vulputate porta nunc. Duis imperdiet arcu id mauris efficitur congue. Suspendisse nulla ex, ultrices sed nisl non, sollicitudin finibus neque. Mauris vitae velit convallis nibh imperdiet volutpat et ut orci.</p>
  <p>Aenean a nulla mauris. Maecenas ac eleifend nisl. Donec tristique sapien iaculis nulla tincidunt, non scelerisque diam pharetra. Praesent efficitur nec ligula et auctor. Mauris vehicula justo quis urna feugiat, eu pharetra mi convallis. Sed eleifend
    suscipit pulvinar. Pellentesque dictum consectetur ligula eget porta. Sed dapibus pharetra ante, nec consequat metus. Pellentesque ut fermentum neque. Sed massa enim, molestie nec orci ut, varius convallis libero.</p>
  <p>Nulla finibus nec dolor et suscipit. Nam sed nisl ac lectus viverra dignissim. Mauris mauris elit, dapibus vitae ante nec, imperdiet gravida erat. Praesent laoreet diam in ornare volutpat. Curabitur accumsan dictum lacus vitae efficitur. Maecenas non
    orci sit amet diam euismod fermentum. Quisque interdum neque in ex imperdiet sagittis. Proin ut velit efficitur, posuere orci sit amet, luctus nulla. Aenean tempus accumsan tempus. Aliquam non nunc non ante rutrum imperdiet et a diam.</p>
  <p>Curabitur non felis vel libero tempus rutrum. Aliquam id neque eget erat malesuada convallis a vitae lorem. Etiam rhoncus urna nisi, eget aliquet metus faucibus ut. Nulla non pellentesque odio. Integer dictum sapien vel magna tincidunt accumsan. Nullam
    ante tellus, dapibus ornare sem vitae, efficitur tincidunt massa. Aenean tincidunt nunc a justo congue vestibulum. Donec eget elementum enim, sed gravida ligula. Suspendisse est dui, tempus dictum tristique nec, cursus sed tortor. Nulla semper gravida
    lorem, sit amet cursus ante fermentum sed. Integer sapien nunc, accumsan nec leo quis, ultricies efficitur purus. Donec vulputate, mi ac vestibulum tincidunt, neque orci venenatis dolor, sed feugiat velit neque quis nisl.</p>
  <p>Curabitur eu sagittis elit, a sagittis tortor. Donec eget elementum diam. Etiam tortor sem, viverra a ultrices ut, placerat eu nulla. Suspendisse malesuada odio nec dictum sodales. Ut non sapien a mauris faucibus tempus. Vestibulum ante ipsum primis
    in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris dapibus, tellus a vehicula lacinia, justo sapien congue turpis, ac sodales nunc nulla vitae nunc. Maecenas non lacus at sapien eleifend rhoncus eu eu erat. Nam eget magna consectetur,
    pharetra lacus non, ornare tellus. Vestibulum ultrices dictum egestas. Aenean id lobortis enim. Donec sit amet lacus magna.</p>
  <p>Nam neque justo, efficitur id volutpat ut, tincidunt vel nibh. Nulla at quam eget dui viverra viverra quis et ante. Donec non placerat tellus, ac sodales mi. Sed accumsan ultrices purus, ut efficitur neque dignissim non. Donec pellentesque posuere vulputate.
    Vivamus nunc turpis, viverra nec magna eu, elementum pellentesque enim. Etiam tortor mauris, porta lobortis blandit a, laoreet vitae dolor.</p>
  <p>Quisque lacinia eros ac eros hendrerit, eget viverra tortor tristique. Morbi elementum ex in dolor bibendum, eu congue metus semper. Donec non tortor tristique, suscipit mi nec, efficitur ipsum. Quisque interdum risus nec velit suscipit blandit. Nulla
    sagittis, dolor ut viverra rutrum, dui enim consequat nisi, ut placerat leo velit aliquet ante. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent viverra quam eget mi pellentesque mattis. Sed imperdiet
    vestibulum congue. Curabitur nec convallis nisl, vitae vestibulum massa. Suspendisse et ante laoreet, cursus est id, fringilla ante. Aliquam lobortis nisi odio.</p>
  <p>Mauris sit amet nunc augue. Mauris ut volutpat arcu. Duis vitae diam dolor. Maecenas imperdiet rutrum lacus et pulvinar. Nam ac eros sed est malesuada pulvinar vel in magna. Morbi justo turpis, hendrerit eu ornare quis, pulvinar et tellus. Etiam tristique
    facilisis ligula ac bibendum. Morbi nec purus hendrerit, molestie dolor vitae, dignissim tortor. Aenean pellentesque, tortor ut lobortis tincidunt, ex nibh lobortis tellus, eu gravida purus justo sagittis leo. Curabitur luctus enim enim, id tempor
    felis facilisis at.</p>
  <p>Praesent consectetur augue ac viverra euismod. Nunc eu hendrerit velit, non congue justo. Ut auctor suscipit nunc id fermentum. Donec et aliquam neque. Quisque vel porttitor metus. Nulla porta nunc non ligula faucibus pretium. Maecenas iaculis purus
    facilisis est sagittis, non ultrices elit pulvinar. Etiam maximus tellus quis tellus fringilla dapibus. Quisque ex dolor, pulvinar vitae fermentum non, suscipit ultrices velit. In odio tellus, convallis sed dolor quis, elementum pharetra magna. Proin
    turpis metus, semper nec volutpat at, rutrum in tellus. Cras vitae maximus eros, dignissim molestie dui. Cras sagittis, nisi vitae faucibus vehicula, tellus nisl lacinia felis, in fermentum augue lacus eu sapien. Donec lobortis nisi ut dui convallis,
    a iaculis dui malesuada.</p>
  <p>Nullam pellentesque vulputate ipsum at pellentesque. Nulla facilisi. Fusce fringilla ullamcorper nisl ac placerat. Praesent ut nulla placerat, rutrum mi nec, venenatis sapien. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed congue
    est metus, sed varius ante porttitor ut. Integer eleifend eros ut metus sollicitudin, id dictum leo pellentesque. Praesent ultricies lacus vitae commodo interdum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
    Mauris sit amet metus nulla.</p>
  <p>Donec id vestibulum arcu. In ultricies rutrum purus quis condimentum. Phasellus pulvinar, erat non pellentesque ultricies, felis massa pretium tellus, ac sollicitudin velit quam nec erat. Nulla vel lobortis purus. In luctus porta blandit. Etiam elementum
    sollicitudin nunc sed molestie. Praesent id nisl magna. Donec gravida nulla eu diam aliquet, quis elementum ipsum consequat. Vestibulum et massa purus. Mauris eu urna vitae lectus sodales rhoncus. Donec et enim massa.</p>
  <p>Maecenas pretium, lorem nec tincidunt efficitur, est urna ullamcorper risus, in aliquam lorem felis eget sem. Donec vitae dapibus nulla. In eget ligula vehicula, sagittis ligula dapibus, pretium magna. Aliquam ac venenatis nulla. Pellentesque tempor
    blandit nunc, eu sodales enim facilisis sit amet. Etiam at faucibus elit. Etiam sagittis nisi eget lectus tempor, ac ultricies tellus accumsan. Morbi non purus elit. Nam pharetra tincidunt neque, sit amet facilisis sem.</p>
  <p>Donec semper, justo vel mollis elementum, tortor magna tincidunt ex, at faucibus mauris ex vel lectus. Aenean mattis, tortor sit amet pretium auctor, risus dolor facilisis felis, non ultrices dolor mauris at diam. Vivamus tempus efficitur quam, id elementum
    lectus rhoncus sit amet. Quisque posuere lacinia tortor, quis vulputate nunc fermentum ut. Vestibulum euismod vulputate neque sit amet tempor. Suspendisse dictum, arcu in cursus tincidunt, justo enim efficitur est, vitae vehicula nulla nulla sit amet
    erat. Phasellus aliquam suscipit fermentum. Suspendisse potenti. Cras posuere libero arcu, at tristique est convallis at.</p>
  <p>Vivamus ut egestas magna, et ultricies elit. Nullam ac ante et leo pulvinar volutpat. Sed euismod sed ante eu placerat. Maecenas mollis, orci ac porta bibendum, neque erat tincidunt lorem, at volutpat sapien quam non felis. Maecenas id augue nec lorem
    luctus mattis ac et neque. Phasellus condimentum porta enim, eget facilisis elit laoreet at. Aenean dignissim eget est sit amet mollis. Maecenas tristique pellentesque tellus, nec sagittis nulla molestie facilisis. Vivamus nec aliquet est, nec venenatis
    nisl.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras facilisis feugiat malesuada. Phasellus dapibus luctus leo. Maecenas ullamcorper pulvinar diam, vel pretium orci consectetur in. Donec bibendum tempor ipsum, eu accumsan purus gravida a. Donec
    ultricies dui in porttitor egestas. Mauris vitae pulvinar mauris. Curabitur vel mauris venenatis, volutpat lacus faucibus, varius erat.</p>
  <p>Maecenas quam odio, maximus ac libero vitae, feugiat accumsan lacus. Nunc mauris odio, tristique id lectus ac, vestibulum vehicula tellus. Proin eu laoreet arcu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
    Aenean auctor felis a nisi pulvinar interdum. Duis sed pellentesque est, id pretium leo. Integer nec semper leo.</p>
  <p>Quisque vitae lacus sed quam vehicula vestibulum ut id enim. Fusce tristique porta dapibus. Sed ut lectus nisl. Integer vel ipsum gravida, interdum mi sit amet, mattis eros. Cras consequat nibh ut mauris fringilla bibendum. Duis ullamcorper gravida
    leo, ac rutrum diam lacinia sed. Duis commodo blandit feugiat. Cras ullamcorper, sem ut pellentesque aliquet, eros eros porttitor urna, ut ultricies erat enim ut lectus. Pellentesque eget aliquet lectus. Suspendisse mattis elit id augue euismod, nec
    iaculis orci consequat. Aliquam erat volutpat.</p>
  <p>Mauris et ullamcorper neque. In nunc turpis, scelerisque ut lacus et, porta semper risus. Praesent malesuada vestibulum imperdiet. Nulla vehicula massa vel luctus bibendum. Nunc nec elementum risus. Vivamus laoreet augue tempor ligula condimentum, ut
    mollis purus condimentum. Pellentesque in urna lorem. Suspendisse at dolor eget sapien ultrices ultrices. Phasellus et enim egestas, tempus ante nec, suscipit ante. Donec sit amet lectus at ipsum semper rutrum sit amet vitae turpis. Proin ac ullamcorper
    enim. Donec id urna at lacus porttitor sodales sed id orci.</p>
  <p>Aliquam pretium ultrices eros sit amet sagittis. Phasellus tempor eros id leo ultricies blandit. Nullam id feugiat tellus. Pellentesque non ultricies nunc. Nullam id enim sem. Suspendisse eu urna sit amet metus consequat tempus. Sed non dui at ligula
    hendrerit vehicula. Donec vel felis at nulla volutpat venenatis. Curabitur at lorem sem. Integer erat orci, luctus non lectus id, rhoncus facilisis ligula. Ut tempor fermentum purus, quis dapibus quam imperdiet at. Maecenas eu scelerisque libero.</p>
  <p>Sed iaculis ornare condimentum. Sed ultricies et est ac bibendum. Donec faucibus quam in eros imperdiet, ac malesuada est cursus. Aliquam tellus erat, imperdiet vitae eros a, fermentum ultricies ante. Maecenas nec nibh ac sapien pretium egestas. Proin
    lacinia pretium eros, ac rhoncus turpis convallis condimentum. Mauris laoreet egestas metus, et ullamcorper nisl vestibulum a. Pellentesque et lacus vitae dolor hendrerit feugiat id vitae tellus. Donec aliquet aliquet sapien vel finibus. In hac habitasse
    platea dictumst. Quisque condimentum odio eu tellus porta sollicitudin. Proin vitae sagittis velit.</p>
  <p>Mauris rhoncus odio eu fringilla eleifend. Vivamus ac ante lectus. In sed tellus in mauris suscipit faucibus. Quisque facilisis ac mi a tristique. Maecenas finibus, elit sed sagittis dictum, nisl neque lobortis ipsum, vitae posuere mi felis nec ligula.
    Quisque tincidunt tellus elit, in ultrices eros vestibulum consectetur. Vivamus aliquam magna sed nisl mattis dignissim. Ut suscipit nulla sed ipsum sodales consectetur. Donec eu felis magna. Aliquam at dignissim neque. Sed ultrices, metus vitae placerat
    vestibulum, felis mi eleifend eros, a facilisis nibh risus nec augue. Sed nec orci enim. In sed lorem et nibh vulputate congue. Maecenas sed consequat ipsum. Duis luctus ante sed erat congue lobortis vel quis nisi.</p>
  <p>Ut odio felis, elementum sed gravida eget, vulputate eu lorem. Quisque vestibulum arcu nec dolor faucibus feugiat. Nunc sagittis arcu nisi, at gravida diam ultrices eu. Sed aliquet lacus eu sem interdum volutpat. Nulla ante diam, congue id enim vel,
    tincidunt mollis nulla. Fusce bibendum vehicula dolor in hendrerit. Nunc non congue orci. In eget lorem laoreet diam vestibulum faucibus. Vestibulum ut consectetur eros, quis molestie libero. Integer molestie et lorem id ornare. Nullam tincidunt venenatis
    odio, sit amet molestie enim cursus non. Ut hendrerit pretium dui eget gravida. Morbi non dignissim felis. Vestibulum lorem nunc, posuere et sem ac, rhoncus posuere ante.</p>
  <p>Fusce vitae tortor et urna dignissim dignissim. Fusce rhoncus neque sit amet lorem posuere faucibus. Integer lobortis non nunc nec ullamcorper. Cras blandit lobortis metus, vel dapibus purus imperdiet sit amet. Pellentesque dapibus ante enim, tincidunt
    vehicula sem ornare id. Proin dictum, ligula in ultricies lobortis, tellus massa pulvinar velit, blandit pellentesque dolor lacus at est. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  <p>Vivamus volutpat eleifend urna non varius. Sed efficitur scelerisque tellus non pharetra. Fusce facilisis purus pretium lectus pellentesque, consectetur facilisis quam vulputate. In hac habitasse platea dictumst. Vestibulum pretium odio nec nibh malesuada,
    non feugiat orci consequat. Pellentesque fringilla consectetur finibus. Cras facilisis at felis aliquet dapibus. Praesent faucibus laoreet erat, vel lacinia lorem facilisis scelerisque.</p>
  <p>Curabitur eget dui tortor. Integer lobortis mauris non nulla dictum porttitor. Etiam sed lacus erat. Proin mauris odio, pretium at ligula eget, varius fermentum purus. Donec cursus at ex a viverra. Nunc consectetur posuere ex sit amet iaculis. In magna
    nisi, tristique eu ligula sit amet, fringilla imperdiet massa. Praesent mattis neque libero, nec aliquam metus laoreet nec. Duis dictum lobortis vulputate. In hac habitasse platea dictumst. Nulla in sapien vitae magna congue tincidunt vitae vel turpis.
    Sed rhoncus bibendum erat, vel convallis ligula ultrices rhoncus.</p>
  <p>Etiam vitae tortor id tellus mattis iaculis. Ut ultricies, dolor sit amet cursus accumsan, tortor lectus porta turpis, id pretium dolor nibh et elit. Donec sed cursus diam. Curabitur libero tortor, tincidunt mollis libero sit amet, tincidunt tincidunt
    purus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse rhoncus elementum erat, vitae scelerisque enim maximus nec. Aenean vel congue purus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia
    Curae;</p>
  <p>Duis mollis sollicitudin mi sed porta. Quisque non sollicitudin turpis. Suspendisse et orci convallis mi pretium tristique consequat non dui. Donec dapibus, risus nec dignissim tempus, ligula nulla tincidunt justo, eget porta dolor dolor ut nisi. Donec
    iaculis risus mi, in facilisis augue eleifend quis. Sed tincidunt, elit vitae ultricies efficitur, ipsum eros dapibus ante, in imperdiet ligula tortor a nisl. Etiam viverra eros quam, sed porttitor quam laoreet eget. Cras rhoncus sapien sed lacus
    egestas, ac posuere diam placerat. Vestibulum eleifend elit lectus, in porttitor purus egestas non. Vestibulum rutrum eros dolor, non dignissim nulla elementum at. Aliquam condimentum hendrerit nisl, et facilisis dui mollis ac.</p>
  <p>Cras aliquet sapien id lectus auctor tristique et vel dui. In placerat enim ut rhoncus ornare. Aenean lacus diam, ultricies vel lorem eget, bibendum aliquam risus. Nullam sit amet ante ut sem aliquam vehicula ac ac tellus. Donec a eros condimentum,
    congue elit id, fermentum ex. Sed ac eleifend felis, quis vulputate diam. Vestibulum pharetra aliquet ante tempus aliquam. Cras sed mi est. Proin consectetur neque vitae ipsum facilisis, iaculis consequat ex fringilla. Vestibulum ante ipsum primis
    in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent semper dictum tempus. Sed facilisis mi vel sagittis convallis. Sed tincidunt molestie maximus. Maecenas nec dignissim neque.</p>
  <p>Vestibulum ut turpis placerat, posuere nunc id, imperdiet libero. Sed euismod, massa in faucibus viverra, erat nibh semper lacus, at finibus velit urna at nisl. Pellentesque viverra arcu quis lectus dapibus tempus. Vivamus tortor ligula, faucibus non
    sem eget, lacinia rhoncus velit. Suspendisse volutpat ultricies maximus. Donec ipsum erat, semper in consectetur sed, lacinia eu neque. Morbi est tellus, eleifend eget est eu, pretium ultricies sapien. Curabitur facilisis, ligula in egestas feugiat,
    sem orci molestie nunc, quis facilisis ex orci non augue. Proin congue tincidunt lorem a convallis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec semper mauris vitae ligula faucibus, non consequat eros
    mattis. Sed ut sagittis sapien. Etiam auctor eros et enim porttitor, ac maximus leo pulvinar. Vestibulum tortor ipsum, rhoncus nec laoreet id, consequat et lectus. Nullam venenatis molestie massa et maximus. Mauris luctus leo nec risus molestie, non
    egestas nulla scelerisque.</p>
  <p>Sed euismod, ligula quis fringilla commodo, nibh enim rutrum magna, a cursus nunc justo sit amet enim. Ut consequat pellentesque lectus nec feugiat. Donec at ligula sed urna faucibus elementum. Duis luctus tellus ac volutpat fermentum. Curabitur ultrices
    leo sit amet mi rhoncus, rhoncus commodo felis vehicula. Nullam non lorem ac ipsum bibendum ultricies. Sed scelerisque sit amet lacus eget faucibus. Quisque scelerisque cursus dolor, nec porta felis tincidunt ut. Quisque porttitor orci lectus, ac
    viverra eros sollicitudin rutrum. Sed eros sapien, sollicitudin a ex a, euismod vulputate lectus. Duis non erat iaculis, suscipit justo quis, consequat erat. Nam aliquam semper purus, sed suscipit neque volutpat ut. Curabitur a leo mauris. Praesent
    eu elit id risus ullamcorper gravida quis vitae odio. Vestibulum a quam pharetra, pulvinar leo nec, lacinia diam. Mauris vulputate mauris enim, sed vehicula diam volutpat eu.</p>
  <p>In bibendum volutpat tortor, at pretium neque blandit id. Sed malesuada hendrerit nibh sit amet rutrum. Praesent pulvinar erat non nisi mattis convallis. Nulla lacus libero, fermentum ut lacinia et, viverra eu dolor. Mauris ipsum massa, faucibus ac
    finibus et, pharetra consectetur orci. Morbi mattis bibendum laoreet. Aliquam hendrerit auctor mi vestibulum rhoncus. Donec sit amet auctor nisi. Suspendisse eget massa accumsan, fringilla lacus cursus, placerat purus. Donec tempor laoreet turpis
    non eleifend. Suspendisse porttitor egestas elit, in ornare enim accumsan vulputate. Nulla facilisi.</p>
  <p>Donec blandit nisl nulla, non tristique sapien auctor ut. Donec malesuada vehicula sodales. In sit amet ultrices velit. Aliquam in ex a eros laoreet feugiat ullamcorper in risus. Donec quis nunc nulla. Phasellus maximus porta tortor, ut feugiat sem
    tempor vel. Nunc eu tellus fermentum purus lobortis mollis a eget sapien. Fusce nec efficitur massa. Fusce quis odio eu felis egestas elementum. Aliquam cursus tempus tempor. Fusce vel egestas massa, eget accumsan tellus. Pellentesque hendrerit ultrices
    malesuada. Etiam lacinia sem eu mi ornare bibendum. Aliquam ultrices, magna vitae malesuada commodo, orci justo fringilla magna, in gravida lectus lacus eu nunc. Maecenas viverra elit lorem, eget lacinia urna posuere non.</p>
  <p>Etiam nec facilisis tellus. Vestibulum semper maximus quam, sit amet mollis dui varius sit amet. Suspendisse malesuada interdum sapien ut semper. Vivamus sed egestas purus. Quisque justo purus, pretium dapibus luctus vel, luctus sed ligula. Vivamus
    ac sem massa. Quisque nec sem sit amet nulla aliquet rutrum id et felis. Mauris quis cursus lorem. Morbi ut ipsum in nibh imperdiet posuere. Praesent ultricies augue in volutpat mollis.</p>
</content>
<footer>Footer</footer>
            
          
!
            
              :root {
  --padding: 15px;
  --header-height: 100px;
  --footer-height: 50px;
}
html, body {
  height: 100%;
  margin: 0; padding: 0;
}
body {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-gap: var(--padding);
  grid-template-rows: 
    var(--header-height) 
    auto 
    var(--footer-height);
  box-sizing: border-box;
}
header {
  grid-column: 1 / 3;
  grid-row: 1;
  outline: 1px solid red;
  padding: var(--padding);
}
sidebar {
  grid-column: 1 / 2;
  grid-row: 2;
  outline: 1px solid red;
  padding: var(--padding);
  overflow-y: scroll;
}
content {
  grid-column: 2 / 3;
  grid-row: 2;
  outline: 1px solid red;
  padding: var(--padding);
  overflow-y: scroll;
}
content > p {
  margin: 0;
}
footer {
  outline: 1px solid red;
  grid-column: 1 / 3;
  grid-row: 3;
  padding: var(--padding);
}

            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console