Pen Settings

HTML

CSS

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

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

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

Behavior

Save Automatically?

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

Auto-Updating Preview

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

Format on Save

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

Editor Settings

Code Indentation

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

Visit your global Editor Settings.

HTML

              
                <html>
  <body>
    <div class="content">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Et hercule mihi vir optimus nostrique amantissimus, Aulus Torquatus, versatur ante oculos, cuius quantum studium et quam insigne fuerit erga me temporibus illis, quae nota sunt omnibus, scire necesse est utrumque vestrum. Is enim percontando atque interrogando elicere solebat eorum opiniones, quibuscum disserebat, ut ad ea, quae ii respondissent, si quid videretur, diceret. Itaque Epicurus semper hoc utitur, ut probet voluptatem natura expeti, quod ea voluptas, quae in motu sit, et parvos ad se alliciat et bestias, non illa stabilis, in qua tantum inest nihil dolere. At vero Epicurus una in domo, et ea quidem angusta, quam magnos quantaque amoris conspiratione consentientis tenuit amicorum greges! quod fit etiam nunc ab Epicureis.</p> 
<p>Eiuro, inquit adridens, iniquum, hac quidem de re; Quoniam, inquiunt, omne peccatum inbecillitatis et inconstantiae est, haec autem vitia in omnibus stultis aeque magna sunt, necesse est paria esse peccata. Duo Reges: constructio interrete. Quare attendo te studiose et, quaecumque rebus iis, de quibus hic sermo est, nomina inponis, memoriae mando; Familiares nostros, credo, Sironem dicis et Philodemum, cum optimos viros, tum homines doctissimos. <b>Sed haec omittamus;</b> Nec vero dico eorum metum mortis, qui, quia privari se vitae bonis arbitrentur, aut quia quasdam post mortem formidines extimescant, aut si metuant, ne cum dolore moriantur, idcirco mortem fugiant; Quam quidem certationem homo et acutus et diligens, Chrysippus, non contemnit totumque discrimen summi boni in earum comparatione positum putat. Ut bacillum aliud est inflexum et incurvatum de industria, aliud ita natum, sic ferarum natura non est illa quidem depravata mala disciplina, sed natura sua. Nunc ita separantur, ut disiuncta sint, quo nihil potest esse perversius. Nam quod ait sensibus ipsis iudicari voluptatem bonum esse, dolorem malum, plus tribuit sensibus, quam nobis leges permittunt, cum privatarum litium iudices sumus. </p>

<p><b>Que Manilium, ab iisque M.</b> In ipsa enim parum magna vis inest, ut quam optime se habere possit, si nulla cultura adhibeatur. Est enim perspicuum nullam artem ipsam in se versari, sed esse aliud artem ipsam, aliud quod propositum sit arti. Sic, et quidem diligentius saepiusque ista loquemur inter nos agemusque communiter. <b>Poterat autem inpune;</b> Atque hoc dabitis, ut opinor, si modo sit aliquid esse beatum, id oportere totum poni in potestate sapientis. Is enim, qui occultus et tectus dicitur, tantum abest ut se indicet, perficiet etiam ut dolere alterius improbe facto videatur. Aristoteles, Xenocrates, tota illa familia non dabit, quippe qui valitudinem, vires, divitias, gloriam, multa alia bona esse dicant, laudabilia non dicant. Idque quo magis quidam ita faciunt, ut iure etiam reprehendantur, hoc magis intellegendum est haec ipsa nimia in quibusdam futura non fuisse, nisi quaedam essent modica natura. Quis enim tam inimicus paene nomini Romano est, qui Ennii Medeam aut Antiopam Pacuvii spernat aut reiciat, quod se isdem Euripidis fabulis delectari dicat, Latinas litteras oderit? Tamen aberramus a proposito, et, ne longius, prorsus, inquam, Piso, si ista mala sunt, placet. Si movente, quod tamen dicitis, nulla turpis voluptas erit, quae praetermittenda sit, et simul non proficiscitur animal illud modo natum a summa voluptate, quae est a te posita in non dolendo. </p>

<p>Minime vero probatur huic disciplinae, de qua loquor, aut iustitiam aut amicitiam propter utilitates adscisci aut probari. Nam et amici cultus et parentis ei, qui officio fungitur, in eo ipso prodest, quod ita fungi officio in recte factis est, quae sunt orta virtutibus. Vives, inquit Aristo, magnifice atque praeclare, quod erit cumque visum ages, numquam angere, numquam cupies, numquam timebis. <b>Obsecro, inquit, Torquate, haec dicit Epicurus?</b> Atque his tribus generibus honestorum notatis quartum sequitur et in eadem pulchritudine et aptum ex illis tribus, in quo inest ordo et moderatio. Tantum dico, magis fuisse vestrum agere Epicuri diem natalem, quam illius testamento cavere ut ageretur. Mihi quidem etiam lautius videtur, quod eligitur, et ad quod dilectus adhibetur -, sed, cum ego ista omnia bona dixero, tantum refert quam magna dicam, cum expetenda, quam valde. Cuius etiam illi hortuli propinqui non memoriam solum mihi afferunt, sed ipsum videntur in conspectu meo ponere. Quamquam ea verba, quibus instituto veterum utimur pro Latinis, ut ipsa philosophia, ut rhetorica, dialectica, grammatica, geometria, musica, quamquam Latine ea dici poterant, tamen, quoniam usu percepta sunt, nostra ducamus. Ut bacillum aliud est inflexum et incurvatum de industria, aliud ita natum, sic ferarum natura non est illa quidem depravata mala disciplina, sed natura sua. Nam cum Academicis incerta luctatio est, qui nihil affirmant et quasi desperata cognitione certi id sequi volunt, quodcumque veri simile videatur. <b>Honesta oratio, Socratica, Platonis etiam.</b> Bonum appello quicquid secundurn naturam est, quod contra malum, nec ego solus, sed tu etiam, Chrysippe, in foro, domi; E quo efficitur, non ut nos non intellegamus quae vis sit istius verbi, sed ut ille suo more loquatur, nostrum neglegat. </p>

<p>Nam qui valitudinem aestimatione aliqua dignam iudicamus neque eam tamen in bonis ponimus, idem censemus nullam esse tantam aestimationem, ut ea virtuti anteponatur. <i>Est, ut dicis, inquit;</i> Pompeius in foedere Numantino infitiando fuit, nec vero omnia timente, sed primum qui animi conscientiam non curet, quam scilicet comprimere nihil est negotii. <mark>Ita prorsus, inquam;</mark> <b>Conferam avum tuum Drusum cum C.</b> Ius autem, quod ita dici appellarique possit, id esse natura, alienumque esse a sapiente non modo iniuriam cui facere, verum etiam nocere. Cum autem usus progrediens familiaritatem effecerit, tum amorem efflorescere tantum, ut, etiamsi nulla sit utilitas ex amicitia, tamen ipsi amici propter se ipsos amentur. Huc et illuc, Torquate, vos versetis licet, nihil in hac praeclara epistula scriptum ab Epicuro congruens et conveniens decretis eius reperietis. Ita fiet, ut animi virtus corporis virtuti anteponatur animique virtutes non voluntarias vincant virtutes voluntariae, quae quidem proprie virtutes appellantur multumque excellunt, propterea quod ex ratione gignuntur, qua nihil est, in homine divinius. Nos beatam vitam non depulsione mali, sed adeptione boni iudicemus, nec eam cessando, sive gaudentem, ut Aristippus, sive non dolentem, ut hic, sed agendo aliquid considerandove quaeramus. </p>

<p><b>Cave putes quicquam esse verius.</b> <b>Huius ego nunc auctoritatem sequens idem faciam.</b> Iam insipientes alios ita esse, ut nullo modo ad sapientiam possent pervenire, alios, qui possent, si id egissent, sapientiam consequi. Atque haec contra Aristippum, qui eam voluptatem non modo summam, sed solam etiam ducit, quam omnes unam appellamus voluptatem. Videsne quam sit magna dissensio? Quis contra in illa aetate pudorem, constantiam, etiamsi sua nihil intersit, non tamen diligat? <mark>Quonam, inquit, modo?</mark> In omni enim animante est summum aliquid atque optimum, ut in equis, in canibus, quibus tamen et dolore vacare opus est et valere; Et tamen quid attinet luxuriosis ullam exceptionem dari aut fingere aliquos, qui, cum luxuriose viverent, a summo philosopho non reprehenderentur eo nomine dumtaxat, cetera caverent? Quae quidem omnia et innumerabilia praeterea quis est quin intellegat et eos qui fecerint dignitatis splendore ductos inmemores fuisse utilitatum suarum nosque, cum ea laudemus, nulla alla re nisi honestate duci? Quasi vero hoc didicisset a Zenone, non dolere, cum doleret! Illud audierat nec tamen didicerat, malum illud non esse, quia turpe non esset, et esse ferendum viro. <mark>Omnia peccata paria dicitis.</mark> Qui cum cruciaretur non ferendis doloribus, propagabat tamen vitam aucupio, sagittarum ictu configebat tardus celeres, stans volantis, ut apud Accium est, pennarumque contextu corpori tegumenta faciebat. Quam ob rem utique idem faciunt, ut si laevam partem neglegerent, dexteram tuerentur, aut ipsius animi, ut fecit Erillus, cognitionem amplexarentur, actionem relinquerent. </p>
    </div>
  </body>
</html>
              
            
!

CSS

              
                body{
  padding:50px calc(50% - 350px);
  font-size:1em;
  line-height:2em;
}

div.content{
  padding:.5em;
  background: linear-gradient(#ccf2fa 50%, #ffffff 50%);
  background-size: 100% 4em;
  background-origin: content-box; 
}
              
            
!

JS

              
                
              
            
!
999px

Console