RNdGWd

index.html

	<!-- Operational Message Component -->
<div class="operational-message">
    <ul>
      <li>We regularly negotiate new programming contracts with local broadcasters</li>
      <li>Us regularly negotiate new programming contracts with local broadcasters</li>
      <li>You regularly negotiate new programming contracts with local broadcasters</li>
      <li>I regularly negotiate new programming contracts with local broadcasters</li>
    </ul>
</div>
	<!-- .Operational Message Component -->
 

RNdGWd.markdown

RNdGWd

A Pen by Max Quattromani on CodePen.

License.

script.js

/* ==========================================================================
    Operational Message -- Version: 0.1.1 - Updated: 3/27/2015 
   ========================================================================== */

$('.operational-message li').first().addClass('js-selected').show();

style.scss

.operational-message {
  max-width: 90%;
  margin: 0 auto;
  text-align: center;
    
  ul {
    margin-bottom: 0;
    list-style-type: none;
  }
    
  li {
    display: none;
  }
}

@media (max-width: 768px) {
  .operational-message{
    display: block;
    width: 100%;
    padding: 0;
    text-align: left;
  }
}