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

              
                  <article class="card">
    <header class="card__header">
      <div class="card__header__title">
        <h1>Études <span>scientifiques</span></h1>
      </div>
      <div class="card__header__lead">
        <p class="is-alternative is-spaced"><strong>Quels sont les gages de leur fiabilité ?</strong></p>
        <p>Les <strong>chercheurs</strong> communiquent les <strong>résultats</strong> de leurs <strong>travaux</strong> sous forme d'<strong>articles</strong> dans des <strong>revues scientifiques</strong> sépcialisées.</p>
        <p class="is-img"><img src="https://www.coup-critique.com/media/images/upload/cc-002-1.jpg" alt="Genome engineering using the CRISPR-Cas9 system"></p>
        <p class="is-spaced">Un article <strong>publié</strong> peut êttre <strong>cité</strong> comme <strong>référence</strong> par d'autres études.</p>
        <p>Sa <strong>validité scientifique</strong> est <strong>garantie</strong> par deux points :</p>
      </div>
    </header>
    <section class="card__content">
      <ul class="card__list">
        <li class="card__item">
          <h2>Reproductibilité</h2>
          <p class="is-small"><small>(comme son nom l'indique)</small></p>
          <p>Les résultats doivent pouvoir être <strong>reproduits</strong>. Les <strong>méthodes</strong> ainsi que le <strong>matériel</strong> utilisés sont décrit très précisément.</p>
        </li>
        <li class="card__item">
          <h2>Revu des pairs</h2>
          <p class="is-small"><small>(ou peer review)</small></p>
          <p>Pour accepter de la publier, la revue va demander leur <strong>avis</strong> sur cet article à d'autres <strong>chercheurs reconnus</strong> dans ce domaine.</p>
        </li>
      </ul>
      <div class="card__conclusion">
        <p class="is-left"><img src="https://www.coup-critique.com/media/images/upload/cc-002-2.jpg" alt="Science"></p>
        <p class="is-right"><img src="https://www.coup-critique.com/media/images/upload/cc-002-3.jpg" alt="Nature"></p>
        <p>Tous les journaux n'ont pas la même <strong>notoriété</strong>.</p>
        <p>Les revues <strong>prestigieuses</strong> sont très <strong>sélectives</strong>.</p>
        <p>Exemples : <strong class="is-huge">Nature</strong> et <strong class="is-huge">Science</strong>.</p>
        <p>Un article d'un de ces deux journaux sera d'une <br> <strong>importance majeure</strong> dans son domaine.</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">#002</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">MachinisteWeb</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>


              
            
!

CSS

              
                @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 justify
      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 7vmin 1.6vmin
      
      span
        display block
        margin-left 16vmin
      
    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 10vmin
      img
        max-width 100%
        height auto
        
    .is-spaced
      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
    display flex
    flex-shrink 0
    justify-content space-around
      
    .is-small
      margin-top -1vmin
      
    h2
      color #ff00fb
      font-size 3.2vmin
      margin 1.6vmin 1.6vmin 0.8vmin
      font-style italic
    
    p
      text-align justify
      text-align-last center
      font-size 2.8vmin
      margin 0.8vmin 1.6vmin
    
  &__item
    text-align center
    width 46vmin
    
  &__conclusion
    margin 5.6vmin 3.2vmin 2.4vmin
    font-size 3vmin
    text-align justify
    text-align-last center
    
    .is-huge
      font-size 3vmin
    
    .is-left
      float left
      img
        width 12vmin
      
    .is-right
      float right
      img
        width 12vmin
    
    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
              
            
!

JS

              
                var title = document.querySelector('.card__header__title h1'),
    category = document.querySelector('.card__category');

title.innerHTML = title.innerHTML.replace(/É/g, 'E');
category.innerHTML = category.innerHTML.replace(/é/g, 'e');
              
            
!
999px

Console