From 2cef727b24491cb8ce8ae0bed433fc430dadb2c8 Mon Sep 17 00:00:00 2001 From: ThronRycer Date: Fri, 9 Apr 2021 21:27:41 +0200 Subject: [PATCH] Finished Day 3 --- 50Days/day3/index.html | 65 ++++++++++++++++++++ 50Days/day3/script.js | 11 ++++ 50Days/day3/style.css | 134 +++++++++++++++++++++++++++++++++++++++++ 3 files changed, 210 insertions(+) create mode 100644 50Days/day3/index.html create mode 100644 50Days/day3/script.js create mode 100644 50Days/day3/style.css diff --git a/50Days/day3/index.html b/50Days/day3/index.html new file mode 100644 index 0000000..91fb90d --- /dev/null +++ b/50Days/day3/index.html @@ -0,0 +1,65 @@ + + + + + + + + + + Day 3: Rotating Navigation + + + +
+
+
+ + +
+
+
+

Amazing Article

+ The Writer +

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum odio, + maiores nostrum debitis, natus numquam velit minus officia a + consequuntur quaerat obcaecati perspiciatis repudiandae suscipit nemo + accusamus quam beatae pariatur iste cumque. Quibusdam illo mollitia + unde odio eligendi ratione atque amet sunt fugit, laborum harum + officiis at placeat dolore. Est optio omnis delectus hic voluptatem + quam, cumque iusto laudantium ullam? Fugit, voluptates fugiat + perferendis sunt corrupti vitae ab aperiam ipsa voluptatum, maiores + maxime? Perferendis commodi architecto eligendi culpa ipsam adipisci + magni deleniti placeat voluptatum, facilis deserunt id expedita vero! + Repellendus possimus at harum fugiat repellat rem consequatur, placeat + dignissimos soluta. +

+ +

My Image

+ +
+
+ + + + + diff --git a/50Days/day3/script.js b/50Days/day3/script.js new file mode 100644 index 0000000..2951b88 --- /dev/null +++ b/50Days/day3/script.js @@ -0,0 +1,11 @@ +const open = document.getElementById('open'); +const close = document.getElementById('close'); +const container = document.querySelector('.container'); + +open.addEventListener('click', () => { + container.classList.add('show-nav'); +}); + +close.addEventListener('click', () => { + container.classList.remove('show-nav'); +}); diff --git a/50Days/day3/style.css b/50Days/day3/style.css new file mode 100644 index 0000000..f1e8a4b --- /dev/null +++ b/50Days/day3/style.css @@ -0,0 +1,134 @@ +@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap'); + +* { + box-sizing: border-box; +} + +body { + font-family: 'Lato', sans-serif; + background-color: #333; + color: #222; + overflow-x: hidden; + margin: 0; +} + +.container { + background-color: #fafafa; + transform-origin: top left; + transition: transform 0.5s linear; + width: 100vw; + min-height: 100vh; + padding: 50px; +} + +.container.show-nav { + transform: rotate(-20deg); +} + +.circle-container { + position: fixed; + top: -75px; + left: -75px; +} + +.circle { + background-color: #ff7979; + height: 150px; + width: 150px; + border-radius: 50%; + position: relative; + transition: transform 0.5s linear; +} + +.container.show-nav .circle { + transform: rotate(-70deg); +} + +.circle button { + cursor: pointer; + position: absolute; + top: 50%; + left: 50%; + height: 75px; + background: transparent; + border: 0; + font-size: 23px; + color: white; +} + +.circle button:focus { + outline: none; +} + +.circle button#open { + left: 55%; +} + +.circle button#close { + top: 55%; + transform: rotate(90deg); + transform-origin: top left; +} + +.container.show-nav + nav li { + transform: translateX(0); + transition-delay: 0.3s; +} + +nav { + position: fixed; + bottom: 40px; + left: 0; + z-index: 100; +} + +nav ul { + list-style-type: none; + padding-left: 30px; +} + +nav li { + text-transform: uppercase; + color: #fff; + margin: 40px 0; + transform: translateX(-100%); + transition: transform 0.2s ease-in; +} + +nav li i { + font-size: 20px; + margin-right: 10px; +} + +nav ul li + li { + margin-left: 15px; + transform: translateX(-150%); +} + +nav ul li + li + li { + margin-left: 30px; + transform: translateX(-200%); +} + +.content { + max-width: 1000px; + margin: 0 auto; +} + +.content img { + max-width: 100%; +} + +.content h1 { + margin: 0; +} + +.content small { + color: #555; + font-style: italic; +} + +.content p { + color: #333; + line-height: 1.5; +}