Created
January 6, 2015 09:36
-
-
Save vamshisuram/9c34ce00398deecde085 to your computer and use it in GitHub Desktop.
// source http://jsbin.com/betexu
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <script src="http://code.ionicframework.com/1.0.0-beta.13/js/ionic.bundle.min.js"></script> | |
| <link href="http://code.ionicframework.com/1.0.0-beta.13/css/ionic.min.css" rel="stylesheet" type="text/css" /> | |
| <meta charset="utf-8"> | |
| <title>JS Bin</title> | |
| <style id="jsbin-css"> | |
| body * { | |
| color: rgba(0,0,0,0.45); | |
| } | |
| .row, .row .col { | |
| margin: 0px; | |
| padding: 0px; | |
| } | |
| .r-noMargin { | |
| margin: 0px; | |
| } | |
| .r-noPadding { | |
| padding: 0px; | |
| } | |
| .r-right-align { | |
| text-align: right; | |
| } | |
| .r-header { | |
| font-weight: bold; | |
| } | |
| .r-header a { | |
| text-decoration: none; | |
| } | |
| .r-header-border { | |
| margin-top: 5px; | |
| } | |
| .r-chart .r-chart-stock .col { | |
| padding: 0 10px 0 10px; | |
| } | |
| .r-chart .r-chart-stockdetails { | |
| border-top: 1px solid rgba(0,0,0,0.2); | |
| margin: 20px; | |
| padding: 5px 0 5px 0; | |
| } | |
| .r-chart-stockdetails > .row { | |
| border-bottom: 1px solid rgba(0,0,0,0.2); | |
| padding-bottom: 7px; | |
| margin-bottom: 9px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class='r-header row'> | |
| <p class='col col-10 text-center '><a href="">X</a></p> | |
| <p class='col col-90'>Market Quo</p> | |
| </div> | |
| <hr class='r-header-border'></hr> | |
| <div class='r-chart'> | |
| <div class='r-chart-stock'> | |
| <div class='row'> | |
| <h1 class='col'>CAKE</h1> | |
| <h1 class='col r-right-align'>$349.12</h1> | |
| </div> | |
| <div class='row'> | |
| <p class='col'>Cheesecake Factory</p> | |
| <p class='col r-right-align assertive'>-$32.14 (-9.5%)</p> | |
| </div> | |
| </div> | |
| <div class='r-chart-graph'> | |
| </div> | |
| <div class='r-chart-stockdetails'> | |
| <div class='row'> | |
| <div class='col'> | |
| <div class='row'> | |
| <p class='col col-67 dark'>Day High</p> | |
| <p class='col r-right-align'>$351.96</p> | |
| </div> | |
| </div> | |
| <div class='col col-10'></div> | |
| <div class='col'> | |
| <div class='row'> | |
| <p class='col col-67 dark'>Day High</p> | |
| <p class='col r-right-align'>$351.96</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class='row'> | |
| <div class='col'> | |
| <div class='row'> | |
| <p class='col col-67 dark'>Opens</p> | |
| <p class='col r-right-align'>$347.29</p> | |
| </div> | |
| </div> | |
| <div class='col col-10'></div> | |
| <div class='col'> | |
| <div class='row'> | |
| <p class='col col-67 dark'>Today's Close</p> | |
| <p class='col r-right-align'>$349.12</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class='row'> | |
| <div class='col'> | |
| <div class='row'> | |
| <p class='col col-67 dark'>Avg. Volume</p> | |
| <p class='col r-right-align'>68.6m</p> | |
| </div> | |
| </div> | |
| <div class='col col-10'></div> | |
| <div class='col'> | |
| <div class='row'> | |
| <p class='col col-67 dark'>Volume</p> | |
| <p class='col r-right-align'>41.8m</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class='row'> | |
| <div class='col'> | |
| <div class='row'> | |
| <p class='col col-67 dark'>52wk High</p> | |
| <p class='col r-right-align'>$450.01</p> | |
| </div> | |
| </div> | |
| <div class='col col-10'></div> | |
| <div class='col'> | |
| <div class='row'> | |
| <p class='col col-67 dark'>52wk Low</p> | |
| <p class='col r-right-align'>$299.41</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script id="jsbin-source-html" type="text/html"><!DOCTYPE html> | |
| <html> | |
| <head> | |
| <script src="//code.ionicframework.com/1.0.0-beta.13/js/ionic.bundle.min.js"><\/script> | |
| <link href="//code.ionicframework.com/1.0.0-beta.13/css/ionic.min.css" rel="stylesheet" type="text/css" /> | |
| <meta charset="utf-8"> | |
| <title>JS Bin</title> | |
| </head> | |
| <body> | |
| <div class='r-header row'> | |
| <p class='col col-10 text-center '><a href="">X</a></p> | |
| <p class='col col-90'>Market Quo</p> | |
| </div> | |
| <hr class='r-header-border'></hr> | |
| <div class='r-chart'> | |
| <div class='r-chart-stock'> | |
| <div class='row'> | |
| <h1 class='col'>CAKE</h1> | |
| <h1 class='col r-right-align'>$349.12</h1> | |
| </div> | |
| <div class='row'> | |
| <p class='col'>Cheesecake Factory</p> | |
| <p class='col r-right-align assertive'>-$32.14 (-9.5%)</p> | |
| </div> | |
| </div> | |
| <div class='r-chart-graph'> | |
| </div> | |
| <div class='r-chart-stockdetails'> | |
| <div class='row'> | |
| <div class='col'> | |
| <div class='row'> | |
| <p class='col col-67 dark'>Day High</p> | |
| <p class='col r-right-align'>$351.96</p> | |
| </div> | |
| </div> | |
| <div class='col col-10'></div> | |
| <div class='col'> | |
| <div class='row'> | |
| <p class='col col-67 dark'>Day High</p> | |
| <p class='col r-right-align'>$351.96</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class='row'> | |
| <div class='col'> | |
| <div class='row'> | |
| <p class='col col-67 dark'>Opens</p> | |
| <p class='col r-right-align'>$347.29</p> | |
| </div> | |
| </div> | |
| <div class='col col-10'></div> | |
| <div class='col'> | |
| <div class='row'> | |
| <p class='col col-67 dark'>Today's Close</p> | |
| <p class='col r-right-align'>$349.12</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class='row'> | |
| <div class='col'> | |
| <div class='row'> | |
| <p class='col col-67 dark'>Avg. Volume</p> | |
| <p class='col r-right-align'>68.6m</p> | |
| </div> | |
| </div> | |
| <div class='col col-10'></div> | |
| <div class='col'> | |
| <div class='row'> | |
| <p class='col col-67 dark'>Volume</p> | |
| <p class='col r-right-align'>41.8m</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class='row'> | |
| <div class='col'> | |
| <div class='row'> | |
| <p class='col col-67 dark'>52wk High</p> | |
| <p class='col r-right-align'>$450.01</p> | |
| </div> | |
| </div> | |
| <div class='col col-10'></div> | |
| <div class='col'> | |
| <div class='row'> | |
| <p class='col col-67 dark'>52wk Low</p> | |
| <p class='col r-right-align'>$299.41</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html></script> | |
| <script id="jsbin-source-css" type="text/css">body * { | |
| color: rgba(0,0,0,0.45); | |
| } | |
| .row, .row .col { | |
| margin: 0px; | |
| padding: 0px; | |
| } | |
| .r-noMargin { | |
| margin: 0px; | |
| } | |
| .r-noPadding { | |
| padding: 0px; | |
| } | |
| .r-right-align { | |
| text-align: right; | |
| } | |
| .r-header { | |
| font-weight: bold; | |
| } | |
| .r-header a { | |
| text-decoration: none; | |
| } | |
| .r-header-border { | |
| margin-top: 5px; | |
| } | |
| .r-chart .r-chart-stock .col { | |
| padding: 0 10px 0 10px; | |
| } | |
| .r-chart .r-chart-stockdetails { | |
| border-top: 1px solid rgba(0,0,0,0.2); | |
| margin: 20px; | |
| padding: 5px 0 5px 0; | |
| } | |
| .r-chart-stockdetails > .row { | |
| border-bottom: 1px solid rgba(0,0,0,0.2); | |
| padding-bottom: 7px; | |
| margin-bottom: 9px; | |
| } | |
| </script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body * { | |
| color: rgba(0,0,0,0.45); | |
| } | |
| .row, .row .col { | |
| margin: 0px; | |
| padding: 0px; | |
| } | |
| .r-noMargin { | |
| margin: 0px; | |
| } | |
| .r-noPadding { | |
| padding: 0px; | |
| } | |
| .r-right-align { | |
| text-align: right; | |
| } | |
| .r-header { | |
| font-weight: bold; | |
| } | |
| .r-header a { | |
| text-decoration: none; | |
| } | |
| .r-header-border { | |
| margin-top: 5px; | |
| } | |
| .r-chart .r-chart-stock .col { | |
| padding: 0 10px 0 10px; | |
| } | |
| .r-chart .r-chart-stockdetails { | |
| border-top: 1px solid rgba(0,0,0,0.2); | |
| margin: 20px; | |
| padding: 5px 0 5px 0; | |
| } | |
| .r-chart-stockdetails > .row { | |
| border-bottom: 1px solid rgba(0,0,0,0.2); | |
| padding-bottom: 7px; | |
| margin-bottom: 9px; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment