diff --git a/50Days/day3_cssonly/index.html b/50Days/day3_cssonly/index.html new file mode 100644 index 0000000..539d23d --- /dev/null +++ b/50Days/day3_cssonly/index.html @@ -0,0 +1,64 @@ + + + + + + + + + + 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_cssonly/script.js b/50Days/day3_cssonly/script.js new file mode 100644 index 0000000..e69de29 diff --git a/50Days/day3_cssonly/style.css b/50Days/day3_cssonly/style.css new file mode 100644 index 0000000..18c1fea --- /dev/null +++ b/50Days/day3_cssonly/style.css @@ -0,0 +1,144 @@ +@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; +} + +.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 { + transform: rotate(-20deg); +} + +.container.show-nav .circle { + transform: rotate(-70deg); +} +input { + display: none; +} + +.circle label { + cursor: pointer; + position: absolute; + height: 75px; + background: transparent; + border: 0; + font-size: 23px; + color: white; +} + +.circle label:focus { + outline: none; +} + +.circle label.open { + left: 55%; + top: 60%; +} + +.circle label.close { + top: 55%; + left: 40%; + transform: rotate(90deg); + transform-origin: top left; +} + +#toggle:checked + .container { + transform: rotate(-20deg); +} + +#toggle:checked + .container .circle { + transform: rotate(-70deg); +} + +#toggle:checked + .container + 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; +}