Line 2: | Line 2: | ||
<html> | <html> | ||
<style> | <style> | ||
+ | $color-paid: #7fdbff; | ||
+ | $color-sent: #39cccc; | ||
+ | |||
+ | body, html { | ||
+ | height: 100%; | ||
+ | } | ||
+ | |||
+ | body { | ||
+ | display: flex; | ||
+ | flex-direction: column; | ||
+ | justify-content: center; | ||
+ | align-items: center; | ||
+ | font-family: "fira-sans-2", Verdana, sans-serif; | ||
+ | } | ||
+ | |||
+ | #q-graph { | ||
+ | display: block; /* fixes layout wonkiness in FF1.5 */ | ||
+ | position: relative; | ||
+ | width: 600px; | ||
+ | height: 300px; | ||
+ | margin: 1.1em 0 0; | ||
+ | padding: 0; | ||
+ | background: transparent; | ||
+ | font-size: 11px; | ||
+ | } | ||
+ | |||
+ | #q-graph caption { | ||
+ | caption-side: top; | ||
+ | width: 600px; | ||
+ | text-transform: uppercase; | ||
+ | letter-spacing: .5px; | ||
+ | top: -40px; | ||
+ | position: relative; | ||
+ | z-index: 10; | ||
+ | font-weight: bold; | ||
+ | } | ||
+ | |||
+ | #q-graph tr, #q-graph th, #q-graph td { | ||
+ | position: absolute; | ||
+ | bottom: 0; | ||
+ | width: 150px; | ||
+ | z-index: 2; | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | text-align: center; | ||
+ | } | ||
+ | |||
+ | #q-graph td { | ||
+ | transition: all .3s ease; | ||
+ | |||
+ | &:hover { | ||
+ | background-color: desaturate(#85144b, 100); | ||
+ | opacity: .9; | ||
+ | color: white; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | #q-graph thead tr { | ||
+ | left: 100%; | ||
+ | top: 50%; | ||
+ | bottom: auto; | ||
+ | margin: -2.5em 0 0 5em;} | ||
+ | #q-graph thead th { | ||
+ | width: 7.5em; | ||
+ | height: auto; | ||
+ | padding: 0.5em 1em; | ||
+ | } | ||
+ | #q-graph thead th.sent { | ||
+ | top: 0; | ||
+ | left: 0; | ||
+ | line-height: 2; | ||
+ | } | ||
+ | #q-graph thead th.paid { | ||
+ | top: 2.75em; | ||
+ | line-height: 2; | ||
+ | left: 0; | ||
+ | } | ||
+ | |||
+ | #q-graph tbody tr { | ||
+ | height: 296px; | ||
+ | padding-top: 2px; | ||
+ | border-right: 1px dotted #C4C4C4; | ||
+ | color: #AAA; | ||
+ | } | ||
+ | #q-graph #q1 { | ||
+ | left: 0; | ||
+ | } | ||
+ | #q-graph #q2 {left: 150px;} | ||
+ | #q-graph #q3 {left: 300px;} | ||
+ | #q-graph #q4 {left: 450px; border-right: none;} | ||
+ | #q-graph tbody th {bottom: -1.75em; vertical-align: top; | ||
+ | font-weight: normal; color: #333;} | ||
+ | #q-graph .bar { | ||
+ | width: 60px; | ||
+ | border: 1px solid; | ||
+ | border-bottom: none; | ||
+ | color: #000; | ||
+ | } | ||
+ | #q-graph .bar p { | ||
+ | margin: 5px 0 0; | ||
+ | padding: 0; | ||
+ | opacity: .4; | ||
+ | } | ||
+ | #q-graph .sent { | ||
+ | left: 13px; | ||
+ | background-color: $color-sent; | ||
+ | border-color: transparent; | ||
+ | } | ||
+ | #q-graph .paid { | ||
+ | left: 77px; | ||
+ | background-color: $color-paid; | ||
+ | border-color: transparent; | ||
+ | } | ||
+ | |||
+ | |||
+ | #ticks { | ||
+ | position: relative; | ||
+ | top: -300px; | ||
+ | left: 2px; | ||
+ | width: 596px; | ||
+ | height: 300px; | ||
+ | z-index: 1; | ||
+ | margin-bottom: -300px; | ||
+ | font-size: 10px; | ||
+ | font-family: "fira-sans-2", Verdana, sans-serif; | ||
+ | } | ||
+ | |||
+ | #ticks .tick { | ||
+ | position: relative; | ||
+ | border-bottom: 1px dotted #C4C4C4; | ||
+ | width: 600px; | ||
+ | } | ||
+ | |||
+ | #ticks .tick p { | ||
+ | position: absolute; | ||
+ | left: -5em; | ||
+ | top: -0.8em; | ||
+ | margin: 0 0 0 0.5em; | ||
+ | } | ||
+ | VIEW COMPILED | ||
.myintro { | .myintro { | ||
display: table; | display: table; | ||
Line 104: | Line 244: | ||
<div class="col-lg-8 col-lg-offset-2"> | <div class="col-lg-8 col-lg-offset-2"> | ||
<h2>Modeling.</h2> | <h2>Modeling.</h2> | ||
− | <p>Under construction... | + | <p>Under construction...</p> |
− | + | <table id="q-graph"> | |
+ | <caption>Quarterly Results</caption> | ||
+ | <thead> | ||
+ | <tr> | ||
+ | <th></th> | ||
+ | <th class="sent">Invoiced</th> | ||
+ | <th class="paid">Collected</th> | ||
+ | </tr> | ||
+ | </thead> | ||
+ | <tbody> | ||
+ | <tr class="qtr" id="q1"> | ||
+ | <th scope="row">Q1</th> | ||
+ | <td class="sent bar" style="height: 111px;"><p>$18,450.00</p></td> | ||
+ | <td class="paid bar" style="height: 99px;"><p>$16,500.00</p></td> | ||
+ | </tr> | ||
+ | <tr class="qtr" id="q2"> | ||
+ | <th scope="row">Q2</th> | ||
+ | <td class="sent bar" style="height: 206px;"><p>$34,340.72</p></td> | ||
+ | <td class="paid bar" style="height: 194px;"><p>$32,340.72</p></td> | ||
+ | </tr> | ||
+ | <tr class="qtr" id="q3"> | ||
+ | <th scope="row">Q3</th> | ||
+ | <td class="sent bar" style="height: 259px;"><p>$43,145.52</p></td> | ||
+ | <td class="paid bar" style="height: 193px;"><p>$32,225.52</p></td> | ||
+ | </tr> | ||
+ | <tr class="qtr" id="q4"> | ||
+ | <th scope="row">Q4</th> | ||
+ | <td class="sent bar" style="height: 110px;"><p>$18,415.96</p></td> | ||
+ | <td class="paid bar" style="height: 195px;"><p>$32,425.00</p></td> | ||
+ | </tr> | ||
+ | </tbody> | ||
+ | </table> | ||
+ | <div id="ticks"> | ||
+ | <div class="tick" style="height: 59px;"><p>$50,000</p></div> | ||
+ | <div class="tick" style="height: 59px;"><p>$40,000</p></div> | ||
+ | <div class="tick" style="height: 59px;"><p>$30,000</p></div> | ||
+ | <div class="tick" style="height: 59px;"><p>$20,000</p></div> | ||
+ | <div class="tick" style="height: 59px;"><p>$10,000</p></div> | ||
+ | </div> | ||
</div> | </div> |
Revision as of 13:00, 22 August 2017
Modeling.
Under construction...
Invoiced | Collected | |
---|---|---|
Q1 | $18,450.00 |
$16,500.00 |
Q2 | $34,340.72 |
$32,340.72 |
Q3 | $43,145.52 |
$32,225.52 |
Q4 | $18,415.96 |
$32,425.00 |
$50,000
$40,000
$30,000
$20,000
$10,000