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

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

              
                Texte de Flaubert, Salammbo.

<section><p>D'abord on leur servit des oiseaux à la sauce verte, dans des assiettes d'argile rouge rehaussée de dessins noirs, puis toutes les espèces de coquillages que l'on ramasse sur les côtes puniques, des bouillies de froment, de fève et d'orge, et des escargots au cumin, sur des plats d'ambre jaune.</p>

<p>Ensuite les tables furent couvertes de viandes antilopes : avec leurs cornes, paons avec leurs plumes, moutons entiers cuits au vin doux, gigots de chamelles et de buffles, hérissons au garum, cigales frites et loirs confits. Dans des gamelles en bois de Tamrapanni flottaient, au milieu du safran, de grands morceaux de graisse. Tout débordait de saumure, de truffes et d'assa foetida. Les pyramides de fruits s'éboulaient sur les gâteaux de miel, et l'on n'avait pas oublié quelques- uns de ces petits chiens à gros ventre et à soies roses que l'on engraissait avec du marc d'olives, mets carthaginois en abomination aux autres peuples. La surprise des nourritures nouvelles excitait la cupidité des estomacs. Les Gaulois aux longs cheveux retroussés sur le sommet de la tête, s'arrachaient les pastèques et les limons qu'ils croquaient avec l'écorce. Des Nègres n'ayant jamais vu de langoustes se déchiraient le visage à leurs piquants rouges. Mais les Grecs rasés, plus blancs que des marbres, jetaient derrière eux les épluchures de leur assiette, tandis que des pâtres du Brutium, vêtus de peaux de loups, dévoraient silencieusement, le visage dans leur portion.</p>

<p>La nuit tombait. On retira le velarium étalé sur l'avenue de cyprès et l'on apporta des flambeaux.</p>

<p>Les lueurs vacillantes du pétrole qui brûlait dans des vases de porphyre effrayèrent, au haut des cèdres, les singes consacrés à la lune. Ils poussèrent des cris, ce qui mit les soldats en gaieté.</p>

<p>Des flammes oblongues tremblaient sur les cuirasses d'airain. Toutes sortes de scintillements jaillissaient des plats incrustés de pierres précieuses. Les cratères, à bordure de miroirs convexes, multipliaient l'image élargie des choses ; les soldats se pressant autour s'y regardaient avec ébahissement et grimaçaient pour se faire rire. Ils se lançaient, par- dessus les tables, les escabeaux d'ivoire et les spatules d'or. Ils avalaient à pleine gorge tous les vins grecs qui sont dans des outres, les vins de Campanie enfermés dans des amphores, les vins des Cantabres que l'on apporte dans des tonneaux, et les vins de jujubier, de cinnamome et de lotus. Il y en avait des flaques par terre où l'on glissait. La fumée des viandes montait dans les feuillages avec la vapeur des haleines. On entendait à la fois le claquement des mâchoires, le bruit des paroles, des chansons, des coupes, le fracas des vases campaniens qui s'écroulaient en mille morceaux, ou le son limpide d'un grand plat d'argent.</p>
  
  <p>
A mesure qu'augmentait leur ivresse, ils se rappelaient de plus en plus l'injustice de Carthage. En effet, la République, épuisée par la guerre, avait laissé s'accumuler dans la ville toutes les bandes qui revenaient. Giscon, leur général, avait eu cependant la prudence de les renvoyer les uns après les autres pour faciliter l'acquittement de leur solde, et le Conseil avait cru qu'ils finiraient par consentir à quelque diminution. Mais on leur en voulait aujourd'hui de ne pouvoir les payer. Cette dette se confondait dans l'esprit du peuple avec les trois mille deux cents talents euboïques exigés par Lutatius, et ils étaient, comme Rome, un ennemi pour Carthage. Les Mercenaires le comprenaient ; aussi leur indignation éclatait en menaces et en débordements. Enfin, ils demandèrent à se réunir pour célébrer une de leurs victoires, et le parti de la paix céda, en se vengeant d'Hamilcar qui avait tant soutenu la guerre. Elle s'était terminée contre tous ses efforts, si bien que, désespérant de Carthage, il avait remis à Giscon le gouvernement des Mercenaires. Désigner son palais pour les recevoir, c'était attirer sur lui quelque chose de la haine qu'on leur portait. D'ailleurs la dépense devait être excessive ; il la subirait presque toute.  </p>
 </section>
              
            
!

CSS

              
                section {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}

p {
  margin: 2ch 4ch;
  background-color: #ffcc00;
  padding: 4ch;
  overflow: scroll;
}
p:nth-child(1) {
  width: 10ch;
  aspect-ratio: 1 / 1;
}
p:nth-child(2) {
  width: 20ch;
  aspect-ratio: 2 / 1;
}
p:nth-child(3) {
  width: 30ch;
  aspect-ratio: 3 / 1;
}
p:nth-child(4) {
  width: 40ch;
  aspect-ratio: 4 / 1;
}
p:nth-child(5) {
  width: 50ch;
  aspect-ratio: 5 / 1;
}
p:nth-child(6) {
  width: 60ch;
  aspect-ratio: 6 / 1;
}

              
            
!

JS

              
                
              
            
!
999px

Console