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. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource


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


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.


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.


                <!-- --------------------------------------- -->
<!-- - Commencer à copier à partir de là --- -->
<!-- --------------------------------------- -->
<link href="!" rel="stylesheet">
<link href="écembreGRÈVENAL" rel="stylesheet">
<!-- Protest logo by Chris Kerr -->
  .strike512-closeinput {
    display: none

  .strike512-closeinput:checked+.strike512-container {
    display: none

  .strike512-closelabel {
    font-size: 2rem;
    position: absolute;
    right: 2rem;
    top: 1rem;
    cursor: pointer

  .strike512-container {
    border: 2px solid black;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99999;
    padding: 5vw;
    display: none;
    justify-content: center;
    font-size: 2rem;
    line-height: 1.5;
    color: white;
    font-family: Pangolin, sans-serif;
    background-color: #122038;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='' width='60' height='60' viewBox='0 0 200 200'%3E%3Cdefs%3E%3ClinearGradient id='a' gradientUnits='userSpaceOnUse' x1='100' y1='33' x2='100' y2='-3'%3E%3Cstop offset='0' stop-color='%23000' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23000' stop-opacity='1'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' gradientUnits='userSpaceOnUse' x1='100' y1='135' x2='100' y2='97'%3E%3Cstop offset='0' stop-color='%23000' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23000' stop-opacity='1'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='%230f1b30' %3E%3Crect x='100' width='100' height='100'/%3E%3Crect y='100' width='100' height='100'/%3E%3C/g%3E%3Cg fill-opacity='1'%3E%3Cpolygon fill='url(%23a)' points='100 30 0 0 200 0'/%3E%3Cpolygon fill='url(%23b)' points='100 100 0 130 0 100 200 100 200 130'/%3E%3C/g%3E%3C/svg%3E");
    background-attachment: fixed

  .strike512-container:before {
    content: " ";
    position: absolute;
    z-index: -1;
    top: 1px;
    left: 1px;
    right: 1px;
    bottom: 1px;
    border: 10px solid yellow

  .strike512-textcontainer {
    flex: 1;
    text-align: center

  .strike512-line {
    display: block

  .strike512-line1 {
    margin-top: 1rem;
    font-size: calc(1em + 1vw)

  .strike512-line2 {
    font-size: calc(2em + 1vw);
    font-weight: 900;
    text-transform: uppercase

  @media (min-width: 55rem) {
    .strike512-line2 {
      max-width: initial

  .strike512-line3 {
    font-size: calc(1em + 1vw);
    font-family: "Homemade Apple", cursive;
    color: yellow;
    transform: rotate(-2deg)

  .strike512-fistscontainer {
    flex: 1;
    display: none;
    grid-row-gap: 5px

  @media (min-width: 45rem) {
    .strike512-fistscontainer {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-column-gap: 5px

  @media (min-width: 65rem) {
    .strike512-fistscontainer {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-column-gap: 5px

  .strike512-fist {
    margin: auto;
    height: 10vw;
    width: 10vw

  .strike512-fist1 {
    color: green

  .strike512-fist2 {
    color: yellow

  .strike512-fist3 {
    color: purple

  .strike512-fist4 {
    color: red

  a.strike512-copylink {
    color: white;
    font-size: 0.9rem;
    text-align: right;
    position: absolute;
    bottom: 2rem;
    right: 2rem;

  a.strike512-copylink:visited {
    color: yellow;
<svg xmlns="" style="display: none;">
    <symbol id="fist" viewBox="0 0 100 100" fill="currentColor">
        <path d="M-192 0H-7v99h-185zM0-36h100v30H0z"/>
        <text transform="translate(66 -19.5)" font-family="'Helvetica'" font-size="2.4">
        <text transform="translate(7.2 -24.5)">
            <tspan x="0" y="0" font-family="'Helvetica-Bold'" font-size="6.1578">The Noun Project</tspan>
            <tspan x="1.12" y="4.8" font-family="'Helvetica-Bold'" font-size="4">Icon Template</tspan>
        <text transform="translate(-178.5 10.5)" font-family="'Helvetica-Bold'" font-size="6.1578">
        <path stroke="currentColor" stroke-miterlimit="10" d="M8-14.5h10M-179 16.5h17"/>
        <path d="M-170.8 31.3h8.7V40h-8.7z"/>
        <path d="M-164.5 42.3h4.8v-4.7h-4.8v4.7zm5.2.4h-5.6v-5.5h5.6v5.5zm-7 1.4h8.4v-8.2h-8.3V44zm8.8.4h-9.2v-9h9.2v9z"/>
        <path d="M-166.1 44.1l-.2-.1 8.3-"/>
        <path fill="none" d="M-179 58h35v32.5h-35z"/>
        <text transform="translate(-179 60.2)">
            <tspan x="0" y="0" font-family="'Helvetica-Bold'" font-size="3">Strokes</tspan>
            <tspan x="0" y="5" font-family="'Helvetica'" font-size="2.4">Try to keep strokes at 4px</tspan>
            <tspan x="0" y="10" font-family="'Helvetica'" font-size="2.4">Minimum stroke weight is 2px</tspan>
            <tspan x="0" y="14.5" font-family="'Helvetica'" font-size="2.4">For thicker strokes use even </tspan>
            <tspan x="0" y="17.5" font-family="'Helvetica'" font-size="2.4">numbers: 6px, 8px etc.</tspan>
            <tspan x="0" y="22" font-family="'Helvetica-Bold'" font-size="2.4">Remember to expand strokes </tspan>
            <tspan x="0" y="25" font-family="'Helvetica-Bold'" font-size="2.4">before saving as an SVG </tspan>
        <path fill="none" d="M-136.5 58h35v32.5h-35z"/>
        <text transform="translate(-136.5 60.2)">
            <tspan x="0" y="0" font-family="'Helvetica-Bold'" font-size="3">Size</tspan>
            <tspan x="0" y="5" font-family="'Helvetica'" font-size="2.4">Cannot be wider or taller than </tspan>
            <tspan x="0" y="8.5" font-family="'Helvetica'" font-size="2.4">100px (artboard size)</tspan>
            <tspan x="0" y="13.5" font-family="'Helvetica'" font-size="2.4">Scale your icon to fill as much of </tspan>
            <tspan x="0" y="16.5" font-family="'Helvetica'" font-size="2.4">the artboard as possible</tspan>
        <path fill="none" d="M-94 58h35v32.5h-35z"/>
        <text transform="translate(-94 60.2)">
            <tspan x="0" y="0" font-family="'Helvetica-Bold'" font-size="3">Ungroup</tspan>
            <tspan x="0" y="5" font-family="'Helvetica'" font-size="2.4">If your design has more than one </tspan>
            <tspan x="0" y="8" font-family="'Helvetica'" font-size="2.4">shape, make sure to ungroup</tspan>
        <path fill="none" d="M-50 58h35v32.5h-35z"/>
        <text transform="translate(-50 60.2)">
            <tspan x="0" y="0" font-family="'Helvetica-Bold'" font-size="3">Save as</tspan>
            <tspan x="0" y="5" font-family="'Helvetica'" font-size="2.4">Save as .SVG and make sure </tspan>
            <tspan x="0" y="8" font-family="'Helvetica'" font-size="2.4">“Use Artboards” is checked</tspan>
        <text transform="matrix(1.0074 0 0 1 -125.5 30.6)" font-family="'Helvetica'" font-size="2.5731">
        <text transform="matrix(1.0074 0 0 1 -41 39)" font-family="'Helvetica-Bold'" font-size="5.1462">
        <path d="M-126.5 34.8h10.2V45h-10.2zM-126.5 31.8h.5V34h-.5zM-116.8 31.8h.5V34h-.5z"/>
        <path d="M-127 32.3h11.2v.6H-127zM-83.8 33.8h10.3V44h-10.3zM-76.8 28.7h3.3V32h-3.3z"/>
        <path stroke="currentColor" stroke-miterlimit="10" d="M-178.5 22.5h30v30h-30zM-136.5 22.5h30v30h-30zM-93.5 22.5h30v30h-30zM-49.5 22.5h30v30h-30z"/>
            <path d="M43.8 20l7.8-10.3a6 6 0 00-1.2-8.5 6 6 0 00-8.5 1.2l-9.1 12 1.2.6 9.8 5zM53.4 27.5c.2.7.3 1.5.3 2.3l11.6-15.3c2-2.6 1.4-6.4-1.2-8.5a6 6 0 00-8.5 1.2L45.4 20.8l4 2a8 8 0 014 4.7zM53.3 43.3a6 6 0 008.5-1.2l12.5-16.5a6.1 6.1 0 00-4.8-9.7 6 6 0 00-4.8 2.4L52 34.8a6.1 6.1 0 001.2 8.5z"/>
            <path d="M76.2 48.8a7.6 7.6 0 01-10.7 1.5 7.7 7.7 0 01-3-5v-.4a48.7 48.7 0 00-10.2 4.4H52s0-4.5-9.6-11.4C39.1 35.5 31 32.2 31 32.2l1-2.2 11 5.6a6.3 6.3 0 008.5-2.8c1.6-3.1.4-7-2.7-8.6l-17-8.5c-1-.5-2-.7-2.9-.7a6.2 6.2 0 00-5.6 3.4c-.8 1.7-6 12.3-6.4 16.8-.1 1.2.3 3.7.7 4.8 2.6 6.9 16.6 24.7 16.6 24.7L29.9 100h37.6l-.7-30.2c2.6-2.8 5.7-7 8.3-12.9a25 25 0 001.8-9l-.7.9z"/>
            <path d="M80.8 29.9a6 6 0 00-8.4 1.1l-7.1 9.5a6.1 6.1 0 004.8 9.7 6 6 0 004.8-2.4l7.1-9.4c2-2.7 1.5-6.5-1.2-8.5z"/>
<input type="checkbox" class="strike512-closeinput" id="strike512-close" />
<div class="strike512-container">
  <label class="strike512-closelabel" for="strike512-close" alt="fermer" aria-label="Masquer">✗</label>
  <div class="strike512-textcontainer">
    <span class="strike512-line strike512-line1">Dès le 5 décembre 2019</span>
    <span class="strike512-line strike512-line2">Grève Générale</span>
    <span class="strike512-line strike512-line3">pour notre avenir&nbsp;!</span>
  <div class="strike512-fistscontainer">
    <svg class="strike512-fist strike512-fist1" width="23" height="23"><use xlink:href="#fist" /></svg>
    <svg class="strike512-fist strike512-fist2" width="23" height="23"><use xlink:href="#fist" /></svg>
    <svg class="strike512-fist strike512-fist3" width="23" height="23"><use xlink:href="#fist" /></svg>
    <svg class="strike512-fist strike512-fist4" width="23" height="23"><use xlink:href="#fist" /></svg>
    <a class="strike512-copylink" href="">copier le code de cette bannière</a>
<!-- --------------------------------------- -->
<!-- Pour n'afficher la bannière qu'une fois -->
<!-- par jour, ajoutez cette portion de code -->
<!-- --------------------------------------- -->
  var inputDisplay = document.getElementById('strike512-close');
  try {
    var lastTimestamp = localStorage.getItem('strike512-hide');
    if (lastTimestamp) {
      inputDisplay.checked = (lastTimestamp > new Date().setHours(0, 0, 0, 0));
    inputDisplay.addEventListener('change', function() {
  } catch (e) {}
<!-- --------------------------------------- -->
<!-- Fin du script pour mémoriser le choix - -->
<!-- --------------------------------------- -->
  .strike512-container {
    display: flex;
<!-- --------------------------------------- -->
<!-- -------- Et voilà, c'est fini ! ------- -->
<!-- --------------------------------------- -->

<h1>Si mala non sunt, iacet omnis ratio Peripateticorum.</h1>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Semper enim ita adsumit aliquid, ut ea, quae prima dederit, non deserat. <b>Quae contraria sunt his, malane?</b> <code>Tria genera bonorum;</code> <a href="" target="_blank">Duo Reges: constructio interrete.</a>  Est igitur officium eius generis, quod nec in bonis ponatur nec in contrariis. Ita fit illa conclusio non solum vera, sed ita perspicua, ut dialectici ne rationem quidem reddi putent oportere: si illud, hoc; Est igitur officium eius generis, quod nec
  in bonis ponatur nec in contrariis. Quod maxime efficit Theophrasti de beata vita liber, in quo multum admodum fortunae datur. Quod non faceret, si in voluptate summum bonum poneret. <b>Teneo, inquit, finem illi videri nihil dolere.</b> Itaque eos id
  agere, ut a se dolores, morbos, debilitates repellant. <mark>Quid Zeno?</mark> Illud urgueam, non intellegere eum quid sibi dicendum sit, cum dolorem summum malum esse dixerit. <a href="" target="_blank">Quid, de quo nulla dissensio est?</a>  <a href="" target="_blank">Nosti, credo, illud: Nemo pius est, qui pietatem-;</a> Num igitur utiliorem tibi hunc Triarium putas esse posse, quam si tua sint Puteolis granaria? </p>

<h2>Tu autem negas fortem esse quemquam posse, qui dolorem malum putet.</h2>

<p>Quid in isto egregio tuo officio et tanta fide-sic enim existimo-ad corpus refers? Ut in voluptate sit, qui epuletur, in dolore, qui torqueatur. <a href="" target="_blank">Haec dicuntur inconstantissime.</a> <b>Qui-vere falsone, quaerere mittimus-dicitur oculis se privasse;</b>  Sed eum qui audiebant, quoad poterant, defendebant sententiam suam. Atque ab his initiis profecti omnium virtutum et originem et progressionem persecuti sunt. Virtutibus igitur rectissime mihi videris et ad consuetudinem nostrae orationis vitia posuisse
  contraria. Quae cum dixisset paulumque institisset, Quid est? Vide ne ista sint Manliana vestra aut maiora etiam, si imperes quod facere non possim. Nec tamen ille erat sapiens quis enim hoc aut quando aut ubi aut unde? </p>

  <li>Audio equidem philosophi vocem, Epicure, sed quid tibi dicendum sit oblitus es.</li>
  <li>Vos autem cum perspicuis dubia debeatis illustrare, dubiis perspicua conamini tollere.</li>
  <li>Intrandum est igitur in rerum naturam et penitus quid ea postulet pervidendum;</li>
  <li>Aliena dixit in physicis nec ea ipsa, quae tibi probarentur;</li>

<pre>An dubium est, quin virtus ita maximam partem optineat in
rebus humanis, ut reliquas obruat?

Quam si explicavisset, non tam haesitaret.

  <li>Falli igitur possumus.</li>
  <li>-, sed ut hoc iudicaremus, non esse in iis partem maximam positam beate aut secus vivendi.</li>
  <li>Non enim, si omnia non sequebatur, idcirco non erat ortus illinc.</li>
  <li>Equidem e Cn.</li>

<blockquote cite="">
  An potest, inquit ille, quicquam esse suavius quam nihil dolere?

<h3>Quem si tenueris, non modo meum Ciceronem, sed etiam me ipsum abducas licebit.</h3>

<p>Et quod est munus, quod opus sapientiae? Quae cum ita sint, effectum est nihil esse malum, quod turpe non sit. <b>Non semper, inquam;</b> <b>Duarum enim vitarum nobis erunt instituta capienda.</b> Cuius similitudine perspecta in formarum specie ac dignitate
  transitum est ad honestatem dictorum atque factorum. <a href="" target="_blank">Equidem etiam Epicurum, in physicis quidem, Democriteum puto.</a> Sed utrum hortandus es nobis, Luci, inquit, an etiam tua sponte propensus es? Cenasti
  in vita numquam bene, cum omnia in ista Consumis squilla atque acupensere cum decimano. </p>

  <dt><dfn>At certe gravius.</dfn></dt>
  <dd>Suam denique cuique naturam esse ad vivendum ducem.</dd>
  <dt><dfn>Negare non possum.</dfn></dt>
  <dd>Levatio igitur vitiorum magna fit in iis, qui habent ad virtutem progressionis aliquantum.</dd>

<p><a href="" target="_blank">Itaque fecimus.</a> <mark>Immo alio genere;</mark> Sit sane ista voluptas. Atque ut reliqui fures earum rerum, quas ceperunt, signa commutant, sic illi, ut sententiis nostris pro suis uterentur, nomina tamquam
  rerum notas mutaverunt. <i>Sed ad illum redeo.</i> <code>Si longus, levis dictata sunt.</code> <a href="" target="_blank">Quae est igitur causa istarum angustiarum?</a> Coniunctio autem cum honestate vel voluptatis vel non dolendi
  id ipsum honestum, quod amplecti vult, id efficit turpe. </p>