Advertisement
cornford-michael

ui-302

Oct 10th, 2017
465
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 28.75 KB | None | 0 0
  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