Page History

...

Section

HTML

<link rel="stylesheet" href="https://reporting.healthcarecommunities.org/DesktopModules/CSI/CSIQUp_ETCLC/css/confluence-menu.css?ver=5">
<link rel="stylesheet" href="https://reporting.healthcarecommunities.org/DesktopModules/CSI/CSIQUp_ETCLC/css/confluence-header.css?ver=10">

Column

width	100%

HTML

<div class="header_container row">
  <div class="column left">
    <img class="confluence-embedded-image image-center logo" height=150px draggable="false" src="https://qnetconfluence.cms.gov/download/attachments/202386541/ETCLC-Logo-FullColor-400px.jpg?version=1&modificationDate=1675267197903&api=v2" alt="" />
	  </div> 
  <div styleclass="width:125px; height: auto; margin-left: auto; margin-right: auto;">
	    <a href="https://donatelife.net/" target="_blank"><img class="image-center donate_imgcolumn middle">
    <div class="carousel">
      <div class="mySlides"><img class="mySlide" src="https://qnetconfluencereporting.cms.gov/download/thumbnails/202386541/DonateLife%202024healthcarecommunities.org/Desktopmodules/CSI/CSIQUp_ETCLC/images/carousel/ca1.jpg"/></a>
	</div>
  </div>  
  <div class="column middle">
    <div class="carousel">
      <div class="mySlides"><img class="mySlides"><img class="mySlide" src="https://reporting.healthcarecommunities.org/Desktopmodules/CSI/CSIQUp_ETCLC/images/carousel/ca1ca2.jpg"/></div>
      <div class="mySlides"><img class="mySlide" src="https://reporting.healthcarecommunities.org/Desktopmodules/CSI/CSIQUp_ETCLC/images/carousel/ca2ca3.jpg"/></div>
      <div class="mySlides"><img class="mySlide" src="https://reporting.healthcarecommunities.org/Desktopmodules/CSI/CSIQUp_ETCLC/images/carousel/ca3ca4.jpg"/></div>
      <div class="mySlides"><img class="mySlide" src="https://reporting.healthcarecommunities.org/Desktopmodules/CSI/CSIQUp_ETCLC/images/carousel/ca4ca5.jpg"/></div>
       
 <div class="mySlides"><img class="mySlide" src="https://reporting.healthcarecommunities.org/Desktopmodules/CSI/CSIQUp_ETCLC/images/carousel/ca5.jpg"/></div>       
    </div>
  </div>
   <div class="column right"> 
    <div class="card">
      <h3>Current ETCLC Members</h3>
      <p>Progress Tracker <a href='https://healthcarecommunities.b2clogin.com/healthcarecommunities.onmicrosoft.com/oauth2/v2.0/authorize?p=b2c_1_etclc_signin&response_type=id_token&client_id=07e0f659-b33e-444d-a279-b6e0d59f8e67&redirect_uri=https%3A%2F%2Fetclc.healthcarecommunities.org%2F&response_mode=form_post&scope=openid&state=generic' target='_blank'>Login</a></p>
      <p>Not a Tracker user? <a href='https://healthcarecommunities.b2clogin.com/healthcarecommunities.onmicrosoft.com/oauth2/v2.0/authorize?p=B2C_1_ETCLC_signup&client_id=07e0f659-b33e-444d-a279-b6e0d59f8e67&nonce=defaultNonce&redirect_uri=https%3A%2F%2Fghn.healthcarecommunities.org%2Fwp-login.php&scope=openid&response_type=id_token&prompt=login' target='_blank'>Register</a></p>
</div> 

     <div class="bulletin-board-card hidden">
      <div class="bulletin-board-header">
        <div class="bulletin-board-header-img"><img src='https://reporting.healthcarecommunities.org/Desktopmodules/CSI/CSIQUp_ETCLC/images/icons8-bulletin-board-94.png' /></div>
        <div class="bulletin">
          <div class="bulletin-board-header-txt">ETCLC Bulletin</div>
          <div>
            <div style="font-weight:600;margin-bottom:4px;">In Person Learning Sessions</div>
            <i>April 10</i>, Baltimore, MD <div class="bulletin_readmore">click <a class='external' href='https://www.hsag.com/ETCLC-Events' target='_blank'>here</a></div>
          </div>

        </div>
      </div>
    </div> 
</div>  
<script async src="https://reporting.healthcarecommunities.org/Desktopmodules/CSI/CSIQUp_ETCLC/js/carousel.js"></script>

...

Section

HTML

<div class="hwrap">
  <div class="hmove">
	<div class="hitem">April>Thank you isfor Donateeverything Life Month.....Together, through spreading the word and educating others about donation, we can take small steps each day towards saving more livesyou do to support Kidney Donation and Transplantation.</div>
  </div>
</div>

CSS Stylesheet

 /* (A) FORCE ALL ITEMS INTO SINGLE ROW */
 .hmove {
   	display: flex;
	white-space: nowrap;
 }

 .hitem {
   width: 100%;
   flex-shrink: 0;
   font-size: 21px;
   font-family: Verdana, sans-serif;
 }

 .hwrap {
   overflow: hidden;
   padding-bottom: 15px;
 }

 /* (B) MOVE ITEMS FROM RIGHT TO LEFT */
 /* first item = 0, fourth item = -300% */
 @keyframes tickerh {
   0% {
     transform: translatex(100%);
   }

   100% {
     transform: translatex(-75%);
   }
 }

 .hmove {
   animation: tickerh linear 20s infinite;
 }

 .hmove:hover {
   animation-play-state: paused;
 }

 @media only screen and (min-width: 200px) and (max-width: 600px) {
   .hmove {
     animation: tickerh linear 30s infinite;
   }
 }

 @media only screen and (min-width: 601px) and (max-width: 1000px) {
   .hmove {
     animation: tickerh linear 30s infinite;
   }
 }

.hidden {
	display: none !important;
}

...

Page tree

Versions Compared

Old Version 340

New Version 341

Key