diff --git a/my code/03-rotating-nav/index.html b/my code/03-rotating-nav/index.html new file mode 100644 index 0000000..0357678 --- /dev/null +++ b/my code/03-rotating-nav/index.html @@ -0,0 +1,68 @@ + + + + + + + + 03-rotating-nav + + + + + + + + + +
+
+

Amazing Article

+ Florin Pop + +

Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium quia in ratione dolores cupiditate, + maxime aliquid + impedit dolorem nam dolor omnis atque fuga labore modi veritatis porro laborum minus, illo, maiores + recusandae cumque + ipsa quos. Tenetur, consequuntur mollitia labore pariatur sunt quia harum aut. Eum maxime dolorem + provident natus + veritatis molestiae cumque quod voluptates ab non, tempore cupiditate? Voluptatem, molestias culpa. + Corrupti, laudantium + iure aliquam rerum sint nam quas dolor dignissimos in error placeat quae temporibus minus optio eum + soluta cupiditate! + Cupiditate saepe voluptates laudantium. Ducimus consequuntur perferendis consequatur nobis + exercitationem molestias + fugiat commodi omnis. Asperiores quia tenetur nemo ipsa.

+ +

My Dog

+ + + +

Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium quia in ratione dolores cupiditate, + maxime aliquid + impedit dolorem nam dolor omnis atque fuga labore modi veritatis porro laborum minus, illo, maiores + recusandae cumque + ipsa quos. Tenetur, consequuntur mollitia labore pariatur sunt quia harum aut. Eum maxime dolorem + provident natus + veritatis molestiae cumque quod voluptates ab non, tempore cupiditate?

+
+
+ + + + \ No newline at end of file diff --git a/my code/03-rotating-nav/script.js b/my code/03-rotating-nav/script.js new file mode 100644 index 0000000..f14859b --- /dev/null +++ b/my code/03-rotating-nav/script.js @@ -0,0 +1,15 @@ +const body = document.getElementsByTagName("body")[0]; +const openBars = document.getElementById("open"); +const closeBars = document.getElementById("close"); + +function openMenu() { + body.classList.add("active"); + openBars.classList.add("open-active"); + closeBars.classList.add("close-active"); +} + +function closeMenu() { + body.classList.remove("active"); + openBars.classList.remove("open-active"); + closeBars.classList.remove("close-active"); +} diff --git a/my code/03-rotating-nav/style.css b/my code/03-rotating-nav/style.css new file mode 100644 index 0000000..be40402 --- /dev/null +++ b/my code/03-rotating-nav/style.css @@ -0,0 +1,89 @@ +* { + margin: 0; + padding: 0; +} + +body { + background-color: #444; + position: relative; + overflow-x: hidden; + transition: rotate 0.3s linear; +} + +.active { + transform: rotate(-15deg); + transform-origin: top left; +} +@keyframes rotate { + 0% { + transform: rotate(0deg); + transform-origin: top left; + } + 100% { + transform: rotate(-15deg); + transform-origin: top left; + } +} +.wrapper { + width: 100%; + background-color: #fff; + padding: 150px 0; +} + +.container { + margin: auto; + font-family: Arial, Helvetica, sans-serif; + width: 60%; +} + +img { + width: 100%; + height: auto; +} + +p, +img { + margin: 20px 0; +} + +nav { + position: absolute; + width: 200px; + height: 200vh; + color: #fff; + font-weight: 500; + right: 100%; +} + +.hamburger-btn-wrapper { + position: absolute; + top: 0; + left: 100%; + background-color: #000; + width: 100px; + height: 100px; + border-radius: 50%; + font-size: 24px; + transform: translate(-50%, -50%); +} + +.fas { + position: absolute; + top: 70%; + transform: translate(-50%, -50%); +} + +.fa-bars { + left: 70%; +} +.fa-times { + left: 30%; +} + +.open-active { + transform: translate(0%, -150%); +} + +.close-active { + transform: translate(100%, -50%) rotate(15deg); +}