AMP Ticker Moible HTML + CSS

by SebastianPataneMasuelli

HTML

<section id="view_one" class="view">
    <article id="revenue" class="primary">
        <ul>
            <li class="white twenty-four">Revenue:</li>
            <li class="green forty-eight"><sub>$</sub>2,700 <sub class="white sixteen">/15min</sub></li>
            <li class="white thirty-two"><sub class="green">$</sub>51,477 <sub class="sixteen">Today</sub></li>
            <li class="green twenty-four"><sub>$</sub>5,857 (16%) <sub class="white sixteen">Difference</sub></li>
            <li></li>  
        </ul>
    </article>
    <article id="ampx" class="secondary twelve">
        <ul>
            <li class="white">AMPx:</li>
            <li class="white">Today: <span class="green">108<sub>%</sub></span></li>
            <li class="white">Yesterday: <span class="green">96<sub>%</sub></span></li>
            <li class="white">7 Day: <span class="green">103<sub>%</sub></span></li>
            <li class="white">14 Day: <span class="green">106<sub>%</sub></span></li> 
        </ul>
    </article>
    <article id="CPC" class="secondary twelve">
        <ul>
            <li class="white">CPC:</li>
            <li class="white">Today: <span class="red">-20<sub>%</sub></span><span>8.4</span></li>
            <li class="white">Yesterday: <span class="green">96<sub>%</sub></span></li>
            <li class="white">7 Day: <span class="green">103<sub>%</sub></span></li>
            <li class="white">14 Day: <span class="green">106<sub>%</sub></span></li>
        </ul>
    </article>
</section>

CSS

@font-face {
    font-family: 'HelveticaNeueLTStd45Light';
    src: url('http://sandbox.admarketplace.com/creative/sebastian/ux//webfont/helveticaneueltstd-lt-webfont.ttf');
    font-weight: normal;
    font-style: normal;
}


article, section {display: block;  color: white; font-family: 'HelveticaNeueLTStd45Light'; text-shadow: 0 1pt 0 #000000;}
.view { height: 345pt; width: 240pt;  background: blue; 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#003366), color-stop(100%,#357999)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #003366 0%,#357999 100%); /* Chrome10+,Safari5.1+ */ }
article { }
.primary { height: 237pt; padding-top: 7.5pt;}
.secondary{ height: 100pt; border-width: 1pt 1pt 0 0; border-style: solid; border-color: white; width: 119pt; float: left; }
.secondary:last-child { border-width: 1pt 0 0 0; width: 120pt; }
ul li {  padding: 0 7.5pt; }
ul li:first-child { }
.primary ul li:first-child { border: none; font-weight: bold}
.primary ul li:last-child { border: none; }
.primary ul li { line-height: 1.5em; border-bottom: 1pt solid white; }
.primary ul li sub:last-child { float: right;}
.secondary ul li:first-child { line-height: 2em; font-weight: bold; }
.secondary ul li { line-height: 1.2em; clear: both}
.secondary ul li span { float: right; margin-left: 5pt}
sub {font-size: 50%; vertical-align: baseline;}
.green { color: #A6F359 }
.white { color: #ffffff }
.red { color: #FD6757 }

.ninety-six { font-size: 96pt; }
.seventy-two { font-size: 72pt; }
.sixty-four { font-size: 64pt;}
.forty-eight { font-size: 48pt;}
.thirty-two { font-size: 32pt;}
.twenty-four { font-size: 24pt; }
.sixteen { font-size: 16pt; }
.twelve { font-size: 12pt; }