API tools faq
paste
Anna3O0

Dev Ed Tutorial

Anna3O0
Apr 9th, 2020
75
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 3.00 KB
raw download clone embed print report
  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
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!