index.php 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311
  1. <!DOCTYPE html>
  2. <html lang="en" >
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Career Profile Page1</title>
  6. <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,700,700italic' rel='stylesheet' type='text/css'>
  7. <link rel='stylesheet' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
  8. <link rel='stylesheet' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css'>
  9. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
  10. <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
  11. <link href="https://cdn.datatables.net/r/bs-3.3.5/jq-2.1.4,dt-1.10.8/datatables.min.css" rel="stylesheet"/>
  12. <script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
  13. <script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap.min.js" charset="utf-8"></script>
  14. <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  15. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
  16. <link rel="stylesheet" href="css/style.css">
  17. <style type="text/css">
  18. td.details-control {
  19. background: url('resources/details_open.png') no-repeat center center;
  20. cursor: pointer;
  21. }
  22. tr.shown td.details-control {
  23. background: url('resources/details_close.png') no-repeat center center;
  24. }
  25. </style>
  26. <style type="text/css">
  27. #example tbody tr:hover {
  28. background-color: cadetblue;
  29. cursor: pointer;
  30. }
  31. #example tr:hover td.sorting_1 {
  32. background-color: cadetblue;
  33. cursor: pointer;
  34. }
  35. #example th {
  36. background-color: #009688;
  37. }
  38. #vehicle tbody tr:hover {
  39. background-color: cadetblue;
  40. cursor: pointer;
  41. }
  42. #vehicle tr:hover td.sorting_1 {
  43. background-color: cadetblue;
  44. cursor: pointer;
  45. }
  46. #vehicle th {
  47. background-color: #009688;
  48. }
  49. #supplier tbody tr:hover {
  50. background-color: cadetblue;
  51. cursor: pointer;
  52. }
  53. #supplier tr:hover td.sorting_1 {
  54. background-color: cadetblue;
  55. cursor: pointer;
  56. }
  57. #supplier th {
  58. background-color: #009688;
  59. }
  60. </style>
  61. <style>
  62. .accordion {
  63. background-color: #d8d4d6;
  64. color: #444;
  65. cursor: pointer;
  66. /* padding: 18px; */
  67. width: 100%;
  68. border: none;
  69. text-align: left;
  70. outline: none;
  71. transition: 0.4s;
  72. }
  73. .active, .accordion:hover {
  74. /* background-color: #ccc; */
  75. }
  76. .panel {
  77. /* padding: 0 18px; */
  78. display: none;
  79. background-color: white;
  80. overflow: hidden;
  81. }
  82. </style>
  83. </head>
  84. <body>
  85. <div class="container-fluid">
  86. <div class="">
  87. <div class="row wrapper">
  88. <!-- <div class="col-md-3 col-sm-4 profile-sidebar">
  89. <img src="https://pbs.twimg.com/profile_images/378800000636617089/b3ee16404fc4fa124ad2917296a897f7.jpeg" class="img-responsive profile-pic center-block"/>
  90. <h1>Brett East</h1>
  91. <ul class="social-links">
  92. <li><a href="#"><i class="fa fa-facebook-square fa-3x"></i></a></li>
  93. <li><a href="#"><i class="fa fa-twitter-square fa-3x"></i></a></li>
  94. <li><a href="#"><i class="fa fa-linkedin-square fa-3x"></i></a></li>
  95. <li><a href="#"><i class="fa fa-google-plus-square fa-3x"></i></a></li>
  96. </ul>
  97. <h2>Websites</h2>
  98. <p><a href="#" class="small">http://www.bretteast.com</a></p>
  99. <p><a href="#" class="small">http://www.career.stackoverflow.com/brett</a></p>
  100. <h2>Tenure</h2>
  101. <p>Full time, Part time, Casual</p>
  102. <h2>Availability</h2>
  103. <p>Weekdays, Mornings, Afternoons, Evenings</p>
  104. </div> -->
  105. <div class="col-md-1 visible-md-block visible-lg-block nav-sidebar">
  106. <ul class="nav">
  107. <li class="image" style="width: 164px;height: 70px; background: #fff;margin-top: -19px;margin-left: -3px;">
  108. <img src="img/Autoleum Logo.jpg" alt="Error" style="width:50px;height:50px;margin-left: 54px;margin-top: 8px;" >
  109. </li>
  110. <li><a href="#page-about" class="accordion"><i class="fa fa-user fa-2x"></i>&nbsp;&nbsp; Operations &nbsp;&nbsp;<i class="fa fa-caret-down"></i></a>
  111. <div class="panel">
  112. <a href="#page-one">Customers</a><br>
  113. <a href="#page-two">Two</a><br>
  114. <a href="#page-three">Three</a><br>
  115. </div></li>
  116. <li><a href="#page-education"><i class="fa fa-graduation-cap fa-2x"></i>&nbsp;&nbsp; Education</a></li>
  117. <li><a href="#page-work"><i class="fa fa-briefcase fa-2x"></i>&nbsp;&nbsp; Work History</a></li>
  118. <!-- <li><a href="#page-skills" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-wrench fa-2x"></i>&nbsp;&nbsp;<br />Skills <i class="fa fa-caret-down"></i></a></li> -->
  119. <!-- <li>
  120. <div class="dropdown">
  121. <a class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-wrench fa-2x"></i>&nbsp;&nbsp;<br />Skills <i class="fa fa-caret-down"></i></a>
  122. <ul class="dropdown-menu">
  123. <li><a href="#" class="hover">HTML</a></li>
  124. <li><a href="#">CSS</a></li>
  125. <li><a href="#">JavaScript</a></li>
  126. </ul>
  127. </div>
  128. </li> -->
  129. <li><a class="accordion"><i class="fa fa-wrench fa-2x"></i>&nbsp;&nbsp; Section 1 &nbsp;&nbsp;<i class="fa fa-caret-down"></i></a>
  130. <div class="panel">
  131. <a>Customers</a><br>
  132. <a>Two</a><br>
  133. <a>Three</a><br>
  134. </div></li>
  135. <li><a href="#page-licences"><i class="fa fa-certificate fa-2x"></i>&nbsp;&nbsp; Licences </a></li>
  136. <li><a href="#page-transport"><i class="fa fa-car fa-2x"></i>&nbsp;&nbsp; Transport</a></li>
  137. <li><a href="#page-providers"><i class="fa fa-check fa-2x"></i>&nbsp;&nbsp; Provider Referrals</a></li>
  138. <li><a href="#page-referees"><i class="fa fa-users fa-2x"></i>&nbsp;&nbsp; Referees</a></li>
  139. </ul>
  140. </div>
  141. <div class="col-md-12 col-sm-8 col-lg-offset-2 content">
  142. <?php include "customers.php" ?>
  143. <hr />
  144. <?php include "education.php" ?>
  145. <hr />
  146. <div id="page-work">
  147. <h2><i class="fa fa-briefcase fa-1x fa-fw"></i> Work History</h2>
  148. <section class="work-history">
  149. <h3 class="wh-company">Warner Music</h3>
  150. <p class="wh-dates"><strong>2010 - Present</strong></p>
  151. <p class="wh-industry">Entertainment</p>
  152. <h4 class="wh-name">Senior Music Manager</h4>
  153. <h5 class="wh-duties-success">Duties & Successes</h5>
  154. <p class="wh-duties-success-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non lacus nisl. Sed condimentum porttitor neque, id pellentesque eros porttitor semper. Aenean nec tellus eu ipsum vehicula accumsan. Vivamus auctor ornare lacus et pretium. Aliquam vel maximus dolor.</p>
  155. </section><!-- .work-history -->
  156. <section class="work-history">
  157. <h3 class="wh-company">Sony Music</h3>
  158. <p class="wh-dates"><strong>2006 - 2009</strong></p>
  159. <p class="wh-industry">Entertainment</p>
  160. <h4 class="wh-name">Junior Music Editor</h4>
  161. <h5 class="wh-duties-success">Duties & Successes</h5>
  162. <p class="wh-duties-success-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non lacus nisl. Sed condimentum porttitor neque, id pellentesque eros porttitor semper. Aenean nec tellus eu ipsum vehicula accumsan. Vivamus auctor ornare lacus et pretium. Aliquam vel maximus dolor.</p>
  163. </section><!-- .work-history -->
  164. </div><!-- #work -->
  165. <hr />
  166. <div id="page-skills">
  167. <h2><i class="fa fa-wrench fa-1x fa-fw"></i> Skills</h2>
  168. <p class="small"><i class="fa fa-star"></i> denotes a 'top skill'</p>
  169. <ul class="skills-ul">
  170. <li>Music <span class="small"><i class="fa fa-star"></i></span></li>
  171. <li>Editing <span class="small"><i class="fa fa-star"></i></span></li>
  172. <li>Management <span class="small"><i class="fa fa-star"></i></span></li>
  173. <li>Sound <span class="small"><i class="fa fa-star"></i></span></li>
  174. <li>Adobe Audition</li>
  175. <li>Management</li>
  176. <li>Sound</li>
  177. <li>Adobe Audition</li>
  178. </ul>
  179. </div><!-- #skills -->
  180. <hr />
  181. <div id="page-licences">
  182. <h2><i class="fa fa-certificate fa-1x fa-fw"></i> Licences and Accreditations</h2>
  183. <dl class="licences-accreditations">
  184. <dt class="la-name">Drivers Licence<dt>
  185. <dd class="la-state">QLD</dd>
  186. <dd class="la-date">current</dd>
  187. </dl>
  188. <dl class="licences-accreditations">
  189. <dt class="la-name">St John's First Aid<dt>
  190. <dd class="la-state">Australia</dd>
  191. <dd class="la-date">2016</dd>
  192. </dl>
  193. </div><!-- #licences -->
  194. <hr />
  195. <div id="page-transport">
  196. <h2><i class="fa fa-car fa-1x fa-fw"></i> Transport</h2>
  197. <p>I use public transport</p>
  198. </div><!-- #transport -->
  199. <hr />
  200. <div id="page-providers">
  201. <h2><i class="fa fa-check fa-1x fa-fw"></i> Provider Referrals</h2>
  202. <section class="provider-referrals">
  203. <h3 class="pr-name">P1 Providers</h3>
  204. <p class="pr-site-desc">P1 Providers specialises in finding roles for skilled workers.</p>
  205. <h4 class="pr-contract-type">Contract Type</h4>
  206. <a href="#" class="pr-link">www.p1providers.com.au</a>
  207. </section><!-- .provider-referrals -->
  208. </div><!-- #providers -->
  209. <hr />
  210. <div id="page-referees">
  211. <h2><i class="fa fa-users fa-1x fa-fw"></i> Referees</h2>
  212. <section class="referees">
  213. <h3 class="r-company">Sony Music</h3>
  214. <p class="r-name">Manager</p>
  215. <h4 class="r-name">John Smith</h4>
  216. <p class="r-phone">(07) 1555 9876</p>
  217. <p class="r-email"><a href="mailto:#">j.smith@sonymusic.com.au</a></p>
  218. </section><!-- .referees -->
  219. <section class="referees">
  220. <h3 class="r-company">Warner Music</h3>
  221. <p class="r-name">Manager</p>
  222. <h4 class="r-name">Gary Miller</h4>
  223. <p class="r-phone">(07) 1555 6543</p>
  224. <p class="r-email"><a href="mailto:#">gary.miller@warnermusic.com</a></p>
  225. </section>
  226. </div><!-- #referees -->
  227. </div><!-- .col-md-8 -->
  228. </div><!-- .row -->
  229. </div><!-- .container -->
  230. </div><!-- .containter-fluid -->
  231. <!-- <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> -->
  232. <!-- <script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script> -->
  233. <script src="js/script.js"></script>
  234. <script>
  235. var acc = document.getElementsByClassName("accordion");
  236. var i;
  237. for (i = 0; i < acc.length; i++) {
  238. acc[i].addEventListener("click", function() {
  239. this.classList.toggle("active");
  240. var panel = this.nextElementSibling;
  241. if (panel.style.display === "block") {
  242. panel.style.display = "none";
  243. } else {
  244. panel.style.display = "block";
  245. }
  246. });
  247. }
  248. </script>
  249. </body>
  250. </html>