css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

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.

            
                <article class="card">
    <header class="card__header">
      <div class="card__header__title">
    <h1>Nihilisme</h1>
      </div>
      <div class="card__header__lead">
        <p class="is-alternative is-spaced"><strong>Une posture importante en pensée critique</strong></p>
        <p>Dans le <a href="https://www.coup-critique.com/fiches/cafe-critique/001/" target="_blank">Café Critique #001</a> nous parlions de la nécessité lors<br>de l'étude d'un problème de la <strong>suspension du jugement</strong>.</p>
        <p>Cette suspension s'applique également <strong>aux valeurs morales</strong>.</p>
         <p class="is-spaced"><strong>Le nihilisme est une doctrine fondée sur la négation de<br>toutes valeurs, croyances ou réalités substantielles.</strong></p>
        <p class="is-spaced"><strong>Le penseur critique se doit d'être nihiliste</strong></p>
      </div>
    </header>
    <section class="card__content">
      <ul class="card__list">
        <li class="card__item">
          <p class="is-right"><img src="https://www.coup-critique.com/media/images/upload/cc-004-1.png" alt="Money"></p>
          <p>Son plus célèbre théoricien est <strong>Nietzsche</strong> (et sa <strong>moustache</strong>).</p>
          <p><em>« Nihiliste est l'homme qui juge que le monde tel qu'il est ne devrait pas être, et que le monde tel qu'il devrait être n'existera pas. »</em></p>
          <p>Pour Nietzsche, la forme suprême du nihilisme est la <strong>négation de l'être</strong>, qui fait de vous un <strong>surhomme</strong>.</p>
          <p><small>Un peu comme Superman, mais avec comme seul super pouvoir l'objectivité totale de votre pensée, ce qui est moins classe que de voler, d'avoir des rayons laser qui sortent des yeux ou de mettre son slip par dessus son pantalon, je vous l'accorde.</small></p>
        </li>
      </ul>
      <div class="card__conclusion">
        <p class="is-alternative"><strong>Cependant, dans un jugement final public sur un sujet, il est important de réintroduire les valeurs morales.</strong></p>
        <p>On nous fait souvent remarquer certains exemples <strong>polémiques</strong> dans nos vignettes. Ces exemples sont <strong>volontairement</strong> choisis pour illustrer le fait que la pensée critique se doit d'être <strong>amorale</strong> (mais pas immorale).</p>
      </div>
    </section>
    <aside class="card__aside">
      <h1 class="card__parent-title">
        <section class="the-title">
          <span class="the-title__first">C<span class="the-title__logo"><span class="the-title__logo__inner">o</span></span>up</span>
          <span class="the-title__second">critique</span>
        </section>
      </h1>
      <img class="card__logo" src="https://www.coup-critique.com/media/images/logo_white.png" alt="Coup critique">
      <h2 class="card__category">
        <span class="card__category__title">Café critique</span>
        <span class="card__category__number">#004</span>
      </h2>
    </aside>
    <footer class="card__footer">
      <div class="card__credit">
        <h2>Crédits</h2>
        <ul>
          <li>Texte et design : <a href="https://www.facebook.com/pg/CoupEspritCritique/" target="_blank">Monsieur Z</a></li>
          <li>Mise en page : <a href="https://www.lesieur.name/zetetique/" target="_blank">Z'êtes Éthique</a></li>
        </ul>
      </div>
      <div class="card__about">
        <h2>À propos</h2>
        <ul>
          <li>v1.1.0</strong></li>
          <li><a href="https://www.facebook.com/CoupEspritCritique/" target="_blank">fb.me/CoupEspritCritique</a></li>
        </ul>
      </div>
    </footer>
  </article>


            
          
!
            
              @font-face {
  font-family: 'Destroy';
  src: url('https://cdn.rawgit.com/Haeresis/BookAtlas/develop/assets/fonts/Destroy.eot?#iefix') format('embedded-opentype'),  url('https://cdn.rawgit.com/Haeresis/BookAtlas/develop/assets/fonts/Destroy.woff') format('woff'), url('https://cdn.rawgit.com/Haeresis/BookAtlas/develop/assets/fonts/Destroy.ttf')  format('truetype'), url('https://cdn.rawgit.com/Haeresis/BookAtlas/develop/assets/fonts/Destroy.svg#Destroy') format('svg');
  font-weight: normal;
  font-style: normal;
}

body
  background-color #000
  margin 0
  padding 0
  font-family 'Open Sans', Arial, sans-serif
  
a
  color #ff00fb
  text-decoration none
  &:hover
    text-decoration underline
  
.the-title
  text-transform uppercase
  font-size 2.2vmin
  text-shadow 0.1vmin 0.1vmin 0.1vmin #d26769, 
  -0.1vmin 0.1vmin 0.1vmin #d26769,
  0.1vmin -0.1vmin 0.1vmin #d26769,
  -0.1vmin -0.1vmin 0.1vmin #d26769
  color #fff
  font-family Destroy
  
  &__logo
    background-position: center -0.6vmin; 
    background-size 4vmin
    background-image url('https://www.coup-critique.com/media/images/logo_white.png')
    width 2.6vmin
    height 2.6vmin
    vertical-align middle
    display inline-block
    
    &__inner
      display none
  
  &__second
    display block
    margin-left 2vmin

.card
  position relative
  color #fff
  margin-left auto
  margin-right auto
  max-width 100vmin
  display flex
  flex-direction column
  
  &__header
    order 2
    text-align center
    margin 0 2vmin
    
    h1
      text-align center
      font-size 6.2vmin
      text-transform uppercase
      color #fff
      font-weight normal
      font-style normal
      font-family Destroy
      text-shadow 0.1vmin 0.1vmin 0.1vmin #ff00fb, 
      -0.1vmin 0.1vmin 0.1vmin #ff00fb,
      0.1vmin -0.1vmin 0.1vmin #ff00fb,
      -0.1vmin -0.1vmin 0.1vmin #ff00fb

      margin 3.2vmin 0
      
    p
      font-size 2.8vmin
      margin 0.8vmin 1.6vmin

    .is-alternative
      margin-bottom 2.4vmin
      font-size 3.6vmin
      
    .is-img
      margin 2.4vmin 14vmin
      img
        max-width 100%
        height auto
        
    .is-spaced
      margin-top 2.4vmin
      margin-bottom 2.4vmin
  
  &__logo
    position absolute
    top 50%
    left 50%
    z-index -1
    transform translate(-50%, -50%)
    opacity 0.2
    width 70vmin
    
  &__parent-title
    order 2
    margin 1.2vmin 1.6vmin
    
  &__category
    font-size 2.2vmin
    margin 1.6vmin
    text-transform uppercase
    order 1
    font-family Destroy
    text-shadow 0.1vmin 0.1vmin 0.1vmin #444, 
    -0.1vmin 0.1vmin 0.1vmin #444,
    0.1vmin -0.1vmin 0.1vmin #444,
    -0.1vmin -0.1vmin 0.1vmin #444      
      
  &__aside
    display flex
    justify-content space-between
    order 1
    
  &__content
    order 3
    margin 0 auto
    
  &__list
      
    .is-right
      float right
      margin 0 0 0 2vmin
      img
        height 43vmin
    
    p
      text-align justify
      font-size 2.8vmin
      margin 0.8vmin 1.6vmin
    
  &__item
    text-align justify
    
  &__conclusion
    margin 2.4vmin 0.8vmin
    font-size 3vmin
    text-align justify
    text-align-last center
    
    .is-alternative
      margin 3.2vmin
      font-size 3.2vmin
      text-align center
    
    p
      text-align justify
      text-align-last center
      font-size 2.4vmin
      margin 0.8vmin 1.6vmin
    
  &__footer
    display flex
    justify-content space-between
    order 4

    h2
      margin .1vmin 0
      font-size 1.6vmin
      
    li
      margin .1vmin 0
      font-size 1.2vmin
    
  &__credit
    margin 0 1.6vmin 1.6vmin 1.6vmin
      
  &__about
    margin 0 1.6vmin 1.6vmin 1.6vmin
    text-align right

  strong
    font-style italic
    color #ff00fb
    
  ul
    margin 0
    padding 0
    list-style-type none
            
          
!
            
              var category = document.querySelector('.card__category');

category.innerHTML = category.innerHTML.replace(/é/g, 'e');
            
          
!
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.
Loading ..................

Console