API tools faq
paste
Advertisement
cornford-michael

ui-302

cornford-michael
Oct 10th, 2017
455
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 28.75 KB | None | 0 0
raw download clone embed print report
  1. <!-- UI # -->
  2.         <div class="ui-302">
  3.        
  4.             <div class="container-fluid">
  5.                 <h4>Status One</h4>
  6.                 <hr />
  7.                 <!-- Status One Starts -->
  8.                 <div class="status-one">
  9.                     <div class="row">
  10.                         <div class="col-md-3 col-sm-6 col-xs-6 col-mob">
  11.                             <!-- Item Starts -->
  12.                             <div class="item br-red">
  13.                                 <!-- Animated Value -->
  14.                                 <h4><span class="lblue">$</span>100</h4>
  15.                                 <!-- Small Value -->
  16.                                 <h5>$23,234</h5>
  17.                                 <!-- Icon -->
  18.                                 <i class="fa fa-angle-double-up bg-green"></i>
  19.                             </div>
  20.                             <!-- Item Ends -->
  21.                         </div>
  22.                         <div class="col-md-3 col-sm-6 col-xs-6 col-mob">
  23.                             <!-- Item Starts -->
  24.                             <div class="item br-green">
  25.                                 <!-- Animated Value -->
  26.                                 <h4><span class="lblue">$</span>200</h4>
  27.                                 <!-- Small Value -->
  28.                                 <h5>$44,545</h5>
  29.                                 <!-- Icon -->
  30.                                 <i class="fa fa-angle-double-down bg-red"></i>
  31.                             </div>
  32.                             <!-- Item Ends -->
  33.                         </div>
  34.                         <div class="col-md-3 col-sm-6 col-xs-6 col-mob">
  35.                             <!-- Item Starts -->
  36.                             <div class="item br-lblue">
  37.                                 <!-- Animated Value -->
  38.                                 <h4><span class="lblue">$</span>500</h4>
  39.                                 <!-- Small Value -->
  40.                                 <h5>$78,768</h5>
  41.                                 <!-- Icon -->
  42.                                 <i class="fa fa-angle-double-up bg-green"></i>
  43.                             </div>
  44.                             <!-- Item Ends -->
  45.                         </div>
  46.                         <div class="col-md-3 col-sm-6 col-xs-6 col-mob">
  47.                             <!-- Item Starts -->
  48.                             <div class="item br-orange">
  49.                                 <!-- Animated Value -->
  50.                                 <h4><span class="lblue">$</span>300</h4>
  51.                                 <!-- Small Value -->
  52.                                 <h5>$98,978</h5>
  53.                                 <!-- Icon -->
  54.                                 <i class="fa fa-angle-double-down bg-red"></i>
  55.                             </div>
  56.                             <!-- Item Ends -->
  57.                         </div>
  58.                     </div>
  59.                 </div>
  60.                 <!-- Status One Ends -->
  61.                
  62.                 <br />
  63.                
  64.                 <!-- Heading -->
  65.                 <h4>Status Two </h4>
  66.                 <hr />
  67.                 <!-- Status Two Starts -->
  68.                 <div class="status-two">
  69.                     <div class="row">
  70.                         <div class="col-md-3 col-sm-6 col-xs-6 col-mob">
  71.                             <!-- Item Starts -->
  72.                             <div class="item">
  73.                                 <!-- Heading -->
  74.                                 <h4>Visitors</h4>
  75.                                 <!-- Big Number -->
  76.                                 <h5 class="red">675</h5>
  77.                                 <!-- Sub-Title -->
  78.                                 <span>Letraset &nbsp;<i class="fa fa-angle-double-down red"></i>&nbsp; <b class="red">67%</b></span>
  79.                             </div>
  80.                             <!-- Item Ends -->
  81.                         </div>
  82.                         <div class="col-md-3 col-sm-6 col-xs-6 col-mob">
  83.                             <!-- Item Starts -->
  84.                             <div class="item">
  85.                                 <!-- Heading -->
  86.                                 <h4>Earnings</h4>
  87.                                 <!-- Big Number -->
  88.                                 <h5 class="green">567</h5>
  89.                                 <!-- Sub-Title -->
  90.                                 <span>PageMaker &nbsp;<i class="fa fa-angle-double-up green"></i>&nbsp; <b class="green">87%</b></span>
  91.                             </div>
  92.                             <!-- Item Ends -->
  93.                         </div>
  94.                         <div class="col-md-3 col-sm-6 col-xs-6 col-mob">
  95.                             <!-- Item Starts -->
  96.                             <div class="item">
  97.                                 <!-- Heading -->
  98.                                 <h4>Member</h4>
  99.                                 <!-- Big Number -->
  100.                                 <h5 class="lblue">756</h5>
  101.                                 <!-- Sub-Title -->
  102.                                 <span>Consectetur &nbsp;<i class="fa fa-angle-double-down red"></i>&nbsp; <b class="red">89%</b></span>
  103.                             </div>
  104.                             <!-- Item Ends -->
  105.                         </div>
  106.                         <div class="col-md-3 col-sm-6 col-xs-6 col-mob">
  107.                             <!-- Item Starts -->
  108.                             <div class="item">
  109.                                 <!-- Heading -->
  110.                                 <h4>Order</h4>
  111.                                 <!-- Big Number -->
  112.                                 <h5 class="yellow">656</h5>
  113.                                 <!-- Sub-Title -->
  114.                                 <span>Bonorum &nbsp;<i class="fa fa-angle-double-up green"></i> &nbsp;<b class="green">56%</b></span>
  115.                             </div>
  116.                             <!-- Item Ends -->
  117.                         </div>
  118.                     </div>     
  119.                 </div>
  120.                 <!-- Status Two Ends -->
  121.                 <br />
  122.                
  123.                 <!-- Heading -->
  124.                 <h4>Status Three</h4>
  125.                 <hr />
  126.                 <!-- Status Three Starts -->
  127.                 <div class="status-three">
  128.                     <div class="row">
  129.                         <div class="col-md-3 col-sm-6 col-xs-6 col-mob">
  130.                             <!-- Item -->
  131.                             <div class="item bg-red">
  132.                                 <!-- Big Heading -->
  133.                                 <h4>897</h4>
  134.                                 <!-- Text -->
  135.                                 <span>Remaining</span>
  136.                             </div>
  137.                             <!-- Icon -->  
  138.                             <div class="icon">
  139.                                 <!-- Angle Up Icon -->
  140.                                 <i class="fa fa-angle-double-up red"></i> &nbsp; <span>40%</span> &nbsp; &nbsp;
  141.                                 <!-- Angle Down Icon -->   
  142.                                 <i class="fa fa-angle-double-down green"></i> &nbsp; <span>60%</span>
  143.                             </div>
  144.                         </div>
  145.                         <div class="col-md-3 col-sm-6 col-xs-6 col-mob">
  146.                             <!-- Item -->
  147.                             <div class="item bg-lblue">
  148.                                 <!-- Big Heading -->
  149.                                 <h4>898</h4>
  150.                                 <!-- Text -->
  151.                                 <span>Essentially</span>
  152.                             </div> 
  153.                             <!-- Icon -->
  154.                             <div class="icon">
  155.                                 <!-- Angle Up Icon -->
  156.                                 <i class="fa fa-angle-double-up red"></i> &nbsp; <span>10%</span> &nbsp; &nbsp;
  157.                                 <!-- Angle Down Icon -->
  158.                                 <i class="fa fa-angle-double-down green"></i> &nbsp; <span>30%</span>
  159.                             </div>
  160.                         </div>
  161.                         <div class="col-md-3 col-sm-6 col-xs-6 col-mob">
  162.                             <!-- Item -->
  163.                             <div class="item bg-green">
  164.                                 <!-- Big Heading -->
  165.                                 <h4>859</h4>'
  166.                                 <!-- Text -->
  167.                                 <span>UnChanged</span>
  168.                             </div>
  169.                             <!-- Icon -->
  170.                             <div class="icon">
  171.                                 <!-- Angle Up Icon -->
  172.                                 <i class="fa fa-angle-double-up red"></i> &nbsp; <span>30%</span> &nbsp; &nbsp;
  173.                                 <!-- Angle Down Icon -->
  174.                                 <i class="fa fa-angle-double-down green"></i> &nbsp; <span>50%</span>
  175.                             </div>
  176.                         </div>
  177.                         <div class="col-md-3 col-sm-6 col-xs-6 col-mob">
  178.                             <!-- Item -->
  179.                             <div class="item bg-lblue">
  180.                                 <!-- Big Heading -->
  181.                                 <h4>489</h4>
  182.                                 <!-- Text -->
  183.                                 <span>Letraset</span>
  184.                             </div>
  185.                             <!-- Icon -->
  186.                             <div class="icon">
  187.                                 <!-- Angle Up Icon -->
  188.                                 <i class="fa fa-angle-double-up red"></i> &nbsp; <span>20%</span> &nbsp; &nbsp;
  189.                                 <!-- Angle Down Icon -->
  190.                                 <i class="fa fa-angle-double-down green"></i> &nbsp; <span>40%</span>
  191.                             </div>
  192.                         </div>
  193.                     </div>
  194.                 </div>
  195.                 <!-- Status Three Ends -->
  196.                 <br />
  197.                
  198.                 <!-- Heading -->
  199.                 <h4>Status Four</h4>
  200.                 <hr />
  201.                 <!-- Status Four Starts -->
  202.                 <div class="status-four">
  203.                     <div class="container-fluid">
  204.                         <div class="row">
  205.                             <div class="col-md-2 col-sm-4 col-xs-6 col-bor">
  206.                                 <!-- Item -->
  207.                                 <div class="item">
  208.                                     <!-- Bar Chart -->
  209.                                     <span class="four-bar-one">13,28,35,16,12,53,18,55,36,22</span>
  210.                                     <!-- Big Number -->
  211.                                     <h4>489</h4>
  212.                                     <!-- Text And Icon -->
  213.                                     <span>Undoubtable</span>
  214.                                 </div>
  215.                             </div>
  216.                             <div class="col-md-2 col-sm-4 col-xs-6 col-bor">
  217.                                 <!-- Item -->
  218.                                 <div class="item">
  219.                                     <!-- Bar Chart -->
  220.                                     <span class="four-bar-two">10,14,8,16,38,56,66,77</span>
  221.                                     <!-- Big Number -->
  222.                                     <h4>567</h4>
  223.                                     <!-- Text And Icon -->
  224.                                     <span>Reproduced</span>
  225.                                 </div>
  226.                             </div>
  227.                             <div class="col-md-2 col-sm-4 col-xs-6 col-bor">
  228.                                 <!-- Item -->
  229.                                 <div class="item">
  230.                                     <!-- Bar Chart -->
  231.                                     <span class="four-bar-three">16,17,34,21,89,12,22,34,54</span>
  232.                                     <!-- Big Number -->
  233.                                     <h4>234</h4>
  234.                                     <!-- Text And Number -->
  235.                                     <span>Bonorum</span>
  236.                                 </div>
  237.                             </div>
  238.                             <div class="col-md-2 col-sm-4 col-xs-6 col-bor">
  239.                                 <!-- Item -->
  240.                                 <div class="item">
  241.                                     <!-- Bar Chart -->
  242.                                     <span class="four-bar-four">12,10,14,30,12,34,56,87,90,99</span>
  243.                                     <!-- Big Number -->
  244.                                     <h4>989</h4>
  245.                                     <!-- Text And Icon -->
  246.                                     <span>Finibus</span>
  247.                                 </div>
  248.                             </div>
  249.                             <div class="col-md-2 col-sm-4 col-xs-6 col-bor">
  250.                                 <!-- Item -->
  251.                                 <div class="item">
  252.                                     <!-- Bar Chart -->
  253.                                     <span class="four-bar-five">46,23,10,34,35,57,68,78,77</span>
  254.                                     <!-- Big Number -->
  255.                                     <h4>345</h4>
  256.                                     <!-- Text And Icon -->
  257.                                     <span>Malorum</span>
  258.                                 </div>
  259.                             </div>
  260.                             <div class="col-md-2 col-sm-4 col-xs-6 col-bor">
  261.                                 <!-- Item -->
  262.                                 <div class="item">
  263.                                     <!-- Bar chart -->
  264.                                     <span class="four-bar-six">19,27,13,18,45,23,24</span>
  265.                                     <!-- Big Number -->
  266.                                     <h4>765</h4>
  267.                                     <!-- Text And Icon -->
  268.                                     <span>Randomised</span>
  269.                                 </div>
  270.                             </div>
  271.                         </div>
  272.                     </div>
  273.                 </div>
  274.                 <!-- Status Four Ends -->
  275.                 <br />
  276.                
  277.                 <!-- Heading -->
  278.                 <h4>Status Five</h4>
  279.                 <hr />
  280.                 <!-- Status Five Starts -->
  281.                 <div class="status-five">
  282.                     <div class="row">
  283.                         <div class="col-md-3 col-sm-6 col-xs-6 col-mob">
  284.                             <!-- Item -->
  285.                             <div class="item">
  286.                                 <!-- Heading -->
  287.                                 <h5>Hampden</h5>
  288.                                 <!-- Big Number and Icon -->
  289.                                 <h4>76,787 <i class="fa fa-angle-double-down red"></i></h4>
  290.                                 <div class="five-visitor">
  291.                                     <!-- Pie Chart -->
  292.                                     <span class="five-pie-one pie-chart">13,28,35,16</span> &nbsp; Visitors &nbsp; <span class="green">$567</span>
  293.                                 </div>
  294.                                 <div class="five-visitor">
  295.                                     <!-- Pie Chart -->
  296.                                     <span class="five-pie-two pie-chart">10,48,30,26,12,89</span> &nbsp; Profit &nbsp; &nbsp; &nbsp;<span class="red">$678</span>
  297.                                 </div>
  298.                             </div>
  299.                         </div>
  300.                         <div class="col-md-3 col-sm-6 col-xs-6 col-mob">
  301.                             <!-- Item -->
  302.                             <div class="item">
  303.                                 <!-- Heading -->
  304.                                 <h5>Sydney</h5>
  305.                                 <!-- Big Number and Icon -->
  306.                                 <h4>56,897 <i class="fa fa-angle-double-up green"></i></h4>
  307.                                 <div class="five-visitor">
  308.                                     <!-- Pie Chart -->
  309.                                     <span class="five-pie-two pie-chart">28,87,65,45</span> &nbsp; Visitors &nbsp; <span class="green">$456</span>
  310.                                 </div>
  311.                                 <div class="five-visitor">
  312.                                     <!-- Pie Chart -->
  313.                                     <span class="five-pie-four pie-chart">93,28,35,16,12</span> &nbsp; Profit &nbsp; &nbsp; &nbsp;<span class="red">$123</span>
  314.                                 </div>
  315.                             </div>
  316.                         </div>
  317.                         <div class="col-md-3 col-sm-6 col-xs-6 col-mob">
  318.                             <!-- Item -->
  319.                             <div class="item">
  320.                                 <!-- Heading -->
  321.                                 <h5>Malorum</h5>
  322.                                 <!-- Big Heading and icon -->
  323.                                 <h4>23,345 <i class="fa fa-angle-double-down red"></i></h4>
  324.                                 <div class="five-visitor">
  325.                                     <!-- Pie Chart -->
  326.                                     <span class="five-pie-three pie-chart">28,87,65,45</span> &nbsp; Visitors &nbsp; <span class="green">$234</span>
  327.                                 </div> 
  328.                                 <div class="five-visitor">
  329.                                     <!-- Pie Chart -->
  330.                                     <span class="five-pie-one pie-chart">10,48,30,26,12,89</span> &nbsp; Profit &nbsp; &nbsp; &nbsp;<span class="red">$989</span>
  331.                                 </div> 
  332.                             </div>
  333.                         </div>
  334.                         <div class="col-md-3 col-sm-6 col-xs-6 col-mob">
  335.                             <!-- Item -->
  336.                             <div class="item">
  337.                                 <!-- Heading -->
  338.                                 <h5>Bonorum</h5>
  339.                                 <!-- Big Number and Icon -->
  340.                                 <h4>34,897 <i class="fa fa-angle-double-up green"></i></h4>
  341.                                 <div class="five-visitor">
  342.                                     <!-- Pie Chart -->
  343.                                     <span class="five-pie-four pie-chart">93,28,35,16,12</span> &nbsp; Visitors &nbsp; <span class="green">$567</span>
  344.                                 </div>
  345.                                 <div class="five-visitor">
  346.                                     <!-- Pie Chart -->
  347.                                     <span class="five-pie-three pie-chart">28,87,65,45</span> &nbsp; Profit &nbsp; &nbsp; &nbsp;<span class="red">$545</span>
  348.                                 </div> 
  349.                             </div>
  350.                         </div>
  351.                     </div>
  352.                 </div>
  353.                 <!-- Status Five Ends -->
  354.                 <br />
  355.                
  356.                 <!-- Heading -->
  357.                 <h4>Status Six</h4>
  358.                 <hr />
  359.                 <!-- Status Six Starts -->
  360.                 <div class="status-six">
  361.                     <div class="row">
  362.                         <div class="col-md-3 col-sm-6 col-xs-6 col-mob">
  363.                             <!-- Item -->
  364.                             <div class="item bg-red">  
  365.                                 <!-- Bar Chart -->
  366.                                 <div class="bar-chart">
  367.                                     <!-- Six Bar Chart -->
  368.                                     <span class="six-bar">13,28,35,16,15,19,12,53,18,55,36,22</span>
  369.                                 </div>
  370.                                 <!-- Content -->
  371.                                 <div class="content">
  372.                                     <!-- Heading -->
  373.                                     <h5>Letraset</h5>
  374.                                     <!-- Big Number -->
  375.                                     <h4>23,456</h4>
  376.                                 </div>
  377.                                 <div class="clearfix"></div>                               
  378.                             </div>
  379.                             <!-- Details -->
  380.                             <div class="details bg-red-dark">
  381.                                 <!-- Number -->
  382.                                 <span>$45,343</span>
  383.                                 <!-- Angle Icon -->
  384.                                 <i class="fa fa-angle-double-down"></i>
  385.                                 <!-- Right Arrow Icon -->
  386.                                 <a href="#"><i class="fa fa-arrow-circle-right"></i></a>
  387.                                 <div class="clearfix"></div>   
  388.                             </div> 
  389.                         </div>
  390.                         <div class="col-md-3 col-sm-6 col-xs-6 col-mob">
  391.                             <!-- Item -->
  392.                             <div class="item bg-lblue">
  393.                                 <!-- Bar Chart -->
  394.                                 <div class="bar-chart">
  395.                                     <!-- Six Bar Chart -->
  396.                                     <span class="six-bar">10,14,8,16,38,56,15,19,66,77</span>
  397.                                 </div>
  398.                                 <!-- Content -->
  399.                                 <div class="content">
  400.                                     <!-- Heading -->
  401.                                     <h5>Malorum</h5>
  402.                                     <!-- Big Number -->
  403.                                     <h4>23,456</h4>
  404.                                 </div>
  405.                                 <div class="clearfix"></div>                               
  406.                             </div>
  407.                             <!-- Details -->
  408.                             <div class="details bg-lblue-dark">
  409.                                 <!-- Number -->
  410.                                 <span>$67,678</span>
  411.                                 <!-- Angle Icon -->
  412.                                 <i class="fa fa-angle-double-up"></i>
  413.                                 <!-- Right Arrow Icon -->
  414.                                 <a href="#"><i class="fa fa-arrow-circle-right"></i></a>
  415.                                 <div class="clearfix"></div>   
  416.                             </div> 
  417.                         </div>
  418.                         <div class="col-md-3 col-sm-6 col-xs-6 col-mob">
  419.                             <!-- Item -->
  420.                             <div class="item bg-green">
  421.                                 <!-- Bar Chart -->
  422.                                 <div class="bar-chart">
  423.                                     <!-- Six Bar Chart -->
  424.                                     <span class="six-bar">16,17,34,21,89,12,22,15,19,34,54</span>
  425.                                 </div>
  426.                                 <!-- Content -->
  427.                                 <div class="content">
  428.                                     <!-- Heading -->
  429.                                     <h5>Bonorum</h5>
  430.                                     <!-- Big Number -->
  431.                                     <h4>23,456</h4>
  432.                                 </div>
  433.                                 <div class="clearfix"></div>                               
  434.                             </div>
  435.                             <!-- Details -->
  436.                             <div class="details bg-green-dark">
  437.                                 <!-- Number -->
  438.                                 <span>$45,567</span>
  439.                                 <!-- Angle Icon -->
  440.                                 <i class="fa fa-angle-double-down"></i>
  441.                                 <!-- Right Arrow Icon -->
  442.                                 <a href="#"><i class="fa fa-arrow-circle-right"></i></a>
  443.                                 <div class="clearfix"></div>   
  444.                             </div> 
  445.                         </div>
  446.                         <div class="col-md-3 col-sm-6 col-xs-6 col-mob">
  447.                             <!-- Item -->
  448.                             <div class="item bg-purple">
  449.                                 <!-- Bar Chart -->
  450.                                 <div class="bar-chart">
  451.                                     <!-- Six Bar Chart -->
  452.                                     <span class="six-bar">12,10,14,30,12,34,56,15,19,87,90,99</span>
  453.                                 </div>
  454.                                 <!-- Content -->
  455.                                 <div class="content">
  456.                                     <!-- Heading -->
  457.                                     <h5>Finibus</h5>
  458.                                     <!-- Big Number -->
  459.                                     <h4>23,456</h4>
  460.                                 </div>
  461.                                 <div class="clearfix"></div>                               
  462.                             </div>
  463.                             <!-- Details -->
  464.                             <div class="details bg-purple-dark">
  465.                                 <!-- Number -->
  466.                                 <span>$34,567</span>
  467.                                 <!-- Angle Icon -->
  468.                                 <i class="fa fa-angle-double-up"></i>
  469.                                 <!-- Right Arrow Icon -->
  470.                                 <a href="#"><i class="fa fa-arrow-circle-right"></i></a>
  471.                                 <div class="clearfix"></div>   
  472.                             </div> 
  473.                         </div>
  474.                     </div>
  475.                 </div>
  476.                 <!-- Status Six Ends -->
  477.                 <br />
  478.                
  479.                 <!-- Heading -->
  480.                 <h4>Status Seven</h4>
  481.                 <hr />
  482.                 <!-- Status Seven Starts -->
  483.                 <div class="status-seven">
  484.                     <div class="row">
  485.                         <div class="col-md-6 col-sm-6 col-xs-12">
  486.                             <!-- Item -->
  487.                             <div class="item">
  488.                                 <!-- Heading -->
  489.                                 <h5>Today's Report</h5>
  490.                                 <!-- Big Heading -->
  491.                                 <div class="heading">
  492.                                     <!-- Heading -->
  493.                                     <h4><span class="lblue">$</span>4,680</h4>
  494.                                 </div>
  495.                                 <!-- Bar Chart -->
  496.                                 <div class="bar-chart">
  497.                                     <!-- Seven Bar Chart -->
  498.                                     <span class="seven-bar-one">13,28,35,16,12,53,18,55,36,22</span>
  499.                                 </div>
  500.                                 <!-- Content -->
  501.                                 <div class="content">
  502.                                     <!-- Visitors -->
  503.                                     <div class="seven-content">
  504.                                         <i class="fa fa-circle red"></i> &nbsp; Visitors <span>$89,789,89</span>
  505.                                     </div>
  506.                                     <!-- Profit -->
  507.                                     <div class="seven-content seven-border">
  508.                                         <i class="fa fa-circle green"></i> &nbsp; Profit <span>$48,567,98</span>
  509.                                     </div>
  510.                                 </div>
  511.                                 <div class="clearfix"></div>
  512.                             </div> 
  513.                         </div>
  514.                         <div class="col-md-6 col-sm-6 col-xs-12">
  515.                             <!-- Item -->
  516.                             <div class="item">
  517.                                 <!-- Heading -->
  518.                                 <h5>Yesterday's Report</h5>
  519.                                 <!-- Big Heading -->
  520.                                 <div class="heading">
  521.                                     <!-- Heading -->
  522.                                     <h4><span class="lblue">$</span>1,468</h4>
  523.                                 </div>
  524.                                 <!-- Bar Chart --> 
  525.                                 <div class="bar-chart">
  526.                                     <!-- Seven Bar Chart -->
  527.                                     <span class="seven-bar-two">10,14,8,16,38,56,66,77,89,78</span>
  528.                                 </div>
  529.                                 <!-- Content -->
  530.                                 <div class="content">
  531.                                     <!-- Visitors -->
  532.                                     <div class="seven-content">
  533.                                         <i class="fa fa-circle red"></i> &nbsp; Visitors <span>$68,897,89</span>
  534.                                     </div>
  535.                                     <!-- Profit -->
  536.                                     <div class="seven-content seven-border">
  537.                                         <i class="fa fa-circle green"></i> &nbsp; Profit <span>$34,456,76</span>
  538.                                     </div>
  539.                                 </div>
  540.                                 <div class="clearfix"></div>
  541.                             </div> 
  542.                         </div>
  543.                     </div>
  544.                 </div>
  545.                 <!-- UI Status Seven Ends -->
  546.                 <br />
  547.                
  548.                 <!-- Heading -->
  549.                 <h4>Status Eight</h4>
  550.                 <hr />
  551.                 <!-- Status Eight Starts -->
  552.                 <div class="status-eight">
  553.                     <div class="row">
  554.                         <div class="col-md-3 col-sm-6 col-xs-6 col-mob">
  555.                             <!-- Item -->
  556.                             <div class="item">
  557.                                 <!-- Heading -->
  558.                                 <h5>Undoubtable</h5>
  559.                                 <!-- Big Number -->
  560.                                 <h4 class="lblue">45,678</h4>
  561.                                 <!-- Small Title -->
  562.                                 <em>Specimen</em>
  563.                             </div> 
  564.                         </div>
  565.                         <div class="col-md-3 col-sm-6 col-xs-6 col-mob">
  566.                             <!-- Item -->
  567.                             <div class="item">
  568.                                 <!-- Heading -->
  569.                                 <h5>Bonorum </h5>
  570.                                 <!-- Big Number -->
  571.                                 <h4 class="lblue">65,678</h4>
  572.                                 <!-- Small Title -->
  573.                                 <em>Dolorem</em>
  574.                             </div> 
  575.                         </div>
  576.                         <div class="col-md-3 col-sm-6 col-xs-6 col-mob">
  577.                             <!-- Item -->
  578.                             <div class="item">
  579.                                 <!-- Heading -->
  580.                                 <h5>Finibus </h5>
  581.                                 <!-- Big Number -->
  582.                                 <h4 class="lblue">78,909</h4>
  583.                                 <!-- Small Title -->
  584.                                 <em>Quisquam</em>
  585.                             </div> 
  586.                         </div>
  587.                         <div class="col-md-3 col-sm-6 col-xs-6 col-mob">
  588.                             <!-- Item -->
  589.                             <div class="item">
  590.                                 <!-- Heading -->
  591.                                 <h5>Malorum</h5>
  592.                                 <!-- Big Number -->
  593.                                 <h4 class="lblue">45,878</h4>
  594.                                 <!-- Small Title -->
  595.                                 <em>Contrary</em>
  596.                             </div> 
  597.                         </div>
  598.                     </div>
  599.                 </div>
  600.                 <!-- Status Eight Ends -->
  601.                 <br />
  602.                
  603.                 <!-- Heading -->
  604.                 <h4>Status Nine</h4>
  605.                 <hr />
  606.                 <!-- Status Nine Starts -->
  607.                 <div class="status-nine">
  608.                     <div class="row">
  609.                         <div class="col-md-3 col-sm-6 col-xs-6 col-mob">
  610.                             <!-- Item -->
  611.                             <div class="item">
  612.                                 <!-- Knob -->
  613.                                 <div class="nine-item-knob">
  614.                                     <!-- Content -->
  615.                                     <input class="nine-knob" data-angleOffset=-180 data-angleArc=360 data-bgColor="#e5e5e5" data-fgColor="#d08166" data-thickness=".05" value="40">
  616.                                 </div>
  617.                                 <!-- Details -->
  618.                                 <div class="details">
  619.                                     <!-- Big Heading -->
  620.                                     <h4>45,898</h4>
  621.                                     <!-- Heading -->   
  622.                                     <h5>Lorem <i class="fa fa-angle-double-up red"></i></h5>
  623.                                 </div>
  624.                                 <div class="clearfix"></div>
  625.                             </div> 
  626.                         </div>
  627.                         <div class="col-md-3 col-sm-6 col-xs-6 col-mob">
  628.                             <!-- Item -->
  629.                             <div class="item">
  630.                                 <!-- Knob -->
  631.                                 <div class="nine-item-knob">
  632.                                     <!-- Content -->
  633.                                     <input class="nine-knob" data-angleOffset=-180 data-angleArc=360 data-bgColor="#e5e5e5" data-fgColor="#f75353" data-thickness=".05" value="80">
  634.                                 </div>
  635.                                 <!-- Details -->
  636.                                 <div class="details">
  637.                                     <!-- Big Heading -->
  638.                                     <h4>43,976</h4>
  639.                                     <!-- Heading -->   
  640.                                     <h5>Finibus <i class="fa fa-angle-double-down green"></i></h5>
  641.                                 </div>
  642.                                 <div class="clearfix"></div>
  643.                             </div>                 
  644.                         </div>
  645.                         <div class="col-md-3 col-sm-6 col-xs-6 col-mob">
  646.                             <!-- Item -->
  647.                             <div class="item">
  648.                                 <!-- Knob -->
  649.                                 <div class="nine-item-knob">
  650.                                     <!-- Content -->
  651.                                     <input class="nine-knob" data-angleOffset=-180 data-angleArc=360 data-bgColor="#e5e5e5" data-fgColor="#51d466" data-thickness=".05" value="50">
  652.                                 </div>
  653.                                 <!-- Details -->
  654.                                 <div class="details">
  655.                                     <!-- Big Heading -->
  656.                                     <h4>99,898</h4>
  657.                                     <!-- Heading -->   
  658.                                     <h5>Bonorum <i class="fa fa-angle-double-up red"></i></h5>
  659.                                 </div>
  660.                                 <div class="clearfix"></div>
  661.                             </div>
  662.                         </div>
  663.                         <div class="col-md-3 col-sm-6 col-xs-6 col-mob">
  664.                             <!-- Item Start -->
  665.                             <div class="item">
  666.                                 <!-- Knob -->
  667.                                 <div class="nine-item-knob">
  668.                                     <!-- Content -->
  669.                                     <input class="nine-knob" data-angleOffset=-180 data-angleArc=360 data-bgColor="#e5e5e5" data-fgColor="#32c8de" data-thickness=".05" value="60">
  670.                                 </div>
  671.                                 <!-- Details -->   
  672.                                 <div class="details">
  673.                                     <!-- Big Heading -->
  674.                                     <h4>34,898</h4>
  675.                                     <!-- Heading -->   
  676.                                     <h5>Malorum <i class="fa fa-angle-double-down green"></i></h5>
  677.                                 </div>
  678.                                 <div class="clearfix"></div>
  679.                             </div>
  680.                             <!-- Item Ends -->
  681.                         </div>
  682.                     </div>
  683.                 </div>
  684.                 <!-- Status Nine Ends -->
  685.                 <br />                         
  686.                
  687.                 <!-- Heading -->
  688.                 <h4>Status Ten</h4>
  689.                 <hr />
  690.                 <!-- Status Ten Starts -->
  691.                 <div class="status-ten">
  692.                     <div class="row">
  693.                         <div class="col-md-3 col-sm-6 col-xs-6 col-mob">
  694.                             <!-- Item -->
  695.                             <div class="item">
  696.                                 <!-- Heading -->
  697.                                 <h5>Today's Visitors</h5>
  698.                                 <!-- Big Heading -->   
  699.                                 <h4>$2,398 <span class="bg-red">+14</span></h4>
  700.                             </div> 
  701.                         </div>
  702.                         <div class="col-md-3 col-sm-6 col-xs-6 col-mob">
  703.                             <!-- Item -->
  704.                             <div class="item">
  705.                                 <!-- Heading -->
  706.                                 <h5>Yesterday Visitors</h5>
  707.                                 <!-- Big Heading -->
  708.                                 <h4>34% <span class="bg-lblue">-23</span></h4>
  709.                             </div> 
  710.                         </div>
  711.                         <div class="col-md-3 col-sm-6 col-xs-6 col-mob">
  712.                             <!-- Item -->
  713.                             <div class="item">
  714.                                 <!-- Heading -->
  715.                                 <h5>Monday Visitors</h5>
  716.                                 <!-- Big Heading -->
  717.                                 <h4>8,976 <span class="bg-green">-65</span></h4>
  718.                             </div> 
  719.                         </div>
  720.                         <div class="col-md-3 col-sm-6 col-xs-6 col-mob">
  721.                             <!-- Item -->
  722.                             <div class="item">
  723.                                 <!-- Heading -->
  724.                                 <h5>Sunday Visitors</h5>
  725.                                 <!-- Big Heading -->
  726.                                 <h4>23 <span class="bg-yellow">+143</span></h4>
  727.                             </div> 
  728.                         </div>
  729.                     </div>
  730.                 </div>
  731.                 <!-- Status Ten Ends -->
  732.                 <br />
  733.                
  734.                 <!-- Heading -->
  735.                 <h4>Status Eleven</h4>
  736.                 <hr />
  737.                 <!-- Status Eleven Starts -->
  738.                 <div class="status-eleven">
  739.                     <div class="row">
  740.                         <div class="col-md-3 col-sm-6 col-xs-6 col-mob">
  741.                             <!-- Item -->
  742.                             <div class="item eleven-br-red">
  743.                                 <!-- Heading -->
  744.                                 <h5>Finibus</h5>
  745.                                 <!-- Big Number -->
  746.                                 <h4>$45,000</h4>
  747.                                 <!-- Chart -->
  748.                                 <div class="chart">
  749.                                     <!-- Bar Chart -->
  750.                                     <span class="eleven-bar-one">45,13,28,35,16,12,53</span>
  751.                                 </div>
  752.                                 <!-- Icon and Small Number -->
  753.                                 <span> <i class="fa fa-angle-double-up bg-red"></i> 23,456</span>
  754.                             </div> 
  755.                         </div>
  756.                         <div class="col-md-3 col-sm-6 col-xs-6 col-mob">
  757.                             <!-- Item -->
  758.                             <div class="item eleven-br-lblue">
  759.                                 <!-- Heading -->
  760.                                 <h5>Bonorum</h5>
  761.                                 <!-- Big Number -->
  762.                                 <h4>$34,234</h4>
  763.                                 <!-- chart -->
  764.                                 <div class="chart">
  765.                                     <!-- Pie Chart -->
  766.                                     <span class="eleven-pie">13,28,35,16</span>
  767.                                 </div>
  768.                                 <!-- Icon and Small Number -->
  769.                                 <span> <i class="fa fa-angle-double-down bg-green"></i> 12,000</span>
  770.                             </div> 
  771.                         </div>
  772.                         <div class="col-md-3 col-sm-6 col-xs-6 col-mob">
  773.                             <!-- Item -->
  774.                             <div class="item eleven-br-green">
  775.                                 <!-- Heading -->
  776.                                 <h5>Malorum</h5>
  777.                                 <!-- Big Number -->
  778.                                 <h4>$89,898</h4>
  779.                                 <!-- Chart -->
  780.                                 <div class="chart">
  781.                                     <!-- Line Chart -->
  782.                                     <span class="eleven-line">15,20,34,56,78,23,90,13,50,20,45</span>
  783.                                 </div>
  784.                                 <!-- Icon and Small Number -->
  785.                                 <span> <i class="fa fa-angle-double-up bg-red"></i> 34,234</span>
  786.                             </div> 
  787.                         </div>
  788.                         <div class="col-md-3 col-sm-6 col-xs-6 col-mob">
  789.                             <!-- Item -->
  790.                             <div class="item eleven-br-yellow">
  791.                                 <!-- Heading -->
  792.                                 <h5>Lorem</h5>
  793.                                 <!-- Big Number -->
  794.                                 <h4>$34,000</h4>
  795.                                 <!-- Chart -->
  796.                                 <div class="chart">
  797.                                     <!-- Bar Chart -->
  798.                                     <span class="eleven-bar-two">4,27,34,52,54,12,10,12,8</span>
  799.                                 </div>
  800.                                 <!-- Icon and Small Number -->
  801.                                 <span> <i class="fa fa-angle-double-down bg-green"></i> 67,989</span>
  802.                             </div> 
  803.                         </div>
  804.                     </div>
  805.                 </div>
  806.                 <!-- Status Eleven Ends -->
  807.                 <br />
  808.                
  809.                 <!-- Heading -->
  810.                 <h4>Status Twelve</h4>
  811.                 <hr />
  812.                 <!-- Status Twelve Starts -->
  813.                 <div class="status-twelve">
  814.                     <div class="row">
  815.                         <div class="col-md-3 col-sm-6 col-xs-6 col-mob">                           
  816.                             <!-- Item -->
  817.                             <div class="item">
  818.                                 <!-- Chart -->
  819.                                 <div class="chart">
  820.                                     <!-- Pie Chart -->
  821.                                     <span class="twelve-pone">13,28,35,16</span>
  822.                                 </div>
  823.                                 <!-- Details -->
  824.                                 <div class="details">
  825.                                     <!-- Heading -->
  826.                                     <h4>Today</h4>
  827.                                     <!-- Unordered Listing -->
  828.                                     <ul>
  829.                                         <li><span><i class="fa fa-angle-double-up red"></i> &nbsp;Visitors</span> <b class="lblue">70%</b></li>
  830.                                         <li><span><i class="fa fa-angle-double-up red"></i> &nbsp;Profit</span> <b class="red">30%</b></li>
  831.                                         <li><span><i class="fa fa-angle-double-down green"></i> &nbsp;Loss</span> <b class="green">40%</b></li>
  832.                                     </ul>
  833.                                 </div>
  834.                             </div> 
  835.                         </div>
  836.                         <div class="col-md-3 col-sm-6 col-xs-6 col-mob">
  837.                             <!-- Item -->
  838.                             <div class="item">
  839.                                 <!-- Chart -->
  840.                                 <div class="chart">
  841.                                     <!-- Pie Chart -->
  842.                                     <span class="twelve-ptwo">54,89,78,65,34</span>
  843.                                 </div>
  844.                                 <!-- Details -->
  845.                                 <div class="details">
  846.                                     <!-- Heading -->
  847.                                     <h4>Yesterday</h4>
  848.                                     <!-- Unordered Listing -->
  849.                                     <ul>
  850.                                         <li><span><i class="fa fa-angle-double-up red"></i> &nbsp;Visitors</span> <b class="lblue">56%</b></li>
  851.                                         <li><span><i class="fa fa-angle-double-up red"></i> &nbsp;Profit</span> <b class="red">35%</b></li>
  852.                                         <li><span><i class="fa fa-angle-double-down green"></i> &nbsp;Loss</span> <b class="green">10%</b></li>
  853.                                     </ul>
  854.                                 </div>
  855.                             </div>     
  856.                         </div>
  857.                         <div class="col-md-3 col-sm-6 col-xs-6 col-mob">
  858.                             <!-- Item -->
  859.                             <div class="item">
  860.                                 <!-- Chart -->
  861.                                 <div class="chart">
  862.                                     <!-- Pie Chart -->
  863.                                     <span class="twelve-pthree">23,90,76,45</span>
  864.                                 </div>
  865.                                 <!-- Details -->
  866.                                 <div class="details">
  867.                                     <!-- Heading -->
  868.                                     <h4>Tuesday</h4>
  869.                                     <!-- Unordered Listing -->
  870.                                     <ul>
  871.                                         <li><span><i class="fa fa-angle-double-up red"></i> &nbsp;Visitors</span> <b class="lblue">43%</b></li>
  872.                                         <li><span><i class="fa fa-angle-double-up red"></i> &nbsp;Profit</span> <b class="red">65%</b></li>
  873.                                         <li><span><i class="fa fa-angle-double-down green"></i> &nbsp;Loss</span> <b class="green">10%</b></li>
  874.                                     </ul>
  875.                                 </div>
  876.                             </div>     
  877.                         </div>
  878.                         <div class="col-md-3 col-sm-6 col-xs-6 col-mob">
  879.                             <!-- Item -->
  880.                             <div class="item">
  881.                                 <!-- Chart -->
  882.                                 <div class="chart">
  883.                                     <!-- Pie Chart -->
  884.                                     <span class="twelve-pfour">56,78,90</span>
  885.                                 </div>
  886.                                 <!-- Details -->
  887.                                 <div class="details">
  888.                                     <!-- Heading -->
  889.                                     <h4>Monday</h4>
  890.                                     <!-- Unordered Listing -->
  891.                                     <ul>
  892.                                         <li><span><i class="fa fa-angle-double-up red"></i> &nbsp;Visitors</span> <b class="lblue">13%</b></li>
  893.                                         <li><span><i class="fa fa-angle-double-up red"></i> &nbsp;Profit</span> <b class="red">45%</b></li>
  894.                                         <li><span><i class="fa fa-angle-double-down green"></i> &nbsp;Loss</span> <b class="green">20%</b></li>
  895.                                     </ul>
  896.                                 </div>
  897.                             </div>     
  898.                         </div>
  899.                     </div>
  900.                 </div>
  901.                 <!-- Status Twelve Ends -->
  902.             </div>
  903.        
  904.         </div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!