diff --git a/index.html b/index.html new file mode 100644 index 0000000..0be22a9 --- /dev/null +++ b/index.html @@ -0,0 +1,26 @@ + + + + + + Document + + + + +
+ +
+ +
+
+ + + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..353ee0b --- /dev/null +++ b/script.js @@ -0,0 +1,7 @@ +document.querySelector(".ri-menu-line").addEventListener("click", function(){ + document.querySelector(".main-nav").style.top = "0%"; +}) + +document.querySelector(".ri-close-circle-line").addEventListener("click", function(){ + document.querySelector(".main-nav").style.top = "-100%"; +}) \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..24d8b07 --- /dev/null +++ b/style.css @@ -0,0 +1,49 @@ +*{ + margin: 0; + padding: 0; + box-sizing: border-box; +} +html , body{ + height: 100%; + width: 100%; +} + +#main{ + width: 100%; + height: 100vh; + position: relative; +} + +nav{ + display: flex; + align-items: center; + justify-content: space-between; + padding: 0% 5%; + width: 100%; + height: 10vh; +} + +nav h1{ + font-family: Product Sans; +} + +nav i{ + font-size: 1.5vw; +} + +.ri-close-circle-line{ + color: #fff; + font-size: 3vw; +} + +.main-nav{ + position: absolute; + display: flex; + align-items: center; + justify-content: center; + top: -100%; + width: 100%; + height: 100vh; + background-color: black; + transition: all cubic-bezier(0.19, 1, 0.22, 1)2s; +} \ No newline at end of file