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

              
                <body>
  <!--[if lt IE 8]>
               <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
               <![endif]-->
  <header id="mastHead">
    <div class="flex-container">
      <div class="flex-row justify-content-center">
        <div class="flex-col-sm-9">
          <article>
            <ul class="accordion" data-speed="150">
              <li class="accordion-item">
                <h3 class="accordion-title">L’IL-6, une cytokine <br class="mobile"> pléiotropique</h3>
                <div class="accordion-content">
                  <p>L'IL-6 est une cytokine pléiotropique impliquée dans de multiples fonctions
                    physiologiques comme la réponse anti-infectieuse, la régulation du système
                    immunitaire via la production d’anticorps, la régulation du métabolisme osseux,
                    lipidique et glucidique, l’hématopoïèse ou le système neuroendocrinien <sup>(1, 2, 3, 4)</sup>.
                  </p>
                  <p>L’IL-6 a un rôle central dans la régulation de l’activité des cellules de l’immunité
                    innée et adaptative en réponse aux infections virales, parasitaires et bactériennes <sup>(1)</sup>.
                  </p>
                </div>
              </li>
              <li class="accordion-item">
                <h3 class="accordion-title">L’IL-6 dans <br class="mobile">l’immunité innée : <br class="mobile"><span class="font-normal">première ligne <br class="mobile">de défense</span></h3>
                <div class="accordion-content">
                  <p>Au cours de l'inflammation aiguë, de nombreuses cellules de l’immunité innée, les
                    monocytes, les macrophages et les cellules endothéliales, produisent l'IL-6, ce qui
                    entraîne le recrutement de neutrophiles à travers l'activation d'un sous-ensemble de
                    chimiokines et de molécules d'adhésion par les cellules endothéliales, les cellules
                    musculaires lisses et les fibroblastes <sup>(5)</sup>.
                  </p>
                  <p>Ces cellules de l’immunité innée répondent aussi à l’IL-6, ce qui crée une boucle
                    autocrine qui amplifie la réponse inflammatoire <sup>(5)</sup>.
                  </p>
                </div>
              </li>
              <li class="accordion-item">
                <h3 class="accordion-title">L’IL-6 dans l’immunité<br class="mobile"> adaptative : <span class="font-normal">seconde<br class="mobile"> ligne de défense</span></h3>
                <div class="accordion-content">
                  <p>L'IL-6 stimule l’activité lymphocytaire et la production d’anticorps, stimule
                    l’activation des lymphocytes Th17 et inhibe les lymphocytes T régulateurs <sup>(3, 6)</sup>.
                  </p>
                  <p class="text-center schema_title mt-20 mb-20">Adapté de Calabrese et Rose-John, 2014, et Dayer et Choy, 2010</p>
                  <p class="text-center"><img src="https://images.unsplash.com/photo-1593642532842-98d0fd5ebc1a?ixid=MnwxMjA3fDF8MXxhbGx8MTZ8fHx8fHwyfHwxNjE4MTA0Njc5&ixlib=rb-1.2.1&dpr=1&auto=format&fit=crop&w=120&h=200&q=60" class="" alt="schéma IL-6"></p>
                  <p class="text-center mt-50"><a id="myBtn" class="popup desktop" href="#">Agrandir le schéma</a></p>
                  <!-- The Modal -->
                  <div id="myModal" class="modal desktop">
                    <a class="close" href="#">X</a>
                    <div class="modal-content">

                      <p class="text-center"><img src="https://images.unsplash.com/photo-1593642532842-98d0fd5ebc1a?ixid=MXwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80" alt=""></p>
                    </div>
                  </div>
                  <p class="text-center mt-50"><a id="myBtnMobile" class="popup mobile" href="#">Agrandir le schéma</a></p>
                  <div id="myModalMobile" class="modal mobile">

                    <div class="modal-content">
                      <a class="close" href="#">X</a>  
                      <p class="text-center"><img src="https://images.unsplash.com/photo-1593642533144-3d62aa4783ec?ixid=MXwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80" alt=""></p>
                    </div>
                  </div>
                </div>
              </li>
              <li class="accordion-item">
                <h3 class="accordion-title">Une cytokine au <br class="mobile">coeur de certaines <br class="mobile">pathologies</h3>
                <div class="accordion-content">
                  <p>Dans les conditions physiologiques, les taux sériques d'IL-6 sont relativement faibles
                    (1 à 5 pg/ml), mais sont rapidement augmentés dans un contexte pathologique
                    notamment en cas d'infection, d'auto-immunité ou de cancer <sup>(1)</sup>.
                  </p>
                  <p>Lorsque les taux d'IL-6 sont élevés, l'homéostasie de nombreux processus
                    physiologiques peut être perturbée <sup>(1)</sup>.
                  </p>
                </div>
              </li>
              <li class="accordion-item">
                <h3 class="accordion-title">IL-6 et polyarthrite<br class="mobile"> rhumatoïde</h3>
                <div class="accordion-content">
                  <p>Une élévation persistante d’IL-6 est un facteur clé de la physiopathogénie des
                    manifestations articulaires mais aussi des manifestations extra-articulaires de la PR
                    notamment les complications cardiovasculaires, l’anémie, la fatigue et
                    l’ostéoporose <sup>(11, 12)</sup>.
                  </p>
                </div>
              </li>
              <li class="accordion-item">
                <h3 class="accordion-title">IL-6 et réaction <br class="mobile">inflammatoire <br class="mobile">exacerbée<br/>
                  <span class="font-normal">syndrome de<br class="mobile"> relargage cytokinique</span>
                </h3>
                <div class="accordion-content">
                  <p>Le syndrome de relargage cytokinique (SRC) est une réponse inflammatoire
                    systémique qui peut être causée par une infection, certains médicaments et d'autres
                    facteurs <sup>(9)</sup>.
                  </p>
                  <p>Le SRC est caractérisé par une forte augmentation du niveau d'un grand nombre de
                    cytokines pro-inflammatoires <sup>(9)</sup>.
                  </p>
                  <p>Le SRC est plus fréquent dans les maladies du système immunitaire, dans les
                    immuno-thérapies (telles que la thérapie cellulaire CAR-T), la septicémie liée à la
                    transplantation d'organe ou en cas d’infection virale <sup>(9)</sup>.
                  </p>
                  <p>Le SRC peut se présenter sous une variété de symptômes allant de symptômes
                    pseudo-grippaux légers à de graves manifestations potentiellement mortelles dus à
                    la réponse inflammatoire excessive <sup>(10)</sup>.
                  </p>
                  <p>Les symptômes bénins du SRC comprennent la fièvre, la fatigue, les maux de tête, les
                    éruptions cutanées, l'arthralgie et les myalgies. Les cas plus graves sont caractérisés
                    par une hypotension ainsi qu'une fièvre élevée et peuvent évoluer vers une réponse
                    inflammatoire systémique incontrôlée avec un choc circulatoire nécessitant un
                    vasopresseur, une fuite vasculaire, une coagulation intravasculaire disséminée et une
                    défaillance multiple des organes. Les anomalies de laboratoire qui sont courantes
                    chez les patients atteints de SRC comprennent des cytopénies, une élévation de la
                    créatinine et des enzymes hépatiques, des paramètres de coagulation perturbés et
                    un taux de CRP élevé <sup>(10)</sup>.
                  </p>
                </div>
              </li>
              <li class="accordion-item">
                <h3 class="accordion-title">La voie de signalisation <br class="mobile">de l’IL-6</h3>
                <div class="accordion-content">
                  <p>L'IL-6 se lie à son récepteur membranaire exprimé par plusieurs cellules de
                    l’organisme notamment les monocytes, les macrophages et les fibroblastes ou
                    soluble. L'IL-6 peut aussi se lier à une forme soluble circulante de son récepteur <sup>(8)</sup>.
                  </p>
                  <p>Le complexe IL-6/récepteur se lie à son tour à la protéine GP130, protéine ubiquitaire
                    exprimée par quasiment la totalité des cellules de l’organisme <sup>(8)</sup>.
                  </p>
                  <p>Le complexe IL-6/récepteur/GP130 ainsi formé, déclenche une cascade de
                    signalisations intracellulaires à l’origine de l’activation de certains gènes notamment
                    les gènes codant des protéines de la phase aiguë de l’inflammation <sup>(8)</sup>.
                  </p>
                </div>
              </li>
            </ul>
          </article>
          <section>
            <div class="reference-item">
              <h3 class="reference-title">Bibliographie</h3>
              <div class="reference-content">
                <ol>
                  <li>Hunter <em>et al.</em> IL-6 as a keystone cytokine in health and disease.<em> Nat Immunol</em> 2015; 16 :448–457.</li>
                  <li>Jones <em>et al.</em> Recent insights into targeting the IL-6 cytokine family in inflammatory diseases and cancer. <em>Nat Rev Immunol</em> 2018; 18: 773–789.</li>
                  <li>Kimura <em>et al.</em> IL-6: Regulator of Treg/Th17 balance. <em>European Journal of Immunology</em> 2010; 40(7): 1830–1835.
                  </li>
                  <li>Kishimoto <em>et al.</em>  IL-6: From its discovery to clinical applications. <em>International Immunology</em> 2010; 22(5): 347–352.</li>
                  <li>Choy <em>et al.</em> Interleukin-6 as a multifunctional regulator: inflammation, immune response, and fibrosis. <em>J Scleroderma Relat Disord</em> 2017; 2(Suppl 2): S1-S5.</li>
                  <li>Luo et Zheng. Hall of Fame among Pro-inflammatory Cytokines: Interleukin-6 Gene and Its Transcriptional Regulation Mechanisms. <em>Front Immunol</em> 2016; 19;7:604.</li>
                  <li>Choy. Understanding the dynamics: pathways involved in the pathogenesis of rheumatoid arthritis. <em>Rheumatology</em> 2012; 51:v3-v11.</li>
                  <li>Choy. Translating IL-6 biology into effective treatments. <em>Nat Rev Rheumatol</em> 2020: 16(6):335-345.</li>
                  <li>Zhang <em>et al.</em> The cytokine release syndrome (CRS) of severe COVID-19 and Interleukin-6 receptor (IL-6R) antagonist Tocilizumab may be the key to reduce the mortality. <em>Int J Antimicrob Agents</em> 2020: 10595.</li>
                  <li>Shimabukuro-Vornhagen <em>et al.</em> Cytokine release syndrome.<em> J Immunother Cancer</em> 2018; 6: 56.</li>
                  <li>Dayer et Choy. Therapeutic targets in rheumatoid arthritis: the interleukin-6 receptor. <em>Rheumatology</em> 2010; 49:15–24.</li>
                  <li>Référence schéma : Calabrese et Rose-John. IL‑6 biology: implications for clinical targeting in rheumatic disease. Nat Rev Rheumatol 2014; 10(12):720-7 et Dayer et Choy. Therapeutic targets in rheumatoid arthritis: the interleukin-6 receptor. <em>Rheumatology</em> 2010; 49: 15-24.</li>
                </ol>
              </div>
            </div>
          </section>
        </div>
      </div>
      <!-- #main -->
    </div>
    <!-- #main-container -->

    </body>
              
            
!

CSS

              
                html {
  color: #222;
  font-size: 1em;
  line-height: 1.4;
  min-height:100%;
}
body{
  font-size: 16px;
  line-height:26px;
  font-family: Helvetica, Helvetica Neue, Arial;
  min-height:100%;
}
::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}
::selection {
  background: #b3d4fc;
  text-shadow: none;
}
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}
audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}
fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}
textarea {
  resize: vertical;
}
.browserupgrade {
  margin: 0.2em 0;
  background: #ccc;
  color: #000;
  padding: 0.2em 0;
}
/* ===== grid ==================== */
.flex-container {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0 auto;
  padding: 0 1em;
}
@media (min-width: 540px) {
  .flex-container {
    max-width: 540px;
  }
}
@media (min-width: 768px) {
  .flex-container {
    max-width: 768px;
  }
}
@media (min-width: 992px) {
  .flex-container {
    max-width: 992px;
  }
}
@media (min-width: 1200px) {
  .flex-container {
    max-width: 1200px;
  }
}
.flex-row {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-bottom: 1em;
}
.flex-col-xs-9, .flex-col-sm-9, .flex-col-md-9, .flex-col-lg-9 {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 1em 1.4em;
  width: 100%;
}
@media (min-width: 540px) {
  .flex-col-xs-9 {
    max-width: calc(100% * (9 / 12));
    width: calc(100% * (9 / 12));
  }
}
@media (min-width: 768px) {
  .flex-col-sm-9 {
    max-width: calc(100% * (9 / 12));
    width: calc(100% * (9 / 12));
  }
}
@media (min-width: 992px) {
  .flex-col-md-9 {
    max-width: calc(100% * (9 / 12));
    width: calc(100% * (9 / 12));
  }
}
@media (min-width: 1200px) {
  .flex-col-lg-9 {
    max-width: calc(100% * (9 / 12));
    width: calc(100% * (9 / 12));
  }
}
@media (min-width: 768px) {
  .justify-content-center {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center 
  }
}
/* ==============
HEADER
============== */
.featured-img{
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-pack:center;
  -ms-flex-pack:center;
  justify-content:center;
}
.featured-img img{
  max-width:415px;
  width:100%;
}
.logo_genzyme{
  text-align:center;
}
.center{
  -webkit-box-pack:center;
  -ms-flex-pack:center;
  justify-content:center;
}
/* ==============
COMPONENT
============== */
.text-center{
  text-align:center;
}
.font-normal{
  font-weight:normal;
}
.mt-20 {
  margin-top:20px;
}
.mt-30 {
  margin-top:30px;
}
.mt-50{
  margin-top:50px;
}
.mb-20{
  margin-bottom:20px;
}
img{
  max-width:100%;
}
.desktop{
  display:none;
}
/* ==============
ACCORDION
============== */
.accordion {
  padding: 0;
  list-style: none; 
}
.accordion li{
  margin:40px auto;
}
.accordion-title{
  color:#892b7d;
  padding:35px 0 15px;
  border-bottom:2px solid #892b7d;
  position:relative;
  cursor:pointer;
  font-size:20px;
}
.accordion-title::before{
  content:'';
  position:absolute;
  width:140px;
  height:10px;
  border-bottom-left-radius:12px;
  border-bottom-right-radius:12px;
  background-color: #892b7d;
  top:100%;
}
.accordion-title::after{
  content:'';
  background:url(../img/fleche_open.jpg);
  position:absolute;
  right:0;
  top: 80%;
  width:24px;
  height:14px;
  -webkit-transition:0.3s;
  -o-transition:0.3s;
  transition:0.3s;
}
.active .accordion-title::after{
  -webkit-transform:rotate(180deg);
  -ms-transform:rotate(180deg);
  transform:rotate(180deg);
}
.accordion-content{
  padding-top:20px;
}
/* ==============
SCHEMA SECTION
============== */
.popup{
  color:#892b7d;
  border:2px solid #892b7d;
  padding:25px 35px;
  border-radius:12px;
  text-decoration:none;
}
.schema_title{
  color:#892b7d;
  font-weight:bold;
}
.schema_img{
  max-width:800px;
  margin:0 auto; 
  width: 100%;  
}
/* ==============
SECTION REFERENCE
============== */
.reference-item{
  margin:40px auto;
}
.reference-title{
  padding:35px 0;
  border-bottom:2px solid #892b7d;
  position:relative;
  font-size:20px;
  color:#892b7d;
}

.reference-title::before{
  content:'';
  position:absolute;
  width:140px;
  height:10px;
  border-bottom-left-radius:12px;
  border-bottom-right-radius:12px;
  background-color: #892b7d;
  top:100%;
}
.reference-content{
  padding-top:20px;
}
.reference-content ol {
  counter-reset: section;
  padding-left:0;
}
.reference-content li{
  list-style: none;
  position:relative;
  padding-left: 40px;
  margin-bottom:15px;
  font-size:14px;
}

.reference-content li::before {
  counter-increment: section;
  content: "("counter(section)") ";
  position: absolute;
  top: 0;
  left: 0px;
}
/* ==============
POPUP
============== */
.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  text-decoration: none;
  margin: 20px;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.modal {
  visibility: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  position: fixed;
  z-index: 999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  overflow:auto;
}

.modal-content {
  -webkit-transform: scale(0.7);
  -ms-transform: scale(0.7);
  transform: scale(0.7);
  opacity: 0;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
  padding: 20px;

}
.show .modal-content{
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  opacity: 1;
  height: 100%;
}
.modal::before{
  content:'';
  position:absolute;
  width:260px;
  height:10px;
  border-bottom-right-radius:12px;
  background-color: #892b7d;
  top:0;
  left:0;
}


.show{
  visibility: visible;
}

#myModalMobile img{
  width: 100%;
  height: 100%;
}

.ie7 .title {
  padding-top: 20px;
}
/* ==========================================================================
Media Queries
========================================================================== */
@media only screen and (min-width: 48em) {
  .logo img{
    max-width:298px;
  }
}
@media only screen and (min-width: 62em) {
  .featured-img img{
    margin-top:-125px;
  }
  .desktop{
    display:inline-block;
  }
  .mobile{
    display:none;
  }
  .accordion-title{
    padding:35px 0;
  }
  .accordion-title::before{
    width:260px;
  }
  .reference-title::before{
    width:260px;
  }
  .accordion-title::after{
    top:50%;
    -webkit-transform:translateY(-50%);
    -ms-transform:translateY(-50%);
    transform:translateY(-50%);
  }
  .space-between{
    -webkit-box-pack:justify;
    -ms-flex-pack:justify;
    justify-content:space-between;
  }
  .modal::after{
    content:'';
    position:absolute;
    width:260px;
    height:10px;
    border-top-left-radius:12px;
    background-color: #892b7d;
    right:0;
    bottom:0;
  }
  .show .modal-content{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }
  .modal {
    overflow:hidden
  }
}

/* ====== Helper classes ============= */
.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}
.clearfix:after {
  clear: both;
}
.clearfix {
  *zoom: 1;
}
              
            
!

JS

              
                $('.accordion').each(function(e) {
  var accordion = $(this);
  var toggleSpeed = accordion.attr('data-speed') || 100; 
  function open(item, speed) {

    accordion.find('.accordion-item').not(item).removeClass('active')
      .find('.accordion-content').slideUp(speed);	
    item.addClass('active')
      .find('.accordion-content').slideDown(speed);
  }
  open(accordion.find('.active:first'), 0);
  accordion.on('click', '.accordion-title', function(ev) {
    ev.preventDefault();
    open($(this).closest('.accordion-item'), toggleSpeed);
  });
});


jQuery( document ).ready(function() {
  $('#myBtn').click(function(e){
    $('#myModal').toggleClass("show"); 
    e.preventDefault();
  })
  $('#myBtnMobile').click(function(e){
    $('#myModalMobile').toggleClass("show"); 
    e.preventDefault();
  })
  $('.close').click(function(e){
    $('#myModal').toggleClass("show");  
    $('#myModalMobile').toggleClass("show"); 
    e.preventDefault();

  })


})


              
            
!
999px

Console