Anna3O0

Dev Ed Tutorial

Apr 9th, 2020
75
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. /* index.html */
  2.  
  3. <!DOCTYPE html>
  4. <html lang="en">
  5.  
  6. <head>
  7. <meta charset="UTF-8">
  8. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  9. <meta http-equiv="X-UA-Compatible" content="ie-edge">
  10. <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
  11. <link rel="stylesheet" href="style.css">
  12. <title>My Page</title>
  13. </head>
  14.  
  15. <body>
  16. <nav>
  17. <div class="logo">
  18. <h1>The Nav</h1>
  19. </div>
  20. <ul class="nav-links">
  21. <li>
  22. <a href="#">Home</a>
  23. </li>
  24. <li>
  25. <a href="#">About</a>
  26. </li>
  27. <li>
  28. <a href="#">Work</a>
  29. </li>
  30. <li>
  31. <a href="#">Projects</a>
  32. </li>
  33. </ul>
  34. <div class="burger">
  35. <div class="line1"></div>
  36. <div class="line2"></div>
  37. <div class="line3"></div>
  38. </div>
  39. </nav>
  40.  
  41. <script src="script.js"></script>
  42. </body>
  43.  
  44. </html>
  45.  
  46. /* style.css */
  47.  
  48. *{/*It is used to select all the tags of the HTML file to apply few common properties to it*/
  49. margin: 0px;
  50. padding: 0px;
  51. box-sizing: border-box;
  52. }
  53.  
  54. nav{
  55. display: flex;
  56. justify-content: space-around;
  57. align-items: center;
  58. min-height: 8vh;
  59. background-color: blue;
  60. font-family: 'Roboto', sans-serif;
  61. }
  62.  
  63. .logo{
  64. color: white;
  65. text-transform: uppercase;
  66. letter-spacing: 5px;
  67. font-size: 20px;
  68. }
  69.  
  70. .nav-links{
  71. display: flex;
  72. justify-content: space-around;
  73. width: 30%;
  74. }
  75.  
  76. .nav-links a{
  77. color: white;
  78. text-decoration: none;
  79. letter-spacing: 3px;
  80. font-weight: bold;
  81. font-size: 14px;
  82. }
  83.  
  84. .nav-links li {
  85. list-style: none;
  86. }
  87.  
  88. .burger{
  89. display: none;
  90. cursor: pointer;
  91. }
  92.  
  93. .burger div{
  94. width: 25px;
  95. height: 3px;
  96. background-color: white;
  97. margin: 5px;
  98. }
  99.  
  100. @media screen and (max-width: 1024px){/*don't forget to take a look at px resolution*/
  101. .nav-links{
  102. width: 60%;
  103. }
  104. }
  105.  
  106. @media screen and (max-width: 768px){
  107. body{
  108. overflow-x : hidden;
  109. }
  110. .nav-links{
  111. position: absolute;
  112. right: 0px;
  113. height: 92vh;
  114. top: 8vh;
  115. background-color: blue;
  116. display: flex;
  117. flex-direction: column;
  118. align-items: center;
  119. width: 50%;
  120. transform: translateX(100%);
  121. transition: transform 0.5s ease-in ;
  122. }
  123. .nav-links li{
  124. opacity: 0;
  125. }
  126. .burger{
  127. display: block;
  128. }
  129. }
  130.  
  131. .nav-active{
  132. transform: translateX(0%);
  133. }
  134.  
  135. /* script.js */
  136.  
  137. consta navSlide = () => {
  138. const burger = document.querySelector('.burger');
  139. const nav = document.querySelector('.nav-links');
  140.  
  141. burger.addEventListener('click', () => {
  142. nav.classList.toggle('nav-active');
  143. });
  144. }
  145.  
  146. navSlide();/* min 22 - https://www.youtube.com/watch?v=gXkqy0b4M5g&t=902s */
RAW Paste Data