Advertisement
Guest User

Project

a guest
Jan 26th, 2020
888
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 4.00 KB | None | 0 0
  1. <canvas id="tab"></canvas>
  2. <h1 id="homeBtn" onclick="home()">Home</h1>
  3. <h1 id="marketBtn" onclick="market()">Market</h1>
  4. <h1 id="aboutBtn" onclick="about()">About</h1>
  5. <h1 id="contactsBtn" onclick="contacts()">Contacts</h1>
  6. <h1 id="jobsBtn" onclick="jobs()">Jobs</h1>
  7. <img src="https://i.ya-webdesign.com/images/3-bar-menu-png-12.png" id="menuIcon" width="60" height="50" onclick="menu()">
  8. <canvas id="taskbar"></canvas>
  9. <style>
  10. @import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
  11. body {
  12.  overflow: hidden;
  13.  background: #282c34;
  14.  user-select: none;
  15. }
  16. #taskbar {
  17.  background: #0c0d0f;
  18.  position: absolute;
  19.  left: -250;
  20.  bottom: 307;
  21.  width: 250;
  22.  transition: 1s;
  23.  height: 481;
  24. }
  25. #tab {
  26.  background: rgba(0, 0, 0, 0.7);
  27.  left: 0;
  28.  bottom: 738;
  29.  width: 945;
  30.  height: 50;
  31.  position: absolute;
  32. }
  33. #homeBtn {
  34.  font-Family: 'Roboto';
  35.  color: #7f7f7f;
  36.  position: absolute;
  37.  bottom: 723;
  38.  left: 100;
  39.  cursor: pointer;
  40.  transition: 0.3s;
  41.  border-Radius: 5%;
  42. }
  43. #marketBtn {
  44.  font-Family: 'Roboto';
  45.  color: #7f7f7f;
  46.  position: absolute;
  47.  bottom: 723;
  48.  left: 240;
  49.  cursor: pointer;
  50.  transition: 0.3s;
  51.  border-Radius: 5%;
  52. }
  53. #aboutBtn {
  54.  font-Family: 'Roboto';
  55.  color: #7f7f7f;
  56.  position: absolute;
  57.  bottom: 723;
  58.  left: 420;
  59.  cursor: pointer;
  60.  transition: 0.3s;
  61.  border-Radius: 5%;
  62. }
  63. #contactsBtn {
  64.  font-Family: 'Roboto';
  65.  color: #7f7f7f;
  66.  position: absolute;
  67.  bottom: 723;
  68.  left: 580;
  69.  cursor: pointer;
  70.  transition: 0.3s;
  71.  border-Radius: 5%;
  72. }
  73. #jobsBtn {
  74.  font-Family: 'Roboto';
  75.  color: #7f7f7f;
  76.  position: absolute;
  77.  bottom: 723;
  78.  left: 780;
  79.  cursor: pointer;
  80.  transition: 0.3s;
  81.  border-Radius: 5%;
  82. }
  83. #menuIcon {
  84.  position: absolute;
  85.  bottom: 736;
  86.  left: 20;
  87.  filter: brightness(50%);
  88.  cursor: pointer;
  89.  transition: 1s;
  90. }
  91. #homeBtn:hover {
  92.  color: #fff;
  93. }
  94. #marketBtn:hover {
  95.  color: #fff;
  96. }
  97. #aboutBtn:hover {
  98.  color: #fff;
  99. }
  100. #contactsBtn:hover {
  101.  color: #fff;
  102. }
  103. #jobsBtn:hover {
  104.  color: #fff;
  105. }
  106. #menuIcon:hover {
  107.  filter: brightness(200%);
  108. }
  109. </style>
  110. <script>
  111. function home() {
  112.  homeBtn.style.background = "rgba(255, 255, 255, 0.5)"
  113.  homeBtn.style.color = "#fff"
  114.  marketBtn.style.background = null
  115.  marketBtn.style.color = null
  116.  aboutBtn.style.background = null
  117.  aboutBtn.style.color = null
  118.  contactsBtn.style.background = null
  119.  contactsBtn.style.color = null
  120.  jobsBtn.style.background = null
  121.  jobsBtn.style.color = null
  122. }
  123. function market() {
  124.  homeBtn.style.background = null
  125.  homeBtn.style.color = null
  126.  marketBtn.style.background = "rgba(255, 255, 255, 0.5)"
  127.  marketBtn.style.color = "#fff"
  128.  aboutBtn.style.background = null
  129.  aboutBtn.style.color = null
  130.  contactsBtn.style.background = null
  131.  contactsBtn.style.color = null
  132.  jobsBtn.style.background = null
  133.  jobsBtn.style.color = null
  134. }
  135. function about() {
  136.  aboutBtn.style.background = "rgba(255, 255, 255, 0.5)"
  137.  aboutBtn.style.color = "#fff"
  138.  contactsBtn.style.background = null
  139.  contactsBtn.style.color = null
  140.  homeBtn.style.background = null
  141.  homeBtn.style.color = null
  142.  marketBtn.style.background = null
  143.  marketBtn.style.color = null
  144.  jobsBtn.style.background = null
  145.  jobsBtn.style.color = null
  146. }
  147. function contacts() {
  148.  contactsBtn.style.background = "rgba(255, 255, 255, 0.5)"
  149.  contactsBtn.style.color = "#fff"
  150.  homeBtn.style.background = null
  151.  homeBtn.style.color = null
  152.  marketBtn.style.background = null
  153.  marketBtn.style.color = null
  154.  aboutBtn.style.background = null
  155.  aboutBtn.style.color = null
  156.  jobsBtn.style.background = null
  157.  jobsBtn.style.color = null
  158. }
  159. function jobs() {
  160.  jobsBtn.style.background = "rgba(255, 255, 255, 0.5)"
  161.  jobsBtn.style.color = "#fff"
  162.  homeBtn.style.background = null
  163.  homeBtn.style.color = null
  164.  marketBtn.style.background = null
  165.  marketBtn.style.color = null
  166.  aboutBtn.style.background = null
  167.  aboutBtn.style.color = null
  168.  contactsBtn.style.background = null
  169.  contactsBtn.style.color = null
  170. }
  171. function menu() {
  172.  menuIcon.style.transform = "rotate(360deg)"
  173.  setTimeout(function() { taskbar.style.left = 0 },800)
  174. }
  175. </script>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement