DEV Community

Cover image for Submission for Frontend Challenge Earth-Day-Edition: different elements of Earth: CSS Card animation
Sundus Hussain
Sundus Hussain

Posted on • Updated on

Submission for Frontend Challenge Earth-Day-Edition: different elements of Earth: CSS Card animation

This is a submission for Frontend Challenge v24.04.17, Glam Up My Markup: Earth Day Celebration Landing Page

Inspiration
really worked hard on this, I badly want the gift from the DEV shop 🙂🙃🙂🙃

What I Built
The inspiration for this CSS animation project is drawn from the various elements of earth (soil, water, fire, air, and space).

Demo
Below given is live link for the submission.
Live Link: https://sundus-hussain.github.io/final_earth_day/

Source code: https://github.com/Sundus-hussain/final_earth_day

Journey
The journey begins with finding the right concept.
This design embraces a whimsical yet sophisticated aesthetic, revealing hidden treasures with every click.
Witness creativity blossoming in every pixel, inviting exploration and discovery at every click.
This design is created keeping in mind about the color contrast and opacity of the images(I am still doubtful about it.... hope you like it!!!), and screen reader compatibility.
Responsive design ensures a flawless viewing experience across devices, from desktops to smartphones.
image links:(https://www.craiyon.com/image/sKXNCYtIR5GwfYl4bfKIZg , https://www.istockphoto.com/photo/burning-earth-gm174702179-9948965 , https://sm.mashable.com/mashable_in/photo/default/gw-copy_87rn.jpg, https://w0.peakpx.com/wallpaper/740/461/HD-wallpaper-earth-view-from-space-earth-space-digital-universe.jpg , https://t4.ftcdn.net/jpg/05/55/32/99/360_F_555329972_7CNEDOvl34YykCyeoRe8dMbF5yNTcDRE.jpg, https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcR125PDJbp3L8zOWWTIfke2E4kft5TzVpBsq3LyeJePs2LKkBN5)

Thank you!

Top comments (14)

Collapse
 
jorgedelcampo profile image
Jorge del Campo

Nice card animation!

Collapse
 
sundus profile image
Sundus Hussain

Congratulations u won

Collapse
 
sundus profile image
Sundus Hussain

Thank you so much

Collapse
 
sundus profile image
Sundus Hussain

Thank you

Collapse
 
shahidkhan123 profile image
Shahid

Really liked it...All the best!!!

Collapse
 
sundus profile image
Sundus Hussain

Thanks a lot...

Collapse
 
sufism profile image
Sufi

Beautiful design....good luck!!!

Collapse
 
sundus profile image
Sundus Hussain

Thanks

Collapse
 
shahidkhan123 profile image
Shahid

Best use CSS only

Collapse
 
sundus profile image
Sundus Hussain

Yes, I tried using only CSS as mentioned.

Collapse
 
dannyblue profile image
Daniel blue

Great

Collapse
 
sundus profile image
Sundus Hussain

Thanks

Collapse
 
saratongo profile image
Sara

great work

Collapse
 
sundus profile image
Sundus Hussain

Thanks Sara