Horje Website
CSS Responsive Web Design – Analytics Template – CSS Code

CSS Responsive Web Design – Analytics Template

CSS Responsive Web Design - Analytics Template - CSS Code


 
  1. <!DOCTYPE html>
  2. <html>
  3. <title>W3.CSS Template</title>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1">
  6. <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
  7. <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
  8. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  9. <style>
  10. html,body,h1,h2,h3,h4,h5 {font-family: "Raleway", sans-serif}
  11. </style>
  12. <body class="w3-light-grey">
  13. <!-- Top container -->
  14. <div class="w3-bar w3-top w3-black w3-large" style="z-index:4">
  15. <button class="w3-bar-item w3-button w3-hide-large w3-hover-none w3-hover-text-light-grey" onclick="w3_open();"><i class="fa fa-bars"></i>  Menu</button>
  16. <span class="w3-bar-item w3-right">Logo</span>
  17. </div>
  18. <!-- Sidebar/menu -->
  19. <nav class="w3-sidebar w3-collapse w3-white w3-animate-left" style="z-index:3;width:300px;" id="mySidebar"><br>
  20. <div class="w3-container w3-row">
  21. <div class="w3-col s4">
  22. <img src="https://www.w3schools.com//w3images/avatar2.png" class="w3-circle w3-margin-right" style="width:46px">
  23. </div>
  24. <div class="w3-col s8 w3-bar">
  25. <span>Welcome, <strong>Mike</strong></span><br>
  26. <a href="#" class="w3-bar-item w3-button"><i class="fa fa-envelope"></i></a>
  27. <a href="#" class="w3-bar-item w3-button"><i class="fa fa-user"></i></a>
  28. <a href="#" class="w3-bar-item w3-button"><i class="fa fa-cog"></i></a>
  29. </div>
  30. </div>
  31. <hr>
  32. <div class="w3-container">
  33. <h5>Dashboard</h5>
  34. </div>
  35. <div class="w3-bar-block">
  36. <a href="#" class="w3-bar-item w3-button w3-padding-16 w3-hide-large w3-dark-grey w3-hover-black" onclick="w3_close()" title="close menu"><i class="fa fa-remove fa-fw"></i>  Close Menu</a>
  37. <a href="#" class="w3-bar-item w3-button w3-padding w3-blue"><i class="fa fa-users fa-fw"></i>  Overview</a>
  38. <a href="#" class="w3-bar-item w3-button w3-padding"><i class="fa fa-eye fa-fw"></i>  Views</a>
  39. <a href="#" class="w3-bar-item w3-button w3-padding"><i class="fa fa-users fa-fw"></i>  Traffic</a>
  40. <a href="#" class="w3-bar-item w3-button w3-padding"><i class="fa fa-bullseye fa-fw"></i>  Geo</a>
  41. <a href="#" class="w3-bar-item w3-button w3-padding"><i class="fa fa-diamond fa-fw"></i>  Orders</a>
  42. <a href="#" class="w3-bar-item w3-button w3-padding"><i class="fa fa-bell fa-fw"></i>  News</a>
  43. <a href="#" class="w3-bar-item w3-button w3-padding"><i class="fa fa-bank fa-fw"></i>  General</a>
  44. <a href="#" class="w3-bar-item w3-button w3-padding"><i class="fa fa-history fa-fw"></i>  History</a>
  45. <a href="#" class="w3-bar-item w3-button w3-padding"><i class="fa fa-cog fa-fw"></i>  Settings</a><br><br>
  46. </div>
  47. </nav>
  48. <!-- Overlay effect when opening sidebar on small screens -->
  49. <div class="w3-overlay w3-hide-large w3-animate-opacity" onclick="w3_close()" style="cursor:pointer" title="close side menu" id="myOverlay"></div>
  50. <!-- !PAGE CONTENT! -->
  51. <div class="w3-main" style="margin-left:300px;margin-top:43px;">
  52. <!-- Header -->
  53. <header class="w3-container" style="padding-top:22px">
  54. <h5><b><i class="fa fa-dashboard"></i> My Dashboard</b></h5>
  55. </header>
  56. <div class="w3-row-padding w3-margin-bottom">
  57. <div class="w3-quarter">
  58. <div class="w3-container w3-red w3-padding-16">
  59. <div class="w3-left"><i class="fa fa-comment w3-xxxlarge"></i></div>
  60. <div class="w3-right">
  61. <h3>52</h3>
  62. </div>
  63. <div class="w3-clear"></div>
  64. <h4>Messages</h4>
  65. </div>
  66. </div>
  67. <div class="w3-quarter">
  68. <div class="w3-container w3-blue w3-padding-16">
  69. <div class="w3-left"><i class="fa fa-eye w3-xxxlarge"></i></div>
  70. <div class="w3-right">
  71. <h3>99</h3>
  72. </div>
  73. <div class="w3-clear"></div>
  74. <h4>Views</h4>
  75. </div>
  76. </div>
  77. <div class="w3-quarter">
  78. <div class="w3-container w3-teal w3-padding-16">
  79. <div class="w3-left"><i class="fa fa-share-alt w3-xxxlarge"></i></div>
  80. <div class="w3-right">
  81. <h3>23</h3>
  82. </div>
  83. <div class="w3-clear"></div>
  84. <h4>Shares</h4>
  85. </div>
  86. </div>
  87. <div class="w3-quarter">
  88. <div class="w3-container w3-orange w3-text-white w3-padding-16">
  89. <div class="w3-left"><i class="fa fa-users w3-xxxlarge"></i></div>
  90. <div class="w3-right">
  91. <h3>50</h3>
  92. </div>
  93. <div class="w3-clear"></div>
  94. <h4>Users</h4>
  95. </div>
  96. </div>
  97. </div>
  98. <div class="w3-panel">
  99. <div class="w3-row-padding" style="margin:0 -16px">
  100. <div class="w3-third">
  101. <h5>Regions</h5>
  102. <img src="https://www.w3schools.com//w3images/region.jpg" style="width:100%" alt="Google Regional Map">
  103. </div>
  104. <div class="w3-twothird">
  105. <h5>Feeds</h5>
  106. <table class="w3-table w3-striped w3-white">
  107. <tr>
  108. <td><i class="fa fa-user w3-text-blue w3-large"></i></td>
  109. <td>New record, over 90 views.</td>
  110. <td><i>10 mins</i></td>
  111. </tr>
  112. <tr>
  113. <td><i class="fa fa-bell w3-text-red w3-large"></i></td>
  114. <td>Database error.</td>
  115. <td><i>15 mins</i></td>
  116. </tr>
  117. <tr>
  118. <td><i class="fa fa-users w3-text-yellow w3-large"></i></td>
  119. <td>New record, over 40 users.</td>
  120. <td><i>17 mins</i></td>
  121. </tr>
  122. <tr>
  123. <td><i class="fa fa-comment w3-text-red w3-large"></i></td>
  124. <td>New comments.</td>
  125. <td><i>25 mins</i></td>
  126. </tr>
  127. <tr>
  128. <td><i class="fa fa-bookmark w3-text-blue w3-large"></i></td>
  129. <td>Check transactions.</td>
  130. <td><i>28 mins</i></td>
  131. </tr>
  132. <tr>
  133. <td><i class="fa fa-laptop w3-text-red w3-large"></i></td>
  134. <td>CPU overload.</td>
  135. <td><i>35 mins</i></td>
  136. </tr>
  137. <tr>
  138. <td><i class="fa fa-share-alt w3-text-green w3-large"></i></td>
  139. <td>New shares.</td>
  140. <td><i>39 mins</i></td>
  141. </tr>
  142. </table>
  143. </div>
  144. </div>
  145. </div>
  146. <hr>
  147. <div class="w3-container">
  148. <h5>General Stats</h5>
  149. <p>New Visitors</p>
  150. <div class="w3-grey">
  151. <div class="w3-container w3-center w3-padding w3-green" style="width:25%">+25%</div>
  152. </div>
  153. <p>New Users</p>
  154. <div class="w3-grey">
  155. <div class="w3-container w3-center w3-padding w3-orange" style="width:50%">50%</div>
  156. </div>
  157. <p>Bounce Rate</p>
  158. <div class="w3-grey">
  159. <div class="w3-container w3-center w3-padding w3-red" style="width:75%">75%</div>
  160. </div>
  161. </div>
  162. <hr>
  163. <div class="w3-container">
  164. <h5>Countries</h5>
  165. <table class="w3-table w3-striped w3-bordered w3-border w3-hoverable w3-white">
  166. <tr>
  167. <td>United States</td>
  168. <td>65%</td>
  169. </tr>
  170. <tr>
  171. <td>UK</td>
  172. <td>15.7%</td>
  173. </tr>
  174. <tr>
  175. <td>Russia</td>
  176. <td>5.6%</td>
  177. </tr>
  178. <tr>
  179. <td>Spain</td>
  180. <td>2.1%</td>
  181. </tr>
  182. <tr>
  183. <td>India</td>
  184. <td>1.9%</td>
  185. </tr>
  186. <tr>
  187. <td>France</td>
  188. <td>1.5%</td>
  189. </tr>
  190. </table><br>
  191. <button class="w3-button w3-dark-grey">More Countries  <i class="fa fa-arrow-right"></i></button>
  192. </div>
  193. <hr>
  194. <div class="w3-container">
  195. <h5>Recent Users</h5>
  196. <ul class="w3-ul w3-card-4 w3-white">
  197. <li class="w3-padding-16">
  198. <img src="https://www.w3schools.com//w3images/avatar2.png" class="w3-left w3-circle w3-margin-right" style="width:35px">
  199. <span class="w3-xlarge">Mike</span><br>
  200. </li>
  201. <li class="w3-padding-16">
  202. <img src="https://www.w3schools.com//w3images/avatar5.png" class="w3-left w3-circle w3-margin-right" style="width:35px">
  203. <span class="w3-xlarge">Jill</span><br>
  204. </li>
  205. <li class="w3-padding-16">
  206. <img src="https://www.w3schools.com//w3images/avatar6.png" class="w3-left w3-circle w3-margin-right" style="width:35px">
  207. <span class="w3-xlarge">Jane</span><br>
  208. </li>
  209. </ul>
  210. </div>
  211. <hr>
  212. <div class="w3-container">
  213. <h5>Recent Comments</h5>
  214. <div class="w3-row">
  215. <div class="w3-col m2 text-center">
  216. <img class="w3-circle" src="https://www.w3schools.com//w3images/avatar3.png" style="width:96px;height:96px">
  217. </div>
  218. <div class="w3-col m10 w3-container">
  219. <h4>John <span class="w3-opacity w3-medium">Sep 29, 2014, 9:12 PM</span></h4>
  220. <p>Keep up the GREAT work! I am cheering for you!! Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p><br>
  221. </div>
  222. </div>
  223. <div class="w3-row">
  224. <div class="w3-col m2 text-center">
  225. <img class="w3-circle" src="https://www.w3schools.com//w3images/avatar1.png" style="width:96px;height:96px">
  226. </div>
  227. <div class="w3-col m10 w3-container">
  228. <h4>Bo <span class="w3-opacity w3-medium">Sep 28, 2014, 10:15 PM</span></h4>
  229. <p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p><br>
  230. </div>
  231. </div>
  232. </div>
  233. <br>
  234. <div class="w3-container w3-dark-grey w3-padding-32">
  235. <div class="w3-row">
  236. <div class="w3-container w3-third">
  237. <h5 class="w3-bottombar w3-border-green">Demographic</h5>
  238. <p>Language</p>
  239. <p>Country</p>
  240. <p>City</p>
  241. </div>
  242. <div class="w3-container w3-third">
  243. <h5 class="w3-bottombar w3-border-red">System</h5>
  244. <p>Browser</p>
  245. <p>OS</p>
  246. <p>More</p>
  247. </div>
  248. <div class="w3-container w3-third">
  249. <h5 class="w3-bottombar w3-border-orange">Target</h5>
  250. <p>Users</p>
  251. <p>Active</p>
  252. <p>Geo</p>
  253. <p>Interests</p>
  254. </div>
  255. </div>
  256. </div>
  257. <!-- Footer -->
  258. <footer class="w3-container w3-padding-16 w3-light-grey">
  259. <h4>FOOTER</h4>
  260. <p>Powered by <a href="https://www.w3schools.com/w3css/default.asp" target="_blank">w3.css</a></p>
  261. </footer>
  262. <!-- End page content -->
  263. </div>
  264. <script>
  265. // Get the Sidebar
  266. var mySidebar = document.getElementById("mySidebar");
  267. // Get the DIV with overlay effect
  268. var overlayBg = document.getElementById("myOverlay");
  269. // Toggle between showing and hiding the sidebar, and add overlay effect
  270. function w3_open() {
  271. if (mySidebar.style.display === 'block') {
  272. mySidebar.style.display = 'none';
  273. overlayBg.style.display = "none";
  274. } else {
  275. mySidebar.style.display = 'block';
  276. overlayBg.style.display = "block";
  277. }
  278. }
  279. // Close the sidebar with the close button
  280. function w3_close() {
  281. mySidebar.style.display = "none";
  282. overlayBg.style.display = "none";
  283. }
  284. </script>
  285. </body>
  286. </html>



Try Your Self ->



Published:
 July 18, 2020
Author:
 admin
Category:
 CSS Responsive, CSS Source Code
Views:
 27

This article was posted in CSS Responsive, CSS Source Code and tagged , , . Bookmark the permalink. Follow comments with the RSS feed for this post.Post a Comment or leave a trackback: Trackback URL.

Leave a Reply

Your email address will not be published. Required fields are marked *

 

Horje © 2011 - 2023