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.

            
              <!-- --------------------------------------- -->
<!-- - Commencer à copier à partir de là --- -->
<!-- --------------------------------------- -->
<link href="https://fonts.googleapis.com/css?family=Homemade+Apple&display=swap&txt=pournteavei!" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Pangolin&display=swap&txt=5décembreGRÈVENAL" rel="stylesheet">
<!-- Protest logo by Chris Kerr https://thenounproject.com/search/?q=protest&i=15242 -->
<style>
  .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='http://www.w3.org/2000/svg' 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;
  }
</style>
<svg xmlns="http://www.w3.org/2000/svg" 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">
    http://thenounproject.com
        </text>
        <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>
        <text transform="translate(-178.5 10.5)" font-family="'Helvetica-Bold'" font-size="6.1578">
    Reminders
        </text>
        <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-8.2.1.1z"/>
        <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>
        </text>
        <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>
        </text>
        <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>
        </text>
        <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>
        <text transform="matrix(1.0074 0 0 1 -125.5 30.6)" font-family="'Helvetica'" font-size="2.5731">
    100px
        </text>
        <text transform="matrix(1.0074 0 0 1 -41 39)" font-family="'Helvetica-Bold'" font-size="5.1462">
    .SVG
        </text>
        <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"/>
        <g>
            <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"/>
        </g>
    </symbol>
</svg>
<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>
  <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="https://codepen.io/borisschapira/pen/NWPKXdv?editors=1000">copier le code de cette bannière</a>
  </div>
</div>
<!-- --------------------------------------- -->
<!-- Pour n'afficher la bannière qu'une fois -->
<!-- par jour, ajoutez cette portion de code -->
<!-- --------------------------------------- -->
<script>
  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() {
      localStorage.setItem('strike512-hide', Date.now());
    });
  } catch (e) {}
</script>
<!-- --------------------------------------- -->
<!-- Fin du script pour mémoriser le choix - -->
<!-- --------------------------------------- -->
<style>
  .strike512-container {
    display: flex;
  }
</style>
<!-- --------------------------------------- -->
<!-- -------- 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="http://loripsum.net/" 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="http://loripsum.net/" target="_blank">Quid, de quo nulla dissensio est?</a>  <a href="http://loripsum.net/" 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="http://loripsum.net/" 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>

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

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

Quam si explicavisset, non tam haesitaret.
</pre>

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

<blockquote cite="http://loripsum.net">
  An potest, inquit ille, quicquam esse suavius quam nihil dolere?
</blockquote>

<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="http://loripsum.net/" 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>

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

<p><a href="http://loripsum.net/" 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="http://loripsum.net/" 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>
            
          
!
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.

Console