cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatpop-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.

            
              <html>
  <head>
    <title>document paragraph section test</title>
  </head>
  <body>
    <h1>Heading 1</h1>
    <p>Labores salutatus pro in, quaerendum adversarium mea te. Eos gloriatur tincidunt sadipscing at, ius nusquam docendi id. Quo mutat soleat tractatos ut, no per nullam facilis imperdiet. Vocent mentitum sit ex.
  </p>
  <p>
Ut facer omittam sea, his adhuc facilisi accommodare ut. Ornatus docendi splendide ius cu, numquam fuisset praesent his ea. Nec cu hinc assum voluptaria. Stet saperet id mei. Ius at audiam utamur, est et prima verear suscipit. An posse audiam tritani eum, aperiri iracundia vituperata no est.
  </p>
  <p>
Omittam fastidii interpretaris cum in, ex cibo assum vel. Sea autem quodsi ne. Id ridens voluptatum ius. Per an alienum convenire, ut quo posse indoctum. Ex eum brute velit appareat, pro ne nibh labore numquam.
  </p>
  <p>
Ius blandit ocurreret aliquando ei, an vix duis recteque reformidans, ei vulputate temporibus suscipiantur nam. Mei nemore labitur et, ea consul putent repudiandae sed, no mea falli tamquam. Duo quot inciderint persequeris ut. Homero possit sed an. No eos nostrum verterem.
  </p>
  <p>
Mea vivendum posidonium id, modus vocibus vis ad, id diam expetendis ius. Cu virtute tractatos mnesarchum vel, cu vitae officiis prodesset mel, qui utinam essent ne. Ad nobis salutatus his. Mea id aliquip mandamus scripserit, et sint intellegebat his. Vim no lucilius volutpat, mel ne sonet consequuntur.
  </p>
  <p>
Mazim aliquam in ius. Ipsum euismod consectetuer ea mel, mea id iisque petentium persequeris. Civibus appareat necessitatibus at sea. Te modo adipiscing nam, pro illum debet percipit te. In probo semper expetenda pri, mel eu option tibique.
  </p>
  <p>
Ei dictas maluisset cum. Mei tation suscipit legendos et, ut dico sonet animal nam. Te brute constituam vel. Erroribus scriptorem cum ne. Ex vivendo nominavi mel, inani nonumes qui in.
  </p>
  <p>
Sit solum noster corpora id, per harum laudem antiopam ut. Et inermis commune suscipit sea, te pro solum efficiendi referrentur. Ei qui dolor honestatis, eu fabulas dissentias mel. Persius patrioque inciderint eos at, eos ad facete salutatus corrumpit, esse velit dictas vel et. Pericula scripserit per an, in inani iuvaret blandit nam. Ut eum novum deserunt quaestio, ad vim tollit option intellegam.
  </p>
  <p>
Per eu prima primis corpora, ei ludus suscipiantur voluptatibus eum, ne posse possim vix. Ei habeo exerci accusamus ius. Suas facilisis consetetur te eum, corpora offendit dissentiunt ius no, eu est atomorum adolescens. Sale labores id qui, qui et vitae possit. Sit et assum periculis principes, ne his epicuri offendit accommodare, est cu causae recusabo.
  </p>
  <p>
Graecis blandit pericula eos ea, no duo stet accumsan. Cu eam congue vivendum tincidunt, his eu fastidii deleniti prodesset. Sed ad petentium prodesset, duis nullam intellegam te sit. Cu invenire evertitur contentiones duo, eos oratio officiis deseruisse no. Tempor nusquam vel at, no nam recusabo gloriatur. Est phaedrum recteque ne.
</p>
    <h2>Heading 2</h2>
    <p>Labores salutatus pro in, quaerendum adversarium mea te. Eos gloriatur tincidunt sadipscing at, ius nusquam docendi id. Quo mutat soleat tractatos ut, no per nullam facilis imperdiet. Vocent mentitum sit ex.
  </p>
  <p>
Ut facer omittam sea, his adhuc facilisi accommodare ut. Ornatus docendi splendide ius cu, numquam fuisset praesent his ea. Nec cu hinc assum voluptaria. Stet saperet id mei. Ius at audiam utamur, est et prima verear suscipit. An posse audiam tritani eum, aperiri iracundia vituperata no est.
  </p>
  <p>
Omittam fastidii interpretaris cum in, ex cibo assum vel. Sea autem quodsi ne. Id ridens voluptatum ius. Per an alienum convenire, ut quo posse indoctum. Ex eum brute velit appareat, pro ne nibh labore numquam.
  </p>
  <p>
Ius blandit ocurreret aliquando ei, an vix duis recteque reformidans, ei vulputate temporibus suscipiantur nam. Mei nemore labitur et, ea consul putent repudiandae sed, no mea falli tamquam. Duo quot inciderint persequeris ut. Homero possit sed an. No eos nostrum verterem.
  </p>
  <p>
Mea vivendum posidonium id, modus vocibus vis ad, id diam expetendis ius. Cu virtute tractatos mnesarchum vel, cu vitae officiis prodesset mel, qui utinam essent ne. Ad nobis salutatus his. Mea id aliquip mandamus scripserit, et sint intellegebat his. Vim no lucilius volutpat, mel ne sonet consequuntur.
  </p>
  <p>
Mazim aliquam in ius. Ipsum euismod consectetuer ea mel, mea id iisque petentium persequeris. Civibus appareat necessitatibus at sea. Te modo adipiscing nam, pro illum debet percipit te. In probo semper expetenda pri, mel eu option tibique.
  </p>
  <p>
Ei dictas maluisset cum. Mei tation suscipit legendos et, ut dico sonet animal nam. Te brute constituam vel. Erroribus scriptorem cum ne. Ex vivendo nominavi mel, inani nonumes qui in.
  </p>
  <p>
Sit solum noster corpora id, per harum laudem antiopam ut. Et inermis commune suscipit sea, te pro solum efficiendi referrentur. Ei qui dolor honestatis, eu fabulas dissentias mel. Persius patrioque inciderint eos at, eos ad facete salutatus corrumpit, esse velit dictas vel et. Pericula scripserit per an, in inani iuvaret blandit nam. Ut eum novum deserunt quaestio, ad vim tollit option intellegam.
  </p>
  <p>
Per eu prima primis corpora, ei ludus suscipiantur voluptatibus eum, ne posse possim vix. Ei habeo exerci accusamus ius. Suas facilisis consetetur te eum, corpora offendit dissentiunt ius no, eu est atomorum adolescens. Sale labores id qui, qui et vitae possit. Sit et assum periculis principes, ne his epicuri offendit accommodare, est cu causae recusabo.
  </p>
  <p>
Graecis blandit pericula eos ea, no duo stet accumsan. Cu eam congue vivendum tincidunt, his eu fastidii deleniti prodesset. Sed ad petentium prodesset, duis nullam intellegam te sit. Cu invenire evertitur contentiones duo, eos oratio officiis deseruisse no. Tempor nusquam vel at, no nam recusabo gloriatur. Est phaedrum recteque ne.
</p>
    <h3>Heading 3</h3>
    <p>Labores salutatus pro in, quaerendum adversarium mea te. Eos gloriatur tincidunt sadipscing at, ius nusquam docendi id. Quo mutat soleat tractatos ut, no per nullam facilis imperdiet. Vocent mentitum sit ex.
  </p>
  <p>
Ut facer omittam sea, his adhuc facilisi accommodare ut. Ornatus docendi splendide ius cu, numquam fuisset praesent his ea. Nec cu hinc assum voluptaria. Stet saperet id mei. Ius at audiam utamur, est et prima verear suscipit. An posse audiam tritani eum, aperiri iracundia vituperata no est.
  </p>
  <p>
Omittam fastidii interpretaris cum in, ex cibo assum vel. Sea autem quodsi ne. Id ridens voluptatum ius. Per an alienum convenire, ut quo posse indoctum. Ex eum brute velit appareat, pro ne nibh labore numquam.
  </p>
  <p>
Ius blandit ocurreret aliquando ei, an vix duis recteque reformidans, ei vulputate temporibus suscipiantur nam. Mei nemore labitur et, ea consul putent repudiandae sed, no mea falli tamquam. Duo quot inciderint persequeris ut. Homero possit sed an. No eos nostrum verterem.
  </p>
  <p>
Mea vivendum posidonium id, modus vocibus vis ad, id diam expetendis ius. Cu virtute tractatos mnesarchum vel, cu vitae officiis prodesset mel, qui utinam essent ne. Ad nobis salutatus his. Mea id aliquip mandamus scripserit, et sint intellegebat his. Vim no lucilius volutpat, mel ne sonet consequuntur.
  </p>
  <p>
Mazim aliquam in ius. Ipsum euismod consectetuer ea mel, mea id iisque petentium persequeris. Civibus appareat necessitatibus at sea. Te modo adipiscing nam, pro illum debet percipit te. In probo semper expetenda pri, mel eu option tibique.
  </p>
  <p>
Ei dictas maluisset cum. Mei tation suscipit legendos et, ut dico sonet animal nam. Te brute constituam vel. Erroribus scriptorem cum ne. Ex vivendo nominavi mel, inani nonumes qui in.
  </p>
  <p>
Sit solum noster corpora id, per harum laudem antiopam ut. Et inermis commune suscipit sea, te pro solum efficiendi referrentur. Ei qui dolor honestatis, eu fabulas dissentias mel. Persius patrioque inciderint eos at, eos ad facete salutatus corrumpit, esse velit dictas vel et. Pericula scripserit per an, in inani iuvaret blandit nam. Ut eum novum deserunt quaestio, ad vim tollit option intellegam.
  </p>
  <p>
Per eu prima primis corpora, ei ludus suscipiantur voluptatibus eum, ne posse possim vix. Ei habeo exerci accusamus ius. Suas facilisis consetetur te eum, corpora offendit dissentiunt ius no, eu est atomorum adolescens. Sale labores id qui, qui et vitae possit. Sit et assum periculis principes, ne his epicuri offendit accommodare, est cu causae recusabo.
  </p>
  <p>
Graecis blandit pericula eos ea, no duo stet accumsan. Cu eam congue vivendum tincidunt, his eu fastidii deleniti prodesset. Sed ad petentium prodesset, duis nullam intellegam te sit. Cu invenire evertitur contentiones duo, eos oratio officiis deseruisse no. Tempor nusquam vel at, no nam recusabo gloriatur. Est phaedrum recteque ne.
</p>
    <h2>Heading 2</h2>
    <p>Labores salutatus pro in, quaerendum adversarium mea te. Eos gloriatur tincidunt sadipscing at, ius nusquam docendi id. Quo mutat soleat tractatos ut, no per nullam facilis imperdiet. Vocent mentitum sit ex.
  </p>
  <p>
Ut facer omittam sea, his adhuc facilisi accommodare ut. Ornatus docendi splendide ius cu, numquam fuisset praesent his ea. Nec cu hinc assum voluptaria. Stet saperet id mei. Ius at audiam utamur, est et prima verear suscipit. An posse audiam tritani eum, aperiri iracundia vituperata no est.
  </p>
  <p>
Omittam fastidii interpretaris cum in, ex cibo assum vel. Sea autem quodsi ne. Id ridens voluptatum ius. Per an alienum convenire, ut quo posse indoctum. Ex eum brute velit appareat, pro ne nibh labore numquam.
  </p>
  <p>
Ius blandit ocurreret aliquando ei, an vix duis recteque reformidans, ei vulputate temporibus suscipiantur nam. Mei nemore labitur et, ea consul putent repudiandae sed, no mea falli tamquam. Duo quot inciderint persequeris ut. Homero possit sed an. No eos nostrum verterem.
  </p>
  <p>
Mea vivendum posidonium id, modus vocibus vis ad, id diam expetendis ius. Cu virtute tractatos mnesarchum vel, cu vitae officiis prodesset mel, qui utinam essent ne. Ad nobis salutatus his. Mea id aliquip mandamus scripserit, et sint intellegebat his. Vim no lucilius volutpat, mel ne sonet consequuntur.
  </p>
  <p>
Mazim aliquam in ius. Ipsum euismod consectetuer ea mel, mea id iisque petentium persequeris. Civibus appareat necessitatibus at sea. Te modo adipiscing nam, pro illum debet percipit te. In probo semper expetenda pri, mel eu option tibique.
  </p>
  <p>
Ei dictas maluisset cum. Mei tation suscipit legendos et, ut dico sonet animal nam. Te brute constituam vel. Erroribus scriptorem cum ne. Ex vivendo nominavi mel, inani nonumes qui in.
  </p>
  <p>
Sit solum noster corpora id, per harum laudem antiopam ut. Et inermis commune suscipit sea, te pro solum efficiendi referrentur. Ei qui dolor honestatis, eu fabulas dissentias mel. Persius patrioque inciderint eos at, eos ad facete salutatus corrumpit, esse velit dictas vel et. Pericula scripserit per an, in inani iuvaret blandit nam. Ut eum novum deserunt quaestio, ad vim tollit option intellegam.
  </p>
  <p>
Per eu prima primis corpora, ei ludus suscipiantur voluptatibus eum, ne posse possim vix. Ei habeo exerci accusamus ius. Suas facilisis consetetur te eum, corpora offendit dissentiunt ius no, eu est atomorum adolescens. Sale labores id qui, qui et vitae possit. Sit et assum periculis principes, ne his epicuri offendit accommodare, est cu causae recusabo.
  </p>
  <p>
Graecis blandit pericula eos ea, no duo stet accumsan. Cu eam congue vivendum tincidunt, his eu fastidii deleniti prodesset. Sed ad petentium prodesset, duis nullam intellegam te sit. Cu invenire evertitur contentiones duo, eos oratio officiis deseruisse no. Tempor nusquam vel at, no nam recusabo gloriatur. Est phaedrum recteque ne.
</p>
    <h1>Heading 1</h1>
    <p>Labores salutatus pro in, quaerendum adversarium mea te. Eos gloriatur tincidunt sadipscing at, ius nusquam docendi id. Quo mutat soleat tractatos ut, no per nullam facilis imperdiet. Vocent mentitum sit ex.
  </p>
  <p>
Ut facer omittam sea, his adhuc facilisi accommodare ut. Ornatus docendi splendide ius cu, numquam fuisset praesent his ea. Nec cu hinc assum voluptaria. Stet saperet id mei. Ius at audiam utamur, est et prima verear suscipit. An posse audiam tritani eum, aperiri iracundia vituperata no est.
  </p>
  <p>
Omittam fastidii interpretaris cum in, ex cibo assum vel. Sea autem quodsi ne. Id ridens voluptatum ius. Per an alienum convenire, ut quo posse indoctum. Ex eum brute velit appareat, pro ne nibh labore numquam.
  </p>
  <p>
Ius blandit ocurreret aliquando ei, an vix duis recteque reformidans, ei vulputate temporibus suscipiantur nam. Mei nemore labitur et, ea consul putent repudiandae sed, no mea falli tamquam. Duo quot inciderint persequeris ut. Homero possit sed an. No eos nostrum verterem.
  </p>
  <p>
Mea vivendum posidonium id, modus vocibus vis ad, id diam expetendis ius. Cu virtute tractatos mnesarchum vel, cu vitae officiis prodesset mel, qui utinam essent ne. Ad nobis salutatus his. Mea id aliquip mandamus scripserit, et sint intellegebat his. Vim no lucilius volutpat, mel ne sonet consequuntur.
  </p>
  <p>
Mazim aliquam in ius. Ipsum euismod consectetuer ea mel, mea id iisque petentium persequeris. Civibus appareat necessitatibus at sea. Te modo adipiscing nam, pro illum debet percipit te. In probo semper expetenda pri, mel eu option tibique.
  </p>
  <p>
Ei dictas maluisset cum. Mei tation suscipit legendos et, ut dico sonet animal nam. Te brute constituam vel. Erroribus scriptorem cum ne. Ex vivendo nominavi mel, inani nonumes qui in.
  </p>
  <p>
Sit solum noster corpora id, per harum laudem antiopam ut. Et inermis commune suscipit sea, te pro solum efficiendi referrentur. Ei qui dolor honestatis, eu fabulas dissentias mel. Persius patrioque inciderint eos at, eos ad facete salutatus corrumpit, esse velit dictas vel et. Pericula scripserit per an, in inani iuvaret blandit nam. Ut eum novum deserunt quaestio, ad vim tollit option intellegam.
  </p>
  <p>
Per eu prima primis corpora, ei ludus suscipiantur voluptatibus eum, ne posse possim vix. Ei habeo exerci accusamus ius. Suas facilisis consetetur te eum, corpora offendit dissentiunt ius no, eu est atomorum adolescens. Sale labores id qui, qui et vitae possit. Sit et assum periculis principes, ne his epicuri offendit accommodare, est cu causae recusabo.
  </p>
  <p>
Graecis blandit pericula eos ea, no duo stet accumsan. Cu eam congue vivendum tincidunt, his eu fastidii deleniti prodesset. Sed ad petentium prodesset, duis nullam intellegam te sit. Cu invenire evertitur contentiones duo, eos oratio officiis deseruisse no. Tempor nusquam vel at, no nam recusabo gloriatur. Est phaedrum recteque ne.
</p>
    <h2>Heading 2</h2>
    <p>Labores salutatus pro in, quaerendum adversarium mea te. Eos gloriatur tincidunt sadipscing at, ius nusquam docendi id. Quo mutat soleat tractatos ut, no per nullam facilis imperdiet. Vocent mentitum sit ex.
  </p>
  <p>
Ut facer omittam sea, his adhuc facilisi accommodare ut. Ornatus docendi splendide ius cu, numquam fuisset praesent his ea. Nec cu hinc assum voluptaria. Stet saperet id mei. Ius at audiam utamur, est et prima verear suscipit. An posse audiam tritani eum, aperiri iracundia vituperata no est.
  </p>
  <p>
Omittam fastidii interpretaris cum in, ex cibo assum vel. Sea autem quodsi ne. Id ridens voluptatum ius. Per an alienum convenire, ut quo posse indoctum. Ex eum brute velit appareat, pro ne nibh labore numquam.
  </p>
  <p>
Ius blandit ocurreret aliquando ei, an vix duis recteque reformidans, ei vulputate temporibus suscipiantur nam. Mei nemore labitur et, ea consul putent repudiandae sed, no mea falli tamquam. Duo quot inciderint persequeris ut. Homero possit sed an. No eos nostrum verterem.
  </p>
  <p>
Mea vivendum posidonium id, modus vocibus vis ad, id diam expetendis ius. Cu virtute tractatos mnesarchum vel, cu vitae officiis prodesset mel, qui utinam essent ne. Ad nobis salutatus his. Mea id aliquip mandamus scripserit, et sint intellegebat his. Vim no lucilius volutpat, mel ne sonet consequuntur.
  </p>
  <p>
Mazim aliquam in ius. Ipsum euismod consectetuer ea mel, mea id iisque petentium persequeris. Civibus appareat necessitatibus at sea. Te modo adipiscing nam, pro illum debet percipit te. In probo semper expetenda pri, mel eu option tibique.
  </p>
  <p>
Ei dictas maluisset cum. Mei tation suscipit legendos et, ut dico sonet animal nam. Te brute constituam vel. Erroribus scriptorem cum ne. Ex vivendo nominavi mel, inani nonumes qui in.
  </p>
  <p>
Sit solum noster corpora id, per harum laudem antiopam ut. Et inermis commune suscipit sea, te pro solum efficiendi referrentur. Ei qui dolor honestatis, eu fabulas dissentias mel. Persius patrioque inciderint eos at, eos ad facete salutatus corrumpit, esse velit dictas vel et. Pericula scripserit per an, in inani iuvaret blandit nam. Ut eum novum deserunt quaestio, ad vim tollit option intellegam.
  </p>
  <p>
Per eu prima primis corpora, ei ludus suscipiantur voluptatibus eum, ne posse possim vix. Ei habeo exerci accusamus ius. Suas facilisis consetetur te eum, corpora offendit dissentiunt ius no, eu est atomorum adolescens. Sale labores id qui, qui et vitae possit. Sit et assum periculis principes, ne his epicuri offendit accommodare, est cu causae recusabo.
  </p>
  <p>
Graecis blandit pericula eos ea, no duo stet accumsan. Cu eam congue vivendum tincidunt, his eu fastidii deleniti prodesset. Sed ad petentium prodesset, duis nullam intellegam te sit. Cu invenire evertitur contentiones duo, eos oratio officiis deseruisse no. Tempor nusquam vel at, no nam recusabo gloriatur. Est phaedrum recteque ne.
</p>
  </body>
</html>
            
          
!
            
              h1, h2, h3{
  font-family: 'Julius Sans One', sans-serif;
  
}

h1{
  
  font-size:30px;
  line-height:32px;
}

h2{
  font-size:24px;
  line-height:26px;
}

h3{
  font-size:18px;
  line-height:20px;
  color: #666666;
  border-bottom:2px solid #EFEFEF;
  padding-bottom:2px;
}

p{
  margin-left:20px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

section.section_level_2 p{
  margin-left:40px;
}

section.section_level_3 p{
  margin-left:60px;
}

section.section_level_1 p:first-of-type{
  text-indent:4em;
}
            
          
!
            
              $('h1').addClass('heading1');
$('h2').addClass('heading2');
$('h3').addClass('heading3');

$('h1').wrap('<section class="chapter section_level_1"></section>');
$('h2').wrap('<section class="chapter section_level_2"></section>');
$('h3').wrap('<section class="chapter section_level_3"></section>');

var _top_section_counter = 0,
_second_section_counter = 0,
_third_section_counter = 0;

$('section.section_level_1').each(function(){
  _top_section_counter++;
  
  $(this).attr('id','chapter_' + _top_section_counter);
  
});

$('section.section_level_2').each(function(){
  _second_section_counter++;
  
  $(this).attr('id','second_section_' + _second_section_counter);
  
});

$('section.section_level_3').each(function(){
  _third_section_counter++;
  
  $(this).attr('id','third_section_' + _third_section_counter);
  
});


for(var i = 1;i <= _top_section_counter;i++){

  $('section#chapter_' + i).nextUntil('section.section_level_1').appendTo('#chapter_' + i);
  
  $('<hr/>').appendTo('#chapter_' + i);
}

for(var i = 1;i <= _second_section_counter;i++){

  $('section#second_section_' + i).nextUntil('section.section_level_2').appendTo('#second_section_' + i);
  
  
}

for(var i = 1;i <= _third_section_counter;i++){

  $('section#third_section_' + i).nextUntil('section.section_level_3').appendTo('#third_section_' + i);
  
  
}





$('section.section_level_1').each(function(){


});
            
          
!
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