The latest articles on DEV Community by dongsu (@devdongsu). https://dev.to/devdongsu 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%2F1100995%2F7e0e4649-bcbe-4595-ae3d-f456574e7e9a.png https://dev.to/devdongsu en dongsu Fri, 26 Apr 2024 04:29:09 +0000 https://dev.to/devdongsu/earth-day-frontend-challenge-landing-page-hugging-earth-30j0 https://dev.to/devdongsu/earth-day-frontend-challenge-landing-page-hugging-earth-30j0 <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 created an interactive website featuring fun scroll events and simple fade animations. </p> <p>I used Figma to draw the Earth and people, and the website's colors are inspired by the colors of the Earth. </p> <p>I aimed for a design that is simple yet visually appealing and effectively communicates the message!</p> <h2> Demo </h2> <p><a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fefqhnbq773gvl6bmzyg6.png" class="article-body-image-wrapper"><img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fefqhnbq773gvl6bmzyg6.png" alt="main" width="800" height="414"></a></p> <p>It does not work well on mobile<br> <a href="https://dev-dong-su.github.io/Dev-to-FE-challenge-Earth-Day/">https://dev-dong-su.github.io/Dev-to-FE-challenge-Earth-Day/</a></p> <p>You can see source code here<br> <a href="https://github.com/dev-dong-su/Dev-to-FE-challenge-Earth-Day">https://github.com/dev-dong-su/Dev-to-FE-challenge-Earth-Day</a></p> <h2> Journey </h2> <p>I implemented a section where a person flies in and hugs the Earth using scroll events and element positioning. </p> <p><a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F665cu7q8yprn49g78v8j.png" class="article-body-image-wrapper"><img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F665cu7q8yprn49g78v8j.png" alt="human" width="548" height="544"></a><br> <a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffi4q894v730bjzxvmm2p.png" class="article-body-image-wrapper"><img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffi4q894v730bjzxvmm2p.png" alt="hug" width="588" height="498"></a></p> <p>However, it was challenging because it behaved differently depending on the browser's height. </p> <p>Although the outcome was a bit different from what I initially envisioned, I still had fun and found it satisfying after several hours of work.</p> devchallenge frontendchallenge css javascript