The latest articles on DEV Community by bearv7 (@bearv7). https://dev.to/bearv7 https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1007232%2F550c2f1e-532c-4b9f-8639-7ed93239f29f.png https://dev.to/bearv7 en bearv7 Sun, 28 Apr 2024 15:51:47 +0000 https://dev.to/bearv7/landing-page-for-earth-day-celebration-43gb https://dev.to/bearv7/landing-page-for-earth-day-celebration-43gb <p><em>This is a submission for <a href="https://dev.to/devteam/join-us-for-the-next-frontend-challenge-earth-day-edition-52e4">Frontend Challenge v24.04.17</a>, Glam Up My Markup: Earth Day Celebration Landing Page</em></p> <h2> What I Built </h2> <p>I'm assuming that the landing page is a pop-up window that appears in some platform. This format is much more efficient than a traditional landing page. </p> <p>I break the text into small chunks that can be read in a few seconds. And added a navigator that can be used to see the current location and jump to some position.</p> <p>I also made a mobile and desktop adaptation of the landing page and drew a small illustration.</p> <h2> Demo </h2> <p><iframe height="600" src="https://codepen.io/bearv5/embed/OJGGbwZ?height=600&amp;default-tab=result&amp;embed-version=2"> </iframe> </p> <h2> Journey </h2> <p>Browser implementations of CSS are not quite uniform, such as adaptive layout. I had to test it across browsers in my project.</p> <p>Code License: MIT License</p> <p>Copyright (c) [2024] [Bearv7]</p> devchallenge frontendchallenge css javascript