AMP Ticker Moible HTML + CSS page 2

by SebastianPataneMasuelli

HTML

<section id="view_one" class="view">
    <article id="revenue" class="primary">
        <ul>
            <li class="white twenty-four">Revenue:</li>
            <li class="white twenty-four"><sub class="green">$</sub>22,592<span class="red sixteen">-15%</span></span> <sub class="sixteen">Direct</sub></li>
            <li class="white twenty-four"><sub class="green">$</sub>2,594<span class="red sixteen">-38%</span></span> <sub class="sixteen">Scored</sub></li>
             <li class="white twenty-four"><sub class="green">$</sub>2,056<span class="red sixteen">-15.8%</span></span> <sub class="sixteen">Self-Serve</sub></li>
            <li class="white twenty-four"><sub class="green">$</sub>2,260<span class="green sixteen">+72.5%</span></span> <sub class="sixteen">Deposits</sub></li>
            <li class="white sixteen">9 deposits today <sub class="twelve">last deposit: 10:23</sub></li>
            
        </ul>
    </article>
    <article id="Clients" class="secondary twelve">
        <ul>
            <li class="title white">Clients:</li>
            <li class="white">Active SS.: <span class="green">119</span></li>
            <li class="white">Active Mgd.: <span class="green">109</span></li>
            <li class="white">Difference <span class="green">+09<sub>%</sub></span></li>
        </ul>
    </article>
    
    <article id="CPC" class="secondary twelve">
        <ul>
            <li class="title white">Queries:</li>
            <li class="white"><span>397,552,946</span></li>
            <li class="title white">Unbilled:</li>
            <li class="white"><span class="red">+8.9<sub>%</sub></span><span >21.9<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 span { margin-left: 10pt}
.primary ul li sub:last-child { float: right;}
.secondary ul li.title { 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; }